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

CN-1173 fix: 检测功能UI开发与接口对接

Browse Source
This commit is contained in:
刘洪洪
2023-10-16 17:53:46 +08:00
parent 85db8cd745
commit 0e82bebaac
19 changed files with 725 additions and 437 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
src/components/table/detection/GeneralSettings.vue
View File

@@ -18,7 +18,7 @@
</div>
</div>
<div class="block-mode">
<div class="block-mode" style="cursor: no-drop;">
<!--todo 图标没有，后期换-->
<div class="block-mode-left">
<i class="cn-icon cn-icon-setting2 block-mode-icon"></i>
@@ -29,40 +29,44 @@
<div class="block-mode-content">
Aggregate query results to detect when number of matches exceeds threshold.
</div>
<div :class="settingObj.ruleType===detectionRuleType.threshold?'block-mode-btn-active':'block-mode-btn'"
@click="selectMode(detectionRuleType.threshold)">select
<!--todo 当前版本暂时不可选择-->
<div style="cursor: no-drop;" :class="settingObj.ruleType===detectionRuleType.threshold?'block-mode-btn-active':'block-mode-btn'"
>select
</div>
<!-- <div :class="settingObj.ruleType===detectionRuleType.threshold?'block-mode-btn-active':'block-mode-btn'"-->
<!-- @click="selectMode(detectionRuleType.threshold)">select-->
<!-- </div>-->
</div>
</div>
</div>
<!--category-->
<el-form ref="form" :model="settingObj" label-position="top" :rules="rules">
<el-form-item label="Category" prop="category" class="form-setting__block margin-b-20">
<el-select v-model="settingObj.category" class="form-setting__select" placeholder=" " size="mini" @change="changeEditFlag">
<el-form-item :label="$t('overall.category')" prop="category" class="form-setting__block margin-b-20">
<el-select :disabled="settingObj.ruleId" v-model="settingObj.category" class="form-setting__select" placeholder=" " size="mini" @change="changeEditFlag">
<el-option
v-for="item in categoryList"
:key="item.value"
:label="item.label"
:value="item.value"
:key="item.name"
:label="item.name"
:value="item.name"
/>
</el-select>
</el-form-item>
<!--type-->
<el-form-item label="Type" prop="eventType" class="form-setting__block margin-b-20">
<el-form-item :label="$t('overall.type')" prop="eventType" class="form-setting__block margin-b-20">
<el-select v-model="settingObj.eventType" placeholder=" " size="mini" class="form-setting__select" @change="changeEditFlag">
<el-option
v-for="item in typeList"
:key="item.value"
:label="item.label"
:value="item.value"
v-for="item in eventTypeList"
:key="item.name"
:label="item.name"
:value="item.name"
/>
</el-select>
</el-form-item>
<!--name-->
<el-form-item label="Name" prop="name" class="form-setting__block margin-b-20">
<el-form-item :label="$t('overall.name')" prop="name" class="form-setting__block margin-b-20">
<el-input
maxlength="64"
show-word-limit
@@ -74,7 +78,7 @@
<!--Description-->
<div class="form-setting__block margin-b-20">
<div class="block-title">Description</div>
<div class="block-title">{{ $t('config.dataSet.description') }}</div>
<el-input
maxlength="255"
show-word-limit
@@ -87,7 +91,7 @@
</el-form>
<div class="form-setting__block margin-b-20">
<div class="block-title">Policy Status</div>
<div class="block-title">{{ $t('detection.create.policyStatus') }}</div>
<el-switch
v-model="settingObj.status"
@change="changeEditFlag"
@@ -95,11 +99,11 @@
inactive-color="#C0CEDB"
:active-value="1"
:inactive-value="0"
:active-text="switchStatus(settingObj.status)"/>
:active-text="$t(switchStatus(settingObj.status))"/>
</div>
<div class="form-setting__btn">
<el-button @click="onContinue">Continue</el-button>
<el-button @click="onContinue">{{ $t('detection.create.continue') }}</el-button>
</div>
</div>
</template>
@@ -107,18 +111,24 @@
<script>
import { detectionRuleType } from '@/utils/constants'
import { switchStatus } from '@/utils/tools'
import axios from 'axios'
import { detectionUnitList } from '@/utils/static-data'
import axios from '_axios@0.21.4@axios'
import { api } from '@/utils/api'
export default {
name: 'GeneralSettings',
props: {
editObj: {
type: Object
}
},
data () {
return {
detectionRuleType,
categoryList: [],
typeList: [],
eventTypeList: [],
settingObj: {
ruleType: detectionRuleType.threshold,
ruleType: detectionRuleType.indicator,
category: '',
eventType: '',
name: '',
@@ -152,20 +162,46 @@ export default {
}
}
},
watch: {
editObj (newVal) {
if (newVal.ruleId) {
this.settingObj = JSON.parse(JSON.stringify({ ...newVal }))
this.settingObj.editFlag = false
this.settingObj.saveFlag = true
}
}
},
mounted () {
this.initData()
},
methods: {
switchStatus,
initData () {
axios.get(api.detection.statistics, { params: { pageSize: -1 } }).then(response => {
this.categoryList = detectionUnitList.categoryList || []
this.eventTypeList = detectionUnitList.eventTypeList || []
axios.get(api.detection.statistics).then(response => {
if (response.status === 200) {
this.categoryList = response.data.data.categoryList || []
this.typeList = response.data.data.typeList || []
const data = response.data.data
if (data.categoryList) {
this.categoryList = data.categoryList
} else {
this.categoryList = []
}
if (data.eventTypeList) {
this.eventTypeList = data.eventTypeList
} else {
this.eventTypeList = []
}
} else {
console.error(response.data)
this.categoryList = []
this.eventTypeList = []
}
}).finally(() => {
}).catch((e) => {
console.error(e)
this.categoryList = []
this.eventTypeList = []
})
},
selectMode (ruleType) {
@@ -188,7 +224,3 @@ export default {
}
}
</script>
<style lang="scss">
</style>