CN-1351 fix: 实体列表、详情和graph的tag颜色从接口获取

src/utils/constants.js

@@ -2489,6 +2489,7 @@ export const entityDetailTags = {
     }
   ]
 }
+export const entityDefaultColor = 'rgb(119,131,145)'
 // 赛风3IP的type字段字典
 export const psiphon3IpType = [
   {

src/utils/tools.js

@@ -1356,3 +1356,18 @@ export function beforeRouterPush () {
   }
   store.commit('setRouterHistoryList', historyList)
 }
+
+/**
+ * 配置tag颜色，此为接口返回的颜色字段，color为rgb格式
+ * @param color
+ * @returns {string}
+ */
+export function getTagColor (color) {
+  if (color) {
+    let backgroundColor = ''
+    if (color.indexOf('rgb(') > -1) {
+      backgroundColor = color.replace('rgb(', 'rgba(').replace(')', ',0.06)')
+    }
+    return `color: ${color};border-color: ${color};background-color: ${backgroundColor};`
+  }
+}

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

@@ -32,7 +32,13 @@
       </el-popover>
     </div>
     <div class="entity-tags" v-if="!hideTagArea">
-      <div v-for="tag in levelTwoTags" :key="tag.value" class="entity-tag" :class="`entity-tag--level-two-${tag.type}`">{{tag.value}}</div>
+      <div v-for="tag in levelTwoTags"
+           :key="tag.value"
+           class="entity-tag"
+           :class="`entity-tag--level-two-${tag.type}`"
+           :style="getTagColor(tag.color)">
+        {{tag.value}}
+      </div>
     </div>
 <!--    分割线-->
     <div class="dividing-line"></div>
@@ -55,9 +61,10 @@ import {
   entityType,
   entityDetailTags,
   psiphon3IpType,
-  riskLevelMapping
+  riskLevelMapping,
+  entityDefaultColor
 } from '@/utils/constants'
-import { selectElementText, copySelectionText } from '@/utils/tools'
+import { selectElementText, copySelectionText, getTagColor } from '@/utils/tools'
 import { ref } from 'vue'
 import i18n from '@/i18n'
 import { useRouter } from 'vue-router'
@@ -84,6 +91,7 @@ export default {
     }
   },
   methods: {
+    getTagColor,
     tagValueHandler (k, k2, value) {
       if (k === 'psiphon3Ip') {
         if (k2 === 'type') {
@@ -120,7 +128,7 @@ export default {
               }
             })
             if (_.isArray(res.data.userDefinedTags)) {
-              this.levelTwoTags = _.concat(this.levelTwoTags, res.data.userDefinedTags.map(tag => ({ value: tag.tagValue, type: 'normal' })))
+              this.levelTwoTags = _.concat(this.levelTwoTags, res.data.userDefinedTags.map(tag => ({ value: tag.tagValue, color: tag.knowledgeBase ? tag.knowledgeBase.color : entityDefaultColor })))
             }
             this.hideTagArea = _.isEmpty(this.levelTwoTags)
             this.$nextTick(() => {

src/views/entityExplorer/entityGraph/GraphEntityDetail.vue

@@ -86,7 +86,7 @@
     <div class="entity-detail graph-basic-info__block-content">
       <div class="graph-tag-list">
         <div v-for="ic in $_.get(node, 'myData.tags', [])" :key="ic.value">
-          <div class="entity-tag graph-tag-item" :class="`entity-tag--level-two-${ic.type}`">
+          <div class="entity-tag graph-tag-item" :class="`entity-tag--level-two-${ic.type}`" :style="getTagColor(ic.color)">
             <span>{{ic.value}}</span>
           </div>
         </div>
@@ -96,7 +96,7 @@
 </template>
 
 <script>
-import { copySelectionText, selectElementText } from '@/utils/tools'
+import { copySelectionText, selectElementText, getTagColor } from '@/utils/tools'
 import { entityType, riskLevelMapping } from '@/utils/constants'
 import chartMixin from '@/views/charts2/chart-mixin'
 import { dateFormatByAppearance } from '@/utils/date-util'
@@ -174,6 +174,7 @@ export default {
     }
   },
   methods: {
+    getTagColor,
     /** 复制实体名称 */
     copyEntityName () {
       selectElementText(document.getElementById('entityName'))

src/views/entityExplorer/entityGraph/node.js

@@ -2,7 +2,7 @@ import _ from 'lodash'
 import i18n from '@/i18n'
 import axios from 'axios'
 import { api } from '@/utils/api'
-import { entityDetailTags, psiphon3IpType } from '@/utils/constants'
+import { entityDefaultColor, entityDetailTags, psiphon3IpType } from '@/utils/constants'
 
 export default class Node {
   /*
@@ -91,7 +91,7 @@ export default class Node {
       }
     })
     if (_.isArray(tags.userDefinedTags)) {
-      _tags = _.concat(_tags, tags.userDefinedTags.map(tag => ({ value: tag.tagValue, type: 'normal' })))
+      _tags = _.concat(_tags, tags.userDefinedTags.map(tag => ({ value: tag.tagValue, color: tag.knowledgeBase ? tag.knowledgeBase.color : entityDefaultColor })))
     }
     this.myData.tags = _tags
 

src/views/entityExplorer/entityList/Row.vue

@@ -13,7 +13,11 @@
         <div class="cn-entity__header" style="display: flex;">
           <span class="cn-entity__header-title">{{ entityData.entityValue || 'Unknown' }}</span>
           <span class="entity-detail" style="display: flex;margin-left: 6px;margin-top: 1px;flex-wrap: wrap;margin-bottom: -10px;">
-            <span v-for="(item, index) in levelTwoTags" :key="index" class="entity-tag entity-tag--small margin-r-10 margin-b-10" :class="`entity-tag--level-two-${item.type}`">
+            <span v-for="(item, index) in levelTwoTags"
+                  :key="index"
+                  class="entity-tag entity-tag--small margin-r-10 margin-b-10"
+                  :class="`entity-tag--level-two-${item.type}`"
+                  :style="getTagColor(item.color)">
               {{ item.value }}
             </span>
           </span>
@@ -183,8 +187,9 @@ import relatedServer from '@/mixins/relatedServer'
 import Loading from '@/components/common/Loading'
 import axios from 'axios'
 import { api } from '@/utils/api'
-import { entityDetailTags, psiphon3IpType } from '@/utils/constants'
+import { entityDefaultColor, entityDetailTags, psiphon3IpType } from '@/utils/constants'
 import _ from 'lodash'
+import { getTagColor } from '@/utils/tools'
 
 export default {
   name: 'Row',
@@ -240,6 +245,7 @@ export default {
     })
   },
   methods: {
+    getTagColor,
     initData () {
       let url = ''
       switch (this.entity.entityType) {
@@ -292,7 +298,7 @@ export default {
             }
           })
           if (_.isArray(res.data.userDefinedTags)) {
-            this.levelTwoTags = _.concat(this.levelTwoTags, res.data.userDefinedTags.map(tag => ({ value: tag.tagValue, type: 'normal' })))
+            this.levelTwoTags = _.concat(this.levelTwoTags, res.data.userDefinedTags.map(tag => ({ value: tag.tagValue, color: tag.knowledgeBase ? tag.knowledgeBase.color : entityDefaultColor })))
           }
           this.hideTagArea = _.isEmpty(this.levelTwoTags)
         }