From 7d64868ce0c362b9b9e4908fae880f99718b2fd5 Mon Sep 17 00:00:00 2001
From: hanyuxia <hanyuxia@geedgenetworks.com>
Date: Fri, 17 Nov 2023 13:54:21 +0800
Subject: [PATCH] =?UTF-8?q?fix:1=20CN-1470=20=E8=B0=83=E6=95=B4=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E/=E4=BF=AE=E6=94=B9role=E9=A1=B5=E9=9D=A2=E6=9D=83?=
 =?UTF-8?q?=E9=99=90=E6=A0=91=E7=9A=84=E9=80=BB=E8=BE=91;2.=E6=A3=80?=
 =?UTF-8?q?=E6=9F=A5=E6=A8=A1=E5=9D=97=E4=B8=8B=E7=9A=84=E4=BA=8B=E4=BB=B6?=
 =?UTF-8?q?=E7=B1=BB=E5=9E=8B=E9=A5=BC=E5=9B=BElegend=E5=AE=BD=E5=BA=A6?=
 =?UTF-8?q?=E9=9A=8F=E5=88=86=E8=BE=A8=E7=8E=87=E8=80=8C=E6=94=B9=E5=8F=98?=
 =?UTF-8?q?=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/setting/knowledgeBase.scss          |  12 +
 src/components/layout/Header.vue              |  16 +-
 src/components/rightBox/settings/RoleBox.vue  |  39 +-
 .../setting/knowledgeBaseTableForCard.vue     | 117 ++--
 src/views/charts/charts/tools.js              |   4 +-
 .../networkOverview/NetworkOverviewApps.vue   |   8 +-
 .../NetworkOverviewDdosDetection.vue          |   4 +-
 src/views/detections/Index.vue                |  46 +-
 .../detections/options/detectionOptions.js    |   4 +-
 src/views/setting/KnowledgeBase.vue           | 526 +++++++++---------
 10 files changed, 426 insertions(+), 350 deletions(-)

diff --git a/src/assets/css/components/views/setting/knowledgeBase.scss b/src/assets/css/components/views/setting/knowledgeBase.scss
index 7495e195..f3af03a8 100644
--- a/src/assets/css/components/views/setting/knowledgeBase.scss
+++ b/src/assets/css/components/views/setting/knowledgeBase.scss
@@ -1798,6 +1798,12 @@
           margin-right:5px;
         }
       }
+      .top-tool-btn--update:disabled {
+        cursor: not-allowed;
+        opacity: 0.66;
+        i {
+        }
+      }
       .top-tool-btn--update:hover {
         background-color: #57B8D9 !important;
         border-color: #2E88A6 !important;
@@ -1846,6 +1852,12 @@
           margin-right:5px;
         }
       }
