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

1
package.json
View File

@@ -24,6 +24,7 @@
"lodash": "^4.17.21",
"moment-timezone": "^0.5.33",
"node-sass": "^4.14.1",
"postcss-plugin-px2rem": "^0.8.1",
"postcss-px2rem-exclude": "0.0.6",
"sass-loader": "^8.0.2",
"sass-resources-loader": "^2.2.1",

12
postcss.config.js
View File

@@ -1,9 +1,11 @@
module.exports = {
plugins: {
autoprefixer: {}
/* 'postcss-px2rem-exclude': {
remUnit: 16,
exclude: /node_modules/i
} */
autoprefixer: {},
'postcss-plugin-px2rem': {
rootValue: 16,
exclude: /node_modules/i,
minPixelValue: 3,
selectorBlackList: ['.html', 'iconfont', '.ttf', '.css']
}
}
}

44
public/index.html
View File

@@ -14,15 +14,39 @@
<div id="app"></div>
</body>
<style>
@media only screen and (min-width : 1224px) {
html {
font-size: 12px !important;
}
}
@media only screen and (min-width : 1824px) {
html {
font-size: 16px !important;
}
}
@media only screen and (min-width: 800px) {
body,html{font-size: 12px !important;}
} /*>=800的设备*/
@media only screen and (min-width: 1024px) {
body,html{font-size: 12px !important;}
} /*>=1024的设备*/
@media only screen and (min-width: 1280px) {
body,html{font-size: 12px !important;}
}/*>=1280的设备*/
@media only screen and (min-width: 1366px) {
body,html{font-size: 12px !important; }
}/*>=1366的设备*/
@media only screen and (min-width: 1440px) {
body,html{font-size: 12px !important;}
}/*>=1440的设备*/
@media only screen and (min-width: 1680px) {
body,html{font-size: 14px !important;}
}/*>=1680的设备*/
@media only screen and (min-width: 1920px) {
body,html{font-size: 16px !important;}
}/*>=1920的设备*/
@media only screen and (min-width: 2048px) {
body,html{font-size: 18px !important;}
}/*>=2048的设备*/
@media only screen and (min-width: 2560px) {
body,html{font-size: 22px !important;}
}/*>=2560的设备*/
</style>
</html>

6
src/assets/css/components/views/charts/ChartOneSituationStatistics.scss
View File

