gfwleak/cyber-narrator-cn-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CN-501 feat: 响应式方案实施

Browse Source
This commit is contained in:
@changcode
2022-04-25 15:29:44 +08:00
parent 01760c28a4
commit e90d6ea506
29 changed files with 230 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/views/entityExplorer/EntityDetail.vue
View File

@@ -72,6 +72,7 @@ export default {
},
methods: {
chartLoaded (chartList) {
this.chartList = chartList
this.anchorPoints = []
let anchorPoints = []
const panelDom = document.querySelector('#detailWrapper')
@@ -103,8 +104,17 @@ export default {
jumpToAnchor (anchor) {
this.top = anchor.top
document.querySelector('#detailWrapper').scrollTop = this.top
},
resize () {
this.chartLoaded(this.chartList)
}
},
mounted () {
window.addEventListener('resize', this.$_.debounce(this.resize, 200))
},
beforeUnmount () {
window.removeEventListener('resize', this.resize)
},
computed: {
iconClass () {
let className

12
src/views/entityExplorer/entityList/Card.vue
View File

@@ -58,11 +58,11 @@
<div class="body__statics">
<div class="entity-statics-down">
<i class="cn-icon cn-icon-fall entity-statics-icon"></i>
{{entityData.bytesReceivedRate ? unitConvert(entityData.bytesReceivedRate, unitTypes.byte).join(' ') + 'ps' : '-'}}
<span>{{entityData.bytesReceivedRate ? unitConvert(entityData.bytesReceivedRate, unitTypes.byte).join(' ') : '-'}}</span>
</div>
<div class="entity-statics-up" >
<i class="cn-icon cn-icon-rise"></i>
{{entityData.bytesSentRate ? unitConvert(entityData.bytesSentRate, unitTypes.byte).join(' ') + 'ps' : '-'}}
<span>{{entityData.bytesSentRate ? unitConvert(entityData.bytesSentRate, unitTypes.byte).join(' ') : '-'}}</span>
</div>
<div class="body__detail" @click="showDetail">{{$t('overall.detail')}}></div>
</div>
@@ -94,11 +94,11 @@
</div>
<div class="body__statics">
<div class="entity-statics-down"><i class="cn-icon cn-icon-fall entity-statics-icon"></i>
{{entityData.bytesReceivedRate ? unitConvert(entityData.bytesReceivedRate, unitTypes.byte).join(' ') + 'ps' : '-'}}
<span>{{entityData.bytesReceivedRate ? unitConvert(entityData.bytesReceivedRate, unitTypes.bps).join(' ') : '-'}}</span>
</div>
<div class="entity-statics-up" >
<i class="cn-icon cn-icon-rise"></i>
{{entityData.bytesSentRate ? unitConvert(entityData.bytesSentRate, unitTypes.byte).join(' ') + 'ps' : '-'}}
<span>{{entityData.bytesSentRate ? unitConvert(entityData.bytesSentRate, unitTypes.bps).join(' ') : '-'}}</span>
</div>
<div class="body__detail" @click="showDetail">{{$t('overall.detail')}}></div>
</div>
@@ -129,8 +129,8 @@
<div class="body__drawing" :id="`entityListChart${entityData.appName}${listMode}`"></div>
</div>
<div class="body__statics">
<div class="entity-statics-down"><i class="cn-icon cn-icon-fall entity-statics-icon"></i>{{entityData.bytesReceivedRate ? unitConvert(entityData.bytesReceivedRate, unitTypes.byte).join(' ') + 'ps' : '-'}}</div>
<div class="entity-statics-up" ><i class="cn-icon cn-icon-rise"></i>{{entityData.bytesSentRate ? unitConvert(entityData.bytesSentRate, unitTypes.byte).join(' ') + 'ps' : '-'}}</div>
<div class="entity-statics-down"><i class="cn-icon cn-icon-fall entity-statics-icon"></i><span>{{entityData.bytesReceivedRate ? unitConvert(entityData.bytesReceivedRate, unitTypes.bps).join(' ') : '-'}}</span></div>
<div class="entity-statics-up" ><i class="cn-icon cn-icon-rise"></i><span>{{entityData.bytesSentRate ? unitConvert(entityData.bytesSentRate, unitTypes.bps).join(' ') : '-'}}</span></div>
<div class="body__detail" @click="showDetail">{{$t('overall.detail')}}></div>
</div>
</template>

14
src/views/entityExplorer/entityList/detailOverview/entityDetailMixin.js
View File

@@ -4,6 +4,7 @@ import * as echarts from 'echarts'
import { entityListLineOption } from '@/views/charts/charts/chart-options'
import { riskLevelMapping, unitTypes } from '@/utils/constants'
import unitConvert from '@/utils/unit-convert'
import { shallowRef } from 'vue'
export default {
props: {
@@ -26,7 +27,8 @@ export default {
receivedChart: null
},
chartOption: null,
queryParams: {}
queryParams: {},
echartsArray: []
}
},
computed: {
@@ -121,6 +123,7 @@ export default {
}
}
})
this.echartsArray.push(shallowRef(this.sentChart), shallowRef(this.receivedChart))
this.sentChart.setOption(this.chartOptionSent)
this.receivedChart.setOption(this.chartOptionReceived)
}
@@ -312,6 +315,7 @@ export default {
]
}
})
this.echartsArray.push(shallowRef(this.detectionChart))
this.detectionChart.setOption(this.chartDetectionQueryRate)
}
})
@@ -333,6 +337,10 @@ export default {
}, 200)
})
}
},
resize () {
this.echartsArray.forEach(item => { item.value.resize() })
}
},
setup () {
@@ -342,7 +350,11 @@ export default {
}
},
mounted () {
window.addEventListener('resize', this.$_.debounce(this.resize, 200))
this.chartOption = _.cloneDeep(entityListLineOption)
setTimeout(() => { this.queryEntityDetail() })
},
beforeUnmount () {
window.removeEventListener('resize', this.resize)
}
}

