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

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

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;
+    }
+  }

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;
+        }
+    }
+}

src/components/table/settings/ChartTable.vue

@@ -119,6 +119,7 @@ export default {
     return {
       panelTypeAndRouteMapping: panelTypeAndRouteMapping,
       tableTitle: [ // 原table列
+      
         {
           label: 'ID',
           prop: 'id',

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

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])
                   }

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>

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>

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

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]