@@ -82,6 +83,7 @@ import { ref, computed } from 'vue'
import MyDatePicker from '../MyDatePicker'
import { storageKey } from '@/utils/constants'
import { getMillisecond } from '@/utils/date-util'
+import { useStore } from 'vuex'
export default {
name: 'DateTimeRange',
@@ -112,6 +114,7 @@ export default {
},
setup (props, ctx) {
// data
+ const store = useStore()
const myStartTime = ref(props.startTime)
const myEndTime = ref(props.endTime)
const timeArr = ref([myStartTime.value, myEndTime.value])
@@ -233,6 +236,7 @@ export default {
returnValue()
}
const returnValue = () => {
+ cancelHttp()
rangeHistory.value.unshift({
start: myStartTime.value,
end: myEndTime.value
@@ -241,6 +245,16 @@ export default {
ctx.emit('change', myStartTime.value, myEndTime.value, dateRangeValue)
dropdownFlag.value = false
}
+ const cancelHttp = () => {
+ const cancelList = store.state.panel.httpCancel
+ // console.log('DateTimeRange.vue------cancelHttp------查看终止数量', cancelList, cancelList.length)
+ if (cancelList.length > 0) {
+ cancelList.forEach((cancel, index) => {
+ cancel()
+ delete cancelList[index]
+ })
+ }
+ }
return {
myStartTime,
myEndTime,
diff --git a/src/components/common/TimeRange/TimeRefresh.vue b/src/components/common/TimeRange/TimeRefresh.vue
index 3f9ce829..4b463101 100644
--- a/src/components/common/TimeRange/TimeRefresh.vue
+++ b/src/components/common/TimeRange/TimeRefresh.vue
@@ -12,8 +12,8 @@
- {{item.label}}
-
+ {{ item.label }}
+
@@ -103,7 +103,16 @@ export default {
this.interLabel = val.value == -1 ? '' : val.label
this.dropdownShow = false
const now = window.$dayJs.tz().valueOf()
- if (val && val.value != -1) {
+ if (val && val.value !== -1) {
+ // 切换轮询请求时间频率时，发现有未结束的请求，终止请求
+ const cancelList = this.$store.state.panel.httpCancel
+ // console.log('timeRefresh.vue------setRefresh------查看终止数量', cancelList, cancelList.length)
+ if (cancelList.length > 0) {
+ cancelList.forEach((cancel, index) => {
+ cancel()
+ delete cancelList[index]
+ })
+ }
// 向地址栏添加自动刷新频率
const dateParam = {
refreshTime: val.value
@@ -121,7 +130,7 @@ export default {
}
return
}
- if (val && val.value == -1) {
+ if (val && val.value === -1) {
// 清除定时器
clearInterval(this.intervalTimer)
diff --git a/src/store/modules/panel.js b/src/store/modules/panel.js
index b28bf298..d383649d 100644
--- a/src/store/modules/panel.js
+++ b/src/store/modules/panel.js
@@ -51,7 +51,8 @@ const panel = {
npmLocationCountry: '', // npm location的查询条件--国家
npmLocationSide: 'server', // npm location的查询条件--方向
refreshTime: null, // 自动刷新时间的秒数
- refreshFlag: true // 关闭自动刷新标志，true为off，false即开启自动刷新
+ refreshFlag: true, // 关闭自动刷新标志，true为off，false即开启自动刷新
+ httpCancel: null // 终止http请求
},
mutations: {
setShowRightBox (state, flag) {
@@ -146,6 +147,9 @@ const panel = {
},
setRefreshFlag (state, flag) {
state.refreshFlag = flag
+ },
+ setHttpCancel (state, cancel) {
+ state.httpCancel = cancel
}
},
getters: {
diff --git a/src/utils/http.js b/src/utils/http.js
index 1ee1ae5d..f11ba264 100644
--- a/src/utils/http.js
+++ b/src/utils/http.js
@@ -1,8 +1,20 @@
import axios from 'axios'
import { storageKey } from '@/utils/constants'
+import store from '@/store'
+
+const CancelToken = axios.CancelToken
axios.interceptors.request.use(config => {
const token = localStorage.getItem(storageKey.token)
+
+ // 添加http请求终止方法
+ const arr = []
+ const cancelToken = new CancelToken(function executor (c) {
+ arr.push(c)
+ store.commit('setHttpCancel', arr)
+ })
+
+ config.cancelToken = cancelToken
if (token) {
config.headers['Cn-Authorization'] = token // 请求头token
}
diff --git a/src/views/charts2/Panel.vue b/src/views/charts2/Panel.vue
index 1840f7eb..03639d81 100644
--- a/src/views/charts2/Panel.vue
+++ b/src/views/charts2/Panel.vue
@@ -55,6 +55,7 @@ import { getTypeCategory } from '@/views/charts/charts/tools'
import { computeScore, urlParamsHandler, overwriteUrl } from '@/utils/tools'
import ChartList from '@/views/charts2/ChartList'
import { get } from '@/utils/http'
+import { useStore } from 'vuex'
export default {
name: 'Panel',
@@ -156,6 +157,19 @@ export default {
})
},
setup (props, ctx) {
+ // todo 目前在panel页面测试，后续会挪到router里
+ const store = useStore()
+ const cancelList = store.state.panel.httpCancel
+
+ // 进入页面时，发现有未结束的请求，终止请求
+ // console.log('panel.vue------setup------查看http终止情况', cancelList, cancelList.length)
+ if (cancelList.length > 0) {
+ cancelList.forEach((cancel, index) => {
+ cancel()
+ delete cancelList[index]
+ })
+ }
+
const panel = ref({})
let panelType = 1 // 取得panel的type
const { params, query } = useRoute()
diff --git a/src/views/charts2/charts/linkMonitor/LinkBlock.vue b/src/views/charts2/charts/linkMonitor/LinkBlock.vue
index 0b8028a8..a02d29da 100644
--- a/src/views/charts2/charts/linkMonitor/LinkBlock.vue
+++ b/src/views/charts2/charts/linkMonitor/LinkBlock.vue
@@ -223,7 +223,6 @@ export default {
})
this.linkData = sorted
- // todo 此处去重不优美，后续再处理
let directionArr = []
nextHopData.forEach((item) => {
if (item.egressLinkDirection !== '' && item.ingressLinkDirection !== '') {