CN-726：dns-事件分布图开发

src/assets/css/components/index.scss

@@ -69,4 +69,6 @@
 @import 'views/charts2/dnsTrafficLine';
 @import 'views/charts2/dnsRecentEvents';
 @import 'views/charts2/dnsActiveMaliciousDomain';
+@import 'views/charts2/dnsEventChart';
+@import './views/charts2/dnsEventChartByPie';
 //@import '../chart';

src/assets/css/components/views/charts2/dnsEventChart.scss

@@ -0,0 +1,19 @@
+.dns-event-chart {
+  width: 100%;
+  height: 100%;
+  border: 1px solid #E2E5EC;
+  border-radius: 4px;
+  display: flex;
+  justify-content: space-between;
+
+  .dns-event-chart-pie {
+    width: 33%;
+    height: 100%;
+  }
+
+  .dns-event-chart-bar {
+    width: 67%;
+    height: 100%;
+  }
+
+}

src/assets/css/components/views/charts2/dnsEventChartByPie.scss

@@ -0,0 +1,34 @@
+.dns-event {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border: none;
+
+  .dns-event-pie {
+    width: 100%;
+    height: 100%;
+    border-radius: 4px;
+    display: flex;
+    border: none;
+
+    .dns-event-pies {
+      height: 100%;
+      width: 100%;
+      display: flex;
+      align-items: center;
+
+      .chart-drawing {
+        height: 100%;
+        width: 50%;
+      }
+
+      .color-block {
+        width: 8px;
+        height: 8px;
+        margin-right: 8px;
+        margin-top: 3px;
+      }
+    }
+  }
+}
+

src/mock/dns.js

@@ -36,4 +36,40 @@ if (openMock) {
       }
     }
   })
+  Mock.mock(new RegExp(BASE_CONFIG.baseUrl + 'interface/dnsInsight/eventChart.*'), 'get', function (requestObj) {
+    const data = []
+    for (let i = 0; i < 2; i++) {
+      data.push({
+        type: '',
+        analysis: {
+          sum: 0
+        },
+        values: []
+      })
+    }
+    data[0].type = 'performanceEvent'
+    data[1].type = 'securityEvent'
+
+    let num = 1435781430781
+    for (let i = 0; i < 16; i++) {
+      num += 5 * 60 * 1000
+      data[0].values.push([
+        num, Math.floor(Math.random() * 50) + 10
+      ])
+      data[1].values.push([
+        num, Math.floor(Math.random() * 10) + 2
+      ])
+    }
+
+    data[0].analysis.sum = Math.floor(Math.random() * 800) + 160
+    data[1].analysis.sum = Math.floor(Math.random() * 160) + 32
+
+    return {
+      msg: 'success',
+      code: 200,
+      data: {
+        result: data
+      }
+    }
+  })
 }

src/utils/api.js

@@ -204,7 +204,8 @@ export const api = {
   dnsInsight: {
     recentEvents: '/interface/dnsInsight/recentEvents',
     activeMaliciousDomain: '/interface/dnsInsight/activeMaliciousDomain',
-    totalTrafficAnalysis: '/interface/dns/overview/totalTrafficAnalysis'
+    totalTrafficAnalysis: '/interface/dns/overview/totalTrafficAnalysis',
+    eventChart: '/interface/dnsInsight/eventChart'
   }
 }
 

src/utils/constants.js

@@ -805,6 +805,8 @@ export const chartColor3 = ['#00A7AB', '#7FA054', '#35ADDA', '#E48F3E', '#9FBC1D
 export const chartColor4 = ['#E5F6F6', '#F2F6EE', '#EBF7FC', '#FCF4EB', '#9FBC1D', '#F5F1F5']
 export const chartColor5 = ['#E26154', '#E7B34E', '#88AF65']
 
+export const chartColor6 = ['#E99F67', '#D9C74B']
+
 export const iso36112 = {
   [storageKey.iso36112Capital]: 'data/countriesWithCapital',
   [storageKey.iso36112WorldLow]: 'worldChinaLow',

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/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'
@@ -376,3 +377,68 @@ export const trafficLineChartOption = {
     }
   ]
 }
+
+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
+    }
+  ]
+}