CN-1273 自定义library增加tag颜色选择功能

2023-10-09 11:55:19 +08:00
parent 6f72b2258f
commit 16e63ab905
6 changed files with 121 additions and 16 deletions
--- a/src/assets/css/components/views/setting/knowledgeBase.scss
+++ b/src/assets/css/components/views/setting/knowledgeBase.scss
@@ -1156,7 +1156,6 @@ height: 100%;
  .el-form {
    margin-top: 20px;
    width: 620px;
-
    label {
      padding-bottom: 6px;
      font-size: 14px;
@@ -1191,6 +1190,7 @@ height: 100%;

        .el-input__inner {
          background-color: white !important;
+          padding-left: 22px !important;
        }
      }
    }
@@ -1872,3 +1872,24 @@ height:300px !important;
    }
  }
 }
+.knowledge-color {
+  display:flex;
+  flex-direction: row;
+  align-items: center;
+  .knowledge-color__icon {
+    width: 10px;
+    height: 10px;
+    border-radius: 2px;
+    margin-right:6px;
+    margin-left:2px;
+  }
+}
+.info {
+  background-color:rgb(119,131,145)
+}
+.benign {
+  background-color:rgb(116,159,77)
+}
+.malicious {
+  background-color:rgb(226,97,84)
+}
--- a/src/components/layout/Header.vue
+++ b/src/components/layout/Header.vue
@@ -392,7 +392,7 @@ export default {
        this.dnsRcodeMapData = await getDnsMapData('dnsRcode')
      }
    }
-    let path = this.$route.path;
+    const path = this.$route.path
    if (path.indexOf('panel') > -1 && path.indexOf('linkMonitor') === -1) {
      await this.initDropdownList()
    }
--- a/src/components/table/setting/KnowledgeBaseTableForRow.vue
+++ b/src/components/table/setting/KnowledgeBaseTableForRow.vue
@@ -104,6 +104,11 @@
            >
            </el-switch>
          </template>
+          <template v-else-if="item.prop === 'color'">
+            <div class="knowledge-color">
+              <span class="knowledge-color__icon" :class="colorName(scope.row[item.prop])"></span> <span>{{colorText(scope.row[item.prop])}}</span>
+            </div>
+          </template>
          <span v-else>{{scope.row[item.prop] || '-'}}</span>
        </template>
      </el-table-column>
@@ -117,7 +122,7 @@

 <script>
 import table from '@/mixins/table'
-import { knowledgeBaseCategory, knowledgeBaseSource } from '@/utils/constants'
+import { knowledgeBaseCategory, knowledgeBaseSource, knowledgeBaseColor } from '@/utils/constants'
 export default {
  name: 'KnowledgeBaseTableForRow',
  props: {
@@ -153,6 +158,11 @@ export default {
          prop: 'reference',
          width: 180,
          show: true
+        }, {
+          label: this.$t('overall.color'),
+          prop: 'color',
+          width: 180,
+          show: true
        }, {
          label: this.$t('overall.remark'),
          prop: 'description',
@@ -189,7 +199,8 @@ export default {
          show: true,
          width: 80
        }
-      ]
+      ],
+      knowledgeBaseColor
    }
  },
  watch: {
@@ -221,6 +232,18 @@ export default {
        const t = knowledgeBaseSource.find(t => t.value === type)
        return t ? t.name : ''
      }
+    },
+    colorText () {
+      return function (color) {
+        const t = knowledgeBaseColor.find(t => t.value === color)
+        return t ? t.label : knowledgeBaseColor[0].label
+      }
+    },
+    colorName () {
+      return function (color) {
+        const t = knowledgeBaseColor.find(t => t.value === color)
+        return t ? t.name : knowledgeBaseColor[0].name
+      }
    }
  }
 }
--- a/src/utils/constants.js
+++ b/src/utils/constants.js
@@ -338,6 +338,25 @@ export const knowledgeBaseType = [
  }
 ]

