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

feat: 特殊 ip 列表重构

Browse Source
This commit is contained in:
@changcode
2022-01-20 18:08:01 +08:00
parent 459172fd46
commit 16f6b25525
5 changed files with 192 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -499,7 +499,9 @@
height: calc(100% - 40px);
}
}
&>.cn-chart__table,{
&>.cn-chart__table{
height: 100%;
width: 100%;
.cn-chart__header {
border-bottom: 1px solid $--content-right-background-color;
.header__operations {
@@ -580,6 +582,8 @@
.cn-chart__body {
flex: auto;
overflow-y: auto;
height: 100%;
width: 100%;
.el-table {
padding: 0 10px;
@@ -601,6 +605,30 @@
color: #333;
}
}
.active-ip__icon {
overflow: hidden;
position: absolute;
top: 8px;
left: 6px;
display: flex;
justify-content: center;
justify-items: center;
align-items: center;
width: 23px;
height: 23px;
border-radius: 50%;
background: #e8fbf9;
border: 2px solid #e8fbf9;
}
.ip-green {
color: #23BF9A;
}
.active-ip__content {
position: absolute;
top: 7px;
left: 35px;
overflow: hidden;
}
}
}
&>.cn-chart__echarts {

7
src/views/charts/Chart2.vue
View File

@@ -79,7 +79,7 @@
></chart-ip-open-port-bar>
<chart-table
v-else-if="isTable"
v-else-if="isTable && isCurrentTable"
:chart-info="chartInfo"
:chart-data="chartData"
:table="table"
@@ -91,6 +91,7 @@
v-else-if="isActiveIpTable"
:chart-info="chartInfo"
:chart-data="chartData"
:table="table"
:query-params="queryParams"
></chart-active-ip-table>
@@ -149,6 +150,7 @@ import {
isEchartsLine,
isSingleValue,
isTable,
isCurrentTable,
isActiveIpTable,
isTitle,
isMap,
@@ -214,7 +216,7 @@ export default {
},
computed: {
isNoData () {
return !this.loading && (_.isEmpty(this.chartData) || this.isError) && !this.isSingleValue && !this.isTabs && !this.isDomainDnsRecord && !this.isCryptocurrencyEventList
return !this.loading && (_.isEmpty(this.chartData) || this.isError) && !this.isSingleValue && !this.isTabs && !this.isDomainDnsRecord && !this.isCryptocurrencyEventList && !this.isActiveIpTable
},
chartOption () {
if (this.customChartOption) {
@@ -246,6 +248,7 @@ export default {
isSingleValueWithEchartsTemp: isSingleValueWithEchartsTemp(props.chartInfo.type),
isRelationShip: isRelationShip(props.chartInfo.type),
isTable: isTable(props.chartInfo.type),
isCurrentTable: isCurrentTable(props.chartInfo.type),
isActiveIpTable: isActiveIpTable(props.chartInfo.type),
isMap: isMap(props.chartInfo.type),
isTitle: isTitle(props.chartInfo.type),

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

@@ -1,7 +1,7 @@
<template>
<div class="chart-header" :class="{'chart-header--title-chart': isTitle}">
<div class="chart-header__title" v-if="!isTable" :class="{'chart-header__title--block': isBlock}">{{chartInfo.name}}</div>
<template v-if="isTable">
<div class="chart-header__title" v-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
@@ -47,8 +47,27 @@
<span class="header__operation-btn" @click="refresh"><i class="cn-icon cn-icon-refresh"></i></span>
</div>
</template>
<template v-else-if="isActiveIpTable">
<div class="header__operations">
<div class="header__operation header__operation--table" >
<el-select
size="mini"
v-model="activeIpTable.orderBy"
class="option__select select-column"
:placeholder="$t('overall.field')"
popper-class="option-popper"
@change="activeIpTableLimitChange"
>
<template v-for="item in chartActiveIpTableOrderOptions" :key="item">
<el-option :value="item">{{item}}</el-option>
</template>
</el-select>
</div>
</div>
</template>
<chart-error :isError="isError" :errorInfo="errorInfo"></chart-error>
<div class="chart-header__tools" v-if="!isTitle && !isTabs && !isTable">
<div class="chart-header__tools" v-if="!isTitle && !isTabs && !isCurrentTable && !isActiveIpTable">
<div class="panel__time" v-if="chartInfo.params && chartInfo.params.showTimeTool">
<date-time-range class="date-time-range" :start-time="chartTimeFilter.startTime" :end-time="chartTimeFilter.endTime" ref="dateTimeRange" @change="reload"/>
<time-refresh class="date-time-range" @change="timeRefreshChange" :end-time="chartTimeFilter.endTime"/>
@@ -66,11 +85,11 @@
</template>
<script>
import { isTitle, isTabs, isBlock, isTable } from './charts/tools'
import {isTitle, isTabs, isBlock, isTable, isActiveIpTable, isCurrentTable} from './charts/tools'
import ChartError from '@/components/charts/ChartError'
import { getNowTime } from '@/utils/date-util'
import { ref } from 'vue'
import {chartTableTopOptions} from "@/utils/constants";
import {chartTableTopOptions, chartActiveIpTableOrderOptions} from "@/utils/constants";
export default {
name: 'ChartHeader',
@@ -92,7 +111,35 @@ export default {
data () {
return {
dropdownMenuShow: false,
errorText: ''
errorText: '',
activeIpTable: { // ActiveIpTable select
orderBy: 'machine',
tableData: [
{
name: '192.168.20.21',
num: 111
}, {
name: '192.168.20.22',
num: 345
}, {
name: '192.168.20.23',
num: 111
}, {
name: '192.168.20.24',
num: 345
}, {
name: '192.168.20.25',
num: 111
}, {
name: '192.168.20.26',
num: 345
}
] // table的所有数据
},
}
},
methods: {
@@ -113,6 +160,9 @@ export default {
},
tableLimitChange () {
this.$emit('tableChange')
},
activeIpTableLimitChange () {
this.$emit('tableChange')
}
},
setup (props) {
@@ -123,10 +173,13 @@ export default {
return {
chartTimeFilter,
chartTableTopOptions,
chartActiveIpTableOrderOptions,
isTitle: isTitle(props.chartInfo.type),
isBlock: isBlock(props.chartInfo.type),
isTabs: isTabs(props.chartInfo.type),
isTable: isTable(props.chartInfo.type)
isTable: isTable(props.chartInfo.type),
isCurrentTable: isCurrentTable(props.chartInfo.type),
isActiveIpTable: isActiveIpTable(props.chartInfo.type),
}
}
}

98
src/views/charts/charts/ChartActiveIpTable.vue
View File

@@ -1,13 +1,99 @@
<template>
<div>1</div>
<div class="cn-chart__table">
<div class="cn-chart__body">
<el-table
style="width: 100%"
tooltip-effect="light"
:data="activeIpTable.tableData"
:show-header="false"
:cell-style="{padding:'7px 0'}"
>
<el-table-column>
<template #default="{ row }">
<div class="active-ip__icon"><i class="cn-icon cn-icon-ip ip-green"></i></div>
<div class="active-ip__content" >
{{row['name']}}
</div>
</template>
</el-table-column>
<el-table-column align="center">
<template #default="{ row }">
<span>
{{row['num']}}
</span>
</template>
</el-table-column>
<el-table-column
v-for="(c, i) in table.tableColumns"
show-overflow-tooltip
:key="i"
:label="c.label"
:prop="c.prop"
>
<template #default="{ row }">
<span v-if="c.prop === 'bytes'">
{{unitConvert(row[c.prop], unitTypes.byte).join(' ')}}
</span>
<span v-else-if="c.prop === 'packets' || c.prop === 'sessions'">
{{unitConvert(row[c.prop], unitTypes.number).join(' ')}}
</span>
<span v-else>
{{row[c.prop]}}
</span>
</template>
</el-table-column>
</el-table>
</div>
</div>
</template>
<script>
import {unitTypes} from '@/utils/constants'
import unitConvert from '@/utils/unit-convert'
export default {
name: "ChartActiveIpTable"
name: "ChartActiveIpTable",
props: {
chartInfo: Object,
chartData: [Array, Object],
queryParams: Object,
table: Object
},
data () {
return {
unitConvert,
unitTypes,
activeIpTable: {
orderBy: 'machine',
tableData: [
{
name: '192.168.20.21',
num: 111
}, {
name: '192.168.20.22',
num: 345
}, {
name: '192.168.20.23',
num: 111
}, {
name: '192.168.20.24',
num: 345
}, {
name: '192.168.20.25',
num: 111
}, {
name: '192.168.20.26',
num: 345
}
] // table的所有数据
}
}
},
mounted() {
console.log(this.chartData)
}
}
</script>
<style scoped>
</style>

6
src/views/charts/charts/tools.js
View File

@@ -101,6 +101,10 @@ export function isEchartsWithTable (type) {
export function isTable (type) {
return type >= 61 && type <= 70
}
/* current table */
export function isCurrentTable (type) {
return type === 61
}
/* table */
export function isActiveIpTable (type) {
return type === 63
@@ -139,7 +143,7 @@ export function isDomainWhois (type) {
}
/* DOMAIN实体DNS记录 */
export function isDomainDnsRecord (type) {
return type === 84
return type === 62
}
/* 近期挖矿事件 */
export function isCryptocurrencyEventList (type) {