CN-435 feat: Dashboard--dns 加密dns协议统计图开发

src/assets/css/components/views/charts/chartSingleValue.scss

@@ -345,4 +345,82 @@
       }
     }
   }
+
+  &.cn-chart__single-value--protocol {
+    display: flex;
+    height: 100%;
+    width: 100%;
+    justify-content: center;
+    flex-direction: column;
+    .single-value__content {
+      display: flex;
+      justify-content: center;
+      .content__data {
+        display: flex;
+        flex-direction: column;
+      }
+      .content__data-protocol:nth-of-type(1) {
+        margin-bottom: 50px;
+        span {
+          font-size: 14px;
+          color: #FC8157;
+          font-weight: 500;
+        }
+      }
+      .content__data-protocol:nth-of-type(2) {
+        span {
+          font-size: 14px;
+          color: #FBA342;
+          font-weight: 500;
+        }
+      }
+      .content__data-protocol {
+        display: flex;
+        height: 68px;
+        width: 100%;
+        text-align: center;
+        .content__data-protocol-icon {
+          flex-shrink: 0;
+          display: flex;
+          justify-content: center;
+          width: 68px;
+          height: 100%;
+          line-height: 68px;
+          border-radius: 100%;
+          margin-right: 8px;
+        }
+        .content__data-protocol-value {
+          flex-shrink: 0;
+          display: flex;
+          justify-content: center;
+          flex-direction: column;
+          text-align: left;
+          margin-right: 20px;
+          .content__data-protocol-value-title {
+            flex-shrink: 0;
+            display: flex;
+            margin-bottom: 7px;
+            font-size: 14px;
+            color: #666666;
+            font-weight: 400;
+          }
+          .content__data-protocol-value-num {
+            flex-shrink: 0;
+            display: flex;
+            font-size: 28px;
+            color: #333333;
+            font-weight: 500;
+          }
+        }
+        .content__data-protocol-percent {
+          flex-shrink: 0;
+          display: flex;
+          font-size: 14px;
+          color: #666666;
+          font-weight: 400;
+          line-height: 95px;
+        }
+      }
+    }
+  }
 }

src/assets/css/font/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "cn-icon"; /* Project id 2614877 */
-  src: url('iconfont.woff2?t=1647594989129') format('woff2'),
-       url('iconfont.woff?t=1647594989129') format('woff'),
-       url('iconfont.ttf?t=1647594989129') format('truetype');
+  src: url('iconfont.woff2?t=1648624431165') format('woff2'),
+       url('iconfont.woff?t=1648624431165') format('woff'),
+       url('iconfont.ttf?t=1648624431165') format('truetype');
 }
 
 .cn-icon {
@@ -13,6 +13,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.cn-icon-requests:before {
+  content: "\e76a";
+}
+
+.cn-icon-traffic:before {
+  content: "\e76b";
+}
+
 .cn-icon-domain2:before {
   content: "\e767";
 }

src/views/charts/Chart.vue

@@ -337,7 +337,8 @@ import {
   isAlarmInfo,
   isDomainRecursiveResolve,
   isDetectionSecurity,
-  isDetectionService
+  isDetectionService,
+  isDetectionsProtocol
 } from './charts/tools'
 import _ from 'lodash'
 
@@ -503,7 +504,8 @@ export default {
       isAlarmInfo: isAlarmInfo(props.chartInfo.type),
       isDomainRecursiveResolve: isDomainRecursiveResolve(props.chartInfo.type),
       isDetectionSecurity: isDetectionSecurity(props.chartInfo.type),
-      isDetectionService: isDetectionService(props.chartInfo.type)
+      isDetectionService: isDetectionService(props.chartInfo.type),
+      isDetectionsProtocol: isDetectionsProtocol(props.chartInfo.type)
     }
   }
 }

src/views/charts/charts/ChartSingleValue.vue

@@ -4,7 +4,7 @@
     :class="singleValueClass(type)"
     :style="{ backgroundColor: color }"
   >
-    <div class="single-value-icon__box" v-if="!isCommon3SingleValue(type)">
+    <div class="single-value-icon__box" v-if="!isCommon3SingleValue(type) && !isDetectionsProtocol(type)">
       <div
         class="single-value__icon"
         :style="`background-color: ${
