CN-332 feat :Dashboard--dns 仪表盘图表开发

2022-03-02 16:13:55 +08:00
parent 80bcf559c1
commit 6e33638715
12 changed files with 249 additions and 59 deletions
--- a/src/assets/css/components/index.scss
+++ b/src/assets/css/components/index.scss
@@ -36,5 +36,8 @@
@import './views/charts/ipBasicInfo';
@import './views/charts/chartEchartIpHostedDomain';
@import './views/charts/chartEchartAppRelateDomain';
+@import './views/charts/ChartOneSituationStatistics';
+@import './views/charts/ChartTwoSituationStatistics';
+

 //@import '../chart';
--- a/src/assets/css/components/views/charts/ChartOneSituationStatistics.scss
+++ b/src/assets/css/components/views/charts/ChartOneSituationStatistics.scss
@@ -0,0 +1,10 @@
+.situation-statistics-main {
+    display: flex;
+    align-items: center;
+    margin-left: 50px;
+    margin-top: 20px;
+    
+    .situation-statistics-main-right{
+        margin-left: 40px;
+    }
+  }
--- a/src/assets/css/components/views/charts/ChartTwoSituationStatistics.scss
+++ b/src/assets/css/components/views/charts/ChartTwoSituationStatistics.scss
@@ -0,0 +1,19 @@
+
+.chart-two-situation-statistics{
+    .situation-statistics-top {
+        display: flex;
+        align-items: center;
+        
+        .situation-statistics-main-right{
+            margin-left: 40px;
+        }
+    }
+    .situation-statistics-bottom {
+        display: flex;
+        align-items: center;
+        
+        .situation-statistics-main-right{
+            margin-left: 40px;
+        }
+    }
+}
--- a/src/components/table/settings/ChartTable.vue
+++ b/src/components/table/settings/ChartTable.vue
@@ -119,6 +119,7 @@ export default {
    return {
      panelTypeAndRouteMapping: panelTypeAndRouteMapping,
      tableTitle: [ // 原table列
+      
        {
          label: 'ID',
          prop: 'id',
--- a/src/views/charts/Chart.vue
+++ b/src/views/charts/Chart.vue
@@ -3,7 +3,6 @@
    <loading :loading="loading && !isTabs && !isBlock && !isGroup"></loading>
    <chart-no-data v-if="isNoData"></chart-no-data>
    <template v-else>
-
      <chart-tabs
        v-if="isTabs"
        :chart-info="chartInfo"
@@ -181,6 +180,21 @@
        :entity="entity"
      ></chart-echart-app-relate-domain>

+      <chart-one-Situation-Statistics
+        v-else-if="isSingleSupportStatistics"
+        :chart-info="chartInfo"
+        :chart-data="chartData"
+        @showLoading="showLoading"
+        :entity="entity"
+      ></chart-one-Situation-Statistics>
+
+      <chart-two-Situation-Statistics
+        v-else-if="isTwoSupportStatistics"
+        :chart-info="chartInfo"
+        :chart-data="chartData"
+        @showLoading="showLoading"
+        :entity="entity"
+      ></chart-two-Situation-Statistics>
    </template>
  </div>
 </template>
@@ -210,6 +224,8 @@ import ChartDomainDnsRecord from '@/views/charts/charts/ChartDomainDnsRecord'
 import ChartCryptocurrencyEventList from '@/views/charts/charts/ChartCryptocurrencyEventList'
 import ChartRelationShip from '@/views/charts/charts/ChartRelationShip'
 import ChartSanKey from '@/views/charts/charts/ChartSanKey'
+import ChartOneSituationStatistics from '@/views/charts/charts/ChartOneSituationStatistics'
+import ChartTwoSituationStatistics from '@/views/charts/charts/ChartTwoSituationStatistics'
 import {
  isEcharts,
  isEchartsLine,
@@ -242,7 +258,9 @@ import {
  isCryptocurrencyEventList,
  isAppBasicInfo,
  isAppRelatedDomain,
-  isBlock
+  isBlock,
+  isSingleSupportStatistics,
+  isTwoSupportStatistics
 } from './charts/tools'
 import _ from 'lodash'

@@ -272,7 +290,9 @@ export default {
    ChartEchart,
    ChartEchartWithTable,
    ChartEchartIpHostedDomain,
-    ChartEchartAppRelateDomain
+    ChartEchartAppRelateDomain,
+    ChartOneSituationStatistics,
+    ChartTwoSituationStatistics
  },
  props: {
    chartInfo: Object,
@@ -290,7 +310,18 @@ export default {
  },
  computed: {
    isNoData () {
-      return !this.loading && (_.isEmpty(this.chartData) || this.isError) && !this.isSingleValue && !this.isTabs && !this.isDomainDnsRecord && !this.isCryptocurrencyEventList && !this.isActiveIpTable && !this.isMap
+      return (
+        !this.loading &&
+        (_.isEmpty(this.chartData) || this.isError) &&
+        !this.isSingleValue &&
+        !this.isTabs &&
+        !this.isDomainDnsRecord &&
+        !this.isCryptocurrencyEventList &&
+        !this.isActiveIpTable &&
+        !this.isMap &&
+        !this.isSingleSupportStatistics &&
+        !this.isTwoSupportStatistics
+      )
    },
    chartOption () {
      if (this.customChartOption) {
@@ -302,21 +333,23 @@ export default {
  },
  methods: {
    resize () {
-      this.$refs['chart' + this.chartInfo.id] && this.$refs['chart' + this.chartInfo.id].resize()
+      this.$refs['chart' + this.chartInfo.id] &&
+        this.$refs['chart' + this.chartInfo.id].resize()
    },
    showLoading (show) {
      this.$emit('showLoading', show)
    },
    initEchartsWithTable () {
-      this.$refs['chart' + this.chartInfo.id] && this.$refs['chart' + this.chartInfo.id].initEchartsWithTable(`chart${this.chartInfo.id}`)
+      this.$refs['chart' + this.chartInfo.id] &&
+        this.$refs['chart' + this.chartInfo.id].initEchartsWithTable(
+          `chart${this.chartInfo.id}`
+        )
    }
-
  },
  watch: {
    chartData: {
      deep: true,
-      handler (n) {
-      }
+      handler (n) {}
    }
  },
  setup (props) {
@@ -331,7 +364,9 @@ export default {
      isEchartsWithStatistics: isEchartsWithStatistics(props.chartInfo.type),
      isSingleValue: isSingleValue(props.chartInfo.type),
      isSingleValueWithEcharts: isSingleValueWithEcharts(props.chartInfo.type),
-      isSingleValueWithEchartsTemp: isSingleValueWithEchartsTemp(props.chartInfo.type),
+      isSingleValueWithEchartsTemp: isSingleValueWithEchartsTemp(
+        props.chartInfo.type
+      ),
      isRelationShip: isRelationShip(props.chartInfo.type),
      isTable: isTable(props.chartInfo.type),
      isCurrentTable: isCurrentTable(props.chartInfo.type),
@@ -349,9 +384,13 @@ export default {
      isIpOpenPort: isIpOpenPort(props.chartInfo.type),
      isDomainWhois: isDomainWhois(props.chartInfo.type),
      isDomainDnsRecord: isDomainDnsRecord(props.chartInfo.type),
-      isCryptocurrencyEventList: isCryptocurrencyEventList(props.chartInfo.type),
+      isCryptocurrencyEventList: isCryptocurrencyEventList(
+        props.chartInfo.type
+      ),
      isAppBasicInfo: isAppBasicInfo(props.chartInfo.type),
-      isAppRelatedDomain: isAppRelatedDomain(props.chartInfo.type)
+      isAppRelatedDomain: isAppRelatedDomain(props.chartInfo.type),
+      isSingleSupportStatistics: isSingleSupportStatistics(props.chartInfo.type),
+      isTwoSupportStatistics: isTwoSupportStatistics(props.chartInfo.type)
    }
  }
 }
--- a/src/views/charts/PanelChart.vue
+++ b/src/views/charts/PanelChart.vue
@@ -219,7 +219,6 @@ export default {
                })
                const Arr = newArr.sort()
                _.forEach(this.chartData, function (value, key) {
-                  console.log(_.head(value.values[0]));
                  if (_.head(value.values[0]) !== _.head(Arr)) {
                    value.values.unshift([_.head(Arr), 0])
                  }
--- a/src/views/charts/charts/ChartOneSituationStatistics.vue
+++ b/src/views/charts/charts/ChartOneSituationStatistics.vue
@@ -0,0 +1,56 @@
+<template>
+  <div class="chart-one-situation-statistics">
+    <div class="situation-statistics-main" v-if="chartInfo.id === 686">
+      <div class="situation-statistics-main-left">
+        <el-progress type="circle" :color="chartInfo.params.color" width="100" :percentage="percentage" />
+      </div>
+      <div class="situation-statistics-main-right">
+        <div>{{ result.Dnssec.all }}</div>
+        <div>{{ $t(`dns.numberOfNodes`) }}</div>
+      </div>
+    </div>
+
+    <div class="situation-statistics-main" v-if="chartInfo.id === 687">
+      <div class="situation-statistics-main-left">
+        <el-progress type="circle" width="100" :color="chartInfo.params.color" :percentage="percentage" />
+      </div>
+      <div class="situation-statistics-main-right">
+        <div>{{ result.IPV6.all }}</div>
+        <div>{{ $t(`dns.numberOfNodes`) }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ChartOneSituationStatistics',
+  props: {
+    chartInfo: Object,
+    chartData: [Array, Object]
+  },
+  data () {
+    return {
+      result: {
+        Dnssec: {
+          num: 5200,
+          all: 18000
+        },
+        IPV6: {
+          num: 2000,
+          all: 10000
+        }
+      }
+    }
+  },
+  computed: {
+    percentage () {
+      if (this.chartInfo.id === 686) {
+        return parseInt((this.result.Dnssec.num / this.result.Dnssec.all) * 100)
+      } else {
+        return parseInt((this.result.IPV6.num / this.result.IPV6.all) * 100)
+      }
+    }
+  }
+}
+</script>
--- a/src/views/charts/charts/ChartTwoSituationStatistics.vue
+++ b/src/views/charts/charts/ChartTwoSituationStatistics.vue
@@ -0,0 +1,55 @@
+<template>
+  <div class="chart-two-situation-statistics">
+    <div
+      class="situation-statistics-main"
+      v-for="(value, index) in result"
+      :key="index"
+    >
+    <div v-if="value.type === 'doh'" class="situation-statistics-top">
+      <div class="situation-statistics-main-left">
+        <el-progress type="circle" :color="chartInfo.params.color[0]" width="100" :percentage="(parseInt((value.num/value.all)*100))" />
+      </div>
+      <div class="situation-statistics-main-right">
+        <div>{{ value.all }}</div>
+        <div>{{ $t(`dns.numberOfNodesSupportingDoHProtocol`) }}</div>
+      </div>
+    </div>
+    <div v-if="value.type === 'dot'" class="situation-statistics-bottom">
+      <div class="situation-statistics-main-left">
+        <el-progress type="circle" :color="chartInfo.params.color[1]" width="100" :percentage="(parseInt((value.num/value.all)*100))" />
+      </div>
+      <div class="situation-statistics-main-right">
+        <div>{{ value.all }}</div>
+        <div>{{ $t(`dns.numberOfNodesSupportingDoTProtocol`) }}</div>
+      </div>
+    </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ChartTwoSituationStatistics',
+  props: {
+    chartInfo: Object,
+    chartData: [Array, Object]
+  },
+  data () {
+    return {
+      result: {
+        encryptedDns1: {
+          num: 1800,
+          all: 10000,
+          type: 'doh'
+        },
+        encryptedDns2: {
+          num: 13500,
+          all: 22000,
+          type: 'dot'
+        }
+      }
+    }
+  }
+
+}
+</script>
--- a/src/views/charts/charts/tools.js
+++ b/src/views/charts/charts/tools.js
@@ -154,6 +154,14 @@ export function isDomainDnsRecord (type) {
 export function isCryptocurrencyEventList (type) {
  return type === 85
 }
+/* 单支持情况统计 */ 
+export function isSingleSupportStatistics (type) {
+  return type === 86
+}
+/* 两个支持情况统计 */ 
+export function isTwoSupportStatistics (type) {
+  return type === 87
+}
 /* 组 */
 export function isGroup (type) {
  return type === 94
--- a/src/views/detections/Index.vue
+++ b/src/views/detections/Index.vue
@@ -389,7 +389,7 @@ export default {
          const chartDom = document.getElementById(`detectionActiveAttacker${this.pageType}`)
          const detectionChart = echarts.init(chartDom)
          const offenderIpOption = this.$_.cloneDeep(activeAttackBar)
-          data.sort(this.sortBy('count'));
+          data.sort(this.sortBy('count'))
          data = data.slice(0, 5)
          offenderIpOption.series[0].data = data.map(d => {
            return [d.count, d.offenderIp]