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

fix: 修复实体详情tabs和group中的图表有时宽度丢失的问题

Browse Source
This commit is contained in:
chenjinsong
2022-07-12 17:05:15 +08:00
parent 463232972c
commit a026d80088
10 changed files with 49 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/assets/css/components/views/entityExplorer/entity-detail.scss
View File

@@ -1,4 +1,8 @@
.entity-detail.cn-home {
.panel-chart {
width: 100%;
}
flex-direction: column;
.entity-detail__header {
@@ -45,9 +49,6 @@
.chart-header {
border: none;
}
.chart-drawing {
width: 530px;
}
}
}
}

1
src/components/advancedSearch/TagMode.vue
View File

@@ -391,7 +391,6 @@ export default {
deep: true,
handler (n) {
if (!_.isEmpty(n)) {
console.info(n)
this.metaList = n
}
}

2
src/components/advancedSearch/TextMode.vue
View File

@@ -73,11 +73,9 @@ export default {
const errorList = parser.validateStr(str)
if (_.isEmpty(errorList)) {
const metaList = parser.parseStr(str)
console.info(metaList)
this.$emit('changeMode', 'tag', metaList)
} else {
this.$emit('changeMode', 'tag', { metaList: [], str: '' })
console.info(errorList)
}
} else {
this.$emit('changeMode', 'tag', { str: '', metaList: [] })

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

@@ -149,6 +149,7 @@
:time-filter="timeFilter"
:query-params="queryParams"
:entity="entity"
:need-timeout="needTimeout"
></chart-relation-ship>
<chart-san-key
@@ -166,6 +167,7 @@
:chart-data="chartData"
:result-type="resultType"
:time-filter="timeFilter"
:need-timeout="needTimeout"
:query-params="queryParams"
@showLoading="showLoading"
></chart-echart>
@@ -400,7 +402,8 @@ export default {
table: Object,
timeFilter: Object,
orderPieTable: String,
tabHandleClickType: String
tabHandleClickType: String,
needTimeout: Boolean
},
computed: {
isNoData () {
@@ -437,13 +440,13 @@ export default {
this.$emit('showLoading', show)
},
getAlarmInfo (url, extraParams, isRefresh, timeFilter) {
this.$emit('getChartData', url, extraParams, isRefresh, timeFilter)
this.$emit('getChartData', url, extraParams, timeFilter, isRefresh)
},
getChartData (url, extraParams) {
this.$emit('getChartData', url, extraParams)
},
getDetectionData (url, extraParams, isRefresh, timeFilter) {
this.$emit('getChartData', url, extraParams, isRefresh, timeFilter)
this.$emit('getChartData', url, extraParams, timeFilter, isRefresh)
},
initEchartsWithTable () {
this.$refs['chart' + this.chartInfo.id] &&

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

@@ -38,6 +38,7 @@
:table="table"
:is-fullscreen="isFullscreen"
:order-pie-table="orderPieTable"
:need-timeout="needTimeout"
:time-filter="timeFilter"
@getChartData="getChartData"
@showLoading="showLoading"
@@ -102,7 +103,8 @@ export default {
timeFilter: Object, // 时间范围
isFullscreen: Boolean,
panelLock: Boolean,
entity: Object
entity: Object,
needTimeout: Boolean
},
data () {
return {
@@ -170,7 +172,7 @@ export default {
this.getChartData()
},
/* 参数 extraParams 额外请求参数 */
getChartData (url, extraParams = {}, chartTimeFilter, num) {
getChartData (url, extraParams = {}, chartTimeFilter, isRefresh) {
this.loading = true
try {
if (chartTimeFilter) {
@@ -267,7 +269,13 @@ export default {
this.errorInfo = response.msg || response.message || 'Unknown'
}
}).finally(() => {
if (this.needTimeout) {
setTimeout(() => {
this.loading = false
}, 3000)
} else {
this.loading = false
}
})
} else if (this.isGroup || this.isTabs) {
this.$refs.chart && this.$refs.chart.$refs.chart && this.$refs.chart.$refs.chart.reload()

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

@@ -1,5 +1,5 @@
<template>
<div :id='`chartList${(isGroup ? "Group" : "") + timestamp}`' class="chart-list" ref="layoutBox">
<div :id='`chartList${timestamp}`' class="chart-list" ref="layoutBox">
<grid-layout
id="gridLayout"
ref="layout"
@@ -22,7 +22,6 @@
:y="item.y"
:static="item.static"
:ref="'grid-item' + item.id"
:isResizable="isGroup ? false: null"
dragAllowFrom=".chart-header"
dragIgnoreFrom=".chart-header__tools"
v-bind="anchorPoint(item)"
@@ -32,6 +31,7 @@
:chart-info="item"
:time-filter="timeFilter"
:entity="entity"
:need-timeout="needTimeout"
@groupShow="groupShow"
@showFullscreen="showFullscreen"
></panel-chart>
@@ -56,6 +56,7 @@
:is-fullscreen="true"
:panelLock="panelLock"
:time-filter="timeFilter"
:need-timeout="needTimeout"
@showFullscreen="showFullscreen"
></panel-chart>
</el-dialog>
@@ -68,8 +69,6 @@ import VueGridLayout from 'vue-grid-layout'
import { getGroupHeight, isGroup, getTypeCategory } from './charts/tools'
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 {
@@ -82,9 +81,9 @@ export default {
props: {
timeFilter: Object, // 时间范围
panelLock: { type: Boolean, default: true },
isGroup: Boolean,
entity: Object,
dataList: Array // 看板中所有图表信息
dataList: Array, // 看板中所有图表信息
needTimeout: Boolean // 对于tab和group，需要延迟渲染，避免丢失宽度
},
data () {
return {
@@ -108,7 +107,7 @@ export default {
},
methods: {
init () {
const dom = document.getElementById(this.isGroup ? `chartListGroup${this.timestamp}` : `chartList${this.timestamp}`)
const dom = document.getElementById(`chartList${this.timestamp}`)
if (dom) {
this.stepWidth = Math.floor(dom.offsetWidth / 12)
}

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

@@ -5,6 +5,7 @@
:data-list="dataList"
:panel-lock="true"
:entity="entity"
:need-timeout="true"
>
</panel-chart-list>
</template>

16
src/views/charts/charts/ChartRelationShip.vue
View File

@@ -114,7 +114,7 @@
<script>
import * as echarts from 'echarts'
import loadsh from 'lodash'
import _ from 'lodash'
import { relationShip } from './options/sankey'
import ChartRelationShip from '@/views/charts/charts/chart-relation-ship'
import { api } from '@/utils/api'
@@ -173,11 +173,11 @@ export default {
chartData: [Array, Object],
resultType: Object,
queryParams: Object,
entity: Object
entity: Object,
needTimeout: Boolean
},
methods: {
init (id) {
const chartParams = this.chartInfo.params
const name = this.$route.query.name
const path = window.location.protocol + '//' + window.location.host
const dom = document.getElementById(id)
@@ -233,10 +233,10 @@ export default {
if (item && !data.some(d => d.name === item.name)) {
data.push({ name: item.name, ...handleStyle(item) })
}
if (item && !loadsh.isEmpty(item.from) && !loadsh.isEmpty(item.to)) {
if (item && !_.isEmpty(item.from) && !_.isEmpty(item.to)) {
links.push({ target: item.to, source: item.from })
}
if (item && !loadsh.isEmpty(item.leaf)) {
if (item && !_.isEmpty(item.leaf)) {
item.leaf.forEach(i => {
handleData(data, links, i)
})
@@ -296,7 +296,13 @@ export default {
chartData: {
deep: true,
handler (n) {
if (this.needTimeout) {
setTimeout(() => {
this.init(`chart${this.chartInfo.id}`)
}, 3000)
} else {
this.init(`chart${this.chartInfo.id}`)
}
}
}
},

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

@@ -17,6 +17,7 @@
:data-list="tab.children"
:active-tab="activeTab"
:panel-lock="true"
:need-timeout="true"
:entity="entity"
>
</panel-chart-list>

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

@@ -13,6 +13,7 @@ import {
import { handleEchartFontSize, getEchartsFontSize } from '@/utils/tools'
export default {
props: {
needTimeout: Boolean,
chartInfo: Object,
chartData: [Object, Array, String] // 数据在父组件查询后传入，本组件内不查询，只根据接传递的数据来渲染
},
@@ -238,9 +239,15 @@ export default {
deep: true,
handler (n) {
if (this.chartData && this.chartData.length > 0) {
if (this.needTimeout) {
setTimeout(() => {
this.initEcharts(`chart${this.chartInfo.id}`)
}, 3000)
} else {
this.initEcharts(`chart${this.chartInfo.id}`)
}
}
}
}
}
}