CN-1488 Subscriber详情页TAB组件开发

public/config.js

@@ -14,6 +14,8 @@ const DEFAULT_TIME_FILTER_RANGE = {
     informationAggregation: 0,
     relatedEntity: 60 * 24 * 7,
     openPort: 60 * 24 * 7,
+    deviceInformation: 60 * 24 * 7,
+    accountInformation: 60 * 24 * 7,
     securityEvent: 60 * 24 * 7,
     performanceEvent: 60 * 24 * 7,
     behaviorPattern: 60 * 24 * 7

src/assets/css/font/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "cn-icon"; /* Project id 2614877 */
-  src: url('iconfont.woff2?t=1699411209748') format('woff2'),
+  src: url('iconfont.woff2?t=1701240781545') format('woff2'),
-       url('iconfont.woff?t=1699411209748') format('woff'),
+       url('iconfont.woff?t=1701240781545') format('woff'),
-       url('iconfont.ttf?t=1699411209748') format('truetype');
+       url('iconfont.ttf?t=1701240781545') format('truetype');
 }
 
 .cn-icon {
@@ -13,6 +13,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.cn-icon-account-info:before {
+  content: "\e80e";
+}
+
+.cn-icon-device-info:before {
+  content: "\e80f";
+}
+
 .cn-icon-related:before {
   content: "\e640";
 }

src/components/rightBox/settings/RoleBox.vue

@@ -183,21 +183,21 @@ export default {
         }
       }
     },