+export const knowledgeBaseColor = [
+  {
+    label: 'Info',
+    value: 'rgb(119,131,145)',
+    name: 'info'
+  },
+  {
+    label: 'Benign',
+    value: 'rgb(116,159,77)',
+    name: 'benign'
+  },
+  {
+    label: 'Malicious',
+    value: 'rgb(226,97,84)',
+    name: 'malicious'
+  }
+
+]
+
 export const knowledgeBaseCategory = [
  {
    name: 'WebSketch',
@@ -1000,7 +1019,7 @@ export const networkAppPerformanceTabList = [
    label: 'network.countries',
    prop: 'countryRegion',
    queryCycleTotalProp: 'countries',
-    dillDownProp: ['client_country_region','server_country_region'],
+    dillDownProp: ['client_country_region', 'server_country_region'],
    lineQueryCondition: ['country_region = \'$param\''], // 曲线图：查询条件q
    checked: true,
    disabled: false,
@@ -1009,7 +1028,7 @@ export const networkAppPerformanceTabList = [
    label: 'network.asns',
    prop: 'asn',
    queryCycleTotalProp: 'asns',
-    dillDownProp: ['client_asn','server_asn'],
+    dillDownProp: ['client_asn', 'server_asn'],
    lineQueryCondition: ['asn = \'$param\''],
    checked: true,
    disabled: false,
@@ -1063,7 +1082,7 @@ export const networkAppPerformanceTabList = [
    label: 'network.regions',
    prop: 'superAdminArea',
    queryCycleTotalProp: 'regions',
-    dillDownProp: ['client_super_admin_area','server_super_admin_area'],
+    dillDownProp: ['client_super_admin_area', 'server_super_admin_area'],
    lineQueryCondition: ['super_admin_area = \'$param\''],
    checked: false,
    disabled: false,
@@ -1072,7 +1091,7 @@ export const networkAppPerformanceTabList = [
    label: 'network.cities',
    prop: 'adminArea',
    queryCycleTotalProp: 'cities',
-    dillDownProp: ['client_admin_area','server_admin_area'],
+    dillDownProp: ['client_admin_area', 'server_admin_area'],
    lineQueryCondition: ['admin_area = \'$param\''],
    checked: false,
    disabled: false,
@@ -1081,7 +1100,7 @@ export const networkAppPerformanceTabList = [
    label: 'network.isps',
    prop: 'isp',
    queryCycleTotalProp: 'isps',
-    dillDownProp: ['client_isp','server_isp'],
+    dillDownProp: ['client_isp', 'server_isp'],
    lineQueryCondition: ['isp = \'$param\''],
    checked: false,
    disabled: false,
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue
+++ b/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue
@@ -471,9 +471,9 @@ export default {
      let checkedGroup = this.customTableTitles.filter(item => item.checked)
      let checkedNum = checkedGroup.length
      if (columnType === 'dillDown') {
-        if(checkedNum === 1){
+        if (checkedNum === 1) {
          return 'auto'
-        }else if(checkedNum > 1){
+        } else if (checkedNum > 1) {
          return '217px'
        }
      }
@@ -501,7 +501,7 @@ export default {
        name: this.dropDownValue ? this.dropDownValue : ''
      }
      let url = curTableInCode.url.drilldownList
-      if(this.isDrilldown() || this.tableType === fromRoute.linkMonitor){
+      if (this.isDrilldown() || this.tableType === fromRoute.linkMonitor) {
        url = curTableInCode.url.relationTabDrilldownList
        const condition = this.getQueryCondition()
        if (condition) {
@@ -601,8 +601,8 @@ export default {
      this.curPageNum = 1
      this.initDropdownList(prop)
    },
-    scrollList (prop,tabProp) {
-      const obj = document.getElementById('tabSearchSelectDropdown'+tabProp)
+    scrollList (prop, tabProp) {
+      const obj = document.getElementById('tabSearchSelectDropdown' + tabProp)
      if ((obj.scrollTop + obj.clientHeight === obj.scrollHeight) && obj.scrollHeight !== 0) {
        this.initDropdownList(prop)
      }
--- a/src/views/setting/KnowledgeBaseForm.vue
+++ b/src/views/setting/KnowledgeBaseForm.vue
@@ -31,6 +31,28 @@
                </template>
              </el-select>
            </el-form-item>
+            <el-form-item :label="$t('overall.color')" prop="color">
+              <el-select v-model="editObject.colorLabel"
+                         class="form-select__enable"
+                         placeholder=" "
+                         popper-class="form-select-popper"
+                         size="mini"
+                         @change="changeColor"
+              >
+                <template #prefix>
+                  <div class="knowledge-color">
+                    <span class="knowledge-color__icon info" :class="editObject.colorName"></span>
+                  </div>
+                </template>
+                <template v-for="color in knowledgeBaseColor" :key="color.name">
+                  <el-option  :value="color.label" >
+                    <div class="knowledge-color">
+                      <span class="knowledge-color__icon" :class="color.name"></span> <span>{{color.label}}</span>
+                    </div>
+                  </el-option>
+                </template>
+              </el-select>
+            </el-form-item>
            <el-form-item :label="$t('overall.remark')" prop="description">
              <el-input maxlength="255" show-word-limit :rows="4" size='mini' type="textarea" resize='none'
                        v-model="editObject.description" id="role-box-input-remark"/>
@@ -214,7 +236,7 @@
 import { useRoute } from 'vue-router'
 import { nextTick, reactive, ref } from 'vue'
 import _ from 'lodash'
-import { knowledgeBaseType, storageKey, unitTypes, knowledgeSourceValue, itemListHeight, knowledgeCategoryValue } from '@/utils/constants'
+import { knowledgeBaseType, storageKey, unitTypes, knowledgeSourceValue, itemListHeight, knowledgeCategoryValue, knowledgeBaseColor } from '@/utils/constants'
 import Pagination from '@/components/common/Pagination'
 import ChartNoData from '@/views/charts/charts/ChartNoData'
 import axios from 'axios'
@@ -497,6 +519,11 @@ export default {
    }
  },
  methods: {
+    changeColor (label) {
+      const curColorObj = knowledgeBaseColor.find(item => item.label === this.editObject.colorLabel)
+      this.editObject.color = curColorObj.value
+      this.editObject.colorName = curColorObj.name
+    },
    tagNameBlur () {
      if (!this.tagNameFirstBlur) {
        this.$refs.form.validate(valid => {
@@ -832,6 +859,7 @@ export default {
                    const postData = {
                      name: this.editObject.name,
                      category: knowledgeCategoryValue.userDefined,
+                      color: this.editObject.color,
                      source: this.editObject.source,
                      description: this.editObject.description,
                      status: this.editObject.status,
@@ -1187,6 +1215,16 @@ export default {
            throw new Error('No data found, id: ' + this.knowledgeBaseId)
          }
          this.editObject = response.data.data
+          if (response.data.data.color) {
+            const curColorObj = knowledgeBaseColor.find(item => item.value === response.data.data.color)
+            this.editObject.color = curColorObj.value
+            this.editObject.colorName = curColorObj.name
+            this.editObject.colorLabel = curColorObj.label
+          } else {
+            this.editObject.color = knowledgeBaseColor[0].value
+            this.editObject.colorName = knowledgeBaseColor[0].name
+            this.editObject.colorLabel = knowledgeBaseColor[0].label
+          }
          this.importedData = this.handleSpeticalTypeData(this.editObject.itemList)
          this.importedData.forEach(item => {
            this.oldItemIds.push(item.id)
@@ -1283,7 +1321,10 @@ export default {
      source: 'cn_ip_tag_user_defined',
      description: '',
      updateTime: '',
-      status: 1
+      status: 1,
+      color: knowledgeBaseColor[0].value,
+      colorLabel: knowledgeBaseColor[0].label,
+      colorName: knowledgeBaseColor[0].name
    }
    /* 将组织后的数据还原拉平 */
    const revertImportedData = (data) => {
@@ -1366,6 +1407,7 @@ export default {
      stepHeightConstant,
      stepHeights,
      knowledgeBaseType,
+      knowledgeBaseColor,
      importedData,
      showImportedData,
      addItemList,