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

feat：添加 block 折叠功能

Browse Source
This commit is contained in:
zhangyu
2022-01-21 10:54:21 +08:00
parent 8e6b058ad2
commit 5afc84e13a
4 changed files with 47 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/views/charts/ChartHeader.vue
View File

@@ -1,8 +1,13 @@
<template>
<div class="chart-header" :class="{'chart-header--title-chart': isTitle}">
<div class="chart-header__title" v-if="!isCurrentTable" :class="{'chart-header__title--block': isBlock}">{{chartInfo.name}}</div>
<div class="chart-header__title" v-if="!isCurrentTable&&(isGroup||isBlock)" :class="{'chart-header__title--block': isBlock}">
<span @click="groupShow"> <i class="cn-icon" :class="chartInfo.params&&chartInfo.params.collapse ? 'cn-icon-arrow-right': 'cn-icon-arrow-down'"></i></span>
{{chartInfo.name}}
</div>
<div class="chart-header__title" v-else-if="!isCurrentTable" :class="{'chart-header__title--block': isBlock}">{{chartInfo.name}}</div>
<template v-if="isCurrentTable">
<div class="chart-header__title">
<!-- -->
<span :title="chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name">{{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}</span>
<span
v-if="chartInfo.params && chartInfo.params.as"
@@ -85,11 +90,11 @@
</template>
<script>
import {isTitle, isTabs, isBlock, isTable, isActiveIpTable, isCurrentTable} from './charts/tools'
import { isTitle, isTabs, isBlock, isTable, isActiveIpTable, isCurrentTable, isGroup } from './charts/tools'
import ChartError from '@/components/charts/ChartError'
import { getNowTime } from '@/utils/date-util'
import { ref } from 'vue'
import {chartTableTopOptions, chartActiveIpTableOrderOptions} from "@/utils/constants";
import { chartTableTopOptions, chartActiveIpTableOrderOptions } from '@/utils/constants'
export default {
name: 'ChartHeader',
@@ -139,7 +144,7 @@ export default {
num: 345
}
] // table的所有数据
},
}
}
},
methods: {
@@ -155,6 +160,10 @@ export default {
reload (s, e, v) {
this.dateTimeRangeChange(s, e, v)
},
groupShow () {
console.log(123)
this.emitter.emit('groupShow', this.chartInfo)
},
dateTimeRangeChange (s, e, v) {
this.chartTimeFilter = { startTime: s, endTime: e, dateRangeValue: v }
},
@@ -180,6 +189,7 @@ export default {
isTable: isTable(props.chartInfo.type),
isCurrentTable: isCurrentTable(props.chartInfo.type),
isActiveIpTable: isActiveIpTable(props.chartInfo.type),
isGroup: isGroup(props.chartInfo.type)
}
}
}

8
src/views/charts/Panel.vue
View File

@@ -6,9 +6,11 @@
<time-refresh class="date-time-range" @change="timeRefreshChange" :end-time="timeFilter.endTime"/>
</div>
<panel-chart-list
ref="panelChartList"
:time-filter="timeFilter"
:data-list="chartList"
:panel-lock="panelLock"
:entity="entity"
>
</panel-chart-list>
</div>
@@ -17,6 +19,7 @@
<div class="entity-detail__body">
<div class="cn-panel2" id="cn-panel">
<panel-chart-list
ref="panelChartList"
:time-filter="timeFilter"
:data-list="chartList"
:panel-lock="panelLock"
@@ -62,6 +65,7 @@ export default {
}
},
async mounted () {
this.emitter.on('groupShow', this.groupShow)
this.isCryptocurrency = this.$route.path.indexOf('cryptocurrency') > -1
await this.init()
if (!this.$_.isEmpty(this.detailTabs)) {
@@ -137,6 +141,10 @@ export default {
this.chartList.forEach(chart => {
this.$refs[`chart-${chart.id}`] && this.$refs[`chart-${chart.id}`].reloadChart()
})
},
groupShow (chart) {
console.log( this.$refs.panelChartList,chart)
this.$refs.panelChartList.groupShow(chart)
}
}
}

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

@@ -22,7 +22,7 @@
<!-- 数据查询后传入chart组件，chart组件内不查询，只根据接传递的数据来渲染 -->
<chart
ref="chart"
v-if="(!isGroup || !(chartInfo.params && chartInfo.params.collapse)) && !isTitle"
v-if="((!isBlock) || !(chartInfo.params && chartInfo.params.collapse)) && !isTitle"
:chart-data="chartData"
:result-type="resultType"
:chart-info="chartInfo"

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