-    checkParentNode(node) {
+    checkParentNode (node) {
-      if(node && this.$refs.menuTree.getNode(node)){
+      if (node && this.$refs.menuTree.getNode(node)) {
-        let parent = this.$refs.menuTree.getNode(node).parent
+        const parent = this.$refs.menuTree.getNode(node).parent
-        let parentNode = parent.data
+        const parentNode = parent.data
-        if(parentNode && parentNode.id && parentNode.id !== 0 ){
+        if (parentNode && parentNode.id && parentNode.id !== 0) {
-          this.$refs.menuTree.setChecked(parentNode,true,false)
+          this.$refs.menuTree.setChecked(parentNode, true, false)
           this.checkParentNode(parentNode)
         }
       }
     },
     selectChange: function (data, isCheck, childIsCheck) {
-      if(isCheck) {//如果是选中节点，则同步选中所有的父辈节点(有全选和半选两种状态)
+      if (isCheck) { // 如果是选中节点，则同步选中所有的父辈节点(有全选和半选两种状态)
         this.checkParentNode(data)
-      } else {//如果是取消节点，则同步取消选中所有子节点
+      } else { // 如果是取消节点，则同步取消选中所有子节点
-        if(data.children && data.children.length > 0) {
+        if (data.children && data.children.length > 0) {
           data.children.forEach(node => {
             this.$refs.menuTree.setChecked(node, false, true)
           })

src/components/rightBox/settings/UserBox.vue

@@ -132,9 +132,9 @@ export default {
       }
     }
     const validateConfirmPin = (rule, value, callback) => { // 确认密码的二次校验
-      if (_.isEmpty(value) && !_.isEmpty(this.editObject.pin)) {//密码有内容，确认密码没内容
+      if (_.isEmpty(value) && !_.isEmpty(this.editObject.pin)) { // 密码有内容，确认密码没内容
         callback(new Error(this.$t('config.user.confirmPin')))
-      } else if (!_.isEmpty(value) && value !== this.editObject.pin) {//密码有内容，确认密码也有内容，内容不一致
+      } else if (!_.isEmpty(value) && value !== this.editObject.pin) { // 密码有内容，确认密码也有内容，内容不一致
         callback(new Error(this.$t('config.user.confirmPinErr')))
       } else {
         callback()

src/components/table/setting/knowledgeBaseTableForCard.vue

@@ -849,7 +849,7 @@ export default {
     })
   },
   beforeUnmount () {
-    //clearTimeout(this.timer)
+    // clearTimeout(this.timer)
     window.removeEventListener('resize', this.resize)
     const dom = document.getElementById('psiphonBarChart')
     if (dom) {

src/utils/api.js

@@ -282,6 +282,8 @@ export const api = {
     basicInfo: apiVersion + '/entity/detail/basic',
     tags: apiVersion + '/entity/detail/kb/intelligence/tag',
     informationAggregation: apiVersion + '/entity/detail/kb/intelligence/list',
+    deviceInformation: apiVersion + '/entity/detail/subscribe/device', // 暂时写的值
+    accountInformation: apiVersion + '/entity/detail/subscribe/account', // 暂时写的值
     // 实体关系
     entityGraph: {
       basicInfo: apiVersion + '/entity/graph/relation/basic',

src/utils/constants.js

@@ -95,9 +95,10 @@ export const position = {
 }
 
 export const entityType = {
-  app: 'APP',
+  app: 'app',
-  domain: 'Domain',
+  domain: 'domain',
-  ip: 'IP'
+  ip: 'ip',
+  subscribe: 'subscribe'
 }
 
 export const knowledgeCardUpdateRecordType = {
@@ -109,12 +110,60 @@ export const entityDetailTabsName = {
   informationAggregation: 'informationAggregation',
   relatedEntity: 'relatedEntity',
   openPort: 'openPort',
+  deviceInformation: 'deviceInformation',
+  accountInformation: 'accountInformation',
   digitalCertificate: 'digitalCertificate',
   securityEvent: 'securityEvent',
   performanceEvent: 'performanceEvent',
   behaviorPattern: 'behaviorPattern'
 }
 
+export const entityDetailTabConfig = [
+  {
+    name: 'app',
+    config: [
+      { name: entityDetailTabsName.relatedEntity, label: 'entities.relatedEntity', icon: 'cn-icon cn-icon-domain-name-resolution', tag: 0 },
+      { name: entityDetailTabsName.openPort, label: 'entities.openPort', icon: 'cn-icon cn-icon-open-port', tag: 0 },
+      // { name: entityDetailTabsName.digitalCertificate, label: 'entities.digitalCertificate', icon: 'cn-icon cn-icon-digital-certificate', tag: 0 },
+      { name: entityDetailTabsName.securityEvent, label: 'overall.securityEvent', icon: 'cn-icon cn-icon-security-event', tag: 0 },
+      { name: entityDetailTabsName.performanceEvent, label: 'overall.performanceEvent', icon: 'cn-icon cn-icon-a-PerformanceEvent', tag: 0 }
+    ]
+  },
+  {
+    name: 'domain',
+    config: [
+      { name: entityDetailTabsName.informationAggregation, label: 'entities.informationAggregation', icon: 'cn-icon cn-icon-information-aggregation', tag: 0 },
+      { name: entityDetailTabsName.relatedEntity, label: 'entities.relatedEntity', icon: 'cn-icon cn-icon-domain-name-resolution', tag: 0 },
+      { name: entityDetailTabsName.openPort, label: 'entities.openPort', icon: 'cn-icon cn-icon-open-port', tag: 0 },
+      // { name: entityDetailTabsName.digitalCertificate, label: 'entities.digitalCertificate', icon: 'cn-icon cn-icon-digital-certificate', tag: 0 },
+      { name: entityDetailTabsName.securityEvent, label: 'overall.securityEvent', icon: 'cn-icon cn-icon-security-event', tag: 0 },
+      { name: entityDetailTabsName.performanceEvent, label: 'overall.performanceEvent', icon: 'cn-icon cn-icon-a-PerformanceEvent', tag: 0 }
+    ]
+  },
+  {
+    name: 'ip',
+    config: [
+      { name: entityDetailTabsName.informationAggregation, label: 'entities.informationAggregation', icon: 'cn-icon cn-icon-information-aggregation', tag: 0 },
+      { name: entityDetailTabsName.relatedEntity, label: 'entities.relatedEntity', icon: 'cn-icon cn-icon-domain-name-resolution', tag: 0 },
+      { name: entityDetailTabsName.openPort, label: 'entities.openPort', icon: 'cn-icon cn-icon-open-port', tag: 0 },
+      // { name: entityDetailTabsName.digitalCertificate, label: 'entities.digitalCertificate', icon: 'cn-icon cn-icon-digital-certificate', tag: 0 },
+      { name: entityDetailTabsName.securityEvent, label: 'overall.securityEvent', icon: 'cn-icon cn-icon-security-event', tag: 0 },
+      { name: entityDetailTabsName.performanceEvent, label: 'overall.performanceEvent', icon: 'cn-icon cn-icon-a-PerformanceEvent', tag: 0 },
+      { name: entityDetailTabsName.behaviorPattern, label: 'entities.behaviorPattern', icon: 'cn-icon cn-icon-behavior', tag: 0 }
+    ]
+  },
+  {
+    name: 'subscribe',
+    config: [
+      { name: entityDetailTabsName.deviceInformation, label: 'entities.deviceInformation', icon: 'cn-icon cn-icon-device-info', tag: 0 },
+      { name: entityDetailTabsName.accountInformation, label: 'entities.accountInformation', icon: 'cn-icon cn-icon-account-info', tag: 0 },
+      { name: entityDetailTabsName.relatedEntity, label: 'entities.relatedEntity', icon: 'cn-icon cn-icon-domain-name-resolution', tag: 0 },
+      { name: entityDetailTabsName.securityEvent, label: 'overall.securityEvent', icon: 'cn-icon cn-icon-security-event', tag: 0 },
+      { name: entityDetailTabsName.performanceEvent, label: 'overall.performanceEvent', icon: 'cn-icon cn-icon-a-PerformanceEvent', tag: 0 }
+    ]
+  }
+]
+
 export const entityDetailRelatedEntitiesShowSize = 100
 
 export const echartsFontSize = {

src/views/charts2/chart-mixin.js

@@ -47,6 +47,12 @@ export default {
         case entityDetailTabsName.openPort:
           dataRangeValue = DEFAULT_TIME_FILTER_RANGE.entity.openPort
           break
+        case entityDetailTabsName.deviceInformation:
+          dataRangeValue = DEFAULT_TIME_FILTER_RANGE.entity.deviceInformation
+          break
+        case entityDetailTabsName.accountInformation:
+          dataRangeValue = DEFAULT_TIME_FILTER_RANGE.entity.accountInformation
+          break
         case entityDetailTabsName.informationAggregation:
           dataRangeValue = DEFAULT_TIME_FILTER_RANGE.entity.informationAggregation
           break

src/views/charts2/charts/entityDetail/EntityDetailTabs.vue

@@ -9,7 +9,7 @@
           class="tab-pane--border-card">
         <template #label>
           <!--<div class="el-tabs__active-bar is-top" style="width: 80.9998px; transform: translateX(177px);"></div>-->
-          <i :class="tab.icon"></i>{{tab.label}}
+          <i :class="tab.icon"></i>{{$t(tab.label)}}
           <el-tag size="small" style="margin-left: 6px" :color="tab.name === activeTab ? 'rgb(223,237,248)' : 'rgb(237,237,237)'" round>
             <span :style="{color: tab.name === activeTab ? '#046ECA' : '#717171'}">{{ tab.tag }}</span>
           </el-tag>
@@ -21,6 +21,8 @@
         <performance-event v-else-if="tab.name === entityDetailTabsName.performanceEvent && tab.name === activeTab" @toggleLoading="setLoading" :entity="entity" @checkTag="setTag" />
         <open-port v-else-if="tab.name === entityDetailTabsName.openPort && tab.name === activeTab" @toggleLoading="setLoading" :entity="entity"  @checkTag="setTag"></open-port>
         <behavior-pattern v-else-if="tab.name === entityDetailTabsName.behaviorPattern && tab.name === activeTab" @toggleLoading="setLoading" :entity="entity" @checkTag="setTag"></behavior-pattern>
+        <device-information v-else-if="tab.name === entityDetailTabsName.deviceInformation && tab.name === activeTab" @toggleLoading="setLoading" :entity="entity" @checkTag="setTag"></device-information>
+        <account-information v-else-if="tab.name === entityDetailTabsName.accountInformation && tab.name === activeTab" @toggleLoading="setLoading" :entity="entity" @checkTag="setTag"></account-information>
       </el-tab-pane>
     </el-tabs>
   </div>
@@ -37,12 +39,14 @@ import SecurityEvent from '@/views/charts2/charts/entityDetail/tabs/SecurityEven
 import PerformanceEvent from '@/views/charts2/charts/entityDetail/tabs/PerformanceEvent'
 import BehaviorPattern from '@/views/charts2/charts/entityDetail/tabs/BehaviorPattern'
 import OpenPort from '@/views/charts2/charts/entityDetail/tabs/OpenPort'
+import AccountInformation from '@/views/charts2/charts/entityDetail/tabs/AccountInformation'
+import DeviceInformation from '@/views/charts2/charts/entityDetail/tabs/DeviceInformation'
 import DigitalCertificate from '@/views/charts2/charts/entityDetail/tabs/DigitalCertificate'
 import { overwriteUrl, urlParamsHandler } from '@/utils/tools'
 import { useRoute } from 'vue-router'
 import axios from 'axios'
 import { api } from '@/utils/api'
-import { tagValueLabelMapping } from '../../../../utils/constants'
+import { tagValueLabelMapping, entityType, entityDetailTabConfig } from '../../../../utils/constants'
 
 export default {
   name: 'EntityDetailTabs',
@@ -54,6 +58,8 @@ export default {
     InformationAggregation,
     DomainNameResolution,
     OpenPort,
+    DeviceInformation,
+    AccountInformation,
     DigitalCertificate
   },
   data () {
@@ -79,19 +85,9 @@ export default {
     // eslint-disable-next-line vue/no-setup-props-destructure
     const entityType = props.entity.entityType
 
-    const tabs = reactive([
+    const tabObj = entityDetailTabConfig.find(tab => tab.name === entityType)
-      { name: entityDetailTabsName.relatedEntity, label: i18n.global.t('entities.relatedEntity'), icon: 'cn-icon cn-icon-domain-name-resolution', tag: 0 },
+
-      { name: entityDetailTabsName.openPort, label: i18n.global.t('entities.openPort'), icon: 'cn-icon cn-icon-open-port', tag: 0 },
+    const tabs = reactive(tabObj ? tabObj.config : [])
-      // { name: entityDetailTabsName.digitalCertificate, label: i18n.global.t('entities.digitalCertificate'), icon: 'cn-icon cn-icon-digital-certificate', tag: 0 },
-      { name: entityDetailTabsName.securityEvent, label: i18n.global.t('overall.securityEvent'), icon: 'cn-icon cn-icon-security-event', tag: 0 },
-      { name: entityDetailTabsName.performanceEvent, label: i18n.global.t('overall.performanceEvent'), icon: 'cn-icon cn-icon-a-PerformanceEvent', tag: 0 }
-    ])
-    if (entityType !== 'app') {
-      tabs.unshift({ name: entityDetailTabsName.informationAggregation, label: i18n.global.t('entities.informationAggregation'), icon: 'cn-icon cn-icon-information-aggregation', tag: 0 })
-    }
-    if (entityType === 'ip') {
-      tabs.push({ name: entityDetailTabsName.behaviorPattern, label: i18n.global.t('entities.behaviorPattern'), icon: 'cn-icon cn-icon-behavior', tag: 0 })
-    }
     const activeTab = ref(tabs[0].name)
 
     const { query } = useRoute()
@@ -114,10 +110,11 @@ export default {
       const openPort = axios.get(url, { params: this.getParamsByTabType(entityDetailTabsName.openPort) })
       const security = axios.get(`${api.entity.security}/${this.entity.entityType}`, { params: this.getParamsByTabType(entityDetailTabsName.securityEvent) })
       // const performance = axios.get(`${api.entity.performance}/${this.entityType}`, { params: this.getParamsByTabType(entityDetailTabsName.performanceEvent) })
+      const requestArray = [informationAggregation, openPort, security]
 
       // todo 暂时隐藏performance的请求，后续接口开发完毕后再解开注释
       // Promise.allSettled([informationAggregation, openPort, security, performance]).then(response => {
-      Promise.allSettled([informationAggregation, openPort, security]).then(response => {
+      Promise.allSettled(requestArray).then(response => {
         const informationAggregationResponse = response[0].value
         if (informationAggregationResponse && informationAggregationResponse.status === 200) {
           const list = []
@@ -163,25 +160,40 @@ export default {
 
       const relatedEntityParams = this.getParamsByTabType(entityDetailTabsName.relatedEntity)
       // 域名解析
-      if (this.entity.entityType === 'app') {
+      if (this.entity.entityType === entityType.app) {
         const ipsOfApp = axios.get(api.entity.domainNameResolutionAboutIpsOfApp, { params: relatedEntityParams })
         const domainsOfApp = axios.get(api.entity.domainNameResolutionAboutDomainsOfApp, { params: relatedEntityParams })
         this.promiseData(ipsOfApp, domainsOfApp)
       }
 
-      if (this.entity.entityType === 'ip') {
+      if (this.entity.entityType === entityType.ip) {
         const appsOfIp = axios.get(api.entity.domainNameResolutionAboutAppsOfIp, { params: relatedEntityParams })
         const domainsOfIp = axios.get(api.entity.domainNameResolutionAboutDomainsOfIp, { params: relatedEntityParams })
         const behaviorPattern = axios.get(api.entity.behaviorPattern, { params: relatedEntityParams })
         this.promiseData(appsOfIp, domainsOfIp, behaviorPattern)
       }
 
-      if (this.entity.entityType === 'domain') {
+      if (this.entity.entityType === entityType.domain) {
         const appsOfDomain = axios.get(api.entity.domainNameResolutionAboutAppsOfDomain, { params: relatedEntityParams })
         const ipsOfDomain = axios.get(api.entity.domainNameResolutionAboutIpsOfDomain, { params: relatedEntityParams })
         const fqdnsOfDomain = axios.get(api.entity.domainNameResolutionAboutFQDNsOfDomain, { params: relatedEntityParams })
         this.promiseData(appsOfDomain, ipsOfDomain, fqdnsOfDomain)
       }
+
+      if (this.entity.entityType === entityType.subscribe) {
+        axios.get(api.entity.deviceInformation, { params: this.getParamsByTabType(entityDetailTabsName.deviceInformation) }).then(response => {
+          const res = response.data
+          if (response.status === 200) {
+            this.initSetTag(entityDetailTabsName.deviceInformation, res.data.result.length)
+          }
+        })
+        const accountInformation = axios.get(api.entity.accountInformation, { params: this.getParamsByTabType(entityDetailTabsName.accountInformation) }).then(response => {
+          const res = response.data
+          if (response.status === 200) {
+            this.initSetTag(entityDetailTabsName.accountInformation, res.data.result.length)
+          }
+        })
+      }
     },
     promiseData (data1, data2, data3) {
       Promise.all([data1, data2, data3]).then(res => {
@@ -189,7 +201,7 @@ export default {
         const res1 = res[1].data
 
         switch (this.entity.entityType) {
-          case 'ip': {
+          case entityType.ip: {
             const len1 = res[0].status === 200 ? res0.data.result.length : 0
             const len2 = res[1].status === 200 ? res1.data.result.length : 0
             this.initSetTag(entityDetailTabsName.relatedEntity, len1 + len2)
@@ -207,7 +219,7 @@ export default {
             this.initSetTag(entityDetailTabsName.behaviorPattern, behaviorPatternLen)
             break
           }
-          case 'domain': {
+          case entityType.domain: {
             const res2 = res[2].data
             const len1 = res[0].status === 200 ? res0.data.result.length : 0
             const len2 = res[1].status === 200 ? res1.data.result.length : 0
@@ -215,7 +227,7 @@ export default {
             this.initSetTag(entityDetailTabsName.relatedEntity, len1 + len2 + len3)
             break
           }
-          case 'app': {
+          case entityType.app: {
             const len1 = res[0].status === 200 ? res0.data.result.length : 0
             const len2 = res[1].status === 200 ? res1.data.result.length : 0
             this.initSetTag(entityDetailTabsName.relatedEntity, len1 + len2)

src/views/charts2/charts/entityDetail/tabs/AccountInformation.vue

@@ -0,0 +1,139 @@
+<template>
+  <div>
+    <chart-error v-if="showError" :content="errorMsg" class="entity-detail-event-error"></chart-error>
+    <chart-no-data v-if="isNoData && !showError"></chart-no-data>
+
+    <div v-if="!showError && !isNoData && initFlag" class="type-data__column">
+      <div class="type-data">
+        <div class="type-title">
+          <span class="title-mark"></span>
+          <span class="type-title-word">{{ $t('entities.tab.email') }}</span>({{ mailList.length }})
+        </div>
+        <div class="type-content">
+          <div v-for="(mail, index) in mailList.slice(0,showMailListInfo.num)" :key="index" class="data-item">
+            {{ mail }}
+          </div>
+        </div>
+        <div class="more" v-if="mailList.length > entityDetailRelatedEntitiesShowSize">
+          <span class="button" :style="{'opacity': mailList.length > showMailListInfo.num ? 1 : 0.6}"  @click="showMore(showMailListInfo,mailList)">{{ $t('overall.more') }} > </span>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="!showError2 && !isNoData2 && initFlag" class="type-data__column">
+      <div class="type-data">
+        <div class="type-title">
+          <span class="title-mark"></span>
+          <span class="type-title-word">{{ $t('entities.tab.wetchat') }}</span>({{ wetchatList.length }})
+        </div>
+        <div class="type-content">
+          <div v-for="(wetchat, index) in wetchatList.slice(0,showWetchatListInfo.num)" :key="index" class="data-item">
+            {{ wetchat }}
+          </div>
+        </div>
+        <div class="more" v-if="wetchatList.length > entityDetailRelatedEntitiesShowSize">
+          <span class="button" :style="{'opacity': wetchatList.length > showWetchatListInfo.num ? 1 : 0.6}"  @click="showMore(showWetchatListInfo,wetchatList)">{{ $t('overall.more') }} > </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import axios from 'axios'
+import chartMixin from '@/views/charts2/chart-mixin'
+import { api } from '@/utils/api'
+import chartNoData from '@/views/charts/charts/ChartNoData'
+import { entityDetailTabsName } from '@/utils/constants'
+import { ref } from 'vue'
+import { getNowTime } from '@/utils/date-util'
+
+export default {
+  name: 'AccountInformation',
+  mixins: [chartMixin],
+  props: {
+  },
+  data () {
+    return {
+      mailList: [],
+      showMailListInfo: {
+        num: 0
+      },
+      wetchatList: [],
+      showWetchatListInfo: {
+        num: 0
+      },
+      showError: false,
+      errorMsg: '',
+      initFlag: false, // 初始化标识，请求接口之后再显示，避免标题初始化会闪一下
+      showError2: false,
+      errorMsg2: ''
+    }
+  },
+  components: {
+    chartNoData
+  },
+  mounted () {
+    this.initData()
+  },
+  setup (props) {
+    // range取 config.js 中配置的值
+    const dateRangeValue = DEFAULT_TIME_FILTER_RANGE.entity.accountInformation
+    const timeFilter = ref({ dateRangeValue })
+    const { startTime, endTime } = getNowTime(dateRangeValue)
+    timeFilter.value.startTime = startTime
+    timeFilter.value.endTime = endTime
+
+    return {
+      timeFilter
+    }
+  },
+  methods: {
+    initData () {
+      const params = this.getParams()
+      this.toggleLoading(true)
+      axios.get(api.entity.accountInformation, { params: params }).then(response => {
+        const res = response.data
+        if (response.status === 200) {
+          this.isNoData = res.data.result.length === 0
+          this.$emit('checkTag', entityDetailTabsName.accountInformation, res.data.result.length)
+          this.showError = false
+          if (!this.isNoData) {
+            this.mailList = res.data.result
+            this.handleShowDataNum(this.showMailListInfo, this.mailList)
+          }
+        } else {
+          this.httpError(res)
+        }
+      }).catch(e => {
+        this.httpError(e)
+      }).finally(() => {
+        // 测试代码----------------
+        this.mailList = [
+          'Lina@126.com.cn',
+          'Sina@qq.com'
+        ]
+        this.handleShowDataNum(this.showMailListInfo, this.mailList)
+        this.wetchatList = [
+          'uawei0',
+          'phoneomax',
+          'iaomi2'
+        ]
+        this.handleShowDataNum(this.showWetchatListInfo, this.wetchatList)
+        this.isNoData = false
+        this.showError = false
+        this.isNoData2 = false
+        this.showError2 = false
+        // ----------------------
+        this.initFlag = true
+        this.toggleLoading(false)
+      })
+    },
+    httpError (e) {
+      this.$emit('checkTag', entityDetailTabsName.accountInformation, 0)
+      this.isNoData = false
+      this.showError = true
+      this.errorMsg = this.errorMsgHandler(e)
+    }
+  }
+}
+</script>

src/views/charts2/charts/entityDetail/tabs/DeviceInformation.vue

@@ -0,0 +1,110 @@
+<template>
+  <div>
+    <chart-error v-if="showError" :content="errorMsg" class="entity-detail-event-error"></chart-error>
+    <chart-no-data v-if="isNoData && !showError"></chart-no-data>
+
+    <div v-if="!showError && !isNoData && initFlag" class="type-data__column">
+      <div class="type-data">
+        <div class="type-title">
+          <span class="title-mark"></span>
+          <span class="type-title-word">{{ $t('entities.tab.device') }}</span>({{ deviceList.length }})
+        </div>
+        <div class="type-content">
+          <div v-for="(device, index) in deviceList.slice(0,showDeviceListInfo.num)" :key="index" class="data-item">
+            {{ device }}
+          </div>
+        </div>
+        <div class="more" v-if="deviceList.length > entityDetailRelatedEntitiesShowSize">
+          <span class="button" :style="{'opacity': deviceList.length > showDeviceListInfo.num ? 1 : 0.6}"  @click="showMore(showDeviceListInfo,deviceList)">{{ $t('overall.more') }} > </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import axios from 'axios'
+import chartMixin from '@/views/charts2/chart-mixin'
+import { api } from '@/utils/api'
+import chartNoData from '@/views/charts/charts/ChartNoData'
+import { entityDetailTabsName } from '@/utils/constants'
+import { ref } from 'vue'
+import { getNowTime } from '@/utils/date-util'
+
+export default {
+  name: 'DeviceInformation',
+  mixins: [chartMixin],
+  props: {
+  },
+  data () {
+    return {
+      deviceList: [],
+      showDeviceListInfo: {
+        num: 0
+      },
+      showError: false,
+      errorMsg: '',
+      url: api.entity.deviceInformation,
+      initFlag: false // 初始化标识，请求接口之后再显示，避免标题初始化会闪一下
+    }
+  },
+  components: {
+    chartNoData
+  },
+  mounted () {
+    this.initData()
+  },
+  setup (props) {
+    // range取 config.js 中配置的值
+    const dateRangeValue = DEFAULT_TIME_FILTER_RANGE.entity.deviceInformation
+    const timeFilter = ref({ dateRangeValue })
+    const { startTime, endTime } = getNowTime(dateRangeValue)
+    timeFilter.value.startTime = startTime
+    timeFilter.value.endTime = endTime
+
+    return {
+      timeFilter
+    }
+  },
+  methods: {
+    initData () {
+      const params = this.getParams()
+      this.toggleLoading(true)
+      axios.get(this.url, { params: params }).then(response => {
+        const res = response.data
+        if (response.status === 200) {
+          this.isNoData = res.data.result.length === 0
+          this.$emit('checkTag', entityDetailTabsName.deviceInformation, res.data.result.length)
+          this.showError = false
+          if (!this.isNoData) {
+            this.deviceList = res.data.result
+            this.handleShowDataNum(this.showDeviceListInfo, this.deviceList)
+          }
+        } else {
+          this.httpError(res)
+        }
+      }).catch(e => {
+        this.httpError(e)
+      }).finally(() => {
+        // 测试代码----------------
+        this.deviceList = [
+          'Huawei mate20',
+          'Iphone 14pro max',
+          'Xiaomi 12'
+        ]
+        this.handleShowDataNum(this.showDeviceListInfo, this.deviceList)
+        this.isNoData = false
+        this.showError = false
+        // ----------------------
+        this.initFlag = true
+        this.toggleLoading(false)
+      })
+    },
+    httpError (e) {
+      this.$emit('checkTag', entityDetailTabsName.deviceInformation, 0)
+      this.isNoData = false
+      this.showError = true
+      this.errorMsg = this.errorMsgHandler(e)
+    }
+  }
+}
+</script>