fix: 1.对浏览器resize 事件进行优化2.更改kBps为Kbps

This commit is contained in:
@changcode
2022-04-26 14:00:16 +08:00
parent 089ecf86a2
commit 17ac9640ed
16 changed files with 52 additions and 27 deletions

View File

@@ -15,6 +15,16 @@
display: flex;
align-items: center;
flex-grow: 1;
.header__left-breadcrumb.el-breadcrumb {
padding-left: 20px;
.header__left-breadcrumb-item.el-breadcrumb-item {
display: inline-block; max-width: 300px;
height: 16px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.shrink-button {
margin-left: 20px;

View File

@@ -3,8 +3,8 @@
<!--导航面包屑-->
<div class="header__left">
<span @click="shrink" class="shrink-button" :class="{'shrink-button--collapse': isShrink}"><i class="cn-icon cn-icon-expand"></i></span>
<el-breadcrumb separator="/" style="padding-left: 20px; padding-top: 6px;">
<el-breadcrumb-item :title="item" v-for="item in breadcrumb" :key="item" style="display: inline-block; max-width: 300px; height: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
<el-breadcrumb class="header__left-breadcrumb" separator="/">
<el-breadcrumb-item class="header__left-breadcrumb-item" :title="item" v-for="item in breadcrumb" :key="item">
{{item}}
</el-breadcrumb-item>
</el-breadcrumb>

View File

@@ -19,7 +19,8 @@ export default {
refresh: false,
query: false
},
timeout: null
timeout: null,
debounceFunc: null
}
},
methods: {

View File

@@ -172,10 +172,11 @@ export default {
}
},
mounted () {
window.addEventListener('resize', this.$_.debounce(this.chartHeightData, 100))
this.debounceFunc = this.$_.debounce(this.chartHeightData, 100)
window.addEventListener('resize', this.debounceFunc)
},
beforeUnmount () {
window.removeEventListener('resize', this.chartHeightData)
window.removeEventListener('resize', this.debounceFunc)
},
computed: {
anchorPoint () {

View File

@@ -101,10 +101,11 @@ export default {
}
},
mounted () {
window.addEventListener('resize', this.$_.debounce(this.resize, 200))
this.debounceFunc = this.$_.debounce(this.resize, 200)
window.addEventListener('resize', this.debounceFunc)
},
beforeUnmount () {
window.removeEventListener('resize', this.resize)
window.removeEventListener('resize', this.debounceFunc)
},
watch: {
chartData: {

View File

@@ -111,10 +111,11 @@ export default {
}
},
mounted () {
window.addEventListener('resize', this.$_.debounce(this.resize))
this.debounceFunc = this.$_.debounce(this.resize, 100)
window.addEventListener('resize', this.debounceFunc)
},
beforeUnmount () {
window.removeEventListener('resize', this.resize)
window.removeEventListener('resize', this.debounceFunc)
},
watch: {
chartData: {

View File

@@ -45,7 +45,11 @@ export default {
}
},
mounted () {
window.addEventListener('resize', this.$_.debounce(this.resize, 300))
this.debounceFunc = this.$_.debounce(this.resize, 300)
window.addEventListener('resize', this.debounceFunc)
},
beforeUnmount () {
window.removeEventListener('resize', this.debounceFunc)
},
setup (props) {
let activeTab = ''

View File

@@ -84,7 +84,7 @@ export default {
}
})
},
test () {
setTimeoutResize () {
setTimeout(() => {
this.chartResize()
}, 400)
@@ -98,7 +98,6 @@ export default {
this.myChart2.setOption(this.chartOption2, refresh)
this.$store.commit('setChartList', this.$_.cloneDeep(this.myChart2))
}
window.addEventListener('resize', this.$_.debounce(this.test, 400))
} finally {
setTimeout(() => {
this.$emit('showLoading', false)
@@ -106,8 +105,12 @@ export default {
}
}
},
mounted () {
this.debounceFunc = this.$_.debounce(this.setTimeoutResize, 400)
window.addEventListener('resize', this.debounceFunc)
},
beforeUnmount () {
window.removeEventListener('resize', this.test)
window.removeEventListener('resize', this.debounceFunc)
},
watch: {
chartData: {

View File

@@ -612,7 +612,8 @@ export default {
mounted () {
this.queryFilter()
this.queryList()
window.addEventListener('resize', this.$_.debounce(this.resize, 300))
this.debounceFunc = this.$_.debounce(this.resize, 300)
window.addEventListener('resize', this.debounceFunc)
},
watch: {
eventSeverityData: {
@@ -730,7 +731,7 @@ export default {
}
},
beforeUnmount () {
window.removeEventListener('resize', this.resize)
window.removeEventListener('resize', this.debounceFunc)
},
setup () {
const { params } = useRoute()

View File

@@ -110,10 +110,11 @@ export default {
}
},
mounted () {
window.addEventListener('resize', this.$_.debounce(this.resize, 200))
this.debounceFunc = this.$_.debounce(this.resize, 400)
window.addEventListener('resize', this.debounceFunc)
},
beforeUnmount () {
window.removeEventListener('resize', this.resize)
window.removeEventListener('resize', this.debounceFunc)
},
computed: {
iconClass () {

View File

@@ -94,8 +94,8 @@
entityData.bytesSentRate
? unitConvert(
entityData.bytesSentRate,
unitTypes.byte,
).join(' ') + 'ps'
unitTypes.bps,
).join(' ')
: '-'
}}</span>
<!-- 曲线-->

View File

@@ -39,7 +39,7 @@
<div class="row__label row__label--width130">{{$t('overall.throughput')}}</div>
<div class="row__contents">
<div class="row__content">
<div class="row__charts-msg">{{$t('overall.sent')}}{{unitConvert(entityData.bytesSentRate, unitTypes.byte).join(' ')}}ps</div>
<div class="row__charts-msg">{{$t('overall.sent')}}{{unitConvert(entityData.bytesSentRate, unitTypes.bps).join(' ')}}</div>
<!-- 曲线-->
<div class="row__charts" :id="`entityDetailSend${entityData.appName}`" ></div>
</div>

View File

@@ -43,7 +43,7 @@
<div class="row__label row__label--width130">{{$t('overall.throughput')}}</div>
<div class="row__contents">
<div class="row__content">
<div class="row__charts-msg">{{$t('overall.sent')}}{{unitConvert(entityData.bytesSentRate, unitTypes.byte).join(' ')}}ps</div>
<div class="row__charts-msg">{{$t('overall.sent')}}{{unitConvert(entityData.bytesSentRate, unitTypes.bps).join(' ')}}</div>
<!-- 曲线-->
<div class="row__charts" :id="`entityDetailSend${entityData.domainName}`" ></div>
</div>

View File

@@ -39,7 +39,7 @@
<div class="row__label row__label--width130">{{$t('overall.dnsServerInfo.queryRate')}}</div>
<div class="row__contents">
<div class="row__content">
<div class="row__charts-msg">{{unitConvert(entityData.queryRate, unitTypes.byte).join(' ')}}ps</div>
<div class="row__charts-msg">{{unitConvert(entityData.queryRate, unitTypes.bps).join(' ')}}</div>
<!-- 曲线-->
<div class="row__charts" :id="`entityDnsServerInfo${entityData.ipAddr}`"></div>
</div>
@@ -62,7 +62,7 @@
<div class="row__label row__label--width130">{{$t('overall.throughput')}}</div>
<div class="row__contents">
<div class="row__content">
<div class="row__charts-msg">{{$t('overall.sent')}}{{unitConvert(entityData.bytesSentRate, unitTypes.byte).join(' ')}}ps</div>
<div class="row__charts-msg">{{$t('overall.sent')}}{{unitConvert(entityData.bytesSentRate, unitTypes.bps).join(' ')}}</div>
<!-- 曲线-->
<div class="row__charts" :id="`entityDetailSend${entityData.ipAddr}`"></div>
</div>

View File

@@ -350,11 +350,12 @@ export default {
}
},
mounted () {
window.addEventListener('resize', this.$_.debounce(this.resize, 200))
this.debounceFunc = this.$_.debounce(this.resize, 200)
window.addEventListener('resize', this.debounceFunc)
this.chartOption = _.cloneDeep(entityListLineOption)
setTimeout(() => { this.queryEntityDetail() })
},
beforeUnmount () {
window.removeEventListener('resize', this.resize)
window.removeEventListener('resize', this.debounceFunc)
}
}

View File

@@ -313,7 +313,8 @@ export default {
}
},
mounted () {
window.addEventListener('resize', this.$_.debounce(this.resize, 200))
this.debounceFunc = this.$_.debounce(this.resize, 200)
window.addEventListener('resize', this.debounceFunc)
this.chartOption = _.cloneDeep(entityListLineOption)
this.entityData = _.cloneDeep(this.entity)
setTimeout(() => {
@@ -323,6 +324,6 @@ export default {
})
},
beforeUnmount () {
window.removeEventListener('resize', this.resize)
window.removeEventListener('resize', this.debounceFunc)
}
}