fix: 修复一开始没数据,更改条件后有数据也刷不出来的问题
This commit is contained in:
@@ -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)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -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) {
|
||||||
|
|||||||
@@ -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)
|
||||||
|
|||||||
Reference in New Issue
Block a user