@@ -7,8 +7,10 @@
height: 100%;
.box__progress {
display: block;
width: 76px;
height: 76px;
.el-progress-circle {
height: 80px !important;
width: 80px !important;
}
.el-progress__text span{
font-size: 16px;
}

14
src/assets/css/components/views/charts/chartEchartWithTable.scss
View File

@@ -10,7 +10,6 @@
.cn-chart__body {
flex: auto;
display: flex;
overflow: hidden auto;
.el-table {
padding: 0 10px;
@@ -37,16 +36,19 @@
height: calc(100% - 36px) !important;
}*/
}
.cn-chart__body.pie-with-table {
flex-basis: 40%;
}
//.cn-chart__body.pie-with-table {
// flex-basis: 60%;
//}
.cn-chart__footer.pie-with-table {
flex-basis: 60%;
padding: 10px 30px 30px;
overflow: auto;
.pie-table .el-table__body-wrapper {
height: calc(100% - 40px) !important;
}
}
}
.pie-table {
font-size: 14px;
font-size: 12px;
color: #333333;
font-weight: 500;

30
src/assets/css/components/views/charts/chartSingleValue.scss
View File

@@ -44,14 +44,14 @@
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 40%;
flex: 0 0 100px;
}
.single-value__icon {
display: flex;
justify-content: center;
width: 72px;
height: 72px;
width: 56px;
height: 56px;
background-color: $--chart-single-value-icon-background-color;
border-radius: 50%;
@@ -66,12 +66,12 @@
.single-value__content {
display: flex;
flex-direction: column;
max-width: 60%;
width: 200px;
padding-right: 10px;
.content__data {
padding-bottom: 7%;
font-size: 20px;
padding-bottom: 10px;
font-size: 18px;
color: #333333;
font-weight: bold;
}
@@ -80,7 +80,7 @@
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 16px;
font-size: 14px;
color: #666666;
}
@@ -105,10 +105,11 @@
justify-content: space-around;
align-items: center;
height: 100%;
width: 100%;
width: 90%;
margin: auto;
.single-value-icon__box {
flex: 0 0 80px;
flex: 0 0 74px;
}
.single-value__icon {
@@ -249,7 +250,7 @@
display: flex;
align-items: center;
height: 25%;
font-size: 24px;
font-size: 18px;
color: #333333;
font-weight: bold;
}
@@ -572,16 +573,15 @@
display: flex;
align-items: flex-start;
justify-content: right;
margin-right:25px;
margin: 0 22px 22px 0;
flex: 0 0 80;
margin-bottom: 25px;
}
.single-value__icon {
display: flex;
justify-content: center;
width: 70px;
height: 70px;
width: 60px;
height: 60px;
background-color: $--chart-single-value-icon-background-color;
border-radius: 50%;
@@ -601,7 +601,7 @@
margin-left:25px;
.content__data {
margin-bottom: 7%;
margin-bottom: 5%;
font-size: 22px;
color: #333333;
font-weight: bold;

1
src/assets/css/components/views/charts/chartTable.scss
View File

@@ -13,6 +13,7 @@
.el-table {
padding: 0 10px;
font-size: 14px;
.el-table__body-wrapper.is-scrolling-none {
height: 100%;
overflow-y: auto;

18
src/assets/css/components/views/charts/panel.scss
View File

@@ -29,9 +29,8 @@
display: flex;
justify-content:space-between;
align-items:center;
padding: 10px 20px 10px 18px;
padding: 0 18px;
flex: 0 0 40px;
font-size: 16px;
color: $--color-text-primary;
transition: all 0.2s;
@@ -170,7 +169,8 @@
}
.option__select {
.el-input__inner {
width: 80px;
width: 92px;
text-align: center;
padding-right: 20px;
border: none;
height: 100%;
@@ -335,6 +335,18 @@
&>.el-tabs__header {
margin-bottom: 10px;
}
.el-tabs__nav.is-top {
.el-tabs__active-bar {
display: none;
}
.el-tabs__item.is-top {
padding: 0;
margin: 0 13px;
}
.el-tabs__item.is-top.is-active {
border-bottom: 2px solid #0091ff;
}
}
&>.el-tabs__content {
height: calc(100% - 40px);
.el-tab-pane {

2
src/assets/css/components/views/entityExplorer/entity-explorer.scss
View File

@@ -48,7 +48,7 @@
}
.explorer-container {
display: flex;
overflow: hidden auto;
overflow: hidden;
height: calc(100% - 120px);
position: relative;
}

2
src/components/table/settings/ChartTable.vue
View File

@@ -124,7 +124,7 @@ export default {
label: 'ID',
prop: 'id',
show: true,
width: 80,
width: 110,
sortable: 'custom'
}, {
label: this.$t('config.chart.name'),

2
src/components/table/settings/GalaxyProxyTable.vue
View File

@@ -124,7 +124,7 @@ export default {
label: 'ID',
prop: 'id',
show: true,
width: 80,
width: 100,
sortable: 'custom'
}, {
label: this.$t('overall.name'),

2
src/components/table/settings/I18nTable.vue
View File

@@ -76,7 +76,7 @@ export default {
label: 'ID',
prop: 'id',
show: true,
width: 80,
width: 100,
sortable: 'custom'
},
{

2
src/components/table/settings/OperationLogTable.vue
View File

@@ -75,7 +75,7 @@ export default {
label: this.$t('config.operationlog.id'),
prop: 'id',
show: true,
width: 80
width: 100
}, {
label: this.$t('config.operationlog.username'),
prop: 'username',

2
src/components/table/settings/RoleTable.vue
View File

@@ -85,7 +85,7 @@ export default {
label: 'ID',
prop: 'id',
show: true,
width: 80,
width: 100,
sortable: 'custom'
}, {
label: this.$t('config.roles.name'),

2
src/components/table/settings/UserTable.vue
View File

@@ -103,7 +103,7 @@ export default {
label: 'ID',
prop: 'id',
show: true,
width: 80,
width: 100,
sortable: 'custom'
}, {
label: this.$t('config.user.name'),

2
src/main.js
View File

@@ -26,6 +26,8 @@ import TimeRefresh from '@/components/common/TimeRange/TimeRefresh'
import PanelChartList from '@/views/charts/PanelChartList'
const emitter = new bus()
import 'lib-flexible'
const _ = require('lodash') // lodash工具
/* dayjs.extend(utc)

40
src/views/charts/PanelChartList.vue
View File

@@ -81,6 +81,7 @@ import _ from 'lodash'
import { useRouter } from 'vue-router'
import DnsScreen from '@/views/charts/wholeScreenScroll/DnsScreen'
import { wholeScreenRouterMapping } from '@/utils/constants'
import { ref } from 'vue'
export default {
name: 'PanelChartList',
@@ -102,7 +103,6 @@ export default {
return {
gridLayoutLoading: false,
gridLayoutShow: false,
rowHeight: 40,
copyDataList: [], // 所有的图表
normalCopyDataList: [], // 非整屏滚动的图表
noData: false, // no data
@@ -183,9 +183,29 @@ export default {
return item.y >= -1
})
}, 100)
},
chartHeightData (e) {
if (e.currentTarget.innerWidth < 1280) {
this.rowHeight = 25
} else if (e.currentTarget.innerWidth >= 1280 && e.currentTarget.innerWidth <= 1440) {
this.rowHeight = 25
} else if (e.currentTarget.innerWidth >= 1440 && e.currentTarget.innerWidth < 1920) {
this.rowHeight = 32.5
} else if (e.currentTarget.innerWidth >= 1920 && e.currentTarget.innerWidth <= 2048) {
this.rowHeight = 40
} else if (e.currentTarget.innerWidth >= 2048 && e.currentTarget.innerWidth <= 2560) {
this.rowHeight = 55
} else if (e.currentTarget.innerWidth > 2560) {
this.rowHeight = 55
}
}
},
mounted () {
window.addEventListener('resize', this.$_.debounce(this.chartHeightData, 100))
},
beforeUnmount () {
window.removeEventListener('resize', this.chartHeightData)
},
computed: {
anchorPoint () {
return function (chart) {
@@ -199,7 +219,23 @@ export default {
},
setup (props) {
const { currentRoute } = useRouter()
const htmlHeight = document.getElementsByTagName('html')[0].clientWidth
const rowHeight = ref(0)
if (htmlHeight < 1280) {
rowHeight.value = 25
} else if (htmlHeight >= 1280 && htmlHeight <= 1440) {
rowHeight.value = 25
} else if (htmlHeight >= 1440 && htmlHeight < 1920) {
rowHeight.value = 32.5
} else if (htmlHeight >= 1920 && htmlHeight <= 2048) {
rowHeight.value = 40
} else if (htmlHeight >= 2048 && htmlHeight <= 2560) {
rowHeight.value = 55
} else if (htmlHeight > 2560) {
rowHeight.value = 55
}
return {
rowHeight,
currentPath: currentRoute.value.path
}
},

12
src/views/charts/charts/ChartEchartWithStatistics.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="chart-drawing" :style="`height: calc(100% - ${statisticsHeight}px)`" :id="`chart${chartInfo.id}`"></div>
<div class="chart-drawing" style="height: calc(100% - 17.5rem)" :id="`chart${chartInfo.id}`"></div>
<div class="cn-chart__footer">
<statistics-legend :data="statisticsData" :chart-info="chartInfo" @toggleLegend="toggleStatisticsLegend"></statistics-legend>
</div>
@@ -19,8 +19,7 @@ export default {
mixins: [chartEchartMixin],
data () {
return {
statisticsData: [],
statisticsHeight: 280
statisticsData: []
}
},
props: {
@@ -29,13 +28,6 @@ export default {
components: {
StatisticsLegend
},
mounted () {
// 动态计算统计信息的高度
if (this.chartData) {
const dataLen = this.chartData.length
this.statisticsHeight = (dataLen * 24) + 30 + 3 + 7 // 根据legend个数动态预留legend空间,7为其他
}
},
methods: {
initEcharts (id) {
this.initDom(id)

9
src/views/charts/charts/ChartIpOpenPortBar.vue
View File

@@ -95,8 +95,17 @@ export default {
this.chartOption.series[0].data = protocols
this.chartOption.xAxis.data = protocols.map(p => p.name)
this.myChart.setOption(this.chartOption)
},
resize () {
this.myChart.resize()
}
},
mounted () {
window.addEventListener('resize', this.$_.debounce(this.resize, 200))
},
beforeUnmount () {
window.removeEventListener('resize', this.resize)
},
watch: {
chartData: {
deep: true,

1
src/views/charts/charts/ChartOneSituationStatistics.vue
View File

@@ -5,7 +5,6 @@
<el-progress
type="circle"
:color="chartInfo.params.color"
width="76"
:percentage="Math.floor(($_.get(chartData, 'percent', '-') * 100) * 100) / 100"
/>
</div>

9
src/views/charts/charts/ChartSanKey.vue
View File

@@ -105,8 +105,17 @@ export default {
this.chartOption.series[0].data = data
this.chartOption.series[0].links = link
this.myChart.setOption(this.chartOption)
},
resize () {
this.myChart.resize()
}
},
mounted () {
window.addEventListener('resize', this.$_.debounce(this.resize))
},
beforeUnmount () {
window.removeEventListener('resize', this.resize)
},
watch: {
chartData: {
deep: true,

2
src/views/charts/charts/ChartTable.vue
View File

@@ -6,7 +6,7 @@
tooltip-effect="light"
:data="table.currentPageData"
>
<el-table-column v-if="table.currentPageData.length" type="index" label="#">
<el-table-column :width="60" v-if="table.currentPageData.length" type="index" label="#">
</el-table-column>
<el-table-column
v-for="(c, i) in table.tableColumns.common"

6
src/views/charts/charts/ChartTabs.vue
View File

@@ -39,8 +39,14 @@ export default {
},
reload () {
this.dataList = _.cloneDeep(this.dataList)
},
resize () {
this.$forceUpdate()
}
},
mounted () {
window.addEventListener('resize', this.$_.debounce(this.resize, 300))
},
setup (props) {
let activeTab = ''
if (!_.isEmpty(props.chartInfo.children)) {

24
src/views/charts/charts/chart-echart-mixin.js
View File

@@ -77,6 +77,18 @@ export default {
return allZero
}
},
chartResize () {
this.$store.getters.getChartList.forEach(chart => {
if (chart) {
chart.resize()
}
})
},
test () {
setTimeout(() => {
this.chartResize()
}, 400)
},
loadEchart (chartNum, refresh = false) {
this.$emit('showLoading', true)
try {
@@ -86,14 +98,7 @@ export default {
this.myChart2.setOption(this.chartOption2, refresh)
this.$store.commit('setChartList', this.$_.cloneDeep(this.myChart2))
}
const _this = this
window.addEventListener('resize', function () {
_this.$store.getters.getChartList.forEach(chart => {
if (chart) {
chart.resize()
}
})
})
window.addEventListener('resize', this.$_.debounce(this.test, 400))
} finally {
setTimeout(() => {
this.$emit('showLoading', false)
@@ -101,6 +106,9 @@ export default {
}
}
},
beforeUnmount () {
window.removeEventListener('resize', this.test)
},
watch: {
chartData: {
deep: true,

23
src/views/detections/Index.vue
View File

@@ -114,6 +114,7 @@ import { api, getData } from '@/utils/api'
import { reverseSortBy, sortBy, extensionEchartY } from '@/utils/tools'
import { useRoute } from 'vue-router'
import DetectionNoData from '@/views/detections/DetectionNoData'
import { shallowRef } from 'vue'
export default {
name: 'Index',
@@ -128,6 +129,7 @@ export default {
},
data () {
return {
chartInit: [],
pageObj: {
pageNo: 1,
pageSize: defaultPageSize,
@@ -285,7 +287,7 @@ export default {
// eventSeverityTrendOption.xAxis.data = dataMap.get('info').map(v => rTime(v[0]))
eventSeverityTrendOption.xAxis.data = xData
const detectionChart = echarts.init(chartDom)
this.echartsResize(detectionChart)
this.chartInit.push(shallowRef(detectionChart))
detectionChart.setOption(eventSeverityTrendOption)
// this.isEventSeverityNoData = false
} else {
@@ -312,7 +314,7 @@ export default {
})
const chartDom = document.getElementById(`eventSeverityPie${this.pageType}`)
const detectionChart = echarts.init(chartDom)
this.echartsResize(detectionChart)
this.chartInit.push(shallowRef(detectionChart))
detectionChart.setOption(eventSeverityOption)
const vm = this
detectionChart.off('click')
@@ -339,7 +341,7 @@ export default {
}))
const chartDom = document.getElementById(`detectionCategoryPer${this.pageType}`)
const detectionChart = echarts.init(chartDom)
this.echartsResize(detectionChart)
this.chartInit.push(shallowRef(detectionChart))
const securityTypeOption = this.$_.cloneDeep(pieForSeverity)
securityTypeOption.series[0].data = data.map(d => {
return { value: d.count, name: d.eventType }
@@ -367,7 +369,7 @@ export default {
}))
const chartDom = document.getElementById(`detectionCategoryPer${this.pageType}`)
const detectionChart = echarts.init(chartDom)
this.echartsResize(detectionChart)
this.chartInit.push(shallowRef(detectionChart))
const securityTypeOption = this.$_.cloneDeep(pieForSeverity)
securityTypeOption.series[0].data = data.map(d => {
return { value: d.count, name: d.securityType, itemStyle: { color: getAttackColor(d.securityType) } }
@@ -399,7 +401,7 @@ export default {
const chartDom = document.getElementById(`detectionActiveAttacker${this.pageType}`)
const detectionChart = echarts.init(chartDom)
this.echartsResize(detectionChart)
this.chartInit.push(shallowRef(detectionChart))
const offenderIpOption = this.$_.cloneDeep(activeAttackBar)
data.sort(reverseSortBy('count'))
data = data.slice(0, 5)
@@ -455,7 +457,7 @@ export default {
if (!this.$_.isEmpty(data)) {
const chartDom = document.getElementById(`detectionActiveAttacker${this.pageType}`)
const detectionChart = echarts.init(chartDom)
this.echartsResize(detectionChart)
this.chartInit.push(shallowRef(detectionChart))
const option = this.$_.cloneDeep(activeAttackBar)
data.sort(reverseSortBy('count'))
data = data.slice(0, 5)
@@ -603,15 +605,14 @@ export default {
wraps.scrollTop = 0
})
},
echartsResize (detectionChart) {
window.addEventListener('resize', function () {
detectionChart.resize()
})
resize () {
this.chartInit.forEach(e => { e.value.resize() })
}
},
mounted () {
this.queryFilter()
this.queryList()
window.addEventListener('resize', this.$_.debounce(this.resize, 300))
},
watch: {
eventSeverityData: {
@@ -729,7 +730,7 @@ export default {
}
},
beforeUnmount () {
window.removeEventListener('resize', function () {})
window.removeEventListener('resize', this.resize)
},
setup () {
const { params } = useRoute()

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)
}
}