@@ -8,7 +8,7 @@
:is-draggable="!panelLock"
:is-resizable="!panelLock"
:margin="[10, 10]"
:row-height="40"
:row-height="rowHeight"
:vertical-compact="true"
:use-css-transforms="false"
>
@@ -86,6 +86,7 @@ export default {
return {
gridLayoutLoading: false,
gridLayoutShow: false,
rowHeight: 40,
copyDataList: [],
noData: false, // no data
tempDom: { height: '', width: '' },
@@ -111,6 +112,20 @@ export default {
showFullscreen (show, chartInfo) {
this.fullscreen.chartInfo = chartInfo
this.fullscreen.visible = show
},
groupShow (chart) {
console.log(chart, this.copyDataList)
this.copyDataList.forEach((item, index) => {
if (item.id === chart.id) {
item.params.collpase = !item.params.collpase
if (item.params.collpase) {
item.h = 1
} else {
item.h = item.oldH
}
}
})
this.copyDataList = [...this.copyDataList]
}
},
computed: {
@@ -132,202 +147,18 @@ export default {
this.gridLayoutShow = false
this.gridLayoutLoading = true
this.noData = !n || n.length < 1
/*const nn = JSON.parse(`
[
{
"id": 1,
"name": "Sessions",
"i18n": "overall.sessions",
"panelId": 1,
"pid": 0,
"type": 11,
"x": 20,
"y": 1,
"w": 10,
"h": 5,
"params": "{\\"url\\":\\"/interface/traffic/sessions?startTime={{startTime}}&endTime={{endTime}}\\",\\"unitType\\":\\"number\\"}",
"remark": "",
"state": 1,
"buildIn": 0,
"children": [],
"parent": null,
"panel": {
"id": 1
}
},
{
"id": 2,
"name": "Traffic summary",
"i18n": "trafficSummary.trafficSummary",
"panelId": 1,
"pid": 0,
"type": 93,
"x": 0,
"y": 0,
"w": 30,
"h": 1,
"params": "",
"remark": "",
"state": 1,
"buildIn": 0,
"children": [],
"parent": null,
"panel": {
"id": 1
}
},
{
"id": 3,
"name": "Active list",
"i18n": "trafficSummary.activeList",
"panelId": 1,
"pid": 0,
"type": 93,
"x": 0,
"y": 16,
"w": 30,
"h": 1,
"params": "",
"remark": "",
"state": 1,
"buildIn": 0,
"children": [],
"parent": null,
"panel": {
"id": 1
}
},
{
"id": 4,
"name": "Domain analysis statistics",
"i18n": "trafficSummary.domainStatistics",
"panelId": 1,
"pid": 0,
"type": 93,
"x": 0,
"y": 35,
"w": 30,
"h": 1,
"params": "",
"remark": "",
"state": 1,
"buildIn": 0,
"children": [],
"parent": null,
"panel": {
"id": 1
}
},
{
"id": 6,
"name": "Packets",
"i18n": "overall.packets",
"panelId": 1,
"pid": 0,
"type": 11,
"x": 20,
"y": 6,
"w": 10,
"h": 5,
"params": "{\\"url\\":\\"/interface/traffic/packets?startTime={{startTime}}&endTime={{endTime}}\\",\\"unitType\\":\\"number\\"}",
"remark": "",
"state": 1,
"buildIn": 0,
"children": [],
"parent": null,
"panel": {
"id": 1
}
},
{
"id": 9,
"name": "Throughput",
"i18n": "trafficSummary.throughput",
"panelId": 1,
"pid": 0,
"type": 11,
"x": 20,
"y": 11,
"w": 10,
"h": 5,
"params": "{\\"url\\":\\"/interface/traffic/throughput?startTime={{startTime}}&endTime={{endTime}}\\",\\"unitType\\":\\"byte\\"}",
"remark": "packets",
"state": 1,
"buildIn": 0,
"children": [],
"parent": null,
"panel": {
"id": 1
}
},
{
"id": 10,
"name": "Active client",
"i18n": "trafficSummary.activeClient",
"panelId": 1,
"pid": 0,
"type": 61,
"x": 0,
"y": 17,
"w": 10,
"h": 9,
"params": "{\\"url\\":\\"/interface/traffic/activeClientIP?startTime={{startTime}}&endTime={{endTime}}&order={{order}}&limit={{limit}}\\"}",
"remark": "",
"state": 1,
"buildIn": 0,
"children": [],
"parent": null,
"panel": {
"id": 1
}
},
{
"id": 11,
"name": "Domain category",
"i18n": "trafficSummary.domainCategory",
"panelId": 1,
"pid": 0,
"type": 31,
"x": 0,
"y": 36,
"w": 15,
"h": 13,
"params": "{\\"url\\":\\"/interface/traffic/topDomainCategories?startTime={{startTime}}&endTime={{endTime}}&limit={{limit}}\\",\\"nameColumn\\":\\"fqdnCategoryName\\",\\"valueColumn\\":\\"uniqDomains\\",\\"tableNameColumn\\":\\"domain\\",\\"urlTable\\":\\"/interface/traffic/activeDomainCategories?startTime={{startTime}}&endTime={{endTime}}&fqdnCategoryName={{fqdnCategoryName}}&limit={{limit}}&order={{order}}\\",\\"urlChildrenTable\\":\\"/interface/traffic/domainCategoryServerIpList?startTime={{startTime}}&endTime={{endTime}}&order={{order}}&limit={{limit}}&domain={{domain}}\\"}",
"remark": "",
"state": 1,
"buildIn": 0,
"panel": {
"id": 1
}
},
{
"id": 12,
"name": "Traffic map",
"i18n": "trafficSummary.trafficMap",
"panelId": 1,
"pid": 0,
"type": 2,
"x": 0,
"y": 1,
"w": 20,
"h": 15,
"params": "{\\"url\\":\\"/interface/traffic/map?startTime={{startTime}}&endTime={{endTime}}&country={{country}}&province={{province}}&city={{city}}\\",\\"unitType\\":\\"byte\\",\\"valueColumn\\":\\"bytes\\"}",
"remark": "traffic summaryyy",
"state": 1,
"buildIn": 0,
"children": [],
"parent": null,
"panel": {
"id": 1
}
}
]
`)*/
const tempList = n.map(item => {
const height = item.h
if (item.params) {
item.params.showHeader = true
if (item.type === 95 || item.type === 94) {
item.oldH = item.h
item.params.collpase = false
}
if (item.params.collpase) {
item.h = this.rowHeight
}
}
const height = item.h
return {
...item,
i: item.id,