feat: CN-448 Dns实体下拉服务属性，Dns 详细信息

src/views/entityExplorer/entityList/detailOverview/Ip.vue

@@ -12,6 +12,41 @@
       </div>
     </div>
   </div>
+  <div class="overview-item" v-if="entityData.dnsServerRole">
+    <div class="overview__title">{{$t('overall.dnsServerInfo')}}</div>
+    <div class="overview__content">
+      <div class="overview__row">
+        <div class="row__label row__label--width130">{{$t('overall.dnsServerInfo.role')}}</div>
+        <div class="row__content">{{$_.get(entityData, 'dnsServerRole', '-')}}</div>
+      </div>
+      <div class="overview__row">
+        <div class="row__label row__label--width130">{{$t('overall.dnsServerInfo.mechanism')}}</div>
+        <div class="row__content">{{$_.get(entityData, 'dnsServerOrg', '-')}}</div>
+      </div>
+      <div class="overview__row">
+        <div class="row__label row__label--width130">{{$t('overall.dnsServerInfo.software')}}</div>
+        <div class="row__content">{{$_.get(entityData, 'dnsServerSoftware', '-')}}</div>
+      </div>
+      <div class="overview__row">
+        <div class="row__label row__label--width130">{{$t('overall.dnsServerInfo.system')}}</div>
+        <div class="row__content">{{$_.get(entityData, 'dnsServerOs', '-')}}</div>
+      </div>
+      <div class="overview__row">
+        <div class="row__label row__label--width130">{{$t('overall.dnsServerInfo.protocol')}}</div>
+        <div class="row__content">{{detectionIpSupporting(entityData)}}</div>
+      </div>
+      <div class="overview__row">
+        <div class="row__label row__label--width130">{{$t('overall.dnsServerInfo.queryRate')}}</div>
+        <div class="row__contents">
+          <div class="row__content">
+            <div class="row__charts-msg">{{unitConvert(entityData.queryRate, unitTypes.byte).join(' ')}}ps</div>
+            <!-- 曲线-->
+            <div class="row__charts" :id="`entityDnsServerInfo${entityData.ipAddr}`"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
   <div class="overview-item">
     <div class="overview__title">{{$t('overall.traffic')}}</div>
     <div class="overview__content">
@@ -202,6 +237,8 @@ export default {
       securityUrl: api.entityIpDetailSecurity,
       relatedServerDomainUrl: api.entityIpRelatedServerDomain,
       relatedServerAppUrl: api.entityIpRelatedServerApp,
+      entityDetectionsIpUrl: api.entityDetectionsIp,
+      entityDetectionsIpQueryRateUrl: api.entityDetectionsIpQueryRate,
       listMode: 'list',
       chartData: null,
       singleValues: {
@@ -269,6 +306,25 @@ export default {
           return '-'
         }
       }
+    },
+    detectionIpSupporting () {
+      return function (entityData) {
+        let result = ''
+        if (entityData.dnssecSupport) {
+          result += 'DNSSec/'
+        }
+        if (entityData.dohSupport) {
+          result += 'DoH/'
+        }
+        if (entityData.dotSupport) {
+          result += 'Dot'
+        }
+        result = result.substr(0, result.length - 1)
+        if (!result) {
+          result = '-'
+        }
+        return result
+      }
     }
   },
   methods: {

src/views/entityExplorer/entityList/detailOverview/entityDetailMixin.js

@@ -20,6 +20,7 @@ export default {
         alertNum: 0,
         chartOptionSent: null,
         chartOptionReceived: null,
+        chartDetectionQueryRate: null,
         chartOption: null,
         sentChart: null,
         receivedChart: null
@@ -231,6 +232,52 @@ export default {
       })
     },
 
+    queryDnsServerInfo () {
+      get(this.entityDetectionsIpUrl, this.getQueryParams()).then(response => {
+        if (response.code === 200) {
+          this.entityData.dnsServerRole = response.data.result.dnsServerRole
+          this.entityData.dnsServerOrg = response.data.result.dnsServerOrg
+          this.entityData.dnsServerSoftware = response.data.result.dnsServerSoftware
+          this.entityData.dnsServerOs = response.data.result.dnsServerOs
+          this.entityData.dohSupport = response.data.result.dohSupport
+          this.entityData.dotSupport = response.data.result.dotSupport
+          this.entityData.dnssecSupport = response.data.result.dnssecSupport
+        }
+      })
+    },
+
+    queryDnsServerInfoRate () {
+      this.detectionChart = echarts.init(document.getElementById(`entityDnsServerInfo${this.entityName}`))
+      get(this.entityDetectionsIpQueryRateUrl, this.getQueryParams()).then(response => {
+        if (response.code === 200 && response.data.result && response.data.result.length > 0) {
+          response.data.result.forEach(t => {
+            this.entityData.queryRate = _.nth(t.values, -3)[1]
+            this.chartDetectionQueryRate = {
+              ...this.chartOption,
+              series: [
+                {
+                  name: this.$t('entities.sentThroughput'),
+                  type: 'line',
+                  legendHoverLink: false,
+                  itemStyle: {
+                    normal: {
+                      lineStyle: {
+                        width: 1
+                      }
+                    }
+                  },
+                  color: '#69b072',
+                  data: _.dropRight(t.values, 2).map(v => [Number(v[0]) * 1000, Number(v[1]), unitTypes.byte]),
+                  showSymbol: false
+                }
+              ]
+            }
+          })
+          this.detectionChart.setOption(this.chartDetectionQueryRate)
+        }
+      })
+    },
+
     queryEntityDetail () {
       this.queryEntityDetailTraffic()
       this.queryEntityDetailPerformance()
@@ -238,6 +285,15 @@ export default {
       this.queryEntityDetailNetworkQuantity()
       this.queryEntityDetailLinkOutUrl()
       this.queryEntityDetailLinkInUrl()
+      if (this.entity.entityType === 'ip') {
+        this.queryDnsServerInfo()
+        this.$nextTick(() => {
+          setTimeout(() => {
+            if (!this.entityData.dnsServerRole) return
+            this.queryDnsServerInfoRate()
+          }, 200)
+        })
+      }
     }
   },
   setup () {