Merge branch 'dev' of https://git.mesalab.cn/cyber-narrator/cn-ui into dev

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;

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,6 +23,7 @@ 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工具
 

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 {

src/utils/api.js

@@ -74,7 +74,7 @@ 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',

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) {

src/views/charts/charts/ChartActiveIpTable.vue

@@ -52,7 +52,7 @@
 import { unitTypes } from '@/utils/constants'
 import unitConvert from '@/utils/unit-convert'
 export default {
-  name: "ChartActiveIpTable",
+  name: 'ChartActiveIpTable',
   props: {
     chartInfo: Object,
     chartData: [Array, Object],

src/views/charts/charts/ChartAppBasicInfo.vue

@@ -56,7 +56,7 @@
 
 <script>
 export default {
-  name: "ChartAppBasicInfo",
+  name: 'ChartAppBasicInfo',
   props: {
     chartInfo: Object,
     chartData: [Array, Object],

src/views/charts/charts/ChartCryptocurrencyEventList.vue

@@ -24,7 +24,7 @@
 
 <script>
 export default {
-  name: "ChartCryptocurrencyEventList",
+  name: 'ChartCryptocurrencyEventList',
   props: {
     chartInfo: Object,
     chartData: [Array, Object],

src/views/charts/charts/ChartDomainDnsRecord.vue

@@ -23,7 +23,7 @@
 
 <script>
 export default {
-  name: "ChartDomainDnsRecord",
+  name: 'ChartDomainDnsRecord',
   props: {
     chartInfo: Object,
     chartData: [Array, Object],

src/views/charts/charts/ChartDomainWhois.vue

@@ -33,7 +33,7 @@
 
 <script>
 export default {
-  name: "ChartDomainWhois",
+  name: 'ChartDomainWhois',
   props: {
     chartInfo: Object,
     chartData: [Array, Object],

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 () {
   }
 }
 </script>
-

src/views/detections/Index.vue

@@ -114,46 +114,14 @@ export default {
           column: 'eventSeverity',
           collapse: false,
           value: [], // value之间是or的关系
-          data: [
+          data: [] // 从接口动态获取，本项在获得数据后需要特殊处理左边框颜色
-            {
-              label: 'Critical',
-              value: 'critical',
-              count: 50
-            },
-            {
-              label: 'High',
-              value: 'high',
-              count: 50
-            },
-            {
-              label: 'Medium',
-              value: 'medium',
-              count: 50
-            },
-            {
-              label: 'Low',
-              value: 'low',
-              count: 50
-            },
-            {
-              label: 'Info',
-              value: 'info',
-              count: 50
-            }
-          ] // 从接口动态获取，本项在获得数据后需要特殊处理左边框颜色
         },
         {
           title: this.$t('detections.securityType'),
           column: 'securityType',
           collapse: false,
           value: [],
-          data: [
+          data: [] // 从接口动态获取
-            {
-              label: 'Command and control',
-              value: 'command and control',
-              count: 50
-            }
-          ] // 从接口动态获取
         },
         {
           title: this.$t('detections.victimIp'),
@@ -162,117 +130,11 @@ export default {
           value: [],
           showMore: true,
           showIndex: 9,
-          data: [
+          data: [] // 从接口动态获取
-            {
-              label: '1.2.6.8',
-              value: '1.2.6.8',
-              count: 50
-            },
-            {
-              label: '1.2.6.9',
-              value: '1.2.6.9',
-              count: 50
-            },
-            {
-              label: '1.2.6.0',
-              value: '1.2.6.0',
-              count: 50
-            },
-            {
-              label: '1.2.6.1',
-              value: '1.2.6.1',
-              count: 50
-            },
-            {
-              label: '1.2.6.2',
-              value: '1.2.6.2',
-              count: 50
-            },
-            {
-              label: '1.2.6.3',
-              value: '1.2.6.3',
-              count: 50
-            },
-            {
-              label: '1.2.6.4',
-              value: '1.2.6.4',
-              count: 50
-            },
-            {
-              label: '1.2.6.5',
-              value: '1.2.6.5',
-              count: 50
-            },
-            {
-              label: '1.2.6.6',
-              value: '1.2.6.6',
-              count: 50
-            },
-            {
-              label: '1.2.6.7',
-              value: '1.2.6.7',
-              count: 50
-            },
-            {
-              label: '1.2.7.8',
-              value: '1.2.7.8',
-              count: 50
-            },
-            {
-              label: '1.2.8.8',
-              value: '1.2.8.8',
-              count: 50
-            },
-            {
-              label: '1.2.9.8',
-              value: '1.2.9.8',
-              count: 50
-            },
-            {
-              label: '1.2.6.18',
-              value: '1.2.6.18',
-              count: 50
-            },
-            {
-              label: '1.2.6.28',
-              value: '1.2.6.28',
-              count: 50
-            },
-            {
-              label: '1.2.6.38',
-              value: '1.2.6.38',
-              count: 50
-            },
-            {
-              label: '1.2.6.48',
-              value: '1.2.6.48',
-              count: 50
-            },
-            {
-              label: '1.2.6.58',
-              value: '1.2.6.58',
-              count: 50
-            },
-            {
-              label: '1.2.6.68',
-              value: '1.2.6.68',
-              count: 50
-            },
-            {
-              label: '1.2.6.78',
-              value: '1.2.6.78',
-              count: 50
-            },
-            {
-              label: '1.2.6.88',
-              value: '1.2.6.88',
-              count: 50
-            }
-          ] // 从接口动态获取
         },
         {
           title: this.$t('detections.victimLocation'),
-          column: 'victimLocation',
+          column: 'victimLocationCountry',
           collapse: false,
           value: [],
           showMore: false,
@@ -302,7 +164,7 @@ export default {
         },
         {
           title: this.$t('detections.offenderLocation'),
-          column: 'offenderLocation',
+          column: 'offenderLocationCountry',
           collapse: false,
           value: [],
           showMore: false,
@@ -325,13 +187,13 @@ export default {
       categoryPerOption: null,
       categoryPerData: [],
       activeAttackOption: null,
-      activeAttackData:[],
+      activeAttackData: []
     }
   },
   methods: {
-    initEventSeverityData(){
+    initEventSeverityTrendData () {
-      const chartDom = document.getElementById('detectionEventSeverityBar');
+      const chartDom = document.getElementById('detectionEventSeverityBar')
-      const detectionChart = echarts.init(chartDom);
+      const detectionChart = echarts.init(chartDom)
       this.eventSeverityOption = this.$_.cloneDeep(multipleBarOption)
 
       const queryParams = {
@@ -339,29 +201,29 @@ export default {
         endTime: getSecond(this.timeFilter.endTime),
         q: this.q
       }
-      get(api.detectionEventSeverity, queryParams).then(response => {
+      get(api.detectionSeverityTrend, queryParams).then(response => {
         response = {
-          "code": 200,
+          code: 200,
-          "success": true,
+          success: true,
-          "msg": "OK",
+          msg: 'OK',
-          "data": {
+          data: {
-            "resultType": "table",
+            resultType: 'table',
-            "result": [
+            result: [
               {
-                "eventSeverity": "Critical",
+                eventSeverity: 'Critical',
-                "count": 1048
+                count: 1048
               }, {
-                "eventSeverity": "High",
+                eventSeverity: 'High',
-                "count": 735
+                count: 735
               }, {
-                "eventSeverity": "Medium",
+                eventSeverity: 'Medium',
-                "count": 580
+                count: 580
               }, {
-                "eventSeverity": "Low",
+                eventSeverity: 'Low',
-                "count": 484
+                count: 484
               }, {
-                "eventSeverity": "Info",
+                eventSeverity: 'Info',
-                "count": 300
+                count: 300
               }
             ]
           }
@@ -379,13 +241,13 @@ export default {
       }).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 chartDom = document.getElementById('detectionSeverityPer')
-      const detectionChart = echarts.init(chartDom);
+      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,
+          code: 200,
-          "success": true,
+          success: true,
-          "msg": "OK",
+          msg: 'OK',
-          "data": {
+          data: {
-            "resultType": "table",
+            resultType: 'table',
-            "result": [
+            result: [
               {
-                "eventSeverity": "Critical",
+                eventSeverity: 'Critical',
-                "count": 1048
+                count: 1048
               }, {
-                "eventSeverity": "High",
+                eventSeverity: 'High',
-                "count": 735
+                count: 735
               }, {
-                "eventSeverity": "Medium",
+                eventSeverity: 'Medium',
-                "count": 580
+                count: 580
               }, {
-                "eventSeverity": "Low",
+                eventSeverity: 'Low',
-                "count": 484
+                count: 484
               }, {
-                "eventSeverity": "Info",
+                eventSeverity: 'Info',
-                "count": 300
+                count: 300
               }
             ]
           }
@@ -429,13 +291,13 @@ export default {
       }).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 chartDom = document.getElementById('detectionCategoryPer')
-      const detectionChart = echarts.init(chartDom);
+      const detectionChart = echarts.init(chartDom)
       this.categoryPerOption = this.$_.cloneDeep(pieForSeverity)
 
       const queryParams = {
@@ -445,35 +307,36 @@ export default {
       }
       get(api.detectionAttackType, queryParams).then(response => {
         response = {
-          "code": 200,
+          code: 200,
-          "success": true,
+          success: true,
-          "msg": "OK",
+          msg: 'OK',
-          "data": {
+          data: {
-            "resultType": "table",
+            resultType: 'table',
-            "result": [
+            result: [
               {
-                "attackType": "Command and control",
+                attackType: 'Command and control',
-                "count": 1048
+                count: 1048
               }, {
-                "attackType": "Payload_delivery",
+                attackType: 'Payload_delivery',
-                "count": 735
+                count: 735
               }, {
-                "attackType": "Cryptomining",
+                attackType: 'Cryptomining',
-                "count": 580
+                count: 580
               }, {
-                "attackType": "phishing",
+                attackType: 'phishing',
-                "count": 484
+                count: 484
               }, {
-                "attackType": "dga",
+                attackType: 'dga',
-                "count": 300
+                count: 300
               }, {
-                "attackType": "ddos",
+                attackType: 'ddos',
-                "count": 50
+                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) } }
           })
@@ -481,14 +344,13 @@ export default {
       }).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 chartDom = document.getElementById('detectionActiveAttacker')
-      const detectionChart = echarts.init(chartDom);
+      const detectionChart = echarts.init(chartDom)
       this.activeAttackOption = this.$_.cloneDeep(activeAttackBar)
 
       const queryParams = {
@@ -498,33 +360,36 @@ export default {
       }
       get(api.detectionOffenderIp, queryParams).then(response => {
         response = {
-          "code": 200,
+          code: 200,
-          "success": true,
+          success: true,
-          "msg": "OK",
+          msg: 'OK',
-          "data": {
+          data: {
-            "resultType": "table",
+            resultType: 'table',
-            "result": [
+            result: [
               {
-                "offenderIp": "192.168.12.21",
+                offenderIp: '192.168.12.21',
-                "count": 99999
+                count: 99999
               }, {
-                "offenderIp": "192.168.22.21",
+                offenderIp: '192.168.22.21',
-                "count": 88888
+                count: 88888
               }, {
-                "offenderIp": "192.168.32.21",
+                offenderIp: '192.168.32.21',
-                "count": 77777
+                count: 77777
               }, {
-                "offenderIp": "192.168.42.21",
+                offenderIp: '192.168.42.21',
-                "count": 66666
+                count: 66666
               }, {
-                "offenderIp": "192.168.52.21",
+                offenderIp: '192.168.52.21',
-                "count": 55555
+                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]
           })
@@ -532,7 +397,7 @@ export default {
       }).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,
+          code: 200,
-          "success": true,
+          success: true,
-          "msg": "OK",
+          msg: 'OK',
-          "data": {
+          data: {
-            "resultType": "table",
+            resultType: 'table',
-            "result": [
+            result: [
               {
-                "eventId": 1212,
+                eventId: 1212,
-                "securityType": "ddos",
+                securityType: 'ddos',
-                "offenderIp": "1.1.1.1",
+                offenderIp: '1.1.1.1',
-                "victimIp": "2.2.2.2",
+                victimIp: '2.2.2.2',
-                "eventSecurity": "critical",
+                eventSecurity: 'critical',
-                "malwareName": "the great wall",
+                malwareName: 'the great wall',
-                "cryptominingPool": "a",
+                cryptominingPool: 'a',
-                "startTime": 978456923589
+                startTime: 978456923589
               },
               {
-                "eventId": 1212,
+                eventId: 1212,
-                "securityType": "ddos",
+                securityType: 'ddos',
-                "offenderIp": "1.1.1.1",
+                offenderIp: '1.1.1.1',
-                "victimIp": "2.2.2.2",
+                victimIp: '2.2.2.2',
-                "eventSecurity": "high",
+                eventSecurity: 'high',
-                "cryptominingPool": "a",
+                cryptominingPool: 'a',
-                "startTime": 1111111111
+                startTime: 1111111111
               },
               {
-                "eventId": 1212,
+                eventId: 1212,
-                "securityType": "ddos",
+                securityType: 'ddos',
-                "offenderIp": "1.1.1.1",
+                offenderIp: '1.1.1.1',
-                "victimIp": "2.2.2.2",
+                victimIp: '2.2.2.2',
-                "eventSecurity": "low",
+                eventSecurity: 'low',
-                "malwareName": "the great wall",
+                malwareName: 'the great wall',
-                "startTime": 1111111111
+                startTime: 1111111111
               },
               {
-                "eventId": 1212,
+                eventId: 1212,
-                "securityType": "ddos",
+                securityType: 'ddos',
-                "offenderIp": "1.1.1.1",
+                offenderIp: '1.1.1.1',
-                "victimIp": "2.2.2.2",
+                victimIp: '2.2.2.2',
-                "eventSecurity": "medium",
+                eventSecurity: 'medium',
-                "malwareName": "the great wall",
+                malwareName: 'the great wall',
-                "cryptominingPool": "a",
+                cryptominingPool: 'a',
-                "startTime": 1111111111
+                startTime: 1111111111
               },
               {
-                "eventId": 1212,
+                eventId: 1212,
-                "securityType": "ddos",
+                securityType: 'ddos',
-                "offenderIp": "1.1.1.1",
+                offenderIp: '1.1.1.1',
-                "victimIp": "2.2.2.2",
+                victimIp: '2.2.2.2',
-                "eventSecurity": "info",
+                eventSecurity: 'info',
-                "malwareName": "the great wall",
+                malwareName: 'the great wall',
-                "cryptominingPool": "a",
+                cryptominingPool: 'a',
-                "startTime": 1111111111
+                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.queryFilter()
-    this.initSeverityPerData()
+    this.queryList()
-    this.initCategoryPerData()
-    this.initActiveAttackData()
-    this.initListData()
   },
   watch: {
     timeFilter (n) {

src/views/detections/options/detectionOptions.js

@@ -38,7 +38,7 @@ export const multipleBarOption = {
     top: 10,
     right: 10,
     itemWidth: 10, // 设置宽度
-    itemHeight: 10, // 设置高度
+    itemHeight: 10 // 设置高度
   },
   tooltip: {},
   dataset: {
@@ -60,7 +60,7 @@ export const multipleBarOption = {
     },
     splitLine: {
       show: false
-    },
+    }
   },
   yAxis: {
     axisTick: { show: false },
@@ -130,9 +130,9 @@ export const multipleBarOption = {
       itemStyle: {
         color: '#d7c668'
       }
-    },
+    }
   ]
-};
+}
 export const pieForSeverity = {
   tooltip: {
     appendToBody: true
@@ -204,7 +204,7 @@ export const activeAttackBar = {
     },
     splitLine: {
       show: false
-    },
+    }
   },
   grid: {
     top: 20,
@@ -221,7 +221,7 @@ export const activeAttackBar = {
     },
     splitLine: {
       show: false
-    },
+    }
   },
   series: [{
     barWidth: 5,
@@ -229,7 +229,7 @@ export const activeAttackBar = {
     itemStyle: {
       normal: {
         color: function (params) {
-          const colorList = ['#d1bd50','#c9d150','#fddd52','#ffb65a','#fe845d'];
+          const colorList = ['#d1bd50', '#c9d150', '#fddd52', '#ffb65a', '#fe845d']
           return colorList[params.dataIndex]
         }
       }
@@ -242,7 +242,7 @@ export const activeAttackBar = {
       valueAnimation: true,
       formatter: function (param, index, callback) {
         return `${unitConvert(param.value[0], 'number').join(' ')}`
-      },
+      }
     },
     barCategoryGap: '10%'
   }]

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',