feat: CN-1592 UI 新增Tag检索界面:列表部分
This commit is contained in:
hanyuxia
@@ -98,9 +98,33 @@
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.tag-dropdown{
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
justify-content: center;
|
||||
line-height: 24px;
|
||||
padding: 0px 6px;
|
||||
span {
|
||||
margin-right: 6px;
|
||||
}
|
||||
i {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.tag-dropdown:hover,.tag-dropdown__active {
|
||||
cursor:pointer;
|
||||
//background: rgba(113,113,113,0.10);
|
||||
box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
|
||||
border-radius: 2px;
|
||||
i {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.expand {
|
||||
min-height: 95px;
|
||||
min-height: 150px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
position: relative;
|
||||
@@ -110,37 +134,32 @@
|
||||
.expand-cell {
|
||||
display: flex;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E7EAED;
|
||||
//border: 1px solid #E7EAED;
|
||||
border-radius: 2px;
|
||||
margin: 0 12px 16px 0;
|
||||
width: 300px;
|
||||
height: 97px;
|
||||
.expand-right {
|
||||
background: #F9F9F9;
|
||||
border-radius: 2px;
|
||||
width: 97px;
|
||||
height: 94px;
|
||||
margin: 0 12px 6px 0;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
.expand-left {
|
||||
//background: #F9F9F9;
|
||||
//border-radius: 2px;
|
||||
width:calc(100% - 200px);
|
||||
height: 150px;
|
||||
position: relative;
|
||||
.demo-progress {
|
||||
position: absolute;
|
||||
top: 21px;
|
||||
left: 18.5px;
|
||||
}
|
||||
.demo-progress,.demo-progress .el-progress-circle {
|
||||
width: 57px !important;
|
||||
height: 57px !important;
|
||||
.chart-drawing {
|
||||
height: 150px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.expand-left {
|
||||
.expand-right {
|
||||
text-align: center;
|
||||
width: calc(100% - 97px);
|
||||
width: 200px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
.expand-name {
|
||||
font-size: 12px;
|
||||
.expand-count {
|
||||
font-size: 22px;
|
||||
color: #666666;
|
||||
font-weight: 400;
|
||||
font-weight: 700;
|
||||
margin-bottom: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -149,13 +168,15 @@
|
||||
padding: 2px 3px 0 0;
|
||||
}
|
||||
}
|
||||
.expand-time {
|
||||
.expand-observed-Ips {
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
margin-bottom: 4px;
|
||||
div:nth-of-type(1) {
|
||||
font-size: 12px;
|
||||
color: #999999;
|
||||
color: #35adda;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.expand-icon {
|
||||
@@ -259,3 +280,71 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.type-tag {
|
||||
display: inline-block;
|
||||
padding: 0 10px;
|
||||
box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
|
||||
border-radius: 12px;
|
||||
}
|
||||
.unknow {
|
||||
background-color:rgba(119,131,145,0.1) !important;
|
||||
color:rgb(119,131,145)
|
||||
}
|
||||
.benign {
|
||||
background-color:rgba(116,159,77,0.1) !important;
|
||||
color:rgb(116,159,77)
|
||||
}
|
||||
.malicious {
|
||||
background-color:rgba(226,97,84,0.1) !important;
|
||||
color:rgb(226,97,84)
|
||||
}
|
||||
.tag__popper {
|
||||
width: 180px !important;
|
||||
min-width: 180px;
|
||||
max-height:206px;
|
||||
overflow:hidden;
|
||||
padding: 0 !important;
|
||||
background: #963131;
|
||||
border:1px solid #C5C5C5 !important;
|
||||
box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85)!important;
|
||||
border-radius: 2px !important;
|
||||
.el-row {
|
||||
width: 100% !important;
|
||||
}
|
||||
.selected {
|
||||
color: #0091ff;
|
||||
font-weight: bold;
|
||||
}
|
||||
.el-popper {
|
||||
max-height: 405px;
|
||||
}
|
||||
.select-dropdown {
|
||||
max-height:172px;
|
||||
width:100%;
|
||||
margin: 1px 0px;
|
||||
overflow:auto;
|
||||
list-style: none;
|
||||
padding:4px 0px;
|
||||
box-sizing: border-box;
|
||||
.select-dropdown__item:hover{
|
||||
background-color: #F5F7FA !important;
|
||||
}
|
||||
.select-dropdown__item{
|
||||
width:100%;
|
||||
height:30px;
|
||||
padding:0px 11px;
|
||||
line-height:30px;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: #666665;
|
||||
display: list-item;
|
||||
text-align: -webkit-match-parent;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -17,73 +17,49 @@
|
||||
<el-table-column type="expand" width="30">
|
||||
<template #default="props">
|
||||
<div class="down">
|
||||
<div class="block drop-down-time">
|
||||
<el-date-picker
|
||||
v-model="timeRange"
|
||||
size="small"
|
||||
:format="format"
|
||||
:clearable="false"
|
||||
type="datetimerange"
|
||||
range-separator="To"
|
||||
:start-placeholder="$t('detections.startTime')"
|
||||
:end-placeholder="$t('detections.endTime')"
|
||||
@change="datePickerChange(props.row)"
|
||||
/>
|
||||
<div class="block drop-down-time" style="border:0px yellow solid;">
|
||||
<el-popover placement="bottom-start"
|
||||
:ref="`tagPopover${props.row.id}`"
|
||||
:key="`tagPopover${props.row.id}`"
|
||||
:show-arrow="false"
|
||||
:append-to-body="true"
|
||||
:hide-after="0"
|
||||
:show-after="0"
|
||||
popper-class="tag__popper"
|
||||
trigger="click">
|
||||
<template #reference>
|
||||
<div class="tag-dropdown" :id="`tagDropdown${props.row.id}`">
|
||||
<span>{{ curExpendDataType }}</span><i class="cn-icon-down cn-icon"></i>
|
||||
</div>
|
||||
</template>
|
||||
<el-row type="flex" justify="center" style="width: fit-content;flex-direction: column;">
|
||||
<ul class="select-dropdown" :id="`tagSelectDropdown${props.row.id}`" >
|
||||
<li key="uniqueEntityObserved" :id="`uniqueEntityObserved${props.row.id}`" class="select-dropdown__item" @click="uniqueEntityObserved(props.row)" >
|
||||
<span>{{ $t('tag.uniqueEntityObserved') }}</span>
|
||||
</li>
|
||||
<li key="totalIndicators" :id="`totalIndicators${props.row.id}`" class="select-dropdown__item" @click="totalIndicators(props.row)">
|
||||
<span>{{ $t('tag.totalIndicators') }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</el-row>
|
||||
</el-popover>
|
||||
</div>
|
||||
<div class="expand">
|
||||
<loading :loading="loadingDown"></loading>
|
||||
<chart-no-data v-if="downDataList.length === 0 && !loadingDown"></chart-no-data>
|
||||
<div class="expand-cell" v-for="(item, index) in downDataList" :key="index">
|
||||
<div class="expand-right">
|
||||
<div class="demo-progress">
|
||||
<el-progress :stroke-width="10" type="circle" :percentage="computePercent(item)"
|
||||
:color="computePercent(item) === 'Failed' ? '#D8A6A6' : (computePercent(item) === 100 ? '#21bf9a' : '#50b3ef')">
|
||||
<template #default="{ percentage }">
|
||||
<span style="font-size: 0.875rem;" v-if="percentage !== 'Failed'">{{ percentage + '%' }}</span>
|
||||
<span style="font-size: 0.875rem;color: #C14843" v-else>{{ percentage }}</span>
|
||||
</template>
|
||||
</el-progress>
|
||||
</div>
|
||||
<chart-no-data v-if="isNoData && !loadingDown"></chart-no-data>
|
||||
<div class="expand-cell" >
|
||||
<div class="expand-left" style="border:0px red solid;">
|
||||
<div class="chart-drawing" :id="`chart${props.row.id}`"></div>
|
||||
</div>
|
||||
<div class="expand-left">
|
||||
<div class="expand-name"><i class="cn-icon cn-icon-user"></i>{{ username }}</div>
|
||||
<div class="expand-time">
|
||||
<div>{{ $t('tag.creationTime') }}</div>
|
||||
<div>{{ dateFormatByAppearance(item.ctime) }}</div>
|
||||
</div>
|
||||
<div class="expand-icon">
|
||||
<div class="table-operation-item--no-border"
|
||||
:class="{'table-operation-item--disabled': computePercent(item) === 'Failed' || computePercent(item) < 100}"
|
||||
@click="tagOperation(['download', item])">
|
||||
<loading :loading="loadingTableId === item.id" size="small"></loading>
|
||||
<svg class="icon" aria-hidden="true" :class="{'table-operation-all-loading': loadingTableId}">
|
||||
<use xlink:href="#cn-icon-download2"></use>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="table-operation-item--no-border"
|
||||
:class="{'table-operation-item--disabled': computePercent(item) === 'Failed' || computePercent(item) < 100}"
|
||||
@click="tagOperation(['preview', item])">
|
||||
<loading :loading="loadingPreviewId === item.id" size="small"></loading>
|
||||
<svg class="icon" aria-hidden="true" :class="{'table-operation-all-loading': loadingPreviewId}">
|
||||
<use xlink:href="#cn-icon-preview"></use>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="table-operation-item--no-border" @click="downDeleteQueryChange(item, props)">
|
||||
<svg class="icon" aria-hidden="true">
|
||||
<use xlink:href="#cn-icon-shanchu"></use>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="expand-right" style="border:0px green solid;">
|
||||
<div class="expand-count">{{observedCount}}</div>
|
||||
<div class="expand-observed-Ips" @click="toEntityList(props.row)">
|
||||
<div v-if="disableToEntity" style="cursor: not-allowed;">Observed IPs -></div>
|
||||
<div v-else style="cursor: pointer;">Observed IPs -></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cn-detection__footer">
|
||||
<chart-detection-pagination
|
||||
ref="pagination"
|
||||
:page-obj="pageObj"
|
||||
@pageJump="pageJump"
|
||||
></chart-detection-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
@@ -91,6 +67,7 @@
|
||||
:resizable="false"
|
||||
align="center"
|
||||
type="selection"
|
||||
:selectable="(row) => { return row.isBuiltIn !== 1 }"
|
||||
width="30">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
@@ -111,76 +88,10 @@
|
||||
<div class="col-resize-area"></div>
|
||||
</template>
|
||||
<template #default="scope" :column="item">
|
||||
<span v-if="item.prop === 'timeLimit'">
|
||||
{{ handleTimeRange(scope.row) }}
|
||||
</span>
|
||||
<span v-else-if="item.prop === 'categoryId'">
|
||||
<span>{{ getCategoryName(scope.row.categoryId) }}</span>
|
||||
</span>
|
||||
<span v-else-if="item.prop === 'timePlan'">
|
||||
<template v-if="scope.row.config && scope.row.config.isScheduler === 0">
|
||||
{{ $t('tag.always') }}
|
||||
</template>
|
||||
<template v-else-if="scope.row.config && scope.row.config.isScheduler === 1">
|
||||
<el-popover
|
||||
placement="right-start"
|
||||
:width="270"
|
||||
trigger="hover"
|
||||
class="my-table"
|
||||
@show="handleConfig(scope.row)"
|
||||
>
|
||||
<template #reference>
|
||||
<span>
|
||||
<template v-if="scope.row.config && scope.row.config.schedulerConfig">
|
||||
<template v-if="scope.row.config.schedulerConfig.type === 'day'">
|
||||
{{ $t('tag.daily') }}
|
||||
</template>
|
||||
<template v-else-if="scope.row.config.schedulerConfig.type === 'week'">
|
||||
{{ $t('tag.weekly') }}
|
||||
</template>
|
||||
<template v-else-if="scope.row.config.schedulerConfig.type === 'month'">
|
||||
{{ $t('tag.monthly') }}
|
||||
</template>
|
||||
<template v-else-if="scope.row.config.schedulerConfig.type === ''">
|
||||
{{ $t('tag.oneTime') }}
|
||||
</template>
|
||||
<template v-else>
|
||||
-
|
||||
</template>
|
||||
</template>
|
||||
</span>
|
||||
</template>
|
||||
<el-row class="margin-l-10 margin-t-20">
|
||||
<el-col :span="8" class="tooltip-column-name">{{ $t('tag.period') }}</el-col>
|
||||
<el-col :span="16">{{ configPeriod }}</el-col>
|
||||
</el-row>
|
||||
<el-row class="margin-l-10">
|
||||
<el-col :span="8" class="tooltip-column-name">{{ $t('tag.custom') }}</el-col>
|
||||
<el-col :span="16">{{ configCustom }}</el-col>
|
||||
</el-row>
|
||||
<el-row class="margin-l-10">
|
||||
<el-col :span="8" class="tooltip-column-name">{{ $t('tag.startTime') }}</el-col>
|
||||
<el-col :span="16">{{ dateFormatByAppearance(scope.row.schedulerStart) || '-' }}</el-col>
|
||||
</el-row>
|
||||
<el-row class="margin-l-10">
|
||||
<el-col :span="8" class="tooltip-column-name">{{ $t('tag.endTime') }}</el-col>
|
||||
<el-col :span="16">{{ dateFormatByAppearance(scope.row.schedulerEnd) || '-' }}</el-col>
|
||||
</el-row>
|
||||
</el-popover>
|
||||
</template>
|
||||
<template v-else>
|
||||
-
|
||||
</template>
|
||||
</span>
|
||||
<span v-else-if="item.prop === 'userName'">
|
||||
{{ (scope.row.sysUser && scope.row.sysUser.name) || '-' }}
|
||||
</span>
|
||||
<span v-else-if="item.prop === 'lastTime'">
|
||||
{{ scope.row.lastTime ? dateFormatByAppearance(scope.row.lastTime) : '-' }}
|
||||
</span>
|
||||
<span v-else-if="item.prop === 'total'">
|
||||
{{ scope.row[item.prop] || 0 }}
|
||||
<span v-if="item.prop === 'isBuiltIn'">
|
||||
<span>{{ getIsBuiltIn(scope.row.isBuiltIn) }}</span>
|
||||
</span>
|
||||
<span v-else-if="item.prop === 'intent'" class="type-tag" :class="colorIntent(scope.row[item.prop])">{{scope.row[item.prop]}}</span>
|
||||
<span v-else>{{ scope.row[item.prop] || '-' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
@@ -197,14 +108,17 @@ import table from '@/mixins/table'
|
||||
import Loading from '@/components/common/Loading'
|
||||
import axios from 'axios'
|
||||
import { api } from '@/utils/api'
|
||||
import { storageKey } from '@/utils/constants'
|
||||
import { storageKey, tagIntentColor, chartColor3 } from '@/utils/constants'
|
||||
import { urlParamsHandler, overwriteUrl, headerCellClass } from '@/utils/tools'
|
||||
import { ref } from 'vue'
|
||||
import { ref, shallowRef } from 'vue'
|
||||
import { dateFormatToUTC, getNowTime } from '@/utils/date-util'
|
||||
import chartDetectionPagination from '@/views/charts/charts/chartDetectionPagination'
|
||||
import ChartNoData from '@/views/charts/charts/ChartNoData'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { parseInt } from 'lodash'
|
||||
import unitConvert from '@/utils/unit-convert'
|
||||
import * as echarts from 'echarts'
|
||||
import { tagLineChartOption } from '@/views/charts2/charts/options/echartOption'
|
||||
|
||||
export default {
|
||||
name: 'tagTable',
|
||||
@@ -215,9 +129,7 @@ export default {
|
||||
chartDetectionPagination
|
||||
},
|
||||
props: {
|
||||
categoryList: Array,
|
||||
toolsLoading: Boolean,
|
||||
categoryId: Number,
|
||||
isNoData: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
@@ -228,49 +140,39 @@ export default {
|
||||
return {
|
||||
format: localStorage.getItem(storageKey.dateFormat),
|
||||
username: localStorage.getItem(storageKey.username),
|
||||
curExpendDataType: this.$t('tag.uniqueEntityObserved'),
|
||||
curExpendDataTypeVal: 'uniqueEntityObserved',
|
||||
tableTitle: [ // 原始table列
|
||||
{
|
||||
label: 'ID',
|
||||
prop: 'id',
|
||||
show: true,
|
||||
width: 50
|
||||
}, {
|
||||
label: this.$t('config.user.name'),
|
||||
label: this.$t('overall.name'),
|
||||
prop: 'name',
|
||||
show: true,
|
||||
minWidth: 200,
|
||||
minWidth: 50,
|
||||
sortable: 'custom'
|
||||
}, {
|
||||
label: this.$t('tag.categoryType'),
|
||||
prop: 'categoryId',
|
||||
show: true,
|
||||
minWidth: 180
|
||||
}, {
|
||||
label: this.$t('tag.timeLimit'),
|
||||
prop: 'timeLimit',
|
||||
show: true,
|
||||
minWidth: 110
|
||||
}, {
|
||||
label: this.$t('tag.timePlan'),
|
||||
prop: 'timePlan',
|
||||
show: true,
|
||||
minWidth: 110
|
||||
}, {
|
||||
label: this.$t('tag.operationUserName'),
|
||||
prop: 'userName',
|
||||
show: true,
|
||||
minWidth: 70
|
||||
}, {
|
||||
label: this.$t('tag.resultCount'),
|
||||
prop: 'total',
|
||||
label: this.$t('tag.category'),
|
||||
prop: 'category',
|
||||
show: true,
|
||||
minWidth: 50
|
||||
}, {
|
||||
label: this.$t('tag.lastExecutionTime'),
|
||||
prop: 'lastTime',
|
||||
label: this.$t('tag.entityType'),
|
||||
prop: 'indicatorType',
|
||||
show: true,
|
||||
width: 170,
|
||||
sortable: 'custom'
|
||||
minWidth: 50
|
||||
}, {
|
||||
label: this.$t('tag.intention'),
|
||||
prop: 'intent',
|
||||
show: true,
|
||||
minWidth: 30
|
||||
}, {
|
||||
label: this.$t('tag.source'),
|
||||
prop: 'isBuiltIn',
|
||||
show: true,
|
||||
minWidth: 30
|
||||
}, {
|
||||
label: this.$t('overall.remark'),
|
||||
prop: 'description',
|
||||
show: true
|
||||
}
|
||||
],
|
||||
checkboxAll: false,
|
||||
@@ -285,54 +187,15 @@ export default {
|
||||
loadingPreviewId: '',
|
||||
downDataList: [],
|
||||
disableEdit: false, // 编辑按钮是否不可用，当选择多条记录的时候你，编辑按钮不可用
|
||||
// pageObj: {
|
||||
// pageNo: 1,
|
||||
// pageSize: 20,
|
||||
// total: 0,
|
||||
// resetPageNo: true
|
||||
// },
|
||||
// expandedIds: [],
|
||||
interval: null,
|
||||
typeMappings: [
|
||||
{
|
||||
key: 'day',
|
||||
value: this.$t('tag.daily')
|
||||
},
|
||||
{
|
||||
key: 'week',
|
||||
value: this.$t('tag.weekly')
|
||||
},
|
||||
{
|
||||
key: 'month',
|
||||
value: this.$t('tag.monthly')
|
||||
},
|
||||
{
|
||||
key: '',
|
||||
value: this.$t('tag.oneTime')
|
||||
}
|
||||
],
|
||||
typeUnitMappings: [
|
||||
{
|
||||
key: 'day',
|
||||
value: this.$t('tag.days')
|
||||
},
|
||||
{
|
||||
key: 'week',
|
||||
value: this.$t('tag.week')
|
||||
},
|
||||
{
|
||||
key: 'month',
|
||||
value: this.$t('tag.months')
|
||||
}
|
||||
],
|
||||
scheduleTypeList: tag.scheduleTypeList,
|
||||
weekdayList: tag.weekdayList,
|
||||
monthList: tag.monthList,
|
||||
weekOptions: tag.weekOptions,
|
||||
configPeriod: '',
|
||||
configCustom: '',
|
||||
selectIds: [], // 单行选中的id列表
|
||||
initExpandFlag: false // 初始化时单行展开标志，false是未展开，true展开
|
||||
initExpandFlag: false, // 初始化时单行展开标志，false是未展开，true展开,
|
||||
myChartArray: [],
|
||||
observedCount: 0,
|
||||
disableToEntity: false,
|
||||
tagIntentColor
|
||||
}
|
||||
},
|
||||
/**
|
||||
@@ -368,11 +231,12 @@ export default {
|
||||
pageNo = 1
|
||||
}
|
||||
const pageObj = ref(tempPageObj)
|
||||
|
||||
const myChart = shallowRef(null)
|
||||
return {
|
||||
timeRange,
|
||||
expandedIds,
|
||||
pageObj
|
||||
pageObj,
|
||||
myChart
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@@ -421,40 +285,11 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
handleTimeRange () {
|
||||
return function (row) {
|
||||
let str = ''
|
||||
if (row.config && row.config.timeConfig && row.config.timeConfig.type) {
|
||||
str += row.config.timeConfig.type
|
||||
if (['today', 'yesterday', 'this', 'customize'].indexOf(row.config.timeConfig.type) === -1 && row.config.timeConfig.offset) {
|
||||
str += ` ${row.config.timeConfig.offset} ${row.config.timeConfig.unit}`
|
||||
}
|
||||
}
|
||||
return str
|
||||
}
|
||||
},
|
||||
computePercent () {
|
||||
return function (item) {
|
||||
if (item.state === 2) {
|
||||
return 'Failed'
|
||||
}
|
||||
if (item.percent === 1) {
|
||||
if (localStorage.getItem(storageKey.s3Enable) == 1) {
|
||||
if (item.state === 1 && item.upload === 1) {
|
||||
return 100
|
||||
} else {
|
||||
return 99.99
|
||||
}
|
||||
} else {
|
||||
if (item.state === 1) {
|
||||
return 100
|
||||
} else {
|
||||
return 99.99
|
||||
}
|
||||
}
|
||||
} else {
|
||||
return parseFloat(item.percent * 100).toFixed(2)
|
||||
}
|
||||
colorIntent () {
|
||||
const vm = this
|
||||
return function (intent) {
|
||||
const t = vm.tagIntentColor.find(t => t.intent === intent)
|
||||
return t ? t.name : vm.tagIntentColor[0].name
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -462,13 +297,131 @@ export default {
|
||||
this.$nextTick(() => {
|
||||
this.expandTable()
|
||||
})
|
||||
window.addEventListener('resize', this.resize)
|
||||
},
|
||||
methods: {
|
||||
headerCellClass,
|
||||
toEntityList (tag) {
|
||||
if (!this.disableToEntity) {
|
||||
this.$router.push({
|
||||
path: '/entity',
|
||||
query: {
|
||||
listMode: 'list',
|
||||
q: 'has(tag,\'' + tag.name + '\')',
|
||||
mode: 'text',
|
||||
// range: this.timeFilter.dateRangeValue,
|
||||
// pageNo: this.pageObj.pageNo,
|
||||
// pageSize: this.pageObj.pageSize,
|
||||
showList: true
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
echartsInit (data, item, type) {
|
||||
const dom = document.getElementById(`chart${item.id}`)
|
||||
if (dom) {
|
||||
// if (!this.myChart) {
|
||||
this.myChart = echarts.init(dom)
|
||||
// }
|
||||
this.chartOption = tagLineChartOption
|
||||
this.chartOption.series = [
|
||||
{
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
borderWidth: 2
|
||||
}
|
||||
},
|
||||
name: 'IP',
|
||||
stack: 'Total',
|
||||
lineStyle: {
|
||||
color: '#35ADDA',
|
||||
width: 1
|
||||
},
|
||||
areaStyle: {
|
||||
// opacity: 0.1,
|
||||
color: '#eef8fc'
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#35ADDA'
|
||||
},
|
||||
data: data.map(t => { return [Number(t.statTime) * 1000, Number(t.ipIndicatorCount)] })
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
borderWidth: 2
|
||||
}
|
||||
},
|
||||
name: 'Domain Name',
|
||||
stack: 'Total',
|
||||
lineStyle: {
|
||||
color: '#E48F3E',
|
||||
width: 1
|
||||
},
|
||||
areaStyle: {
|
||||
color: '#fdf6f0'
|
||||
// opacity: 0.1
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#E48F3E'
|
||||
},
|
||||
data: data.map(t => { return [Number(t.statTime) * 1000, Number(t.domainIndicatorCount)] })
|
||||
}
|
||||
]
|
||||
|
||||
this.chartOption.yAxis[0].axisLabel.formatter = (value) => {
|
||||
return unitConvert(value, 'number').join('')
|
||||
}
|
||||
this.myChartArray.push(this.myChart)
|
||||
this.myChart.setOption(this.chartOption)
|
||||
this.$nextTick(() => {
|
||||
this.myChart.resize()
|
||||
})
|
||||
}
|
||||
},
|
||||
resize () {
|
||||
this.myChartArray.forEach(t => {
|
||||
t.resize()
|
||||
})
|
||||
},
|
||||
uniqueEntityObserved (item) {
|
||||
this.curExpendDataType = this.$t('tag.uniqueEntityObserved')
|
||||
this.curExpendDataTypeVal = 'uniqueEntityObserved'
|
||||
this.disableToEntity = false
|
||||
this.$nextTick(() => {
|
||||
const totalIndicatorsDom = document.getElementById('totalIndicators' + item.id)
|
||||
const uniqueEntityObservedDom = document.getElementById('uniqueEntityObserved' + item.id)
|
||||
uniqueEntityObservedDom.style.cssText = 'color:#0091ff;font-weight: bold;'
|
||||
totalIndicatorsDom.style.cssText = ''
|
||||
document.getElementById('tagDropdown' + item.id).click()
|
||||
})
|
||||
this.init(item, api.tagTrafficEntityTrend, api.tagTrafficEntityStatistics)
|
||||
},
|
||||
totalIndicators (item) {
|
||||
this.curExpendDataType = this.$t('tag.totalIndicators')
|
||||
this.curExpendDataTypeVal = 'totalIndicators'
|
||||
this.disableToEntity = true
|
||||
this.$nextTick(() => {
|
||||
const totalIndicatorsDom = document.getElementById('totalIndicators' + item.id)
|
||||
const uniqueEntityObservedDom = document.getElementById('uniqueEntityObserved' + item.id)
|
||||
uniqueEntityObservedDom.style.cssText = ''
|
||||
totalIndicatorsDom.style.cssText = 'color:#0091ff;font-weight: bold;'
|
||||
document.getElementById('tagDropdown' + item.id).click()
|
||||
})
|
||||
this.init(item, api.tagIndicatorTrend, api.tagIndicatorStatistics)
|
||||
},
|
||||
/**
|
||||
* 进入页面判断是否需要展开表格
|
||||
* 即展开表格后刷新界面，保持展开效果
|
||||
*/
|
||||
* 进入页面判断是否需要展开表格
|
||||
* 即展开表格后刷新界面，保持展开效果
|
||||
*/
|
||||
expandTable () {
|
||||
const expandInfo = this.expandedIds
|
||||
|
||||
@@ -476,7 +429,6 @@ export default {
|
||||
const obj = {
|
||||
id: expandInfo[0]
|
||||
}
|
||||
|
||||
this.dropExpandChange(obj, expandInfo, 'init')
|
||||
|
||||
setTimeout(() => {
|
||||
@@ -507,11 +459,6 @@ export default {
|
||||
return this.$t('overall.inProgress')
|
||||
}
|
||||
},
|
||||
tagOperation (arr) {
|
||||
if (arr[1].percent === 1) {
|
||||
this.tableOperation(arr)
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 单行选中
|
||||
*/
|
||||
@@ -578,194 +525,99 @@ export default {
|
||||
}
|
||||
overwriteUrl(newUrl)
|
||||
},
|
||||
initLine (item, lineUrl) {
|
||||
const params = {
|
||||
// startTime: getSecond(this.timeFilter.startTime),
|
||||
// endTime: getSecond(this.timeFilter.endTime)
|
||||
}
|
||||
lineUrl = lineUrl || api.tagTrafficEntityTrend
|
||||
lineUrl = lineUrl.replace('{{name}}', item.name)
|
||||
this.loadingDown = true
|
||||
axios.get(lineUrl, { params: params }).then(response => {
|
||||
const res = response.data
|
||||
if (response.status === 200) {
|
||||
this.showError = false
|
||||
this.isNoData = res.data.result.length === 0
|
||||
|
||||
if (!this.isNoData) {
|
||||
this.echartsInit(res.data.result, item, '')
|
||||
}
|
||||
} else {
|
||||
this.isNoData = false
|
||||
this.showError = true
|
||||
this.errorMsg = this.errorMsgHandler(res)
|
||||
}
|
||||
}).catch(e => {
|
||||
console.error(e)
|
||||
this.isNoData = false
|
||||
this.showError = true
|
||||
this.errorMsg = this.errorMsgHandler(e)
|
||||
}).finally(() => {
|
||||
this.loadingDown = false
|
||||
})
|
||||
},
|
||||
initStatistics (item, statisticsUrl) {
|
||||
const params = {
|
||||
// startTime: getSecond(this.timeFilter.startTime),
|
||||
// endTime: getSecond(this.timeFilter.endTime)
|
||||
}
|
||||
statisticsUrl = statisticsUrl || api.tagTrafficEntityStatistics
|
||||
statisticsUrl = statisticsUrl.replace('{{name}}', item.name)
|
||||
let observedCount = 0
|
||||
axios.get(statisticsUrl, { params: params }).then(response => {
|
||||
const res = response.data
|
||||
if (response.status === 200) {
|
||||
res.data.result.forEach(item => {
|
||||
observedCount = observedCount + item.count
|
||||
})
|
||||
this.observedCount = observedCount
|
||||
} else {
|
||||
this.errorMsg = this.errorMsgHandler(res)
|
||||
}
|
||||
}).catch(e => {
|
||||
console.error(e)
|
||||
this.errorMsg = this.errorMsgHandler(e)
|
||||
}).finally(() => {
|
||||
})
|
||||
},
|
||||
init (item, lineUrl, statisticsUrl) {
|
||||
this.initLine(item, lineUrl)
|
||||
this.initStatistics(item, statisticsUrl)
|
||||
},
|
||||
/**
|
||||
* 表格左侧点击展开收起
|
||||
*/
|
||||
dropExpandChange (row, expandedRows, flag) {
|
||||
this.curExpendDataType = this.$t('tag.uniqueEntityObserved')
|
||||
this.curExpendDataTypeVal = 'uniqueEntityObserved'
|
||||
this.expandedIds = []
|
||||
clearInterval(this.interval)
|
||||
if (expandedRows.length > 0 && row) {
|
||||
this.expandedIds.push(row.id)
|
||||
if (flag === undefined) {
|
||||
this.pageObj.pageNo = 1
|
||||
}
|
||||
|
||||
this.datePickerChange(row)
|
||||
}
|
||||
},
|
||||
datePickerChange (row, show) {
|
||||
if (!show) {
|
||||
if (this.pageObj.pageNo <= 1) {
|
||||
this.pageObj.pageNo = 1
|
||||
}
|
||||
}
|
||||
const param = {
|
||||
tempId: row.id,
|
||||
startTime: dateFormatToUTC(this.timeRange[0]),
|
||||
endTime: dateFormatToUTC(this.timeRange[1]),
|
||||
...this.pageObj
|
||||
}
|
||||
this.dropDownQueryChange(param)
|
||||
},
|
||||
dropDownQueryChange (param) {
|
||||
this.loadingDown = true
|
||||
this.downDataList = []
|
||||
axios.get(api.reportJob, { params: param }).then(res => {
|
||||
if (res.status === 200) {
|
||||
this.downDataList = res.data.data.list
|
||||
this.pageObj.total = res.data.data.total
|
||||
this.$nextTick(() => {
|
||||
this.$refs.dataTable.doLayout()
|
||||
})
|
||||
}
|
||||
this.loadingDown = false
|
||||
const showInterval = this.downDataList.find(item => item.percent !== 1 && item.state !== 2)
|
||||
if (this.downDataList && showInterval) {
|
||||
this.intervalChange(param)
|
||||
}
|
||||
})
|
||||
},
|
||||
dataConversionProcessing (param) {
|
||||
axios.get(api.reportJob, { params: param }).then(res => {
|
||||
if (res.status === 200) {
|
||||
this.downDataList = res.data.data.list
|
||||
this.pageObj.total = res.data.data.total
|
||||
}
|
||||
})
|
||||
},
|
||||
downDeleteQueryChange (row, props) {
|
||||
this.$confirm(this.$t('tip.confirmDelete'), {
|
||||
confirmButtonText: this.$t('tip.yes'),
|
||||
cancelButtonText: this.$t('tip.no'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
axios.delete(api.reportJob + '?ids=' + row.id).then(response => {
|
||||
if (response.status === 200) {
|
||||
this.delFlag = true
|
||||
this.$message({
|
||||
duration: 2000,
|
||||
type: 'success',
|
||||
message: this.$t('tip.deleteSuccess')
|
||||
})
|
||||
this.dropDownQueryChange({ tempId: props.row.id })
|
||||
this.$emit('reload')
|
||||
} else {
|
||||
this.$message.error(response.data.message)
|
||||
this.init(row)
|
||||
this.$nextTick(() => {
|
||||
const uniqueEntityObservedDom = document.getElementById('uniqueEntityObserved' + row.id)
|
||||
if (uniqueEntityObservedDom) {
|
||||
uniqueEntityObservedDom.style.cssText = 'color:#0091ff;font-weight: bold;'
|
||||
}
|
||||
})
|
||||
}).catch(() => {})
|
||||
},
|
||||
pageJump (val) {
|
||||
this.pageObj.pageNo = val
|
||||
if (this.expandedIds.length > 0) {
|
||||
this.datePickerChange({ id: this.expandedIds[0] }, true)
|
||||
}
|
||||
},
|
||||
intervalChange (param) {
|
||||
clearInterval(this.interval)
|
||||
this.interval = setInterval(() => {
|
||||
// 通过深拷贝，触发watch监听到timeRange，也可使用$set进行触发
|
||||
this.timeRange = JSON.parse(JSON.stringify(this.timeRange))
|
||||
this.timeRange[1] = this.timeRange[1] + 30000
|
||||
param.endTime = dateFormatToUTC(this.timeRange[1])
|
||||
this.dataConversionProcessing(param)
|
||||
}, 30000)
|
||||
},
|
||||
handleConfigArray (array, list) {
|
||||
const group = []
|
||||
array.forEach(item => {
|
||||
const matchItem = list.find(m => m.value === item)
|
||||
if (matchItem) {
|
||||
group.push(this.$t(matchItem.name))
|
||||
}
|
||||
})
|
||||
return group.toString()
|
||||
},
|
||||
handleConfig (row) {
|
||||
this.handleConfigPeriod(row)
|
||||
this.handleConfigCustom(row)
|
||||
},
|
||||
handleConfigPeriod (row) {
|
||||
let str = ''
|
||||
if (row.config && row.config.schedulerConfig) {
|
||||
const type = row.config.schedulerConfig.type
|
||||
if (type === '') {
|
||||
str = this.$t('tag.oneTime')
|
||||
} else { // isRepeat=1 每天，每周，每月
|
||||
const period = this.typeMappings.find(m => m.key === type)
|
||||
const interval = row.config.schedulerConfig.interval
|
||||
const months = row.config.schedulerConfig.months
|
||||
if (interval > 1) {
|
||||
const unit = this.typeUnitMappings.find(m => m.key === type)
|
||||
if (unit) {
|
||||
str = this.$t('tag.every') + ' ' + interval + ' ' + unit.value
|
||||
} else {
|
||||
str = '-'
|
||||
}
|
||||
} else if (interval === 1) {
|
||||
if (type === this.scheduleTypeList[2].value) { // 月
|
||||
if (this.$_.isEmpty(months)) { // 空代表循环
|
||||
str = period.value
|
||||
} else { // 非空代表不循环
|
||||
str = this.handleConfigArray(months, this.monthList)// X月，Y月
|
||||
}
|
||||
} else if (period) {
|
||||
str = period.value
|
||||
} else {
|
||||
str = '-'
|
||||
}
|
||||
}
|
||||
}
|
||||
getIsBuiltIn (isBuiltIn) {
|
||||
if (isBuiltIn === 1) {
|
||||
return this.$t('tag.builtInTag')
|
||||
} else {
|
||||
return this.$t('tag.userDefined')
|
||||
}
|
||||
this.configPeriod = str
|
||||
},
|
||||
handleConfigCustom (row) {
|
||||
let str = ''
|
||||
if (row.config && row.config.schedulerConfig) {
|
||||
const type = row.config.schedulerConfig.type
|
||||
if (type === '') { // 单次
|
||||
str = '-'
|
||||
} else { // 每日，每周，每月
|
||||
const period = this.typeMappings.find(m => m.key === type)
|
||||
if (type === this.scheduleTypeList[0].value) { // 日
|
||||
str = '-'
|
||||
} else if (type === this.scheduleTypeList[1].value) { // 周
|
||||
const weekDates = row.config.schedulerConfig.weekDates
|
||||
str = this.handleConfigArray(weekDates, this.weekdayList)
|
||||
} else if (type === this.scheduleTypeList[2].value) { // 月
|
||||
const monthDates = row.config.schedulerConfig.monthDates// 日期
|
||||
const monthWeekDates = row.config.schedulerConfig.monthWeekDates// 哪几周
|
||||
const weekDates = row.config.schedulerConfig.weekDates// 周几
|
||||
if (!this.$_.isEmpty(monthDates)) {
|
||||
str = this.$t('tag.date') + '-' + monthDates
|
||||
} else {
|
||||
if (!this.$_.isEmpty(monthWeekDates)) {
|
||||
str += this.$t('tag.week') + '-' + this.handleConfigArray(monthWeekDates, this.weekOptions)
|
||||
}
|
||||
if (!this.$_.isEmpty(weekDates)) {
|
||||
str += ' ' + this.handleConfigArray(weekDates, this.weekdayList)
|
||||
}
|
||||
}
|
||||
} else {
|
||||
str = '-'
|
||||
}
|
||||
}
|
||||
}
|
||||
this.configCustom = str
|
||||
},
|
||||
getCategoryName (id) {
|
||||
let name = '-'
|
||||
for (let i = 0; i < this.categoryList.length; i++) {
|
||||
if (id === this.categoryList[i].id) {
|
||||
name = this.categoryList[i].name
|
||||
break
|
||||
}
|
||||
}
|
||||
return name
|
||||
}
|
||||
},
|
||||
beforeUnmount () {
|
||||
clearInterval(this.interval)
|
||||
window.removeEventListener('resize', this.resize)
|
||||
if (this.myChart) {
|
||||
echarts.dispose(this.myChart)
|
||||
}
|
||||
this.chartOption = null
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -5,3 +5,4 @@ import './entity'
|
||||
import './detection'
|
||||
import './detectionList'
|
||||
import './location'
|
||||
import './tag'
|
||||
|
||||
174
src/mock/tag.js
Normal file
174
src/mock/tag.js
Normal file
@@ -0,0 +1,174 @@
|
||||
import Mock from 'mockjs'
|
||||
|
||||
const openMock = true
|
||||
if (openMock) {
|
||||
Mock.mock(new RegExp(BASE_CONFIG.baseUrl + 'v1/tag/.*'), 'delete', function (requestObj) {
|
||||
return {
|
||||
code: 200,
|
||||
message: 'success',
|
||||
data: {
|
||||
ids: [
|
||||
'UUID1',
|
||||
'UUID2'
|
||||
]
|
||||
}
|
||||
}
|
||||
})
|
||||
Mock.mock(new RegExp(BASE_CONFIG.baseUrl + 'v1/tag/list.*'), 'get', function (requestObj) {
|
||||
return {
|
||||
msg: 'success',
|
||||
code: 200,
|
||||
data: {
|
||||
pageNo: 1,
|
||||
pageSize: 20,
|
||||
total: 1,
|
||||
list: [
|
||||
{
|
||||
id: '08b2a4cd-1c38-4be1-b641-8e5b607e2075',
|
||||
name: 'tag1',
|
||||
category: 'categoty1',
|
||||
indicatorType: 'IP',
|
||||
intent: 'Benign',
|
||||
description: ' tag1 description',
|
||||
isBuiltIn: 1,
|
||||
createdTime: 1685412014,
|
||||
updatedTime: 1685412014
|
||||
},
|
||||
{
|
||||
id: '08b2a4cd-1c38-4be1-b641-8e5b607e2076',
|
||||
name: 'tag2',
|
||||
category: 'categoty1',
|
||||
indicatorType: 'IP,Domain',
|
||||
intent: 'Benign',
|
||||
description: ' tag1 description',
|
||||
isBuiltIn: 0,
|
||||
createdTime: 1685412014,
|
||||
updatedTime: 1685412014
|
||||
},
|
||||
{
|
||||
id: '08b2a4cd-1c38-4be1-b641-8e5b607e20751',
|
||||
name: 'tag123',
|
||||
category: 'categoty1',
|
||||
indicatorType: 'IP',
|
||||
intent: 'Malicious',
|
||||
description: ' tag1 description',
|
||||
isBuiltIn: 1,
|
||||
createdTime: 1685412014,
|
||||
updatedTime: 1685412014
|
||||
},
|
||||
{
|
||||
id: '08b2a4cd-1c38-4be1-b641-8e5b607e20761',
|
||||
name: 'tag246',
|
||||
category: 'categoty1',
|
||||
indicatorType: 'IP,Domain',
|
||||
intent: 'Unknow',
|
||||
description: ' tag1 description',
|
||||
isBuiltIn: 1,
|
||||
createdTime: 1685412014,
|
||||
updatedTime: 1685412014
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
})
|
||||
Mock.mock(new RegExp(BASE_CONFIG.baseUrl + 'v1/tag/.*/indicator/trend.*'), 'get', function (requestObj) {
|
||||
return {
|
||||
code: 200,
|
||||
success: true,
|
||||
msg: 'OK',
|
||||
data: {
|
||||
resultType: 'table',
|
||||
result: [
|
||||
{
|
||||
statTime: 1711526563,
|
||||
ipIndicatorCount: 217,
|
||||
domainIndicatorCount: 125
|
||||
},
|
||||
{
|
||||
statTime: 1711526569,
|
||||
ipIndicatorCount: 515,
|
||||
domainIndicatorCount: 415
|
||||
},
|
||||
{
|
||||
statTime: 1711526575,
|
||||
ipIndicatorCount: 17,
|
||||
domainIndicatorCount: 15
|
||||
},
|
||||
{
|
||||
statTime: 1711526581,
|
||||
ipIndicatorCount: 565,
|
||||
domainIndicatorCount: 35
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
})
|
||||
Mock.mock(new RegExp(BASE_CONFIG.baseUrl + 'v1/tag/.*/trafficEntity/trend.*'), 'get', function (requestObj) {
|
||||
return {
|
||||
code: 200,
|
||||
success: true,
|
||||
msg: 'OK',
|
||||
data: {
|
||||
resultType: 'table',
|
||||
result: [
|
||||
{
|
||||
statTime: 1711526563,
|
||||
ipIndicatorCount: 27,
|
||||
domainIndicatorCount: 25
|
||||
},
|
||||
{
|
||||
statTime: 1711526569,
|
||||
ipIndicatorCount: 55,
|
||||
domainIndicatorCount: 45
|
||||
},
|
||||
{
|
||||
statTime: 1711526575,
|
||||
ipIndicatorCount: 17,
|
||||
domainIndicatorCount: 15
|
||||
},
|
||||
{
|
||||
statTime: 1711526581,
|
||||
ipIndicatorCount: 55,
|
||||
domainIndicatorCount: 35
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
})
|
||||
Mock.mock(new RegExp(BASE_CONFIG.baseUrl + 'v1/tag/.*/trafficEntity/statistics.*'), 'get', function (requestObj) {
|
||||
return {
|
||||
msg: 'success',
|
||||
code: 200,
|
||||
data: {
|
||||
result: [
|
||||
{
|
||||
type: 'Domain',
|
||||
count: 36
|
||||
},
|
||||
{
|
||||
type: 'IP',
|
||||
count: 10
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
})
|
||||
Mock.mock(new RegExp(BASE_CONFIG.baseUrl + 'v1/tag/.*/indicator/statistics.*'), 'get', function (requestObj) {
|
||||
return {
|
||||
msg: 'success',
|
||||
code: 200,
|
||||
data: {
|
||||
result: [
|
||||
{
|
||||
type: 'Domain',
|
||||
count: 33
|
||||
},
|
||||
{
|
||||
type: 'IP',
|
||||
count: 100
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
@@ -17,11 +17,11 @@ router.beforeEach(async (to, from, next) => {
|
||||
loadGeoData()
|
||||
// 加载baseUrl
|
||||
if (!axios.defaults.baseURL) {
|
||||
// eslint-disable-next-line no-undef
|
||||
// eslint-disable-next-line no-undef
|
||||
axios.defaults.baseURL = BASE_CONFIG.baseUrl
|
||||
}
|
||||
if (localStorage.getItem(storageKey.token)) {
|
||||
// 加载i18n
|
||||
// 加载i18n
|
||||
await loadI18n()
|
||||
// 加载权限
|
||||
if (permissionWhiteList.indexOf(to.path) !== -1) {
|
||||
@@ -162,8 +162,8 @@ export function handleComponent (code) {
|
||||
return () => import('@/views/detections/detectionPolicies/PolicyForm')
|
||||
case 'report':
|
||||
return () => import('@/views/report/Report')
|
||||
//case 'tag':
|
||||
//return () => import('@/views/tag/Tag')
|
||||
case 'tag':
|
||||
return () => import('@/views/tag/Tag')
|
||||
case 'knowledgeBase':
|
||||
return () => import('@/views/setting/KnowledgeBase')
|
||||
case 'userDefinedLibrary':
|
||||
|
||||
@@ -60,6 +60,13 @@ export const api = {
|
||||
reportBatchDownloadPdf: '/report/job/batchDownloadPdf',
|
||||
reportDownloadPdf: '/report/job/downloadPdf',
|
||||
reportView: '/report/job/view',
|
||||
// tag 相关
|
||||
tagList: '/v1/tag/list',
|
||||
tagDelete: '/v1/tag/',
|
||||
tagIndicatorStatistics: '/v1/tag/{{name}}/indicator/statistics',
|
||||
tagIndicatorTrend: '/v1/tag/{{name}}/indicator/trend',
|
||||
tagTrafficEntityStatistics: '/v1/tag/{{name}}/trafficEntity/statistics',
|
||||
tagTrafficEntityTrend: '/v1/tag/{{name}}/trafficEntity/trend',
|
||||
// 业务
|
||||
panel: '/visual/panel',
|
||||
chart: '/visual/chart',
|
||||
|
||||
@@ -63,7 +63,8 @@ export const fromRoute = {
|
||||
galaxyProxy: 'galaxyProxy',
|
||||
chart: 'chart',
|
||||
cryptocurrency: 'cryptocurrency',
|
||||
builtinReport: 'builtinReport'
|
||||
builtinReport: 'builtinReport',
|
||||
tag: 'tag'
|
||||
}
|
||||
|
||||
/* panel类别和名称之间的映射 */
|
||||
@@ -463,6 +464,25 @@ export const knowledgeBaseCategory = [
|
||||
value: 'user_defined'
|
||||
}
|
||||
]
|
||||
|
||||
export const tagIntentColor = [
|
||||
{
|
||||
label: 'tag.intent.unknown',
|
||||
name: 'unknow',
|
||||
intent: 'Unknow'
|
||||
},
|
||||
{
|
||||
label: 'tag.intent.benign',
|
||||
name: 'benign',
|
||||
intent: 'Benign'
|
||||
},
|
||||
{
|
||||
label: 'tag.intent.malicious',
|
||||
name: 'malicious',
|
||||
intent: 'Malicious'
|
||||
}
|
||||
]
|
||||
|
||||
export const knowledgeBaseColor = [
|
||||
{
|
||||
label: 'knowledge.info',
|
||||
|
||||
@@ -797,3 +797,48 @@ export const entityDetailSubscriberTopApp = {
|
||||
}
|
||||
}]
|
||||
}
|
||||
|
||||
export const tagLineChartOption = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
className: 'echarts-tooltip echarts-tooltip-dark'
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
x: 'center',
|
||||
y: 'bottom',
|
||||
icon: 'circle',
|
||||
itemGap: 50,
|
||||
data: ['IP', 'Domain Name']
|
||||
},
|
||||
grid: {
|
||||
top: '12%',
|
||||
left: '1%',
|
||||
right: '1%',
|
||||
bottom: 30,
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'time',
|
||||
axisLabel: {
|
||||
formatter: xAxisTimeFormatter,
|
||||
rich: xAxisTimeRich
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
// formatter: function (value) {
|
||||
// return unitConvert(value, unitTypes.number).join('')
|
||||
// }
|
||||
}
|
||||
}
|
||||
],
|
||||
series: []
|
||||
}
|
||||
|
||||
@@ -6,25 +6,22 @@
|
||||
:tableId="tableId"
|
||||
v-model:custom-table-title="tools.customTableTitle"
|
||||
:api="url"
|
||||
:from="fromRoute.builtinReport"
|
||||
:from="fromRoute.tag"
|
||||
:layout="['search']"
|
||||
@search="search"
|
||||
>
|
||||
<template #top-tool-left>
|
||||
<button id="account-add" class="top-tool-btn margin-r-10 top-tool-btn--create"
|
||||
v-if="hasPermission('createReport')"
|
||||
@click="add">
|
||||
<i class="cn-icon-xinjian cn-icon"></i>
|
||||
<span>{{$t('overall.create')}}</span>
|
||||
</button>
|
||||
<button id="tag-edit" class="top-tool-btn margin-r-10" :disabled="disableEdit"
|
||||
v-if="hasPermission('editReport')"
|
||||
@click="editReport">
|
||||
@click="editTag">
|
||||
<i class="cn-icon-edit cn-icon"></i>
|
||||
<span>{{$t('overall.edit')}}</span>
|
||||
</button>
|
||||
<button id="tag-delete" class="top-tool-btn margin-r-10" :disabled="disableDelete"
|
||||
v-if="hasPermission('deleteReport')"
|
||||
@click="delBatch">
|
||||
<i class="cn-icon-delete cn-icon"></i>
|
||||
<span>{{$t('overall.delete')}}</span>
|
||||
@@ -33,9 +30,10 @@
|
||||
key="intentSelect"
|
||||
size="small"
|
||||
v-model="intent"
|
||||
placeholder=" "
|
||||
:teleported="false"
|
||||
style="width:135px;margin-right:10px;"
|
||||
clearable
|
||||
placeholder="All"
|
||||
@change="intentChange"
|
||||
>
|
||||
<template #prefix>
|
||||
@@ -47,9 +45,10 @@
|
||||
key="categorySelect"
|
||||
size="small"
|
||||
v-model="category"
|
||||
placeholder=" "
|
||||
:teleported="false"
|
||||
style="width:150px;margin-right:10px;"
|
||||
clearable
|
||||
placeholder="All"
|
||||
@change="categoryChange"
|
||||
>
|
||||
<template #prefix>
|
||||
@@ -60,20 +59,17 @@
|
||||
</template>
|
||||
<template #default>
|
||||
<loading :loading="loading"></loading>
|
||||
<report-table
|
||||
<tag-table
|
||||
ref="dataTable"
|
||||
:api="url"
|
||||
:isNoData="isNoData"
|
||||
:custom-table-title="tools.customTableTitle"
|
||||
:category-list="builtinReportLeftMenu"
|
||||
:height="mainTableHeight"
|
||||
:table-data="tableData"
|
||||
:category-id="builtinId"
|
||||
@delete="del"
|
||||
@edit="edit"
|
||||
@download="download"
|
||||
@preview="preview"
|
||||
@orderBy="tableDataSort"
|
||||
@reload="getTableData"
|
||||
@selectionChange="selectionChange"
|
||||
/>
|
||||
@@ -82,111 +78,36 @@
|
||||
<pagination ref="pagination" :page-obj="pageObj" :tableData="tableData" :table-id="tableId" @pageNo='pageNo' @pageSize='pageSize'></pagination>
|
||||
</template>
|
||||
</cn-data-list>
|
||||
<el-drawer
|
||||
v-model="rightBox.show"
|
||||
direction="rtl"
|
||||
custom-class="common-right-box"
|
||||
class="common-right-box"
|
||||
:size="700"
|
||||
:with-header="false"
|
||||
destroy-on-close>
|
||||
<report-box
|
||||
:object="object"
|
||||
:category-list="builtinReportLeftMenu"
|
||||
:current-category-id="builtinId"
|
||||
@close="closeRightBox"
|
||||
/>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
import ReportTable from '@/components/table/report/ReportTable'
|
||||
import TagTable from '@/components/table/tag/TagTable'
|
||||
import cnDataList from '@/components/table/CnDataList'
|
||||
import dataListMixin from '@/mixins/data-list'
|
||||
import { api } from '@/utils/api'
|
||||
import { tagIntentOptions,tagCategoryOptions } from '@/utils/constants'
|
||||
import { tagIntentOptions, tagCategoryOptions } from '@/utils/constants'
|
||||
import { urlParamsHandler, overwriteUrl } from '@/utils/tools'
|
||||
import ReportBox from '@/components/rightBox/report/ReportBox'
|
||||
import Loading from '@/components/common/Loading'
|
||||
import { ref } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
|
||||
export default {
|
||||
name: 'Report',
|
||||
name: 'Tag',
|
||||
data () {
|
||||
return {
|
||||
builtinReportLeftMenu: [], // 左侧列表菜单数据
|
||||
builtinColor: false,
|
||||
// builtinId: '',
|
||||
url: api.reportTemp,
|
||||
url: api.tagList,
|
||||
tagIntentOptions,
|
||||
tagCategoryOptions,
|
||||
blankObject: {
|
||||
id: '',
|
||||
name: '',
|
||||
type: '',
|
||||
source: 'session_record_cn',
|
||||
cTime: '',
|
||||
uTime: '',
|
||||
remark: '',
|
||||
config: {
|
||||
isRepeat: 0,
|
||||
isScheduler: 0,
|
||||
cronExpression: '',
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
queryParam: {},
|
||||
schedulerConfig: {
|
||||
type: 'day',
|
||||
weekDates: [],
|
||||
months: [],
|
||||
monthDates: [],
|
||||
monthWeekDates: [],
|
||||
interval: 1
|
||||
},
|
||||
timeConfig: {
|
||||
type: 'yesterday',
|
||||
offset: 1,
|
||||
unit: 'hour'
|
||||
}
|
||||
},
|
||||
schedulerStart: '',
|
||||
schedulerEnd: '',
|
||||
categoryId: '',
|
||||
categoryParams: []
|
||||
},
|
||||
checkWeekListData: [
|
||||
'report.sunday',
|
||||
'report.monday',
|
||||
'report.tuesday',
|
||||
'report.wednesday',
|
||||
'report.thursday',
|
||||
'report.friday',
|
||||
'report.saturday'
|
||||
],
|
||||
checkMonthsListData: [
|
||||
'report.january',
|
||||
'report.february',
|
||||
'report.march',
|
||||
'report.april',
|
||||
'report.may',
|
||||
'report.june',
|
||||
'report.july',
|
||||
'report.august',
|
||||
'report.september',
|
||||
'report.october',
|
||||
'report.november',
|
||||
'report.december'
|
||||
],
|
||||
tableId: 'reportTable',
|
||||
tableId: 'tagTable',
|
||||
builtinLeftLoading: false,
|
||||
// builtinRightLoading: false,
|
||||
isInit: true,
|
||||
intent:'All',
|
||||
category:'All',
|
||||
intent: '',
|
||||
category: '',
|
||||
name: ''
|
||||
}
|
||||
},
|
||||
/**
|
||||
@@ -194,11 +115,9 @@ export default {
|
||||
*/
|
||||
setup () {
|
||||
const { query } = useRoute()
|
||||
const builtinId = ref(parseInt(query.categoryId) || '')
|
||||
const urlPageNo = ref(parseInt(query.pageNo) || 1)
|
||||
|
||||
return {
|
||||
builtinId,
|
||||
urlPageNo
|
||||
}
|
||||
},
|
||||
@@ -206,72 +125,103 @@ export default {
|
||||
components: {
|
||||
Loading,
|
||||
cnDataList,
|
||||
ReportTable,
|
||||
ReportBox
|
||||
TagTable
|
||||
},
|
||||
mounted () {
|
||||
this.$nextTick(() => {
|
||||
this.queryGetTempData()
|
||||
this.getTableData()
|
||||
})
|
||||
},
|
||||
watch: {
|
||||
builtinId (n) {
|
||||
const { query } = this.$route
|
||||
let newUrl = urlParamsHandler(window.location.href, query, {
|
||||
categoryId: n,
|
||||
pageNo: 1,
|
||||
pageSize: 20
|
||||
})
|
||||
|
||||
// 点击“全部”或者首次进入界面时，不显示左侧菜单栏参数
|
||||
const newQuery = JSON.parse(JSON.stringify(query)) // 深拷贝路由数据
|
||||
|
||||
if (n === null) {
|
||||
delete newQuery.categoryId
|
||||
} else {
|
||||
delete newQuery.startTime
|
||||
delete newQuery.endTime
|
||||
delete newQuery.expandId
|
||||
delete newQuery.expandPage
|
||||
delete newQuery.pageNo
|
||||
delete newQuery.pageSize
|
||||
}
|
||||
|
||||
newUrl = urlParamsHandler(window.location.href, query, newQuery, 'clean')
|
||||
|
||||
overwriteUrl(newUrl)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
intentChange (value) {
|
||||
|
||||
let params = {}
|
||||
if (value) {
|
||||
params = { intent: value }
|
||||
}
|
||||
if (this.category) {
|
||||
params = { ...params, category: this.category }
|
||||
}
|
||||
if (this.name) {
|
||||
params = { ...params, name: this.name }
|
||||
}
|
||||
this.getTableData(params)
|
||||
},
|
||||
categoryChange (value) {
|
||||
|
||||
let params = {}
|
||||
if (value) {
|
||||
params = { category: value }
|
||||
}
|
||||
if (this.intent) {
|
||||
params = { ...params, intent: this.intent }
|
||||
}
|
||||
if (this.name) {
|
||||
params = { ...params, name: this.name }
|
||||
}
|
||||
this.getTableData(params)
|
||||
},
|
||||
queryGetTempData () {
|
||||
this.builtinLeftLoading = true
|
||||
axios.get(api.reportCategory, { params: { pageSize: 999 } }).then(res => {
|
||||
if (res.status === 200) {
|
||||
this.builtinReportLeftMenu = res.data.data.list.map(c => {
|
||||
return {
|
||||
...c,
|
||||
config: c.config ? JSON.parse(c.config) : {}
|
||||
search (params) {
|
||||
if (this.intent) {
|
||||
params = { ...params, intent: this.intent }
|
||||
}
|
||||
if (this.category) {
|
||||
params = { ...params, category: this.category }
|
||||
}
|
||||
this.name = params.q
|
||||
this.pageObj.pageNo = 1
|
||||
this.getTableData(params)
|
||||
},
|
||||
delBatch () {
|
||||
const ids = []
|
||||
if (this.batchDeleteObjs && this.batchDeleteObjs.length > 0) {
|
||||
this.batchDeleteObjs.forEach(item => {
|
||||
ids.push(item.id)
|
||||
})
|
||||
}
|
||||
if (ids.length === 0) {
|
||||
this.$alert(this.$t('tip.pleaseSelect'), {
|
||||
confirmButtonText: this.$t('tip.yes'),
|
||||
type: 'warning'
|
||||
}).catch(() => {})
|
||||
} else {
|
||||
this.$confirm(this.$t('tip.confirmDelete'), {
|
||||
confirmButtonText: this.$t('tip.yes'),
|
||||
cancelButtonText: this.$t('tip.no'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.toggleLoading(true)
|
||||
axios.delete(api.tagDelete + ids).then(response => {
|
||||
if (response.status === 200) {
|
||||
this.delFlag = true
|
||||
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
|
||||
let params = null
|
||||
if (this.intent) {
|
||||
params = { intent: this.intent }
|
||||
}
|
||||
if (this.category) {
|
||||
params = { ...params, category: this.category }
|
||||
}
|
||||
if (this.name) {
|
||||
params = { ...params, name: this.name }
|
||||
}
|
||||
this.getTableData(params)
|
||||
} else {
|
||||
this.$message.error(response.data.message)
|
||||
}
|
||||
}).catch(e => {
|
||||
this.$message.error(e.response.data.message)
|
||||
}).finally(() => {
|
||||
this.toggleLoading(false)
|
||||
})
|
||||
|
||||
if (this.builtinId !== '') {
|
||||
this.builtinTabs(this.builtinId, 'init')
|
||||
} else {
|
||||
this.getTableData()
|
||||
}).finally(() => {
|
||||
if (this.isSelectedStatus !== undefined) {
|
||||
this.isSelectedStatus = false
|
||||
this.disableDelete = true
|
||||
this.batchDeleteObjs = []
|
||||
}
|
||||
}
|
||||
this.builtinLeftLoading = false
|
||||
})
|
||||
},
|
||||
tableDataSort (orderBy) {
|
||||
this.searchLabel.orderBy = orderBy
|
||||
this.getTableData(this.searchLabel)
|
||||
})
|
||||
}
|
||||
},
|
||||
getTableData (params) {
|
||||
this.searchLabel = null
|
||||
@@ -279,28 +229,17 @@ export default {
|
||||
this.searchLabel = { ...this.searchLabel, ...params }
|
||||
}
|
||||
this.searchLabel = { ...this.searchLabel, ...this.pageObj }
|
||||
// this.tools.loading = true
|
||||
// this.builtinRightLoading = true
|
||||
// this.loading = true
|
||||
this.isNoData = false
|
||||
// this.tableData = []
|
||||
this.toggleLoading(true)
|
||||
delete this.searchLabel.total
|
||||
// delete this.searchLabel.total
|
||||
let listUrl = this.url
|
||||
if (this.listUrl) {
|
||||
listUrl = this.listUrl
|
||||
}
|
||||
|
||||
if (this.builtinId !== '') {
|
||||
this.searchLabel.categoryId = this.builtinId
|
||||
}
|
||||
|
||||
if (!this.isInit) {
|
||||
axios.get(listUrl, { params: this.searchLabel }).then(response => {
|
||||
if (response.status === 200) {
|
||||
for (let i = 0; i < response.data.data.list.length; i++) {
|
||||
response.data.data.list[i].status = response.data.data.list[i].status + ''
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.tableData = response.data.data.list.map(item => {
|
||||
return {
|
||||
@@ -321,23 +260,12 @@ export default {
|
||||
}
|
||||
this.isInit = false
|
||||
},
|
||||
/**
|
||||
* 点击左侧tab页
|
||||
*/
|
||||
builtinTabs (id, flag) {
|
||||
this.builtinId = id
|
||||
if (flag === undefined) {
|
||||
this.pageObj.pageNo = 1
|
||||
this.pageObj.pageSize = 20
|
||||
}
|
||||
this.getTableData({ categoryId: id })
|
||||
},
|
||||
edit (u) {
|
||||
this.initConfig(u)
|
||||
this.object = u
|
||||
this.rightBox.show = true
|
||||
},
|
||||
editReport () {
|
||||
editTag () {
|
||||
if (this.batchDeleteObjs.length === 0) {
|
||||
this.$alert(this.$t('tip.pleaseSelectForEdit'), {
|
||||
confirmButtonText: this.$t('tip.yes'),
|
||||
|
||||
Reference in New Issue
Block a user