fix: 修复一开始没数据,更改条件后有数据也刷不出来的问题

This commit is contained in:
chenjinsong
2022-09-06 11:15:48 +08:00
parent 39dc0b8e40
commit 5be4044b51
4 changed files with 31 additions and 25 deletions

View File

@@ -59,7 +59,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="chart-drawing" v-show="showMarkLine" id="chart"></div> <div class="chart-drawing" v-show="showMarkLine" id="overviewLineChart"></div>
</template> </template>
</div> </div>
</template> </template>
@@ -199,7 +199,9 @@ export default {
} }
}) })
this.mpackets = mpackets this.mpackets = mpackets
this.$nextTick(() => {
this.echartsInit(this.mpackets, show) this.echartsInit(this.mpackets, show)
})
} else if (t.type === 'packets' && val === 'Packets/s') { } else if (t.type === 'packets' && val === 'Packets/s') {
const mpackets = _.cloneDeep(this.mpackets) const mpackets = _.cloneDeep(this.mpackets)
mpackets[0].analysis = t.totalPacketsRate.analysis mpackets[0].analysis = t.totalPacketsRate.analysis
@@ -226,7 +228,9 @@ export default {
} }
}) })
this.mpackets = mpackets this.mpackets = mpackets
this.$nextTick(() => {
this.echartsInit(this.mpackets, show) this.echartsInit(this.mpackets, show)
})
} else if (t.type === 'sessions' && val === 'Sessions/s') { } else if (t.type === 'sessions' && val === 'Sessions/s') {
const mpackets = _.cloneDeep(this.mpackets) const mpackets = _.cloneDeep(this.mpackets)
mpackets[0].analysis = t.totalSessionsRate.analysis mpackets[0].analysis = t.totalSessionsRate.analysis
@@ -241,11 +245,14 @@ export default {
} }
}) })
this.mpackets = mpackets this.mpackets = mpackets
this.$nextTick(() => {
this.echartsInit(this.mpackets, show) this.echartsInit(this.mpackets, show)
})
} }
}) })
} }
}).catch(e => { }).catch(e => {
console.error(e)
this.isNoData = true this.isNoData = true
}).finally(() => { }).finally(() => {
this.toggleLoading(false) this.toggleLoading(false)
@@ -254,7 +261,7 @@ export default {
echartsInit (echartsData, show) { echartsInit (echartsData, show) {
const _this = this const _this = this
echartsData = echartsData.filter(t => t.show === true) echartsData = echartsData.filter(t => t.show === true)
const dom = document.getElementById('chart') const dom = document.getElementById('overviewLineChart')
if (!this.myChart) { if (!this.myChart) {
this.myChart = echarts.init(dom) this.myChart = echarts.init(dom)
} }

View File

@@ -4,12 +4,12 @@
<div class="performance-event-value"> <div class="performance-event-value">
<div class="performance-event-pie"> <div class="performance-event-pie">
<chart-no-data v-if="isNoData"></chart-no-data> <chart-no-data v-if="isNoData"></chart-no-data>
<div class="chart-drawing" id="chart1" v-else></div> <div class="chart-drawing" id="chart1" v-show="!isNoData"></div>
</div> </div>
<div class="performance-event-pie-hr"></div> <div class="performance-event-pie-hr"></div>
<div class="performance-event-pie"> <div class="performance-event-pie">
<chart-no-data v-if="isNoData2"></chart-no-data> <chart-no-data v-if="isNoData2"></chart-no-data>
<div class="chart-drawing" id="chart2" v-else></div> <div class="chart-drawing" id="chart2" v-show="!isNoData2"></div>
</div> </div>
</div> </div>
<el-button class="pie-button" size="small">{{$t('network.dashboards')}}<i class="cn-icon cn-icon-arrow-right"></i></el-button> <el-button class="pie-button" size="small">{{$t('network.dashboards')}}<i class="cn-icon cn-icon-arrow-right"></i></el-button>
@@ -63,6 +63,8 @@ export default {
if (res.data.result.length === 0) { if (res.data.result.length === 0) {
this.isNoData = true this.isNoData = true
return return
} else {
this.isNoData = false
} }
res.data.result = res.data.result.map(t => { res.data.result = res.data.result.map(t => {
if (t.eventSeverity === 'critical') { if (t.eventSeverity === 'critical') {
@@ -82,11 +84,7 @@ export default {
index: t.index index: t.index
} }
}) })
if (res.data.result.length <= 0) { this.chartOption.legend.show = res.data.result.length > 0
this.chartOption.legend.show = false
} else {
this.chartOption.legend.show = true
}
this.chartOption.series[0].data = res.data.result.sort((a, b) => { return a.index - b.index }) this.chartOption.series[0].data = res.data.result.sort((a, b) => { return a.index - b.index })
this.myChart.setOption(this.chartOption) this.myChart.setOption(this.chartOption)
} else { } else {

View File

@@ -43,15 +43,14 @@
<script> <script>
import * as echarts from 'echarts' import * as echarts from 'echarts'
import { npmLineChartOption } from '@/views/charts2/charts/options/echartOption.js' import {npmLineChartOption} from '@/views/charts2/charts/options/echartOption.js'
import { shallowRef } from 'vue' import {shallowRef} from 'vue'
import _ from 'lodash' import _ from 'lodash'
import { stackedLineTooltipFormatter } from '@/views/charts/charts/tools' import {stackedLineTooltipFormatter} from '@/views/charts/charts/tools'
import { getSecond } from '@/utils/date-util' import {getSecond} from '@/utils/date-util'
import { get } from '@/utils/http' import {get} from '@/utils/http'
import { api } from '@/utils/api' import {api} from '@/utils/api'
import ChartNoData from '@/views/charts/charts/ChartNoData' import ChartNoData from '@/views/charts/charts/ChartNoData'
import { throughputData, tcpData, httpData, sslData, packetsLossData, packetsRetrainsData } from '@/views/charts2/charts/npmLineData'
import chartMixin from '@/views/charts2/chart-mixin' import chartMixin from '@/views/charts2/chart-mixin'
export default { export default {
@@ -258,11 +257,13 @@ export default {
params.forEach(t => { params.forEach(t => {
t.seriesName = this.$t(t.seriesName) t.seriesName = this.$t(t.seriesName)
}) })
const str = stackedLineTooltipFormatter(params) return stackedLineTooltipFormatter(params)
return str
} }
this.myChartArray.push(this.myChart) this.myChartArray.push(this.myChart)
this.myChart.setOption(this.chartOption) this.myChart.setOption(this.chartOption)
this.$nextTick(() => {
this.myChart.resize()
})
} }
}, },
dispatchLegendSelectAction (name) { dispatchLegendSelectAction (name) {

View File

@@ -157,19 +157,19 @@ export default {
index = 0 index = 0
} }
if (res.data.result.httpResponseLatencyAvg || res.data.result.httpResponseLatencyAvg === 0) { if (res.data.result.httpResponseLatencyAvg || res.data.result.httpResponseLatencyAvg === 0) {
res.data.result.httpResponseLatency = res.data.result.establishLatencyMsAvg res.data.result.httpResponseLatency = res.data.result.httpResponseLatencyAvg
index = 1 index = 1
} }
if (res.data.result.tcpLostlenPercentAvg || res.data.result.tcpLostlenPercentAvg === 0) { if (res.data.result.tcpLostlenPercentAvg || res.data.result.tcpLostlenPercentAvg === 0) {
res.data.result.tcpLostlenPercent = res.data.result.establishLatencyMsAvg res.data.result.tcpLostlenPercent = res.data.result.tcpLostlenPercentAvg
index = 3 index = 3
} }
if (res.data.result.pktRetransPercentAvg || res.data.result.pktRetransPercentAvg === 0) { if (res.data.result.pktRetransPercentAvg || res.data.result.pktRetransPercentAvg === 0) {
res.data.result.pktRetransPercent = res.data.result.establishLatencyMsAvg res.data.result.pktRetransPercent = res.data.result.pktRetransPercentAvg
index = 4 index = 4
} }
if (res.data.result.sslConLatencyAvg || res.data.result.sslConLatencyAvg === 0) { if (res.data.result.sslConLatencyAvg || res.data.result.sslConLatencyAvg === 0) {
res.data.result.sslConLatency = res.data.result.establishLatencyMsAvg res.data.result.sslConLatency = res.data.result.sslConLatencyAvg
index = 2 index = 2
} }
scoreInfo[keyPre[index] + 'Score'] = computeScore(res.data.result, index) scoreInfo[keyPre[index] + 'Score'] = computeScore(res.data.result, index)