13
src/views/entityExplorer/entityList/entityListMixin.js
View File

@@ -6,6 +6,7 @@ import { entityListLineOption } from '@/views/charts/charts/chart-options'
import { riskLevelMapping, unitTypes } from '@/utils/constants'
import { getSecond } from '@/utils/date-util'
import unitConvert from '@/utils/unit-convert'
import { shallowRef } from 'vue'
export default {
props: {
@@ -19,7 +20,8 @@ export default {
trafficUrl: '',
chartOption: null,
unitTypes,
unitConvert
unitConvert,
echartsArray: []
}
},
computed: {
@@ -251,6 +253,7 @@ export default {
})
if (this.listMode === 'block') {
const chart = echarts.init(document.getElementById(`entityListChart${this.entityName}${this.listMode}`))
this.echartsArray.push(shallowRef(chart))
chart.setOption({
...this.chartOption,
series: [sentSeries, receivedSeries]
@@ -258,6 +261,7 @@ export default {
} else if (this.listMode === 'list') {
const sentChart = echarts.init(document.getElementById(`entityDetailSend${this.entityName}${this.listMode}`))
const receivedChart = echarts.init(document.getElementById(`entityDetailReceived${this.entityName}${this.listMode}`))
this.echartsArray.push(shallowRef(sentChart), shallowRef(receivedChart))
sentChart.setOption({
...this.chartOption,
series: [sentSeries]
@@ -278,6 +282,9 @@ export default {
} catch (e) {}
}, 250)
})
},
resize () {
this.echartsArray.forEach(item => { item.value.resize() })
}
},
watch: {
@@ -306,6 +313,7 @@ export default {
}
},
mounted () {
window.addEventListener('resize', this.$_.debounce(this.resize, 200))
this.chartOption = _.cloneDeep(entityListLineOption)
this.entityData = _.cloneDeep(this.entity)
setTimeout(() => {
@@ -313,5 +321,8 @@ export default {
this.queryEntityDetailTraffic()
this.queryPerformance()
})
},
beforeUnmount () {
window.removeEventListener('resize', this.resize)
}
}