+      .top-tool-btn--update:disabled {
+        cursor: not-allowed;
+        opacity: 0.66;
+        i {
+        }
+      }
       .top-tool-btn--update:hover {
         background-color: #57B8D9 !important;
         border-color: #2E88A6 !important;
diff --git a/src/components/layout/Header.vue b/src/components/layout/Header.vue
index 321d9527..c02e281f 100644
--- a/src/components/layout/Header.vue
+++ b/src/components/layout/Header.vue
@@ -333,14 +333,14 @@ export default {
     breadcrumb () {
       const breadcrumb = []
       this.generateBreadcrumb(breadcrumb, this.$store.getters.menuList)
-      if(breadcrumb){
+      if (breadcrumb) {
         // panel菜单是否可以点击跳转：一级菜单不可点击，二级菜单可以点击
-        if(breadcrumb[0] && breadcrumb[1] && breadcrumb[1].route
-                              && breadcrumb[1].route.indexOf('/panel/') === 0){
+        if (breadcrumb[0] && breadcrumb[1] && breadcrumb[1].route &&
+                              breadcrumb[1].route.indexOf('/panel/') === 0) {
           breadcrumb[1].clickable = true
-        }else {// 除panel外的菜单是否可以点击跳转:除了新增、编辑，其它均可点击
+        } else { // 除panel外的菜单是否可以点击跳转:除了新增、编辑，其它均可点击
           breadcrumb.forEach(item => {
-            if(item.value !== 'Create' && item.value !== 'Edit'){
+            if (item.value !== 'Create' && item.value !== 'Edit') {
               item.clickable = true
             }
           })
@@ -676,11 +676,11 @@ export default {
         }
       }
     },
-    //仅处理除panel外的相关路径的导航
+    // 仅处理除panel外的相关路径的导航
     async jumpOther (route, index) {
       route = route.replace('redirect:', '')
       this.showMenu = false
-      if (route === this.route && index > 0) {//当前只有一级菜单时，点击不进行刷新，重新跳转
+      if (route === this.route && index > 0) { // 当前只有一级菜单时，点击不进行刷新，重新跳转
         this.refresh()
         return
       }
@@ -693,7 +693,7 @@ export default {
         })
       }
     },
-    //仅处理panel相关路径的导航
+    // 仅处理panel相关路径的导航
     async jump (route, columnName, columnValue, opeType) {
       route = route.replace('redirect:', '')
       if (route === '/panel/linkMonitor' && opeType === 3) {
diff --git a/src/components/rightBox/settings/RoleBox.vue b/src/components/rightBox/settings/RoleBox.vue
index 00950e88..1279cc0e 100644
--- a/src/components/rightBox/settings/RoleBox.vue
+++ b/src/components/rightBox/settings/RoleBox.vue
@@ -23,7 +23,8 @@
               <button type="button" class="cn-btn cn-btn-size-small-new cn-btn-style-light-new option-btn" style="margin-left: 0px;" @click="expandAllOrNone" :class="{'btn-active':expandAllFlag}">展开/收缩</button>
               <button type="button" class="cn-btn cn-btn-size-small-new cn-btn-style-light-new option-btn" @click="selectAllOrNone" :class="{'btn-active':selectAllFlag}"><span ><i class="cn-icon cn-icon-delete"></i></span></button>
             </div>-->
-            <el-tree :data="menus" :default-expand-all="expandAllFlag" :props="{label:labelFormatter}"  @check-change="selectChange" class="tree-border" node-key="id" ref="menuTree" show-checkbox id="role-box-input-menus">
+            <el-checkbox v-model="isCheckAll" :label="$t('overall.all')" @change="checkAll"></el-checkbox>
+            <el-tree :data="menus" :default-expand-all="expandAllFlag" check-strictly="true" :props="{label:labelFormatter}"  @check-change="selectChange" class="tree-border" node-key="id" ref="menuTree" show-checkbox id="role-box-input-menus">
               <template #default="{ data }">
               <span>
                 <i v-if="data.type === '1'" class="el-icon-menu"></i>
@@ -90,7 +91,8 @@ export default {
       menus: [],
       selectedIds: [],
       selectAllFlag: false,
-      expandAllFlag: true
+      expandAllFlag: true,
+      isCheckAll: false
     }
   },
   watch: {
@@ -150,9 +152,40 @@ export default {
     labelFormatter: function (data, node) {
       return data && data.i18n ? this.$t(data.i18n) : data.name
     },
+    getChildNodes (menu) {
+      let nodeGroup = []
+      if (menu.children && menu.children.length > 0) {
+        nodeGroup = menu.children
+        const _this = this
+        menu.children.forEach(node => {
+          const childNodes = _this.getChildNodes(node)
+          if (childNodes && childNodes.length > 0) {
+            nodeGroup = nodeGroup.concat(childNodes)
+          }
+        })
+      }
+      return nodeGroup
+    },
+    checkAll () {
+      if (this.$refs.menuTree) {
+        if (this.isCheckAll) {
+          let nodeGroup = this.menus
+          const _this = this
+          this.menus.forEach(menu => {
+            const childNodes = _this.getChildNodes(menu)
+            if (childNodes && childNodes.length > 0) {
+              nodeGroup = nodeGroup.concat(childNodes)
+            }
+          })
+          this.$refs.menuTree.setCheckedNodes(nodeGroup)
+        } else {
+          this.$refs.menuTree.setCheckedNodes([])
+        }
+      }
+    },
     selectChange: function (data, isCheck, childIsCheck) {
       if (this.$refs.menuTree) {
-        this.editRole.menuIds = this.$refs.menuTree.getCheckedKeys(true)
+        this.editRole.menuIds = this.$refs.menuTree.getCheckedKeys(false)
       }
     },
     selectAllOrNone: function () {
diff --git a/src/components/table/setting/knowledgeBaseTableForCard.vue b/src/components/table/setting/knowledgeBaseTableForCard.vue
index 324207f4..fcd26265 100644
--- a/src/components/table/setting/knowledgeBaseTableForCard.vue
+++ b/src/components/table/setting/knowledgeBaseTableForCard.vue
@@ -49,7 +49,7 @@
           <div class="card-desc" :title="data.desc ? data.desc:'—'">{{data.desc ? data.desc : '—'}}</div>
         </div>
         <div class="card-operate__footer">
-          <button v-if="data.showUpdate" :title="$t('overall.update')" class="top-tool-btn--update"
+          <button v-if="data.showUpdate && hasPermission('editBuiltInKnowledgeBase')" :title="$t('overall.update')" class="top-tool-btn--update"
                   @click="jumpToUpdatePage(data,false)">
             <i class="cn-icon-update-knowledge-base cn-icon"></i>
             <span>{{$t('overall.update')}}</span>
@@ -111,7 +111,7 @@
           </el-tabs>
           <div class="update-operate">
             <button :title="$t('overall.update')" class="top-tool-btn--update"
-                    @click="uploadRecord">
+                    @click="uploadRecord"><!--:disabled="hasUpdatingRecord"-->
               <i class="cn-icon-update-knowledge-base cn-icon"></i>
               <span>{{$t('overall.update')}}</span>
             </button>
@@ -123,7 +123,7 @@
           </div>
           <div class="update-operate">
             <button :title="$t('overall.update')" class="top-tool-btn--update"
-                    @click="uploadRecord">
+                    @click="uploadRecord"><!--   :disabled="hasUpdatingRecord" -->
               <i class="cn-icon-update-knowledge-base cn-icon"></i>
               <span>{{$t('overall.update')}}</span>
             </button>
@@ -295,7 +295,7 @@
 import table from '@/mixins/table'
 import Loading from '@/components/common/Loading'
 import { getSecond, getMillisecond, xAxisTimeFormatter, xAxisTimeRich } from '@/utils/date-util'
-import { knowledgeCategoryValue, unitTypes, storageKey, builtInKnowledgeBaseBasicInfo } from '@/utils/constants'
+import { knowledgeCategoryValue, unitTypes, storageKey, builtInKnowledgeBaseBasicInfo, knowledgeCardUpdateRecordType } from '@/utils/constants'
 import { ref, shallowRef } from 'vue'
 import { api } from '@/utils/api'
 import { detectionTooltipFormatter } from '@/views/charts/charts/tools'
@@ -339,6 +339,7 @@ export default {
       psiphon3Loading: false,
       updateLogLoading: false,
       showConfirmSwitch: false,
+      // timer: null,
       switchKnowledgeId: '',
       activeTab: 'updateRecord',
       isNoDataForPsiphon3: false,
@@ -348,6 +349,7 @@ export default {
       tabType: 'total',
       mousemoveCursor: '',
       selectTime: 1440,
+      // hasUpdatingRecord: false,
       tabs: [
         {
           name: 'knowledgeBase.total',
@@ -380,12 +382,6 @@ export default {
   setup () {
     // 没上传过文件的提示
     const uploadErrorTip = ref('')
-    const nowMill = window.$dayJs.tz().valueOf()
-    const timeFilter = ref({
-      startTime: nowMill - 1000 * 60 * 60 * 24,
-      endTime: nowMill,
-      dateRangeValue: 1440
-    })
     return {
       baseUrl: BASE_CONFIG.baseUrl,
       apiVersion: BASE_CONFIG.apiVersion,
@@ -397,8 +393,7 @@ export default {
       fileList: ref([]),
       uploadFileSizeLimit: 1024 * 1024 * 1024,
       myChart: shallowRef(null),
-      chartOption: shallowRef(null),
-      timeFilter
+      chartOption: shallowRef(null)
     }
   },
   methods: {
@@ -470,9 +465,10 @@ export default {
     },
     init (val, show, active, n) {
       this.psiphon3Loading = true
+      const endTime = window.$dayJs.tz().valueOf()
       const params = {
-        startTime: getSecond(this.timeFilter.startTime),
-        endTime: getSecond(this.timeFilter.endTime)
+        startTime: getSecond(endTime - this.selectTime * 60 * 1000),
+        endTime: getSecond(endTime)
       }
       const url = api.knowledgeBaseTimedistribution.replace('{{knowledgeId}}', this.updateKnowledge.knowledgeId).replace('{{type}}', this.tabType)
       axios.get(url, { params: params }).then(response => {
@@ -485,7 +481,9 @@ export default {
             const chartsData = res.data.result.map(item => {
               return [getMillisecond(item.statTime), item.count]
             })
-            this.echartsInit(chartsData)
+            if (this.activeTab === knowledgeCardUpdateRecordType.intelligenceLearning) {
+              this.echartsInit(chartsData)
+            }
           }
         } else {
           this.httpError(res)
@@ -533,14 +531,14 @@ export default {
       })
     },
     timeChange () {
-      this.timeFilter.endTime = window.$dayJs.tz().valueOf()
-      this.timeFilter.startTime = this.timeFilter.endTime - this.selectTime * 60 * 1000
       if (this.updateKnowledge.source === 'cn_psiphon3_ip') {
         this.init()
       }
-      this.$nextTick(() => {
-        this.handleActiveBar()
-      })
+      if (this.activeTab === knowledgeCardUpdateRecordType.intelligenceLearning) {
+        this.$nextTick(() => {
+          this.handleActiveBar()
+        })
+      }
     },
     activeChange (item) { // isClick:代表是通过点击操作来的
       if (item) {
@@ -554,9 +552,11 @@ export default {
     mouseenterTab (item) {
       if (this.isNoDataForPsiphon3) return
       this.mousemoveCursor = item.class
-      this.$nextTick(() => {
-        this.handleActiveBar()
-      })
+      if (this.activeTab === knowledgeCardUpdateRecordType.intelligenceLearning) {
+        this.$nextTick(() => {
+          this.handleActiveBar()
+        })
+      }
     },
     mouseleaveTab () {
       this.mousemoveCursor = ''
@@ -586,17 +586,9 @@ export default {
     uploadSuccess (response) {
       this.uploadLoading = false
       this.uploaded = true
-      /* this.uploaded = response.code === 200
-      if (response.code === 200) { */
       this.$message.success(this.$t('tip.success'))
       this.showAddUpdateDialog = false
       this.getCurTabData()
-      if (this.updateKnowledge.source === 'cn_psiphon3_ip') {
-        this.init()
-      }
-      /* } else {
-        this.$message.error(this.$t('tip.uploadFailed', { msg: response.message }))
-      } */
     },
     beforeUpload (file) {
       this.uploadLoading = true
@@ -604,18 +596,12 @@ export default {
     },
     submitConfirm () {
       this.showConfirmDialog = true
-      this.$nextTick(() => {
-        this.handleActiveBar()
-      })
     },
     submit () {
       this.$refs.knowledgeUpload.submit()
     },
-    cancle(){
+    cancle () {
       this.showAddUpdateDialog = false
-      this.$nextTick(() => {
-        this.handleActiveBar()
-      })
     },
     clickCard (data, event) {
       if (data.isSelected) { // 原来为选中，当前点击后未选中
@@ -667,9 +653,11 @@ export default {
         await this.init()
       }
       this.showUpdate()
-      this.$nextTick(() => {
-        this.handleActiveBar()
-      })
+      if (this.activeTab === knowledgeCardUpdateRecordType.intelligenceLearning) {
+        this.$nextTick(() => {
+          this.handleActiveBar()
+        })
+      }
     },
     uploadRecord () {
       this.showAddUpdateDialog = true
@@ -682,12 +670,12 @@ export default {
         pageSize: -1
       }
       if (this.showEnable) {
-        if (this.activeTab === 'updateRecord') {
+        if (this.activeTab === knowledgeCardUpdateRecordType.updateRecord) {
           params = {
             ...params,
             opUser: -1
           }
-        } else if (this.activeTab === 'intelligenceLearning') {
+        } else if (this.activeTab === knowledgeCardUpdateRecordType.intelligenceLearning) {
           params = {
             ...params,
             opUser: 0
@@ -701,6 +689,15 @@ export default {
         if (this.updateHistoryList[0]) {
           this.currentVersion = this.updateHistoryList[0].commitVersion + 1
         }
+        /*
+        this.hasUpdatingRecord = false
+        this.updateHistoryList.forEach(item => {
+          if (item.isUpdating) { // if(item.isUpdating){//????????
+            this.hasUpdatingRecord = true
+          }
+        })
+
+ */
       }).catch(e => {
         console.error(e)
       }).finally(() => {
@@ -711,10 +708,7 @@ export default {
     handleClick (tab) {
       this.getCurTabData()
       if (tab.index === '1') {
-        this.init()
-        this.$nextTick(() => {
-          this.handleActiveBar()
-        })
+        this.timeChange()
       }
     },
     clearSelect () {
@@ -754,7 +748,7 @@ export default {
       this.switchKnowledgeId = id
       return false
     },
-    cancleSwitch(){
+    cancleSwitch () {
       this.showConfirmSwitch = false
     },
     switchLearning () {
@@ -779,20 +773,19 @@ export default {
   },
   watch: {
     tabType (n) {
-      this.$nextTick(() => {
-        this.handleActiveBar()
-      })
+      this.timeChange()
     },
-    timeFilter: {
-      handler () {
-        if (this.updateKnowledge.source === 'cn_psiphon3_ip') {
-          this.init()
-        }
-        this.$nextTick(() => {
-          this.handleActiveBar()
-        })
+    /*
+    hasUpdatingRecord (n) {
+      if (n) { // update record页存在“正在更新”的记录时，每20秒自动请求一次接口
+        this.timer = setTimeout(() => {
+          this.getCurTabData()
+        }, 20000)
+      } else { // 直到出现新的记录,出现新记录后（失败或者成功）,取消定时请求接口，右上角"update"按钮恢复可用。"正在更新"和"失败”都会有对应的强调样式。
+        clearTimeout(this.timer)
       }
     },
+    */
     tableData: {
       handler (n) {
         if (this.tableData && this.tableData.length > 0) {
@@ -828,9 +821,7 @@ export default {
       handler (n) {
         if (!n) {
           this.fileList = []
-          if (this.updateKnowledge.source === 'cn_psiphon3_ip') {
-            this.init()
-          }
+          this.timeChange()
         } else {
           if (this.myChart) {
             this.myChart.dispose()
@@ -857,7 +848,7 @@ export default {
     })
   },
   beforeUnmount () {
-    clearTimeout(this.timer)
+    //clearTimeout(this.timer)
     window.removeEventListener('resize', this.resize)
     const dom = document.getElementById('psiphonBarChart')
     if (dom) {
diff --git a/src/views/charts/charts/tools.js b/src/views/charts/charts/tools.js
index 210cdd21..a6fd0210 100644
--- a/src/views/charts/charts/tools.js
+++ b/src/views/charts/charts/tools.js
@@ -338,10 +338,10 @@ export function axisFormatter (params) {
   return str
 }
 export function tooLongFormatter (name) {
-  return format.truncateText(name, 150, '12px')
+  return format.truncateText(name, 160, '12px')
 }
 export function tooLongFormatterFor2Columns (name) {
-  return format.truncateText(name, 83, '12px')
+  return format.truncateText(name, 100, '12px')
 }
 export function timeHorizontalFormatter (params) {
   let str = '<div>'
diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue
index 86824d32..32751bde 100644
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue
+++ b/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue
@@ -493,9 +493,9 @@ export default {
                 }
               })
             })
-            if (!show) {//非滚动滚动条操作，直接覆盖之前的数据
+            if (!show) { // 非滚动滚动条操作，直接覆盖之前的数据
               this.providerOptions = res.data.list
-            } else {//滚动条操作，则将新数据和之前的数据组合
+            } else { // 滚动条操作，则将新数据和之前的数据组合
               this.providerOptions.push(...res.data.list)
               this.appListData([], this.providerOptions)
             }
@@ -517,9 +517,9 @@ export default {
                 }
               })
             })
-            if (!show) {//非滚动滚动条操作，直接覆盖之前的数据
+            if (!show) { // 非滚动滚动条操作，直接覆盖之前的数据
               this.appOptions = res.data.list
-            } else {//滚动条操作，则将新数据和之前的数据组合
+            } else { // 滚动条操作，则将新数据和之前的数据组合
               this.appOptions.push(...res.data.list)
               this.appListData(this.appOptions, [])
             }
diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewDdosDetection.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewDdosDetection.vue
index ed72bac7..23b79968 100644
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewDdosDetection.vue
+++ b/src/views/charts2/charts/networkOverview/NetworkOverviewDdosDetection.vue
@@ -66,7 +66,7 @@ export default {
         startTime: this.timeFilter && this.timeFilter.startTime ? getSecond(this.timeFilter.startTime) : '',
         endTime: this.timeFilter && this.timeFilter.endTime ? getSecond(this.timeFilter.endTime) : ''
       }
-      /*this.toggleLoading(true)
+      /* this.toggleLoading(true)
       axios.get(api.netWorkOverview.ddosEventAnalysis, { params: params }).then(response => {
         const res = response.data
         if (response.status === 200) {
@@ -85,7 +85,7 @@ export default {
         this.errorMsg = this.errorMsgHandler(e)
       }).finally(() => {
         this.toggleLoading(false)
-      })*/
+      }) */
       this.toggleLoading(false)
     }
   },
diff --git a/src/views/detections/Index.vue b/src/views/detections/Index.vue
index 5da9fc3d..0c47b1bb 100644
--- a/src/views/detections/Index.vue
+++ b/src/views/detections/Index.vue
@@ -138,7 +138,8 @@ import { useRoute } from 'vue-router'
 import Loading from '@/components/common/Loading'
 import ChartTabs from '@/components/common/ChartTabs'
 import { useStore } from 'vuex'
-import { tooLongFormatterFor2Columns } from '@/views/charts/charts/tools'
+import { tooLongFormatter } from '@/views/charts/charts/tools'
+import { format } from 'echarts'
 
 export default {
   name: 'Index',
@@ -271,6 +272,7 @@ export default {
       loading: false,
       oldActiveEntitySearchValue: '',
       initFlag: true // 初始化标识，初始化时保证mounted执行
+      // detectionChart:null
     }
   },
   methods: {
@@ -442,7 +444,13 @@ export default {
             return { value: d.count, name: d.eventType }
           })
           if (data.length > 6) {
-            securityTypeOption.legend.formatter = tooLongFormatterFor2Columns
+            const dom = document.getElementById('eventSeverityPiesecurityEvent')
+            if (dom) {
+              const oneColumnWidth = (dom.clientWidth * 0.56) / 2 - 30
+              securityTypeOption.legend.formatter = function (name) {
+                return format.truncateText(name, oneColumnWidth, '12px')
+              }
+            }
           }
           detectionChart.setOption(securityTypeOption)
 
@@ -489,7 +497,13 @@ export default {
             return { value: d.count, name: d.eventType, itemStyle: { color: getAttackColor(d.eventType) } }
           })
           if (data.length > 6) {
-            securityTypeOption.legend.formatter = tooLongFormatterFor2Columns
+            const dom = document.getElementById('detectionCategoryPersecurityEvent')
+            if (dom) {
+              const oneColumnWidth = (dom.clientWidth * 0.56) / 2 - 30
+              securityTypeOption.legend.formatter = function (name) {
+                return format.truncateText(name, oneColumnWidth, '12px')
+              }
+            }
           }
           detectionChart.setOption(securityTypeOption)
 
@@ -828,6 +842,32 @@ export default {
     },
     resize () {
       this.chartInit.forEach(e => { e.value.resize() })
+      /*
+      //第二个饼图的resize
+      let dom = document.getElementById('detectionCategoryPersecurityEvent')
+      if(dom){
+        let securityTypeOption = this.detectionChart.getOption()
+
+        const chartDom = document.getElementById(`detectionCategoryPer${this.pageType}`)
+        this.detectionChart = echarts.getInstanceByDom(chartDom)
+        if (this.detectionChart) {
+          echarts.dispose(this.detectionChart)
+        }
+        this.detectionChart = echarts.init(chartDom)
+
+        let oneColumnWidth = (dom.clientWidth * 0.56)/2-30
+
+        if (this.statisticsCategoryData.length > 6) {
+          securityTypeOption.legend.formatter = function (name) {
+            return format.truncateText(name, oneColumnWidth, '12px')
+          }
+        }else {
+          securityTypeOption.legend.formatter = tooLongFormatter
+        }
+        this.detectionChart.setOption(securityTypeOption)
+        this.detectionChart.resize()
+      }
+*/
     },
     jumpNewDetetion () {
       this.$router.push({
diff --git a/src/views/detections/options/detectionOptions.js b/src/views/detections/options/detectionOptions.js
index 86368359..7ea6c447 100644
--- a/src/views/detections/options/detectionOptions.js
+++ b/src/views/detections/options/detectionOptions.js
@@ -187,7 +187,7 @@ export const pieForSeverity = {
   legend: {
     orient: 'vertical',
     type: 'plain',
-    left: '52%',
+    left: '44%',
     top: 'middle',
     icon: 'circle',
     itemWidth: 10, // 设置宽度
@@ -203,7 +203,7 @@ export const pieForSeverity = {
       type: 'pie',
       selectedMode: 'single',
       radius: ['43%', '65%'],
-      center: ['26%', '50%'],
+      center: ['22%', '50%'],
       data: [],
       label: {
         show: false
diff --git a/src/views/setting/KnowledgeBase.vue b/src/views/setting/KnowledgeBase.vue
index 4120f1e2..7ed6f391 100644
--- a/src/views/setting/KnowledgeBase.vue
+++ b/src/views/setting/KnowledgeBase.vue
@@ -69,164 +69,247 @@
   </el-dialog>
 </template>
 <script>
-  import dataListMixin from '@/mixins/data-list'
-  import KnowledgeBaseTableForCard from '@/components/table/setting/knowledgeBaseTableForCard'
-  import { api } from '@/utils/api'
-  import { urlParamsHandler, overwriteUrl } from '@/utils/tools'
-  import { knowledgeBaseCategory, knowledgeBaseSource, knowledgeCategoryValue } from '@/utils/constants'
-  import axios from 'axios'
+import dataListMixin from '@/mixins/data-list'
+import KnowledgeBaseTableForCard from '@/components/table/setting/knowledgeBaseTableForCard'
+import { api } from '@/utils/api'
+import { urlParamsHandler, overwriteUrl } from '@/utils/tools'
+import { knowledgeBaseCategory, knowledgeBaseSource, knowledgeCategoryValue } from '@/utils/constants'
+import axios from 'axios'
 
-  export default {
-    name: 'knowledgeBase',
-    components: {
-      KnowledgeBaseTableForCard
+export default {
+  name: 'knowledgeBase',
+  components: {
+    KnowledgeBaseTableForCard
+  },
+  mixins: [dataListMixin],
+  data () {
+    return {
+      url: api.knowledgeBase,
+      listUrl: api.knowledgeBaseList,
+      tableId: 'knowledgeBaseTable', // 需要分页的table的id，用于记录每页数量
+      isSelectedStatus: false,
+      filterParams: {},
+      checkedCategoryIds: [],
+      checkedStatusIds: [],
+      keyWord: '',
+      showConfirmDialog: false,
+      delItemList: [],
+      secondBatchDeleteObjs: []
+    }
+  },
+  watch: {
+  },
+  methods: {
+    categoryFormat (row, column) {
+      const category = row.category
+      const t = knowledgeBaseCategory.find(t => t.value === category)
+      return t ? t.name : category
     },
-    mixins: [dataListMixin],
-    data () {
-      return {
-        url: api.knowledgeBase,
-        listUrl: api.knowledgeBaseList,
-        tableId: 'knowledgeBaseTable', // 需要分页的table的id，用于记录每页数量
-        isSelectedStatus: false,
-        filterParams: {},
-        checkedCategoryIds: [],
-        checkedStatusIds: [],
-        keyWord: '',
-        showConfirmDialog: false,
-        delItemList: [],
-        secondBatchDeleteObjs: []
+    sourceFormat (row, column) {
+      const source = row.source
+      const t = knowledgeBaseSource.find(t => t.value === source)
+      return t ? t.name : source
+    },
+    handleClose () {
+      this.showConfirmDialog = false
+    },
+    showDelDialog () {
+      this.showConfirmDialog = true
+      this.$nextTick(() => {
+        this.batchDeleteObjs.forEach((item) => {
+          this.$refs.delDataTable.toggleRowSelection(item, true)
+        })
+      })
+    },
+    secondSelectionChange (objs) {
+      this.secondBatchDeleteObjs = objs
+    },
+    selectionChange (objs) {
+      this.batchDeleteObjs = []
+      objs.forEach(obj => {
+        const delObj = this.batchDeleteObjs.find(item => item.knowledgeId === obj.knowledgeId)
+        if (delObj === undefined) {
+          this.batchDeleteObjs.push(obj)
+        }
+      })
+      if (this.batchDeleteObjs.length === 1) {
+        this.disableEdit = false
+      } else {
+        this.disableEdit = true
+      }
+      if (this.batchDeleteObjs.length >= 1) {
+        this.disableDelete = false
+      } else {
+        this.disableDelete = true
       }
     },
-    watch: {
+    checkboxStatusChange (isCheck, data) {
+      if (isCheck) {
+        const delObj = this.batchDeleteObjs.find(item => item.knowledgeId === data.knowledgeId)
+        if (delObj === undefined) {
+          this.batchDeleteObjs.push(data)
+        }
+      } else {
+        const cancleObjIndex = this.batchDeleteObjs.findIndex(item => item.knowledgeId === data.knowledgeId)
+        if (cancleObjIndex > -1) {
+          this.batchDeleteObjs.splice(cancleObjIndex, 1)
+        }
+      }
+      if (this.batchDeleteObjs.length === 1) {
+        this.disableEdit = false
+      } else {
+        this.disableEdit = true
+      }
+      if (this.batchDeleteObjs.length >= 1) {
+        this.disableDelete = false
+      } else {
+        this.disableDelete = true
+      }
     },
-    methods: {
-      categoryFormat (row, column) {
-        const category = row.category
-        const t = knowledgeBaseCategory.find(t => t.value === category)
-        return t ? t.name : category
-      },
-      sourceFormat (row, column) {
-        const source = row.source
-        const t = knowledgeBaseSource.find(t => t.value === source)
-        return t ? t.name : source
-      },
-      handleClose () {
-        this.showConfirmDialog = false
-      },
-      showDelDialog () {
-        this.showConfirmDialog = true
-        this.$nextTick(() => {
-          this.batchDeleteObjs.forEach((item) => {
-            this.$refs.delDataTable.toggleRowSelection(item, true)
-          })
+    delBatchKnowledge () {
+      const ids = []
+      if (this.secondBatchDeleteObjs && this.secondBatchDeleteObjs.length > 0) {
+        this.secondBatchDeleteObjs.forEach(item => {
+          ids.push(item.knowledgeId)
         })
-      },
-      secondSelectionChange (objs) {
-        this.secondBatchDeleteObjs = objs
-      },
-      selectionChange (objs) {
-        this.batchDeleteObjs = []
-        objs.forEach(obj => {
-          const delObj = this.batchDeleteObjs.find(item => item.knowledgeId === obj.knowledgeId)
-          if (delObj === undefined) {
-            this.batchDeleteObjs.push(obj)
-          }
-        })
-        if (this.batchDeleteObjs.length === 1) {
-          this.disableEdit = false
-        } else {
-          this.disableEdit = true
+      }
+      let hasReference = false
+      let referenceKnowledge = null
+      this.batchDeleteObjs.forEach(item => {
+        if (item.reference && item.reference.length > 0) {
+          hasReference = true
+          referenceKnowledge = item
         }
-        if (this.batchDeleteObjs.length >= 1) {
-          this.disableDelete = false
-        } else {
-          this.disableDelete = true
-        }
-      },
-      checkboxStatusChange (isCheck, data) {
-        if (isCheck) {
-          const delObj = this.batchDeleteObjs.find(item => item.knowledgeId === data.knowledgeId)
-          if (delObj === undefined) {
-            this.batchDeleteObjs.push(data)
-          }
-        } else {
-          const cancleObjIndex = this.batchDeleteObjs.findIndex(item => item.knowledgeId === data.knowledgeId)
-          if (cancleObjIndex > -1) {
-            this.batchDeleteObjs.splice(cancleObjIndex, 1)
-          }
-        }
-        if (this.batchDeleteObjs.length === 1) {
-          this.disableEdit = false
-        } else {
-          this.disableEdit = true
-        }
-        if (this.batchDeleteObjs.length >= 1) {
-          this.disableDelete = false
-        } else {
-          this.disableDelete = true
-        }
-      },
-      delBatchKnowledge () {
-        const ids = []
-        if (this.secondBatchDeleteObjs && this.secondBatchDeleteObjs.length > 0) {
-          this.secondBatchDeleteObjs.forEach(item => {
-            ids.push(item.knowledgeId)
-          })
-        }
-        let hasReference = false
-        let referenceKnowledge = null
-        this.batchDeleteObjs.forEach(item => {
-          if (item.reference && item.reference.length > 0) {
-            hasReference = true
-            referenceKnowledge = item
-          }
-        })
+      })
 
-        if (ids.length === 0) {
-          this.$alert(this.$t('tip.pleaseSelect'), {
-            confirmButtonText: this.$t('tip.yes'),
-            type: 'warning'
-          }).catch(() => {})
-        } else if (hasReference) {
-          this.$message.error(this.$t('knowledgeBase.deleteReferenceObjects', { name: referenceKnowledge.name }))
-        } else {
-          this.toggleLoading(true)
-          axios.delete(this.url + '?knowledgeIds=' + ids).then(response => {
-            if (response.status === 200) {
-              this.delFlag = true
-              this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
-              this.secondBatchDeleteObjs.forEach((item) => {
-                this.$refs.delDataTable.toggleRowSelection(item, false)
-              })
-              this.secondBatchDeleteObjs = []
-              this.batchDeleteObjs = []
-              // delete this.searchLabel.category
-              delete this.searchLabel.source
-              this.searchLabel.category = knowledgeCategoryValue.userDefined
-              this.getTableData()
-            } else {
-              this.$message.error(response.data.message)
-            }
-          }).finally(() => {
-            this.toggleLoading(false)
-            if (this.isSelectedStatus != undefined) {
-              this.isSelectedStatus = false
-              this.disableDelete = true
-              this.secondBatchDeleteObjs = []
-              this.batchDeleteObjs = []
-              this.showConfirmDialog = false
-            }
-          })
-        }
-      },
-      submit () {
-        this.delBatchKnowledge()
-        this.showConfirmDialog = false
-      },
-      edit (u) {
-        axios.get(`${this.url}/${u.id}`).then(response => {
+      if (ids.length === 0) {
+        this.$alert(this.$t('tip.pleaseSelect'), {
+          confirmButtonText: this.$t('tip.yes'),
+          type: 'warning'
+        }).catch(() => {})
+      } else if (hasReference) {
+        this.$message.error(this.$t('knowledgeBase.deleteReferenceObjects', { name: referenceKnowledge.name }))
+      } else {
+        this.toggleLoading(true)
+        axios.delete(this.url + '?knowledgeIds=' + ids).then(response => {
           if (response.status === 200) {
-            this.object = response.data.data.list[0]
+            this.delFlag = true
+            this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
+            this.secondBatchDeleteObjs.forEach((item) => {
+              this.$refs.delDataTable.toggleRowSelection(item, false)
+            })
+            this.secondBatchDeleteObjs = []
+            this.batchDeleteObjs = []
+            // delete this.searchLabel.category
+            delete this.searchLabel.source
+            this.searchLabel.category = knowledgeCategoryValue.userDefined
+            this.getTableData()
+          } else {
+            this.$message.error(response.data.message)
+          }
+        }).finally(() => {
+          this.toggleLoading(false)
+          if (this.isSelectedStatus != undefined) {
+            this.isSelectedStatus = false
+            this.disableDelete = true
+            this.secondBatchDeleteObjs = []
+            this.batchDeleteObjs = []
+            this.showConfirmDialog = false
+          }
+        })
+      }
+    },
+    submit () {
+      this.delBatchKnowledge()
+      this.showConfirmDialog = false
+    },
+    edit (u) {
+      axios.get(`${this.url}/${u.id}`).then(response => {
+        if (response.status === 200) {
+          this.object = response.data.data.list[0]
+        }
+      }).catch(e => {
+        console.error(e)
+        if (e.response.data && e.response.data.message) {
+          this.$message.error(e.response.data.message)
+        } else {
+          this.$message.error(this.$t('tip.somethingWentWrong'))
+        }
+      })
+    },
+    reload (params, isAll, isClearType, checkedCategoryIds, checkedStatusIds) {
+      this.disableDelete = true
+      this.isSelectedStatus = false
+      this.batchDeleteObjs = []
+      this.secondBatchDeleteObjs = []
+      this.filterParams = params
+      this.checkedCategoryIds = checkedCategoryIds
+      this.checkedStatusIds = checkedStatusIds
+      params = {
+        ...params,
+        name: this.keyWord
+      }
+      this.getTableData(params, isAll, isClearType)
+    },
+    clearList () {
+      this.disableDelete = true
+      this.isSelectedStatus = false
+      this.batchDeleteObjs = []
+      this.secondBatchDeleteObjs = []
+      this.tableData = []
+      this.pageObj.total = 0
+    },
+    toSelect () {
+      this.$refs.dataTableCard.clearSelect()
+      this.isSelectedStatus = !this.isSelectedStatus
+      this.disableDelete = true
+      this.batchDeleteObjs = []
+      this.secondBatchDeleteObjs = []
+    },
+    editSelectRecord () {
+      if (this.batchDeleteObjs.length === 0) {
+        this.$alert(this.$t('tip.pleaseSelectForEdit'), {
+          confirmButtonText: this.$t('tip.yes'),
+          type: 'warning'
+        }).catch(() => {})
+      } else {
+        this.jumpToEditPage(this.batchDeleteObjs[0].knowledgeId)
+      }
+    },
+    changeToUserDefinedList () {
+      this.$router.push({
+        path: '/knowledgeBase/userDefined',
+        query: {
+          t: +new Date()
+        }
+      })
+    },
+    toDelete (data) {
+      if (data && data.knowledgeId) {
+        this.secondBatchDeleteObjs = []
+        this.batchDeleteObjs = []
+        this.secondBatchDeleteObjs.push(data)
+        this.batchDeleteObjs.push(data)
+      }
+      this.showDelDialog()
+    },
+    del (row) {
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.toggleLoading(true)
+        axios.delete(this.url + '?knowledgeIds=' + row.id).then(response => {
+          if (response.status === 200) {
+            this.delFlag = true
+            this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
+            // delete this.searchLabel.category
+            delete this.searchLabel.source
+            this.searchLabel.category = knowledgeCategoryValue.userDefined
+            this.getTableData()
+          } else {
+            this.$message.error(response.data.message)
           }
         }).catch(e => {
           console.error(e)
@@ -235,124 +318,41 @@
           } else {
             this.$message.error(this.$t('tip.somethingWentWrong'))
           }
-        })
-      },
-      reload (params, isAll, isClearType, checkedCategoryIds, checkedStatusIds) {
-        this.disableDelete = true
-        this.isSelectedStatus = false
-        this.batchDeleteObjs = []
-        this.secondBatchDeleteObjs = []
-        this.filterParams = params
-        this.checkedCategoryIds = checkedCategoryIds
-        this.checkedStatusIds = checkedStatusIds
-        params = {
-          ...params,
-          name: this.keyWord
-        }
-        this.getTableData(params, isAll, isClearType)
-      },
-      clearList () {
-        this.disableDelete = true
-        this.isSelectedStatus = false
-        this.batchDeleteObjs = []
-        this.secondBatchDeleteObjs = []
-        this.tableData = []
-        this.pageObj.total = 0
-      },
-      toSelect () {
-        this.$refs.dataTableCard.clearSelect()
-        this.isSelectedStatus = !this.isSelectedStatus
-        this.disableDelete = true
-        this.batchDeleteObjs = []
-        this.secondBatchDeleteObjs = []
-      },
-      editSelectRecord () {
-        if (this.batchDeleteObjs.length === 0) {
-          this.$alert(this.$t('tip.pleaseSelectForEdit'), {
-            confirmButtonText: this.$t('tip.yes'),
-            type: 'warning'
-          }).catch(() => {})
-        } else {
-          this.jumpToEditPage(this.batchDeleteObjs[0].knowledgeId)
-        }
-      },
-      changeToUserDefinedList () {
-        this.$router.push({
-          path: '/knowledgeBase/userDefined',
-          query: {
-            t: +new Date()
-          }
-        })
-      },
-      toDelete (data) {
-        if (data && data.knowledgeId) {
-          this.secondBatchDeleteObjs = []
-          this.batchDeleteObjs = []
-          this.secondBatchDeleteObjs.push(data)
-          this.batchDeleteObjs.push(data)
-        }
-        this.showDelDialog()
-      },
-      del (row) {
-        this.$confirm(this.$t('tip.confirmDelete'), {
-          confirmButtonText: this.$t('tip.yes'),
-          cancelButtonText: this.$t('tip.no'),
-          type: 'warning'
-        }).then(() => {
-          this.toggleLoading(true)
-          axios.delete(this.url + '?knowledgeIds=' + row.id).then(response => {
-            if (response.status === 200) {
-              this.delFlag = true
-              this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
-              // delete this.searchLabel.category
-              delete this.searchLabel.source
-              this.searchLabel.category = knowledgeCategoryValue.userDefined
-              this.getTableData()
-            } else {
-              this.$message.error(response.data.message)
-            }
-          }).catch(e => {
-            console.error(e)
-            if (e.response.data && e.response.data.message) {
-              this.$message.error(e.response.data.message)
-            } else {
-              this.$message.error(this.$t('tip.somethingWentWrong'))
-            }
-          }).finally(() => {
-            this.toggleLoading(false)
-          })
-        }).catch(() => {})
-      },
-      getBuiltInData () {
-        this.isNoData = false
-        this.toggleLoading(true)
-        const params = {
-          category: knowledgeCategoryValue.aiTagging + ',' + knowledgeCategoryValue.webSketch,
-          pageSize: -1
-        }
-        axios.get(this.listUrl, { params }).then(response => {
-          if (response.status === 200) {
-            this.tableData = response.data.data.list
-            this.isNoData = !this.tableData || this.tableData.length === 0
-          } else {
-            console.error(response.data)
-            this.isNoData = true
-            if (response.data.message) {
-              this.$message.error(response.data.message)
-            } else {
-              this.$message.error(this.$t('tip.somethingWentWrong'))
-            }
-          }
-        }).catch(() => {
-          this.isNoData = true
         }).finally(() => {
           this.toggleLoading(false)
         })
-      }
+      }).catch(() => {})
     },
-    mounted () {
-      this.filterParams = {}
-      this.getBuiltInData()
+    getBuiltInData () {
+      this.isNoData = false
+      this.toggleLoading(true)
+      const params = {
+        category: knowledgeCategoryValue.aiTagging + ',' + knowledgeCategoryValue.webSketch,
+        pageSize: -1
+      }
+      axios.get(this.listUrl, { params }).then(response => {
+        if (response.status === 200) {
+          this.tableData = response.data.data.list
+          this.isNoData = !this.tableData || this.tableData.length === 0
+        } else {
+          console.error(response.data)
+          this.isNoData = true
+          if (response.data.message) {
+            this.$message.error(response.data.message)
+          } else {
+            this.$message.error(this.$t('tip.somethingWentWrong'))
+          }
+        }
+      }).catch(() => {
+        this.isNoData = true
+      }).finally(() => {
+        this.toggleLoading(false)
+      })
     }
+  },
+  mounted () {
+    this.filterParams = {}
+    this.getBuiltInData()
   }
+}
 </script>