perf: 列表和左侧筛选整理

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

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,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',
+  detectionSeverity: '/interface/detection/filter/severity',
-  detectionListBasic:'/interface/detection/list/basic'
+  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 => {

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

@@ -49,10 +49,10 @@
 </template>
 
 <script>
-import {unitTypes} from '@/utils/constants'
+import { unitTypes } from '@/utils/constants'
 import unitConvert from '@/utils/unit-convert'
 export default {
-  name: "ChartActiveIpTable",
+  name: 'ChartActiveIpTable',
   props: {
     chartInfo: Object,
     chartData: [Array, Object],
@@ -92,7 +92,7 @@ export default {
       }
     }
   },
-  mounted() {
+  mounted () {
   }
 }
 </script>

src/views/charts/charts/ChartAppBasicInfo.vue

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

src/views/charts/charts/ChartCryptocurrencyEventList.vue

@@ -24,7 +24,7 @@
 
 <script>
 export default {
-  name: "ChartCryptocurrencyEventList",
+  name: 'ChartCryptocurrencyEventList',
   props: {
     chartInfo: Object,
     chartData: [Array, Object],
@@ -33,12 +33,12 @@ export default {
   data () {
     return {
       chartDate: [
-        {message: 'Traffic', serverIP: '1.3.2.2', clientIP: '1.3.2.2', time: '2022-01-19 20:06:25'},
+        { message: 'Traffic', serverIP: '1.3.2.2', clientIP: '1.3.2.2', time: '2022-01-19 20:06:25' },
-        {message: 'Traffic ', serverIP: '1.3.2.2', clientIP: '1.3.2.2', time: '2022-01-19 20:06:25'},
+        { message: 'Traffic ', serverIP: '1.3.2.2', clientIP: '1.3.2.2', time: '2022-01-19 20:06:25' },
-        {message: 'Traffic', serverIP: '1.3.2.2', clientIP: '1.3.2.2', time: '2022-01-19 20:06:25'},
+        { message: 'Traffic', serverIP: '1.3.2.2', clientIP: '1.3.2.2', time: '2022-01-19 20:06:25' },
-        {message: 'Traffic', serverIP: '1.3.2.2', clientIP: '1.3.2.2', time: '2022-01-19 20:06:25'},
+        { message: 'Traffic', serverIP: '1.3.2.2', clientIP: '1.3.2.2', time: '2022-01-19 20:06:25' },
-        {message: 'Traffic', serverIP: '1.3.2.2', clientIP: '1.3.2.2', time: '2022-01-19 20:06:25'},
+        { message: 'Traffic', serverIP: '1.3.2.2', clientIP: '1.3.2.2', time: '2022-01-19 20:06:25' },
-        {message: 'Traffic', serverIP: '1.3.2.2', clientIP: '1.3.2.2', time: '2022-01-19 20:06:25'}
+        { message: 'Traffic', serverIP: '1.3.2.2', clientIP: '1.3.2.2', time: '2022-01-19 20:06:25' }
       ]
     }
   }

src/views/charts/charts/ChartDomainDnsRecord.vue

@@ -23,7 +23,7 @@
 
 <script>
 export default {
-  name: "ChartDomainDnsRecord",
+  name: 'ChartDomainDnsRecord',
   props: {
     chartInfo: Object,
     chartData: [Array, Object],
@@ -32,9 +32,9 @@ export default {
   data () {
     return {
       chartDate: [
-        {type: '1', value: '2', country: 'z'},
+        { type: '1', value: '2', country: 'z' },
-        {type: '1', value: '2', country: 'm'},
+        { type: '1', value: '2', country: 'm' },
-        {type: '1', value: '2', country: 'h'}
+        { type: '1', value: '2', country: 'h' }
       ]
     }
   }

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/ChartEchart.vue

@@ -11,72 +11,72 @@ import chartEchartMixin from './chart-echart-mixin'
 import { getOption, isEchartsPie } from './tools'
 import { legendMapping } from '@/views/charts/charts/chart-table-title'
 
-  export default {
+export default {
-    name: 'ChartEchart',
+  name: 'ChartEchart',
-    mixins: [chartEchartMixin],
+  mixins: [chartEchartMixin],
-    data () {
+  data () {
-      return {
+    return {
+    }
+  },
+  props: {
+    resultType: Object
+  },
+  setup (props) {
+    return {
+      isEchartsPie: isEchartsPie(props.chartInfo.type)
+    }
+  },
+  methods: {
+    initEcharts (id) {
+      this.initDom(id)
+      const chartParams = this.chartInfo.params
+      if (chartParams.showLegend === false) {
+        this.chartOption.legend.show = false
       }
-    },
+      this.handleYaxis()
-    props: {
+
-      resultType: Object
+      if (this.isEchartsPie) {
-    },
+        this.chartOption.series[0].data = this.chartData.map(d => {
-    setup (props) {
+          return {
-      return {
+            name: lineToSpace(d.name),
-        isEchartsPie: isEchartsPie(props.chartInfo.type)
+            data: d,
+            value: parseInt(d.num),
+            unitType: chartParams.unitType ? chartParams.unitType : 'number'
+          }
+        })
+      } else {
+        const seriesTemplate = this.chartOption.series[0]
+        this.chartOption.series = this.chartData.map(r => {
+          return {
+            ...seriesTemplate,
+            name: legendMapping[`${this.entity && this.entity.ip ? 'ip_' : ''}${r.legend}`] ? legendMapping[`${this.entity && this.entity.ip ? 'ip_' : ''}${r.legend}`] : lineToSpace(r.legend),
+            data: r.values.map(v => [Number(v[0]) * 1000, Number(v[1]), chartParams.unitType])
+          }
+        })
       }
-    },
+
-    methods: {
+      const rows = (this.chartData.length - 1) / 4 + 1 // 根据legend个数动态预留legend空间
-      initEcharts (id) {
+      const gridTop = 10 + 27 * rows
-        this.initDom(id)
+
-        const chartParams = this.chartInfo.params
+      const gridTemplate = this.chartOption.grid
-        if (chartParams.showLegend === false) {
+      if (chartParams.unitType === unitTypes.byte) {
-          this.chartOption.legend.show = false
+        this.chartOption.yAxis.axisLabel.formatter = function (value, index, a, b) {
+          return unitConvert(value, unitTypes.byte).join(' ')
         }
-        this.handleYaxis()
+        this.chartOption.grid = {
-
+          ...gridTemplate,
-        if (this.isEchartsPie) {
+          top: gridTop,
-          this.chartOption.series[0].data = this.chartData.map(d => {
+          left: 75
-            return {
-              name: lineToSpace(d.name),
-              data: d,
-              value: parseInt(d.num),
-              unitType: chartParams.unitType ? chartParams.unitType : 'number'
-            }
-          })
-        } else {
-          const seriesTemplate = this.chartOption.series[0]
-          this.chartOption.series = this.chartData.map(r => {
-            return {
-              ...seriesTemplate,
-              name: legendMapping[`${this.entity && this.entity.ip ? 'ip_' : ''}${r.legend}`] ? legendMapping[`${this.entity && this.entity.ip ? 'ip_' : ''}${r.legend}`] : lineToSpace(r.legend),
-              data: r.values.map(v => [Number(v[0]) * 1000, Number(v[1]), chartParams.unitType])
-            }
-          })
         }
-
+      } else {
-        const rows = (this.chartData.length - 1) / 4 + 1 // 根据legend个数动态预留legend空间
+        this.chartOption.grid = {
-        const gridTop = 10 + 27 * rows
+          ...gridTemplate,
-
+          top: gridTop
-        const gridTemplate = this.chartOption.grid
-        if (chartParams.unitType === unitTypes.byte) {
-          this.chartOption.yAxis.axisLabel.formatter = function (value, index, a, b) {
-            return unitConvert(value, unitTypes.byte).join(' ')
-          }
-          this.chartOption.grid = {
-            ...gridTemplate,
-            top: gridTop,
-            left: 75
-          }
-        } else {
-          this.chartOption.grid = {
-            ...gridTemplate,
-            top: gridTop
-          }
         }
-
-        this.loadEchart()
       }
+
+      this.loadEchart()
     }
   }
+}
 </script>

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

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)

src/views/detections/Index.vue

@@ -25,22 +25,22 @@
 
         <div class="detection__list">
           <div class="detection__list-statistics">
-            <div class="statistics__severity" >
+            <div class="statistics__severity">
-              <div class="chart-header" >
+              <div class="chart-header">
                 <div class="chart-header__title">{{$t('detection.severity')}}</div>
               </div>
               <div class="chart-content" id="detectionSeverityPer">
               </div>
             </div>
-            <div class="statistics__category" >
+            <div class="statistics__category">
-              <div class="chart-header" >
+              <div class="chart-header">
                 <div class="chart-header__title">{{$t('detection.categoryProportion')}}</div>
               </div>
               <div class="chart-content" id="detectionCategoryPer">
               </div>
             </div>
-            <div class="statistics__active-attack" >
+            <div class="statistics__active-attack">
-              <div class="chart-header" >
+              <div class="chart-header">
                 <div class="chart-header__title">{{$t('detection.activeAttacker')}}</div>
               </div>
               <div class="chart-content" style="" id="detectionActiveAttacker">
@@ -57,7 +57,7 @@
           ></detection-list>
         </div>
       </div>
-      <div class="entity__pagination" >
+      <div class="entity__pagination">
         <Pagination
             ref="pagination"
             :page-obj="pageObj"
@@ -81,10 +81,10 @@ import DetectionFilter from '@/views/detections/DetectionFilter'
 import DetectionList from '@/views/detections/DetectionList'
 import Pagination from '@/components/common/Pagination'
 import { defaultPageSize } from '@/utils/constants'
-import {getNowTime, getSecond} from '@/utils/date-util'
+import { getNowTime, getSecond } from '@/utils/date-util'
 import { ref } from 'vue'
 import * as echarts from 'echarts'
-import { multipleBarOption,pieForSeverity,activeAttackBar,getAttackColor,getSeverityColor } from '@/views/detections/options/detectionOptions'
+import { multipleBarOption, pieForSeverity, activeAttackBar, getAttackColor, getSeverityColor } from '@/views/detections/options/detectionOptions'
 import ChartEchart from '@/views/charts/charts/ChartEchart'
 import { api } from '@/utils/api'
 import { get } from '@/utils/http'
@@ -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,
@@ -319,19 +181,19 @@ export default {
       listData: [],
       listLoading: false,
       eventSeverityOption: null,
-      eventSeverityData:[],
+      eventSeverityData: [],
       severityPerOption: null,
-      severityPerData:[],
+      severityPerData: [],
       categoryPerOption: null,
-      categoryPerData:[],
+      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,53 +201,53 @@ 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
               }
             ]
           }
         }
         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'],
+            ['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],
+            ['Critical', 5, 0, 2, 0, 0, 3, 3, 0, 4, 2],
-            ['High', 5, 7, 3,0, 0,3,3,20,2,2],
+            ['High', 5, 7, 3, 0, 0, 3, 3, 20, 2, 2],
-            ['Medium', 10, 8, 20, 8,0,5,5,5,5,20],
+            ['Medium', 10, 8, 20, 8, 0, 5, 5, 5, 5, 20],
-            ['Low', 18, 6, 5, 0,0,2,20,2,2,2],
+            ['Low', 18, 6, 5, 0, 0, 2, 20, 2, 2, 2],
-            ['Info', 16, 10, 4, 0,7,0,8,5,15,1]
+            ['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(){
+    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
               }
             ]
           }
@@ -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(){
+    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,50 +307,50 @@ 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)}}
+            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(){
+    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,41 +360,44 @@ 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]
+            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,
+          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

@@ -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 ,
+      show: true,
-      lineStyle :{
+      lineStyle: {
-        color:'#eaedef'
+        color: '#eaedef'
       }
     },
-    axisLabel:{
+    axisLabel: {
-      color:'#737373',
+      color: '#737373',
       interval: 0
     },
-    splitLine:{
+    splitLine: {
-      show:false
+      show: false
-    },
+    }
   },
   yAxis: {
     axisTick: { show: false },
     axisLine: {
       show: true,
-      lineStyle :{
+      lineStyle: {
-        color:'#eaedef'
+        color: '#eaedef'
       }
     },
-    axisLabel:{
+    axisLabel: {
-      color:'#737373'
+      color: '#737373'
     },
-    splitLine:{
+    splitLine: {
-      show:false
+      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:{
+      labelLine: {
-        show:false
+        show: false
       },
       tooltip: {
         formatter: function (param, index, callback) {
@@ -199,12 +199,12 @@ export const activeAttackBar = {
   xAxis: {
     axisTick: { show: false },
     axisLine: { show: false },
-    axisLabel:{
+    axisLabel: {
-      show:false
+      show: false
-    },
-    splitLine:{
-      show:false
     },
+    splitLine: {
+      show: false
+    }
   },
   grid: {
     top: 20,
@@ -216,20 +216,20 @@ export const activeAttackBar = {
     type: 'category',
     axisTick: { show: false },
     axisLine: { show: false },
-    axisLabel:{
+    axisLabel: {
-      show:true
+      show: true
-    },
-    splitLine:{
-      show:false
     },
+    splitLine: {
+      show: false
+    }
   },
   series: [{
     barWidth: 5,
-    barMaxHeight:20,
+    barMaxHeight: 20,
     itemStyle: {
       normal: {
-        color: function(params) {
+        color: function (params) {
-          const colorList = ['#d1bd50','#c9d150','#fddd52','#ffb65a','#fe845d'];
+          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%'
   }]
-}
+}

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