fix: 请求成功的判断条件code改为status（部分）

src/App.vue

@@ -6,7 +6,7 @@
 <script>
 import { storageKey } from '@/utils/constants'
 import router from '@/router'
-import { post } from '@/utils/http'
+import axios from 'axios'
 import { api } from '@/utils/api'
 const dayjs = require('dayjs')
 const utc = require('dayjs/plugin/utc')
@@ -48,13 +48,11 @@ export default {
         if (localStorage.getItem(storageKey.token) !== null) {
           // 刚进入会请求失败，故采用延时，请求成功清除延时器，避免内存泄漏
           const timer = setTimeout(() => {
-            post(api.permissions, { token: localStorage.getItem(storageKey.token) }).then(res => {
+            axios.post(api.permissions, { token: localStorage.getItem(storageKey.token) }).then(res => {
-              if (res.code === 200) {
+              router.push({
-                router.push({
+                path: '/panel/networkOverview'
-                  path: '/panel/networkOverview'
+              })
-                })
+              clearTimeout(timer)
-                clearTimeout(timer)
-              }
             })
           }, 10)
         }

src/Login.vue

@@ -39,7 +39,6 @@
 
 <script>
 import { mapActions } from 'vuex'
-import { get } from '@/utils/http'
 import axios from 'axios'
 import { useRouter } from 'vue-router'
 import { storageKey, defaultLang } from '@/utils/constants'
@@ -72,7 +71,7 @@ export default {
       this.loading = true
       axios.post(api.login, { username: this.username, pin: this.pin }).then(
         res => {
-          if (res.data.code === 200) {
+          if (res.status === 200) {
             if (!_.isEmpty(res.data.data.user.lang)) {
               localStorage.setItem(storageKey.language, res.data.data.user.lang)
             }
@@ -103,9 +102,9 @@ export default {
       })
     },
     queryAppearance () {
-      get(api.appearance).then(res => {
+      axios.get(api.appearance).then(res => {
-        if (res.code === 200) {
+        if (res.status === 200) {
-          this.appearanceOut(res.data)
+          this.appearanceOut(res.data.data)
         }
       })
     },

src/components/layout/Header.vue

@@ -188,7 +188,7 @@
 </template>
 
 <script>
-import { get, put } from '@/utils/http'
+import axios from 'axios'
 import {
   curTabState,
   entityType,
@@ -494,7 +494,7 @@ export default {
     logout () {
       sessionStorage.removeItem(storageKey.tokenExpireCurrentPath)
       localStorage.removeItem(storageKey.token)
-      get(api.logout)
+      axios.get(api.logout)
     },
     refreshLang () {
       this.language = localStorage.getItem(storageKey.language)
@@ -537,9 +537,9 @@ export default {
       if (!curTableInCode.url.drilldownList) {
         return true
       }
-      get(curTableInCode.url.drilldownList, params).then(async response => {
+      axios.get(curTableInCode.url.drilldownList, { params }).then(async response => {
-        if (response.code === 200) {
+        if (response.status === 200) {
-          this.breadcrumbColumnValueListShow = response.data.result
+          this.breadcrumbColumnValueListShow = response.data.data.result
           if (this.$route.params.typeName === fromRoute.dnsServiceInsights) {
             if (this.dnsQtypeMapData.size === 0) {
               this.dnsQtypeMapData = await getDnsMapData('dnsQtype')
@@ -628,17 +628,17 @@ export default {
     submit () {
       this.$refs.changePassForm.validate((valid) => {
         if (valid) {
-          put(api.pin, {
+          axios.put(api.pin, {
             oldPin: this.changePassForm.oldPwd,
             newPin: this.changePassForm.newPwd
           }).then(res => {
-            if (res.code === 200) {
+            if (res.status === 200) {
-              this.$message.success('Success')
+              this.$message.success(this.$t('tip.success'))
               this.showChangePin = false
-            } else if (res.code === 518005) {
+            } else if (res.data.code === 518005) {
-              this.$message.error('密码错误')
+              this.$message.error(this.$t('tip.incorrectPassword'))
             } else {
-              this.$message.error(res.message)
+              this.$message.error(res.data.message)
             }
           }).catch(e => {
             console.error(e)

src/components/rightBox/settings/GalaxyProxyBox.vue

@@ -8,7 +8,7 @@
     </div>
     <div class="right-box__container">
       <div class="container__form">
-        <el-form ref="userForm" :model="editObject" :rules="rules" label-position="top" label-width="120px">
+        <el-form ref="form" :model="editObject" :rules="rules" label-position="top" label-width="120px">
           <!--name-->
           <el-form-item :label="$t('overall.name')" prop="name">
             <el-input id="proxy-name" v-model="editObject.name"

src/components/rightBox/settings/I18nBox.vue

@@ -56,7 +56,7 @@
 
 <script>
 import rightBoxMixin from '@/mixins/right-box'
-import { get, post, put } from '@/utils/http'
+import axios from 'axios'
 import { storageKey } from '@/utils/constants'
 import { api } from '@/utils/api'
 
@@ -84,8 +84,6 @@ export default {
       langData: []
     }
   },
-  setup () {
-  },
   mounted () {
     this.getLangData()
   },
@@ -106,23 +104,23 @@ export default {
       this.$refs.i18nForm.validate((valid) => {
         if (valid) {
           if (this.editObject.id) {
-            put(this.url, this.editObject).then(res => {
+            axios.put(this.url, this.editObject).then(res => {
               this.blockOperation.save = false
-              if (res.code === 200) {
+              if (res.status === 200) {
                 this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
                 this.esc(true)
               } else {
-                this.$message.error(res.msg || res.message)
+                this.$message.error(res.data.message)
               }
             })
           } else {
-            post(this.url, this.editObject).then(res => {
+            axios.post(this.url, this.editObject).then(res => {
               this.blockOperation.save = false
-              if (res.code === 200) {
+              if (res.status === 200) {
                 this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
                 this.esc(true)
               } else {
-                this.$message.error(res.msg || res.message)
+                this.$message.error(res.data.message)
               }
             })
           }
@@ -133,9 +131,9 @@ export default {
       })
     },
     getLangData () {
-      get(api.dict, { type: 'lang', pageSize: -1 }).then(response => {
+      axios.get(api.dict, { params: { type: 'lang', pageSize: -1 } }).then(response => {
-        if (response.code === 200) {
+        if (response.status === 200) {
-          this.langData = response.data.list
+          this.langData = response.data.data.list
         }
       })
     }

src/components/rightBox/settings/RoleBox.vue

@@ -40,7 +40,7 @@
       <button id="asset-edit-cancel" v-cancel="{object: editRole, func: esc}" class="footer__btn footer__btn--light">
         <span>{{$t('overall.cancel')}}</span>
       </button>
-      <button id="asset-edit-save" :class="{'footer__btn--disabled': prevent_opt.save}" :disabled="prevent_opt.save" class="footer__btn" @click="save">
+      <button id="asset-edit-save" :class="{'footer__btn--disabled': blockOperation.save}" :disabled="blockOperation.save" class="footer__btn" @click="save">
         <span>{{$t('overall.save')}}</span>
       </button>
     </div>
@@ -49,8 +49,9 @@
 
 <script>
 import rightBoxMixin from '@/mixins/right-box'
-import { get, post, put } from '@/utils/http'
 import { api } from '@/utils/api'
+import axios from 'axios'
+import _ from 'lodash'
 
 export default {
   name: 'userBox',
@@ -117,7 +118,7 @@ export default {
     },
     /* 关闭弹框 */
     esc (refresh) {
-      this.prevent_opt.save = false
+      this.blockOperation.save = false
       this.$emit('close', refresh)
     },
     getMenus: function () {
@@ -125,19 +126,19 @@ export default {
       return new Promise(resolve => {
         self.menus = []
         if (self.editRole.id) {
-          get(api.menu + self.editRole.id).then(response => {
+          axios.get(api.menu + self.editRole.id).then(response => {
-            if (response.code === 200) {
+            if (response.status === 200) {
-              self.menus = response.data.menus
+              self.menus = _.get(response, 'data.data.menus', [])
-              self.selectedIds = response.data.selectedIds
+              self.selectedIds = _.get(response, 'data.data.selectedIds', [])
             } else {
-              self.$message.error('load menu faild')
+              self.$message.error('load menu failed')
             }
             resolve()
           })
         } else {
-          get(api.sysMenu).then(response => {
+          axios.get(api.sysMenu).then(response => {
-            if (response.code === 200) {
+            if (response.status === 200) {
-              self.menus = response.data.list
+              self.menus = _.get(response, 'data.data.list', [])
             } else {
               self.$message.error('load menu faild')
             }
@@ -174,34 +175,34 @@ export default {
       }
     },
     save () {
-      if (this.prevent_opt.save) { return }
+      if (this.blockOperation.save) { return }
-      this.prevent_opt.save = true
+      this.blockOperation.save = true
 
       this.$refs.roleForm.validate((valid) => {
         if (valid) {
           if (this.editRole.id) {
-            put(this.url, this.editRole).then(res => {
+            axios.put(this.url, this.editRole).then(res => {
-              this.prevent_opt.save = false
+              this.blockOperation.save = false
-              if (res.code === 200) {
+              if (res.status === 200) {
                 this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
                 this.esc(true)
               } else {
-                this.$message.error(res.msg || res.message)
+                this.$message.error(res.data.msg || res.data.message)
               }
             })
           } else {
-            post(this.url, this.editRole).then(res => {
+            axios.post(this.url, this.editRole).then(res => {
-              this.prevent_opt.save = false
+              this.blockOperation.save = false
-              if (res.code === 200) {
+              if (res.status === 200) {
                 this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
                 this.esc(true)
               } else {
-                this.$message.error(res.msg || res.message)
+                this.$message.error(res.data.msg || res.data.message)
               }
             })
           }
         } else {
-          this.prevent_opt.save = false
+          this.blockOperation.save = false
           return false
         }
       })

src/components/rightBox/settings/UserBox.vue

@@ -115,7 +115,8 @@
 
 <script>
 import rightBoxMixin from '@/mixins/right-box'
-import { get, post, put } from '@/utils/http'
+import axios from 'axios'
+import _ from 'lodash'
 import { themeData, langData, storageKey } from '@/utils/constants'
 import { api } from '@/utils/api'
 
@@ -194,7 +195,6 @@ export default {
         ],
         pinChange: [
           { validator: validatePin, trigger: 'blur' },
-          { required: true, message: this.$t('validate.required') },
           { pattern: /^[a-zA-Z0-9]{5,64}$/, message: this.$t('validate.atLeastFive') }
         ],
         roleIds: [
@@ -235,23 +235,23 @@ export default {
       this.$refs.userForm.validate((valid) => {
         if (valid) {
           if (this.editObject.id) {
-            put(this.url, this.editObject).then(res => {
+            axios.put(this.url, this.editObject).then(res => {
               this.blockOperation.save = false
-              if (res.code === 200) {
+              if (res.status === 200) {
                 this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
                 this.esc(true)
               } else {
-                this.$message.error(res.msg || res.message)
+                this.$message.error(res.data.msg || res.data.message)
               }
             })
           } else {
-            post(this.url, this.editObject).then(res => {
+            axios.post(this.url, this.editObject).then(res => {
               this.blockOperation.save = false
-              if (res.code === 200) {
+              if (res.status === 200) {
                 this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
                 this.esc(true)
               } else {
-                this.$message.error(res.msg || res.message)
+                this.$message.error(res.data.msg || res.data.message)
               }
             })
           }
@@ -262,9 +262,9 @@ export default {
       })
     },
     getRoleData () {
-      get(api.role, { pageSize: -1 }).then(response => {
+      axios.get(api.role, { pageSize: -1 }).then(response => {
-        if (response.code === 200) {
+        if (response.status === 200) {
-          this.roleData = response.data.list
+          this.roleData = _.get(response, 'data.data.list', [])
         }
       })
     }

src/mixins/common.js

@@ -8,6 +8,7 @@ export default {
       blockOperation: {
         save: false,
         import: false,
+        duplicate: false,
         delete: false,
         refresh: false,
         query: false

src/mixins/data-list.js

@@ -1,6 +1,6 @@
 import { tableSort } from '@/utils/tools'
 import { defaultPageSize, fromRoute, position, storageKey, dbTableColumnCustomizeConfigPre } from '@/utils/constants'
-import { get, del } from '@/utils/http'
+import _ from 'lodash'
 import { ref } from 'vue'
 import pagination from '@/components/common/Pagination'
 import axios from 'axios'
@@ -90,16 +90,8 @@ export default {
           this.batchDeleteObjs.push(obj)
         }
       })
-      if (this.batchDeleteObjs.length == 1) {
+      this.disableEdit = this.batchDeleteObjs.length !== 1
-        this.disableEdit = false
+      this.disableDelete = this.batchDeleteObjs.length < 1
-      } else {
-        this.disableEdit = true
-      }
-      if (this.batchDeleteObjs.length >= 1) {
-        this.disableDelete = false
-      } else {
-        this.disableDelete = true
-      }
     },
     getTableData (params, isAll, isClearType) {
       if (isAll) {
@@ -155,20 +147,16 @@ export default {
         this.pageObj.total = list.length
         this.loading = false
       } else {
-        get(listUrl, this.searchLabel).then(response => {
+        axios.get(listUrl, { params: this.searchLabel }).then(response => {
-          if (response.code === 200) {
+          if (response.status === 200) {
-            this.tableData = response.data.list
+            this.tableData = _.get(response, 'data.data.list', [])
-            this.pageObj.total = response.data.total
+            this.pageObj.total = _.get(response, 'data.data.total', 0)
-            if (!this.tableData || this.tableData.length === 0) {
+            this.isNoData = !this.tableData || this.tableData.length === 0
-              this.isNoData = true
-            } else {
-              this.isNoData = false
-            }
           } else {
             console.error(response)
             this.isNoData = true
-            if (response.message) {
+            if (response.data.message) {
-              this.$message.error(response.message)
+              this.$message.error(response.data.message)
             } else {
               this.$message.error(this.$t('tip.somethingWentWrong'))
             }
@@ -187,19 +175,17 @@ export default {
         cancelButtonText: this.$t('tip.no'),
         type: 'warning'
       }).then(() => {
-        del(this.url + '?ids=' + row.id).then(response => {
+        axios.delete(this.url + '?ids=' + row.id).then(response => {
-          if (response.code === 200) {
+          if (response.status === 200) {
             this.delFlag = true
             this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
             this.getTableData()
           } else {
-            this.$message.error(response.msg)
+            this.$message.error(response.data.message)
           }
         })
       }).catch(e => {})
     },
-    delSelectionChange () {
-    },
     delBatch () {
       const ids = []
       if (this.batchDeleteObjs && this.batchDeleteObjs.length > 0) {
@@ -220,7 +206,7 @@ export default {
         }).then(() => {
           this.toggleLoading(true)
           axios.delete(this.url + '?ids=' + ids).then(response => {
-            if (response.data.code === 200) {
+            if (response.status === 200) {
               this.delFlag = true
               this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
               this.getTableData()
@@ -230,14 +216,13 @@ export default {
           }).finally(() => {
             this.toggleLoading(false)
           })
-        }).catch(() => {})
+        }).finally(() => {
-          .finally(() => {
+          if (this.isSelectedStatus !== undefined) {
-            if (this.isSelectedStatus != undefined) {
+            this.isSelectedStatus = false
-              this.isSelectedStatus = false
+            this.disableDelete = true
-              this.disableDelete = true
+            this.batchDeleteObjs = []
-              this.batchDeleteObjs = []
+          }
-            }
+        })
-          })
       }
     },
     newObject () {
@@ -272,9 +257,9 @@ export default {
       }
     },
     edit (u) {
-      get(`${this.url}/${u.id}`).then(response => {
+      axios.get(`${this.url}/${u.id}`).then(response => {
-        if (response.code === 200) {
+        if (response.status === 200) {
-          this.object = response.data
+          this.object = response.data.data
           this.rightBox.show = true
         }
       })
@@ -286,9 +271,9 @@ export default {
           type: 'warning'
         }).catch(() => {})
       } else {
-        get(`${this.url}/${this.batchDeleteObjs[0].id}`).then(response => {
+        axios.get(`${this.url}/${this.batchDeleteObjs[0].id}`).then(response => {
-          if (response.code === 200) {
+          if (response.status === 200) {
-            this.object = response.data
+            this.object = response.data.data
             this.rightBox.show = true
           }
         })
@@ -328,8 +313,8 @@ export default {
       if (!localStorage.getItem(storageKey.token)) {
         return window.location.replace('/')
       }
-      get(api.reportTemp).then(res => {
+      axios.get(api.reportTemp).then(res => {
-        if (res.code === 200) {
+        if (res.status === 200) {
           axios.get(url, { responseType: 'blob', params: params }).then(res => {
             if (window.navigator.msSaveOrOpenBlob) {
               // 兼容ie11

src/mixins/relatedServer.js

@@ -1,4 +1,4 @@
-import { get } from '@/utils/http'
+import axios from 'axios'
 import { getTextRect } from '@/utils/tools'
 export default {
   data () {
@@ -17,11 +17,11 @@ export default {
     // 请求数据 relationshipUrlOne => 路由 refOne => ref
     getRelatedServerDataOne (relationshipUrlOne, refOne) {
       this.loadingRelationshipOne = true
-      get(relationshipUrlOne, this.getQueryParams()).then(response => {
+      axios.get(relationshipUrlOne, { params: this.getQueryParams() }).then(response => {
-        if (response.code === 200) {
+        if (response.status === 200) {
           const relationshipDataOne = []
-          if (response.data.result.length > 0) {
+          if (response.data.data.result.length > 0) {
-            response.data.result.forEach(item => {
+            response.data.data.result.forEach(item => {
               relationshipDataOne.push({ value: item, show: true })
             })
           }
@@ -33,11 +33,11 @@ export default {
     },
     getRelatedServerDataTwo (relationshipUrlTow, refTow) {
       this.loadingRelationshipTwo = true
-      get(relationshipUrlTow, this.getQueryParams()).then(response => {
+      axios.get(relationshipUrlTow, { params: this.getQueryParams() }).then(response => {
-        if (response.code === 200) {
+        if (response.status === 200) {
           const relationshipDataTwo = []
-          if (response.data.result.length > 0) {
+          if (response.data.data.result.length > 0) {
-            response.data.result.forEach(item => {
+            response.data.data.result.forEach(item => {
               relationshipDataTwo.push({ value: item, show: true })
             })
           }

src/mixins/right-box.js

@@ -1,4 +1,4 @@
-import { post, put } from '@/utils/http'
+import axios from 'axios'
 
 export default {
   props: {
@@ -24,26 +24,26 @@ export default {
       if (this.blockOperation.save) { return }
       this.blockOperation.save = true
 
-      this.$refs.userForm.validate((valid) => {
+      this.$refs.form.validate((valid) => {
         if (valid) {
           if (this.editObject.id) {
-            put(this.url, this.editObject).then(res => {
+            axios.put(this.url, this.editObject).then(res => {
               this.blockOperation.save = false
-              if (res.code === 200) {
+              if (res.status === 200) {
                 this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
                 this.esc(true)
               } else {
-                this.$message.error(res.msg || res.message)
+                this.$message.error(res.data.msg || res.data.message)
               }
             })
           } else {
-            post(this.url, this.editObject).then(res => {
+            axios.post(this.url, this.editObject).then(res => {
               this.blockOperation.save = false
-              if (res.code === 200) {
+              if (res.status === 200) {
                 this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
                 this.esc(true)
               } else {
-                this.$message.error(res.msg || res.message)
+                this.$message.error(res.data.msg || res.data.message)
               }
             })
           }

src/mixins/table.js

@@ -1,7 +1,7 @@
-import { chartTableOrderOptionsMapping, storageKey,knowledgeCategoryValue } from '@/utils/constants'
+import { chartTableOrderOptionsMapping, storageKey, knowledgeCategoryValue } from '@/utils/constants'
 import { getWidthByLanguage } from '@/utils/tools'
-import { put, patch } from '@/utils/http'
 import { api } from '@/utils/api'
+import axios from 'axios'
 export default {
   props: {
     tableData: {
@@ -107,13 +107,14 @@ export default {
     },
     changeStatus (status, id) {
       if (id) {
-        patch(api.knowledgeBaseEnable, { list: [{ knowledgeId: id, status: status }] }).then(response => {
+        axios.patch(api.knowledgeBaseEnable, { list: [{ knowledgeId: id, status: status }] }).then(response => {
-          if (response.code === 200) {
+          console.info(response)
+          if (response.status === 200) {
             this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
           } else {
             console.error(response)
-            if (response.message) {
+            if (response.data.message) {
-              this.$message.error(response.message)
+              this.$message.error(response.data.message)
             } else {
               this.$message.error(this.$t('tip.somethingWentWrong'))
             }
@@ -123,11 +124,7 @@ export default {
       }
     },
     selectable (row, rowIndex) {
-      if (row.isBuiltIn === 1) {
+      return row.isBuiltIn !== 1
-        return false
-      } else {
-        return true
-      }
     },
     tableOperation ([command, row]) {
       switch (command) {

src/store/modules/user.js

@@ -1,10 +1,11 @@
-import { get, post } from '@/utils/http'
+import {get} from '@/utils/http'
+import axios from 'axios'
 import router from '@/router'
-import { sortByOrderNum, getWelcomeMenu } from '@/permission'
+import {getWelcomeMenu, sortByOrderNum} from '@/permission'
-import { ElMessage } from 'element-plus' // dependent on utc plugin
+import {ElMessage} from 'element-plus' // dependent on utc plugin
-import { storageKey, dbDrilldownTableConfig } from '@/utils/constants'
+import {dbDrilldownTableConfig, storageKey} from '@/utils/constants'
-import { getConfigVersion } from '@/utils/tools'
+import {getConfigVersion} from '@/utils/tools'
-import { api } from '@/utils/api'
+import {api} from '@/utils/api'
 import indexedDBUtils from '@/indexedDB'
 
 const user = {
@@ -58,7 +59,8 @@ const user = {
   },
   actions: {
     loginSuccess (store, res) {
-      post(api.permissions, { token: res.data.token }).then(res2 => {
+      axios.post(api.permissions, { token: res.data.token }).then(response => {
+        const res2 = response.data
         const menuList = sortByOrderNum(res2.data.menus)
         store.commit('setMenuList', menuList)
         store.commit('setButtonList', res2.data.buttons)
@@ -73,8 +75,7 @@ const user = {
             tempArr.forEach(t => {
               const firstEqualIndex = t.indexOf('=')
               const key = t.substring(0, firstEqualIndex)
-              const value = t.substring(firstEqualIndex + 1)
+              query[key] = t.substring(firstEqualIndex + 1)
-              query[key] = value
             })
           }
           router.push({
@@ -95,8 +96,9 @@ const user = {
           }
         }
       })
-      get(api.config, { ckey: 'drill_down_table_config' }).then(async res => {
+      axios.get(api.config, { params: { ckey: 'drill_down_table_config' } }).then(async response => {
-        if (res.code === 200 && res.page.list && res.page.list.length > 0) {
+        const res = response.data
+        if (response.status === 200 && res.page.list && res.page.list.length > 0) {
           // 从接口返回整体配置，再读取用户缓存，将对应条目覆盖，作为使用的配置
           const defaultConfigs = JSON.parse(res.page.list[0].cvalue)
           await indexedDBUtils.selectTable(dbDrilldownTableConfig).put({
@@ -111,13 +113,15 @@ const user = {
           }
         }
       })
-      get(api.config, { ckey: 'link_info' }).then(res => {
+      axios.get(api.config, { params: { ckey: 'link_info' } }).then(response => {
-        if (res.code === 200 && res.page.list && res.page.list.length > 0) {
+        const res = response.data
+        if (response.status === 200 && res.page.list && res.page.list.length > 0) {
           localStorage.setItem(storageKey.linkInfo, res.page.list[0].cvalue)
         }
       })
-      get(api.config, { ckey: 'schema_entity_explore' }).then(res => {
+      axios.get(api.config, { params: { ckey: 'schema_entity_explore' } }).then(response => {
-        if (res.code === 200 && res.page.list && res.page.list.length > 0) {
+        const res = response.data
+        if (response.status === 200 && res.page.list && res.page.list.length > 0) {
           localStorage.setItem(storageKey.schemaEntityExplore, res.page.list[0].cvalue)
         }
       })

src/utils/api.js

@@ -3,7 +3,6 @@
  * @date 2021/6/11
  * @description 1.定义api；2.定义通用查询方法，函数名应为 获取详情getItem、获取列表getItemList。例如getUser、getUserList
 */
-import { get, post } from '@/utils/http'
 import axios from 'axios'
 import { sortByOrderNum } from '@/permission'
 import { storageKey } from '@/utils/constants'
@@ -36,12 +35,12 @@ export const api = {
   // galaxyProxy
   galaxyProxy: '/galaxy/setting',
   // 知识库
-  knowledgeBase: BASE_CONFIG.apiVersion + '/knowledgeBase',
+  knowledgeBase: apiVersion + '/knowledgeBase',
-  knowledgeBaseList: BASE_CONFIG.apiVersion + '/knowledgeBase/list',
+  knowledgeBaseList: apiVersion + '/knowledgeBase/list',
-  knowledgeBaseEnable: BASE_CONFIG.apiVersion + '/knowledgeBase/status',
+  knowledgeBaseEnable: apiVersion + '/knowledgeBase/status',
-  knowledgeBaseStatistics: BASE_CONFIG.apiVersion + '/knowledgeBase/statistics',
+  knowledgeBaseStatistics: apiVersion + '/knowledgeBase/statistics',
-  updateKnowledgeUrl: BASE_CONFIG.apiVersion + '/knowledgeBase/items/batch',
+  updateKnowledgeUrl: apiVersion + '/knowledgeBase/items/batch',
-  knowledgeBaseLog: BASE_CONFIG.apiVersion + '/knowledgeBase/audit/log',
+  knowledgeBaseLog: apiVersion + '/knowledgeBase/audit/log',
 
   // 报告相关
   reportJob: '/report/job',
@@ -366,11 +365,11 @@ function handleResult (response) {
 export async function getData (url, params = {}, isQueryList) {
   const request = new Promise((resolve, reject) => {
     try {
-      get(url, params).then(response => {
+      axios.get(url, { params }).then(response => {
-        if (response.code === 200) {
+        if (response.status === 200) {
-          resolve(handleResult(response))
+          resolve(handleResult(response.data))
         } else {
-          reject(response)
+          reject(response.data)
         }
       })
     } catch (e) {
@@ -384,9 +383,9 @@ export async function getData (url, params = {}, isQueryList) {
 
 export async function getPermission () {
   const request = new Promise(resolve => {
-    post(api.permission, { token: localStorage.getItem(storageKey.token) }).then(response => {
+    axios.post(api.permission, { token: localStorage.getItem(storageKey.token) }).then(response => {
       resolve({
-        menuList: sortByOrderNum(response.data.menus),
+        menuList: sortByOrderNum(response.data.data.menus),
         buttonList: response.data.buttons,
         roleList: response.data.roles
       })
@@ -400,9 +399,9 @@ export async function getI18n () {
   const langs = dictData.map(d => d.value).join(',')
   localStorage.setItem(storageKey.languages, langs)
   const request = new Promise(resolve => {
-    get(api.i18nLang, { l: langs }).then(response => {
+    axios.get(api.i18nLang, { params: { l: langs } }).then(response => {
-      response.data.cn = response.data.zh
+      response.data.data.cn = response.data.data.zh
-      resolve(response.data)
+      resolve(response.data.data)
     })
   })
   return await request

src/views/administration/Appearance.vue

@@ -116,7 +116,7 @@ export default {
       })
 
       axios.get(api.timezone).then(response => {
-        if (response.data.code === 200) {
+        if (response.status === 200) {
           this.timezoneList = response.data.data
           if (this.timezoneList && this.timezoneList.length > 0) {
             this.timezoneList.forEach(mapData => {
@@ -153,7 +153,7 @@ export default {
       })
 
       axios.get(this.url, { pageSize: -1 }).then(response => {
-        if (response.data.code === 200) {
+        if (response.status === 200) {
           this.appearanceObject = response.data.data
         }
       })
@@ -162,7 +162,7 @@ export default {
       if (this.blockOperation.save) { return }
       this.blockOperation.save = true
       axios.put(this.url, this.appearanceObject).then(response => {
-        if (response.data.code === 200) {
+        if (response.status === 200) {
           this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
           if (this.appearanceObject.date_format !== localStorage.getItem(storageKey.dateFormat)) {
             localStorage.setItem(storageKey.dateFormat, this.appearanceObject.date_format)

src/views/administration/GalaxyProxy.vue

@@ -94,7 +94,7 @@ import galaxyProxyBox from '@/components/rightBox/settings/GalaxyProxyBox'
 import galaxyProxyTable from '@/components/table/administration/GalaxyProxyTable'
 import dataListMixin from '@/mixins/data-list'
 import { api } from '@/utils/api'
-import { get, put } from '@/utils/http'
+import axios from 'axios'
 import TopToolMoreOptions from '@/components/common/popBox/TopToolMoreOptions'
 import galaxyProxyDebug from '@/components/setting/GalaxyProxyDebug'
 
@@ -121,9 +121,9 @@ export default {
   },
   methods: {
     edit (u) {
-      get(`${this.url}/${u.id}`).then(response => {
+      axios.get(`${this.url}/${u.id}`).then(response => {
-        if (response.code === 200) {
+        if (response.status === 200) {
-          const editObject = response.data
+          const editObject = response.data.data
           editObject.targetHeader || (editObject.targetHeader = '')
           editObject.preHandle || (editObject.preHandle = '')
           editObject.postHandle || (editObject.postHandle = '')
@@ -143,11 +143,11 @@ export default {
       this.debug(false, u)
     },
     clearCache () {
-      put(`${this.url}/clearCache`).then(response => {
+      axios.put(`${this.url}/clearCache`).then(response => {
-        if (response.code === 200) {
+        if (response.status === 200) {
           this.$message({ duration: 2000, type: 'success', message: this.$t('tip.success') })
         } else {
-          this.$message.error(response.msg || response.message)
+          this.$message.error(response.data.message)
         }
       }).catch(() => {
         this.$message.error(this.$t('tip.unknownError'))

src/views/administration/Roles.vue

@@ -66,7 +66,7 @@ import dataListMixin from '@/mixins/data-list'
 import rolesTable from '@/components/table/administration/RoleTable'
 import roleBox from '@/components/rightBox/settings/RoleBox'
 import { api } from '@/utils/api'
-import { get } from '@/utils/http'
+import axios from 'axios'
 
 export default {
   name: 'roles',
@@ -100,9 +100,9 @@ export default {
           type: 'warning'
         }).catch(() => {})
       } else {
-        get(`${this.url}`, { ids: this.batchDeleteObjs[0].id }).then(response => {
+        axios.get(`${this.url}`, { params: { ids: this.batchDeleteObjs[0].id } }).then(response => {
-          if (response.code === 200) {
+          if (response.status === 200) {
-            this.object = response.data.list[0]
+            this.object = response.data.data.list[0]
             this.rightBox.show = true
           }
         })

src/views/administration/User.vue

@@ -66,7 +66,7 @@ import dataListMixin from '@/mixins/data-list'
 import userTable from '@/components/table/administration/UserTable'
 import userBox from '@/components/rightBox/settings/UserBox'
 import { api } from '@/utils/api'
-import { get } from '@/utils/http'
+import axios from 'axios'
 
 export default {
   name: 'User',
@@ -113,18 +113,18 @@ export default {
       if (this.listUrl) {
         listUrl = this.listUrl
       }
-      get(listUrl, this.searchLabel).then(response => {
+      axios.get(listUrl, { params: this.searchLabel }).then(response => {
-        if (response.code === 200) {
+        if (response.status === 200) {
-          for (let i = 0; i < response.data.list.length; i++) {
+          for (let i = 0; i < response.data.data.list.length; i++) {
-            response.data.list[i].status = response.data.list[i].status + ''
+            response.data.data.list[i].status = response.data.data.list[i].status + ''
           }
-          this.tableData = response.data.list
+          this.tableData = response.data.data.list
-          this.pageObj.total = response.data.total
+          this.pageObj.total = response.data.data.total
         } else {
-          console.error(response)
+          console.error(response.data)
           this.isNoData = true
-          if (response.message) {
+          if (response.data.message) {
-            this.$message.error(response.message)
+            this.$message.error(response.data.message)
           } else {
             this.$message.error(this.$t('tip.somethingWentWrong'))
           }

src/views/charts/Chart.vue

@@ -3,17 +3,8 @@
     <loading :loading="loading && !isTabs && !isBlock && !isGroup"></loading>
     <chart-no-data v-if="isNoData" :active-tab="activeTab"></chart-no-data>
     <template v-else>
-      <chart-tabs
-        ref="chart"
-        v-if="isTabs"
-        :chart-info="chartInfo"
-        :time-filter="timeFilter"
-        :query-params="queryParams"
-        :entity="entity"
-      ></chart-tabs>
-
       <chart-map
-        v-else-if="isMap && !isIpBasicInfo"
+        v-if="isMap && !isIpBasicInfo"
         :chart-info="chartInfo"
         :chart-data="chartData"
         :time-filter="timeFilter"
@@ -22,256 +13,6 @@
         @getChartData="getChartData"
         @showLoading="showLoading"
       ></chart-map>
-
-      <chart-single-value
-        v-else-if="isSingleValue"
-        :chart-info="chartInfo"
-        :chart-data="chartData"
-        :time-filter="timeFilter"
-        :query-params="queryParams"
-        @showLoading="showLoading"
-      ></chart-single-value>
-
-      <chart-block
-        ref="chart"
-        v-else-if="isBlock"
-        :time-filter="timeFilter"
-        :query-params="queryParams"
-        :chart-info="chartInfo"
-        :chart-data="chartData"
-        :entity="entity"
-      ></chart-block>
-
-      <chart-group
-        ref="chart"
-        v-else-if="isGroup"
-        :query-params="queryParams"
-        :time-filter="timeFilter"
-        :chart-info="chartInfo"
-        :chart-data="chartData"
-        :entity="entity"
-      ></chart-group>
-
-      <ip-basic-info
-        v-else-if="isIpBasicInfo"
-        :time-filter="timeFilter"
-        :query-params="queryParams"
-        :chart-info="chartInfo"
-        :chart-data="chartData"
-        :entity="entity"
-      ></ip-basic-info>
-
-      <chart-time-bar
-        v-else-if="isEchartsTimeBar"
-        :chart-info="chartInfo"
-        :chart-data="chartData"
-        :result-type="resultType"
-        :time-filter="timeFilter"
-        :query-params="queryParams"
-        @showLoading="showLoading"
-      ></chart-time-bar>
-
-      <chart-category-bar
-        v-else-if="isEchartsCategoryBar"
-        :chart-info="chartInfo"
-        :chart-data="chartData"
-        :result-type="resultType"
-        :time-filter="timeFilter"
-        :query-params="queryParams"
-        @showLoading="showLoading"
-      ></chart-category-bar>
-
-      <chart-ip-open-port-bar
-        v-else-if="isIpOpenPortBar"
-        :chart-info="chartInfo"
-        :chart-data="chartData"
-        :result-type="resultType"
-        :time-filter="timeFilter"
-        :query-params="queryParams"
-        @showLoading="showLoading"
-      ></chart-ip-open-port-bar>
-
-      <chart-table
-        v-else-if="isTable && isBasicTable"
-        :chart-info="chartInfo"
-        :chart-data="chartData"
-        :table="table"
-        :time-filter="timeFilter"
-        :query-params="queryParams"
-        @showLoading="showLoading"
-      ></chart-table>
-
-      <chart-active-ip-table
-        v-else-if="isActiveIpTable"
-        :chart-info="chartInfo"
-        :chart-data="chartData"
-        :table="table"
-        :time-filter="timeFilter"
-        :query-params="queryParams"
-      ></chart-active-ip-table>
-
-      <chart-app-basic-info
-        v-else-if="isAppBasicInfo"
-        :chart-info="chartInfo"
-        :chart-data="chartData"
-        :time-filter="timeFilter"
-        :query-params="queryParams"
-      ></chart-app-basic-info>
-
-      <chart-domain-whois
-        v-else-if="isDomainWhois"
-        :chart-info="chartInfo"
-        :chart-data="chartData"
-        :time-filter="timeFilter"
-        :query-params="queryParams"
-      ></chart-domain-whois>
-
-      <chart-domain-dns-record
-        v-else-if="isDomainDnsRecord"
-        :chart-info="chartInfo"
-        :chart-data="chartData"
-        :time-filter="timeFilter"
-        :query-params="queryParams"
-      ></chart-domain-dns-record>
-
-      <chart-cryptocurrency-event-list
-        v-else-if="isCryptocurrencyEventList"
-        :chart-info="chartInfo"
-        :chart-data="chartData"
-        :time-filter="timeFilter"
-        :query-params="queryParams"
-      ></chart-cryptocurrency-event-list>
-
-      <chart-relation-ship
-        v-else-if="isRelationShip"
-        :chart-info="chartInfo"
-        :chart-data="chartData"
-        :time-filter="timeFilter"
-        :query-params="queryParams"
-        :entity="entity"
-        :need-timeout="needTimeout"
-      ></chart-relation-ship>
-
-      <chart-san-key
-        v-else-if="isSankey"
-        :chart-info="chartInfo"
-        :chart-data="chartData"
-        :time-filter="timeFilter"
-        :query-params="queryParams"
-        :entity="entity"
-      ></chart-san-key>
-
-      <chart-echart
-        v-else-if="isEchartsLine || isEchartsPie"
-        :chart-info="chartInfo"
-        :chart-data="chartData"
-        :result-type="resultType"
-        :time-filter="timeFilter"
-        :need-timeout="needTimeout"
-        :query-params="queryParams"
-        @showLoading="showLoading"
-      ></chart-echart>
-
-      <chart-echart-with-statistics
-        v-else-if="isEchartsWithStatistics"
-        :chart-info="chartInfo"
-        :chart-data="chartData"
-        :result-type="resultType"
-        :time-filter="timeFilter"
-        :query-params="queryParams"
-        @showLoading="showLoading"
-      ></chart-echart-with-statistics>
-
-      <chart-echart-with-table
-        v-else-if="isEchartsWithTable"
-        :chart-info="chartInfo"
-        :chart-data="chartData"
-        :query-params="queryParams"
-        :time-filter="timeFilter"
-        :result-type="resultType"
-        :order-pie-table="orderPieTable"
-        @showLoading="showLoading"
-      ></chart-echart-with-table>
-
-      <chart-echart-ip-hosted-domain
-        v-else-if="isIpHostedDomain"
-        :chart-data="chartData"
-        :chart-info="chartInfo"
-        :time-filter="timeFilter"
-        :query-params="queryParams"
-        @showLoading="showLoading"
-        :entity="entity"
-      ></chart-echart-ip-hosted-domain>
-
-      <chart-echart-app-relate-domain
-        v-else-if="isAppRelatedDomain"
-        :chart-info="chartInfo"
-        :chart-data="chartData"
-        @showLoading="showLoading"
-        :entity="entity"
-        :time-filter="timeFilter"
-        :query-params="queryParams"
-      ></chart-echart-app-relate-domain>
-
-      <chart-one-situation-statistics
-        v-else-if="isSingleSupportStatistics"
-        :chart-info="chartInfo"
-        :chart-data="chartData"
-        :query-params="queryParams"
-        :time-filter="timeFilter"
-        :entity="entity"
-        @showLoading="showLoading"
-      ></chart-one-situation-statistics>
-
-      <chart-two-situation-statistics
-        v-else-if="isTwoSupportStatistics"
-        :chart-info="chartInfo"
-        :chart-data="chartData"
-        :time-filter="timeFilter"
-        :query-params="queryParams"
-        @showLoading="showLoading"
-        :entity="entity"
-      ></chart-two-situation-statistics>
-
-      <chart-alarm-info
-        v-else-if="isAlarmInfo"
-        :chart-info="chartInfo"
-        :chart-data="chartData"
-        :time-filter="timeFilter"
-        :query-params="queryParams"
-        @showLoading="showLoading"
-        :tabHandleClickType="tabHandleClickType"
-        @getAlarmInfo="getAlarmInfo"
-        :entity="entity"
-      >
-      </chart-alarm-info>
-      <chart-domain-recursive-resolve
-        :chart-data="chartData"
-        :time-filter="timeFilter"
-        :query-params="queryParams"
-        v-else-if="isDomainRecursiveResolve"
-      ></chart-domain-recursive-resolve>
-
-      <chart-detection-security
-        :chart-data="chartData"
-        :time-filter="timeFilter"
-        :chart-info="chartInfo"
-        :query-params="queryParams"
-        @chartDetection="chartDetection"
-        v-else-if="isDetectionSecurity"
-        @getDetectionData="getDetectionData"
-      ></chart-detection-security>
-
-      <chart-detection-service
-        :chart-data="chartData"
-        :time-filter="timeFilter"
-        :chart-info="chartInfo"
-        :query-params="queryParams"
-        @chartDetection="chartDetection"
-        v-else-if="isDetectionService"
-        @getDetectionData="getDetectionData"
-      ></chart-detection-service>
-
     </template>
   </div>
 </template>
@@ -279,34 +20,7 @@
 <script>
 import Loading from '@/components/common/Loading'
 import ChartNoData from '@/views/charts/charts/ChartNoData'
-import ChartTabs from '@/views/charts/charts/ChartTabs'
 import ChartMap from '@/views/charts/charts/ChartMap'
-import ChartSingleValue from '@/views/charts/charts/ChartSingleValue'
-import ChartBlock from '@/views/charts/charts/ChartBlock'
-import ChartGroup from '@/views/charts/charts/ChartGroup'
-import IpBasicInfo from '@/views/charts/charts/IpBasicInfo'
-import ChartEchart from '@/views/charts/charts/ChartEchart'
-import ChartEchartWithStatistics from '@/views/charts/charts/ChartEchartWithStatistics'
-import ChartEchartWithTable from '@/views/charts/charts/ChartEchartWithTable'
-import ChartEchartIpHostedDomain from '@/views/charts/charts/ChartEchartIpHostedDomain'
-import ChartEchartAppRelateDomain from '@/views/charts/charts/ChartEchartAppRelateDomain'
-import ChartActiveIpTable from '@/views/charts/charts/ChartActiveIpTable'
-import ChartTimeBar from './charts/ChartTimeBar'
-import ChartCategoryBar from './charts/ChartCategoryBar'
-import ChartIpOpenPortBar from './charts/ChartIpOpenPortBar'
-import ChartTable from './charts/ChartTable'
-import ChartAppBasicInfo from '@/views/charts/charts/ChartAppBasicInfo'
-import ChartDomainWhois from '@/views/charts/charts/ChartDomainWhois'
-import ChartDomainDnsRecord from '@/views/charts/charts/ChartDomainDnsRecord'
-import ChartCryptocurrencyEventList from '@/views/charts/charts/ChartCryptocurrencyEventList'
-import ChartRelationShip from '@/views/charts/charts/ChartRelationShip'
-import ChartSanKey from '@/views/charts/charts/ChartSanKey'
-import ChartOneSituationStatistics from '@/views/charts/charts/ChartOneSituationStatistics'
-import ChartTwoSituationStatistics from '@/views/charts/charts/ChartTwoSituationStatistics'
-import ChartAlarmInfo from '@/views/charts/charts/ChartAlarmInfo'
-import ChartDomainRecursiveResolve from '@/views/charts/charts/ChartDomainRecursiveResolve'
-import chartDetectionSecurity from '@/views/charts/charts/chartDetectionSecurity'
-import chartDetectionService from '@/views/charts/charts/chartDetectionService'
 import {
   isEcharts,
   isEchartsLine,
@@ -352,36 +66,9 @@ import _ from 'lodash'
 export default {
   name: 'chart',
   components: {
-    ChartSanKey,
-    ChartCryptocurrencyEventList,
-    ChartDomainDnsRecord,
-    ChartDomainWhois,
-    ChartAppBasicInfo,
-    ChartActiveIpTable,
-    ChartTable,
-    IpBasicInfo,
-    ChartSingleValue,
     Loading,
     ChartNoData,
-    ChartTabs,
+    ChartMap
-    ChartMap,
-    ChartBlock,
-    ChartTimeBar,
-    ChartCategoryBar,
-    ChartIpOpenPortBar,
-    ChartRelationShip,
-    ChartGroup,
-    ChartEchartWithStatistics,
-    ChartEchart,
-    ChartEchartWithTable,
-    ChartEchartIpHostedDomain,
-    ChartEchartAppRelateDomain,
-    ChartOneSituationStatistics,
-    ChartTwoSituationStatistics,
-    ChartAlarmInfo,
-    ChartDomainRecursiveResolve,
-    chartDetectionSecurity,
-    chartDetectionService
   },
   data () {
     return {

src/views/charts/charts/ChartActiveIpTable.vue

@@ -1,98 +0,0 @@
-<template>
-  <div class="cn-chart__table active-ip">
-    <div class="cn-chart__body">
-      <el-table
-          style="width: 100%;height: 100%"
-          tooltip-effect="light"
-          :data="activeIpTable.tableData"
-          :show-header="false"
-          :cell-style="{padding:'7px 0'}"
-      >
-        <el-table-column>
-          <template #default="{ row }">
-            <div class="active-ip__icon"><i class="cn-icon cn-icon-ip ip-green"></i></div>
-            <div class="active-ip__content" >
-              {{row['name']}}
-            </div>
-          </template>
-        </el-table-column>
-        <el-table-column align="center">
-          <template #default="{ row }">
-            <span>
-                {{row['num']}}
-            </span>
-          </template>
-        </el-table-column>
-
-        <el-table-column
-            v-for="c in table.tableColumns"
-            show-overflow-tooltip
-            :key="c"
-            :label="c"
-            :prop="c"
-        >
-          <template #default="{ row }">
-            <span v-if="c === 'bytes'">
-                {{unitConvert(row[c], unitTypes.byte).join(' ')}}
-            </span>
-            <span v-else-if="c === 'packets' || c === 'sessions'">
-                {{unitConvert(row[c], unitTypes.number).join(' ')}}
-            </span>
-            <span v-else>
-                {{row[c]}}
-            </span>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-  </div>
-</template>
-
-<script>
-import { unitTypes } from '@/utils/constants'
-import unitConvert from '@/utils/unit-convert'
-export default {
-  name: 'ChartActiveIpTable',
-  props: {
-    chartInfo: Object,
-    chartData: [Array, Object],
-    queryParams: Object,
-    table: Object
-  },
-  data () {
-    return {
-      unitConvert,
-      unitTypes,
-      activeIpTable: {
-        orderBy: 'machine',
-        tableData: [
-          {
-            name: '192.168.20.21',
-            num: 111
-
-          }, {
-            name: '192.168.20.22',
-            num: 345
-          }, {
-            name: '192.168.20.23',
-            num: 111
-
-          }, {
-            name: '192.168.20.24',
-            num: 345
-          }, {
-            name: '192.168.20.25',
-            num: 111
-
-          }, {
-            name: '192.168.20.26',
-            num: 345
-          }
-        ] // table的所有数据
-      }
-    }
-  },
-  mounted () {
-  }
-}
-</script>

src/views/charts/charts/ChartAlarmInfo.vue

@@ -1,213 +0,0 @@
-<template>
-  <div class="cn-chart__alarm-info">
-    <div class="no-data" v-if="isNoData">No data</div>
-    <template v-else>
-      <div class="alarm-info__box">
-        <div
-          class="box__body"
-          v-for="(value, index) in chartData ? chartData : []"
-          :key="index"
-        >
-          <div class="body__content">
-            <div class="content__icon-box">
-              <div
-                class="icon-box__icon"
-                :style="{
-                  background: eventSeverityColor[value.eventSeverity], opacity: 0.1}"
-              ></div>
-              <i
-                class="cn-icon cn-icon-alert"
-                :style="{
-                  color: eventSeverityColor[value.eventSeverity], opacity: 1}"
-              ></i>
-            </div>
-            <div class="content__text-box">
-              <div class="text-box__title">
-                <div v-if="value.entityType === 'domain'" :title="value.domain">
-                  <span>{{ value.domain }}</span>
-                </div>
-                <div v-if="value.entityType === 'app'" :title="value.appName">
-                  <span>{{ value.appName }}</span>
-                </div>
-                <div v-if="value.entityType === 'ip'" :title="value.serverIp">
-                  <span>{{ value.serverIp }}</span>
-                </div>
-              </div>
-
-              <div class="text-box__text">
-                <div
-                  class="text__type"
-                  :style="{
-                    color: eventSeverityColor[value.eventSeverity],
-                    'border-color': eventSeverityColor[value.eventSeverity],
-                  }"
-                  :title="value.eventType"
-                >
-                  {{ value.eventType }}
-                </div>
-                <div class="text__time-box">
-                  <i class="cn-icon cn-icon-time2"></i>
-
-                  <div class="time-box__start-time">
-                    &nbsp; {{ $t(`dns.startTime`) }}:&nbsp;&nbsp;&nbsp;
-                  </div>
-                  <div style="flex: 1;">
-                    {{value.startTime ? dateFormatByAppearance(value.startTime) : '-'}}
-                  </div>
-                </div>
-
-                <div class="text__duration-box">
-                  <i class="cn-icon cn-icon-time2"></i>
-                  <div class="time-box__start-time">
-                    &nbsp;{{ $t(`dns.duration`) }}:&nbsp;&nbsp;&nbsp;
-                  </div>
-
-                  <div
-                    class="duration-box__circle"
-                    :style="{
-                      background: eventSeverityColor[value.eventSeverity],
-                    }"
-                  ></div>
-                  &nbsp;&nbsp;&nbsp;
-                  <div>
-                    {{unitConvert(value.endTime - value.startTime, 'time').join(' ')}}
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <chart-table-pagination
-        ref="tablePagination"
-        class="alarm-info__pagination"
-        :total="alarmInfoCount.result"
-        :pageSizeForAlarm="pageSizeForAlarm"
-        v-model:currentPage="pageNo"
-        @pageJump="pageJump"
-      ></chart-table-pagination>
-    </template>
-  </div>
-</template>
-
-<script>
-import { eventSeverityColor } from '@/utils/constants'
-import unitConvert from '@/utils/unit-convert'
-import ChartTablePagination from '@/views/charts/charts/ChartTablePagination'
-import { get } from '@/utils/http'
-import { api } from '@/utils/api'
-
-export default {
-  name: 'isAlarmInfo',
-  props: {
-    chartInfo: Object,
-    chartData: [Array, Object],
-    tabHandleClickType: String,
-    queryParams: Object
-  },
-  data () {
-    return {
-      pageSizeForAlarm: 9,
-      eventSeverityColor: eventSeverityColor,
-      pageNo: 1,
-      alarmInfoCount: {},
-      fromChartData: '',
-      startTime: '',
-      endTime: ''
-    }
-  },
-  computed: {
-    isNoData () {
-      let isNoData = true
-      if (!this.$_.isEmpty(this.chartData)) {
-        isNoData = false
-      }
-      return isNoData
-    }
-  },
-  watch: {
-    tabHandleClickType: {
-      deep: true,
-      handler (n) {
-        this.$nextTick(() => {
-          this.getData(1, n)
-        })
-      }
-    },
-    queryParams: {
-      deep: true,
-      handler (n) {
-        if (n) {
-          this.startTime = n.startTime
-          this.endTime = n.endTime
-          this.getCount()
-        }
-      }
-    }
-  },
-  components: {
-    ChartTablePagination
-  },
-  methods: {
-    unitConvert,
-    getCount () {
-      const countQuery = {
-        startTime: this.startTime,
-        endTime: this.endTime,
-        eventSeverity:
-          this.tabHandleClickType === 'All' ? '' : this.tabHandleClickType
-      }
-      this.$nextTick(() => {
-        get(api.dashboard.DnsServiceInsights.alarmInfoCount, {
-          ...countQuery
-        }).then((response) => {
-          if (response.code === 200) {
-            this.alarmInfoCount = response.data
-          }
-        })
-      })
-    },
-    getData (val, n) {
-      this.pageNo = val
-      const extraParams = {
-        pageNo: val,
-        pageSize: this.pageSizeForAlarm,
-        eventSeverity: n
-          ? n === 'All'
-            ? ''
-            : n
-          : this.tabHandleClickType === 'All'
-            ? ''
-            : this.tabHandleClickType
-      }
-      const query = {
-        startTime: this.queryParams.startTime,
-        endTime: this.queryParams.endTime,
-        eventSeverity:
-          this.tabHandleClickType === 'All' ? '' : this.tabHandleClickType
-      }
-      this.$emit('getAlarmInfo', null, extraParams, false, {
-        startTime: query.startTime,
-        endTime: query.endTime
-      })
-      get(api.dashboard.DnsServiceInsights.alarmInfoCount, {
-        ...query
-      }).then((response) => {
-        if (response.code === 200) {
-          this.alarmInfoCount = response.data
-        }
-      })
-    },
-    pageJump (val) {
-      this.getData(val)
-    }
-  },
-  mounted () {
-    const _this = this
-    this.emitter.on('chart-info', function (value) {
-      _this.getData(1, value)
-    })
-    this.getCount()
-  }
-}
-</script>

src/views/charts/charts/ChartAppBasicInfo.vue

@@ -1,77 +0,0 @@
-<template>
-  <div class="cn-chart__app-basic">
-    <div class="cn-chart__body">
-      <div style="display: flex; justify-content: space-between; width: 100%;">
-        <el-descriptions :column="1" style="padding: 20px 30px;">
-          <el-descriptions-item :label="$t('overall.appName') + ':'">{{$_.get(chartData, "name") || '-'}}</el-descriptions-item>
-          <el-descriptions-item :label="$t('overall.appFullName') + ':'">{{$_.get(chartData, "appLongname") || '-'}}</el-descriptions-item>
-          <el-descriptions-item :label="$t('overall.technology') + ':'">{{$_.get(chartData, "appTechnology") || '-'}}</el-descriptions-item>
-          <el-descriptions-item :label="$t('overall.remark') + ':'">{{$_.get(chartData, "appDescription") || '-'}}</el-descriptions-item>
-        </el-descriptions>
-        <div class="cn-chart__body-single">
-          <div class="cn-chart__body-single-table">
-            <div class="single-value-icon__box">
-              <div class="single-value__icon"><i class="cn-icon cn-icon-category"></i></div>
-            </div>
-            <div class="single-value__content">
-              <div>
-                <span style="color: #666;">{{$t('entities.category')}}</span>
-              </div>
-              <div>
-                <span style="color: #333; font-weight: bold;">{{$_.get(chartData, "category") || '-'}}</span>
-              </div>
-            </div>
-          </div>
-          <div class="cn-chart__body-single-table">
-            <div class="single-value-icon__box">
-              <div class="single-value__icon single-value-color-g"><i class="cn-icon cn-icon-sub-category"></i></div>
-            </div>
-            <div class="single-value__content">
-              <div>
-                <span style="color: #666;">{{$t('entities.subcategory')}}</span>
-              </div>
-              <div>
-                <span style="color: #333; font-weight: bold;">{{$_.get(chartData, "subcategory") || '-'}}</span>
-              </div>
-            </div>
-          </div>
-          <div class="cn-chart__body-single-table">
-            <div class="single-value-icon__box">
-              <div class="single-value__icon single-value-color-y"><i class="cn-icon cn-icon-credit"></i></div>
-            </div>
-            <div class="single-value__content">
-              <div>
-                <span style="color: #666;">{{$t('entities.reputationLevel')}}</span>
-              </div>
-              <div>
-                <span style="color: #333; font-weight: bold;">{{$_.get(chartData, "risk") || '-'}}</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'ChartAppBasicInfo',
-  props: {
-    chartInfo: Object,
-    chartData: [Array, Object],
-    queryParams: Object
-  },
-  data () {
-    return {
-
-    }
-  },
-  mounted () {
-  }
-}
-</script>
-
-<style scoped>
-
-</style>

src/views/charts/charts/ChartBlock.vue

@@ -1,42 +0,0 @@
-<template>
-  <panel-chart-list
-      :time-filter="timeFilter"
-      :data-list="dataList"
-      :panel-lock="true"
-      :entity="entity"
-  >
-  </panel-chart-list>
-</template>
-
-<script>
-import chartMixin from '@/views/charts/charts/chart-mixin'
-import _ from 'lodash'
-import { ref } from 'vue'
-
-export default {
-  name: 'ChartBlock',
-  mixins: [chartMixin],
-  methods: {
-    reload () {
-      const t = _.cloneDeep(this.dataList)
-      this.dataList = []
-      this.$nextTick(() => {
-        this.dataList = t
-      })
-    }
-  },
-  setup (props) {
-    const copyAndSort = dataList => {
-      const list = _.cloneDeep(dataList)
-      return list.sort((data1, data2) => {
-        return data1.x - data2.x
-      })
-    }
-    const dataList = ref(copyAndSort(props.chartInfo.children))
-    return {
-      copyAndSort,
-      dataList
-    }
-  }
-}
-</script>

src/views/charts/charts/ChartCategoryBar.vue

@@ -1,78 +0,0 @@
-<template>
-    <div class="chart-drawing" :id="`chart${chartInfo.id}`"></div>
-</template>
-
-<script>
-import * as echarts from 'echarts'
-import {
-  categoryBar
-} from '@/views/charts/charts/options/bar'
-import { getCharBartColor, categoryBarTooltipFormatter } from '@/views/charts/charts/tools'
-import chartEchartMixin from './chart-echart-mixin'
-
-export default {
-  name: 'ChartCategoryBar',
-  mixins: [chartEchartMixin],
-  props: {
-    chartInfo: Object,
-    chartData: [Array, Object],
-    resultType: Object,
-    queryParams: Object
-  },
-  methods: {
-    initEcharts (id) {
-      const chartParams = this.chartInfo.params
-      const dom = document.getElementById(id)
-      !this.myChart && (this.myChart = echarts.init(dom))
-      this.chartOption = this.$_.cloneDeep(categoryBar)
-      this.chartOption.tooltip.trigger = 'item'
-      this.chartOption.tooltip.formatter = (params) => {
-        const str = categoryBarTooltipFormatter(params, chartParams.direction)
-        return str
-      }
-      if (!chartParams.itemColorAlternately) {
-        this.chartOption.series[0].itemStyle.color = function (params) {
-          return getCharBartColor(0)
-        }
-      }
-      if (chartParams.showLegend === false) {
-        this.chartOption.legend.show = false
-      }
-      const seriesTemplate = this.chartOption.series[0]
-      const obj = {
-        ...seriesTemplate,
-        name: ' ',
-        data: []
-      }
-      this.chartData.forEach((r, index) => {
-        if (chartParams.direction === 'horizontal') {
-          obj.data.push([Number(r.events), r.clientCountry + ' ' + r.clientRegion, chartParams.unitType])
-        } else {
-          obj.data.push([r.clientCountry + ' ' + r.clientRegion, Number(r.events), chartParams.unitType])
-        }
-        return obj
-      })
-      this.chartOption.series = obj
-      const rows = (this.chartData.length - 1) / 4 + 1 // 根据legend个数动态预留legend空间
-      const gridTop = 10 + 27 * rows
-      this.chartOption.grid.top = gridTop
-      if (chartParams.direction === 'horizontal') {
-        const temp = this.chartOption.yAxis
-        this.chartOption.yAxis = { ...this.chartOption.xAxis }
-        this.chartOption.xAxis = temp
-      }
-      this.loadEchartBar()
-    },
-    loadEchartBar () {
-      this.$emit('showLoading', true)
-      try {
-        this.myChart.setOption(this.chartOption)
-      } finally {
-        setTimeout(() => {
-          this.$emit('showLoading', false)
-        }, 200)
-      }
-    }
-  }
-}
-</script>

src/views/charts/charts/ChartCryptocurrencyEventList.vue

@@ -1,46 +0,0 @@
-<template>
-  <div class="cn-chart__table eventList">
-    <div class="cn-chart__body">
-      <div class="crypto-eventList__record">
-        <div class="record__table">
-          <div style="height: 100%; overflow: hidden auto;">
-            <div class="record__table-row" v-for="(data, index) in chartDate" :key="index">
-              <div class="record__table-cell">
-                <div class="circle1" style=""></div>
-              </div>
-              <div class="record__table-cell">
-                {{$_.get(data, "message") || '-'}}：{{$_.get(data, "serverIP") || '-'}}<br/>
-                <span class="record_second" > {{$_.get(data, "time") || '-'}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ $_.get(data, "clientIP") || '-'}}&nbsp;&nbsp;&nbsp; </span>
-                <div class="record_second arrow arrow-hor right"> </div>
-                <span class="record_second">&nbsp;&nbsp;&nbsp; {{$_.get(data, "serverIP") || '-'}}</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'ChartCryptocurrencyEventList',
-  props: {
-    chartInfo: Object,
-    chartData: [Array, Object],
-    queryParams: Object
-  },
-  data () {
-    return {
-      chartDate: [
-        { message: 'Traffic', serverIP: '1.3.2.2', clientIP: '1.3.2.2', time: '2022-01-19 20:06:25' },
-        { message: 'Traffic', serverIP: '1.3.2.2', clientIP: '1.3.2.2', time: '2022-01-19 20:06:25' },
-        { message: 'Traffic', serverIP: '1.3.2.2', clientIP: '1.3.2.2', time: '2022-01-19 20:06:25' },
-        { message: 'Traffic', serverIP: '1.3.2.2', clientIP: '1.3.2.2', time: '2022-01-19 20:06:25' },
-        { message: 'Traffic', serverIP: '1.3.2.2', clientIP: '1.3.2.2', time: '2022-01-19 20:06:25' },
-        { message: 'Traffic', serverIP: '1.3.2.2', clientIP: '1.3.2.2', time: '2022-01-19 20:06:25' }
-      ]
-    }
-  }
-}
-</script>

src/views/charts/charts/ChartDomainDnsRecord.vue

@@ -1,42 +0,0 @@
-<template>
-  <div class="cn-chart__dns-record">
-    <div class="cn-chart__body">
-      <div class="entity-detail__dns-record">
-        <div class="dns-record__table">
-          <div style="height: 100%; overflow: hidden auto;">
-            <div class="dns-record__table-row dns-record__table-row--header">
-              <div class="dns-record__table-cell" style="min-width: 200px;">{{ $t('overall.type') }}</div>
-              <div class="dns-record__table-cell" style="min-width: 200px;">{{ $t('overall.value') }}</div>
-              <div class="dns-record__table-cell" style="width: 100%;">{{ $t('overall.country') }}</div>
-            </div>
-            <div class="dns-record__table-row" v-for="(data, index) in chartDate" :key="index">
-              <div class="dns-record__table-cell">{{$_.get(data, "type") || '-'}}</div>
-              <div class="dns-record__table-cell">{{$_.get(data, "value") || '-'}}</div>
-              <div class="dns-record__table-cell">{{$_.get(data, "country") || '-'}}</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'ChartDomainDnsRecord',
-  props: {
-    chartInfo: Object,
-    chartData: [Array, Object],
-    queryParams: Object
-  },
-  data () {
-    return {
-      chartDate: [
-        { type: '1', value: '2', country: 'z' },
-        { type: '1', value: '2', country: 'm' },
-        { type: '1', value: '2', country: 'h' }
-      ]
-    }
-  }
-}
-</script>

src/views/charts/charts/ChartDomainRecursiveResolve.vue

@@ -1,205 +0,0 @@
-<template>
-  <div style="overflow-y: auto; height: 100%; color: #555; white-space: pre;padding: 6px 0px 6px 6px;">
-    <el-table :data="linuxLineSymbolConvert"
-              :show-header="false"
-              :span-method="arraySpanMethod"
-              style="width: 100%;"
-              tooltip-effect="light"
-              :cell-style="setCellStyle">
-      <el-table-column prop="c1" class-name="domain-tooltip">
-        <template v-slot="scope" >
-          <el-tooltip ref='tooltip_c1'
-                      popper-class="domain-recursive-resolve-popper"
-                      effect="light"
-                      placement="top"
-                      hide-after="0"
-                      show-after="50"
-          >
-            <template #content>{{scope.row['c1']}}</template>
-            <div class="short-content">{{scope.row['c1']}}</div>
-          </el-tooltip>
-        </template>
-      </el-table-column>
-      <el-table-column prop="c2" show-overflow-tooltip width="80"/>
-      <el-table-column prop="c3" show-overflow-tooltip width="70"/>
-      <el-table-column prop="c4" show-overflow-tooltip width="80" />
-      <el-table-column prop="c5" class-name="domain-tooltip">
-        <template v-slot="scope" >
-          <el-tooltip ref='tooltip_c5'
-                  popper-class="domain-recursive-resolve-popper"
-                  effect="light"
-                  placement="top"
-                  hide-after="0"
-                  show-after="50"
-          >
-            <template #content>{{scope.row['c5']}}</template>
-            <div class="short-content">{{scope.row['c5']}}</div>
-          </el-tooltip>
-        </template>
-      </el-table-column>
-    </el-table>
-  </div>
-</template>
-
-<script>
-import _ from 'lodash'
-export default {
-  name: 'ChartDomainRecursiveResolve',
-  props: {
-    chartInfo: Object,
-    chartData: String,
-    resultType: Object,
-    queryParams: Object
-  },
-  data () {
-    return {
-      dnsRecordType: [
-        'A',
-        'AAAA',
-        'AFSDB',
-        'ALIAS',
-        'CAA',
-        'CERT',
-        'CNAME',
-        'DHCID',
-        'DNAME',
-        'DNSKEY',
-        'DS',
-        'HINFO',
-        'HTTPS',
-        'LOC',
-        'MX',
-        'NAPTR',
-        'NS',
-        'NSEC',
-        'NSEC3',
-        'NSEC3PARAM',
-        'PTR',
-        'RP',
-        'RRSIG',
-        'SOA',
-        'SRV',
-        'TLSA',
-        'TXT'
-      ]
-    }
-  },
-  methods: {
-    setCellStyle ({ row, column, rowIndex, columnIndex }) {
-      const padding = '2px'
-      const border = '0px'
-      const background = '#F5F7FA'
-      if (columnIndex === 3) {
-        return {
-          color: '#598bd1',
-          background: background,
-          border: border,
-          padding: padding
-        }
-      } else if (columnIndex === 4) {
-        return {
-          'font-weight': 'bold',
-          background: background,
-          border: border,
-          padding: padding
-        }
-      } else {
-        return {
-          background: background,
-          border: border,
-          padding: padding
-        }
-      }
-    },
-    arraySpanMethod  ({ row, column, rowIndex, columnIndex }) {
-      if (_.isEmpty(row.c2) && _.isEmpty(row.c3) &&
-          _.isEmpty(row.c4) && _.isEmpty(row.c5)) {
-        // [1,5]表示合并1行5列，[0,0]表示改行不显示
-        if (columnIndex === 0) {
-          // 定位到6行0列的ID，告诉该单元格合并1行2列
-          return [1, 5]
-        } else if (columnIndex > 0) {
-          // 定位到6行1列的姓名，告诉该单元格不显示
-          return [0, 0]
-        }
-      }
-    }
-    /* isDnsRecordTypes(type){
-      if(_.indexOf(this.dnsRecordType, type)===-1){
-        return false
-      }else {
-        return true
-      }
-    } */
-  },
-  mounted () {
-  },
-  computed: {
-    linuxLineSymbolConvert () {
-      const dataArray = this.chartData ? this.chartData.split('\n') : []
-      const linuxArray = []
-      dataArray.forEach(item => {
-        const content = item.replace(/[\r\n]/g, '')
-        if (_.startsWith(content, ';')) {
-          const obj = {
-            c1: content,
-            c2: '',
-            c3: '',
-            c4: '',
-            c5: ''
-          }
-          linuxArray.push(obj)
-        } else if (content.length > 0) { // 忽略空白行
-          const separator = /\t+|\s+/
-          let rowArray = item.split(separator)
-          _.remove(rowArray, function (n) {
-            return _.isEmpty(n)
-          })
-          if (rowArray.length > 5) {
-            const specialArray = item.split(separator)
-            rowArray.forEach((i, index) => {
-              if (index >= 5) {
-                specialArray[4] = specialArray[4] + ' ' + i
-              }
-            })
-            const dnsTypes = specialArray[4].split(separator)
-            let isDnsTypeFinish = false
-            dnsTypes.forEach(item => {
-              if (!isDnsTypeFinish && this.dnsRecordType.indexOf(item) > -1) {
-                specialArray[3] = specialArray[3] + ' ' + item
-                specialArray[4] = specialArray[4].substring(specialArray[4].indexOf(item) + item.length)
-              } else {
-                isDnsTypeFinish = true
-              }
-            })
-            rowArray = specialArray
-          }
-          const obj = {
-            c1: rowArray[0] ? rowArray[0] : '',
-            c2: rowArray[1] ? rowArray[1] : '',
-            c3: rowArray[2] ? rowArray[2] : '',
-            c4: rowArray[3] ? rowArray[3] : '',
-            c5: rowArray[4] ? rowArray[4] : ''
-          }
-          linuxArray.push(obj)
-        }
-      })
-      return linuxArray
-    }
-  }
-}
-</script>
-<style lang="scss">
-   .domain-recursive-resolve-popper{
-     max-width:550px;
-   }
-  .domain-tooltip {
-    .short-content{
-      cursor:default;
-      overflow:hidden;
-      white-space:nowrap;
-      -ms-text-overflow: ellipsis;
-      text-overflow: ellipsis;
-    }
-  }
-</style>

src/views/charts/charts/ChartDomainWhois.vue

@@ -1,43 +0,0 @@
-<template>
-  <div class="cn-chart__whois">
-    <div class="cn-chart__body">
-      <div class="domain-detail-list">
-        <div class="domain-detail-list__row">
-          <div class="domain-detail-list__label">{{$t('entities.sponsor')}}</div>
-          <div class="domain-detail-list__content">{{ $_.get(chartData, "registrar") || '-'}}</div>
-        </div>
-        <div class="domain-detail-list__row">
-          <div class="domain-detail-list__label">{{$t('entities.org')}}</div>
-          <div class="domain-detail-list__content">{{ $_.get(chartData, "org") || '-'}}</div>
-        </div>
-        <div class="domain-detail-list__row">
-          <div class="domain-detail-list__label">Email</div>
-          <div class="domain-detail-list__content">{{ $_.get(chartData, "email") || '-'}}</div>
-        </div>
-        <div class="domain-detail-list__row">
-          <div class="domain-detail-list__label">{{$t('overall.country')}}</div>
-          <div class="domain-detail-list__content">{{ $_.get(chartData, "country") || '-'}}</div>
-        </div>
-        <div class="domain-detail-list__row">
-          <div class="domain-detail-list__label">{{$t('entities.creationDate')}}</div>
-          <div class="domain-detail-list__content">{{ dateFormatByAppearance($_.get(chartData, "createTime") * 1) || '-'}}</div>
-        </div>
-        <div class="domain-detail-list__row">
-          <div class="domain-detail-list__label">{{$t('entities.expirationDate')}}</div>
-          <div class="domain-detail-list__content">{{ dateFormatByAppearance($_.get(chartData, "expirationTime") * 1) || '-'}}</div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'ChartDomainWhois',
-  props: {
-    chartInfo: Object,
-    chartData: [Array, Object],
-    queryParams: Object
-  }
-}
-</script>

src/views/charts/charts/ChartEchart.vue

@@ -1,337 +0,0 @@
-<template>
-  <div class="chart-drawing" :id="`chart${chartInfo.id}`"></div>
-</template>
-
-<script>
-import unitConvert from '@/utils/unit-convert'
-import { lineToSpace, reverseSortBy, humpToSpace } from '@/utils/tools'
-import { unitTypes } from '@/utils/constants'
-import chartEchartMixin from './chart-echart-mixin'
-import { isEchartsLine, isEchartsPie } from './tools'
-import { legendMapping } from '@/views/charts/charts/chart-table-title'
-import _ from 'lodash'
-
-export default {
-  name: 'ChartEchart',
-  mixins: [chartEchartMixin],
-  data () {
-    return {}
-  },
-  props: {
-    resultType: Object,
-    chartInfo: Object
-  },
-  setup (props) {
-    return {
-      isEchartsPie: isEchartsPie(props.chartInfo.type),
-      isEchartsLine: isEchartsLine(props.chartInfo.type)
-    }
-  },
-  methods: {
-    initEcharts (id) {
-      this.initDom(id)
-      const chartParams = this.chartInfo.params
-      if (chartParams.showLegend === false) {
-        this.chartOption.legend.show = false
-      }
-      this.handleYaxis()
-
-      if (this.isEchartsPie) {
-        if (chartParams.size && chartParams.size === 'small') {
-          this.chartOption.series[0] = {
-            ...this.chartOption.series[0],
-            radius: ['30%', '45%'],
-            label: {
-              show: false
-            },
-            labelLine: {
-              show: false
-            }
-          }
-          this.chartOption.legend = {
-            ...this.chartOption.legend,
-            left: '60%',
-            itemGap: 5,
-            itemWidth: 8,
-            itemHeight: 8,
-            formatter: function (name) {
-              return name.length > 9 ? name.substr(0, 9) + '...' : name
-              // return echarts.format.truncateText(name, 6, '…');
-            },
-            tooltip: {
-              show: true
-            },
-            textStyle: {
-              // 图例文字的样式
-              color: '#666666',
-              fontSize: 12,
-              fontWeight: 400
-            }
-          }
-          let chartDataTmp = []
-          let otherData = []
-          this.chartData.sort(reverseSortBy('num'))
-
-          if (this.chartData.length > 5) {
-            chartDataTmp = this.chartData.slice(0, 5)
-            chartDataTmp.forEach((data) => {
-              if (data.name === '') {
-                data.name = ' '
-              }
-            })
-            let otherSum = 0
-            otherData = this.chartData.slice(5)
-            otherData.forEach((data) => {
-              otherSum = otherSum + data.num
-            })
-            chartDataTmp.push({ num: otherSum, name: 'other' })
-          } else if (this.chartData.length <= 5) {
-            chartDataTmp = this.chartData.slice(0, this.chartData.length)
-            chartDataTmp.forEach((data) => {
-              if (data.name === '') {
-                data.name = ' '
-              }
-            })
-          }
-
-          this.chartOption.series[0].data = chartDataTmp.map((d) => {
-            return {
-              name: lineToSpace(d.name),
-              data: d,
-              value: parseInt(d.num),
-              unitType: chartParams.unitType ? chartParams.unitType : 'number'
-            }
-          })
-        } else {
-          this.chartOption.series[0].data = this.chartData.map((d) => {
-            return {
-              name: lineToSpace(d.name),
-              data: d,
-              value: parseInt(d.num),
-              unitType: chartParams.unitType ? chartParams.unitType : 'number'
-            }
-          })
-        }
-      } else {
-        const seriesTemplate = this.chartOption.series[0]
-        this.chartOption.series = this.chartData.map((r) => {
-          if (r.legend && legendMapping[`${this.entity && this.entity.ip ? 'ip_' : ''}${r.legend}`]) {
-            r.legend = this.$t(legendMapping[`${this.entity && this.entity.ip ? 'ip_' : ''}${r.legend}`])
-          }
-          const serie = {
-            ...seriesTemplate,
-            name: legendMapping[
-              `${this.entity && this.entity.ip ? 'ip_' : ''}${r.legend}`
-            ]
-              ? legendMapping[
-                  `${this.entity && this.entity.ip ? 'ip_' : ''}${r.legend}`
-              ]
-              : (legendMapping[r.legend] ? legendMapping[r.legend] : humpToSpace(r.legend)),
-            data: r.values.map((v) => [
-              Number(v[0]) * 1000,
-              Number(v[1]),
-              chartParams.unitType
-            ])
-          }
-          if (this.isEchartsLine) {
-            serie.data = serie.data.slice(1, serie.data.length - 2)
-            if (this.chartData.length === 1) { // 只有一条曲线
-              if (!_.isNaN(parseFloat(this.chartData[0].aggregation.p50)) && !_.isNaN(parseFloat(this.chartData[0].aggregation.p90))) {
-                serie.markLine = {
-                  silent: true,
-                  symbol: 'none',
-                  label: {
-                    distance: [-50, 0],
-                    formatter (params) {
-                      const arr = unitConvert(Number(params.value), chartParams.unitType).join(' ')
-                      let desc = ''
-                      switch (params.dataIndex) {
-                        case 0: {
-                          desc = 'P50'
-                          break
-                        }
-                        case 1: {
-                          desc = 'P90'
-                          break
-                        }
-                        default:
-                          break
-                      }
-                      return `${arr} (${desc})`
-                    }
-                  },
-                  data: [
-                    {
-                      name: 'P50',
-                      yAxis: this.chartData[0].aggregation.p50
-                    },
-                    {
-                      name: 'P90',
-                      yAxis: this.chartData[0].aggregation.p90
-                    }
-                  ]
-                }
-              }
-            } else if (this.chartData.length > 1) { // 有多条曲线
-              this.myChart.on('legendselectchanged', this.handleLegendClick)
-            }
-          }
-          return serie
-        })
-      }
-
-      const gridTemplate = this.chartOption.grid
-      // option中默认单位是数字，当单位是字节、百分比、时间时，额外处理
-      if (chartParams.unitType === unitTypes.byte) {
-        this.chartOption.yAxis.axisLabel.formatter = function (value) {
-          return unitConvert(value, unitTypes.byte).join('')
-        }
-        this.chartOption.grid = {
-          ...gridTemplate,
-          left: 75
-        }
-      } else if (chartParams.unitType === unitTypes.percent) {
-        this.chartOption.yAxis.axisLabel.formatter = function (value) {
-          return unitConvert(value, unitTypes.percent).join('')
-        }
-      } else if (chartParams.unitType === unitTypes.time) {
-        this.chartOption.yAxis.axisLabel.formatter = function (value) {
-          return unitConvert(value, unitTypes.time).join('')
-        }
-      }
-
-      if (chartParams.showLegend) {
-        const rows = (this.chartData.length - 1) / 4 + 1 // 根据legend个数动态预留legend空间
-        this.chartOption.grid = {
-          ...this.chartOption.grid,
-          top: 10 + 27 * rows
-        }
-      }
-      this.loadEchart()
-    },
-
-    // 点击前，高亮legend个数
-    getSelectedNum (params) {
-      let selectedNum = 0
-      const legendItem = params.selected
-      for (const name in legendItem) {
-        if (name === params.name) {
-          if (!legendItem[name]) {
-            selectedNum = selectedNum + 1
-          }
-        } else {
-          if (legendItem[name]) {
-            selectedNum = selectedNum + 1
-          }
-        }
-      }
-      return selectedNum
-    },
-    // 点击后：高亮legend个数
-    getAfterSelectedNum (params) {
-      let selectedNum = 0
-      const legendItem = params.selected
-      for (const name in legendItem) {
-        if (legendItem[name]) {
-          selectedNum = selectedNum + 1
-        }
-      }
-      return selectedNum
-    },
-
-    // 自定义legend的点击事件:此方法只处理多条曲线的情况（单条曲线正常切换legend和曲线）
-    handleLegendClick (params) {
-      // legend点击事件
-      const legendNum = Object.keys(params.selected).length
-      const selectedNum = this.getSelectedNum(params)
-
-      const legendItem = params.selected
-      if (selectedNum === legendNum) { // 点击前：全部曲线高亮
-        for (const name in legendItem) {
-          if (name === params.name) {
-            legendItem[name] = true
-          } else {
-            legendItem[name] = false
-          }
-        }
-      } else if (selectedNum === 1 && !params.selected[params.name]) { // 点击前：多条曲线，且只有一条曲线高亮时
-        for (const name in legendItem) {
-          legendItem[name] = true
-        }
-      }
-      this.myChart.setOption({
-        legend: {
-          selected: legendItem
-        }
-      })
-
-      if (this.getAfterSelectedNum(params) === 1) { // 点击后只有一条曲线高亮
-        const chartParams = this.chartInfo.params
-        // 多条曲线，且只有一条曲线高亮时，显示P50 P90 分位值，不止一个时隐藏标线
-        let selectedName = ''
-        for (const name in legendItem) {
-          if (legendItem[name]) {
-            selectedName = name
-          }
-        }
-
-        const serieArray = []
-        this.chartOption.series.forEach((item, i) => {
-          if (item.name === selectedName) {
-            if (!_.isNaN(parseFloat(this.chartData[i].aggregation.p50)) && !_.isNaN(parseFloat(this.chartData[i].aggregation.p90))) {
-              const markLine = {
-                silent: true,
-                symbol: 'none',
-                label: {
-                  distance: [-50, 0],
-                  formatter (params) {
-                    const arr = unitConvert(Number(params.value), chartParams.unitType).join(' ')
-                    let desc = ''
-                    switch (params.dataIndex) {
-                      case 0: {
-                        desc = 'P50'
-                        break
-                      }
-                      case 1: {
-                        desc = 'P90'
-                        break
-                      }
-                      default:
-                        break
-                    }
-                    return `${arr} (${desc})`
-                  }
-                },
-                data: [
-                  {
-                    name: 'P50',
-                    yAxis: this.chartData[i].aggregation.p50
-                  },
-                  {
-                    name: 'P90',
-                    yAxis: this.chartData[i].aggregation.p90
-                  }
-                ]
-              }
-              item.markLine = markLine
-            }
-          }
-          serieArray.push(item)
-        })
-        this.myChart.setOption({
-          series: serieArray
-        })
-      } else { // 不止一条线高亮时隐藏标线
-        const serieArray = []
-        this.chartOption.series.forEach((item, i) => {
-          item.markLine = []
-          serieArray.push(item)
-        })
-        this.myChart.setOption({
-          series: serieArray
-        })
-      }
-    }
-  }
-}
-</script>

src/views/charts/charts/ChartEchartAppRelateDomain.vue

@@ -1,94 +0,0 @@
-<template>
-   <div class="app-detail__related-domain">
-      <div class="related-domain__list">
-         <div class="related-domain__list-title">{{$t('overall.domain')}}</div>
-         <div class="related-domain__list-body">
-            <div class="related-domain__list-row" v-for="(data, i) in chartData" :key="i"><i class="cn-icon cn-icon-domain"></i>&nbsp;{{data}}</div>
-         </div>
-      </div>
-      <div class="related-domain__chart">
-         <div>
-            <div class="related-domain__chart-title">{{$t('entities.byCategory')}}</div>
-            <div class="chart-drawing" :id="`chart${chartInfo.id}-0`"></div>
-         </div>
-         <div>
-            <div class="related-domain__chart-title">{{$t('entities.byCredit')}}</div>
-            <div class="chart-drawing" :id="`chart${chartInfo.id}-1`"></div>
-         </div>
-      </div>
-   </div>
-</template>
-
-<script>
-import chartEchartMixin from './chart-echart-mixin'
-import { get } from '@/utils/http'
-import { reverseSortBy } from '@/utils/tools'
-
-export default {
-  name: 'ChartEchartAppRelateDomain',
-  mixins: [chartEchartMixin],
-  methods: {
-    initEcharts (id) {
-      this.initDom(id, 2)
-      const chartParams = this.chartInfo.params
-      const domains = this.chartData.toString()
-      this.$emit('showLoading', true)
-
-      const typeUrl = chartParams.byCategoryUrl.slice(0, chartParams.byCategoryUrl.indexOf('?'))
-      const reputationUrlUrl = chartParams.byReputationUrl.slice(0, chartParams.byReputationUrl.indexOf('?'))
-
-      const byType = new Promise(resolve => {
-        get(typeUrl, { domains: domains }).then(response => {
-          // post(replaceUrlPlaceholder(chartParams.byCategoryUrl, { domains: domains })).then(response => {
-          if (response.code === 200) {
-            if (this.$_.isEmpty(response.data.result)) {
-              // this.noData0 = true
-            } else {
-              // this.noData0 = false
-              // const chartOption = this.$_.cloneDeep(this.chartOption)
-              const data = response.data.result.sort(reverseSortBy('uniqDomains')).map(d => {
-                return {
-                  data: d,
-                  name: d.categoryName,
-                  value: parseInt(d.uniqDomains),
-                  unitType: chartParams.unitType
-                }
-              })
-              this.chartOption.series[0].data = data
-            }
-          }
-        }).finally(() => {
-          resolve()
-        })
-      })
-      const byReputation = new Promise(resolve => {
-        get(reputationUrlUrl, { domains: domains }).then(response => {
-          if (response.code === 200) {
-            if (this.$_.isEmpty(response.data.result)) {
-              // this.noData1 = true
-            } else {
-              // this.noData1 = false
-              // const chartOption = this.$_.cloneDeep(this.chartOption)
-              const data = response.data.result.sort(reverseSortBy('uniqDomains')).map(d => {
-                return {
-                  data: d,
-                  name: d.reputationLevel,
-                  value: parseInt(d.uniqDomains),
-                  unitType: chartParams.unitType
-                }
-              })
-              this.chartOption2.series[0].data = data
-              // this.myChart2.setOption(chartOption)
-            }
-          }
-        }).finally(() => {
-          resolve()
-        })
-      })
-      Promise.all([byType, byReputation]).finally(response => {
-        this.loadEchart(2)
-      })
-    }
-  }
-}
-</script>

src/views/charts/charts/ChartEchartIpHostedDomain.vue

@@ -1,94 +0,0 @@
-<template>
-  <!-- IP详情 托管域名 -->
-   <div class="ip-detail__hosted-domain">
-      <div class="hosted-domain__list">
-         <div class="hosted-domain__list-title">{{$t('overall.domain')}}</div>
-         <div class="hosted-domain__list-body">
-            <div class="hosted-domain__list-row" v-for="(data, i) in chartData" :key="i">{{data.domain}}</div>
-         </div>
-      </div>
-      <div class="hosted-domain__chart">
-         <div>
-            <div class="hosted-domain__chart-title">{{$t('entities.byCategory')}}</div>
-            <div class="chart-drawing" :id="`chart${chartInfo.id}-0`"></div>
-         </div>
-         <div>
-            <div class="hosted-domain__chart-title">{{$t('entities.byCredit')}}</div>
-            <div class="chart-drawing" :id="`chart${chartInfo.id}-1`"></div>
-         </div>
-      </div>
-   </div>
-</template>
-
-<script>
-import { replaceUrlPlaceholder, reverseSortBy } from '@/utils/tools'
-import { get } from '@/utils/http'
-import chartEchartMixin from './chart-echart-mixin'
-
-export default {
-  name: 'ChartEchartIpHostedDomain',
-  mixins: [chartEchartMixin],
-  props: {
-    entity: Object
-  },
-  methods: {
-    initEcharts (id) {
-      this.initDom(id, 2)
-      const chartParams = this.chartInfo.params
-      const domains = this.chartData.map(function (item, i) {
-        return item.domain
-      }).join(',')
-
-      const byType = new Promise(resolve => {
-        get(replaceUrlPlaceholder(chartParams.byCategoryUrl, { domains: domains })).then(response => {
-          if (response.code === 200) {
-            if (this.$_.isEmpty(response.data.result)) {
-              // this.noData0 = true
-            } else {
-              // this.noData0 = false
-              // chartOption = this.$_.cloneDeep(this.chartOption)
-              const data = response.data.result.sort(reverseSortBy('uniqDomains')).map(d => {
-                return {
-                  data: d,
-                  name: d.categoryName,
-                  value: parseInt(d.uniqDomains),
-                  unitType: chartParams.unitType
-                }
-              })
-              this.chartOption.series[0].data = data
-            }
-          }
-          resolve()
-        })
-      })
-      const byCredit = new Promise(resolve => {
-        get(replaceUrlPlaceholder(chartParams.byReputationUrl, { domains: domains })).then(response => {
-          if (response.code === 200) {
-            if (this.$_.isEmpty(response.data.result)) {
-              // this.noData1 = true
-            } else {
-              // this.noData1 = false
-              // this.chartOption2 = this.$_.cloneDeep(this.chartOption)
-              const data = response.data.result.sort(reverseSortBy('uniqDomains')).map(d => {
-                return {
-                  data: d,
-                  name: d.reputationLevel,
-                  value: parseInt(d.uniqDomains),
-                  unitType: chartParams.unitType
-                }
-              })
-              this.chartOption2.series[0].data = data
-              // this.myChart2.setOption(this.chartOption2)
-            }
-          }
-          resolve()
-        })
-      })
-
-      Promise.all([byType, byCredit]).finally(response => {
-        this.loadEchart(2)
-      })
-    }
-  }
-}
-</script>

src/views/charts/charts/ChartEchartWithStatistics.vue

@@ -1,300 +0,0 @@
-<template>
-  <div class="chart-drawing" style="height: calc(100% - 17.5rem)" :id="`chart${chartInfo.id}`"></div>
-  <div class="cn-chart__footer">
-    <statistics-legend :data="statisticsData" :chart-info="chartInfo" @toggleLegend="toggleStatisticsLegend"></statistics-legend>
-  </div>
-</template>
-
-<script>
-import StatisticsLegend from '@/views/charts/charts/StatisticsLegend'
-import {
-  getChartColor
-} from '@/views/charts/charts/tools'
-import chartEchartMixin from './chart-echart-mixin'
-import unitConvert from '@/utils/unit-convert'
-import { unitTypes } from '@/utils/constants'
-import { legendMapping } from '@/views/charts/charts/chart-table-title'
-
-export default {
-  name: 'ChartEchartWithStatistics',
-  mixins: [chartEchartMixin],
-  data () {
-    return {
-      statisticsData: []
-    }
-  },
-  props: {
-    resultType: Object
-  },
-  components: {
-    StatisticsLegend
-  },
-  methods: {
-    initEcharts (id) {
-      this.initDom(id)
-      const chartParams = this.chartInfo.params
-      this.handleYaxis()
-      this.statisticsData = this.chartData.map(d => {
-        return {
-          ...d,
-          active: true
-        }
-      })
-      const seriesTemplate = this.chartOption.series[0]
-      this.chartOption.series = this.chartData.map((r, i) => {
-        if (r.legend && legendMapping[r.legend]) {
-          r.legend = this.$t(legendMapping[r.legend])
-        }
-        return {
-          ...seriesTemplate,
-          name: r.legend,
-          data: r.values.map(v => [Number(v[0]) * 1000, Number(v[1]), chartParams.unitType]),
-          lineStyle: {
-            color: getChartColor[i]
-          }
-        }
-      })
-      if (this.statisticsData.length === 1) {
-        const markLine = {
-          silent: true,
-          symbol: 'none',
-          label: {
-            distance: [-50, 0],
-            formatter (params) {
-              const arr = unitConvert(
-                Number(params.value),
-                chartParams.unitType
-              ).join(' ')
-              let desc = ''
-              switch (params.dataIndex) {
-                case 0: {
-                  desc = 'P50'
-                  break
-                }
-                case 1: {
-                  desc = 'P90'
-                  break
-                }
-                default:
-                  break
-              }
-              return `${arr} (${desc})`
-            }
-          },
-          data: [
-            {
-              name: 'P50',
-              yAxis: this.chartData[0].aggregation.p50
-                ? this.chartData[0].aggregation.p50
-                : 50
-            },
-            {
-              name: 'P90',
-              yAxis: this.chartData[0].aggregation.p90
-                ? this.chartData[0].aggregation.p90
-                : 90
-            }
-          ]
-        }
-        const serieTmp = this.chartOption.series[0]
-        this.chartOption.series[0] = {
-          ...serieTmp,
-          markLine: markLine
-        }
-      }
-      const gridTemplate = this.chartOption.grid
-      // option中默认单位是数字，当单位是字节、百分比、时间时，额外处理
-      if (chartParams.unitType === unitTypes.byte) {
-        this.chartOption.yAxis.axisLabel.formatter = function (value) {
-          return unitConvert(value, unitTypes.byte).join('')
-        }
-        this.chartOption.grid = {
-          ...gridTemplate,
-          left: 75
-        }
-      } else if (chartParams.unitType === unitTypes.percent) {
-        this.chartOption.yAxis.axisLabel.formatter = function (value) {
-          return unitConvert(value, unitTypes.percent).join('')
-        }
-      } else if (chartParams.unitType === unitTypes.time) {
-        this.chartOption.yAxis.axisLabel.formatter = function (value) {
-          return unitConvert(value, unitTypes.time).join('')
-        }
-      }
-      this.loadEchart(1, true)
-    },
-
-    dispatchLegendSelectAction (name) {
-      this.myChart.dispatchAction({
-        type: 'legendSelect',
-        name: name
-      })
-    },
-
-    dispatchLegendUnSelectAction (name) {
-      this.myChart.dispatchAction({
-        type: 'legendUnSelect',
-        name: name
-      })
-    },
-
-    toggleStatisticsLegend (index) {
-      const legendNum = this.statisticsData.length
-      const chartParams = this.chartInfo.params
-      if (legendNum > 1) {
-        const selectedNum = this.statisticsData.filter(item => { return item.active === true }).length // 点击前，高亮legend个数
-        if (selectedNum === legendNum) { // 全部曲线高亮时
-          this.statisticsData.forEach((item, indexTmp) => {
-            if (indexTmp === index) {
-              item.active = true
-              this.dispatchLegendSelectAction(item.legend)
-            } else {
-              item.active = false
-              this.dispatchLegendUnSelectAction(item.legend)
-            }
-          })
-        } else if (selectedNum === 1 && this.statisticsData[index].active) { // 多条曲线，且只有一条曲线高亮, 且点击的曲线为高亮曲线时
-          this.statisticsData.forEach((item) => {
-            item.active = true
-            this.dispatchLegendSelectAction(item.legend)
-          })
-        } else {
-          this.statisticsData[index].active = !this.statisticsData[index].active
-          this.statisticsData.forEach((item, i) => {
-            if (item.active) {
-              this.dispatchLegendSelectAction(item.legend)
-            } else {
-              this.dispatchLegendUnSelectAction(item.legend)
-            }
-          })
-        }
-
-        const selectedAfterNum = this.statisticsData.filter((item, i) => { return item.active === true }).length // 点击后，高亮legend个数
-        if (selectedAfterNum === 1) { // 点击后只有一条曲线高亮
-          const chartParams = this.chartInfo.params
-          // 多条曲线，且只有一条曲线高亮时，显示P50 P90 分位值，不止一个时隐藏标线
-          const selectedName = this.statisticsData.filter((item, i) => { return item.active === true })[0].legend
-
-          const serieArray = []
-          this.chartOption.series.forEach((item, i) => {
-            if (item.name === selectedName) {
-              const markLine = {
-                silent: true,
-                symbol: 'none',
-                label: {
-                  distance: [-50, 0],
-                  formatter (params) {
-                    const arr = unitConvert(
-                      Number(params.value),
-                      chartParams.unitType
-                    ).join(' ')
-                    let desc = ''
-                    switch (params.dataIndex) {
-                      case 0: {
-                        desc = 'P50'
-                        break
-                      }
-                      case 1: {
-                        desc = 'P90'
-                        break
-                      }
-                      default:
-                        break
-                    }
-                    return `${arr} (${desc})`
-                  }
-                },
-                data: [
-                  {
-                    name: 'P50',
-                    yAxis: this.chartData[i].aggregation.p50
-                      ? this.chartData[i].aggregation.p50
-                      : 50
-                  },
-                  {
-                    name: 'P90',
-                    yAxis: this.chartData[i].aggregation.p90
-                      ? this.chartData[i].aggregation.p90
-                      : 90
-                  }
-                ]
-              }
-              item.markLine = markLine
-            }
-            serieArray.push(item)
-          })
-          this.myChart.setOption({
-            series: serieArray
-          })
-        } else { // 不止一条线高亮时隐藏标线
-          const serieArray = []
-          this.chartOption.series.forEach((item, i) => {
-            item.markLine = []
-            serieArray.push(item)
-          })
-          this.myChart.setOption({
-            series: serieArray
-          })
-        }
-      } else {
-        this.statisticsData[index].active = !this.statisticsData[index].active
-        this.statisticsData.forEach((item, i) => {
-          if (item.active) {
-            this.dispatchLegendSelectAction(item.legend)
-          } else {
-            this.dispatchLegendUnSelectAction(item.legend)
-          }
-        })
-
-        const selectedAfterNum = this.statisticsData.filter((item, i) => { return item.active === true }).length // 点击后，高亮legend个数
-        if (selectedAfterNum === 1) { // 点击后只有一条曲线高亮
-          const markLine = {
-            silent: true,
-            symbol: 'none',
-            label: {
-              distance: [-50, 0],
-              formatter (params) {
-                const arr = unitConvert(
-                  Number(params.value),
-                  chartParams.unitType
-                ).join(' ')
-                let desc = ''
-                switch (params.dataIndex) {
-                  case 0: {
-                    desc = 'P50'
-                    break
-                  }
-                  case 1: {
-                    desc = 'P90'
-                    break
-                  }
-                  default:
-                    break
-                }
-                return `${arr} (${desc})`
-              }
-            },
-            data: [
-              {
-                name: 'P50',
-                yAxis: this.chartData[0].aggregation.p50
-                  ? this.chartData[0].aggregation.p50
-                  : 50
-              },
-              {
-                name: 'P90',
-                yAxis: this.chartData[0].aggregation.p90
-                  ? this.chartData[0].aggregation.p90
-                  : 90
-              }
-            ]
-          }
-          this.chartOption.series[0].markLine = markLine
-        } else {
-          this.chartOption.series[0].markLine = []
-        }
-      }
-    }
-  }
-}
-</script>

src/views/charts/charts/ChartEchartWithTable.vue

@@ -1,149 +0,0 @@
-<template>
-  <div class="cn-chart__echarts" >
-    <div class="cn-chart__body pie-with-table" >
-      <div class="chart-drawing" :id="`chart${chartInfo.id}`"></div>
-    </div>
-    <div class="cn-chart__footer pie-with-table" >
-      <pie-table :tableData="pieTableData" ref="pieTable" :chartInfo="chartInfo" :time-filter="handleQueryParams(queryParams)" :order="orderPieTable"/>
-    </div>
-  </div>
-</template>
-
-<script>
-import PieTable from '@/views/charts/charts/PieTable'
-import { getUnitType } from '@/utils/unit-convert'
-import { replaceUrlPlaceholder } from '@/utils/tools'
-import { get } from '@/utils/http'
-import chartEchartMixin from './chart-echart-mixin'
-import { riskLevelMapping } from '@/utils/constants'
-
-export default {
-  name: 'ChartEchartWithTable',
-  mixins: [chartEchartMixin],
-  data () {
-    return {
-      pieTableData: [],
-      selectPieChartName: '',
-      allSelectPieChartName: []
-    }
-  },
-  props: {
-    resultType: Object,
-    queryParams: Object,
-    orderPieTable: String
-  },
-  components: {
-    PieTable
-  },
-  computed: {
-    appRisk () {
-      return function (level) {
-        const m = riskLevelMapping.find(mapping => {
-          return mapping.value == level
-        })
-        return (m && m.name) || level
-      }
-    }
-  },
-  methods: {
-    handleQueryParams (queryParams) {
-      this.timeFilter = {
-        startTime: Number(queryParams.startTime) * 1000,
-        endTime: Number(queryParams.endTime) * 1000
-      }
-    },
-    initEcharts (id) {
-      this.initDom(id)
-      const chartParams = this.chartInfo.params
-      chartParams.valueColumn = this.orderPieTable
-      const unitType = getUnitType(chartParams.valueColumn)
-      const tableQueryParams = this.$_.cloneDeep(this.queryParams)
-      tableQueryParams[chartParams.nameColumn] = [] // 处理两个图表不一样的地方)
-      this.handleYaxis()
-      const data = this.chartData.map(d => {
-        if (d[chartParams.nameColumn]) {
-          this.allSelectPieChartName.push(d[chartParams.nameColumn])
-        }
-        return {
-          data: d,
-          name: this.appRisk(d[chartParams.nameColumn]),
-          value: parseInt(d[chartParams.valueColumn]),
-          unitType: unitType
-        }
-      })
-
-      this.allSelectPieChartName = tableQueryParams[chartParams.nameColumn]
-      this.chartOption.series[0].data = data
-      if (this.chartOption.series[0].data && this.chartOption.series[0].data.length > 10) { // pieWithTable 图例超过10个改为滚动显示
-        this.chartOption.legend.type = 'scroll'
-      }
-      this.loadEchart()
-
-      if (!this.$_.isEmpty(data)) {
-        get(replaceUrlPlaceholder(chartParams.urlTable, tableQueryParams)).then(response => {
-          if (response.code === 200) {
-            this.pieTableData = response.data.result
-          } else {
-            // this.isError = true
-            this.noData = true
-            // this.errorInfo = response.msg || response.message || 'Unknown'
-          }
-        })
-      }
-
-      const self = this
-      // legend点击事件
-      this.myChart.off('legendselectchanged')
-      this.myChart.on('legendselectchanged', function (params) {
-        self.myChart.setOption({
-          legend: { selected: { [params.name]: true } }
-        })
-        const index = self.chartOption.series[0].data.findIndex(d => d.name === params.name)
-        if (self.selectPieChartName !== params.name) {
-          self.myChart.dispatchAction({
-            type: 'select',
-            seriesIndex: 0,
-            dataIndex: index
-          })
-          self.selectPieChartName = params.name
-          if (self.chartInfo.params.riskMapping) {
-            self.loadPieTableData(riskLevelMapping.find(m => params.name === m.name).value)
-          } else {
-            self.loadPieTableData(params.name)
-          }
-        } else {
-          self.myChart.dispatchAction({
-            type: 'unselect',
-            seriesIndex: 0,
-            dataIndex: index
-          })
-          self.selectPieChartName = ''
-          self.loadPieTableData(this.allSelectPieChartName)
-        }
-      })
-      // 饼图色块点击事件
-      this.myChart.off('click')
-      this.myChart.on('click', function (echartParams) {
-        // 若是已选，则点击后取消选择，并查询全部数据
-        if (echartParams.name === self.selectPieChartName) {
-          self.selectPieChartName = ''
-          self.loadPieTableData(this.allSelectPieChartName)
-        } else { // 否则查询当前name数据
-          self.selectPieChartName = echartParams.name
-          self.loadPieTableData(echartParams.data.data.appRisk || echartParams.name)
-        }
-      })
-    },
-
-    loadPieTableData (name = '') {
-      const childrenParams = this.$_.cloneDeep(this.queryParams)
-      childrenParams[this.chartInfo.params.nameColumn] = name
-      get(replaceUrlPlaceholder(this.chartInfo.params.urlTable, childrenParams)).then(response => {
-        if (response.code === 200) {
-          this.pieTableData = response.data.result
-        }
-      })
-    }
-  }
-}
-</script>

src/views/charts/charts/ChartGroup.vue

@@ -1,41 +0,0 @@
-<template>
-  <panel-chart-list
-      :time-filter="timeFilter"
-      :query-params="queryParams"
-      :data-list="dataList"
-      :panel-lock="true"
-      :entity="entity"
-      :need-timeout="true"
-  >
-  </panel-chart-list>
-</template>
-
-<script>
-import chartMixin from '@/views/charts/charts/chart-mixin'
-import _ from 'lodash'
-import { ref } from 'vue'
-
-export default {
-  name: 'ChartGroup',
-  mixins: [chartMixin],
-  props: {
-    timeFilter: Object,
-    queryParams: Object
-  },
-  methods: {
-    reload () {
-      const t = _.cloneDeep(this.dataList)
-      this.dataList = []
-      this.$nextTick(() => {
-        this.dataList = t
-      })
-    }
-  },
-  setup (props) {
-    const dataList = ref([...props.chartInfo.children])
-    return {
-      dataList
-    }
-  }
-}
-</script>

src/views/charts/charts/ChartIpOpenPortBar.vue

@@ -1,100 +0,0 @@
-<template>
-    <div class="chart-ip-open-port-bar">
-        <el-table
-                ref="table"
-                class="pie-table"
-                :data="tableData"
-                style="width: 70%;"
-                tooltip-effect="light"
-                empty-text=""
-                border="none"
-                :size="'mini'"
-                :height="'100%'">
-            <el-table-column
-                    v-for="item in tableKey"
-                    :key="item.prop"
-                    :label="item.label"
-                    :prop="item.prop"
-                    :min-width="item.width"
-            >
-                <template v-slot="scope" :column="item">
-                  <span v-if="item.prop === 'utime'">
-                    {{ dateFormatByAppearance(scope.row[item.prop]) }}
-                  </span>
-                  <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
-                  <template v-else>-</template>
-                </template>
-            </el-table-column>
-        </el-table>
-        <div class="chart-box">
-            <div class="title">
-                Protocols statistics
-            </div>
-            <div class="chart-drawing" :id="`chart${chartInfo.id}`">
-
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-import lodash from 'lodash'
-import { ipOpenPortBar } from '@/views/charts/charts/options/bar'
-import { getChartColor } from '@/views/charts/charts/tools'
-import * as echarts from 'echarts'
-import chartEchartMixin from './chart-echart-mixin'
-export default {
-  name: 'ChartIpOpenPortBar',
-  mixins: [chartEchartMixin],
-  props: {
-    chartInfo: Object,
-    chartData: [Array, Object],
-    resultType: Object,
-    queryParams: Object
-  },
-  data () {
-    return {
-      tableData: [],
-      tableKey: [
-        {
-          label: 'Port',
-          prop: 'port',
-          width: '15%'
-        }, {
-          label: 'Protocol',
-          prop: 'protocol',
-          width: '20%'
-        }, {
-          label: 'Banner',
-          prop: 'banner',
-          width: '40%'
-        }, {
-          label: 'Updated at',
-          prop: 'utime',
-          width: '25%'
-        }
-      ]
-    }
-  },
-  methods: {
-    initEcharts (id) {
-      const dom = document.getElementById(id)
-      !this.myChart && (this.myChart = echarts.init(dom))
-      this.tableData = lodash.cloneDeep(this.chartData)
-      this.chartOption = this.$_.cloneDeep(ipOpenPortBar)
-      const protocols = []
-      this.tableData.forEach((d, i) => {
-        const index = protocols.findIndex(p => p.name === d.protocol.toUpperCase())
-        if (index === -1) {
-          protocols.push({ name: d.protocol.toUpperCase(), value: 1, itemStyle: { color: getChartColor(i) } })
-        } else {
-          protocols[index].value++
-        }
-      })
-      this.chartOption.series[0].data = protocols
-      this.chartOption.xAxis.data = protocols.map(p => p.name)
-      this.myChart.setOption(this.chartOption)
-    }
-  }
-}
-</script>

src/views/charts/charts/ChartOneSituationStatistics.vue

@@ -1,27 +0,0 @@
-<template>
-  <div class="cn-chart__one-situation-statistics">
-    <div class="one-situation-statistics__box">
-      <div class="box__progress">
-        <el-progress
-          type="circle"
-          :color="chartInfo.params.color"
-          :percentage="Math.floor(($_.get(chartData, 'percent', '-') * 100) * 100) / 100"
-        />
-      </div>
-      <div class="box__count">
-        <div> {{ $_.get(chartData, 'count', '-') }} </div>
-        <div>{{ $t(`dns.numberOfNodes`) }}</div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'ChartOneSituationStatistics',
-  props: {
-    chartInfo: Object,
-    chartData: [Array, Object]
-  }
-}
-</script>

src/views/charts/charts/ChartRelationShip.vue

@@ -1,319 +0,0 @@
-<template>
-  <div class="chart-drawing chart-drawing-ship__width" :id="`chart${chartInfo.id}`"></div>
-  <div class="ship" :class="{'ship--show': showList}" v-ele-click-outside="shipChangeDown" id="ship">
-    <div class="ship-title">
-      <div class="ship-title-symbol" v-if="entityData.tableData.symbol"><img :src="entityData.tableData.symbol" /></div>
-      <div class="ship-title-name">{{ $_.get(entityData.tableData, 'name') || '-' }}</div>
-    </div>
-    <div class="ship-body">
-      <div class="ship-body-basicInfo" v-if="entityData.tableData.type === 'ip'">
-        <loading :loading="loadingIp"></loading>
-        <div class="ship-body-list">
-          <div class="ship-body-list-title">{{$t('overall.location')}}</div>
-          <div class="ship-body-list-value">{{ipLocationRegion(entityData)}}</div>
-        </div>
-        <div class="ship-body-list">
-          <div class="ship-body-list-title">ASN</div>
-          <div class="ship-body-list-value">{{entityData.asn || '-'}}</div>
-        </div>
-      </div>
-      <div class="ship-body-basicInfo" v-if="entityData.tableData.type === 'app'">
-        <loading :loading="loadingApp"></loading>
-        <div class="ship-body-list">
-         <div class="ship-body-list-title">APP ID</div>
-         <div class="ship-body-list-value">{{entityData.appId|| '-'}}</div>
-       </div>
-        <div class="ship-body-list">
-         <div class="ship-body-list-title">{{$t('entities.category')}}</div>
-         <div class="ship-body-list-value">{{entityData.category|| '-'}}</div>
-       </div>
-        <div class="ship-body-list">
-          <div class="ship-body-list-title">{{$t('entities.subcategory')}}</div>
-          <div class="ship-body-list-value">{{entityData.subcategory || '-'}}</div>
-        </div>
-        <div class="ship-body-list">
-         <div class="ship-body-list-title">{{$t('entities.riskLevel')}}</div>
-         <div class="ship-body-list-value">{{appRisk(entityData.appRisk) || '-'}}</div>
-       </div>
-      </div>
-      <div class="ship-body-basicInfo" v-if="entityData.tableData.type === 'domain'">
-        <loading :loading="loadingDomain"></loading>
-        <div class="ship-body-list">
-            <div class="ship-body-list-title">{{$t('entities.category')}}</div>
-            <div class="ship-body-list-value">{{entityData.domainCategory || '-'}}</div>
-          </div>
-        <div class="ship-body-list">
-            <div class="ship-body-list-title">{{$t('entities.domainDetail.categoryGroup')}}</div>
-            <div class="ship-body-list-value">{{entityData.domainCategoryGroup || '-'}}</div>
-          </div>
-        <div class="ship-body-list">
-            <div class="ship-body-list-title">{{$t('entities.reputationLevel')}}</div>
-            <div class="ship-body-list-value">{{entityData.domainReputationScore || '-'}}</div>
-          </div>
-        <div class="ship-body-list">
-            <div class="ship-body-list-title">{{$t('entities.registration')}}</div>
-            <div class="ship-body-list-value">{{entityData.domainWhoisAddress || '-'}}</div>
-          </div>
-        <div class="ship-body-list">
-          <div class="ship-body-list-title">{{$t('entities.org')}}</div>
-          <div class="ship-body-list-value">{{entityData.domainWhoisOrg || '-'}}</div>
-        </div>
-      </div>
-      <div class="ship-body-list ship-body-child">
-        <div class="ship-body-list-title">{{$t('overall.traffic')}}</div>
-        <div class="ship-body-list-child">
-          <loading :loading="loadingTraffic"></loading>
-          <div class="ship-body-list-child-left">
-            <div class="ship-body-list-child-title">{{$t('overall.received')}}</div>
-            <div class="ship-body-list-child-value">
-              <div class="ship-body-list-child-msg">{{unitConvert(entityData.bytesReceivedRate, unitTypes.byte).join(' ')}}ps</div>
-              <div class="ship-body-list-child-loading">
-                <div class="ship-body-list-child-charts" id="entityDetailReceived"></div>
-              </div>
-            </div>
-          </div>
-          <div class="ship-body-list-child-left">
-            <div class="ship-body-list-child-title">{{$t('overall.sent')}}</div>
-            <div class="ship-body-list-child-value">
-              <div class="ship-body-list-child-msg">{{unitConvert(entityData.bytesSentRate, unitTypes.byte).join(' ')}}ps</div>
-              <div class="ship-body-list-child-loading">
-                <div class="ship-body-list-child-charts" id="entityDetailSend"></div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="ship-body-list ship-body-child">
-        <div class="ship-body-list-title">{{$t('relationShip.serviceQuality')}}</div>
-        <div class="ship-body-list-child">
-          <loading :loading="loadingServiceQuality"></loading>
-          <div class="ship-body-list-child-left">
-            <div class="ship-body-list-child-trip">{{$t('networkAppPerformance.tripTime')}}: </div><span>{{unitConvert(entityData.establishLatencyMs, unitTypes.time).join(' ')}}</span>
-          </div>
-          <div class="ship-body-list-child-left">
-            <div class="ship-body-list-child-trip">{{$t('overall.packetLoss')}}: </div><span>{{unitConvert(entityData.pktRetransPercent, unitTypes.percent).join(' ')}}</span>
-          </div>
-        </div>
-      </div>
-      <div class="ship-body-list">
-        <loading :loading="loadingAlert"></loading>
-        <div class="ship-body-list-title">{{$t('relationShip.alert')}}</div>
-        <div class="ship-body-list-value security">
-          <template v-if="shipSeverity.length > 0">
-            <span v-for="ship in shipSeverity" class="ship-severity" :key="ship">
-              <span class="ship-body-list-security-alert" :class="iconClass(ship)">{{ ship.eventSeverity }}</span>
-              <span class="ship-body-list-security-length">{{ ship.totalNumberOfEvents }}</span>
-            </span>
-          </template>
-          <span v-else-if="!loadingAlert && shipSeverity.length <= 0" class="no-recent-alerts"><i style="font-size: 14px;" class="el-icon-success"></i>{{$t('relationShip.noRecentAlerts')}}</span>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import * as echarts from 'echarts'
-import _ from 'lodash'
-import { relationShip } from './options/sankey'
-import ChartRelationShip from '@/views/charts/charts/chart-relation-ship'
-import { api } from '@/utils/api'
-import { getSecond } from '@/utils/date-util'
-import { unitTypes } from '@/utils/constants'
-import unitConvert from '@/utils/unit-convert'
-import loading from '@/components/common/Loading'
-
-export default {
-  name: 'ChartRelationShip',
-  data () {
-    return {
-      myChart: null,
-      chartOption: null,
-      showList: true,
-      timer: null,
-      relationShipIpUrl: {
-        entityType: 'ip',
-        trafficUrl: api.entityIpDetailTraffic,
-        performanceUrl: api.entityIpDetailPerformance,
-        securityUrl: api.entityIpDetailSecurity,
-        ServerOverviewUrl: api.entityIpRelatedServerIpOverview,
-        basicProperties: api.entityIpDetailBasic
-      },
-      relationShipDomainUrl: {
-        entityType: 'domain',
-        trafficUrl: api.entityDomainDetailTraffic,
-        performanceUrl: api.entityDomainDetailPerformance,
-        securityUrl: api.entityDomainDetailSecurity,
-        ServerOverviewUrl: api.entityDomainRelatedServerDomainOverview,
-        basicProperties: api.entityDomainDetailBasic
-      },
-      relationShipAppUrl: {
-        entityType: 'app',
-        trafficUrl: api.entityAppDetailTraffic,
-        performanceUrl: api.entityAppDetailPerformance,
-        securityUrl: api.entityAppDetailSecurity,
-        ServerOverviewUrl: api.entityAppRelatedServerAppOverview,
-        basicProperties: api.entityAppDetailBasic
-      },
-      loadingAlert: false,
-      loadingServiceQuality: false,
-      loadingTraffic: false,
-      loadingIp: false,
-      loadingDomain: false,
-      loadingApp: false,
-      tableName: '',
-
-      firstRender: true
-    }
-  },
-  components: {
-    loading
-  },
-  mixins: [ChartRelationShip],
-  props: {
-    chartInfo: Object,
-    chartData: [Array, Object],
-    resultType: Object,
-    queryParams: Object,
-    entity: Object,
-    needTimeout: Boolean
-  },
-  methods: {
-    init (id) {
-      const name = this.$route.query.name
-      const path = window.location.protocol + '//' + window.location.host
-      const dom = document.getElementById(id)
-      const div = document.getElementById('ship')
-      !this.myChart && (this.myChart = echarts.init(dom))
-      this.chartOption = this.$_.cloneDeep(relationShip)
-      const data = []
-      const links = []
-      handleData(data, links, this.chartData)
-      const _this = this
-      let queryParams = {}
-      this.myChart.on('click', function (params) {
-        this.tableName = params.data.name
-        setTimeout(() => {
-          div.style.left = params.event.event.offsetX + 'px'
-          if (dom.offsetHeight > (params.event.event.offsetY + div.offsetHeight)) {
-            div.style.top = params.event.event.offsetY + 'px'
-            div.style.bottom = ''
-          } else {
-            div.style.top = ''
-            div.style.bottom = '10px'
-          }
-          _this.showList = true
-        }, 300)
-
-        if (params.data.type === 'ip') {
-          queryParams = {
-            ip: params.data.name,
-            startTime: getSecond(_this.timeFilter.startTime),
-            endTime: getSecond(_this.timeFilter.endTime)
-          }
-          _this.queryEntityDetail(_this.relationShipIpUrl, params, queryParams)
-        } else if (params.data.type === 'app_name') {
-          queryParams = {
-            appName: params.data.name,
-            startTime: getSecond(_this.timeFilter.startTime),
-            endTime: getSecond(_this.timeFilter.endTime)
-          }
-          _this.queryEntityDetail(_this.relationShipAppUrl, params, queryParams)
-        } else if (params.data.type === 'domain') {
-          queryParams = {
-            domain: params.data.name,
-            startTime: getSecond(_this.timeFilter.startTime),
-            endTime: getSecond(_this.timeFilter.endTime)
-          }
-          _this.queryEntityDetail(_this.relationShipDomainUrl, params, queryParams)
-        }
-      })
-      this.chartOption.series[0].data = data
-      this.chartOption.series[0].links = links
-      this.myChart.setOption(this.chartOption)
-      function handleData (data, links, item) {
-        if (item && !data.some(d => d.name === item.name)) {
-          data.push({ name: item.name, ...handleStyle(item) })
-        }
-        if (item && !_.isEmpty(item.from) && !_.isEmpty(item.to)) {
-          links.push({ target: item.to, source: item.from })
-        }
-        if (item && !_.isEmpty(item.leaf)) {
-          item.leaf.forEach(i => {
-            handleData(data, links, i)
-          })
-        }
-      }
-
-      function handleStyle (item) {
-        const style = {}
-        style.label = {
-          position: 'top'
-        }
-        style.symbolSize = 50
-        style.label.color = '#999'
-        switch (item.type) {
-          case 'app_name': {
-            style.symbolSize = 55
-            style.type = item.type
-            if (name === item.name) {
-              style.label.color = '#333'
-              style.symbol = `image://${path}/images/entity-symbol/app-active.svg`
-            } else {
-              style.symbol = `image://${path}/images/entity-symbol/app.svg`
-            }
-            break
-          }
-          case 'domain': {
-            style.symbolSize = 55
-            style.type = item.type
-            if (name === item.name) {
-              style.label.color = '#333'
-              style.symbol = `image://${path}/images/entity-symbol/domain-active.svg`
-            } else {
-              style.symbol = `image://${path}/images/entity-symbol/domain.svg`
-            }
-            break
-          }
-          case 'ip': {
-            style.symbolSize = 40
-            style.type = item.type
-            if (name === item.name) {
-              style.label.color = '#333'
-              style.symbol = `image://${path}/images/entity-symbol/ip-active.svg`
-            } else {
-              style.symbol = `image://${path}/images/entity-symbol/ip.svg`
-            }
-            break
-          }
-        }
-        return style
-      }
-    },
-    shipChangeDown () {
-      this.showList = false
-    }
-  },
-  watch: {
-    chartData: {
-      deep: true,
-      handler (n) {
-        if (this.needTimeout && this.firstRender) {
-          this.firstRender = false
-          setTimeout(() => {
-            this.init(`chart${this.chartInfo.id}`)
-          }, 5000)
-        } else {
-          this.init(`chart${this.chartInfo.id}`)
-        }
-      }
-    }
-  },
-  setup () {
-    return {
-      unitConvert,
-      unitTypes
-    }
-  }
-}
-</script>

src/views/charts/charts/ChartSanKey.vue

@@ -1,112 +0,0 @@
-<template>
-    <div class="sankey-box">
-        <div class="chart-drawing" :id="`chart${chartInfo.id}`"></div>
-        <div class="sankey__label" style="left: 5%;">{{$t('entities.inboundLinkId')}}</div>
-        <div class="sankey__label" style="left: 50%;">{{entity.ip || entity.domain || entity.app}}</div>
-        <div class="sankey__label" style="right: 5%; transform: translateX(50%)">{{$t('entities.outboundLinkId')}}</div>
-    </div>
-</template>
-
-<script>
-import unitConvert, { valueToRangeValue } from '@/utils/unit-convert'
-import { unitTypes } from '@/utils/constants'
-import * as echarts from 'echarts'
-import { sankey } from './options/sankey'
-import chartEchartMixin from './chart-echart-mixin'
-export default {
-  name: 'ChartSanKey',
-  mixins: [chartEchartMixin],
-  props: {
-    chartInfo: Object,
-    chartData: [Array, Object],
-    resultType: Object,
-    queryParams: Object,
-    entity: {
-      type: Object,
-      default: () => {}
-    }
-  },
-  methods: {
-    initEcharts (id) {
-      const vm = this
-      const entityName = this.entity.ip || this.entity.domain || this.entity.app || this.entity.appName
-      const dom = document.getElementById(id)
-      !this.myChart && (this.myChart = echarts.init(dom))
-      this.chartOption = this.$_.cloneDeep(sankey)
-      this.chartOption.tooltip.formatter = function (param) {
-        if (!param.data.latency || !param.data.convert || !param.data.lossPercent || !param.data.retransPercent) {
-          return false
-        }
-        return `
-            <div class="sankey__tooltip">
-              <div class="sankey__tooltip-row">
-                <div class="sankey__row-label">Via:</div>
-                <div class="sankey__row-value">${param.data.name}</div>
-              </div>
-              <div class="sankey__tooltip-row">
-                <div style="margin: 6px 0; height: 1px; width: 100%; background-color: #E7EAED;"></div>
-              </div>
-              <div class="sankey__tooltip-row">
-                <div class="sankey__row-label">Traffic:</div>
-                <div class="sankey__row-value">${param.data.convert[0]}${param.data.convert[1]}&nbsp;(${param.data.percent[0]}%)</div>
-              </div>
-              <div class="sankey__tooltip-row">
-                <div class="sankey__row-label">Performance:</div>
-              </div>
-              <div class="sankey__tooltip-table">
-                <div class="sankey__table-row">
-                  <div class="sankey__table-cell">${vm.$t('networkAppPerformance.tripTime')}:</div>
-                  <div class="sankey__table-cell">${param.data.latency[0]}&nbsp;${param.data.latency[1]}</div>
-                </div>
-                <div class="sankey__table-row">
-                  <div class="sankey__table-cell">${vm.$t('overall.packetLoss')}:</div>
-                  <div class="sankey__table-cell">${param.data.lossPercent[0]}&nbsp;%</div>
-                </div>
-                <div class="sankey__table-row">
-                  <div class="sankey__table-cell">${vm.$t('overall.packetRetrans')}:</div>
-                  <div class="sankey__table-cell">${param.data.retransPercent[0]}&nbsp;%</div>
-                </div>
-              </div>
-            </div>
-          `
-      }
-      let inTotalValue = 0
-      let outTotalValue = 0
-      this.chartData.forEach(item => {
-        if (item.direction === 'in') {
-          inTotalValue += parseInt(item.bytes)
-        } else if (item.direction === 'out') {
-          outTotalValue += parseInt(item.bytes)
-        }
-      })
-      const data = this.chartData.map(item => {
-        return {
-          ...item,
-          name: item.linkID,
-          percent: valueToRangeValue(parseInt(item.bytes) / (item.direction === 'in' ? inTotalValue : outTotalValue) * 100, unitTypes.percent),
-          convert: unitConvert(item.bytes, unitTypes.byte),
-          latency: valueToRangeValue(item.latency, unitTypes.time),
-          lossPercent: valueToRangeValue(item.lossPercent, unitTypes.percent),
-          retransPercent: valueToRangeValue(item.retransPercent, unitTypes.percent),
-          bytes: parseFloat(item.bytes)
-        }
-      })
-      data.push({ name: entityName })
-
-      const link = data.map(item => {
-        const source = item.direction === 'in' ? item.linkID : entityName
-        const target = item.direction === 'in' ? entityName : item.linkID
-        return {
-          ...item,
-          source,
-          target,
-          value: item.bytes
-        }
-      })
-      this.chartOption.series[0].data = data
-      this.chartOption.series[0].links = link
-      this.myChart.setOption(this.chartOption)
-    }
-  }
-}
-</script>

src/views/charts/charts/ChartSingleValue.vue

@@ -1,403 +0,0 @@
-<template>
-  <div
-    class="cn-chart__single-value chart-header-position"
-    :class="singleValueClass(type)"
-    :style="{ backgroundColor: color }"
-  >
-    <div class="single-value-icon__box" v-if="!isCommon3SingleValue(type) && !isDetectionsProtocol(type) ">
-      <div
-        class="single-value__icon"
-        :style="`background-color: ${
-          chartInfo.params.iconBackgroundColor || ''
-        }`"
-      >
-        <i
-          :class="icon"
-          :style="`color: ${chartInfo.params.iconColor || ''}`"
-        ></i>
-      </div>
-    </div>
-    <div class="single-value__content" style="width: 200px;" v-if="isCommonSingleValue(type)">
-      <div class="content__data">
-        <span>{{
-          handleSingleValue[0] || handleSingleValue[0] === 0
-            ? handleSingleValue[0]
-            : '-'
-        }}</span>
-        <span class="single-value__unit">{{ handleSingleValue[1] }}</span>
-      </div>
-      <div class="content__title">
-        <span :title="chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name">{{
-          chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name
-        }}</span>
-      </div>
-    </div>
-    <div class="single-value__content" v-if="isSingleValueWithPercentileRight(type)">
-      <div class="data__title-in-one">
-        <div class="content__data">
-          <span style="white-space: nowrap;">{{
-            handleSingleValue[0] || handleSingleValue[0] === 0
-              ? handleSingleValue[0]
-              : '-'
-          }}</span><span class="single-value__unit">{{handleSingleValue[1] }}</span>
-        </div>
-        <div class="content__title title-background-color">
-            <span :title="chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name">{{
-                chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name
-              }}</span>
-        </div>
-      </div>
-      <div class="content__percentile">
-        <div class="circle__content">
-          <div class="circle circle-p50"></div>
-          <div><span class="percentile__title-color">P50: </span><span>
-            {{(handleSingleValue[2] || handleSingleValue[2] === 0)
-            ?handleSingleValue[2]
-            :'-'}}
-          </span></div>
-        </div>
-        <div class="circle__content">
-          <div class="circle circle-p90"></div>
-          <div><span class="percentile__title-color">P90: </span><span>
-            {{(handleSingleValue[3]|| handleSingleValue[3] === 0)
-            ?handleSingleValue[3]
-            :'-'}}
-          </span></div>
-        </div>
-      </div>
-    </div>
-    <div class="single-value__content" v-if="isSingleValueWithPercentileLeft(type)">
-      <div class="content__title">
-            <span :title="chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name">{{
-                chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name
-              }}</span>
-      </div>
-      <div class="content__data">
-        <span>{{
-          handleSingleValue[0] || handleSingleValue[0] === 0
-            ? handleSingleValue[0]
-            : '-'
-        }}</span>
-        <span class="single-value__unit">{{ handleSingleValue[1] }}</span>
-      </div>
-      <div class="content__percentile">
-        <div class="circle__content">
-          <div class="circle circle-p50"></div>
-          <div><span class="percentile__title-color">P50: </span><span>
-            {{(handleSingleValue[2]|| handleSingleValue[2] === 0)
-            ?handleSingleValue[2]
-            :'-'}}
-          </span></div>
-        </div>
-        <div class="circle__content">
-          <div class="circle circle-p90"></div>
-          <div><span class="percentile__title-color">P90: </span><span>
-            {{(handleSingleValue[3]|| handleSingleValue[3] === 0)
-            ?handleSingleValue[3]
-            :'-'}}
-          </span></div>
-        </div>
-      </div>
-    </div>
-    <div class="single-value__content single-value__content--with-chart" v-if="isSingleValueWithEcharts(type)">
-      <div class="content__title">
-        <span :title="chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name">{{
-          chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name
-        }}</span>
-        <span
-          v-if="chartInfo.params && chartInfo.params.as"
-          class="ip-detail-as"
-        >
-          as&nbsp;<span style="text-transform: capitalize">{{
-            chartInfo.params.as
-          }}</span>
-        </span>
-      </div>
-      <div class="content__data">
-        <span>{{
-          handleSingleValue[0] || handleSingleValue[0] === 0
-            ? handleSingleValue[0]
-            : '-'
-        }}</span>
-        <span class="single-value__unit">{{ handleSingleValue[1] }}</span>
-      </div>
-      <div class="content__chart">
-        <div class="chart-drawing" :id="`chart${chartInfo.id}`"></div>
-      </div>
-    </div>
-    <div class="single-value__content" v-if="isCommon2SingleValue(type)">
-      <div class="content__title">
-        <span :title="chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name">{{
-          chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name
-        }}</span>
-      </div>
-      <div class="content__data">
-        <span>{{
-          handleSingleValue[0] || handleSingleValue[0] === 0
-            ? handleSingleValue[0]
-            : '-'
-        }}</span>
-        <span class="single-value__unit">{{ handleSingleValue[1] }}</span>
-      </div>
-    </div>
-    <div class="single-value__content" v-if="isCommon3SingleValue(type)">
-      <div class="single-value-icon__box">
-        <div class="single-value__icon">
-          <!-- 使用图标-->
-          <svg class="cn-icon-svg" aria-hidden="true">
-            <use :xlink:href="icon"></use>
-          </svg>
-        </div>
-      </div>
-      <div class="single-value__data">
-        <div class="content__title">
-          <span :title="chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name">{{
-            chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name
-          }}</span>
-        </div>
-        <div class="content__data">
-          <span>{{
-            handleSingleValue[0] || handleSingleValue[0] === 0
-              ? handleSingleValue[0]
-              : '-'
-          }}</span>
-          <span class="single-value__unit">{{ handleSingleValue[1] }}</span>
-        </div>
-      </div>
-    </div>
-
-    <div class="single-value__content" v-if="isSingleValueWithPercent(type)">
-      <div>
-      <div class="content__title">
-        <span :title="chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name">{{
-          chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name
-        }}</span>
-      </div>
-      <div class="content__data">
-        <div class="content__data__doh">
-          <div class="content__data__doh__count">
-            {{ $_.get(chartData, 'count', '-') }}
-          </div>
-          <div class="content__data__doh__percent">
-            {{$t('protocol.proportion')}}<span>{{ $_.get(chartData, 'percent', '-') }}%</span>
-          </div>
-        </div>
-      </div>
-
-      </div>
-    </div>
-    <div class="single-value__content" v-if="isDetectionsProtocol(type)">
-      <div class="single-value__data">
-        <div class="content__title">
-          <span :title="chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name">
-            {{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name }}
-          </span>
-        </div>
-      </div>
-      <div class="content__data">
-        <div class="content__data-protocol">
-          <div class="content__data-protocol-all">
-            <div class="content__data-protocol-icon" :style="{backgroundColor: chartInfo.params.iconBackgroundColor[0]}">
-              <i :class="chartInfo.params.icon[0]" :style="{color: chartInfo.params.iconColor[0]}"></i>
-            </div>
-          </div>
-          <div class="content__data-protocol-value">
-            <div class="content__data-protocol-value-title">{{$t('protocol.requestVolume')}}</div>
-            <div class="content__data-protocol-value-num">{{unitConvert($_.get(chartData, 'bytes'), chartInfo.params.unitType).join('')}}</div>
-          </div>
-          <div class="content__data-protocol-percent"><span>{{$t('protocol.proportion')}}</span>&nbsp;<span>{{unitConvert($_.get(chartData, 'bytesPercent'), unitTypes.percent).join('')}}</span></div>
-        </div>
-        <div class="content__data-protocol">
-          <div class="content__data-protocol-all">
-            <div class="content__data-protocol-icon" :style="{backgroundColor: chartInfo.params.iconBackgroundColor[1]}">
-              <i :class="chartInfo.params.icon[1]" :style="{color: chartInfo.params.iconColor[1]}"></i>
-            </div>
-          </div>
-          <div class="content__data-protocol-value">
-            <div class="content__data-protocol-value-title">{{$t('protocol.totalFlow')}}</div>
-            <div class="content__data-protocol-value-num">{{unitConvert($_.get(chartData, 'count'), chartInfo.params.unitType).join('')}}</div>
-          </div>
-          <div class="content__data-protocol-percent"><span>{{$t('protocol.proportion')}}</span>&nbsp;<span>{{unitConvert($_.get(chartData, 'countPercent'), unitTypes.percent).join('')}}</span></div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import unitConvert from '@/utils/unit-convert'
-import { get } from '@/utils/http'
-import { unitTypes } from '@/utils/constants'
-import { replaceUrlPlaceholder } from '@/utils/tools'
-import * as echarts from 'echarts'
-import {
-  getOption,
-  getChartColor,
-  isCommonSingleValue,
-  isSingleValueWithEcharts,
-  isSingleValueWithPercentileLeft,
-  isSingleValueWithPercentileRight,
-  isCommon2SingleValue,
-  isSingleValueWithPercent,
-  isCommon3SingleValue,
-  isDetectionsProtocol
-} from '@/views/charts/charts/tools'
-import { legendMapping } from '@/views/charts/charts/chart-table-title'
-
-export default {
-  name: 'chartSingleValue',
-  props: {
-    chartInfo: Object,
-    chartData: [Array, Object],
-    queryParams: Object
-  },
-  data () {
-    return {
-      unitConvert,
-      unitTypes,
-      icon: '',
-      color: '',
-      type: 0,
-      chartOption: null,
-      timer: null,
-      myChart: ''
-    }
-  },
-  watch: {
-    chartInfo: {
-      deep: true,
-      immediate: true,
-      handler (n) {
-        this.icon = n.params.icon
-        this.color = n.params.color
-        this.type = n.type
-      }
-    }
-  },
-  computed: {
-    handleSingleValue () {
-      let value = null
-      if (this.isSingleValueWithPercentileLeft(this.chartInfo.type) || this.isSingleValueWithPercentileRight(this.chartInfo.type)) {
-        value = (this.chartData && (this.chartData.value || this.chartData.value === 0)) ? this.chartData.value : ''
-      } else {
-        value = (this.chartData || this.chartData === 0)
-          ? this.chartData
-          : ''
-      }
-
-      const unitType = this.chartInfo.params.unitType
-      const result = unitConvert(value, unitType)
-
-      let p50 = ''
-      let p90 = ''
-      if (this.isSingleValueWithPercentileLeft(this.chartInfo.type) || this.isSingleValueWithPercentileRight(this.chartInfo.type)) {
-        p50 = this.chartData ? unitConvert(this.chartData.p50, unitType) : ''
-        p90 = this.chartData ? unitConvert(this.chartData.p90, unitType) : ''
-      }
-
-      switch (unitType) {
-        case unitTypes.percent: {
-          result[0] = result[0] < 0.01 ? '< 0.01' : result[0]
-          result[2] = (p50 && (p50[0] || Number(p50[0]) === 0)) ? p50[0] + p50[1] : ''
-          result[3] = (p90 && (p90[0] || Number(p90[0]) === 0)) ? p90[0] + p90[1] : ''
-          break
-        }
-        case unitTypes.time: {
-          result[0] = result[0] < 1 ? '< 1' : result[0]
-          result[2] = (p50 && (p50[0] || Number(p50[0]) === 0)) ? p50[0] + p50[1] : ''
-          result[3] = (p90 && (p90[0] || Number(p90[0]) === 0)) ? p90[0] + p90[1] : ''
-          break
-        }
-        default:
-          break
-      }
-      return result
-    },
-    singleValueClass () {
-      return function (type) {
-        let c
-        if (this.isCommonSingleValue(type)) {
-          c = 'cn-chart__single-value--icon-left'
-        } else if (this.isSingleValueWithEcharts(type)) {
-          c = 'cn-chart__single-value--chart'
-        } else if (this.isSingleValueWithPercentileLeft(type)) {
-          c = 'cn-chart__single-value--percentile-left'
-        } else if (this.isSingleValueWithPercentileRight(type)) {
-          c = 'cn-chart__single-value--percentile-right'
-        } else if (this.isCommon2SingleValue(type)) {
-          c = 'cn-chart__single-value--icon-right'
-        } else if (this.isCommon3SingleValue(type)) {
-          c = 'cn-chart__single-value--icon-right--color'
-        } else if (this.isSingleValueWithPercent(type)) {
-          c = 'cn-chart__single-value--icon-doh'
-        } else if (this.isDetectionsProtocol(type)) {
-          c = 'cn-chart__single-value--protocol'
-        }
-        return c
-      }
-    }
-  },
-  methods: {
-    isCommonSingleValue,
-    isSingleValueWithEcharts,
-    isSingleValueWithPercentileLeft,
-    isSingleValueWithPercentileRight,
-    isCommon2SingleValue,
-    isCommon3SingleValue,
-    isSingleValueWithPercent,
-    isDetectionsProtocol,
-    chartSingleValueTotal () {
-      const chartParams = this.$_.get(this.chartInfo, 'params') || {}
-      if (isSingleValueWithEcharts(this.type)) {
-        const dom = document.getElementById(`chart${this.chartInfo.id}`)
-        const myChart = echarts.init(dom)
-        this.chartOption = this.$_.cloneDeep(getOption(this.type))
-        get(replaceUrlPlaceholder(chartParams.urlChart, this.queryParams)).then(
-          (response) => {
-            const seriesTemplate = this.chartOption.series[0]
-            const result = response.data.result
-            this.chartOption.series = result.map((r, i) => {
-              if (r.legend && legendMapping[r.legend]) {
-                r.legend = this.$t(legendMapping[r.legend])
-              }
-              return {
-                ...seriesTemplate,
-                name: r.legend,
-                data: r.values.map((v) => [
-                  Number(v[0]) * 1000,
-                  Number(v[1]),
-                  chartParams.unitType
-                ]),
-                lineStyle: {
-                  color: getChartColor[i]
-                }
-              }
-            })
-            this.myChart = myChart
-            myChart.setOption(this.chartOption)
-          }
-        )
-      }
-    },
-    resize () {
-      if (this.myChart) this.myChart.resize()
-    }
-  },
-  mounted () {
-    this.debounceFunc = this.$_.debounce(this.resize, 500)
-    window.addEventListener('resize', this.debounceFunc)
-    this.$nextTick(
-      () =>
-        (this.timer = setTimeout(() => {
-          this.chartSingleValueTotal()
-        }, 200))
-    )
-  },
-  beforeUnmount () {
-    window.addEventListener('resize', this.debounceFunc)
-  },
-  deactivated () {
-    clearTimeout(this.timer)
-  }
-}
-</script>

src/views/charts/charts/ChartTable.vue

@@ -1,90 +0,0 @@
-<template>
-  <div class="cn-chart__table">
-    <div class="cn-chart__body">
-      <el-table
-          style="width: 100%"
-          tooltip-effect="light"
-          :data="table.currentPageData"
-      >
-        <el-table-column :width="60" v-if="table.currentPageData.length" type="index" label="#">
-        </el-table-column>
-        <el-table-column
-            v-for="c in table.tableColumns.common"
-            show-overflow-tooltip
-            :key="c"
-            :label="$t(chartTableColumnMapping[c] || c)"
-            :prop="c"
-        >
-        </el-table-column>
-        <el-table-column
-            v-for="c in table.tableColumns.order"
-            show-overflow-tooltip
-            :key="c"
-            :label="$t(chartTableColumnMapping[c] || c)"
-            :prop="c"
-        >
-          <template #header>{{$t(chartTableColumnMapping[c] || c)}}</template>
-          <template #default="{ row }">
-            <span v-if="c === 'bytes'">
-                {{unitConvert(row[c], unitTypes.byte).join(' ')}}
-            </span>
-            <span v-else-if="c === 'packets' || c === 'sessions'">
-                {{unitConvert(row[c], unitTypes.number).join(' ')}}
-            </span>
-            <span v-else-if="c === 'responseFailRate'">
-                {{unitConvert(row[c], unitTypes.percent).join(' ')}}
-            </span>
-            <span v-else-if="c === 'dnsLatency'">
-                {{unitConvert(row[c], unitTypes.time).join(' ')}}
-            </span>
-            <span v-else>
-                {{row[c]}}
-            </span>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-    <div class="cn-chart__footer" v-if="table.tableData.length > 10">
-      <chart-table-pagination
-          ref="tablePagination"
-          :total="table.tableData.length"
-          @pageJump="pageJump"
-      ></chart-table-pagination>
-    </div>
-  </div>
-</template>
-
-<script>
-import { unitTypes, chartTableColumnMapping } from '@/utils/constants'
-import unitConvert from '@/utils/unit-convert'
-import ChartTablePagination from '@/views/charts/charts/ChartTablePagination'
-export default {
-  name: 'ChartTable',
-  components: {
-    ChartTablePagination
-  },
-  props: {
-    chartInfo: Object,
-    chartData: [Array, Object],
-    queryParams: Object,
-    table: Object
-  },
-  data () {
-    return {
-      chartTableColumnMapping,
-      unitConvert,
-      unitTypes
-    }
-  },
-  methods: {
-    pageJump (val) {
-      this.table.currentPageData = this.getTargetPageData(val, this.table.pageSize, this.table.tableData)
-    },
-    getTargetPageData (pageNum, pageSize, tableData) {
-      return this.$_.slice(tableData, (pageNum - 1) * pageSize, pageNum * pageSize)
-    }
-  },
-  mounted () {
-  }
-}
-</script>

src/views/charts/charts/ChartTablePagination.vue

@@ -1,67 +0,0 @@
-<template>
-  <el-pagination
-      small
-      ref="pagination"
-      layout="prev,jumper,slot,next"
-      class="chart-table-pagination"
-      :total="total"
-      :page-size="pageSize"
-      v-model:currentPage="pageNo"
-      @current-change="current"
-  >
-    <span>/&nbsp;{{totalPage}}</span>
-  </el-pagination>
-</template>
-
-<script>
-import { chartTableDefaultPageSize } from '@/utils/constants'
-export default {
-  name: 'ChartTablePagination',
-  props: {
-    total: Number,
-    pageSizeForAlarm: Number
-  },
-  data () {
-    return {
-      pageSize: this.pageSizeForAlarm ? this.pageSizeForAlarm : chartTableDefaultPageSize,
-      pageNo: 1
-    }
-  },
-  computed: {
-    totalPage () {
-      const remainder = this.total % this.pageSize
-      if (remainder) {
-        return parseInt(this.total / this.pageSize) + 1
-      } else {
-        return parseInt(this.total / this.pageSize)
-      }
-    }
-  },
-  watch: {
-    pageSizeForAlarm: {
-      deep: true
-    },
-    total: {
-      deep: true
-    }
-  },
-  methods: {
-    current (val) {
-      this.$emit('pageJump', val)
-    },
-    resetPageNo () {
-      this.pageNo = 1
-    }
-  },
-  mounted () {
-    const _this = this
-    this.emitter.on('chart-pageNo', function () {
-      _this.resetPageNo()
-    })
-    // console.log('this.$el==='+this.$el)
-    if (this.$el.querySelector) {
-      this.$el.querySelector('.el-pagination__jump').childNodes[0].nodeValue = ''
-    }
-  }
-}
-</script>

src/views/charts/charts/ChartTabs.vue

@@ -1,68 +0,0 @@
-<template>
-  <el-tabs
-      class="cn-chart cn-chart__tabs"
-      v-model="activeTab"
-      @tab-click="changeTab"
-      :ref="`chart-${chartInfo.id}`"
-  >
-    <el-tab-pane
-        v-for="tab in dataList"
-        :label="tab.i18n ? $t(tab.i18n) : tab.name" :name="`${tab.id}`"
-        :key="tab.id"
-        :ref="`chart-${chartInfo.id}`"
-    >
-      <panel-chart-list
-          v-if="activeTab == tab.id"
-          :time-filter="timeFilter"
-          :data-list="tab.children"
-          :active-tab="activeTab"
-          :panel-lock="true"
-          :need-timeout="true"
-          :entity="entity"
-      >
-      </panel-chart-list>
-    </el-tab-pane>
-  </el-tabs>
-</template>
-
-<script>
-import _ from 'lodash'
-import chartMixin from '@/views/charts/charts/chart-mixin'
-
-export default {
-  name: 'ChartTabs',
-  mixins: [chartMixin],
-  methods: {
-    showFullscreen () {
-
-    },
-    changeTab (tab) {
-      this.activeTab = tab.paneName
-    },
-    reload () {
-      this.dataList = _.cloneDeep(this.dataList)
-    },
-    resize () {
-      this.$forceUpdate()
-    }
-  },
-  mounted () {
-    this.debounceFunc = this.$_.debounce(this.resize, 300)
-    window.addEventListener('resize', this.debounceFunc)
-  },
-  beforeUnmount () {
-    window.removeEventListener('resize', this.debounceFunc)
-  },
-  setup (props) {
-    let activeTab = ''
-    if (!_.isEmpty(props.chartInfo.children)) {
-      activeTab = `${props.chartInfo.children[0].id}`
-    }
-    const dataList = [...props.chartInfo.children]
-    return {
-      activeTab,
-      dataList
-    }
-  }
-}
-</script>

src/views/charts/charts/ChartTimeBar.vue

@@ -1,108 +0,0 @@
-<template>
-    <div class="chart-drawing" :id="`chart${chartInfo.id}`"></div>
-</template>
-
-<script>
-import unitConvert from '@/utils/unit-convert'
-import * as echarts from 'echarts'
-import { lineToSpace } from '@/utils/tools'
-import { unitTypes } from '@/utils/constants'
-import { legendMapping } from '@/views/charts/charts/chart-table-title'
-import {
-  timeBar
-} from '@/views/charts/charts/options/bar'
-import { getCharBartColor } from '@/views/charts/charts/tools'
-import chartEchartMixin from '@/views/charts/charts/chart-echart-mixin'
-
-export default {
-  name: 'ChaetTimeBar',
-  props: {
-    chartInfo: Object,
-    chartData: [Array, Object],
-    resultType: Object,
-    queryParams: Object
-  },
-  mixins: [chartEchartMixin],
-  methods: {
-    initEcharts (id) {
-      const chartParams = this.chartInfo.params
-      const dom = document.getElementById(id)
-      !this.myChart && (this.myChart = echarts.init(dom))
-      this.chartOption = this.$_.cloneDeep(timeBar)
-      if (!chartParams.itemColorAlternately) {
-        this.chartOption.series[0].itemStyle.color = function (params) {
-          return getCharBartColor(0)
-        }
-      }
-      if (chartParams.showLegend === false) {
-        this.chartOption.legend.show = false
-      }
-      const seriesTemplate = this.chartOption.series[0]
-      const allZero = this.timeBarIsAllZero(this.chartData)
-      if (allZero) {
-        this.chartOption.yAxis = {
-          ...this.chartOption.yAxis,
-          min: 0,
-          max: 5,
-          interval: 1
-        }
-      }
-      this.chartOption.series = this.chartData.map(r => {
-        const obj = {
-          ...seriesTemplate,
-          name: legendMapping[`${this.entity && this.entity.ip ? 'ip_' : ''}${r.legend}`] ? legendMapping[`${this.entity && this.entity.ip ? 'ip_' : ''}${r.legend}`] : lineToSpace(r.legend),
-          data: ''
-        }
-        // chartParams.direction === 'vertical' ? r.values.map(v => [Number(v[0]) * 1000, Number(v[1]), chartParams.unitType]) : r.values.map(v => [Number(v[1]), Number(v[0]) * 1000, chartParams.unitType])
-        if (chartParams.direction === 'horizontal') {
-          obj.data = r.values.map(v => [Number(v[1]), Number(v[0]) * 1000, chartParams.unitType])
-        } else {
-          obj.data = r.values.map(v => [Number(v[0]) * 1000, Number(v[1]), chartParams.unitType])
-        }
-        return obj
-      })
-      const rows = (this.chartData.length - 1) / 4 + 1 // 根据legend个数动态预留legend空间
-      const gridTop = 10 + 27 * rows
-      this.chartOption.grid.top = gridTop
-      if (chartParams.unitType === unitTypes.byte) {
-        this.chartOption.yAxis.axisLabel.formatter = function (value, index, a, b) {
-          return unitConvert(value, unitTypes.byte).join(' ')
-        }
-        this.chartOption.grid.left = 75
-      }
-      if (chartParams.direction === 'horizontal') {
-        const temp = this.chartOption.yAxis
-        this.chartOption.yAxis = { ...this.chartOption.xAxis }
-        this.chartOption.xAxis = temp
-      }
-      this.loadEchartBar()
-    },
-    loadEchartBar () {
-      this.$emit('showLoading', true)
-      try {
-        this.myChart.setOption(this.chartOption)
-      } finally {
-        setTimeout(() => {
-          this.$emit('showLoading', false)
-        }, 200)
-      }
-    },
-    timeBarIsAllZero (data) {
-      if (this.resultType === 'matrix') {
-        let allZero = true
-        try {
-          data.forEach(d => {
-            d.values.forEach(r => {
-              if (r[1] && r[1] !== '0') {
-                allZero = false
-                throw new Error('break')
-              }
-            })
-          })
-        } catch (e) {}
-        return allZero
-      }
-    }
-  }
-}
-</script>

src/views/charts/charts/ChartTwoSituationStatistics.vue

@@ -1,48 +0,0 @@
-<template>
-  <div class="cn-chart__two-situation-statistics">
-    <div
-      class="two-situation-statistics__box"
-      v-for="(value, key,index) in result ? result : []"
-      :key="index"
-    >
-      <div class="box__body">
-        <div class="body__progress">
-          <el-progress
-            type="circle"
-            :color="chartInfo.params.color[index]"
-            width="76"
-            :percentage="value.percent ? value.percent : 0"
-          />
-        </div>
-        <div class="body__count">
-          <div>{{ value.count ? value.count : '-' }}</div>
-          <div>{{ $t(`dns.numberOfNodesSupporting${key}Protocol`) }}</div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'ChartTwoSituationStatistics',
-  props: {
-    chartInfo: Object,
-    chartData: [Array, Object]
-  },
-  data () {
-    return {
-      result: {
-        doh: {
-          count: 111,
-          percent: 0.85
-        },
-        dot: {
-          count: 111,
-          percent: 80.85
-        }
-      }
-    }
-  }
-}
-</script>

src/views/charts/charts/IpBasicInfo.vue

@@ -1,87 +0,0 @@
-<template>
-  <div class="cn-chart__ip-basic">
-    <div class="cn-chart__ip-basic-info">
-      <el-descriptions :column="1">
-        <el-descriptions-item label="ASN:">{{(chartData && chartData.asn) || '-'}}</el-descriptions-item>
-        <el-descriptions-item label="AS Org:">{{(chartData && chartData.asOrganization) || '-'}}</el-descriptions-item>
-        <el-descriptions-item :label="$t('entities.asSubnet') + ':'">{{(chartData && chartData.asSubnet) || '-'}}</el-descriptions-item>
-        <el-descriptions-item label="ISP:">{{(chartData && chartData.isp) || '-'}}</el-descriptions-item>
-        <el-descriptions-item label="DNS PTR:">{{(chartData && chartData.dnsPtr) || '-'}}</el-descriptions-item>
-      </el-descriptions>
-      <el-descriptions :column="1" v-if="detectionsData.dnsServerRole">
-        <el-descriptions-item :label="$t('overall.dnsServerInfo.role') + ':'">{{$_.get(detectionsData, 'dnsServerRole') || '-'}}</el-descriptions-item>
-        <el-descriptions-item :label="$t('overall.dnsServerInfo.mechanism') + ':'">{{$_.get(detectionsData, 'dnsServerOrg') || '-'}}</el-descriptions-item>
-        <el-descriptions-item :label="$t('overall.dnsServerInfo.software') + ':'">{{$_.get(detectionsData, 'dnsServerSoftware') || '-'}}</el-descriptions-item>
-        <el-descriptions-item :label="$t('overall.dnsServerInfo.system') + ':'">{{$_.get(detectionsData, 'dnsServerOs') || '-'}}</el-descriptions-item>
-        <el-descriptions-item :label="$t('overall.dnsServerInfo.protocol') + ':'">{{detectionIpSupporting(detectionsData)}}</el-descriptions-item>
-      </el-descriptions>
-    </div>
-  </div>
-</template>
-
-<script>
-import chartMixin from '@/views/charts/charts/chart-mixin'
-import { get } from '@/utils/http'
-import { api } from '@/utils/api'
-export default {
-  name: 'IpBasicInfo',
-  mixins: [chartMixin],
-  data () {
-    return {
-      myChart: null,
-      entityDetectionsIpUrl: api.entityDetectionsIp,
-      detectionsData: {}
-    }
-  },
-  computed: {
-    location () {
-      let location = ''
-      if (this.chartInfo) {
-        if (this.chartInfo.city) {
-          location = this.chartInfo.city
-        }
-        if (this.chartInfo.province) {
-          location = location ? `${this.chartInfo.province}, ${location}` : this.chartInfo.province
-        }
-        if (this.chartInfo.country) {
-          location = location ? `${this.chartInfo.country}, ${location}` : this.chartInfo.country
-        }
-      }
-      return location
-    },
-    detectionIpSupporting () {
-      return function (detectionsData) {
-        let result = ''
-        if (detectionsData.dnssecSupport) {
-          result += 'DNSSec/'
-        }
-        if (detectionsData.dohSupport) {
-          result += 'DoH/'
-        }
-        if (detectionsData.dotSupport) {
-          result += 'Dot/'
-        }
-        result = result.substr(0, result.length - 1)
-        if (!result) {
-          result = '-'
-        }
-        return result
-      }
-    }
-  },
-  methods: {
-    queryDetection () {
-      get(this.entityDetectionsIpUrl, this.queryParams).then(response => {
-        if (response.code === 200) {
-          this.detectionsData = response.data.result
-        }
-      })
-    }
-  },
-  mounted () {
-    this.$nextTick(() => {
-      this.queryDetection()
-    })
-  }
-}
-</script>

src/views/charts/charts/PieTable.vue

@@ -1,260 +0,0 @@
-<template>
-  <el-table
-      ref="table"
-      class="pie-table"
-      :data="pieTableData"
-      style="width: 100%;border: 1px solid #E7EAED"
-      :row-key="getRowKey"
-      @expand-change="currentChange"
-      :current-row-key="tableNameColumn"
-      tooltip-effect="light"
-      :expand-row-keys="expandRowKeys"
-      size="mini"
-      height="100%">
-    <el-table-column type="expand" min-width="5%">
-      <template #default="props">
-        <div style="position: relative">
-          <loading :loading="loading"></loading>
-          <el-table
-              tooltip-effect="light"
-              class="expand-table"
-              :data="childrenTableData"
-              style="width: 100%;"
-              :show-header="false"
-              :size="'mini'"
-              :height="'100%'">
-            <el-table-column
-                width="48">
-            </el-table-column>
-            <el-table-column
-                v-for="item in tableTitlesOther"
-                :key="item.prop"
-                show-overflow-tooltip
-                :min-width="item.width"
-                :label="item.label"
-                :prop="item.prop"
-                #default="{row}">
-            <span v-if="item.prop === 'nameColumn'">
-                {{ nameColumn === 'domainCategoryName' ? row['categoryName'] :(nameColumn === 'domainReputationLevel'? row['reputationLevel']:(nameColumn==='appCategory'?row['appCategoryName']:appRisk(row['appRiskLevel'])))}}
-            </span>
-              <span v-else-if="item.prop === 'tableNameColumn'">
-                {{ tableNameColumn === 'appName' ? row['appName'] : row['domain']}}
-            </span>
-              <span v-else-if="item.prop === 'bytes'">
-                {{unitConvert(row[item.prop], unitTypes.byte).join(' ')}}
-            </span>
-              <span v-else-if="item.prop === 'packets' || item.prop === 'sessions'">
-                {{unitConvert(row[item.prop], unitTypes.number).join(' ')}}
-            </span>
-              <span v-else>
-                {{ row[item.prop] }}
-            </span>
-            </el-table-column>
-          </el-table>
-        </div>
-      </template>
-    </el-table-column>
-    <el-table-column
-        v-for="item in tableTitles"
-        :key="item.prop"
-        show-overflow-tooltip
-        :min-width="item.width"
-        :label="(tableNameColumn === 'appName'&& item.prop === 'tableNameColumn')? $t('overall.appName'):item.label"
-        :prop="item.prop"
-        #default="{row}">
-      <span v-if="item.prop === 'nameColumn'">
-          {{ nameColumn === 'domainCategoryName' ? row['categoryName'] :(nameColumn === 'domainReputationLevel'? row['reputationLevel']:(nameColumn==='appCategory'?row['appCategoryName']:appRisk(row['appRiskLevel'])))}}
-      </span>
-      <span v-else-if="item.prop === 'tableNameColumn'">
-          {{ tableNameColumn === 'appName' ? row['appName'] : row['domain']}}
-      </span>
-      <span v-else-if="item.prop === 'bytes'">
-          {{unitConvert(row[item.prop], unitTypes.byte).join(' ')}}
-      </span>
-      <span v-else-if="item.prop === 'packets' || item.prop === 'sessions'">
-          {{unitConvert(row[item.prop], unitTypes.number).join(' ')}}
-      </span>
-      <span v-else>
-          {{ row[item.prop] }}
-      </span>
-    </el-table-column>
-  </el-table>
-</template>
-
-<script>
-import unitConvert from '@/utils/unit-convert'
-import { get } from '@/utils/http'
-import { replaceUrlPlaceholder } from '@/utils/tools'
-import { unitTypes, riskLevelMapping } from '@/utils/constants'
-import Loading from '@/components/common/Loading'
-
-export default {
-  name: 'PieTable',
-  props: {
-    tableData: Array,
-    chartInfo: Object,
-    order: String,
-    timeFilter: Object
-  },
-  components: {
-    Loading
-  },
-  watch: {
-    tableData: {
-      deep: true,
-      immediate: true,
-      handler (n) {
-        this.pieTableData = JSON.parse((JSON.stringify(n)))
-        this.pieTableData.forEach(item => {
-          item.children = []
-        })
-      }
-    },
-    chartInfo: {
-      deep: true,
-      immediate: true,
-      handler (n) {
-        if (n && n.params) {
-          this.nameColumn = n.params.nameColumn
-          this.tableNameColumn = n.params.tableNameColumn
-        }
-      }
-    }
-  },
-  computed: {
-    appRisk () {
-      return function (level) {
-        const m = riskLevelMapping.find(mapping => {
-          return mapping.value == level
-        })
-        return (m && m.name) || level
-      }
-    }
-  },
-  data () {
-    return {
-      nameColumn: '',
-      tableNameColumn: '',
-      pieTableData: [],
-      childrenTableData: [],
-      expandRowKeys: [],
-      tableTitles: [
-        {
-          label: this.$t('overall.domain'),
-          prop: 'tableNameColumn', // 'domain'
-          width: '20%'
-        },
-        {
-          label: this.$t(this.chartInfo.params.tableTypeColumnLabel),
-          prop: 'nameColumn',
-          width: '22%'
-        },
-        {
-          label: this.$t('overall.sessions'),
-          prop: 'sessions',
-          width: '18%'
-        },
-        {
-          label: this.$t('overall.packets'),
-          prop: 'packets',
-          width: '18%'
-        },
-        {
-          label: this.$t('overall.bytes'),
-          prop: 'bytes',
-          width: '18%'
-        }
-      ],
-      tableTitlesOther: [
-        {
-          label: this.$t('overall.serverIp'),
-          prop: 'serverIp',
-          width: '20%'
-        },
-        {
-          label: this.$t('overall.reputation'),
-          prop: 'nameColumn',
-          width: '22%'
-        },
-        {
-          label: this.$t('overall.sessions'),
-          prop: 'sessions',
-          width: '18%'
-        },
-        {
-          label: this.$t('overall.packets'),
-          prop: 'packets',
-          width: '18%'
-        },
-        {
-          label: this.$t('overall.bytes'),
-          prop: 'bytes',
-          width: '18%'
-        }
-      ],
-      loading: true
-    }
-  },
-  methods: {
-    currentChange (row, expandedRows) {
-      this.loading = true
-      this.childrenTableData = []
-
-      if (this.tableNameColumn === 'appName') {
-        if (this.expandRowKeys[0] && (row.appName === this.expandRowKeys[0])) {
-          this.expandRowKeys = []
-        } else {
-          this.expandRowKeys = [row.appName]
-        }
-      } else {
-        if (this.expandRowKeys[0] && (row.domain === this.expandRowKeys[0])) {
-          this.expandRowKeys = []
-        } else {
-          this.expandRowKeys = [row.domain]
-        }
-      }
-
-      const url = this.chartInfo.params.urlChildrenTable
-      let queryParams = {
-        startTime: parseInt(this.timeFilter.startTime / 1000),
-        endTime: parseInt(this.timeFilter.endTime / 1000),
-        order: this.order,
-        domain: row.domain,
-        limit: 10
-      }
-      if (this.tableNameColumn === 'appName') {
-        queryParams = {
-          startTime: parseInt(this.timeFilter.startTime / 1000),
-          endTime: parseInt(this.timeFilter.endTime / 1000),
-          order: this.order,
-          appName: row.appName,
-          limit: 10
-        }
-      }
-      setTimeout(() => {
-        get(replaceUrlPlaceholder(url, queryParams)).then(response2 => {
-          if (response2.code === 200) {
-            this.childrenTableData = response2.data.result
-          }
-        }).finally(() => {
-          this.loading = false
-        })
-      }, 500)
-    },
-
-    getRowKey (row) {
-      if (this.tableNameColumn === 'appName') {
-        return row.appName
-      } else {
-        return row.domain
-      }
-    }
-  },
-  setup () {
-    return {
-      unitTypes,
-      unitConvert
-    }
-  }
-}
-</script>

src/views/charts/charts/StatisticsLegend.vue

@@ -1,48 +0,0 @@
-<template>
-  <div class="chart__legend">
-    <div class="chart__table-top table-below-box">
-      <div class="table__below-color"></div>
-      <div class="table__below-title">Name</div>
-      <div class="table__below-statistics">Avg</div>
-      <div class="table__below-statistics">Max</div>
-      <div class="table__below-statistics">P50</div>
-      <div class="table__below-statistics">P90</div>
-    </div>
-    <div class="chart__table-below">
-      <div v-for="(item, index) in data" :key="index" class="table-below-box" :class="{'table-below-box--inactivated': !item.active}" @click="toggleLegend(index)">
-        <div class="table__below-color"><div :style="{backgroundColor: getChartColor(index)}"></div></div>
-        <div class="table__below-title" :title="item.legend">{{item.legend}}</div>
-        <div class="table__below-statistics" :title="valueToRangeValue(item.aggregation.avg, chartInfo.params.unitType).join('')">{{valueToRangeValue(item.aggregation.avg, chartInfo.params.unitType).join('')}}</div>
-        <div class="table__below-statistics" :title="valueToRangeValue(item.aggregation.max, chartInfo.params.unitType).join('')">{{valueToRangeValue(item.aggregation.max, chartInfo.params.unitType).join('')}}</div>
-        <div class="table__below-statistics" :title="valueToRangeValue(item.aggregation.p50, chartInfo.params.unitType).join('')">{{valueToRangeValue(item.aggregation.p50, chartInfo.params.unitType).join('')}}</div>
-        <div class="table__below-statistics" :title="valueToRangeValue(item.aggregation.p90, chartInfo.params.unitType).join('')">{{valueToRangeValue(item.aggregation.p90, chartInfo.params.unitType).join('')}}</div>
-      </div>
-    </div>
-  </div>
-
-</template>
-
-<script>
-import { getChartColor } from '@/views/charts/charts/tools'
-import unitConvert, { valueToRangeValue } from '@/utils/unit-convert'
-export default {
-  name: 'StatisticsLegend',
-  props: {
-    data: Array,
-    chartInfo: Object
-  },
-  methods: {
-    toggleLegend (index) {
-      this.$emit('toggleLegend', index)
-    }
-  },
-  setup () {
-    return {
-      getChartColor,
-      unitConvert,
-      valueToRangeValue
-    }
-  }
-}
-
-</script>

src/views/charts/charts/chart-relation-ship.js

@@ -1,265 +0,0 @@
-import _ from 'lodash'
-import { get } from '@/utils/http'
-import * as echarts from 'echarts'
-import { entityListLineOption } from '@/views/charts/charts/chart-options'
-import { eventSeverity, riskLevelMapping, unitTypes } from '@/utils/constants'
-import unitConvert from '@/utils/unit-convert'
-import { shallowRef } from 'vue'
-import { object } from '@amcharts/amcharts4/core'
-
-export default {
-  props: {
-    entity: Object,
-    timeFilter: Object
-  },
-  data () {
-    return {
-      entityData: {
-        chartOptionSent: null,
-        chartOptionReceived: null,
-        chartOption: null,
-        sentChart: null,
-        receivedChart: null,
-        tableData: {}
-      },
-      chartOption: null,
-      echartsArray: [],
-      security: [],
-      performance: [],
-      shipSeverity: []
-    }
-  },
-  computed: {
-    iconClass () {
-      return function (entityData) {
-        let className
-        switch (entityData.eventSeverity) {
-          case ('critical'): {
-            className = 'critical'
-            break
-          }
-          case ('high'): {
-            className = 'high'
-            break
-          }
-          case ('info'): {
-            className = 'info'
-            break
-          }
-          case ('medium'): {
-            className = 'medium'
-            break
-          }
-          case ('low'): {
-            className = 'low'
-            break
-          }
-          default:
-            break
-        }
-        return className
-      }
-    },
-    appRisk () {
-      return function (level) {
-        const m = riskLevelMapping.find(mapping => {
-          return mapping.value == level
-        })
-        return (m && m.name) || level
-      }
-    },
-    ipLocationRegion () {
-      return function (entityData) {
-        let result = ''
-        if (entityData.country) {
-          result += `${entityData.country},`
-        }
-        if (entityData.province) {
-          result += `${entityData.province},`
-        }
-        if (entityData.city) {
-          result += `${entityData.city},`
-        }
-        result = result.substr(0, result.length - 1)
-        if (!result) {
-          result = '-'
-        }
-        return result
-      }
-    }
-  },
-  methods: {
-    queryEntityDetailTraffic (urlObj, params, queryParams) {
-      if (!echarts.init(document.getElementById('entityDetailSend')) && !echarts.init(document.getElementById('entityDetailReceived'))) return ''
-      this.chartOption = _.cloneDeep(entityListLineOption)
-      this.sentChart = echarts.init(document.getElementById('entityDetailSend'))
-      this.receivedChart = echarts.init(document.getElementById('entityDetailReceived'))
-      this.loadingTraffic = true
-      get(urlObj.trafficUrl, queryParams).then(response => {
-        if (response.code === 200 && response.data.result && response.data.result.length > 0) {
-          response.data.result.forEach(t => {
-            if (t.legend === 'bytesSentRate') {
-              this.entityData.bytesSentRate = _.nth(t.values, -3)[1]
-              this.chartOptionSent = {
-                ...this.chartOption,
-                series: [
-                  {
-                    name: this.$t('entities.sentThroughput'),
-                    type: 'line',
-                    legendHoverLink: false,
-                    itemStyle: {
-                      lineStyle: {
-                        width: 1
-                      }
-                    },
-                    color: '#69b072',
-                    data: _.dropRight(t.values, 2).map(v => [Number(v[0]) * 1000, Number(v[1]), unitTypes.byte]),
-                    showSymbol: false
-                  }
-                ]
-              }
-            } else if (t.legend === 'bytesReceivedRate') {
-              this.entityData.bytesReceivedRate = t.aggregation.last
-              this.chartOptionReceived = {
-                ...this.chartOption,
-                series: [
-                  {
-                    name: this.$t('entities.receivedThroughput'),
-                    type: 'line',
-                    legendHoverLink: false,
-                    itemStyle: {
-                      lineStyle: {
-                        width: 1
-                      }
-                    },
-                    color: '#7899c6',
-                    data: t.values.map(v => [Number(v[0]) * 1000, Number(v[1]), unitTypes.byte]),
-                    showSymbol: false
-                  }
-                ]
-              }
-            }
-          })
-          this.echartsArray.push(shallowRef(this.sentChart), shallowRef(this.receivedChart))
-          this.sentChart.setOption(this.chartOptionSent)
-          this.receivedChart.setOption(this.chartOptionReceived)
-          this.loadingTraffic = false
-        } else {
-          this.loadingTraffic = false
-        }
-      })
-    },
-
-    queryEntityDetaServerOverview (urlObj, params, queryParams) {
-      this.loadingServiceQuality = true
-      get(urlObj.ServerOverviewUrl, queryParams).then(response => {
-        if (response.code === 200) {
-          this.entityData.establishLatencyMs = response.data.result.establishLatencyMs
-          this.entityData.pktRetransPercent = response.data.result.pktRetransPercent
-        }
-        this.loadingServiceQuality = false
-      })
-    },
-
-    queryEntityDetailAll (urlObj, params, queryParams) {
-      this.loadingAlert = true
-      this.shipSeverity = []
-      const performance = get(urlObj.performanceUrl, queryParams)
-      const security = get(urlObj.securityUrl, queryParams)
-      Promise.all([performance, security]).then(res => {
-        // const alertEventSeverity = ['critical', 'high', 'medium', 'info', 'low']
-        const alertAll = [...res[0].data.result, ...res[1].data.result]
-        // alertEventSeverity.forEach(d => {
-        //   const eventArray = alertAll.filter(p => d === p.eventSeverity)
-        //   const eventArrayMap = eventArray.map(t => { return { eventSeverity: t.eventSeverity } })
-        //   if (eventArrayMap) {
-        //     const eventObject = eventArrayMap.find(e => e.eventSeverity === d)
-        //     const eventObjectMap = object.keys(eventObject).map(m => {
-        //       return {
-        //         eventSeverity: eventObject[m],
-        //         length: eventArray.length
-        //       }
-        //     })
-        //     this.shipSeverity.push(...eventObjectMap)
-        //   }
-        // })
-        alertAll.forEach(t => {
-          const hit = this.shipSeverity.find(e => e.eventSeverity === t.eventSeverity)
-          if (hit) {
-            this.shipSeverity.forEach(d => {
-              d.totalNumberOfEvents++
-            })
-          } else {
-            this.shipSeverity.push({ eventSeverity: t.eventSeverity, totalNumberOfEvents: 1 })
-          }
-        })
-        this.loadingAlert = false
-      })
-    },
-    getBasicProperties (urlObj, params, queryParams) {
-      this.loadingIp = true
-      this.loadingDomain = true
-      this.loadingApp = true
-      get(urlObj.basicProperties, queryParams).then(response => {
-        if (response.code === 200) {
-          if (urlObj.entityType === 'ip') {
-            this.entityData = {
-              ...this.entityData,
-              asn: response.data.result.asn,
-              country: response.data.result.country,
-              province: response.data.result.province,
-              city: response.data.result.city
-            }
-          } else if (urlObj.entityType === 'domain') {
-            this.entityData = {
-              ...this.entityData,
-              domainCategory: response.data.result.domainCategory,
-              domainCategoryGroup: response.data.result.domainCategoryGroup,
-              domainDescription: response.data.result.domainDescription,
-              domainReputationScore: response.data.result.domainReputationScore,
-              domainWhoisAddress: response.data.result.domainWhoisAddress,
-              domainWhoisOrg: response.data.result.domainWhoisOrg
-            }
-          } else if (urlObj.entityType === 'app') {
-            this.entityData = {
-              ...this.entityData,
-              name: response.data.result.name,
-              appId: response.data.result.appId,
-              category: response.data.result.category,
-              subcategory: response.data.result.subcategory
-            }
-          }
-        }
-        this.loadingIp = false
-        this.loadingDomain = false
-        this.loadingApp = false
-      })
-    },
-
-    queryEntityDetail (urlObj, params, queryParams) {
-      this.entityData.tableData.name = params.data.name
-      this.entityData.tableData.symbol = params.data.symbol.slice(8)
-      this.entityData.tableData.type = urlObj.entityType
-      this.queryEntityDetailTraffic(urlObj, params, queryParams)
-      this.queryEntityDetailAll(urlObj, params, queryParams)
-      this.queryEntityDetaServerOverview(urlObj, params, queryParams)
-      this.getBasicProperties(urlObj, params, queryParams)
-    },
-    resize () {
-      this.echartsArray.forEach(item => { item.value.resize() })
-    }
-  },
-  setup () {
-    return {
-      unitTypes,
-      unitConvert
-    }
-  },
-  mounted () {
-    this.debounceFunc = this.$_.debounce(this.resize, 200)
-    window.addEventListener('resize', this.debounceFunc)
-  },
-  beforeUnmount () {
-    window.removeEventListener('resize', this.debounceFunc)
-  }
-}

src/views/charts/charts/chartDetectionSecurity.vue

@@ -1,86 +0,0 @@
-<template>
-  <div class="security cn-detection--list">
-    <div class="cn-detection-table">
-      <chart-detections-table
-        v-for="(data, index) in chartData"
-        :detection="data"
-        :timeFilter="timeFilter"
-        :key="index"
-        :security="true"
-        :ref="`detectionRow${index}`"
-        :index="index"
-      ></chart-detections-table>
-    </div>
-    <div class="cn-detection__footer">
-      <chart-detection-pagination
-          ref="pagination"
-          :page-obj="pageObj"
-          @pageJump="pageJump"
-          :pageSizeForAlarm="pageObj.pageSize"
-      ></chart-detection-pagination>
-    </div>
-  </div>
-</template>
-
-<script>
-import chartDetectionsTable from '@/views/charts/charts/chartDetectionsTable'
-import chartDetectionPagination from '@/views/charts/charts/chartDetectionPagination'
-import { get } from '@/utils/http'
-import { replaceUrlPlaceholder } from '@/utils/tools'
-export default {
-  name: 'chartDetectionSecurity',
-  props: {
-    chartInfo: Object,
-    chartData: Array,
-    resultType: Object,
-    queryParams: Object,
-    timeFilter: Object
-  },
-  components: {
-    chartDetectionPagination,
-    chartDetectionsTable
-  },
-  watch: {
-  },
-  data () {
-    return {
-      pageObj: {
-        pageNo: 1,
-        pageSize: 6,
-        total: 0,
-        resetPageNo: true
-      }
-    }
-  },
-  methods: {
-    securityCount () {
-      const requestUrl = this.chartInfo.params.countUrl
-      get(replaceUrlPlaceholder(requestUrl, this.queryParams)).then(response => {
-        this.pageObj.total = response.data.result
-      })
-    },
-    getDetectionData (val) {
-      this.pageObj.pageNo = val
-      const extraParams = {
-        pageNo: val,
-        pageSize: this.pageObj.pageSize
-      }
-      this.$emit('getDetectionData', this.chartInfo.params.url, extraParams, false, {
-        startTime: this.queryParams.startTime,
-        endTime: this.queryParams.endTime
-      })
-      const requestUrl = this.chartInfo.params.countUrl
-      get(replaceUrlPlaceholder(requestUrl, this.queryParams)).then(response => {
-        this.pageObj.total = response.data.result
-      })
-    },
-    pageJump (val) {
-      this.getDetectionData(val)
-    }
-  },
-  mounted () {
-    this.$emit('chartDetection', this.chartInfo.type)
-    this.securityCount()
-  }
-}
-</script>

src/views/charts/charts/chartDetectionService.vue

@@ -1,84 +0,0 @@
-<template>
-  <div class="service cn-detection--list">
-    <div class="cn-detection-table">
-      <chart-detections-table
-          v-for="(data, index) in chartData"
-          :detection="data"
-          :timeFilter="timeFilter"
-          :key="index"
-          :service="true"
-          :ref="`detectionRow${index}`"
-          :index="index"
-      ></chart-detections-table>
-    </div>
-    <div class="cn-detection__footer">
-      <chart-detection-pagination
-        ref="pagination"
-        :page-obj="pageObj"
-        @pageJump="pageJump"
-        :pageSizeForAlarm="pageObj.pageSize"
-      ></chart-detection-pagination>
-    </div>
-  </div>
-</template>
-
-<script>
-import chartDetectionPagination from '@/views/charts/charts/chartDetectionPagination'
-import chartDetectionsTable from '@/views/charts/charts/chartDetectionsTable'
-import { get } from '@/utils/http'
-import { replaceUrlPlaceholder } from '@/utils/tools'
-export default {
-  name: 'chartDetectionService',
-  props: {
-    chartInfo: Object,
-    chartData: Array,
-    resultType: Object,
-    queryParams: Object,
-    timeFilter: Object
-  },
-  components: {
-    chartDetectionPagination,
-    chartDetectionsTable
-  },
-  data () {
-    return {
-      pageObj: {
-        pageNo: 1,
-        pageSize: 6,
-        total: 0,
-        resetPageNo: true
-      }
-    }
-  },
-  methods: {
-    securityCount () {
-      const requestUrl = this.chartInfo.params.countUrl
-      get(replaceUrlPlaceholder(requestUrl, this.queryParams)).then(response => {
-        this.pageObj.total = response.data.result
-      })
-    },
-    getDetectionData (val) {
-      this.pageObj.pageNo = val
-      const extraParams = {
-        pageNo: val,
-        pageSize: this.pageObj.pageSize
-      }
-      this.$emit('getDetectionData', this.chartInfo.params.url, extraParams, false, {
-        startTime: this.queryParams.startTime,
-        endTime: this.queryParams.endTime
-      })
-      const requestUrl = this.chartInfo.params.countUrl
-      get(replaceUrlPlaceholder(requestUrl, this.queryParams)).then(response => {
-        this.pageObj.total = response.data.result
-      })
-    },
-    pageJump (val) {
-      this.getDetectionData(val)
-    }
-  },
-  mounted () {
-    this.$emit('chartDetection', this.chartInfo.type)
-    this.securityCount()
-  }
-}
-</script>

src/views/charts/charts/chartDetectionsTable.vue

@@ -1,150 +0,0 @@
-<template>
-  <div class="cn-detection__case">
-    <div class="cn-detection__case-severity"><i :class="iconClass" class="cn-icon cn-icon-alert-level"></i></div>
-    <div class="cn-detection__row">
-      <div v-if="security" class="cn-detection__header">
-        <span>
-          <i :class="{ 'critical': detection.offenderIp === name}" class="cn-icon cn-icon-attacker"></i>
-          <span :class="{ 'critical': detection.offenderIp === name}">{{detection.offenderIp || '-'}}</span>
-        </span>
-        <div :class="{ 'critical': detection.offenderIp === name}" class="domain cn-detection-domain" v-if="detection.domain">{{detection.domain}}</div>
-        <span class="line">-------</span>
-        <span class="circle"></span>
-        <span>
-          <i :class="{ 'critical': detection.victimIp === name}" class="cn-icon cn-icon-attacked" ></i>
-          <soan :class="{ 'critical': detection.victimIp === name}">{{detection.victimIp || '-'}}</soan>
-        </span>
-
-      </div>
-      <div v-if="service" class="cn-detection__header">
-        <span v-if="detection.entityType === 'app'">
-          <i :class="{ 'critical': detection.appName === name}" class="cn-icon cn-icon-app2"></i>
-          <span :class="{ 'critical': detection.appName === name}">{{detection.appName || '-'}}</span>
-        </span>
-        <span v-else-if="detection.entityType === 'ip'">
-          <i :class="{ 'critical': detection.serverIp === name}" class="cn-icon cn-icon-ip2"></i>
-          <span :class="{ 'critical': detection.serverIp === name}">{{detection.serverIp || '-'}}</span>
-        </span>
-        <span v-else-if="detection.entityType === 'domain'">
-          <i :class="{ 'critical': detection.domain === name}" class="cn-icon cn-icon-domain2"></i>
-          <span :class="{ 'critical': detection.domain === name}">{{detection.domain || '-'}}</span>
-        </span>
-      </div>
-      <div class="cn-detection__body">
-        <div class="body__basic-info">
-          <div class="basic-info">
-            <div class="basic-info__item" v-if="detection.eventSecurity">
-              <i class="cn-icon cn-icon-severity-level"></i>
-              <span>{{$t('detection.list.eventSecurity')}}&nbsp;:&nbsp;&nbsp;</span>
-              <span>{{detection.eventSecurity || '-'}}</span>
-            </div>
-            <div class="basic-info__item" v-else-if="detection.eventSeverity">
-              <i class="cn-icon cn-icon-severity-level"></i>
-              <span>{{$t('detections.eventSeverity')}}&nbsp;:&nbsp;&nbsp;</span>
-              <span>{{detection.eventSeverity || '-'}}</span>
-            </div>
-            <div class="basic-info__item" v-if="security">
-              <i class="cn-icon cn-icon-event-type"></i>
-              <span>{{$t('detection.list.securityType')}}&nbsp;:&nbsp;&nbsp;</span>
-              <span>{{detection.securityType || '-'}}</span>
-            </div>
-            <div class="basic-info__item" v-else-if="service">
-              <i class="cn-icon cn-icon-event-type"></i>
-              <span>{{$t('detections.eventType')}}&nbsp;:&nbsp;&nbsp;</span>
-              <span>{{detection.eventType || '-'}}</span>
-            </div>
-            <div class="basic-info__item" v-if="security">
-              <i class="cn-icon cn-icon-trojan"></i>
-              <span>{{$t('detection.list.malwareName')}}&nbsp;:&nbsp;&nbsp;</span>
-              <span>{{detection.malwareName || '-'}}</span>
-            </div>
-<!--            <div class="basic-info__item" v-if="security">-->
-<!--              <i class="cn-icon cn-icon-mining-pool"></i>-->
-<!--              <span>{{$t('detection.list.cryptominingPool')}}&nbsp;:&nbsp;&nbsp;</span>-->
-<!--              <span>{{detection.cryptominingPool || '-'}}</span>-->
-<!--            </div>-->
-            <div class="basic-info__item">
-              <i class="cn-icon cn-icon-time2"></i>
-              <span>{{$t('detection.list.startTime')}}&nbsp;:&nbsp;&nbsp;</span>
-              <span>{{dateFormatByAppearance(detection.startTime) || '-'}}</span>
-            </div>
-            <div class="basic-info__item">
-              <i class="cn-icon cn-icon-time2"></i>
-              <span>{{$t('overall.duration')}}&nbsp;:&nbsp;&nbsp;</span>
-              <span style="display: inline-block;height: 6px;width: 6px;border-radius: 50%;margin-right: 8px;" :style="pointColor(detection)"></span>
-              <span>{{unitConvert(detection.durationMs, 'time', null, null, 0).join(' ') || '-'}}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { getMillisecond } from '@/utils/date-util'
-import unitConvert from '@/utils/unit-convert'
-export default {
-  name: 'detectionsTable',
-  props: {
-    index: Number,
-    timeFilter: Object,
-    detection: Object,
-    security: Boolean,
-    service: Boolean,
-    pageType: String // 安全事件、服务质量
-  },
-  data () {
-    return {
-      name: ''
-    }
-  },
-  computed: {
-    iconClass () {
-      let className
-      switch (this.detection.eventSecurity || this.detection.eventSeverity) {
-        case ('critical'): {
-          className = 'critical'
-          break
-        }
-        case ('high'): {
-          className = 'high'
-          break
-        }
-        case ('info'): {
-          className = 'info'
-          break
-        }
-        case ('medium'): {
-          className = 'medium'
-          break
-        }
-        case ('low'): {
-          className = 'low'
-          break
-        }
-        default: break
-      }
-      return className
-    },
-    pointColor () {
-      return function (detection) {
-        let color = '#8FA1BE'
-        if (detection.startTime && detection.endTime) {
-          if (getMillisecond(detection.endTime) - getMillisecond(detection.startTime) < 5 * 60 * 1000) {
-            color = '#D84C4C'
-          }
-        }
-        return { backgroundColor: color }
-      }
-    }
-  },
-  mounted () {
-    this.name = this.$route.query.name
-  },
-  methods: {
-    unitConvert,
-    getMillisecond
-  }
-}
-</script>

src/views/charts/wholeScreenScroll/DnsScreen.vue

@@ -1,50 +0,0 @@
-<template>
-  <div class="chart-list chart-list--screen">
-    <div v-for="item in dnsScreenDataList"
-          :key="item.id"
-          :ref="'grid-item' + item.id"
-          class="dns-screen"
-          :style="'grid-area: '+(item.y+1+30) +'/ '+(item.x+1) +' / '+(item.y+item.h+1+30) +'/ '+(item.x+item.w+1)+';'"
-      >
-        <panel-chart
-                :ref="'chart' + item.id"
-                :chart-info="item"
-                :time-filter="timeFilter"
-                :entity="entity"
-        ></panel-chart>
-    </div>
-  </div>
-</template>
-
-<script>
-import PanelChart from '@/views/charts/PanelChart'
-
-export default {
-  name: 'DnsScreen',
-  components: {
-    PanelChart
-  },
-  props: {
-    timeFilter: Object, // 时间范围
-    copyDataList: Array, // 图表信息
-    entity: Object
-  },
-  methods: {
-    reload () {
-      this.dnsScreenDataList.forEach(item => {
-        if (this.$refs['chart' + item.id] && this.$refs['chart' + item.id][0]) {
-          this.$refs['chart' + item.id][0].getChartData()
-        }
-      })
-    }
-  },
-  computed: {
-    dnsScreenDataList: function () {
-      return this.copyDataList.filter(function (item) {
-        return item.y < 0
-      })
-    }
-  }
-
-}
-</script>

src/views/charts2/charts/dnsInsight/DnsActiveMaliciousDomain.vue

@@ -61,7 +61,7 @@
 <script>
 import { api } from '@/utils/api'
 import { getSecond } from '@/utils/date-util'
-import { get } from '@/utils/http'
+import axios from 'axios'
 import chartMixin from '@/views/charts2/chart-mixin'
 
 export default {
@@ -121,8 +121,9 @@ export default {
         endTime: getSecond(this.timeFilter.endTime)
       }
       this.toggleLoading(true)
-      get(api.dnsInsight.activeMaliciousDomain, params).then(res => {
+      axios.get(api.dnsInsight.activeMaliciousDomain, { params: params }).then(response => {
-        if (res.code === 200) {
+        const res = response.data
+        if (response.status === 200) {
           this.isNoData = res.data.result.length === 0
           this.tableData = res.data.result
         } else {

src/views/charts2/charts/entityDetail/tabs/DigitalCertificate.vue

@@ -94,7 +94,7 @@ export default {
       axios.get(api.entity.performanceEvent, { params: params }).then(response => {
         const res = response.data
 
-        if (res.code === 200) {
+        if (response.status === 200) {
           this.isNoData = res.data.result.length === 0
           this.showError = false
           if (!this.isNoData) {

src/views/charts2/charts/entityDetail/tabs/InformationAggregation.vue

@@ -110,7 +110,7 @@ export default {
       this.informationAggregationList = []
       axios.get(`${api.entity.informationAggregation}/${this.entity.entityType}?resource=${this.entity.entityName}&pageSize=100&pageNo=1`).then(response => {
         const res = response.data
-        if (res.code === 200) {
+        if (response.status === 200) {
           // this.isNoData = res.data.result.length === 0
           this.showError = false
           if (res.data.result.length > 0) {

src/views/charts2/charts/networkOverview/NetworkOverviewPerformanceEvent.vue

@@ -74,7 +74,7 @@ export default {
         this.chartOption = pieChartOption1
         this.loading1 = true
         axios.get(api.netWorkOverview.eventSeverity, { params: params }).then(res => {
-          if (res.data.code === 200) {
+          if (res.status === 200) {
             this.showError1 = false
             if (res.data.data.result.length === 0) {
               this.isNoData = true
@@ -115,7 +115,7 @@ export default {
         this.chartOption2 = pieChartOption2
         this.loading2 = true
         axios.get(api.netWorkOverview.eventType, { params: params }).then(res => {
-          if (res.data.code === 200) {
+          if (res.status === 200) {
             this.showError2 = false
 
             if (res.data.data.result.length === 0) {

src/views/charts2/charts/npm/NpmEventsByType.vue

@@ -109,9 +109,9 @@ export default {
         endTime: getSecond(this.timeFilter.endTime)
       }
       this.toggleLoading(true)
-      axios.get(api.npm.events.recentEvents, { params: params }).then(res => {
+      axios.get(api.npm.events.recentEvents, { params: params }).then(response => {
-        res = res.data
+        const res = response.data
-        if (res.code === 200) {
+        if (response.status === 200) {
           this.showError = false
           this.isNoData = res.data.result.length === 0
           const arrData = []

src/views/charts2/charts/npm/NpmEventsHeader.vue

@@ -46,9 +46,9 @@ export default {
         type: this.type
       }
       this.toggleLoading(true)
-      axios.get(api.npm.events.list, { params: params }).then(res => {
+      axios.get(api.npm.events.list, { params: params }).then(response => {
-        res = res.data
+        const res = response.data
-        if (res.code === 200) {
+        if (response.status === 200) {
           this.showError = false
           if (res.data.result.length === 0) {
             this.chartData.forEach(d => { d.count = '-' })

src/views/charts2/charts/npm/NpmIpMap.vue

@@ -38,9 +38,7 @@ export default {
     return {
       myChart: null,
       polygonSeries: null,
-      countrySeries: null,
       worldImageSeries: null,
-      countryImageSeries: null,
       // Server | Client
       trafficDirection: 'Server',
       curTabState: curTabState,
@@ -104,7 +102,7 @@ export default {
           if (res && res.length > 0) {
             const subParams = {
               ...params,
-              params: res.map(r => `'${r.country}'`).join(',')
+              params: res.map(r => `'${r.countryRegion}'`).join(',')
             }
             // 计算分数
             const tcpRequest = get(api.npm.overview.mapTcp, subParams)
@@ -118,7 +116,7 @@ export default {
               res2.forEach((r, i) => {
                 if (r.code === 200) {
                   mapData.forEach(t => {
-                    t[keyPre[i] + 'Score'] = r.data.result.find(d => d.country === t.country && d.province === t.province)
+                    t[keyPre[i] + 'Score'] = r.data.result.find(d => d.countryRegion === t.countryRegion && d.superAdminArea === t.superAdminArea)
                   })
                 } else {
                   this.showError = true
@@ -134,8 +132,8 @@ export default {
                   pktRetransPercent: t.packetRetransScore ? t.packetRetransScore.pktRetransPercent : null
                 }
                 t.tooltip = {}
-                t.tooltip.width = t.province ? 0 : 18
+                t.tooltip.width = t.superAdminArea ? 0 : 18
-                t.tooltip.marginRight = t.province ? 0 : 6
+                t.tooltip.marginRight = t.superAdminArea ? 0 : 6
                 t.tooltip.data = {
                   establishLatencyMs: valueToRangeValue(data.establishLatencyMs, unitTypes.time).join(' '),
                   httpResponseLatency: valueToRangeValue(data.httpResponseLatency, unitTypes.time).join(' '),
@@ -187,7 +185,7 @@ export default {
       imageSeries.data = _data.map(r => ({
         ...r,
         score: r.tooltip.data.score,
-        name: r.province || r.country,
+        name: r.superAdminArea || r.countryRegion,
         id: r.serverId,
         color: this.scoreColor(r.tooltip.data.score),
         border: this.scoreColor(r.tooltip.data.score)
@@ -317,9 +315,7 @@ export default {
   },
   beforeUnmount () {
     this.polygonSeries = null
-    this.countrySeries = null
     this.worldImageSeries = null
-    this.countryImageSeries = null
     this.myChart && this.myChart.dispose()
     this.myChart = null
   }

src/views/charts2/charts/npm/NpmLine.vue

@@ -134,9 +134,9 @@ export default {
         url = this.switchUrl(this.chart.params.index)
 
         if (url) {
-          axios.get(url, { params: params }).then(res => {
+          axios.get(url, { params: params }).then(response => {
-            res = res.data
+            const res = response.data
-            if (res.code === 200) {
+            if (response.status === 200) {
               this.showError = false
               this.isNoData = res.data.result.length === 0
 

src/views/charts2/charts/npm/NpmMap.vue

@@ -124,11 +124,11 @@ export default {
         }
         axios.get(api.npm.location.map, { params: params }).then(response => {
           if (response.data.code === 200) {
-            const res = _.get(response, 'data.data.result', []).filter(r => r.country !== 'Unknown')
+            const res = _.get(response, 'data.data.result', []).filter(r => r.countryRegion !== 'Unknown')
             if (res.length > 0) {
               // 计算分数
               this.showError = false
-              params.country = params.country ? `'${params.country}'` : ''
+              params.countryRegion = params.countryRegion ? `'${params.countryRegion}'` : ''
               const tcpRequest = get(api.npm.location.mapTcp, params)
               const httpRequest = get(api.npm.location.mapHttp, params)
               const sslRequest = get(api.npm.location.mapSsl, params)
@@ -141,7 +141,7 @@ export default {
                 res2.forEach((r, i) => {
                   if (r.code === 200) {
                     mapData.forEach(t => {
-                      const find = r.data.result.find(d => d.country === t.country && t.province === d.province)
+                      const find = r.data.result.find(d => d.countryRegion === t.countryRegion && t.superAdminArea === d.superAdminArea)
                       t[keyPre[i] + 'Score'] = find
                     })
                   } else {
@@ -165,8 +165,8 @@ export default {
                     pktRetransPercent: t.packetRetransScore ? t.packetRetransScore.pktRetransPercent : null
                   }
                   t.tooltip = {}
-                  t.tooltip.width = t.province ? 0 : 18
+                  t.tooltip.width = t.superAdminArea ? 0 : 18
-                  t.tooltip.marginRight = t.province ? 0 : 6
+                  t.tooltip.marginRight = t.superAdminArea ? 0 : 6
                   t.tooltip.data = {
                     establishLatencyMs: valueToRangeValue(data.establishLatencyMs, unitTypes.time).join(' '),
                     httpResponseLatency: valueToRangeValue(data.httpResponseLatency, unitTypes.time).join(' '),
@@ -225,7 +225,7 @@ export default {
       imageSeries.data = _data.map(r => ({
         ...r,
         score: r.tooltip.data.score,
-        name: r.province || r.country,
+        name: r.superAdminArea || r.countryRegion,
         id: r.serverId,
         color: this.scoreColor(r.tooltip.data.score),
         border: this.scoreColor(r.tooltip.data.score)

src/views/charts2/charts/npm/NpmNetworkQuantity.vue

@@ -156,9 +156,9 @@ export default {
       if (condition || type) {
         params.type = params.type || type
         this.toggleLoading(true)
-        axios.get(url, { params: params }).then(res => {
+        axios.get(url, { params: params }).then(response => {
-          res = res.data
+          const res = response.data
-          if (res.code === 200) {
+          if (response.status === 200) {
             this.npmNetworkCycleData = res.data.result
           }
           this.npmNetworkLastCycleQuery(url, params)
@@ -178,7 +178,7 @@ export default {
           // 传给子组件SingleValue，再进行error处理，注：error处理不在此处处理
           this.npmNetworkCycleData = []
           res.forEach(t => {
-            if (t.data.code === 200) {
+            if (t.status === 200) {
               this.npmNetworkCycleData.push(t.data.data.result)
             } else {
               this.npmNetworkCycleData.push(t.data)
@@ -211,9 +211,9 @@ export default {
       if ((params.type && params.q) || (param && param.type)) {
         params.type = params.type || param.type
         this.toggleLoading(true)
-        axios.get(url, { params: params }).then(res => {
+        axios.get(url, { params: params }).then(response => {
-          res = res.data
+          const res = response.data
-          if (res.code === 200) {
+          if (response.status === 200) {
             this.npmNetworkLastCycleData = res.data.result
           } else {
             this.npmNetworkLastCycleData = [res]
@@ -240,7 +240,7 @@ export default {
           // 状态为200的，赋值接口数据，不为200的保留报错提示message，
           // 传给子组件SingleValue，再进行error处理，注：error处理不在此处处理
           res.forEach(t => {
-            if (t.data.code === 200) {
+            if (t.status === 200) {
               this.npmNetworkLastCycleData.push(t.data.data.result)
             } else {
               this.npmNetworkLastCycleData.push(t.data)

src/views/charts2/charts/npm/NpmTabs.vue

@@ -18,8 +18,8 @@
 <script>
 import chartMixin from '@/views/charts2/chart-mixin'
 import { getSecond } from '@/utils/date-util'
-import { get } from '@/utils/http'
 import { api } from '@/utils/api'
+import axios from 'axios'
 import { drillDownPanelTypeMapping } from '@/utils/constants'
 import { overwriteUrl, urlParamsHandler } from '@/utils/tools'
 import { ref } from 'vue'
@@ -78,9 +78,9 @@ export default {
           endTime: getSecond(this.timeFilter.endTime),
           ip: condition[1]
         }
-        get(api.npm.overview.relatedSessions, params).then(res => {
+        axios.get(api.npm.overview.relatedSessions, { params: params }).then(res => {
-          if (res.code === 200) {
+          if (res.status === 200) {
-            self.sessionData = res.data.result
+            self.sessionData = res.data.data.result
             self.clientSessions = self.sessionData.clientSessions / (self.sessionData.clientSessions * 1 + self.sessionData.serverSessions * 1)
             self.serverSessions = self.sessionData.serverSessions / (self.sessionData.clientSessions * 1 + self.sessionData.serverSessions * 1)
           }

src/views/charts2/charts/npm/NpmTrafficLine.vue

@@ -156,9 +156,9 @@ export default {
 
       this.toggleLoading(true)
       if (params.type && params.q) {
-        axios.get(api.npm.overview.trafficGraph, { params: params }).then(res => {
+        axios.get(api.npm.overview.trafficGraph, { params: params }).then(response => {
-          res = res.data
+          const res = response.data
-          if (res.code === 200) {
+          if (response.status === 200) {
             this.showError = false
             this.isNoData = res.data.result.length === 0
             if (this.isNoData) {
@@ -185,7 +185,7 @@ export default {
         const npmLineData = []
         Promise.all([totalNetworkAnalysis, totalTrafficAnalysis, totalHttpResponseDelay, totalSslConDelay]).then(res => {
           res.forEach(item => {
-            if (item.data.code === 200) {
+            if (item.status === 200) {
               npmLineData.push(...item.data.data.result)
             } else {
               this.httpError(res)

src/views/charts2/charts/npm/RelatedSessions.vue

@@ -34,8 +34,8 @@
 </template>
 
 <script>
-import { get } from '@/utils/http'
 import { api } from '@/utils/api'
+import axios from 'axios'
 import { getSecond } from '@/utils/date-util'
 import unitConvert from '@/utils/unit-convert'
 import { unitTypes } from '@/utils/constants'
@@ -81,8 +81,9 @@ export default {
       const divRed = document.getElementById('red')
       const divGray = document.getElementById('gray')
 
-      get(api.npm.overview.relatedSessions, params).then(res => {
+      axios.get(api.npm.overview.relatedSessions, { params }).then(response => {
-        if (res.code === 200) {
+        const res = response.data
+        if (response.status === 200) {
           this.showError = false
           this.isNoData = false
 

src/views/detectionsNew/DetectionForm.vue

@@ -99,8 +99,9 @@
 <script>
 import GeneralSettings from '@/components/table/detection/GeneralSettings'
 import RuleDefinition from '@/components/table/detection/RuleDefinition'
-import { get } from '@/utils/http'
 import { api } from '@/utils/api'
+import axios from 'axios'
+import _ from 'lodash'
 
 export default {
   name: 'DetectionForm',
@@ -160,11 +161,11 @@ export default {
   methods: {
     /** 获取下拉列表数据 */
     getStatistics () {
-      get(api.detection.statistics, { pageSize: -1 }).then(response => {
+      axios.get(api.detection.statistics, { pageSize: -1 }).then(response => {
-        if (response.code === 200) {
+        if (response.status === 200) {
-          this.intervalList = response.data.intervalList || []
+          this.intervalList = _.get(response, 'data.data.intervalList', [])
         } else {
-          console.error(response)
+          console.error(response.data)
         }
       }).finally(() => {
       })

src/views/entityExplorer/EntityDetailOld.vue

@@ -1,154 +0,0 @@
-<template>
-  <div class="cn-home entity-detail">
-    <div class="entity-detail__header">
-      <div class="cn-entity__icon"><i :class="iconClass"></i></div>
-      <div class="cn-entity__name">{{entityData.ip || entityData.domain || entityData.appName }}</div>
-    </div>
-    <main class="cn-body entity-detail__body">
-      <div class="entity-detail__menu">
-        <template v-for="(anchor,index) in anchorPoints" :key="anchor.id">
-          <div class="menu-item" :class="{'menu-item--active':anchor.isActive}" @click="jumpToAnchor(index,anchor)">
-            <span>{{anchor.label}}</span>
-          </div>
-        </template>
-      </div>
-      <div class="entity-detail__content" @scroll="scroll" id="detailWrapper">
-        <cn-panel
-            ref="cnPanel"
-            :entity="entityData"
-            :is-entity-detail="true"
-            @chartLoaded="chartLoaded"
-        ></cn-panel>
-      </div>
-    </main>
-  </div>
-</template>
-
-<script>
-import { useRoute } from 'vue-router'
-import Panel from '@/views/charts/Panel'
-export default {
-  name: 'EntityDetail',
-  components: {
-    cnPanel: Panel
-  },
-  data () {
-    return {
-      anchorPoints: [], // { id, label, top, height }
-      top: 0,
-      scrollHeight: 0,
-      clientHeight: 0,
-      currentAnchor: 0
-    }
-  },
-  setup (props, ctx) {
-    const { query } = useRoute()
-    let panelType
-    const entityData = { entityType: query.entityType }
-    switch (query.entityType) {
-      case 'ip': {
-        panelType = 4
-        entityData.ip = query.name
-        break
-      }
-      case 'domain': {
-        panelType = 5
-        entityData.domain = query.name
-        break
-      }
-      case 'app': {
-        panelType = 6
-        entityData.appName = query.name
-        break
-      }
-      default: {
-        panelType = 4
-        break
-      }
-    }
-    entityData.type = panelType
-    return {
-      entityData
-    }
-  },
-  methods: {
-    chartLoaded (chartList) {
-      this.chartList = chartList
-      this.anchorPoints = []
-      let anchorPoints = []
-      const panelDom = document.querySelector('#detailWrapper')
-      this.scrollHeight = panelDom.scrollHeight
-      this.clientHeight = panelDom.clientHeight
-      chartList.forEach((chart, index) => {
-        if (chart.params.anchorPoint) {
-          const dom = document.querySelector(`[id='${chart.params.anchorPoint}']`)
-          dom && anchorPoints.push({
-            id: chart.params.anchorPoint,
-            isActive: index === 0,
-            label: chart.i18n ? this.$t(chart.i18n) : chart.name,
-            top: dom.offsetTop + 10/* ,
-            height: document.querySelector(`#${chart.params.anchorPoint}}`).scrollHeight */
-          })
-        }
-      })
-
-      // 从小到大排序
-      anchorPoints = anchorPoints.sort((a, b) => {
-        return a.top - b.top
-      })
-      if (!this.$_.isEmpty(anchorPoints)) {
-        anchorPoints[0].top = 0
-      }
-      this.anchorPoints = anchorPoints
-    },
-    scroll (e) {
-      this.top = (e.target.scrollTop + 10) || 0
-    },
-    jumpToAnchor (index, anchor) {
-      const anchorEle = document.getElementById(anchor.id)
-      this.anchorPoints.forEach((anchor, i) => {
-        if (index === i) {
-          anchor.isActive = true
-        } else {
-          anchor.isActive = false
-        }
-      })
-      if (anchorEle) {
-        anchorEle.scrollIntoView()
-        document.documentElement.scrollTop = document.documentElement.scrollTop - 30
-      }
-    },
-    resize () {
-      this.chartLoaded(this.chartList)
-    }
-  },
-  mounted () {
-    this.debounceFunc = this.$_.debounce(this.resize, 400)
-    window.addEventListener('resize', this.debounceFunc)
-  },
-  beforeUnmount () {
-    window.removeEventListener('resize', this.debounceFunc)
-  },
-  computed: {
-    iconClass () {
-      let className
-      switch (this.entityData.entityType) {
-        case ('ip'): {
-          className = 'cn-icon cn-icon-ip2'
-          break
-        }
-        case ('domain'): {
-          className = 'cn-icon cn-icon-domain2'
-          break
-        }
-        case ('app'): {
-          className = 'cn-icon cn-icon-app2'
-          break
-        }
-        default: break
-      }
-      return className
-    }
-  }
-}
-</script>

src/views/entityExplorer/EntityExplorer.vue

@@ -159,7 +159,7 @@ import ExplorerSearch from '@/views/entityExplorer/search/ExplorerSearch'
 import EntityFilter from '@/views/entityExplorer/EntityFilter'
 import EntityList from '@/views/entityExplorer/entityList/EntityList'
 import { entityType, defaultPageSize, riskLevelMapping } from '@/utils/constants'
-import { get } from '@/utils/http'
+import axios from 'axios'
 import { api } from '@/utils/api'
 import { getNowTime, getSecond } from '@/utils/date-util'
 import { ref } from 'vue'
@@ -675,8 +675,9 @@ export default {
         endTime: getSecond(params.endTime)
       }
       this.loadingLeft = true
-      get(api.entityFilter, queryParams).then(response => {
+      axios.get(api.entityFilter, { params: queryParams }).then(res => {
-        if (response.code === 200 && response.data && response.data.result) {
+        const response = res.data
+        if (res.status === 200 && response.data && response.data.result) {
           switch (params.entityType) {
             case 'ip': {
               this.filterData[0].data.forEach(d => {
@@ -738,20 +739,20 @@ export default {
         resource: params.q || ''
       }
       this.loadingLeft = true
-      const aggCountry = get(api.entity.entityList.aggCountry, queryParams)
+      const aggCountry = axios.get(api.entity.entityList.aggCountry, { params: queryParams })
-      const aggCity = get(api.entity.entityList.aggCity, queryParams)
+      const aggCity = axios.get(api.entity.entityList.aggCity, { params: queryParams })
-      const aggIPAsn = get(api.entity.entityList.aggIPAsn, queryParams)
+      const aggIPAsn = axios.get(api.entity.entityList.aggIPAsn, { params: queryParams })
-      const aggIPIsp = get(api.entity.entityList.aggIPIsp, queryParams)
+      const aggIPIsp = axios.get(api.entity.entityList.aggIPIsp, { params: queryParams })
-      const aggPort = get(api.entity.entityList.aggPort, queryParams)
+      const aggPort = axios.get(api.entity.entityList.aggPort, { params: queryParams })
-      const aggDomain = get(api.entity.entityList.aggDomain, queryParams)
+      const aggDomain = axios.get(api.entity.entityList.aggDomain, { params: queryParams })
-      const aggAppCategory = get(api.entity.entityList.aggAppCategory, queryParams)
+      const aggAppCategory = axios.get(api.entity.entityList.aggAppCategory, { params: queryParams })
-      const aggTag = get(api.entity.entityList.aggTag, queryParams)
+      const aggTag = axios.get(api.entity.entityList.aggTag, { params: queryParams })
 
       Promise.all([aggCountry, aggCity, aggIPAsn, aggIPIsp, aggPort, aggDomain, aggAppCategory, aggTag]).then(response => {
         response.forEach((item, index) => {
-          if (item.code === 200 && item.data.list) {
+          if (item.status === 200 && item.data.data.list) {
             this.newFilterData[index].data = []
-            item.data.list.forEach(item => {
+            item.data.data.list.forEach(item => {
               let obj = {
                 label: item.value,
                 topColumn: this.newFilterData[index].topColumn,
@@ -789,15 +790,15 @@ export default {
         // endTime: getSecond(params.endTime),
         resource: params.q || ''
       }
-      get(api.entity.entityList.list, queryParams).then(response => {
+      axios.get(api.entity.entityList.list, { params: queryParams }).then(response => {
-        if (response.code === 200) {
+        if (response.status === 200) {
           this.listData = []
           this.$nextTick(() => {
-            this.listData = response.data.list
+            this.listData = response.data.data.list
-            this.pageObj.total = response.data.total
+            this.pageObj.total = response.data.data.total
           })
         } else {
-          this.$message.error(response.message)
+          this.$message.error(response.data.message)
         }
       }).finally(() => {
         this.listLoading = false
@@ -811,9 +812,9 @@ export default {
         // endTime: getSecond(params.endTime),
         resource: params.q || '' // 目前版本搜索不支持实体名称搜索，下版本改进
       }
-      get(api.entity.entityList.summaryCount, queryParams).then(response => {
+      axios.get(api.entity.entityList.summaryCount, { params: queryParams }).then(response => {
-        if (response.code === 200) {
+        if (response.status === 200) {
-          this.summaryCount = response.data
+          this.summaryCount = response.data.data
         } else {
           this.summaryCount = { total: 0, domainCount: 0, ipCount: 0, appCount: 0 }
         }
@@ -831,9 +832,9 @@ export default {
         startTime: getSecond(params.startTime),
         endTime: getSecond(params.endTime)
       }
-      get(api.entityListTotal, queryParams).then(response => {
+      axios.get(api.entityListTotal, { params: queryParams }).then(response => {
-        if (response.code === 200) {
+        if (response.status === 200) {
-          this.pageObj.total = response.data.result
+          this.pageObj.total = response.data.data.result
         }
       })
     },
@@ -857,33 +858,33 @@ export default {
       this.loadingDomainActive = true
       this.loadingIpActive = true
 
-      get(api.entity.entityList.entityActive).then(response => {
+      axios.get(api.entity.entityList.entityActive).then(response => {
-        if (response.code === 200) {
+        if (response.status === 200) {
-          this.entityDomainTotal = response.data.domainCount
+          this.entityDomainTotal = response.data.data.domainCount
-          this.entityIpTotal = response.data.ipCount
+          this.entityIpTotal = response.data.data.ipCount
-          this.entityAppTotal = response.data.appCount
+          this.entityAppTotal = response.data.data.appCount
         }
         this.loadingDomain = false
         this.loadingIp = false
         this.loadingApp = false
       })
       // New
-      get(api.entity.entityList.entityNew).then(response => {
+      axios.get(api.entity.entityList.entityNew).then(response => {
-        if (response.code === 200) {
+        if (response.status === 200) {
-          this.entityDomainNew = response.data.domainCount
+          this.entityDomainNew = response.data.data.domainCount
-          this.entityIpNew = response.data.ipCount
+          this.entityIpNew = response.data.data.ipCount
-          this.entityAppNew = response.data.appCount
+          this.entityAppNew = response.data.data.appCount
         }
         this.loadingDomainNew = false
         this.loadingIpNew = false
         this.loadingAppNew = false
       })
       // Active
-      get(api.entity.entityList.entityActive).then(response => {
+      axios.get(api.entity.entityList.entityActive).then(response => {
-        if (response.code === 200) {
+        if (response.status === 200) {
-          this.entityDomainActive = response.data.domainCount
+          this.entityDomainActive = response.data.data.domainCount
-          this.entityIpActive = response.data.ipCount
+          this.entityIpActive = response.data.data.ipCount
-          this.entityAppActive = response.data.appCount
+          this.entityAppActive = response.data.data.appCount
         }
         this.loadingDomainActive = false
         this.loadingIpActive = false

src/views/entityExplorer/EntityFilterOld.vue

@@ -1,150 +0,0 @@
-<template >
-  <div class="entity-filter-case">
-    <div class="filter-case__header">{{$t('entities.filter')}}</div>
-    <div
-        class="entity-filter"
-        v-for="(filters, index) in filterData"
-        :key="index"
-    >
-      <div class="filter__header">{{filters.title}}</div>
-      <div class="filter__body">
-
-        <div class="filter__row" v-for="(item, i) in filters.data" :key="i">
-          <el-popover popper-class="filter__row-popover" placement="right-start" :width="440" v-model:visible="item.showTopTen">
-            <template #reference>
-              <div class="filter__row-popover" @click="showTopDialog(i, item, filters)">
-                <div class="row__label">
-                  <i :class="item.icon"></i>
-                  <span>{{item.label}}</span>
-                </div>
-                <div class="row__value">
-                  <loading :loading="loadingLeft" size="small"></loading>
-                  <span>{{item.value}}</span>
-                </div>
-              </div>
-            </template>
-            <entity-top
-              ref="entityTopTenPop"
-              :loading="loading"
-              :popover-data="popoverData"
-              :item-data="itemData"
-              :total-count="totalCount"
-              :top-column="item.topColumn"
-              @filter="filter"
-            ></entity-top>
-          </el-popover>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import EntityTop from '@/views/entityExplorer/EntityTop'
-import { get } from '@/utils/http'
-import { api } from '@/utils/api'
-import Loading from '@/components/common/Loading'
-import { getSecond } from '@/utils/date-util'
-export default {
-  name: 'EntityFilter',
-  components: {
-    Loading,
-    EntityTop
-  },
-  props: {
-    filterData: Array,
-    q: String,
-    timeFilter: Object,
-    loadingLeft: Boolean
-  },
-  data () {
-    return {
-      topList: 'list',
-      topData: [],
-      entityTopTenData: [],
-      currentColumn: {},
-      totalCount: 0,
-      loading: false,
-      popoverData: [],
-      itemData: {}
-    }
-  },
-  watch: {
-    currentColumn (n, o) {
-      if (n.column === 'dnsServerOrgCount') {
-        this.totalCount = this.filterData[3].orgTotalCount
-      } else if (n.column === 'dnsServerSoftwareCount') {
-        this.totalCount = this.filterData[3].softwareTotalCount
-      } else if (n.column === 'dnsServerOsCount') {
-        this.totalCount = this.filterData[3].osTotalCount
-      } else if (n.column === 'categoryDistinctCount' && n.type === 'app') {
-        this.totalCount = this.filterData[1].totalCount
-      } else {
-        let count = 0
-        this.filterData.forEach(f => {
-          const filter = f.data.some(d => d.column === n.column)
-          if (filter) {
-            count = f.totalCount
-          }
-        })
-        this.totalCount = count
-      }
-    }
-  },
-  methods: {
-    showTopDialog (i, item, filter) {
-      if (this.currentColumn.column === item.column && item.showTopTen) {
-        item.showTopTen = false
-        return
-      }
-      this.filterData.forEach(f => {
-        f.data.forEach(ff => {
-          ff.showTopTen = false
-        })
-      })
-      item.showTopTen = true
-      this.currentColumn = {
-        column: item.column,
-        type: filter.type
-      }
-      const queryParams = {
-        q: this.q,
-        entityType: filter.type,
-        column: item.topColumn,
-        top: 10,
-        startTime: getSecond(this.timeFilter.startTime),
-        endTime: getSecond(this.timeFilter.endTime)
-      }
-      this.loading = true
-      this.popoverData = []
-      this.itemData = {}
-      get(api.filterTop, queryParams).then(response => {
-        if (response.code === 200) {
-          if (this.currentColumn.column === item.column) {
-            if (filter.type === 'dns') {
-              this.popoverData = response.data.result.filter(f => {
-                return f.count > 0
-              })
-            } else {
-              this.popoverData = response.data.result
-            }
-            this.itemData = item
-          }
-        } else {
-          this.popoverData = []
-          this.itemData = item
-        }
-        this.loading = false
-      }).catch(e => {
-        this.popoverData = []
-        this.itemData = item
-        this.loading = false
-      })
-    },
-    filter (name, topData) {
-      this.showTopDialog('', topData)
-      this.$emit('filter', name, topData)
-    }
-  }
-}
-</script>

src/views/entityExplorer/entityGraph/node.js

@@ -108,7 +108,7 @@ export default class Node {
       console.error(e)
       throw e
     })
-    if (response.data && response.data.code === 200) {
+    if (response.data && response.status === 200) {
       return response.data.data
     } else {
       console.error(response)
@@ -121,7 +121,7 @@ export default class Node {
       console.error(e)
       throw e
     })
-    if (response.data && response.data.code === 200) {
+    if (response.data && response.status === 200) {
       return response.data.data
     } else {
       console.error(response)
@@ -134,7 +134,7 @@ export default class Node {
       console.error(e)
       throw e
     })
-    if (response.data && response.data.code === 200) {
+    if (response.data && response.status === 200) {
       return response.data.data
     } else {
       console.error(response)
@@ -173,7 +173,7 @@ export async function queryRelatedEntity (node, targetEntityType) {
     console.error(e)
     throw e
   })
-  if (response.data && response.data.code === 200) {
+  if (response.data && response.status === 200) {
     return response.data.data
   } else {
     console.error(response)

src/views/entityExplorer/entityList/detailOverview/entityDetailMixin.js

@@ -1,5 +1,5 @@
 import _ from 'lodash'
-import { get } from '@/utils/http'
+import axios from 'axios'
 import * as echarts from 'echarts'
 import { entityListLineOption } from '@/views/charts/charts/chart-options'
 import { riskLevelMapping, unitTypes } from '@/utils/constants'
@@ -101,9 +101,9 @@ export default {
       this.sentChart = echarts.init(document.getElementById(`entityDetailSend${this.entityName}`))
       this.receivedChart = echarts.init(document.getElementById(`entityDetailReceived${this.entityName}`))
       this.loadingTraffic = true
-      get(this.trafficUrl, this.getQueryParams()).then(response => {
+      axios.get(this.trafficUrl, { params: this.getQueryParams() }).then(response => {
-        if (response.code === 200 && response.data.result && response.data.result.length > 0) {
+        if (response.status === 200 && response.data.data.result && response.data.data.result.length > 0) {
-          response.data.result.forEach(t => {
+          response.data.data.result.forEach(t => {
             if (t.legend === 'bytesRate') {
               this.entityData.max = t.aggregation.max
               this.entityData.avg = t.aggregation.avg
@@ -190,14 +190,16 @@ export default {
           }
 
           if (url) {
-            get(url, {
+            axios.get(url, {
-              ...this.getPerformanceQueryParams(),
+              params: {
-              startTime: searchStartTime,
+                ...this.getPerformanceQueryParams(),
-              endTime: searchEndTime,
+                startTime: searchStartTime,
-              eventType: item.eventType
+                endTime: searchEndTime,
-            }).then((response) => {
+                eventType: item.eventType
-              if (response.code === 200) {
+              }
-                const metricDataList = response.data.result[0] && response.data.result[0].values
+            }).then(response => {
+              if (response.status === 200) {
+                const metricDataList = response.data.data.result[0] && response.data.data.result[0].values
                 this.$nextTick(() => {
                   if (metricDataList && metricDataList.length > 0) {
                     metricDataList.sort(reverseSortBy(0))// 将返回的数据按时间降序排序，方便找到实线和虚线的交点
@@ -244,9 +246,9 @@ export default {
       }
     },
     queryEntityDetailRelation () {
-      get(this.relationUrl, this.getQueryParams()).then(response => {
+      axios.get(this.relationUrl, { params: this.getQueryParams() }).then(response => {
-        if (response.code === 200) {
+        if (response.status === 200) {
-          this.handleRelationData(response.data.result)
+          this.handleRelationData(response.data.data.result)
         }
       })
     },
@@ -254,35 +256,35 @@ export default {
     queryEntityDetailNetworkQuantity () {
       this.loadingNetworkQuality = true
       if (this.networkQuantityUrl) {
-        get(this.networkQuantityUrl, this.getQueryParams()).then(response => {
+        axios.get(this.networkQuantityUrl, { params: this.getQueryParams() }).then(response => {
-          if (response.code === 200) {
+          if (response.status === 200) {
             const data = {
-              establishLatencyMs: response.data.result.establishLatencyValue || null,
+              establishLatencyMs: response.data.data.result.establishLatencyValue || null,
-              httpResponseLatency: response.data.result.httpResponseLatencyValue || null,
+              httpResponseLatency: response.data.data.result.httpResponseLatencyValue || null,
-              sslConLatency: response.data.result.sslConLatencyValue || null,
+              sslConLatency: response.data.data.result.sslConLatencyValue || null,
-              tcpLostlenPercent: response.data.result.sequenceGapLossPercentValue || null,
+              tcpLostlenPercent: response.data.data.result.sequenceGapLossPercentValue || null,
-              pktRetransPercent: response.data.result.pktRetransPercentValue || null
+              pktRetransPercent: response.data.data.result.pktRetransPercentValue || null
             }
             this.score = computeScore(data)
-            this.entityData.establishLatencyValue = response.data.result.establishLatencyValue
+            this.entityData.establishLatencyValue = response.data.data.result.establishLatencyValue
-            this.entityData.establishLatencyP50 = response.data.result.establishLatencyP50
+            this.entityData.establishLatencyP50 = response.data.data.result.establishLatencyP50
-            this.entityData.establishLatencyP90 = response.data.result.establishLatencyP90
+            this.entityData.establishLatencyP90 = response.data.data.result.establishLatencyP90
 
-            this.entityData.httpResponseLantencyValue = response.data.result.httpResponseLantencyValue
+            this.entityData.httpResponseLantencyValue = response.data.data.result.httpResponseLantencyValue
-            this.entityData.httpResponseLantencyP50 = response.data.result.httpResponseLantencyP50
+            this.entityData.httpResponseLantencyP50 = response.data.data.result.httpResponseLantencyP50
-            this.entityData.httpResponseLantencyP90 = response.data.result.httpResponseLantencyP90
+            this.entityData.httpResponseLantencyP90 = response.data.data.result.httpResponseLantencyP90
 
-            this.entityData.sslConLatencyValue = response.data.result.sslConLatencyValue
+            this.entityData.sslConLatencyValue = response.data.data.result.sslConLatencyValue
-            this.entityData.sslConLatencyP50 = response.data.result.sslConLatencyP50
+            this.entityData.sslConLatencyP50 = response.data.data.result.sslConLatencyP50
-            this.entityData.sslConLatencyP90 = response.data.result.sslConLatencyP90
+            this.entityData.sslConLatencyP90 = response.data.data.result.sslConLatencyP90
 
-            this.entityData.sequenceGapLossPercentValue = response.data.result.sequenceGapLossPercentValue
+            this.entityData.sequenceGapLossPercentValue = response.data.data.result.sequenceGapLossPercentValue
-            this.entityData.sequenceGapLossPercentP50 = response.data.result.sequenceGapLossPercentP50
+            this.entityData.sequenceGapLossPercentP50 = response.data.data.result.sequenceGapLossPercentP50
-            this.entityData.sequenceGapLossPercentP90 = response.data.result.sequenceGapLossPercentP90
+            this.entityData.sequenceGapLossPercentP90 = response.data.data.result.sequenceGapLossPercentP90
 
-            this.entityData.pktRetransPercentValue = response.data.result.pktRetransPercentValue
+            this.entityData.pktRetransPercentValue = response.data.data.result.pktRetransPercentValue
-            this.entityData.pktRetransPercentP50 = response.data.result.pktRetransPercentP50
+            this.entityData.pktRetransPercentP50 = response.data.data.result.pktRetransPercentP50
-            this.entityData.pktRetransPercentP90 = response.data.result.pktRetransPercentP90
+            this.entityData.pktRetransPercentP90 = response.data.data.result.pktRetransPercentP90
 
             const establishLatency = {
               value: this.entityData.establishLatencyValue,
@@ -323,17 +325,17 @@ export default {
     queryEntityDetailLinkInUrl () {
       this.loadingIn = true
       if (this.linkInUrl) {
-        get(this.linkInUrl, this.getQueryParams()).then(response => {
+        axios.get(this.linkInUrl, { params: this.getQueryParams() }).then(response => {
-          if (response.code === 200) {
+          if (response.status === 200) {
-            if (!this.$_.isEmpty(response.data.result)) {
+            if (!this.$_.isEmpty(response.data.data.result)) {
               let sum = 0
-              response.data.result.forEach(r => {
+              response.data.data.result.forEach(r => {
                 sum += parseFloat(r.bytes)
               })
-              const sorted = response.data.result.sort((r1, r2) => {
+              const sorted = response.data.data.result.sort((r1, r2) => {
                 return parseFloat(r2.bytes) - parseFloat(r1.bytes)
               })
-              const sortedId = response.data.result.sort((r1, r2) => {
+              const sortedId = response.data.data.result.sort((r1, r2) => {
                 return parseFloat(r2.commonIngressLinkId) - parseFloat(r1.commonIngressLinkId)
               })
               const max = parseFloat(sorted[0].bytes)
@@ -350,17 +352,17 @@ export default {
     queryEntityDetailLinkOutUrl () {
       this.loadingOut = true
       if (this.linkOutUrl) {
-        get(this.linkOutUrl, this.getQueryParams()).then(response => {
+        axios.get(this.linkOutUrl, { params: this.getQueryParams() }).then(response => {
-          if (response.code === 200) {
+          if (response.status === 200) {
-            if (!this.$_.isEmpty(response.data.result)) {
+            if (!this.$_.isEmpty(response.data.data.result)) {
               let sum = 0
-              response.data.result.forEach(r => {
+              response.data.data.result.forEach(r => {
                 sum += parseFloat(r.bytes)
               })
-              const sorted = response.data.result.sort((r1, r2) => {
+              const sorted = response.data.data.result.sort((r1, r2) => {
                 return parseFloat(r2.bytes) - parseFloat(r1.bytes)
               })
-              const sortedId = response.data.result.sort((r1, r2) => {
+              const sortedId = response.data.data.result.sort((r1, r2) => {
                 return parseFloat(r2.commonEgressLinkId) - parseFloat(r1.commonEgressLinkId)
               })
               const max = parseFloat(sorted[0].bytes)
@@ -376,10 +378,10 @@ export default {
 
     queryEntityDetailPerformance () {
       this.loadingAlert = true
-      get(this.performanceUrl, this.getQueryParams()).then(response => {
+      axios.get(this.performanceUrl, { params: this.getQueryParams() }).then(response => {
-        if (response.code === 200) {
+        if (response.status === 200) {
-          this.entityData.performanceNum = response.data.result.length
+          this.entityData.performanceNum = response.data.data.result.length
-          this.performanceData = response.data.result
+          this.performanceData = response.data.data.result
           this.entityData.performanceList = this.getTargetPageData(1, this.showMore.performancePageSize, this.performanceData)
         }
         this.loadingAlert = false
@@ -388,10 +390,10 @@ export default {
 
     queryEntityDetailSecurity () {
       this.loadingSecurityEvents = true
-      get(this.securityUrl, this.getQueryParams()).then(response => {
+      axios.get(this.securityUrl, { params: this.getQueryParams() }).then(response => {
-        if (response.code === 200) {
+        if (response.status === 200) {
-          this.entityData.securityNum = response.data.result.length
+          this.entityData.securityNum = response.data.data.result.length
-          this.securityData = response.data.result
+          this.securityData = response.data.data.result
           this.entityData.securityList = this.getTargetPageData(1, this.showMore.securityPageSize, this.securityData)
         }
         this.loadingSecurityEvents = false
@@ -399,16 +401,8 @@ export default {
     },
 
     performanceShowMore (num) {
-      // const startIndex = this.showMore.performancePageSize
       this.showMore.performancePageSize += num
       this.entityData.performanceList = this.getTargetPageData(this.showMore.pageNo, this.showMore.performancePageSize, this.performanceData)
-      // this.$nextTick(() => {
-      //   setTimeout(() => lltext
-      //     if (this.entityData.performanceList && this.entityData.performanceList.length > 0) {
-      //       this.queryEntityDetailPerformanceChart(this.entityData.performanceList.slice(startIndex, this.entityData.performanceList.length), startIndex)
-      //     }
-      //   }, 200)
-      // })
     },
 
     securityShowMore (num) {
@@ -421,15 +415,15 @@ export default {
     },
 
     queryDnsServerInfo () {
-      get(this.entityDetectionsIpUrl, this.getQueryParams()).then(response => {
+      axios.get(this.entityDetectionsIpUrl, { params: this.getQueryParams() }).then(response => {
-        if (response.code === 200) {
+        if (response.status === 200) {
-          this.entityData.dnsServerRole = response.data.result.dnsServerRole
+          this.entityData.dnsServerRole = response.data.data.result.dnsServerRole
-          this.entityData.dnsServerOrg = response.data.result.dnsServerOrg
+          this.entityData.dnsServerOrg = response.data.data.result.dnsServerOrg
-          this.entityData.dnsServerSoftware = response.data.result.dnsServerSoftware
+          this.entityData.dnsServerSoftware = response.data.data.result.dnsServerSoftware
-          this.entityData.dnsServerOs = response.data.result.dnsServerOs
+          this.entityData.dnsServerOs = response.data.data.result.dnsServerOs
-          this.entityData.dohSupport = response.data.result.dohSupport
+          this.entityData.dohSupport = response.data.data.result.dohSupport
-          this.entityData.dotSupport = response.data.result.dotSupport
+          this.entityData.dotSupport = response.data.data.result.dotSupport
-          this.entityData.dnssecSupport = response.data.result.dnssecSupport
+          this.entityData.dnssecSupport = response.data.data.result.dnssecSupport
         }
         if (this.entityData.dnsServerRole) {
           this.loadingDns = false
@@ -440,9 +434,9 @@ export default {
     queryDnsServerInfoRate () {
       this.loading = true
       this.detectionChart = echarts.init(document.getElementById(`entityDnsServerInfo${this.entityName}`))
-      get(this.entityDetectionsIpQueryRateUrl, this.getQueryParams()).then(response => {
+      axios.get(this.entityDetectionsIpQueryRateUrl, { params: this.getQueryParams() }).then(response => {
-        if (response.code === 200 && response.data.result && response.data.result.length > 0) {
+        if (response.status === 200 && response.data.data.result && response.data.data.result.length > 0) {
-          response.data.result.forEach(t => {
+          response.data.data.result.forEach(t => {
             this.entityData.queryRate = _.nth(t.values, -3)[1]
             this.chartDetectionQueryRate = {
               ...this.chartOption,

src/views/entityExplorer/entityList/entityListMixin.js

@@ -1,5 +1,5 @@
 import _ from 'lodash'
-import { get } from '@/utils/http'
+import axios from 'axios'
 import { api } from '@/utils/api'
 import * as echarts from 'echarts'
 import { entityListLineOption } from '@/views/charts/charts/chart-options'
@@ -123,9 +123,9 @@ export default {
         }
         default: break
       }
-      get(url, queryParams).then(response => {
+      axios.get(url, { params: queryParams }).then(response => {
-        if (response.code === 200) {
+        if (response.status === 200) {
-          this.entityData.securityCount = response.data.result ? response.data.result.length : 0
+          this.entityData.securityCount = response.data.data.result ? response.data.data.result.length : 0
         }
       })
     },
@@ -153,9 +153,9 @@ export default {
         }
         default: break
       }
-      get(url, queryParams).then(response => {
+      axios.get(url, { params: queryParams }).then(response => {
-        if (response.code === 200) {
+        if (response.status === 200) {
-          this.entityData.performanceCount = response.data.result ? response.data.result.length : 0
+          this.entityData.performanceCount = response.data.data.result ? response.data.data.result.length : 0
         }
       })
     },
@@ -168,11 +168,11 @@ export default {
     },
     queryEntityDetailTraffic () {
       this.loading = true
-      get(this.trafficUrl, this.getQueryParams()).then(response => {
+      axios.get(this.trafficUrl, { params: this.getQueryParams() }).then(response => {
-        if (response.code === 200 && response.data.result && response.data.result.length > 0) {
+        if (response.status === 200 && response.data.data.result && response.data.data.result.length > 0) {
           let sentSeries
           let receivedSeries
-          response.data.result.forEach(t => {
+          response.data.data.result.forEach(t => {
             if (t.legend === 'bytesRate') {
               this.entityData.max = t.aggregation.max
               this.entityData.avg = t.aggregation.avg
@@ -281,14 +281,14 @@ export default {
     queryNetworkQuantity () {
       this.loadingNetworkQuality = true
 
-      get(this.scoreUrl, this.getQueryParams()).then(response => {
+      axios.get(this.scoreUrl, { params: this.getQueryParams() }).then(response => {
-        if (response.code === 200) {
+        if (response.status === 200) {
           const data = {
-            establishLatencyMs: response.data.result.establishLatencyValue || null,
+            establishLatencyMs: response.data.data.result.establishLatencyValue || null,
-            httpResponseLatency: response.data.result.httpResponseLatencyValue || null,
+            httpResponseLatency: response.data.data.result.httpResponseLatencyValue || null,
-            sslConLatency: response.data.result.sslConLatencyValue || null,
+            sslConLatency: response.data.data.result.sslConLatencyValue || null,
-            tcpLostlenPercent: response.data.result.sequenceGapLossPercentValue || null,
+            tcpLostlenPercent: response.data.data.result.sequenceGapLossPercentValue || null,
-            pktRetransPercent: response.data.result.pktRetransPercentValue || null
+            pktRetransPercent: response.data.data.result.pktRetransPercentValue || null
           }
           this.score = computeScore(data)
         }
@@ -299,12 +299,12 @@ export default {
     /** 获取事件数量 */
     queryEventNum () {
       this.loadingEvent = true
-      const performance = get(this.performanceEventUrl, this.getQueryParams())
+      const performance = axios.get(this.performanceEventUrl, { params: this.getQueryParams() })
-      const security = get(this.securityEventUrl, this.getQueryParams())
+      const security = axios.get(this.securityEventUrl, { params: this.getQueryParams() })
       this.eventNum = 0
 
       Promise.all([performance, security]).then(response => {
-        this.eventNum = response[0].data.result.length + response[1].data.result.length
+        this.eventNum = response[0].data.data.result.length + response[1].data.data.result.length
       }).catch(e => {
         this.eventNum = 0
       }).finally(() => {

src/views/setting/KnowledgeBase.vue

@@ -126,7 +126,6 @@ import dataListMixin from '@/mixins/data-list'
 import KnowledgeBaseTableForCard from '@/components/table/setting/knowledgeBaseTableForCard'
 import KnowledgeBaseTableForRow from '@/components/table/setting/KnowledgeBaseTableForRow'
 import { api } from '@/utils/api'
-import { get } from '@/utils/http'
 import { urlParamsHandler, overwriteUrl } from '@/utils/tools'
 import { knowledgeBaseCategory, knowledgeBaseSource, knowledgeCategoryValue } from '@/utils/constants'
 import axios from 'axios'
@@ -264,7 +263,7 @@ export default {
       } else {
         this.toggleLoading(true)
         axios.delete(this.url + '?knowledgeIds=' + ids).then(response => {
-          if (response.data.code === 200) {
+          if (response.status === 200) {
             this.delFlag = true
             this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
             this.secondBatchDeleteObjs.forEach((item) => {
@@ -297,7 +296,7 @@ export default {
     },
     edit (u) {
       axios.get(`${this.url}/${u.id}`).then(response => {
-        if (response.data.code === 200) {
+        if (response.status === 200) {
           this.object = response.data.data.list[0]
           console.info(this.object)
         }
@@ -389,7 +388,7 @@ export default {
       }).then(() => {
         this.toggleLoading(true)
         axios.delete(this.url + '?knowledgeIds=' + row.id).then(response => {
-          if (response.data.code === 200) {
+          if (response.status === 200) {
             this.delFlag = true
             this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
             // delete this.searchLabel.category
@@ -439,19 +438,15 @@ export default {
         category: knowledgeCategoryValue.aiTagging + ',' + knowledgeCategoryValue.webSketch,
         pageSize: -1
       }
-      get(this.listUrl, params).then(response => {
+      axios.get(this.listUrl, { params }).then(response => {
-        if (response.code === 200) {
+        if (response.status === 200) {
-          this.tableData = response.data.list
+          this.tableData = response.data.data.list
-          if (!this.tableData || this.tableData.length === 0) {
+          this.isNoData = !this.tableData || this.tableData.length === 0
-            this.isNoData = true
-          } else {
-            this.isNoData = false
-          }
         } else {
-          console.error(response)
+          console.error(response.data)
           this.isNoData = true
-          if (response.message) {
+          if (response.data.message) {
-            this.$message.error(response.message)
+            this.$message.error(response.data.message)
           } else {
             this.$message.error(this.$t('tip.somethingWentWrong'))
           }

src/views/setting/KnowledgeBaseForm.vue

@@ -241,7 +241,7 @@ export default {
       if (!this.editObject.knowledgeId) {
         this.$refs.form.clearValidate('type')
         const response = await this.getKnowledgeBaseList()
-        if (response.data.code === 200) {
+        if (response.status === 200) {
           const find = response.data.data.list.find(d => d.name === value && d.source === this.editObject.source)
           if (find) {
             validate = false
@@ -256,7 +256,7 @@ export default {
       if (!this.editObject.knowledgeId) {
         this.$refs.form.clearValidate('name')
         const response = await this.getKnowledgeBaseList()
-        if (response.data.code === 200) {
+        if (response.status === 200) {
           const find = response.data.data.list.find(d => d.name === this.editObject.name && d.source === value)
           if (find) {
             validate = false
@@ -537,46 +537,46 @@ export default {
       return originalImportedData
     },
     uploadSuccess (response) {
-      this.uploaded = response.code === 200
+      this.uploaded = true
-      if (response.code === 200) {
+      // if (response.code === 200) {
-        // 上传成功后去掉upload和preview的错误提示
+      // 上传成功后去掉upload和preview的错误提示
-        this.uploadErrorTip = ''
+      this.uploadErrorTip = ''
-        this.previewErrorTip = ''
+      this.previewErrorTip = ''
-        this.importedType = this.editObject.source
+      this.importedType = this.editObject.source
-        const originalImportedData = _.cloneDeep(response.data.data)
+      const originalImportedData = _.cloneDeep(response.data.data)
-        this.importedDataNoData = originalImportedData.length === 0
+      this.importedDataNoData = originalImportedData.length === 0
-        if (originalImportedData.length > 0) {
+      if (originalImportedData.length > 0) {
-          originalImportedData.forEach(data => {
+        originalImportedData.forEach(data => {
-            if (data.isValid === 1) {
+          if (data.isValid === 1) {
-              data.msg = this.$t('overall.success')
+            data.msg = this.$t('overall.success')
-            } else if (data.isValid === 0) {
+          } else if (data.isValid === 0) {
-              data.msg = this.$t('validate.wrongFormat')
+            data.msg = this.$t('validate.wrongFormat')
-            }
+          }
-          })
+        })
-        }
+      }
-        this.originalImportInfo = {
+      this.originalImportInfo = {
-          total: originalImportedData.length,
+        total: originalImportedData.length,
-          succeeded: originalImportedData.filter(d => d.isValid === 1).length,
+        succeeded: originalImportedData.filter(d => d.isValid === 1).length,
-          failed: originalImportedData.filter(d => d.isValid !== 1).length
+        failed: originalImportedData.filter(d => d.isValid !== 1).length
-        }
+      }
-        this.isLoad = false
+      this.isLoad = false
-        originalImportedData.sort((a, b) => b.isValid - a.isValid)
+      originalImportedData.sort((a, b) => b.isValid - a.isValid)
-        this.importedData = this.handleSpeticalTypeData(originalImportedData)
+      this.importedData = this.handleSpeticalTypeData(originalImportedData)
-        this.addItemList = _.cloneDeep(this.importedData).filter(item => { return item.isValid === 1 })
+      this.addItemList = _.cloneDeep(this.importedData).filter(item => { return item.isValid === 1 })
-        this.updateItemList = []
+      this.updateItemList = []
-        this.deleteItemIds = this.oldItemIds
+      this.deleteItemIds = this.oldItemIds
 
-        this.handleShowImportedData()
+      this.handleShowImportedData()
-        this.addEditFlag = false
+      this.addEditFlag = false
-        this.editTagErrorTip = ''
+      this.editTagErrorTip = ''
-        this.editIndex = -1
+      this.editIndex = -1
-        this.isPreviewChange = true
+      this.isPreviewChange = true
-        this.stepHeights[2] = itemListHeight.hasData
+      this.stepHeights[2] = itemListHeight.hasData
-        this.stepHeightConstant.third = itemListHeight.hasData
+      this.stepHeightConstant.third = itemListHeight.hasData
-      } else {
+      /* } else {
         this.uploadLoading = false
         this.$message.error(this.$t('tip.uploadFailed', { msg: response.message }))
-      }
+      } */
     },
     onRemove (files) {
       if (files && files.status === 'success') {
@@ -842,7 +842,7 @@ export default {
                     if (!this.editObject.knowledgeId) {
                       postData.addItemList = this.addItemList
                       axios.post(this.url, postData).then(response => {
-                        if (response.data.code === 200) {
+                        if (response.status === 200) {
                           this.$message({
                             duration: 2000,
                             type: 'success',
@@ -871,7 +871,7 @@ export default {
                       postData.deleteItemIds = this.deleteItemIds
                       postData.knowledgeId = this.editObject.knowledgeId
                       axios.put(this.url, postData).then(response => {
-                        if (response.data.code === 200) {
+                        if (response.status === 200) {
                           this.$message({
                             duration: 2000,
                             type: 'success',
@@ -1176,7 +1176,7 @@ export default {
       this.stepHeightConstant.third = itemListHeight.hasData// 修改的时候一直是478
       this.isLoad = true
       axios.get(`${api.knowledgeBase}/${this.knowledgeBaseId}`, { params: { pageSize: -1 } }).then(response => {
-        if (response.data.code === 200) {
+        if (response.status === 200) {
           if (!response.data.data) {
             throw new Error('No data found, id: ' + this.knowledgeBaseId)
           }

src/views/setting/KnowledgeFilter.vue

@@ -1,296 +0,0 @@
-<template>
-  <div>
-    <div class="filter-title">
-      {{ $t('knowledge.filters') }}
-    </div>
-    <div class="knowledge-filter">
-      <div class="filter__header" @click="collapseCategory">
-        <span class="new-knowledge-filter-header-title">{{filterCategoryData.title}}</span>
-        <i class="el-icon-arrow-right new-knowledge-filter-icon" :class="{ 'arrow-rotate': !filterCategoryData.collapse }"></i>
-      </div>
-      <el-collapse-transition>
-        <div class="filter__body"  v-if="!filterCategoryData.collapse">
-          <el-tree
-                  ref="knowledgeTreeTypeFilter"
-                  :data="filterCategoryData.data"
-                  show-checkbox
-                  node-key="id"
-                  default-expand-all
-                  :render-content="renderContent"
-                  @check="(data,checkinfo)=>handleCheckedItemChange(data,checkinfo)"
-                  >
-          </el-tree>
-        </div>
-      </el-collapse-transition>
-    </div>
-    <div class="knowledge-filter">
-      <div class="filter__header" @click="collapseStatus">
-        <span class="new-knowledge-filter-header-title">{{filterStatusData.title}}</span>
-        <i class="el-icon-arrow-right new-knowledge-filter-icon" :class="{ 'arrow-rotate': !filterStatusData.collapse }"></i>
-      </div>
-      <el-collapse-transition>
-        <div class="filter__body"   v-if="!filterStatusData.collapse">
-          <el-tree
-                  ref="knowledgeTreeStatusFilter"
-                  :data="filterStatusData.data"
-                  show-checkbox
-                  node-key="id"
-                  default-expand-all
-                  :render-content="renderContent"
-                  @check="(data,checkinfo)=>handleCheckedItemChange(data,checkinfo)"
-          >
-          </el-tree>
-        </div>
-      </el-collapse-transition>
-    </div>
-  </div>
-</template>
-
-<script>
-import { api } from '@/utils/api'
-import { get } from '@/utils/http'
-import { knowledgeBaseCategory, knowledgeBaseSource } from '@/utils/constants'
-
-export default {
-  name: 'KnowledgeFilter',
-  props: {
-    keyWord: String
-  },
-  data () {
-    return {
-      url: api.knowledgeBaseStatistics,
-      checkAll: true,
-      isIndeterminateModel: false,
-      filterCategoryData: {
-        id: 0,
-        title: this.$t('knowledge.type'),
-        collapse: false,
-        data: []
-      },
-      filterStatusData: {
-        id: 1,
-        title: this.$t('knowledge.status'),
-        collapse: false,
-        data: []
-      },
-      defaultProps: {
-        children: 'children',
-        label: 'label'
-      },
-      typeData: [],
-      statusData: [],
-      defaultCheckedCategory: [],
-      defaultCheckedStatus: [],
-      filterParams: {}
-    }
-  },
-  watch: {
-  },
-  methods: {
-    renderContent (h, { node, data, store }) {
-      return h('span', { class: 'custom-tree-node' }, [
-        h('span', {}, data.label),
-        h('span', { class: 'count-tree-node' }, data.count)
-      ])
-    },
-    collapseCategory () {
-      this.filterCategoryData.collapse = !this.filterCategoryData.collapse
-      const self = this
-      if (!this.filterCategoryData.collapse) {
-        this.$nextTick(() => {
-          if (self.$refs.knowledgeTreeTypeFilter instanceof Array) {
-            self.$refs.knowledgeTreeTypeFilter[0].setCheckedKeys(this.defaultCheckedCategory)
-          } else {
-            self.$refs.knowledgeTreeTypeFilter.setCheckedKeys(this.defaultCheckedCategory)
-          }
-        })
-      }
-    },
-    collapseStatus () {
-      this.filterStatusData.collapse = !this.filterStatusData.collapse
-      const self = this
-      if (!this.filterStatusData.collapse) {
-        this.$nextTick(() => {
-          if (self.$refs.knowledgeTreeStatusFilter instanceof Array) {
-            self.$refs.knowledgeTreeStatusFilter[0].setCheckedKeys(this.defaultCheckedStatus)
-          } else {
-            self.$refs.knowledgeTreeStatusFilter.setCheckedKeys(this.defaultCheckedStatus)
-          }
-        })
-      }
-    },
-    handleCheckedItemChange (data, checkinfo) {
-      let typeCheckedNodes = []
-      let typeHalfCheckedNodes = []
-      if (this.$refs.knowledgeTreeTypeFilter) {
-        if (this.$refs.knowledgeTreeTypeFilter instanceof Array) {
-          typeCheckedNodes = this.$refs.knowledgeTreeTypeFilter[0].getCheckedNodes()
-          typeHalfCheckedNodes = this.$refs.knowledgeTreeTypeFilter[0].getHalfCheckedNodes()
-        } else {
-          typeCheckedNodes = this.$refs.knowledgeTreeTypeFilter.getCheckedNodes()
-          typeHalfCheckedNodes = this.$refs.knowledgeTreeTypeFilter.getHalfCheckedNodes()
-        }
-        const categoryIds = []
-        typeCheckedNodes.forEach(item => {
-          categoryIds.push(item.id)
-        })
-        this.defaultCheckedCategory = categoryIds
-        typeCheckedNodes = typeCheckedNodes.concat(typeHalfCheckedNodes)
-      }
-      let statusCheckedNodes = []
-      if (this.$refs.knowledgeTreeStatusFilter) {
-        if (this.$refs.knowledgeTreeStatusFilter instanceof Array) {
-          statusCheckedNodes = this.$refs.knowledgeTreeStatusFilter[0].getCheckedNodes()
-        } else {
-          statusCheckedNodes = this.$refs.knowledgeTreeStatusFilter.getCheckedNodes()
-        }
-        const sourceIds = []
-        statusCheckedNodes.forEach(item => {
-          sourceIds.push(item.id)
-        })
-        this.defaultCheckedStatus = sourceIds
-      }
-      const typeCheckedLen = typeCheckedNodes.length
-      const statusCheckedLen = statusCheckedNodes.length
-      let params = {}
-      let allSourceNum = 0
-      this.filterCategoryData.data.forEach(item => {
-        allSourceNum = allSourceNum + item.children.length
-      })
-      if (this.defaultCheckedCategory.length === 0 || this.defaultCheckedStatus.length === 0) {
-        this.$emit('clearList')
-      } else {
-        const categorys = []
-        const sources = []
-        typeCheckedNodes.forEach(val => {
-          if (val.type === 0) {
-            categorys.push(val.value)
-          } else if (val.type === 1) {
-            sources.push(val.value)
-          }
-        })
-        if (!(categorys.length === this.filterCategoryData.data.length && sources.length === allSourceNum)) {
-          if (this.filterCategoryData.collapse) {
-            params = {
-              category: categorys.toString() ? categorys.toString() : this.filterParams.category,
-              source: sources.toString() ? sources.toString() : this.filterParams.source
-            }
-          } else {
-            params = {
-              category: categorys.toString(),
-              source: sources.toString()
-            }
-          }
-        }
-        if (this.defaultCheckedStatus.length === 1) {
-          if (this.filterStatusData.collapse) {
-            params = {
-              ...params,
-              status: statusCheckedNodes[0].value ? statusCheckedNodes[0].value : this.filterParams.status
-            }
-          } else {
-            params = {
-              ...params,
-              status: statusCheckedNodes[0].value
-            }
-          }
-        }
-        this.filterParams = params
-        this.$emit('reload', params, true, false, this.defaultCheckedCategory, this.defaultCheckedStatus)
-      }
-    },
-    getAllTableData (params) {
-      let searchParams = { pageSize: -1 }
-      if (params) {
-        searchParams = { ...searchParams, ...params }
-      }
-      get(this.url, searchParams).then(response => {
-        if (response.code === 200) {
-          this.typeData = response.data.categoryList
-          this.statusData = response.data.statusList
-        } else {
-          console.error(response)
-        }
-      }).finally(() => {
-        this.initTypeData()
-        this.initStatusData()
-        const self = this
-        this.$nextTick(() => {
-          if (self.$refs.knowledgeTreeTypeFilter) {
-            self.$refs.knowledgeTreeTypeFilter.setCheckedKeys(this.defaultCheckedCategory)
-          }
-          if (self.$refs.knowledgeTreeStatusFilter) {
-            self.$refs.knowledgeTreeStatusFilter.setCheckedKeys(this.defaultCheckedStatus)
-          }
-        })
-      })
-    },
-    initTypeData () {
-      this.filterCategoryData.data = []
-      let categoryIds = []
-      this.typeData.forEach((type, typeIndex) => {
-        const categoryLabel = knowledgeBaseCategory.find(t => t.value === type.name)
-        const categoryId = typeIndex
-        const category = {
-          id: categoryId,
-          label: categoryLabel ? categoryLabel.name : type.name,
-          value: type.name,
-          count: type.count,
-          type: 0,
-          children: []
-        }
-        categoryIds.push(categoryId)
-        this.filterCategoryData.data.push(category)
-        const sourceList = type.sourceList
-        sourceList.forEach((item, sourceIndex) => {
-          const sourceLabel = knowledgeBaseSource.find(t => t.value === item.name)
-          const source = {
-            id: typeIndex + '' + sourceIndex,
-            label: sourceLabel ? sourceLabel.name : item.name,
-            value: item.name,
-            count: item.count,
-            type: 1
-          }
-          category.children.push(source)
-        })
-      })
-      if (this.defaultCheckedCategory.length === 0) {
-        this.defaultCheckedCategory = categoryIds
-      }
-    },
-    initStatusData () {
-      const enableCount = 0
-      const disableCount = 0
-      this.filterStatusData.data = []
-      let statusIds = []
-      this.statusData.forEach((data, index) => {
-        this.filterStatusData.data.push({
-          id: index,
-          label: data.status === 1 ? 'enabled' : 'disable',
-          value: data.status,
-          count: data.count,
-          type: 0
-        })
-        statusIds.push(index)
-      })
-      if (this.defaultCheckedStatus.length === 0) {
-        this.defaultCheckedStatus = statusIds
-      }
-    },
-    reloadFilter (checkedCategoryIds, checkedStatusIds) {
-      if (checkedCategoryIds && checkedCategoryIds.length > 0) {
-        this.defaultCheckedCategory = checkedCategoryIds
-      }
-      if (checkedStatusIds && checkedStatusIds.length > 0) {
-        this.defaultCheckedStatus = checkedStatusIds
-      }
-      this.getAllTableData()
-    }
-  },
-  mounted () {
-    this.getAllTableData()
-  },
-  computed: {
-  }
-}
-</script>