From e87deec34c3d9446268dc76398288802e08ec697 Mon Sep 17 00:00:00 2001 From: hanyuxia Date: Wed, 1 Mar 2023 16:52:33 +0800 Subject: [PATCH] =?UTF-8?q?CN-903=20=E4=BA=BA=E5=B7=A5=E6=B5=8B=E8=AF=95--?= =?UTF-8?q?NetworkOverviewLine=EF=BC=9A(1)=20=E7=99=BB=E5=BD=95=E7=B3=BB?= =?UTF-8?q?=E7=BB=9F=E5=90=8E=EF=BC=8C=E7=82=B9=E5=87=BB=E5=85=B6=E4=B8=AD?= =?UTF-8?q?=E4=B8=80=E4=B8=AATab=E6=A0=87=E7=AD=BE=EF=BC=8C=E5=86=8D?= =?UTF-8?q?=E7=82=B9=E5=87=BB=E4=BA=8C=E7=BA=A7=E8=8F=9C=E5=8D=95=EF=BC=88?= =?UTF-8?q?=E7=BD=91=E7=BB=9C=E6=A6=82=E5=86=B5=EF=BC=89=E6=88=96=E8=80=85?= =?UTF-8?q?=E5=8F=B3=E4=BE=A7=E5=88=B7=E6=96=B0=E6=8C=89=E9=92=AE=E6=88=96?= =?UTF-8?q?=E8=80=85F5=E5=88=B7=E6=96=B0=EF=BC=8C=E6=8A=98=E7=BA=BF?= =?UTF-8?q?=E5=9B=BE=E4=B8=8D=E6=98=BE=E7=A4=BA;(2)=E5=88=87=E6=8D=A2?= =?UTF-8?q?=E5=8F=82=E8=80=83=E7=BA=BF=EF=BC=9A=E6=8A=A5=E9=94=99=EF=BC=8C?= =?UTF-8?q?=E7=95=8C=E9=9D=A2=E6=95=B0=E6=8D=AE=E4=B8=8D=E6=9B=B4=E6=96=B0?= =?UTF-8?q?;(3)=E7=82=B9=E5=87=BB=E9=AB=98=E4=BA=AE=20tab=20=E5=90=8E?= =?UTF-8?q?=E6=9C=AA=E5=8F=96=E6=B6=88=E9=AB=98=E4=BA=AE=EF=BC=8C=E6=9C=AA?= =?UTF-8?q?=E6=81=A2=E5=A4=8D=E5=88=B0=E5=85=A8=E4=B8=8D=E9=AB=98=E4=BA=AE?= =?UTF-8?q?=E7=9A=84=E7=8A=B6=E6=80=81=EF=BC=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../networkOverview/NetworkOverviewLine.vue | 64 ++++++++++++------- 1 file changed, 41 insertions(+), 23 deletions(-) diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue index 2872873d..816ee2d3 100644 --- a/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue +++ b/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue @@ -249,7 +249,7 @@ export default { if (!this.isUnitTesting) { if (this.lineTab) { this.handleActiveBar() - echartsData = echartsData.filter(t => t.show === true && t.invertTab === false) + echartsData = echartsData.filter(t => t.show === true && t.class === this.lineTab)//t.invertTab === false } else { echartsData = echartsData.filter(t => t.show === true) } @@ -262,6 +262,10 @@ export default { return { ...chartOption, name: t.name, + type: "line", + showSymbol: false, + smooth: true, + symbol: "circle", lineStyle: { color: chartColor3[t.positioning], width: 1 @@ -405,9 +409,15 @@ export default { }, activeChange (item, index) { if (this.isNoData) return - this.lineTab = item.class - this.legendSelectChange(item, index, 'active') - this.showMarkLine = !item.invertTab + if(this.lineTab === item.class){//点击高亮 tab 后取消高亮，恢复到全不高亮的状态 + this.legendSelectChange(item, index, 'active',true) + this.lineTab = '' + this.showMarkLine = false + }else { + this.legendSelectChange(item, index, 'active') + this.lineTab = item.class + this.showMarkLine = !item.invertTab + } this.init(this.metric, this.showMarkLine, 'active') }, mouseenter (item) { @@ -430,16 +440,22 @@ export default { name: name }) }, - legendSelectChange (item, index, val) { + legendSelectChange (item, index, val,isActiveAll) { if (index === 'index') { this.dispatchLegendSelectAction(item.name) } else if (this.tabs[index] && this.tabs[index].name === item.name) { - this.dispatchLegendSelectAction(item.name) - this.tabs.forEach((t) => { - if (t.name !== item.name) { - this.dispatchLegendUnSelectAction(t.name) - } - }) + if(isActiveAll){ + this.tabs.forEach((t) => { + this.dispatchLegendSelectAction(t.name) + }) + } else { + this.dispatchLegendSelectAction(item.name) + this.tabs.forEach((t) => { + if (t.name !== item.name) { + this.dispatchLegendUnSelectAction(t.name) + } + }) + } } if (val === 'active') { this.tabs.forEach(t => { @@ -475,7 +491,7 @@ export default { this.lineRefer = val let echartsData if (this.lineTab) { - echartsData = this.tabs.filter(t => t.show === true && t.invertTab === false) + echartsData = this.tabs.filter(t => t.show === true && t.class === this.lineTab)//t.invertTab === false } else { echartsData = this.tabs.filter(t => t.show === true) } @@ -597,6 +613,7 @@ export default { tabs[i].analysis = d.analysis }) let num = 0 + let self = this tabs.forEach(e => { e.unitType = type if (e.name !== 'network.total' && parseFloat(e.analysis.avg) == 0) { @@ -604,15 +621,15 @@ export default { num += 1 } else { e.show = true - if (!active && show !== this.lineRefer) { - this.legendSelectChange(e, 'index') + if (!active && show !== self.lineRefer) { + self.legendSelectChange(e, 'index') } } - if (this.lineTab === e.class) { + if (self.lineTab === e.class) { if (parseFloat(e.analysis.avg) <= 0) { - this.lineTab = '' - this.lineRefer = '' - this.init() + self.lineTab = '' + self.lineRefer = '' + self.init() } } }) @@ -652,12 +669,13 @@ export default { // this.domInit() this.myChart = null this.chartOption = null - this.timer = setTimeout(() => { - if (this.lineTab && this.metric !== 'Sessions/s') { - const data = this.tabsTemplate.find(t => t.class === this.lineTab) - this.activeChange(data, data.positioning) + let self = this + self.timer = setTimeout(() => { + if (self.lineTab && self.metric !== 'Sessions/s') { + const data = self.tabsTemplate.find(t => t.class === self.lineTab) + self.activeChange(data, data.positioning) } else { - this.init() + self.init() } }, 200) window.addEventListener('resize', this.resize)