fix:1 CN-1470 调整新增/修改role页面权限树的逻辑;2.检查模块下的事件类型饼图legend宽度随分辨率而改变；

2023-11-17 13:54:21 +08:00
parent e3c6c21545
commit 7d64868ce0
10 changed files with 426 additions and 350 deletions
--- 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;
--- 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) {
--- 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 () {
--- 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,8 +481,10 @@ export default {
            const chartsData = res.data.result.map(item => {
              return [getMillisecond(item.statTime), item.count]
            })
+            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()
      }
+      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
+      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()
+      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) {
--- 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>'
--- 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, [])
            }
--- 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)
    }
  },
--- 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({
--- 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
--- a/src/views/setting/KnowledgeBase.vue
+++ b/src/views/setting/KnowledgeBase.vue
@@ -69,14 +69,14 @@
  </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 {
+export default {
  name: 'knowledgeBase',
  components: {
    KnowledgeBaseTableForCard
@@ -354,5 +354,5 @@
    this.filterParams = {}
    this.getBuiltInData()
  }
-  }
+}
 </script>