CN-64 fix: entity左侧筛选框全为单选

src/components/entities/LeftFilter.vue

@@ -11,17 +11,17 @@
         >
           <el-tree
               :data="f.data"
-              :load="(node, resolve) => f.loadFilter(node, resolve, f.filterType, f.childrenKey, f.key)"
+              :load="(node, resolve) => loadFilter(node, resolve, f)"
               :node-key="f.key"
               :props="{ isLeaf: 'leaf' }"
               :expand-on-click-node="false"
               :lazy="i === 0"
               highlight-current
-              @node-click="nodeClick"
+              @node-click="(data, node, component) => nodeClick(data, node, component, i)"
           >
             <template #default="{ node, data }">
               <div class="filter-item">
-                <span>{{node.level === 1 ? data[f.key] : ''}}{{node.level === 2 ? data[f.childrenKey] : ''}}</span>
+                <div :title="node.level === 1 ? data[f.key] : (node.level === 2 ? data[f.childrenKey] : '')">{{node.level === 1 ? data[f.key] : (node.level === 2 ? data[f.childrenKey] : '')}}</div>
                 <span>{{data.count}}</span>
               </div>
             </template>
@@ -45,18 +45,26 @@ export default {
     }
   },
   methods: {
-    nodeClick (data, node) {
-      this.$emit('select', node, data)
+    nodeClick (data, node, component, index) {
+      // if ((data.country && !data.region) || ())
+      this.$emit('select', data, node, index)
     },
     showMore (key, hasnotMore) {
       if (!hasnotMore) {
         this.$emit('showMore', key)
       }
+    },
+    loadFilter (node, resolve, f) {
+      this.$emit('loadFilter', node, resolve, f.filterType, f.childrenKey, f.key)
     }
   },
   watch: {
-    filterData (n) {
-      this.active = ['0', '1']
+    filterData: {
+      deep: true,
+      immediate: true,
+      handler (n) {
+        this.active = ['0', '1']
+      }
     }
   }
 }
@@ -106,6 +114,12 @@ export default {
           justify-content: space-between;
           padding-right: 6px;
           width: 100%;
+
+          div {
+            max-width: 140px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
         }
         .filter__more {
           padding-left: 24px;

src/views/charts/Chart.vue

@@ -231,7 +231,7 @@ export default {
       } else if (this.isEcharts) {
         const dom = document.getElementById(`chart${this.chartInfo.id}`)
         !this.myChart && (this.myChart = echarts.init(dom))
-        this.chartOption = JSON.parse(JSON.stringify(getOption(this.chart.type)))
+        this.chartOption = this.$_.cloneDeep(getOption(this.chart.type))
         if (chartParams) {
           if (this.isEchartsWithTable) {
             this.initEchartsWithPieTable(chartParams)

src/views/entities/EntityExplorer.vue

@@ -23,6 +23,7 @@
           :filter-data="filterData"
           @select="select"
           @showMore="showMore"
+          @loadFilter="loadFilter"
       ></left-filter>
       <!-- 内容区域 -->
       <entity-list
@@ -130,14 +131,15 @@ export default {
     },
     handleData (n) {
       this.listData = []
+      this.filterData = []
       const requests = []
       const data = []
       switch (n) {
         case 'ip': {
           requests.push(this.loadFilterData(n, 'country'))
           requests.push(this.loadFilterData(n, 'asn'))
-          data.push({ title: this.$t('entities.countryOrRegion'), key: 'country', childrenKey: 'region', type: 'country', childrenType: 'region', loadFilter })
-          data.push({ title: this.$t('entities.asn'), key: 'asn', type: 'asn', loadFilter })
+          data.push({ filterType: n, title: this.$t('entities.countryOrRegion'), key: 'country', childrenKey: 'region', type: 'country', childrenType: 'region' })
+          data.push({ filterType: n, title: this.$t('entities.asn'), key: 'asn', type: 'asn' })
           getEntityIpList({ ...this.pageObjRight }).then(res => {
             this.listData = res.data.result
             this.pageObjRight = { ...this.pageObjRight, total: res.statistics.result_size }
@@ -147,8 +149,8 @@ export default {
         case 'domain': {
           requests.push(this.loadFilterData(n, 'categoryGroup'))
           requests.push(this.loadFilterData(n, 'reputationLevel'))
-          data.push({ title: this.$t('entities.groupAndName'), key: 'categoryGroup', childrenKey: 'categoryName', loadFilter })
-          data.push({ title: this.$t('entities.creditLevel'), key: 'reputationLevel', loadFilter })
+          data.push({ filterType: n, title: this.$t('entities.groupAndName'), key: 'categoryGroup', childrenKey: 'categoryName' })
+          data.push({ filterType: n, title: this.$t('entities.creditLevel'), key: 'reputationLevel' })
           getEntityDomainList({ ...this.pageObjRight }).then(res => {
             this.listData = res.data.result
             this.pageObjRight = { ...this.pageObjRight, total: res.statistics.result_size }
@@ -158,8 +160,8 @@ export default {
         case 'app': {
           requests.push(this.loadFilterData(n, 'appCategory'))
           requests.push(this.loadFilterData(n, 'appRisk'))
-          data.push({ title: this.$t('entities.categoryAndSub'), key: 'appCategory', childrenKey: 'appSubcategory', loadFilter })
-          data.push({ title: this.$t('entities.riskLevel'), key: 'appRisk', loadFilter })
+          data.push({ filterType: n, title: this.$t('entities.categoryAndSub'), key: 'appCategory', childrenKey: 'appSubcategory' })
+          data.push({ filterType: n, title: this.$t('entities.riskLevel'), key: 'appRisk' })
           getEntityAppList({ ...this.pageObjRight }).then(res => {
             this.listData = res.data.result
             this.pageObjRight = { ...this.pageObjRight, total: res.statistics.result_size }
@@ -176,8 +178,9 @@ export default {
         this.filterData = data
       })
     },
-    async select (node, data) {
-      const res = await loadList(node, data, this.filterType, this.pageObjRight)
+    async select (data, node, index) {
+      this.pageObjRight = { ...this.pageObjRight, ...data }
+      const res = await loadList(node, this.filterType, this.pageObjRight)
       this.listData = res.data.result
     },
     getEntityData (param) {
@@ -190,6 +193,38 @@ export default {
     pageNoRight (val) {
       this.pageObjRight.pageNo = val
       this.handleData(this.filterType)
+    },
+    loadFilter (node, resolve, filterType, key, parentKey) {
+      if (node.level === 0) {
+        resolve(node.data)
+      } else {
+        const param = { type: key }
+        param[parentKey] = (node.data)[parentKey]
+        let req = null
+        switch (filterType) {
+          case 'ip': {
+            req = getEntityIpFilterList(param)
+            break
+          }
+          case 'domain': {
+            req = getEntityDomainFilterList(param)
+            break
+          }
+          case 'app': {
+            req = getEntityAppFilterList(param)
+            break
+          }
+          default: break
+        }
+        if (req !== null) {
+          req.then(res => {
+            res = res.map(r => {
+              return { ...r, leaf: true }
+            })
+            resolve(res)
+          })
+        }
+      }
     }
   },
   watch: {
@@ -221,16 +256,14 @@ export default {
       childrenKey: 'region',
       data: country,
       hasnotMore: this.$_.isEmpty(country) || country.length < 10,
-      filterType: this.filterType,
-      loadFilter
+      filterType: this.filterType
     })
     this.filterData.push({
       title: this.$t('entities.asn'),
       key: 'asn',
       data: asn,
       hasnotMore: this.$_.isEmpty(asn) || asn.length < 10,
-      filterType: this.filterType,
-      loadFilter
+      filterType: this.filterType
     })
   },
   setup () {
@@ -241,41 +274,9 @@ export default {
     }
   }
 }
-const loadFilter = (node, resolve, filterType, key, parentKey) => {
-  if (node.level === 0) {
-    resolve(node.data)
-  } else {
-    const param = { type: key }
-    param[parentKey] = (node.data)[parentKey]
-    let req = null
-    switch (filterType) {
-      case 'ip': {
-        req = getEntityIpFilterList(param)
-        break
-      }
-      case 'domain': {
-        req = getEntityDomainFilterList(param)
-        break
-      }
-      case 'app': {
-        req = getEntityAppFilterList(param)
-        break
-      }
-      default: break
-    }
-    if (req !== null) {
-      req.then(res => {
-        res = res.map(r => {
-          return { ...r, leaf: true }
-        })
-        resolve(res)
-      })
-    }
-  }
-}
-const loadList = async (node, data, filterType, pageObj) => {
+const loadList = async (node, filterType, pageObj) => {
   let res
-  const param = { ...pageObj, ...data }
+  const param = { ...pageObj }
   switch (filterType) {
     case 'ip': {
       res = await getEntityIpList(param)