fix: 1.对浏览器resize 事件进行优化2.更改kBps为Kbps
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -19,7 +19,8 @@ export default {
|
||||
refresh: false,
|
||||
query: false
|
||||
},
|
||||
timeout: null
|
||||
timeout: null,
|
||||
debounceFunc: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
@@ -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 () {
|
||||
|
||||
@@ -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: {
|
||||
|
||||
@@ -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: {
|
||||
|
||||
@@ -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 = ''
|
||||
|
||||
@@ -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: {
|
||||
|
||||
@@ -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()
|
||||
|
||||
@@ -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 () {
|
||||
|
||||
@@ -94,8 +94,8 @@
|
||||
entityData.bytesSentRate
|
||||
? unitConvert(
|
||||
entityData.bytesSentRate,
|
||||
unitTypes.byte,
|
||||
).join(' ') + 'ps'
|
||||
unitTypes.bps,
|
||||
).join(' ')
|
||||
: '-'
|
||||
}}</span>
|
||||
<!-- 曲线-->
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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)
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user