fix:1 CN-1470 调整新增/修改role页面权限树的逻辑;2.检查模块下的事件类型饼图legend宽度随分辨率而改变;

This commit is contained in:
hanyuxia
2023-11-17 13:54:21 +08:00
parent e3c6c21545
commit 7d64868ce0
10 changed files with 426 additions and 350 deletions

View File

@@ -1798,6 +1798,12 @@
margin-right:5px; margin-right:5px;
} }
} }
.top-tool-btn--update:disabled {
cursor: not-allowed;
opacity: 0.66;
i {
}
}
.top-tool-btn--update:hover { .top-tool-btn--update:hover {
background-color: #57B8D9 !important; background-color: #57B8D9 !important;
border-color: #2E88A6 !important; border-color: #2E88A6 !important;
@@ -1846,6 +1852,12 @@
margin-right:5px; margin-right:5px;
} }
} }
.top-tool-btn--update:disabled {
cursor: not-allowed;
opacity: 0.66;
i {
}
}
.top-tool-btn--update:hover { .top-tool-btn--update:hover {
background-color: #57B8D9 !important; background-color: #57B8D9 !important;
border-color: #2E88A6 !important; border-color: #2E88A6 !important;

View File

@@ -333,14 +333,14 @@ export default {
breadcrumb () { breadcrumb () {
const breadcrumb = [] const breadcrumb = []
this.generateBreadcrumb(breadcrumb, this.$store.getters.menuList) this.generateBreadcrumb(breadcrumb, this.$store.getters.menuList)
if(breadcrumb){ if (breadcrumb) {
// panel菜单是否可以点击跳转一级菜单不可点击二级菜单可以点击 // panel菜单是否可以点击跳转一级菜单不可点击二级菜单可以点击
if(breadcrumb[0] && breadcrumb[1] && breadcrumb[1].route if (breadcrumb[0] && breadcrumb[1] && breadcrumb[1].route &&
&& breadcrumb[1].route.indexOf('/panel/') === 0){ breadcrumb[1].route.indexOf('/panel/') === 0) {
breadcrumb[1].clickable = true breadcrumb[1].clickable = true
}else {// 除panel外的菜单是否可以点击跳转:除了新增、编辑,其它均可点击 } else { // 除panel外的菜单是否可以点击跳转:除了新增、编辑,其它均可点击
breadcrumb.forEach(item => { breadcrumb.forEach(item => {
if(item.value !== 'Create' && item.value !== 'Edit'){ if (item.value !== 'Create' && item.value !== 'Edit') {
item.clickable = true item.clickable = true
} }
}) })
@@ -676,11 +676,11 @@ export default {
} }
} }
}, },
//仅处理除panel外的相关路径的导航 // 仅处理除panel外的相关路径的导航
async jumpOther (route, index) { async jumpOther (route, index) {
route = route.replace('redirect:', '') route = route.replace('redirect:', '')
this.showMenu = false this.showMenu = false
if (route === this.route && index > 0) {//当前只有一级菜单时,点击不进行刷新,重新跳转 if (route === this.route && index > 0) { // 当前只有一级菜单时,点击不进行刷新,重新跳转
this.refresh() this.refresh()
return return
} }
@@ -693,7 +693,7 @@ export default {
}) })
} }
}, },
//仅处理panel相关路径的导航 // 仅处理panel相关路径的导航
async jump (route, columnName, columnValue, opeType) { async jump (route, columnName, columnValue, opeType) {
route = route.replace('redirect:', '') route = route.replace('redirect:', '')
if (route === '/panel/linkMonitor' && opeType === 3) { if (route === '/panel/linkMonitor' && opeType === 3) {

View File

@@ -23,7 +23,8 @@
<button type="button" class="cn-btn cn-btn-size-small-new cn-btn-style-light-new option-btn" style="margin-left: 0px;" @click="expandAllOrNone" :class="{'btn-active':expandAllFlag}">展开/收缩</button> <button type="button" class="cn-btn cn-btn-size-small-new cn-btn-style-light-new option-btn" style="margin-left: 0px;" @click="expandAllOrNone" :class="{'btn-active':expandAllFlag}">展开/收缩</button>
<button type="button" class="cn-btn cn-btn-size-small-new cn-btn-style-light-new option-btn" @click="selectAllOrNone" :class="{'btn-active':selectAllFlag}"><span ><i class="cn-icon cn-icon-delete"></i></span></button> <button type="button" class="cn-btn cn-btn-size-small-new cn-btn-style-light-new option-btn" @click="selectAllOrNone" :class="{'btn-active':selectAllFlag}"><span ><i class="cn-icon cn-icon-delete"></i></span></button>
</div>--> </div>-->
<el-tree :data="menus" :default-expand-all="expandAllFlag" :props="{label:labelFormatter}" @check-change="selectChange" class="tree-border" node-key="id" ref="menuTree" show-checkbox id="role-box-input-menus"> <el-checkbox v-model="isCheckAll" :label="$t('overall.all')" @change="checkAll"></el-checkbox>
<el-tree :data="menus" :default-expand-all="expandAllFlag" check-strictly="true" :props="{label:labelFormatter}" @check-change="selectChange" class="tree-border" node-key="id" ref="menuTree" show-checkbox id="role-box-input-menus">
<template #default="{ data }"> <template #default="{ data }">
<span> <span>
<i v-if="data.type === '1'" class="el-icon-menu"></i> <i v-if="data.type === '1'" class="el-icon-menu"></i>
@@ -90,7 +91,8 @@ export default {
menus: [], menus: [],
selectedIds: [], selectedIds: [],
selectAllFlag: false, selectAllFlag: false,
expandAllFlag: true expandAllFlag: true,
isCheckAll: false
} }
}, },
watch: { watch: {
@@ -150,9 +152,40 @@ export default {
labelFormatter: function (data, node) { labelFormatter: function (data, node) {
return data && data.i18n ? this.$t(data.i18n) : data.name return data && data.i18n ? this.$t(data.i18n) : data.name
}, },
getChildNodes (menu) {
let nodeGroup = []
if (menu.children && menu.children.length > 0) {
nodeGroup = menu.children
const _this = this
menu.children.forEach(node => {
const childNodes = _this.getChildNodes(node)
if (childNodes && childNodes.length > 0) {
nodeGroup = nodeGroup.concat(childNodes)
}
})
}
return nodeGroup
},
checkAll () {
if (this.$refs.menuTree) {
if (this.isCheckAll) {
let nodeGroup = this.menus
const _this = this
this.menus.forEach(menu => {
const childNodes = _this.getChildNodes(menu)
if (childNodes && childNodes.length > 0) {
nodeGroup = nodeGroup.concat(childNodes)
}
})
this.$refs.menuTree.setCheckedNodes(nodeGroup)
} else {
this.$refs.menuTree.setCheckedNodes([])
}
}
},
selectChange: function (data, isCheck, childIsCheck) { selectChange: function (data, isCheck, childIsCheck) {
if (this.$refs.menuTree) { if (this.$refs.menuTree) {
this.editRole.menuIds = this.$refs.menuTree.getCheckedKeys(true) this.editRole.menuIds = this.$refs.menuTree.getCheckedKeys(false)
} }
}, },
selectAllOrNone: function () { selectAllOrNone: function () {

View File

@@ -49,7 +49,7 @@
<div class="card-desc" :title="data.desc ? data.desc:'—'">{{data.desc ? data.desc : '—'}}</div> <div class="card-desc" :title="data.desc ? data.desc:'—'">{{data.desc ? data.desc : '—'}}</div>
</div> </div>
<div class="card-operate__footer"> <div class="card-operate__footer">
<button v-if="data.showUpdate" :title="$t('overall.update')" class="top-tool-btn--update" <button v-if="data.showUpdate && hasPermission('editBuiltInKnowledgeBase')" :title="$t('overall.update')" class="top-tool-btn--update"
@click="jumpToUpdatePage(data,false)"> @click="jumpToUpdatePage(data,false)">
<i class="cn-icon-update-knowledge-base cn-icon"></i> <i class="cn-icon-update-knowledge-base cn-icon"></i>
<span>{{$t('overall.update')}}</span> <span>{{$t('overall.update')}}</span>
@@ -111,7 +111,7 @@
</el-tabs> </el-tabs>
<div class="update-operate"> <div class="update-operate">
<button :title="$t('overall.update')" class="top-tool-btn--update" <button :title="$t('overall.update')" class="top-tool-btn--update"
@click="uploadRecord"> @click="uploadRecord"><!--:disabled="hasUpdatingRecord"-->
<i class="cn-icon-update-knowledge-base cn-icon"></i> <i class="cn-icon-update-knowledge-base cn-icon"></i>
<span>{{$t('overall.update')}}</span> <span>{{$t('overall.update')}}</span>
</button> </button>
@@ -123,7 +123,7 @@
</div> </div>
<div class="update-operate"> <div class="update-operate">
<button :title="$t('overall.update')" class="top-tool-btn--update" <button :title="$t('overall.update')" class="top-tool-btn--update"
@click="uploadRecord"> @click="uploadRecord"><!-- :disabled="hasUpdatingRecord" -->
<i class="cn-icon-update-knowledge-base cn-icon"></i> <i class="cn-icon-update-knowledge-base cn-icon"></i>
<span>{{$t('overall.update')}}</span> <span>{{$t('overall.update')}}</span>
</button> </button>
@@ -295,7 +295,7 @@
import table from '@/mixins/table' import table from '@/mixins/table'
import Loading from '@/components/common/Loading' import Loading from '@/components/common/Loading'
import { getSecond, getMillisecond, xAxisTimeFormatter, xAxisTimeRich } from '@/utils/date-util' import { getSecond, getMillisecond, xAxisTimeFormatter, xAxisTimeRich } from '@/utils/date-util'
import { knowledgeCategoryValue, unitTypes, storageKey, builtInKnowledgeBaseBasicInfo } from '@/utils/constants' import { knowledgeCategoryValue, unitTypes, storageKey, builtInKnowledgeBaseBasicInfo, knowledgeCardUpdateRecordType } from '@/utils/constants'
import { ref, shallowRef } from 'vue' import { ref, shallowRef } from 'vue'
import { api } from '@/utils/api' import { api } from '@/utils/api'
import { detectionTooltipFormatter } from '@/views/charts/charts/tools' import { detectionTooltipFormatter } from '@/views/charts/charts/tools'
@@ -339,6 +339,7 @@ export default {
psiphon3Loading: false, psiphon3Loading: false,
updateLogLoading: false, updateLogLoading: false,
showConfirmSwitch: false, showConfirmSwitch: false,
// timer: null,
switchKnowledgeId: '', switchKnowledgeId: '',
activeTab: 'updateRecord', activeTab: 'updateRecord',
isNoDataForPsiphon3: false, isNoDataForPsiphon3: false,
@@ -348,6 +349,7 @@ export default {
tabType: 'total', tabType: 'total',
mousemoveCursor: '', mousemoveCursor: '',
selectTime: 1440, selectTime: 1440,
// hasUpdatingRecord: false,
tabs: [ tabs: [
{ {
name: 'knowledgeBase.total', name: 'knowledgeBase.total',
@@ -380,12 +382,6 @@ export default {
setup () { setup () {
// 没上传过文件的提示 // 没上传过文件的提示
const uploadErrorTip = ref('') const uploadErrorTip = ref('')
const nowMill = window.$dayJs.tz().valueOf()
const timeFilter = ref({
startTime: nowMill - 1000 * 60 * 60 * 24,
endTime: nowMill,
dateRangeValue: 1440
})
return { return {
baseUrl: BASE_CONFIG.baseUrl, baseUrl: BASE_CONFIG.baseUrl,
apiVersion: BASE_CONFIG.apiVersion, apiVersion: BASE_CONFIG.apiVersion,
@@ -397,8 +393,7 @@ export default {
fileList: ref([]), fileList: ref([]),
uploadFileSizeLimit: 1024 * 1024 * 1024, uploadFileSizeLimit: 1024 * 1024 * 1024,
myChart: shallowRef(null), myChart: shallowRef(null),
chartOption: shallowRef(null), chartOption: shallowRef(null)
timeFilter
} }
}, },
methods: { methods: {
@@ -470,9 +465,10 @@ export default {
}, },
init (val, show, active, n) { init (val, show, active, n) {
this.psiphon3Loading = true this.psiphon3Loading = true
const endTime = window.$dayJs.tz().valueOf()
const params = { const params = {
startTime: getSecond(this.timeFilter.startTime), startTime: getSecond(endTime - this.selectTime * 60 * 1000),
endTime: getSecond(this.timeFilter.endTime) endTime: getSecond(endTime)
} }
const url = api.knowledgeBaseTimedistribution.replace('{{knowledgeId}}', this.updateKnowledge.knowledgeId).replace('{{type}}', this.tabType) const url = api.knowledgeBaseTimedistribution.replace('{{knowledgeId}}', this.updateKnowledge.knowledgeId).replace('{{type}}', this.tabType)
axios.get(url, { params: params }).then(response => { axios.get(url, { params: params }).then(response => {
@@ -485,7 +481,9 @@ export default {
const chartsData = res.data.result.map(item => { const chartsData = res.data.result.map(item => {
return [getMillisecond(item.statTime), item.count] return [getMillisecond(item.statTime), item.count]
}) })
this.echartsInit(chartsData) if (this.activeTab === knowledgeCardUpdateRecordType.intelligenceLearning) {
this.echartsInit(chartsData)
}
} }
} else { } else {
this.httpError(res) this.httpError(res)
@@ -533,14 +531,14 @@ export default {
}) })
}, },
timeChange () { timeChange () {
this.timeFilter.endTime = window.$dayJs.tz().valueOf()
this.timeFilter.startTime = this.timeFilter.endTime - this.selectTime * 60 * 1000
if (this.updateKnowledge.source === 'cn_psiphon3_ip') { if (this.updateKnowledge.source === 'cn_psiphon3_ip') {
this.init() this.init()
} }
this.$nextTick(() => { if (this.activeTab === knowledgeCardUpdateRecordType.intelligenceLearning) {
this.handleActiveBar() this.$nextTick(() => {
}) this.handleActiveBar()
})
}
}, },
activeChange (item) { // isClick:代表是通过点击操作来的 activeChange (item) { // isClick:代表是通过点击操作来的
if (item) { if (item) {
@@ -554,9 +552,11 @@ export default {
mouseenterTab (item) { mouseenterTab (item) {
if (this.isNoDataForPsiphon3) return if (this.isNoDataForPsiphon3) return
this.mousemoveCursor = item.class this.mousemoveCursor = item.class
this.$nextTick(() => { if (this.activeTab === knowledgeCardUpdateRecordType.intelligenceLearning) {
this.handleActiveBar() this.$nextTick(() => {
}) this.handleActiveBar()
})
}
}, },
mouseleaveTab () { mouseleaveTab () {
this.mousemoveCursor = '' this.mousemoveCursor = ''
@@ -586,17 +586,9 @@ export default {
uploadSuccess (response) { uploadSuccess (response) {
this.uploadLoading = false this.uploadLoading = false
this.uploaded = true this.uploaded = true
/* this.uploaded = response.code === 200
if (response.code === 200) { */
this.$message.success(this.$t('tip.success')) this.$message.success(this.$t('tip.success'))
this.showAddUpdateDialog = false this.showAddUpdateDialog = false
this.getCurTabData() this.getCurTabData()
if (this.updateKnowledge.source === 'cn_psiphon3_ip') {
this.init()
}
/* } else {
this.$message.error(this.$t('tip.uploadFailed', { msg: response.message }))
} */
}, },
beforeUpload (file) { beforeUpload (file) {
this.uploadLoading = true this.uploadLoading = true
@@ -604,18 +596,12 @@ export default {
}, },
submitConfirm () { submitConfirm () {
this.showConfirmDialog = true this.showConfirmDialog = true
this.$nextTick(() => {
this.handleActiveBar()
})
}, },
submit () { submit () {
this.$refs.knowledgeUpload.submit() this.$refs.knowledgeUpload.submit()
}, },
cancle(){ cancle () {
this.showAddUpdateDialog = false this.showAddUpdateDialog = false
this.$nextTick(() => {
this.handleActiveBar()
})
}, },
clickCard (data, event) { clickCard (data, event) {
if (data.isSelected) { // 原来为选中,当前点击后未选中 if (data.isSelected) { // 原来为选中,当前点击后未选中
@@ -667,9 +653,11 @@ export default {
await this.init() await this.init()
} }
this.showUpdate() this.showUpdate()
this.$nextTick(() => { if (this.activeTab === knowledgeCardUpdateRecordType.intelligenceLearning) {
this.handleActiveBar() this.$nextTick(() => {
}) this.handleActiveBar()
})
}
}, },
uploadRecord () { uploadRecord () {
this.showAddUpdateDialog = true this.showAddUpdateDialog = true
@@ -682,12 +670,12 @@ export default {
pageSize: -1 pageSize: -1
} }
if (this.showEnable) { if (this.showEnable) {
if (this.activeTab === 'updateRecord') { if (this.activeTab === knowledgeCardUpdateRecordType.updateRecord) {
params = { params = {
...params, ...params,
opUser: -1 opUser: -1
} }
} else if (this.activeTab === 'intelligenceLearning') { } else if (this.activeTab === knowledgeCardUpdateRecordType.intelligenceLearning) {
params = { params = {
...params, ...params,
opUser: 0 opUser: 0
@@ -701,6 +689,15 @@ export default {
if (this.updateHistoryList[0]) { if (this.updateHistoryList[0]) {
this.currentVersion = this.updateHistoryList[0].commitVersion + 1 this.currentVersion = this.updateHistoryList[0].commitVersion + 1
} }
/*
this.hasUpdatingRecord = false
this.updateHistoryList.forEach(item => {
if (item.isUpdating) { // if(item.isUpdating){//????????
this.hasUpdatingRecord = true
}
})
*/
}).catch(e => { }).catch(e => {
console.error(e) console.error(e)
}).finally(() => { }).finally(() => {
@@ -711,10 +708,7 @@ export default {
handleClick (tab) { handleClick (tab) {
this.getCurTabData() this.getCurTabData()
if (tab.index === '1') { if (tab.index === '1') {
this.init() this.timeChange()
this.$nextTick(() => {
this.handleActiveBar()
})
} }
}, },
clearSelect () { clearSelect () {
@@ -754,7 +748,7 @@ export default {
this.switchKnowledgeId = id this.switchKnowledgeId = id
return false return false
}, },
cancleSwitch(){ cancleSwitch () {
this.showConfirmSwitch = false this.showConfirmSwitch = false
}, },
switchLearning () { switchLearning () {
@@ -779,20 +773,19 @@ export default {
}, },
watch: { watch: {
tabType (n) { tabType (n) {
this.$nextTick(() => { this.timeChange()
this.handleActiveBar()
})
}, },
timeFilter: { /*
handler () { hasUpdatingRecord (n) {
if (this.updateKnowledge.source === 'cn_psiphon3_ip') { if (n) { // update record页存在“正在更新”的记录时每20秒自动请求一次接口
this.init() this.timer = setTimeout(() => {
} this.getCurTabData()
this.$nextTick(() => { }, 20000)
this.handleActiveBar() } else { // 直到出现新的记录,出现新记录后(失败或者成功),取消定时请求接口,右上角"update"按钮恢复可用。"正在更新"和"失败都会有对应的强调样式
}) clearTimeout(this.timer)
} }
}, },
*/
tableData: { tableData: {
handler (n) { handler (n) {
if (this.tableData && this.tableData.length > 0) { if (this.tableData && this.tableData.length > 0) {
@@ -828,9 +821,7 @@ export default {
handler (n) { handler (n) {
if (!n) { if (!n) {
this.fileList = [] this.fileList = []
if (this.updateKnowledge.source === 'cn_psiphon3_ip') { this.timeChange()
this.init()
}
} else { } else {
if (this.myChart) { if (this.myChart) {
this.myChart.dispose() this.myChart.dispose()
@@ -857,7 +848,7 @@ export default {
}) })
}, },
beforeUnmount () { beforeUnmount () {
clearTimeout(this.timer) //clearTimeout(this.timer)
window.removeEventListener('resize', this.resize) window.removeEventListener('resize', this.resize)
const dom = document.getElementById('psiphonBarChart') const dom = document.getElementById('psiphonBarChart')
if (dom) { if (dom) {

View File

@@ -338,10 +338,10 @@ export function axisFormatter (params) {
return str return str
} }
export function tooLongFormatter (name) { export function tooLongFormatter (name) {
return format.truncateText(name, 150, '12px') return format.truncateText(name, 160, '12px')
} }
export function tooLongFormatterFor2Columns (name) { export function tooLongFormatterFor2Columns (name) {
return format.truncateText(name, 83, '12px') return format.truncateText(name, 100, '12px')
} }
export function timeHorizontalFormatter (params) { export function timeHorizontalFormatter (params) {
let str = '<div>' let str = '<div>'

View File

@@ -493,9 +493,9 @@ export default {
} }
}) })
}) })
if (!show) {//非滚动滚动条操作,直接覆盖之前的数据 if (!show) { // 非滚动滚动条操作,直接覆盖之前的数据
this.providerOptions = res.data.list this.providerOptions = res.data.list
} else {//滚动条操作,则将新数据和之前的数据组合 } else { // 滚动条操作,则将新数据和之前的数据组合
this.providerOptions.push(...res.data.list) this.providerOptions.push(...res.data.list)
this.appListData([], this.providerOptions) this.appListData([], this.providerOptions)
} }
@@ -517,9 +517,9 @@ export default {
} }
}) })
}) })
if (!show) {//非滚动滚动条操作,直接覆盖之前的数据 if (!show) { // 非滚动滚动条操作,直接覆盖之前的数据
this.appOptions = res.data.list this.appOptions = res.data.list
} else {//滚动条操作,则将新数据和之前的数据组合 } else { // 滚动条操作,则将新数据和之前的数据组合
this.appOptions.push(...res.data.list) this.appOptions.push(...res.data.list)
this.appListData(this.appOptions, []) this.appListData(this.appOptions, [])
} }

View File

@@ -66,7 +66,7 @@ export default {
startTime: this.timeFilter && this.timeFilter.startTime ? getSecond(this.timeFilter.startTime) : '', startTime: this.timeFilter && this.timeFilter.startTime ? getSecond(this.timeFilter.startTime) : '',
endTime: this.timeFilter && this.timeFilter.endTime ? getSecond(this.timeFilter.endTime) : '' endTime: this.timeFilter && this.timeFilter.endTime ? getSecond(this.timeFilter.endTime) : ''
} }
/*this.toggleLoading(true) /* this.toggleLoading(true)
axios.get(api.netWorkOverview.ddosEventAnalysis, { params: params }).then(response => { axios.get(api.netWorkOverview.ddosEventAnalysis, { params: params }).then(response => {
const res = response.data const res = response.data
if (response.status === 200) { if (response.status === 200) {
@@ -85,7 +85,7 @@ export default {
this.errorMsg = this.errorMsgHandler(e) this.errorMsg = this.errorMsgHandler(e)
}).finally(() => { }).finally(() => {
this.toggleLoading(false) this.toggleLoading(false)
})*/ }) */
this.toggleLoading(false) this.toggleLoading(false)
} }
}, },

View File

@@ -138,7 +138,8 @@ import { useRoute } from 'vue-router'
import Loading from '@/components/common/Loading' import Loading from '@/components/common/Loading'
import ChartTabs from '@/components/common/ChartTabs' import ChartTabs from '@/components/common/ChartTabs'
import { useStore } from 'vuex' import { useStore } from 'vuex'
import { tooLongFormatterFor2Columns } from '@/views/charts/charts/tools' import { tooLongFormatter } from '@/views/charts/charts/tools'
import { format } from 'echarts'
export default { export default {
name: 'Index', name: 'Index',
@@ -271,6 +272,7 @@ export default {
loading: false, loading: false,
oldActiveEntitySearchValue: '', oldActiveEntitySearchValue: '',
initFlag: true // 初始化标识初始化时保证mounted执行 initFlag: true // 初始化标识初始化时保证mounted执行
// detectionChart:null
} }
}, },
methods: { methods: {
@@ -442,7 +444,13 @@ export default {
return { value: d.count, name: d.eventType } return { value: d.count, name: d.eventType }
}) })
if (data.length > 6) { if (data.length > 6) {
securityTypeOption.legend.formatter = tooLongFormatterFor2Columns const dom = document.getElementById('eventSeverityPiesecurityEvent')
if (dom) {
const oneColumnWidth = (dom.clientWidth * 0.56) / 2 - 30
securityTypeOption.legend.formatter = function (name) {
return format.truncateText(name, oneColumnWidth, '12px')
}
}
} }
detectionChart.setOption(securityTypeOption) detectionChart.setOption(securityTypeOption)
@@ -489,7 +497,13 @@ export default {
return { value: d.count, name: d.eventType, itemStyle: { color: getAttackColor(d.eventType) } } return { value: d.count, name: d.eventType, itemStyle: { color: getAttackColor(d.eventType) } }
}) })
if (data.length > 6) { if (data.length > 6) {
securityTypeOption.legend.formatter = tooLongFormatterFor2Columns const dom = document.getElementById('detectionCategoryPersecurityEvent')
if (dom) {
const oneColumnWidth = (dom.clientWidth * 0.56) / 2 - 30
securityTypeOption.legend.formatter = function (name) {
return format.truncateText(name, oneColumnWidth, '12px')
}
}
} }
detectionChart.setOption(securityTypeOption) detectionChart.setOption(securityTypeOption)
@@ -828,6 +842,32 @@ export default {
}, },
resize () { resize () {
this.chartInit.forEach(e => { e.value.resize() }) this.chartInit.forEach(e => { e.value.resize() })
/*
//第二个饼图的resize
let dom = document.getElementById('detectionCategoryPersecurityEvent')
if(dom){
let securityTypeOption = this.detectionChart.getOption()
const chartDom = document.getElementById(`detectionCategoryPer${this.pageType}`)
this.detectionChart = echarts.getInstanceByDom(chartDom)
if (this.detectionChart) {
echarts.dispose(this.detectionChart)
}
this.detectionChart = echarts.init(chartDom)
let oneColumnWidth = (dom.clientWidth * 0.56)/2-30
if (this.statisticsCategoryData.length > 6) {
securityTypeOption.legend.formatter = function (name) {
return format.truncateText(name, oneColumnWidth, '12px')
}
}else {
securityTypeOption.legend.formatter = tooLongFormatter
}
this.detectionChart.setOption(securityTypeOption)
this.detectionChart.resize()
}
*/
}, },
jumpNewDetetion () { jumpNewDetetion () {
this.$router.push({ this.$router.push({

View File

@@ -187,7 +187,7 @@ export const pieForSeverity = {
legend: { legend: {
orient: 'vertical', orient: 'vertical',
type: 'plain', type: 'plain',
left: '52%', left: '44%',
top: 'middle', top: 'middle',
icon: 'circle', icon: 'circle',
itemWidth: 10, // 设置宽度 itemWidth: 10, // 设置宽度
@@ -203,7 +203,7 @@ export const pieForSeverity = {
type: 'pie', type: 'pie',
selectedMode: 'single', selectedMode: 'single',
radius: ['43%', '65%'], radius: ['43%', '65%'],
center: ['26%', '50%'], center: ['22%', '50%'],
data: [], data: [],
label: { label: {
show: false show: false

View File

@@ -69,164 +69,247 @@
</el-dialog> </el-dialog>
</template> </template>
<script> <script>
import dataListMixin from '@/mixins/data-list' import dataListMixin from '@/mixins/data-list'
import KnowledgeBaseTableForCard from '@/components/table/setting/knowledgeBaseTableForCard' import KnowledgeBaseTableForCard from '@/components/table/setting/knowledgeBaseTableForCard'
import { api } from '@/utils/api' import { api } from '@/utils/api'
import { urlParamsHandler, overwriteUrl } from '@/utils/tools' import { urlParamsHandler, overwriteUrl } from '@/utils/tools'
import { knowledgeBaseCategory, knowledgeBaseSource, knowledgeCategoryValue } from '@/utils/constants' import { knowledgeBaseCategory, knowledgeBaseSource, knowledgeCategoryValue } from '@/utils/constants'
import axios from 'axios' import axios from 'axios'
export default { export default {
name: 'knowledgeBase', name: 'knowledgeBase',
components: { components: {
KnowledgeBaseTableForCard KnowledgeBaseTableForCard
},
mixins: [dataListMixin],
data () {
return {
url: api.knowledgeBase,
listUrl: api.knowledgeBaseList,
tableId: 'knowledgeBaseTable', // 需要分页的table的id用于记录每页数量
isSelectedStatus: false,
filterParams: {},
checkedCategoryIds: [],
checkedStatusIds: [],
keyWord: '',
showConfirmDialog: false,
delItemList: [],
secondBatchDeleteObjs: []
}
},
watch: {
},
methods: {
categoryFormat (row, column) {
const category = row.category
const t = knowledgeBaseCategory.find(t => t.value === category)
return t ? t.name : category
}, },
mixins: [dataListMixin], sourceFormat (row, column) {
data () { const source = row.source
return { const t = knowledgeBaseSource.find(t => t.value === source)
url: api.knowledgeBase, return t ? t.name : source
listUrl: api.knowledgeBaseList, },
tableId: 'knowledgeBaseTable', // 需要分页的table的id用于记录每页数量 handleClose () {
isSelectedStatus: false, this.showConfirmDialog = false
filterParams: {}, },
checkedCategoryIds: [], showDelDialog () {
checkedStatusIds: [], this.showConfirmDialog = true
keyWord: '', this.$nextTick(() => {
showConfirmDialog: false, this.batchDeleteObjs.forEach((item) => {
delItemList: [], this.$refs.delDataTable.toggleRowSelection(item, true)
secondBatchDeleteObjs: [] })
})
},
secondSelectionChange (objs) {
this.secondBatchDeleteObjs = objs
},
selectionChange (objs) {
this.batchDeleteObjs = []
objs.forEach(obj => {
const delObj = this.batchDeleteObjs.find(item => item.knowledgeId === obj.knowledgeId)
if (delObj === undefined) {
this.batchDeleteObjs.push(obj)
}
})
if (this.batchDeleteObjs.length === 1) {
this.disableEdit = false
} else {
this.disableEdit = true
}
if (this.batchDeleteObjs.length >= 1) {
this.disableDelete = false
} else {
this.disableDelete = true
} }
}, },
watch: { checkboxStatusChange (isCheck, data) {
if (isCheck) {
const delObj = this.batchDeleteObjs.find(item => item.knowledgeId === data.knowledgeId)
if (delObj === undefined) {
this.batchDeleteObjs.push(data)
}
} else {
const cancleObjIndex = this.batchDeleteObjs.findIndex(item => item.knowledgeId === data.knowledgeId)
if (cancleObjIndex > -1) {
this.batchDeleteObjs.splice(cancleObjIndex, 1)
}
}
if (this.batchDeleteObjs.length === 1) {
this.disableEdit = false
} else {
this.disableEdit = true
}
if (this.batchDeleteObjs.length >= 1) {
this.disableDelete = false
} else {
this.disableDelete = true
}
}, },
methods: { delBatchKnowledge () {
categoryFormat (row, column) { const ids = []
const category = row.category if (this.secondBatchDeleteObjs && this.secondBatchDeleteObjs.length > 0) {
const t = knowledgeBaseCategory.find(t => t.value === category) this.secondBatchDeleteObjs.forEach(item => {
return t ? t.name : category ids.push(item.knowledgeId)
},
sourceFormat (row, column) {
const source = row.source
const t = knowledgeBaseSource.find(t => t.value === source)
return t ? t.name : source
},
handleClose () {
this.showConfirmDialog = false
},
showDelDialog () {
this.showConfirmDialog = true
this.$nextTick(() => {
this.batchDeleteObjs.forEach((item) => {
this.$refs.delDataTable.toggleRowSelection(item, true)
})
}) })
}, }
secondSelectionChange (objs) { let hasReference = false
this.secondBatchDeleteObjs = objs let referenceKnowledge = null
}, this.batchDeleteObjs.forEach(item => {
selectionChange (objs) { if (item.reference && item.reference.length > 0) {
this.batchDeleteObjs = [] hasReference = true
objs.forEach(obj => { referenceKnowledge = item
const delObj = this.batchDeleteObjs.find(item => item.knowledgeId === obj.knowledgeId)
if (delObj === undefined) {
this.batchDeleteObjs.push(obj)
}
})
if (this.batchDeleteObjs.length === 1) {
this.disableEdit = false
} else {
this.disableEdit = true
} }
if (this.batchDeleteObjs.length >= 1) { })
this.disableDelete = false
} else {
this.disableDelete = true
}
},
checkboxStatusChange (isCheck, data) {
if (isCheck) {
const delObj = this.batchDeleteObjs.find(item => item.knowledgeId === data.knowledgeId)
if (delObj === undefined) {
this.batchDeleteObjs.push(data)
}
} else {
const cancleObjIndex = this.batchDeleteObjs.findIndex(item => item.knowledgeId === data.knowledgeId)
if (cancleObjIndex > -1) {
this.batchDeleteObjs.splice(cancleObjIndex, 1)
}
}
if (this.batchDeleteObjs.length === 1) {
this.disableEdit = false
} else {
this.disableEdit = true
}
if (this.batchDeleteObjs.length >= 1) {
this.disableDelete = false
} else {
this.disableDelete = true
}
},
delBatchKnowledge () {
const ids = []
if (this.secondBatchDeleteObjs && this.secondBatchDeleteObjs.length > 0) {
this.secondBatchDeleteObjs.forEach(item => {
ids.push(item.knowledgeId)
})
}
let hasReference = false
let referenceKnowledge = null
this.batchDeleteObjs.forEach(item => {
if (item.reference && item.reference.length > 0) {
hasReference = true
referenceKnowledge = item
}
})
if (ids.length === 0) { if (ids.length === 0) {
this.$alert(this.$t('tip.pleaseSelect'), { this.$alert(this.$t('tip.pleaseSelect'), {
confirmButtonText: this.$t('tip.yes'), confirmButtonText: this.$t('tip.yes'),
type: 'warning' type: 'warning'
}).catch(() => {}) }).catch(() => {})
} else if (hasReference) { } else if (hasReference) {
this.$message.error(this.$t('knowledgeBase.deleteReferenceObjects', { name: referenceKnowledge.name })) this.$message.error(this.$t('knowledgeBase.deleteReferenceObjects', { name: referenceKnowledge.name }))
} else { } else {
this.toggleLoading(true) this.toggleLoading(true)
axios.delete(this.url + '?knowledgeIds=' + ids).then(response => { axios.delete(this.url + '?knowledgeIds=' + ids).then(response => {
if (response.status === 200) {
this.delFlag = true
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
this.secondBatchDeleteObjs.forEach((item) => {
this.$refs.delDataTable.toggleRowSelection(item, false)
})
this.secondBatchDeleteObjs = []
this.batchDeleteObjs = []
// delete this.searchLabel.category
delete this.searchLabel.source
this.searchLabel.category = knowledgeCategoryValue.userDefined
this.getTableData()
} else {
this.$message.error(response.data.message)
}
}).finally(() => {
this.toggleLoading(false)
if (this.isSelectedStatus != undefined) {
this.isSelectedStatus = false
this.disableDelete = true
this.secondBatchDeleteObjs = []
this.batchDeleteObjs = []
this.showConfirmDialog = false
}
})
}
},
submit () {
this.delBatchKnowledge()
this.showConfirmDialog = false
},
edit (u) {
axios.get(`${this.url}/${u.id}`).then(response => {
if (response.status === 200) { if (response.status === 200) {
this.object = response.data.data.list[0] this.delFlag = true
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
this.secondBatchDeleteObjs.forEach((item) => {
this.$refs.delDataTable.toggleRowSelection(item, false)
})
this.secondBatchDeleteObjs = []
this.batchDeleteObjs = []
// delete this.searchLabel.category
delete this.searchLabel.source
this.searchLabel.category = knowledgeCategoryValue.userDefined
this.getTableData()
} else {
this.$message.error(response.data.message)
}
}).finally(() => {
this.toggleLoading(false)
if (this.isSelectedStatus != undefined) {
this.isSelectedStatus = false
this.disableDelete = true
this.secondBatchDeleteObjs = []
this.batchDeleteObjs = []
this.showConfirmDialog = false
}
})
}
},
submit () {
this.delBatchKnowledge()
this.showConfirmDialog = false
},
edit (u) {
axios.get(`${this.url}/${u.id}`).then(response => {
if (response.status === 200) {
this.object = response.data.data.list[0]
}
}).catch(e => {
console.error(e)
if (e.response.data && e.response.data.message) {
this.$message.error(e.response.data.message)
} else {
this.$message.error(this.$t('tip.somethingWentWrong'))
}
})
},
reload (params, isAll, isClearType, checkedCategoryIds, checkedStatusIds) {
this.disableDelete = true
this.isSelectedStatus = false
this.batchDeleteObjs = []
this.secondBatchDeleteObjs = []
this.filterParams = params
this.checkedCategoryIds = checkedCategoryIds
this.checkedStatusIds = checkedStatusIds
params = {
...params,
name: this.keyWord
}
this.getTableData(params, isAll, isClearType)
},
clearList () {
this.disableDelete = true
this.isSelectedStatus = false
this.batchDeleteObjs = []
this.secondBatchDeleteObjs = []
this.tableData = []
this.pageObj.total = 0
},
toSelect () {
this.$refs.dataTableCard.clearSelect()
this.isSelectedStatus = !this.isSelectedStatus
this.disableDelete = true
this.batchDeleteObjs = []
this.secondBatchDeleteObjs = []
},
editSelectRecord () {
if (this.batchDeleteObjs.length === 0) {
this.$alert(this.$t('tip.pleaseSelectForEdit'), {
confirmButtonText: this.$t('tip.yes'),
type: 'warning'
}).catch(() => {})
} else {
this.jumpToEditPage(this.batchDeleteObjs[0].knowledgeId)
}
},
changeToUserDefinedList () {
this.$router.push({
path: '/knowledgeBase/userDefined',
query: {
t: +new Date()
}
})
},
toDelete (data) {
if (data && data.knowledgeId) {
this.secondBatchDeleteObjs = []
this.batchDeleteObjs = []
this.secondBatchDeleteObjs.push(data)
this.batchDeleteObjs.push(data)
}
this.showDelDialog()
},
del (row) {
this.$confirm(this.$t('tip.confirmDelete'), {
confirmButtonText: this.$t('tip.yes'),
cancelButtonText: this.$t('tip.no'),
type: 'warning'
}).then(() => {
this.toggleLoading(true)
axios.delete(this.url + '?knowledgeIds=' + row.id).then(response => {
if (response.status === 200) {
this.delFlag = true
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
// delete this.searchLabel.category
delete this.searchLabel.source
this.searchLabel.category = knowledgeCategoryValue.userDefined
this.getTableData()
} else {
this.$message.error(response.data.message)
} }
}).catch(e => { }).catch(e => {
console.error(e) console.error(e)
@@ -235,124 +318,41 @@
} else { } else {
this.$message.error(this.$t('tip.somethingWentWrong')) this.$message.error(this.$t('tip.somethingWentWrong'))
} }
})
},
reload (params, isAll, isClearType, checkedCategoryIds, checkedStatusIds) {
this.disableDelete = true
this.isSelectedStatus = false
this.batchDeleteObjs = []
this.secondBatchDeleteObjs = []
this.filterParams = params
this.checkedCategoryIds = checkedCategoryIds
this.checkedStatusIds = checkedStatusIds
params = {
...params,
name: this.keyWord
}
this.getTableData(params, isAll, isClearType)
},
clearList () {
this.disableDelete = true
this.isSelectedStatus = false
this.batchDeleteObjs = []
this.secondBatchDeleteObjs = []
this.tableData = []
this.pageObj.total = 0
},
toSelect () {
this.$refs.dataTableCard.clearSelect()
this.isSelectedStatus = !this.isSelectedStatus
this.disableDelete = true
this.batchDeleteObjs = []
this.secondBatchDeleteObjs = []
},
editSelectRecord () {
if (this.batchDeleteObjs.length === 0) {
this.$alert(this.$t('tip.pleaseSelectForEdit'), {
confirmButtonText: this.$t('tip.yes'),
type: 'warning'
}).catch(() => {})
} else {
this.jumpToEditPage(this.batchDeleteObjs[0].knowledgeId)
}
},
changeToUserDefinedList () {
this.$router.push({
path: '/knowledgeBase/userDefined',
query: {
t: +new Date()
}
})
},
toDelete (data) {
if (data && data.knowledgeId) {
this.secondBatchDeleteObjs = []
this.batchDeleteObjs = []
this.secondBatchDeleteObjs.push(data)
this.batchDeleteObjs.push(data)
}
this.showDelDialog()
},
del (row) {
this.$confirm(this.$t('tip.confirmDelete'), {
confirmButtonText: this.$t('tip.yes'),
cancelButtonText: this.$t('tip.no'),
type: 'warning'
}).then(() => {
this.toggleLoading(true)
axios.delete(this.url + '?knowledgeIds=' + row.id).then(response => {
if (response.status === 200) {
this.delFlag = true
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
// delete this.searchLabel.category
delete this.searchLabel.source
this.searchLabel.category = knowledgeCategoryValue.userDefined
this.getTableData()
} else {
this.$message.error(response.data.message)
}
}).catch(e => {
console.error(e)
if (e.response.data && e.response.data.message) {
this.$message.error(e.response.data.message)
} else {
this.$message.error(this.$t('tip.somethingWentWrong'))
}
}).finally(() => {
this.toggleLoading(false)
})
}).catch(() => {})
},
getBuiltInData () {
this.isNoData = false
this.toggleLoading(true)
const params = {
category: knowledgeCategoryValue.aiTagging + ',' + knowledgeCategoryValue.webSketch,
pageSize: -1
}
axios.get(this.listUrl, { params }).then(response => {
if (response.status === 200) {
this.tableData = response.data.data.list
this.isNoData = !this.tableData || this.tableData.length === 0
} else {
console.error(response.data)
this.isNoData = true
if (response.data.message) {
this.$message.error(response.data.message)
} else {
this.$message.error(this.$t('tip.somethingWentWrong'))
}
}
}).catch(() => {
this.isNoData = true
}).finally(() => { }).finally(() => {
this.toggleLoading(false) this.toggleLoading(false)
}) })
} }).catch(() => {})
}, },
mounted () { getBuiltInData () {
this.filterParams = {} this.isNoData = false
this.getBuiltInData() this.toggleLoading(true)
const params = {
category: knowledgeCategoryValue.aiTagging + ',' + knowledgeCategoryValue.webSketch,
pageSize: -1
}
axios.get(this.listUrl, { params }).then(response => {
if (response.status === 200) {
this.tableData = response.data.data.list
this.isNoData = !this.tableData || this.tableData.length === 0
} else {
console.error(response.data)
this.isNoData = true
if (response.data.message) {
this.$message.error(response.data.message)
} else {
this.$message.error(this.$t('tip.somethingWentWrong'))
}
}
}).catch(() => {
this.isNoData = true
}).finally(() => {
this.toggleLoading(false)
})
} }
},
mounted () {
this.filterParams = {}
this.getBuiltInData()
} }
}
</script> </script>