From b9a1a7e0e068ab249ea3beeec39685f26dab3a1b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=B4=AA=E6=B4=AA?= <2498601771@qq.com>
Date: Wed, 21 Sep 2022 10:44:20 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E6=8F=90=E4=BA=A4=E4=BA=8B?=
 =?UTF-8?q?=E4=BB=B6=E5=88=86=E5=B8=83=E5=9B=BE=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../charts/dnsInsight/DnsEventChart.vue       | 89 ++++++++++++++++++-
 1 file changed, 87 insertions(+), 2 deletions(-)

diff --git a/src/views/charts2/charts/dnsInsight/DnsEventChart.vue b/src/views/charts2/charts/dnsInsight/DnsEventChart.vue
index eb898e16..222bd4de 100644
--- a/src/views/charts2/charts/dnsInsight/DnsEventChart.vue
+++ b/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>