diff --git a/src/assets/css/components/views/detections/detection-list/row.scss b/src/assets/css/components/views/detections/detection-list/row.scss index 625a2264..79f9834b 100644 --- a/src/assets/css/components/views/detections/detection-list/row.scss +++ b/src/assets/css/components/views/detections/detection-list/row.scss @@ -2,7 +2,7 @@ display: flex; .cn-detection__collapse { margin-bottom: 1px; - padding-top: 30px; + padding-top: 18px; width: 24px; display: flex; justify-content: center; diff --git a/src/assets/css/font/iconfont.js b/src/assets/css/font/iconfont.js index 2a043bd8..f6467ac8 100644 --- a/src/assets/css/font/iconfont.js +++ b/src/assets/css/font/iconfont.js @@ -1 +1 @@ -!function(c){var a,l,h,o,i,m='',v=(v=document.getElementsByTagName("script"))[v.length-1].getAttribute("data-injectcss"),n=function(c,a){a.parentNode.insertBefore(c,a)};if(v&&!c.__iconfont__svg__cssinject__){c.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(c){console&&console.log(c)}}function t(){i||(i=!0,h())}function z(){try{o.documentElement.doScroll("left")}catch(c){return void setTimeout(z,50)}t()}a=function(){var c,a=document.createElement("div");a.innerHTML=m,m=null,(a=a.getElementsByTagName("svg")[0])&&(a.setAttribute("aria-hidden","true"),a.style.position="absolute",a.style.width=0,a.style.height=0,a.style.overflow="hidden",a=a,(c=document.body).firstChild?n(a,c.firstChild):c.appendChild(a))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(a,0):(l=function(){document.removeEventListener("DOMContentLoaded",l,!1),a()},document.addEventListener("DOMContentLoaded",l,!1)):document.attachEvent&&(h=a,o=c.document,i=!1,z(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,t())})}(window); \ No newline at end of file +!(function (c) { let a; let l; let h; let o; let i; let m = ''; var v = (v = document.getElementsByTagName('script'))[v.length - 1].getAttribute('data-injectcss'); const n = function (c, a) { a.parentNode.insertBefore(c, a) }; if (v && !c.__iconfont__svg__cssinject__) { c.__iconfont__svg__cssinject__ = !0; try { document.write('') } catch (c) { console && console.log(c) } } function t () { i || (i = !0, h()) } function z () { try { o.documentElement.doScroll('left') } catch (c) { return void setTimeout(z, 50) }t() }a = function () { let c; let a = document.createElement('div'); a.innerHTML = m, m = null, (a = a.getElementsByTagName('svg')[0]) && (a.setAttribute('aria-hidden', 'true'), a.style.position = 'absolute', a.style.width = 0, a.style.height = 0, a.style.overflow = 'hidden', a = a, (c = document.body).firstChild ? n(a, c.firstChild) : c.appendChild(a)) }, document.addEventListener ? ~['complete', 'loaded', 'interactive'].indexOf(document.readyState) ? setTimeout(a, 0) : (l = function () { document.removeEventListener('DOMContentLoaded', l, !1), a() }, document.addEventListener('DOMContentLoaded', l, !1)) : document.attachEvent && (h = a, o = c.document, i = !1, z(), o.onreadystatechange = function () { o.readyState == 'complete' && (o.onreadystatechange = null, t()) }) }(window)) diff --git a/src/main.js b/src/main.js index f7887aa1..db8107b3 100644 --- a/src/main.js +++ b/src/main.js @@ -14,7 +14,6 @@ import '@/assets/css/main.scss' // 样式入口 import VueGridLayout from 'vue-grid-layout' import ElementPlus from 'element-plus' import bus from 'tiny-emitter' -const emitter = new bus() import dayjs from 'dayjs' import utc from 'dayjs/plugin/utc' // dependent on utc plugin import timezone from 'dayjs/plugin/timezone' @@ -24,14 +23,15 @@ import weekday from 'dayjs/plugin/weekday' import DateTimeRange from '@/components/common/TimeRange/DateTimeRange' import TimeRefresh from '@/components/common/TimeRange/TimeRefresh' import PanelChartList from '@/views/charts/PanelChartList' +const emitter = new bus() const _ = require('lodash') // lodash工具 -/*dayjs.extend(utc) +/* dayjs.extend(utc) dayjs.extend(timezone) dayjs.extend(advancedFormat) dayjs.extend(weekday) -window.$dayJs = dayjs*/ +window.$dayJs = dayjs */ const app = createApp(App) diff --git a/src/mixins/common.js b/src/mixins/common.js index c30ab9fa..33d2a5ed 100644 --- a/src/mixins/common.js +++ b/src/mixins/common.js @@ -1,5 +1,5 @@ import { hasButton } from '@/permission' -import {getMillisecond} from "@/utils/date-util"; +import { getMillisecond } from '@/utils/date-util' export default { data () { return { diff --git a/src/utils/api.js b/src/utils/api.js index e77cd5c6..438d6e39 100644 --- a/src/utils/api.js +++ b/src/utils/api.js @@ -74,14 +74,14 @@ export const api = { entityIpRelatedServerDomain: '/interface/entity/detail/overview/ip/relatedDomain', entityIpRelatedServerApp: '/interface/entity/detail/overview/ip/relatedApp', // detection - detectionEventSeverity: '/interface/detection/filter/severity', + detectionSeverityTrend: '/interface/detection/filter/severityTrend', detectionAttackType: '/interface/detection/filter/attackType', detectionOffenderIp: '/interface/detection/filter/offenderIp', detectionOffenderLocation: '/interface/detection/filter/offenderLocation', detectionVictimIp: '/interface/detection/filter/victimIp', detectionVictimLocation: '/interface/detection/filter/victimLocation', - detectionSeverity:'/interface/detection/filter/severity', - detectionListBasic:'/interface/detection/list/basic' + detectionSeverity: '/interface/detection/filter/severity', + detectionListBasic: '/interface/detection/list/basic' } /* panel */ @@ -157,7 +157,7 @@ export async function getPermission () { } export async function getI18n () { - const dictData = await getDictList( { type: 'lang'}) + const dictData = await getDictList({ type: 'lang' }) const langs = dictData.map(d => d.value).join(',') localStorage.setItem(storageKey.languages, langs) const request = new Promise(resolve => { diff --git a/src/views/charts/PanelChart.vue b/src/views/charts/PanelChart.vue index 42b5a260..d4e75be2 100644 --- a/src/views/charts/PanelChart.vue +++ b/src/views/charts/PanelChart.vue @@ -190,7 +190,8 @@ export default { } const requestUrl = url || (chartParams && chartParams.url) if (requestUrl) { - get(replaceUrlPlaceholder(requestUrl, this.queryParams)).then(response => {1 + get(replaceUrlPlaceholder(requestUrl, this.queryParams)).then(response => { + 1 // if (this.chartInfo.type === 23 && testData) { // response = testData.data // } else if (this.chartInfo.type === 24 && testData) { diff --git a/src/views/charts/charts/ChartActiveIpTable.vue b/src/views/charts/charts/ChartActiveIpTable.vue index c60d1f4d..7123d8eb 100644 --- a/src/views/charts/charts/ChartActiveIpTable.vue +++ b/src/views/charts/charts/ChartActiveIpTable.vue @@ -49,10 +49,10 @@ diff --git a/src/views/charts/charts/ChartAppBasicInfo.vue b/src/views/charts/charts/ChartAppBasicInfo.vue index 69765322..4dd3f23f 100644 --- a/src/views/charts/charts/ChartAppBasicInfo.vue +++ b/src/views/charts/charts/ChartAppBasicInfo.vue @@ -56,7 +56,7 @@ diff --git a/src/views/charts/charts/ChartCryptocurrencyEventList.vue b/src/views/charts/charts/ChartCryptocurrencyEventList.vue index 30668e3f..c8fd28ee 100644 --- a/src/views/charts/charts/ChartCryptocurrencyEventList.vue +++ b/src/views/charts/charts/ChartCryptocurrencyEventList.vue @@ -24,7 +24,7 @@ diff --git a/src/views/charts/charts/ChartTable.vue b/src/views/charts/charts/ChartTable.vue index e8634705..76744ba6 100644 --- a/src/views/charts/charts/ChartTable.vue +++ b/src/views/charts/charts/ChartTable.vue @@ -67,10 +67,9 @@ export default { }, getTargetPageData (pageNum, pageSize, tableData) { return this.$_.slice(tableData, (pageNum - 1) * pageSize, pageNum * pageSize) - }, + } }, - mounted() { + mounted () { } } - diff --git a/src/views/detections/DetectionFilter.vue b/src/views/detections/DetectionFilter.vue index ad62ffa7..3c1f9fa8 100644 --- a/src/views/detections/DetectionFilter.vue +++ b/src/views/detections/DetectionFilter.vue @@ -46,9 +46,9 @@ export default { } }, methods: { - /*filterChange (value, filter) { + /* filterChange (value, filter) { this.$emit('filter', filter.column) - },*/ + }, */ showMore (filter) { filter.showIndex && (filter.showIndex += 10) filter.showIndex >= filter.data.length && (filter.showMore = false) diff --git a/src/views/detections/Index.vue b/src/views/detections/Index.vue index 21a89c9c..785d01e4 100644 --- a/src/views/detections/Index.vue +++ b/src/views/detections/Index.vue @@ -25,22 +25,22 @@
-
-
+
+
{{$t('detection.severity')}}
-
-
+
+
{{$t('detection.categoryProportion')}}
-
-
+
+
{{$t('detection.activeAttacker')}}
@@ -57,7 +57,7 @@ >
-
+
{ + get(api.detectionSeverityTrend, queryParams).then(response => { response = { - "code": 200, - "success": true, - "msg": "OK", - "data": { - "resultType": "table", - "result": [ + code: 200, + success: true, + msg: 'OK', + data: { + resultType: 'table', + result: [ { - "eventSeverity": "Critical", - "count": 1048 - },{ - "eventSeverity": "High", - "count": 735 - },{ - "eventSeverity": "Medium", - "count": 580 - },{ - "eventSeverity": "Low", - "count": 484 - },{ - "eventSeverity": "Info", - "count": 300 + eventSeverity: 'Critical', + count: 1048 + }, { + eventSeverity: 'High', + count: 735 + }, { + eventSeverity: 'Medium', + count: 580 + }, { + eventSeverity: 'Low', + count: 484 + }, { + eventSeverity: 'Info', + count: 300 } ] } } if (response.code === 200) { this.eventSeverityData = [ - ['time', '2021/11/12 12:00', '2021/11/13 12:00', '2021/11/14 12:00', '2021/11/15 12:00','2021/11/16 12:00','2021/11/17 12:00','2021/11/18 12:00','2021/11/19 12:00','2021/11/20 12:00','2021/11/21 12:00'], - ['Critical', 5, 0, 2, 0,0,3,3,0,4,2], - ['High', 5, 7, 3,0, 0,3,3,20,2,2], - ['Medium', 10, 8, 20, 8,0,5,5,5,5,20], - ['Low', 18, 6, 5, 0,0,2,20,2,2,2], - ['Info', 16, 10, 4, 0,7,0,8,5,15,1] + ['time', '2021/11/12 12:00', '2021/11/13 12:00', '2021/11/14 12:00', '2021/11/15 12:00', '2021/11/16 12:00', '2021/11/17 12:00', '2021/11/18 12:00', '2021/11/19 12:00', '2021/11/20 12:00', '2021/11/21 12:00'], + ['Critical', 5, 0, 2, 0, 0, 3, 3, 0, 4, 2], + ['High', 5, 7, 3, 0, 0, 3, 3, 20, 2, 2], + ['Medium', 10, 8, 20, 8, 0, 5, 5, 5, 5, 20], + ['Low', 18, 6, 5, 0, 0, 2, 20, 2, 2, 2], + ['Info', 16, 10, 4, 0, 7, 0, 8, 5, 15, 1] ] } }).finally(() => { this.$nextTick(() => { this.eventSeverityOption.dataset.source = this.eventSeverityData - this.eventSeverityOption && detectionChart.setOption(this.eventSeverityOption); + this.eventSeverityOption && detectionChart.setOption(this.eventSeverityOption) }) }) }, - initSeverityPerData(){ - const chartDom = document.getElementById('detectionSeverityPer'); - const detectionChart = echarts.init(chartDom); + initSeverityPerData () { + const chartDom = document.getElementById('detectionSeverityPer') + const detectionChart = echarts.init(chartDom) this.severityPerOption = this.$_.cloneDeep(pieForSeverity) const queryParams = { @@ -395,27 +257,27 @@ export default { } get(api.detectionEventSeverity, queryParams).then(response => { response = { - "code": 200, - "success": true, - "msg": "OK", - "data": { - "resultType": "table", - "result": [ + code: 200, + success: true, + msg: 'OK', + data: { + resultType: 'table', + result: [ { - "eventSeverity": "Critical", - "count": 1048 - },{ - "eventSeverity": "High", - "count": 735 - },{ - "eventSeverity": "Medium", - "count": 580 - },{ - "eventSeverity": "Low", - "count": 484 - },{ - "eventSeverity": "Info", - "count": 300 + eventSeverity: 'Critical', + count: 1048 + }, { + eventSeverity: 'High', + count: 735 + }, { + eventSeverity: 'Medium', + count: 580 + }, { + eventSeverity: 'Low', + count: 484 + }, { + eventSeverity: 'Info', + count: 300 } ] } @@ -423,19 +285,19 @@ export default { if (response.code === 200) { this.filterData[0].data = response.data.result.map(r => ({ label: r.eventSeverity, value: r.eventSeverity, count: r.count })) this.severityPerData = response.data.result.map(d => { - return { value: d.count, name: d.eventSeverity,itemStyle:{color:getSeverityColor(d.eventSeverity)}} + return { value: d.count, name: d.eventSeverity, itemStyle: { color: getSeverityColor(d.eventSeverity) } } }) } }).finally(() => { this.$nextTick(() => { this.severityPerOption.series[0].data = this.severityPerData - this.severityPerOption && detectionChart.setOption(this.severityPerOption); + this.severityPerOption && detectionChart.setOption(this.severityPerOption) }) }) }, - initCategoryPerData(){ - const chartDom = document.getElementById('detectionCategoryPer'); - const detectionChart = echarts.init(chartDom); + initCategoryPerData () { + const chartDom = document.getElementById('detectionCategoryPer') + const detectionChart = echarts.init(chartDom) this.categoryPerOption = this.$_.cloneDeep(pieForSeverity) const queryParams = { @@ -445,50 +307,50 @@ export default { } get(api.detectionAttackType, queryParams).then(response => { response = { - "code": 200, - "success": true, - "msg": "OK", - "data": { - "resultType": "table", - "result": [ + code: 200, + success: true, + msg: 'OK', + data: { + resultType: 'table', + result: [ { - "attackType": "Command and control", - "count": 1048 - },{ - "attackType": "Payload_delivery", - "count": 735 - },{ - "attackType": "Cryptomining", - "count": 580 - },{ - "attackType": "phishing", - "count": 484 - },{ - "attackType": "dga", - "count": 300 - },{ - "attackType": "ddos", - "count": 50 - }, + attackType: 'Command and control', + count: 1048 + }, { + attackType: 'Payload_delivery', + count: 735 + }, { + attackType: 'Cryptomining', + count: 580 + }, { + attackType: 'phishing', + count: 484 + }, { + attackType: 'dga', + count: 300 + }, { + attackType: 'ddos', + count: 50 + } ] } } if (response.code === 200) { + this.filterData[1].data = response.data.result.map(r => ({ label: r.attackType, value: r.attackType, count: r.count })) this.categoryPerData = response.data.result.map(d => { - return { value: d.count, name: d.attackType,itemStyle:{color:getAttackColor(d.attackType)}} + return { value: d.count, name: d.attackType, itemStyle: { color: getAttackColor(d.attackType) } } }) } }).finally(() => { this.$nextTick(() => { this.categoryPerOption.series[0].data = this.categoryPerData - this.categoryPerOption && detectionChart.setOption(this.categoryPerOption); + this.categoryPerOption && detectionChart.setOption(this.categoryPerOption) }) }) - }, - initActiveAttackData(){ - const chartDom = document.getElementById('detectionActiveAttacker'); - const detectionChart = echarts.init(chartDom); + initActiveAttackData () { + const chartDom = document.getElementById('detectionActiveAttacker') + const detectionChart = echarts.init(chartDom) this.activeAttackOption = this.$_.cloneDeep(activeAttackBar) const queryParams = { @@ -498,41 +360,44 @@ export default { } get(api.detectionOffenderIp, queryParams).then(response => { response = { - "code": 200, - "success": true, - "msg": "OK", - "data": { - "resultType": "table", - "result": [ + code: 200, + success: true, + msg: 'OK', + data: { + resultType: 'table', + result: [ { - "offenderIp": "192.168.12.21", - "count": 99999 - },{ - "offenderIp": "192.168.22.21", - "count": 88888 - },{ - "offenderIp": "192.168.32.21", - "count": 77777 - },{ - "offenderIp": "192.168.42.21", - "count": 66666 - },{ - "offenderIp": "192.168.52.21", - "count": 55555 + offenderIp: '192.168.12.21', + count: 99999 + }, { + offenderIp: '192.168.22.21', + count: 88888 + }, { + offenderIp: '192.168.32.21', + count: 77777 + }, { + offenderIp: '192.168.42.21', + count: 66666 + }, { + offenderIp: '192.168.52.21', + count: 55555 } ] } } if (response.code === 200) { this.filterData[4].data = response.data.result.map(r => ({ label: r.offenderIp, value: r.offenderIp, count: r.count })) + const { showMore, showIndex } = this.computeFilterPage(this.filterData[4].data) + this.filterData[4].showMore = showMore + this.filterData[4].showIndex = showIndex this.activeAttackData = response.data.result.map(d => { - return [d.count,d.offenderIp] + return [d.count, d.offenderIp] }) } }).finally(() => { this.$nextTick(() => { this.activeAttackOption.series[0].data = this.activeAttackData.reverse() - this.activeAttackOption && detectionChart.setOption(this.activeAttackOption); + this.activeAttackOption && detectionChart.setOption(this.activeAttackOption) }) }) }, @@ -543,8 +408,105 @@ export default { q: this.q } get(api.detectionVictimIp, queryParams).then(response => { + response = { + code: 200, + success: true, + msg: 'OK', + data: { + resultType: 'table', + result: [ + { + victimIp: '1.2.6.8', + count: 50 + }, + { + victimIp: '1.2.6.9', + count: 50 + }, + { + victimIp: '1.2.6.0', + count: 50 + }, + { + victimIp: '1.2.6.1', + count: 50 + }, + { + victimIp: '1.2.6.2', + count: 50 + }, + { + victimIp: '1.2.6.3', + count: 50 + }, + { + victimIp: '1.2.6.4', + count: 50 + }, + { + victimIp: '1.2.6.5', + count: 50 + }, + { + victimIp: '1.2.6.6', + count: 50 + }, + { + victimIp: '1.2.6.7', + count: 50 + }, + { + victimIp: '1.2.7.8', + count: 50 + }, + { + victimIp: '1.2.8.8', + count: 50 + }, + { + victimIp: '1.2.9.8', + count: 50 + }, + { + victimIp: '1.2.6.18', + count: 50 + }, + { + victimIp: '1.2.6.28', + count: 50 + }, + { + victimIp: '1.2.6.38', + count: 50 + }, + { + victimIp: '1.2.6.48', + count: 50 + }, + { + victimIp: '1.2.6.58', + count: 50 + }, + { + victimIp: '1.2.6.68', + count: 50 + }, + { + victimIp: '1.2.6.78', + count: 50 + }, + { + victimIp: '1.2.6.88', + count: 50 + } + ] + } + } if (response.data && response.data.result) { this.filterData[2].data = response.data.result.map(r => ({ label: r.victimIp, value: r.victimIp, count: r.count })) + const { showMore, showIndex } = this.computeFilterPage(this.filterData[2].data) + this.filterData[2].showMore = showMore + this.filterData[2].showIndex = showIndex } }) }, @@ -555,8 +517,25 @@ export default { q: this.q } get(api.detectionVictimLocation, queryParams).then(response => { + response = { + code: 200, + success: true, + msg: 'OK', + data: { + resultType: 'table', + result: [ + { + victimLocationCountry: 'china', + count: 50 + } + ] + } + } if (response.data && response.data.result) { this.filterData[3].data = response.data.result.map(r => ({ label: r.victimLocationCountry, value: r.victimLocationCountry, count: r.count })) + const { showMore, showIndex } = this.computeFilterPage(this.filterData[3].data) + this.filterData[3].showMore = showMore + this.filterData[3].showIndex = showIndex } }) }, @@ -567,71 +546,204 @@ export default { q: this.q } get(api.detectionOffenderLocation, queryParams).then(response => { + response = { + code: 200, + success: true, + msg: 'OK', + data: { + resultType: 'table', + result: [ + { + offenderLocationCountry: 'china', + count: 50 + } + ] + } + } if (response.data && response.data.result) { - this.filterData[5].data = response.data.result.map(r => ({ label: r.victimLocationCountry, value: r.victimLocationCountry, count: r.count })) + this.filterData[5].data = response.data.result.map(r => ({ label: r.offenderLocationCountry, value: r.offenderLocationCountry, count: r.count })) + const { showMore, showIndex } = this.computeFilterPage(this.filterData[5].data) + this.filterData[5].showMore = showMore + this.filterData[5].showIndex = showIndex } }) }, - initListData(){ + computeFilterPage (data) { + return { + showMore: data.length > 10, + showIndex: 9 + } + }, + queryList () { const queryParams = { ...this.timeFilter, - q:this.q, + q: this.q } get(api.detectionListBasic, queryParams).then(response => { response = { - "code": 200, - "success": true, - "msg": "OK", - "data": { - "resultType": "table", - "result": [ + code: 200, + success: true, + msg: 'OK', + data: { + resultType: 'table', + result: [ { - "eventId": 1212, - "securityType": "ddos", - "offenderIp": "1.1.1.1", - "victimIp": "2.2.2.2", - "eventSecurity": "critical", - "malwareName": "the great wall", - "cryptominingPool": "a", - "startTime": 978456923589 + eventId: 1212, + securityType: 'ddos', + offenderIp: '1.1.1.1', + victimIp: '2.2.2.2', + eventSecurity: 'critical', + malwareName: 'the great wall', + cryptominingPool: 'a', + startTime: 978456923589 }, { - "eventId": 1212, - "securityType": "ddos", - "offenderIp": "1.1.1.1", - "victimIp": "2.2.2.2", - "eventSecurity": "high", - "cryptominingPool": "a", - "startTime": 1111111111 + eventId: 1212, + securityType: 'ddos', + offenderIp: '1.1.1.1', + victimIp: '2.2.2.2', + eventSecurity: 'high', + cryptominingPool: 'a', + startTime: 1111111111 }, { - "eventId": 1212, - "securityType": "ddos", - "offenderIp": "1.1.1.1", - "victimIp": "2.2.2.2", - "eventSecurity": "low", - "malwareName": "the great wall", - "startTime": 1111111111 + eventId: 1212, + securityType: 'ddos', + offenderIp: '1.1.1.1', + victimIp: '2.2.2.2', + eventSecurity: 'low', + malwareName: 'the great wall', + startTime: 1111111111 }, { - "eventId": 1212, - "securityType": "ddos", - "offenderIp": "1.1.1.1", - "victimIp": "2.2.2.2", - "eventSecurity": "medium", - "malwareName": "the great wall", - "cryptominingPool": "a", - "startTime": 1111111111 + eventId: 1212, + securityType: 'ddos', + offenderIp: '1.1.1.1', + victimIp: '2.2.2.2', + eventSecurity: 'medium', + malwareName: 'the great wall', + cryptominingPool: 'a', + startTime: 1111111111 }, { - "eventId": 1212, - "securityType": "ddos", - "offenderIp": "1.1.1.1", - "victimIp": "2.2.2.2", - "eventSecurity": "info", - "malwareName": "the great wall", - "cryptominingPool": "a", - "startTime": 1111111111 + eventId: 1212, + securityType: 'ddos', + offenderIp: '1.1.1.1', + victimIp: '2.2.2.2', + eventSecurity: 'info', + malwareName: 'the great wall', + cryptominingPool: 'a', + startTime: 1111111111 + }, + { + eventId: 1212, + securityType: 'ddos', + offenderIp: '1.1.1.1', + victimIp: '2.2.2.2', + eventSecurity: 'info', + malwareName: 'the great wall', + cryptominingPool: 'a', + startTime: 1111111111 + }, + { + eventId: 1212, + securityType: 'ddos', + offenderIp: '1.1.1.1', + victimIp: '2.2.2.2', + eventSecurity: 'info', + malwareName: 'the great wall', + cryptominingPool: 'a', + startTime: 1111111111 + }, + { + eventId: 1212, + securityType: 'ddos', + offenderIp: '1.1.1.1', + victimIp: '2.2.2.2', + eventSecurity: 'info', + malwareName: 'the great wall', + cryptominingPool: 'a', + startTime: 1111111111 + }, + { + eventId: 1212, + securityType: 'ddos', + offenderIp: '1.1.1.1', + victimIp: '2.2.2.2', + eventSecurity: 'info', + malwareName: 'the great wall', + cryptominingPool: 'a', + startTime: 1111111111 + }, + { + eventId: 1212, + securityType: 'ddos', + offenderIp: '1.1.1.1', + victimIp: '2.2.2.2', + eventSecurity: 'info', + malwareName: 'the great wall', + cryptominingPool: 'a', + startTime: 1111111111 + }, + { + eventId: 1212, + securityType: 'ddos', + offenderIp: '1.1.1.1', + victimIp: '2.2.2.2', + eventSecurity: 'info', + malwareName: 'the great wall', + cryptominingPool: 'a', + startTime: 1111111111 + }, + { + eventId: 1212, + securityType: 'ddos', + offenderIp: '1.1.1.1', + victimIp: '2.2.2.2', + eventSecurity: 'info', + malwareName: 'the great wall', + cryptominingPool: 'a', + startTime: 1111111111 + }, + { + eventId: 1212, + securityType: 'ddos', + offenderIp: '1.1.1.1', + victimIp: '2.2.2.2', + eventSecurity: 'info', + malwareName: 'the great wall', + cryptominingPool: 'a', + startTime: 1111111111 + }, + { + eventId: 1212, + securityType: 'ddos', + offenderIp: '1.1.1.1', + victimIp: '2.2.2.2', + eventSecurity: 'info', + malwareName: 'the great wall', + cryptominingPool: 'a', + startTime: 1111111111 + }, + { + eventId: 1212, + securityType: 'ddos', + offenderIp: '1.1.1.1', + victimIp: '2.2.2.2', + eventSecurity: 'info', + malwareName: 'the great wall', + cryptominingPool: 'a', + startTime: 1111111111 + }, + { + eventId: 1212, + securityType: 'ddos', + offenderIp: '1.1.1.1', + victimIp: '2.2.2.2', + eventSecurity: 'info', + malwareName: 'the great wall', + cryptominingPool: 'a', + startTime: 1111111111 } ] } @@ -668,15 +780,13 @@ export default { this.queryListTotal() }, queryFilter () { + this.initEventSeverityTrendData() this.initSeverityPerData() this.initCategoryPerData() this.initActiveAttackData() this.initOffenderLocation() this.initVictimIp() this.initVictimLocation() - }, - queryList () { - }, queryListTotal () { @@ -717,11 +827,8 @@ export default { } }, mounted () { - this.initEventSeverityData() - this.initSeverityPerData() - this.initCategoryPerData() - this.initActiveAttackData() - this.initListData() + this.queryFilter() + this.queryList() }, watch: { timeFilter (n) { diff --git a/src/views/detections/options/detectionOptions.js b/src/views/detections/options/detectionOptions.js index 4c02b17d..d00473f4 100644 --- a/src/views/detections/options/detectionOptions.js +++ b/src/views/detections/options/detectionOptions.js @@ -36,9 +36,9 @@ export const multipleBarOption = { legend: { icon: 'circle', top: 10, - right:10, + right: 10, itemWidth: 10, // 设置宽度 - itemHeight: 10, // 设置高度 + itemHeight: 10 // 设置高度 }, tooltip: {}, dataset: { @@ -49,34 +49,34 @@ export const multipleBarOption = { type: 'category', axisTick: { show: false }, axisLine: { - show: true , - lineStyle :{ - color:'#eaedef' + show: true, + lineStyle: { + color: '#eaedef' } }, - axisLabel:{ - color:'#737373', + axisLabel: { + color: '#737373', interval: 0 }, - splitLine:{ - show:false - }, + splitLine: { + show: false + } }, yAxis: { axisTick: { show: false }, axisLine: { show: true, - lineStyle :{ - color:'#eaedef' + lineStyle: { + color: '#eaedef' } }, - axisLabel:{ - color:'#737373' + axisLabel: { + color: '#737373' }, - splitLine:{ - show:false + splitLine: { + show: false }, - interval:10 + interval: 10 }, grid: { top: 40, @@ -130,9 +130,9 @@ export const multipleBarOption = { itemStyle: { color: '#d7c668' } - }, + } ] -}; +} export const pieForSeverity = { tooltip: { appendToBody: true @@ -161,10 +161,10 @@ export const pieForSeverity = { center: ['30%', '50%'], data: [], label: { - show:false + show: false }, - labelLine:{ - show:false + labelLine: { + show: false }, tooltip: { formatter: function (param, index, callback) { @@ -199,12 +199,12 @@ export const activeAttackBar = { xAxis: { axisTick: { show: false }, axisLine: { show: false }, - axisLabel:{ - show:false - }, - splitLine:{ - show:false + axisLabel: { + show: false }, + splitLine: { + show: false + } }, grid: { top: 20, @@ -216,20 +216,20 @@ export const activeAttackBar = { type: 'category', axisTick: { show: false }, axisLine: { show: false }, - axisLabel:{ - show:true - }, - splitLine:{ - show:false + axisLabel: { + show: true }, + splitLine: { + show: false + } }, series: [{ barWidth: 5, - barMaxHeight:20, + barMaxHeight: 20, itemStyle: { normal: { - color: function(params) { - const colorList = ['#d1bd50','#c9d150','#fddd52','#ffb65a','#fe845d']; + color: function (params) { + const colorList = ['#d1bd50', '#c9d150', '#fddd52', '#ffb65a', '#fe845d'] return colorList[params.dataIndex] } } @@ -242,8 +242,8 @@ export const activeAttackBar = { valueAnimation: true, formatter: function (param, index, callback) { return `${unitConvert(param.value[0], 'number').join(' ')}` - }, + } }, barCategoryGap: '10%' }] -} \ No newline at end of file +} diff --git a/src/views/settings/Roles.vue b/src/views/settings/Roles.vue index 078d29d2..22aec317 100644 --- a/src/views/settings/Roles.vue +++ b/src/views/settings/Roles.vue @@ -52,7 +52,7 @@ import dataListMixin from '@/mixins/data-list' import rolesTable from '@/components/table/settings/RoleTable' import roleBox from '@/components/rightBox/settings/RoleBox' import { api } from '@/utils/api' -import {get} from "@/utils/http"; +import { get } from '@/utils/http' export default { name: 'roles',