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

# Conflicts:
#	src/views/charts2/charts/options/echartOption.js

src/views/charts2/charts/dnsInsight/DnsActiveMaliciousDomain.vue

@@ -124,10 +124,8 @@ export default {
         type: this.tableType,
         severity: this.tableSeverity
       }
-      console.log('DnsActiveMaliciousDomain.vue--initData--请求入参', this.timeFilter)
 
       get(api.dnsInsight.activeMaliciousDomain, params).then(res => {
-        console.log('DnsActiveMaliciousDomain.vue--initData--初始化数据', res.data)
         if (res.code === 200) {
           const data = res.data.result
           if (!data || data.length === 0) {

src/views/charts2/charts/dnsInsight/DnsEventChart.vue

@@ -1,9 +1,94 @@
 <template>
-呵呵
+  <div class="dns-event-chart">
+    <div class="dns-event-chart-pie">
+      <dns-event-chart-by-pie :timeFilter="timeFilter" :pieData="pieData"/>
+    </div>
+    <div class="dns-event-chart-bar">
+      <dns-event-chart-by-bar :timeFilter="timeFilter" :series="series"/>
+    </div>
+  </div>
 </template>
 
 <script>
+import { shallowRef } from 'vue'
+import { get } from '@/utils/http'
+import { api } from '@/utils/api'
+import chartMixin from '@/views/charts2/chart-mixin'
+import dnsEventChartByPie from './DnsEventChartByPie'
+import dnsEventChartByBar from './DnsEventChartByBar'
+
 export default {
-  name: 'DnsEventChart'
+  name: 'DnsEventChart',
+  props: {
+    type: String
+  },
+  components: {
+    dnsEventChartByPie,
+    dnsEventChartByBar
+  },
+  mixins: [chartMixin],
+  setup () {
+    return {
+      myChart: shallowRef(null)
+    }
+  },
+  data () {
+    return {
+      pieData: [], // 饼状图数据
+      series: [], // 柱状图的series数据
+      isNoData: false
+    }
+  },
+  watch: {
+    timeFilter: {
+      deep: true,
+      handler (n) {
+        this.initData()
+      }
+    }
+  },
+  mounted () {
+    this.initData()
+  },
+  methods: {
+    initData () {
+      get(api.dnsInsight.eventChart).then(res => {
+        const data = res.data.result
+        this.pieData = []
+
+        if (data !== undefined && data.length > 0) {
+          const series = []
+          data.forEach((item, index) => {
+            this.pieData.push({
+              name: item.type,
+              value: item.analysis.sum
+            })
+
+            const tempArr = []
+            tempArr.push(item.values)
+            series.push({
+              data: item.values,
+              stack: 'total',
+              name: item.type,
+              barWidth: 26,
+              type: 'bar',
+              emphasis: {
+                focus: 'series'
+              }
+            })
+          })
+          this.series = series
+        }
+      }).finally(() => {
+        this.toggleLoading(false)
+      })
+    },
+    resize () {
+      this.myChart.resize()
+    }
+  },
+  beforeUnmount () {
+    window.removeEventListener('resize', this.resize)
+  }
 }
 </script>

src/views/charts2/charts/dnsInsight/DnsEventChartByBar.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="npm-event dns-event">
+    <div class="npm-event-pie dns-event-pie">
+      <chart-no-data v-if="isNoData"></chart-no-data>
+
+      <div class="npm-event-pies dns-event-pies" v-else>
+        <!--堆叠柱状图-->
+        <div style="width: 100%;height: 100%" id="chart"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { shallowRef } from 'vue'
+import * as echarts from 'echarts'
+import { stackedBarChartOption } from '@/views/charts2/charts/options/echartOption'
+import ChartNoData from '@/views/charts/charts/ChartNoData'
+import chartMixin from '@/views/charts2/chart-mixin'
+
+export default {
+  name: 'DnsEventChartByPie',
+  props: {
+    type: String,
+    timeFilter: Object,
+    series: Array
+  },
+  components: {
+    ChartNoData
+  },
+  mixins: [chartMixin],
+  setup () {
+    return {
+      myChart: shallowRef(null)
+    }
+  },
+  data () {
+    return {
+      chartData: [],
+      timer: null,
+      isNoData: false
+    }
+  },
+  watch: {
+    timeFilter: {
+      deep: true,
+      handler (n) {
+        this.eventsByTypeData()
+      }
+    },
+    series: {
+      deep: true,
+      handler (n) {
+        this.eventsByTypeData()
+      }
+    }
+  },
+  mounted () {
+    this.$nextTick(() => {
+      this.eventsByTypeData()
+    })
+    window.addEventListener('resize', this.resize)
+  },
+  methods: {
+    init () {
+      const _this = this
+      const dom = document.getElementById('chart')
+      if (!this.myChart) {
+        this.myChart = echarts.init(dom)
+        this.chartOption = stackedBarChartOption
+        this.chartOption.series = this.series
+
+        this.myChart.on('mouseover', function (params) {
+          _this.myChart.setOption(_this.chartOption)
+        })
+        this.myChart.on('mouseout', function (params) {
+          _this.myChart.setOption(_this.chartOption)
+        })
+
+        this.myChart.setOption(this.chartOption)
+      } else {
+        this.chartOption.series = this.series
+        this.myChart.setOption(this.chartOption)
+      }
+    },
+    eventsByTypeData () {
+      if (this.series.length > 0) {
+        this.init()
+      }
+    },
+    resize () {
+      this.myChart.resize()
+    }
+  },
+  beforeUnmount () {
+    window.removeEventListener('resize', this.resize)
+  }
+}
+</script>

src/views/charts2/charts/dnsInsight/DnsEventChartByPie.vue

@@ -0,0 +1,151 @@
+<template>
+  <div class="npm-event dns-event">
+    <div class="npm-event-pie dns-event-pie">
+      <chart-no-data v-if="isNoData"></chart-no-data>
+
+      <div class="npm-event-pies dns-event-pies" v-else>
+        <!--pie图-->
+        <div class="chart-drawing" id="chart1"></div>
+
+        <div class="npm-event-pie-legends">
+          <div class="npm-event-pie-legend">
+            <div class="npm-event-pie-legend-title" v-if="chartData.length > 0">{{ $t('overall.type') }}</div>
+            <template v-for="(legend, index) in chartData" :key="index">
+              <div class="npm-event-pie-legend-type">
+                <span class="color-block" :style="{background: chartColor6[index]}"></span>
+                <div class="npm-event-pie-legend-type-severity">{{ legend.name }}</div>
+              </div>
+            </template>
+          </div>
+
+          <div class="npm-event-pie-legend">
+            <div class="npm-event-pie-legend-title" v-if="chartData.length > 0">{{ $t('network.total') }}</div>
+            <template v-for="(legend, index) in chartData" :key="index">
+              <div class="npm-event-pie-legend-total">{{ legend.value }}</div>
+            </template>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { shallowRef } from 'vue'
+import * as echarts from 'echarts'
+import { pieChartOption3 } from '@/views/charts2/charts/options/echartOption'
+import ChartNoData from '@/views/charts/charts/ChartNoData'
+import chartMixin from '@/views/charts2/chart-mixin'
+import { chartColor6 } from '@/utils/constants'
+
+export default {
+  name: 'DnsEventChartByPie',
+  props: {
+    type: String,
+    timeFilter: Object,
+    pieData: Array
+  },
+  components: {
+    ChartNoData
+  },
+  mixins: [chartMixin],
+  setup () {
+    return {
+      myChart: shallowRef(null)
+    }
+  },
+  data () {
+    return {
+      chartData: [],
+      timer: null,
+      isNoData: false,
+      chartColor6: chartColor6
+    }
+  },
+  watch: {
+    timeFilter: {
+      deep: true,
+      handler (n) {
+        this.eventsByTypeData()
+      }
+    },
+    pieData: {
+      deep: true,
+      handler (n) {
+        this.eventsByTypeData()
+      }
+    }
+  },
+  methods: {
+    init () {
+      const _this = this
+      const dom = document.getElementById('chart1')
+      if (!this.myChart) {
+        this.myChart = echarts.init(dom)
+        this.chartOption = pieChartOption3
+        this.chartOption.color = chartColor6
+        this.chartOption.series[0].data = this.chartData
+        this.chartOption.series[0].label = {
+          show: true,
+          position: 'center',
+          fontFamily: 'NotoSansHans-Medium',
+          fontSize: 20,
+          fontWeight: 500,
+          formatter: function () {
+            let num = 0
+            _this.chartData.forEach(t => {
+              num += t.value
+            })
+            return num
+          }
+        }
+        this.myChart.on('mouseover', function (params) {
+          _this.chartOption.series[0].label.show = false
+          _this.myChart.setOption(_this.chartOption)
+        })
+        this.myChart.on('mouseout', function (params) {
+          _this.chartOption.series[0].label.show = true
+          _this.myChart.setOption(_this.chartOption)
+        })
+        this.myChart.setOption(this.chartOption)
+      } else {
+        this.chartOption.color = chartColor6
+        this.chartOption.series[0].data = this.chartData
+        this.chartOption.series[0].label = {
+          show: true,
+          position: 'center',
+          fontFamily: 'NotoSansHans-Medium',
+          fontSize: 20,
+          fontWeight: 500,
+          formatter: function () {
+            let num = 0
+            _this.chartData.forEach(t => {
+              num += t.value
+            })
+            return num
+          }
+        }
+        this.myChart.setOption(this.chartOption)
+      }
+    },
+    eventsByTypeData () {
+      if (this.pieData.length > 0) {
+        this.chartData = this.pieData
+        this.init()
+      }
+    },
+    resize () {
+      this.myChart.resize()
+    }
+  },
+  mounted () {
+    this.$nextTick(() => {
+      this.eventsByTypeData()
+    })
+    window.addEventListener('resize', this.resize)
+  },
+  beforeUnmount () {
+    window.removeEventListener('resize', this.resize)
+  }
+}
+</script>

src/views/charts2/charts/options/echartOption.js

@@ -4,6 +4,7 @@ import {
   chartColor2,
   chartColor3,
   chartColor5,
+  chartColor6,
   unitTypes
 } from '@/utils/constants'
 import unitConvert from '@/utils/unit-convert'
@@ -481,3 +482,68 @@ export const linksTrafficSankeyOption = {
     }
   ]
 }
+
+export const stackedBarChartOption = {
+  color: chartColor6,
+  legend: {
+    show: false
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      barWidth: 26,
+      type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
+    }
+  },
+  grid: {
+    top: '12%',
+    left: '2%',
+    right: '2%',
+    bottom: 24,
+    containLabel: true
+  },
+  xAxis: {
+    type: 'time',
+    boundaryGap: ['1%', '3%'],
+    splitNumber: 12,
+    axisLine: {
+      show: false
+    },
+    axisTick: {
+      show: false
+    },
+    axisLabel: {
+      margin: 12,
+      formatter: function (value) {
+        const data = new Date(value)
+        const h = data.getHours() > 9 ? data.getHours() : '0' + data.getHours()
+        const m = data.getMinutes() > 9 ? data.getMinutes() : '0' + data.getMinutes()
+        return h + ':' + m
+      }
+    }
+  },
+  yAxis: {
+    type: 'value',
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: '#ECECEC'
+      }
+    },
+    axisLabel: {
+      margin: 20
+    }
+  },
+  series: [
+    {
+      data: [],
+      stack: 'total',
+      type: 'bar',
+      name: '',
+      emphasis: {
+        focus: 'series'
+      },
+      barWidth: 26
+    }
+  ]
+}