@@ -122,13 +122,37 @@
 
       </div>
     </div>
+    <div class="single-value__content" v-if="isDetectionsProtocol(type)">
+        <div class="content__data">
+          <div class="content__data-protocol">
+            <div class="content__data-protocol-icon" :style="{backgroundColor: chartInfo.params.iconBackgroundColor[0]}">
+              <i :class="chartInfo.params.icon[0]" :style="{color: chartInfo.params.iconColor[0]}"></i>
+            </div>
+            <div class="content__data-protocol-value">
+              <div class="content__data-protocol-value-title">{{$t('protocol.requestVolume')}}</div>
+              <div class="content__data-protocol-value-num">{{unitConvert($_.get(chartData, 'bytes'), chartInfo.params.unitType).join(' ')}}</div>
+            </div>
+            <div class="content__data-protocol-percent">占比&nbsp;&nbsp;&nbsp;<span>{{unitConvert($_.get(chartData, 'bytesPercent') * 100, unitTypes.percent).join(' ')+'%' }}</span></div>
+          </div>
+          <div class="content__data-protocol">
+            <div class="content__data-protocol-icon" :style="{backgroundColor: chartInfo.params.iconBackgroundColor[1]}">
+              <i :class="chartInfo.params.icon[1]" :style="{color: chartInfo.params.iconColor[1]}"></i>
+            </div>
+            <div class="content__data-protocol-value">
+              <div class="content__data-protocol-value-title">{{$t('protocol.totalFlow')}}</div>
+              <div class="content__data-protocol-value-num">{{unitConvert($_.get(chartData, 'count'), chartInfo.params.unitType).join(' ')}}</div>
+            </div>
+            <div class="content__data-protocol-percent">占比&nbsp;&nbsp;&nbsp;<span>{{ unitConvert($_.get(chartData, 'countPercent') * 100, unitTypes.percent).join(' ')+'%' }}</span></div>
+          </div>
+        </div>
+      </div>
   </div>
 </template>
 
 <script>
 import unitConvert from '@/utils/unit-convert'
-import { unitTypes } from '@/utils/constants'
 import { get } from '@/utils/http'
+import { unitTypes } from '@/utils/constants'
 import { replaceUrlPlaceholder } from '@/utils/tools'
 import * as echarts from 'echarts'
 import {
@@ -136,7 +160,10 @@ import {
   getChartColor,
   isCommonSingleValue,
   isSingleValueWithEcharts,
-  isCommon2SingleValue, isSingleValueWithPercent, isCommon3SingleValue
+  isCommon2SingleValue,
+  isSingleValueWithPercent,
+  isCommon3SingleValue,
+  isDetectionsProtocol
 } from '@/views/charts/charts/tools'
 
 export default {
@@ -148,6 +175,8 @@ export default {
   },
   data () {
     return {
+      unitConvert,
+      unitTypes,
       icon: '',
       color: '',
       type: 0,
@@ -203,6 +232,8 @@ export default {
           c = 'cn-chart__single-value--icon-right--color'
         } else if (this.isSingleValueWithPercent(type)) {
           c = 'cn-chart__single-value--icon-doh'
+        } else if (this.isDetectionsProtocol(type)) {
+          c = 'cn-chart__single-value--protocol'
         }
         return c
       }
@@ -214,6 +245,7 @@ export default {
     isCommon2SingleValue,
     isCommon3SingleValue,
     isSingleValueWithPercent,
+    isDetectionsProtocol,
     chartSingleValueTotal () {
       const chartParams = this.$_.get(this.chartInfo, 'params') || {}
       if (isSingleValueWithEcharts(this.type)) {

src/views/charts/charts/tools.js

@@ -136,6 +136,10 @@ export function isTable (type) {
 export function isBasicTable (type) {
   return type === 601
 }
+/* DNS加密协议 */
+export function isDetectionsProtocol (type) {
+  return type === 508
+}
 /* DOMAIN实体DNS记录 */
 export function isDomainDnsRecord (type) {
   return type === 602
@@ -196,6 +200,7 @@ export function isDetectionSecurity (type) {
 export function isDetectionService (type) {
   return type === 710
 }
+
 /* 根据type获取图表分类 */
 const typeCategory = {
   MAP: 'map',