Merge branch 'cherry-pick-eb611bda' into 'dev-23.06'

fix: 1、修复customize只保留最后一项点击空白处，再打开customize新增选项，上次禁用的项还存在的问题；2、表格某一列数据为空时，添加-避免界面展示空白

See merge request cyber-narrator/cn-ui!31

.eslintrc.js

@@ -1,7 +1,8 @@
 module.exports = {
   env: {
     browser: true,
-    es2021: true
+    es2021: true,
+    jest: true
   },
   extends: [
     'plugin:vue/vue3-essential',

.gitlab-ci.yml

@@ -2,6 +2,7 @@
 stages:
   - gen_git-log
   - build_project
+  - test
   - build_image
 
 cache:
@@ -10,7 +11,7 @@ cache:
       - package.json
   paths:
     - node_modules
-    - dist/
+#    - dist/
 
 before_script:
   - export CNUI_TAG=$(date +%Y%m%d%H%M%S)
@@ -41,21 +42,38 @@ build_project:
     - cnpm install --save-dev --unsafe-perm
     - echo "npm run build"
     - cnpm run build
+  artifacts:
+    name: "$CI_JOB_NAME-$CI_COMMIT_REF_NAME"
+    when: on_success
+    paths:
+      - dist/
   only:
     - dev
     - tags
   tags:
     - galaxy
 
+test:
+  stage: test
+  script:
+    - cnpm run test
+  when: on_success
+  only:
+    - dev
+  tags:
+    - galaxy
+
 build_image:
+  dependencies:
+    - build_project
   stage: build_image
   script:
     - echo "docker build"
-    - sudo docker build --no-cache -t cn-ui:$CNUI_TAG .
+    - sudo docker build --no-cache -t cn-ui-$CI_COMMIT_REF_NAME:$CNUI_TAG .
     - echo "docker tag"
-    - sudo docker tag cn-ui:$CNUI_TAG 192.168.40.153:9080/cyber-narrator/cn-ui:$CNUI_TAG
+    - sudo docker tag cn-ui-$CI_COMMIT_REF_NAME:$CNUI_TAG 192.168.40.153:9080/cyber-narrator/cn-ui-$CI_COMMIT_REF_NAME:$CNUI_TAG
     - echo "docker push"
-    - sudo docker push 192.168.40.153:9080/cyber-narrator/cn-ui:$CNUI_TAG
+    - sudo docker push 192.168.40.153:9080/cyber-narrator/cn-ui-$CI_COMMIT_REF_NAME:$CNUI_TAG
   when: on_success
   only:
     - dev
@@ -64,6 +82,8 @@ build_image:
 
 
 build_release_image:
+  dependencies:
+    - build_project
   stage: build_image
   script:
     - echo 'tag名称是'

jest.config.js

@@ -6,6 +6,8 @@ module.exports = {
     '<rootDir>/test/**/__tests__/**/*.{vue,js,jsx,ts,tsx}',
     '<rootDir>/test/**/*.{spec,test}.{vue,js,jsx,ts,tsx}'
   ],
+  setupFilesAfterEnv: ['<rootDir>/test/init.js'],
+  verbose: true,
   testEnvironment: 'jsdom',
   transform: {
     '^.+\\.(vue)$': '<rootDir>/node_modules/vue-jest',

package.json

@@ -63,7 +63,7 @@
     "@vue/cli-service": "~4.5.0",
     "@vue/compiler-sfc": "^3.0.0",
     "@vue/component-compiler-utils": "^3.2.0",
-    "@vue/test-utils": "^2.0.0-rc.18",
+    "@vue/test-utils": "^2.2.7",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.0.0",
     "compression-webpack-plugin": "^8.0.1",

public/config.js

@@ -1,4 +1,5 @@
-var BASE_CONFIG = {
-  baseUrl: 'http://192.168.44.54:8090/',
-  version: '2.0.2021.05.11.19.43'
+const BASE_CONFIG = {
+  baseUrl: 'http://192.168.44.54:8091/',
+  version: '23.06',
+  apiVersion: 'v1'
 }

public/images/flag/011-china.svg

@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<rect y="85.331" style="fill:#D80027;" width="512" height="341.337"/>
+<g>
+	<polygon style="fill:#FFDA44;" points="178.923,189.567 193.579,234.674 241.008,234.674 202.637,262.552 217.294,307.661
+		178.923,279.782 140.552,307.661 155.208,262.552 116.837,234.674 164.266,234.674 	"/>
+	<polygon style="fill:#FFDA44;" points="271.3,339.593 256.91,329.138 242.522,339.592 248.017,322.678 233.628,312.223
+		251.414,312.223 256.91,295.307 262.408,312.223 280.193,312.223 265.804,322.677 	"/>
+	<polygon style="fill:#FFDA44;" points="308.837,287.927 291.052,287.927 285.556,304.841 280.06,287.928 262.273,287.927
+		276.664,277.472 271.166,260.557 285.556,271.01 299.945,260.557 294.449,277.472 	"/>
+	<polygon style="fill:#FFDA44;" points="308.837,224.063 294.449,234.518 299.944,251.432 285.556,240.979 271.166,251.434
+		276.664,234.517 262.273,224.065 280.061,224.063 285.556,207.147 291.052,224.063 	"/>
+	<polygon style="fill:#FFDA44;" points="271.3,172.397 265.805,189.313 280.193,199.766 262.408,199.767 256.91,216.684
+		251.414,199.766 233.629,199.768 248.018,189.312 242.522,172.396 256.91,182.851 	"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

public/images/flag/142-australia.svg

@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<rect y="85.333" style="fill:#0052B4;" width="512" height="341.337"/>
+<g>
+	<path style="fill:#F0F0F0;" d="M223.397,255.996c0.273-0.304,0.543-0.609,0.813-0.916c-0.27,0.308-0.546,0.61-0.82,0.916H223.397z"
+		/>
+	<polygon style="fill:#F0F0F0;" points="189.217,297.923 200.175,320.836 224.922,315.118 213.839,337.971 233.739,353.752
+		208.963,359.337 209.032,384.735 189.217,368.845 169.403,384.735 169.472,359.337 144.696,353.752 164.596,337.971
+		153.513,315.118 178.259,320.836 	"/>
+	<polygon style="fill:#F0F0F0;" points="387.076,326.387 392.303,337.316 404.106,334.588 398.82,345.488 408.312,353.016
+		396.494,355.679 396.526,367.793 387.076,360.215 377.626,367.793 377.658,355.679 365.841,353.016 375.332,345.488
+		370.047,334.588 381.85,337.316 	"/>
+	<polygon style="fill:#F0F0F0;" points="338.453,210.448 343.68,221.378 355.483,218.649 350.197,229.55 359.688,237.078
+		347.871,239.741 347.903,251.856 338.453,244.276 329.002,251.856 329.035,239.741 317.217,237.078 326.708,229.55
+		321.424,218.649 333.226,221.378 	"/>
+	<polygon style="fill:#F0F0F0;" points="387.076,144.198 392.303,155.128 404.106,152.398 398.82,163.3 408.311,170.827
+		396.494,173.491 396.526,185.605 387.076,178.025 377.626,185.605 377.658,173.491 365.841,170.827 375.332,163.3 370.047,152.398
+		381.85,155.128 	"/>
+	<polygon style="fill:#F0F0F0;" points="429.547,193.886 434.774,204.815 446.576,202.087 441.292,212.987 450.783,220.514
+		438.965,223.178 438.998,235.292 429.547,227.714 420.097,235.292 420.129,223.178 408.312,220.514 417.803,212.987
+		412.517,202.087 424.32,204.815 	"/>
+	<polygon style="fill:#F0F0F0;" points="399.179,251.856 403.289,264.508 416.593,264.508 405.83,272.328 409.942,284.98
+		399.179,277.161 388.414,284.98 392.526,272.328 381.763,264.508 395.067,264.508 	"/>
+	<polygon style="fill:#F0F0F0;" points="256,85.333 256,115.886 210.833,140.985 256,140.985 256,200.344 196.897,200.344
+		256,233.179 256,255.996 229.32,255.996 155.826,215.17 155.826,255.996 100.174,255.996 100.174,207.423 12.744,255.996
+		0,255.996 0,225.443 45.167,200.344 0,200.344 0,140.985 59.103,140.985 0,108.139 0,85.333 26.68,85.333 100.174,126.16
+		100.174,85.333 155.826,85.333 155.826,133.906 243.256,85.333 	"/>
+</g>
+<polygon style="fill:#D80027;" points="144,85.33 112,85.33 112,154.662 0,154.662 0,186.662 112,186.662 112,255.996 144,255.996
+	144,186.662 256,186.662 256,154.662 144,154.662 "/>
+<polygon style="fill:#0052B4;" points="155.826,200.344 256,255.996 256,240.259 184.153,200.344 "/>
+<polygon style="fill:#F0F0F0;" points="155.826,200.344 256,255.996 256,240.259 184.153,200.344 "/>
+<g>
+	<polygon style="fill:#D80027;" points="155.826,200.344 256,255.996 256,240.259 184.153,200.344 	"/>
+	<polygon style="fill:#D80027;" points="71.846,200.344 0,240.259 0,255.996 0,255.996 100.174,200.344 	"/>
+</g>
+<polygon style="fill:#0052B4;" points="100.174,140.982 0,85.33 0,101.067 71.847,140.982 "/>
+<polygon style="fill:#F0F0F0;" points="100.174,140.982 0,85.33 0,101.067 71.847,140.982 "/>
+<g>
+	<polygon style="fill:#D80027;" points="100.174,140.982 0,85.33 0,101.067 71.847,140.982 	"/>
+	<polygon style="fill:#D80027;" points="184.154,140.982 256,101.067 256,85.33 256,85.33 155.826,140.982 	"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

public/images/flag/185-united states of america.svg

@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<rect y="85.331" style="fill:#F0F0F0;" width="512" height="341.337"/>
+<g>
+	<rect y="127.994" style="fill:#D80027;" width="512" height="42.663"/>
+	<rect y="213.331" style="fill:#D80027;" width="512" height="42.663"/>
+	<rect y="298.657" style="fill:#D80027;" width="512" height="42.663"/>
+	<rect y="383.994" style="fill:#D80027;" width="512" height="42.663"/>
+</g>
+<rect y="85.331" style="fill:#2E52B2;" width="256" height="183.797"/>
+<g>
+	<polygon style="fill:#F0F0F0;" points="99.822,160.624 95.699,173.308 82.363,173.308 93.154,181.143 89.031,193.826
+		99.822,185.991 110.606,193.826 106.484,181.143 117.275,173.308 103.938,173.308 	"/>
+	<polygon style="fill:#F0F0F0;" points="103.938,219.08 99.822,206.397 95.699,219.08 82.363,219.08 93.154,226.916 89.031,239.599
+		99.822,231.763 110.606,239.599 106.484,226.916 117.275,219.08 	"/>
+	<polygon style="fill:#F0F0F0;" points="47.577,219.08 43.46,206.397 39.337,219.08 26.001,219.08 36.792,226.916 32.669,239.599
+		43.46,231.763 54.245,239.599 50.123,226.916 60.912,219.08 	"/>
+	<polygon style="fill:#F0F0F0;" points="43.46,160.624 39.337,173.308 26.001,173.308 36.792,181.143 32.669,193.826 43.46,185.991
+		54.245,193.826 50.123,181.143 60.912,173.308 47.577,173.308 	"/>
+	<polygon style="fill:#F0F0F0;" points="99.822,114.85 95.699,127.535 82.363,127.535 93.154,135.371 89.031,148.054
+		99.822,140.218 110.606,148.054 106.484,135.371 117.275,127.535 103.938,127.535 	"/>
+	<polygon style="fill:#F0F0F0;" points="43.46,114.85 39.337,127.535 26.001,127.535 36.792,135.371 32.669,148.054 43.46,140.218
+		54.245,148.054 50.123,135.371 60.912,127.535 47.577,127.535 	"/>
+	<polygon style="fill:#F0F0F0;" points="156.183,160.624 152.061,173.308 138.725,173.308 149.515,181.143 145.394,193.826
+		156.183,185.991 166.969,193.826 162.846,181.143 173.637,173.308 160.301,173.308 	"/>
+	<polygon style="fill:#F0F0F0;" points="160.301,219.08 156.183,206.397 152.061,219.08 138.725,219.08 149.515,226.916
+		145.394,239.599 156.183,231.763 166.969,239.599 162.846,226.916 173.637,219.08 	"/>
+	<polygon style="fill:#F0F0F0;" points="216.663,219.08 212.546,206.397 208.423,219.08 195.088,219.08 205.877,226.916
+		201.755,239.599 212.546,231.763 223.331,239.599 219.208,226.916 229.999,219.08 	"/>
+	<polygon style="fill:#F0F0F0;" points="212.546,160.624 208.423,173.308 195.088,173.308 205.877,181.143 201.755,193.826
+		212.546,185.991 223.331,193.826 219.208,181.143 229.999,173.308 216.663,173.308 	"/>
+	<polygon style="fill:#F0F0F0;" points="156.183,114.85 152.061,127.535 138.725,127.535 149.515,135.371 145.394,148.054
+		156.183,140.218 166.969,148.054 162.846,135.371 173.637,127.535 160.301,127.535 	"/>
+	<polygon style="fill:#F0F0F0;" points="212.546,114.85 208.423,127.535 195.088,127.535 205.877,135.371 201.755,148.054
+		212.546,140.218 223.331,148.054 219.208,135.371 229.999,127.535 216.663,127.535 	"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

public/images/flag/207-germany.svg

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<rect y="85.331" style="fill:#D80027;" width="512" height="341.337"/>
+<rect y="85.331" width="512" height="113.775"/>
+<rect y="312.882" style="fill:#FFDA44;" width="512" height="113.775"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

public/images/flag/218-south korea.svg

@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<rect y="85.331" style="fill:#FFFFFF;" width="512" height="341.337"/>
+<path style="fill:#D80027;" d="M318.33,255.994c0,15.583-27.906,54.539-62.33,54.539s-62.33-38.957-62.33-54.539
+	c0-34.424,27.906-62.33,62.33-62.33S318.33,221.57,318.33,255.994z"/>
+<path style="fill:#0052B4;" d="M318.33,255.994c0,34.424-27.906,62.33-62.33,62.33s-62.33-27.906-62.33-62.33"/>
+<rect x="324.205" y="300.55" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -119.6501 327.8224)" width="23.374" height="15.582"/>
+<rect x="296.657" y="328.085" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -147.1889 316.408)" width="23.374" height="15.582"/>
+<rect x="357.26" y="333.586" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -133.3277 360.8719)" width="23.374" height="15.582"/>
+<rect x="329.712" y="361.143" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -160.8823 349.464)" width="23.374" height="15.582"/>
+<rect x="340.732" y="317.068" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -126.4889 344.3472)" width="23.374" height="15.582"/>
+<rect x="313.185" y="344.614" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -154.0356 332.936)" width="23.374" height="15.582"/>
+<rect x="307.483" y="165.555" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 455.5344 535.3814)" width="62.33" height="15.582"/>
+<rect x="296.656" y="168.315" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 401.8486 518.6624)" width="23.374" height="15.581"/>
+<rect x="324.193" y="195.864" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 429.3763 585.1636)" width="23.374" height="15.581"/>
+<rect x="329.693" y="135.257" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 481.6206 485.591)" width="23.374" height="15.582"/>
+<rect x="357.252" y="162.807" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 509.1863 552.108)" width="23.374" height="15.582"/>
+<rect x="125.671" y="347.369" transform="matrix(0.7071 0.7071 -0.7071 0.7071 297.0721 -6.8758)" width="62.33" height="15.582"/>
+<rect x="175.435" y="344.62" transform="matrix(0.7071 0.7071 -0.7071 0.7071 303.9983 -29.0962)" width="23.374" height="15.581"/>
+<rect x="147.898" y="317.072" transform="matrix(0.7071 0.7071 -0.7071 0.7071 276.4547 -17.6934)" width="23.374" height="15.582"/>
+<rect x="158.724" y="314.322" transform="matrix(0.7071 0.7071 -0.7071 0.7071 283.386 -39.9269)" width="62.33" height="15.582"/>
+<rect x="125.672" y="149.023" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 378.6212 156.7987)" width="62.33" height="15.582"/>
+<rect x="142.182" y="165.56" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 418.4998 173.3536)" width="62.33" height="15.582"/>
+<rect x="158.712" y="182.089" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 458.4043 189.8812)" width="62.33" height="15.581"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/Login.vue

@@ -40,6 +40,7 @@
 <script>
 import { mapActions } from 'vuex'
 import { post, get } from '@/utils/http'
+import axios from 'axios'
 import { useRouter } from 'vue-router'
 import { storageKey } from '@/utils/constants'
 import { api } from '@/utils/api'
@@ -69,21 +70,21 @@ export default {
         return
       }
       this.loading = true
-      post(api.login, { username: this.username, pin: this.pin }).then(
+      axios.post(api.login, { username: this.username, pin: this.pin }).then(
         res => {
-          if (res.code === 200) {
-            if (!_.isEmpty(res.data.lang)) {
-              localStorage.setItem(storageKey.language, res.data.lang)
+          if (res.data.code === 200) {
+            if (!_.isEmpty(res.data.data.lang)) {
+              localStorage.setItem(storageKey.language, res.data.data.lang)
             }
-            if (!_.isEmpty(res.data.theme)) {
-              localStorage.setItem(storageKey.theme, res.data.theme)
+            if (!_.isEmpty(res.data.data.theme)) {
+              localStorage.setItem(storageKey.theme, res.data.data.theme)
             }
             res.loginSuccessPath = this.$route.query.redirect
             this.loginSuccess(res)
             localStorage.setItem(storageKey.username, this.username)
-            localStorage.setItem(storageKey.userId, res.data.userId)
-            localStorage.setItem(storageKey.token, res.data.token)
-          } else if (res.code === 518005) {
+            localStorage.setItem(storageKey.userId, res.data.data.userId)
+            localStorage.setItem(storageKey.token, res.data.data.token)
+          } else if (res.data.code === 518005) {
             this.$message.error(this.$t('Incorrect username or password'))
             this.loading = false
             this.blockOperation.query = false
@@ -97,7 +98,7 @@ export default {
         console.error(e)
         this.loading = false
         this.blockOperation.query = false
-        this.$message.error(this.$t('tip.unknownError'))
+        this.$message.error(this.errorMsgHandler(e))
       })
     },
     queryAppearance () {
@@ -119,7 +120,7 @@ export default {
       window.$dayJs.tz.setDefault(data.timezone)
       localStorage.setItem(storageKey.timezoneOffset, window.$dayJs.tz().utcOffset() / 60)
       localStorage.setItem(storageKey.timezoneLocalOffset, dayjs().utcOffset() / 60)
-      localStorage.setItem(storageKey.dateFormat, data.dateFormat)
+      localStorage.setItem(storageKey.dateFormat, data.date_format)
       localStorage.setItem(storageKey.sysName, data.system_name)
       localStorage.setItem(storageKey.sysLogo, data.system_logo)
     }
@@ -148,7 +149,7 @@ export default {
   align-items: center;
 }
 
->>>.el-input__inner {
+:deep .el-input__inner {
   background-color: #0B325C !important;
   border: none;
   border-radius: 0px;
@@ -156,10 +157,10 @@ export default {
   font-size: 14px;
   line-height: 14px;
 }
->>>.el-input__inner:hover {
+:deep .el-input__inner:hover {
   border-color: #295688;
 }
->>>.el-input__inner:focus {
+:deep .el-input__inner:focus {
   border-color: #295688;
 }
 .el-button--primary:hover, .el-button--primary:focus, .el-button--primary:active {
@@ -167,10 +168,10 @@ export default {
   border-color: #21B4ED;
   color: #FFFFFF;
 }
->>>.el-loading-mask {
+:deep .el-loading-mask {
   background-color: transparent;
 }
->>>input {
+:deep input {
   -webkit-text-fill-color: rgba(231,234,237, .8) !important;
   transition: background-color 500000000000000000s ease-in-out 0s !important;
   caret-color: #fff ;
@@ -205,14 +206,14 @@ export default {
   flex-direction: column;
   align-items: center;
 }
->>>.el-form-item {
+:deep .el-form-item {
   width: 334px;
   margin-bottom: 25px;
 }
->>>.el-input__prefix {
+:deep .el-input__prefix {
   color: #6DBBFF;
 }
->>>.el-input__prefix i {
+:deep .el-input__prefix i {
   width: 17px;
   font-size: 17px;
 }

src/Test.vue

@@ -1,27 +1,120 @@
 <template>
-  <span data-test="count">{{count}}</span>
-  <button data-test="button" @click="click">click</button>
+  <span test-id="count">{{count}}</span>
+  <span test-id="id">{{obj.id}}</span>
+  <span test-id="title">{{obj.title}}</span>
+  <button test-id="button" @click="click">click</button>
+  <span test-id="tab">{{lineTab}}</span>
+  <el-table
+      :data="tableData"
+      class="test-table"
+      height="100%"
+      empty-text=" "
+  >
+    <template v-for="(item, index) in tableTitles" :key="index">
+      <el-table-column>
+        <template #default="scope" :column="item">
+          <span :test-id="`${item.prop}${scope.$index}`">{{scope.row[item.prop]}}</span>
+        </template>
+      </el-table-column>
+    </template>
+  </el-table>
 </template>
 
 <script>
 /* vue-jest的测试示例 */
-import VueRouter from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
+import axios from 'axios'
+import { ref } from 'vue'
+import indexedDBUtils from '@/indexedDB'
 export default {
   name: 'Test',
   data () {
     return {
-      count: 0
+      count: 0,
+      obj: { id: 1, title: 'title' },
+      differentParamData0: null,
+      differentParamData1: null,
+      indexedDBValue: null,
+      tableData: [
+        {
+          name: 'a',
+          age: 10
+        },
+        {
+          name: 'b',
+          age: 11
+        }
+      ],
+      tableTitles: [
+        { label: 'Name', prop: 'name' },
+        { label: 'Age', prop: 'age' }
+      ],
+      mergeRequestData0: null,
+      mergeRequestData1: null,
+      mergeRequestChildData0: null,
+      mergeRequestChildData1: null
     }
   },
   methods: {
     click () {
       this.count++
+    },
+    async getObj () {
+      axios.get('/api/getObjId').then(response => {
+        this.obj.id = response.data
+      })
+      axios.get('/api/getObjTitle').then(response => {
+        this.obj.title = response.data
+      })
+    },
+    async getCount () {
+      axios.get('/api/getCount').then(response => {
+        this.count = response.data
+      })
+    },
+    async differentRequestParam () {
+      axios.get('/api/differentParam', { params: { name: 0 } }).then(response => {
+        this.differentParamData0 = response.data
+      })
+      axios.get('/api/differentParam', { params: { name: 1 } }).then(response => {
+        this.differentParamData1 = response.data
+      })
+    },
+    /**
+     * 同一url，不同入参的axios请求内包含多个不同url请求的demo
+     * @returns {Promise<void>}
+     */
+    async mergeRequest () {
+      axios.get('/api/differentParam', { params: { name: 0 } }).then(response => {
+        this.mergeRequestData0 = response.data
+      })
+      axios.get('/api/differentParam', { params: { name: 1 } }).then(response => {
+        this.mergeRequestData1 = response.data
+        axios.get('/api/getChildId').then(response1 => {
+          this.mergeRequestChildData0 = response1.data
+        })
+        axios.get('/api/getChildTitle').then(response2 => {
+          this.mergeRequestChildData1 = response2.data
+        })
+      })
+    },
+    async setIndexedDBValue () {
+      await indexedDBUtils.selectTable('test').put({ id: 1, name: 'test' })
+    },
+    async getIndexedDBValue () {
+      this.indexedDBValue = await indexedDBUtils.selectTable('test').get(1)
     }
   },
-  created () {
-    const { currentRoute } = VueRouter.useRouter()
+  setup () {
+    const { query } = useRoute()
+    const { currentRoute } = useRouter()
+    const localstorageValue = localStorage.getItem('key')
+    const lineTab = ref(query.lineTab || '')
+    const path = currentRoute.value.path
     return {
-      currentRoute
+      lineTab,
+      path,
+      localstorageValue
     }
   }
 }

src/assets/css/common.scss

@@ -60,3 +60,12 @@ body {
     display: none !important;
   }
 }
+
+// 表头单词换行不被拆开
+.el-table th > .cell  {
+  word-break: keep-all !important;
+}
+// 表格内容换行，不对中文生效，避免中文出现省略号
+.el-table .cell {
+  word-break: break-word !important;
+}

src/assets/css/common/table-common.scss

@@ -14,9 +14,8 @@
     z-index: 0;
   }
   .main-container {
-    padding: 10px;
+    padding: 0;
     height: 100%;
-    background-color: #f6f6f6;
     &>div {
       background-color: white;
     }
@@ -36,7 +35,7 @@
     align-items : center;
     position: relative;
     justify-content: space-between;
-    padding: 14px 20px;
+    padding: 12px 20px;
 
     &.top-tools--sub {
       align-items: center;
@@ -50,6 +49,12 @@
      .top-tool-btn {
        border-left: none;
      }
+     .top-tool-btn--search:hover {
+       border-left: none !important;
+     }
+     .top-tool-btn--search:focus {
+       border-left: none !important;
+     }
     }
 
     .top-tool-right {
@@ -74,17 +79,28 @@
     }
     .top-tool-btn {
       cursor: pointer;
-      height: 33px;
-      width: 36px;
+      height: 28px;
+      width: 72px;
       border: 1px solid $--border-color-primary;
       outline: none;
       border-radius: $--button-border-radius;
       background-color: $--button-gray-background-color;
       transition: background-color linear .1s;
-
+      font-size:12px;
+      font-weight: 500;
+      font-family: NotoSansHans-Medium !important;
       i {
         font-size: 14px;
-        color: $--button-gray-color;
+        color: #575757;
+        margin-right:4px;
+      }
+    }
+
+    .top-tool-btn:disabled {
+      cursor: not-allowed;
+      opacity: 0.66;
+      i {
+
       }
     }
 
@@ -94,13 +110,14 @@
       color: #666;
     }
     .top-tool-btn:hover:not(.cn-btn-disabled) {
+      border: 1px solid $--border-color-primary;
       background-color: $--button-gray-hover-background-color;
     }
     .top-tool-btn:focus:not(.cn-btn-disabled), .top-tool-btn.is-focus {
-      background-color: $--button-gray-hover-background-color;
-      border: 1px solid $--color-primary !important;
+      background-color: $--button-gray-active-background-color;
+      border: 1px solid $--border-color-primary;
       i {
-        color: $--button-gray-active-color;
+        color: #575757;
       }
     }
     .top-tool-btn--delete.top-tool-btn:focus:not(.cn-btn-disabled) {
@@ -111,6 +128,56 @@
         color: #F0745A;
       }
     }
+    .top-tool-btn--create {
+      background-color: #38ACD2 !important;
+      border-color: #2E88A6 !important;
+      color:#FFFFFF;
+      i {
+        color: #FFFFFF;
+      }
+    }
+    .top-tool-btn--create:hover {
+      background-color: #57B8D9 !important;
+      border-color: #2E88A6 !important;
+      color:#FFFFFF;
+      i {
+        color: #FFFFFF;
+      }
+    }
+    .top-tool-btn--create:focus {
+      background-color: #31A5CD !important;
+      border-color: #2E88A6 !important;
+      color:#FFFFFF !important;
+      i {
+        color: #FFFFFF !important;
+      }
+    }
+    .top-tool-btn--create:disabled {
+      opacity: 0.66;
+      background-color: #38ACD2 !important;
+      border-color: #2E88A6 !important;
+      color:#FFFFFF;
+      i {
+        color: #FFFFFF;
+      }
+    }
+
+    .btn-customize {
+      color:$blue;
+      font-size: 12px;
+      .icon-gear{
+        color:#2C72C6;
+        width:12px;
+        height:12px;
+        margin-right:2px;
+        font-size:12px;
+      }
+    }
+
+    .btn-customize:hover {
+      cursor:pointer;
+    }
+
     .top-tool-btn--dropdown {
       position: relative;
       width: auto;
@@ -130,6 +197,7 @@
       width: calc(100% - 40px);
       border: 1px solid $--right-box-border-color;
       border-bottom: none;
+      border-radius:4px;
 
       .caret-wrapper {
         height: 23px;
@@ -152,7 +220,8 @@
       th {
         border-color: $--right-box-border-color;
         padding: 8px 0;
-        background: #F9F9F9;
+        background: #FFF;
+        border-right:0px;
       }
       .el-table__header th:first-of-type {
         border-left: none;
@@ -244,7 +313,7 @@
       border-right: none !important;
     }
     /* 最后一列用box-shadow模拟边框 */
-    .el-table:not(.no-operation):not(.chart-table).el-table--border .el-table__body-wrapper td:nth-last-child(2) {
+    /*.el-table:not(.no-operation):not(.chart-table).el-table--border .el-table__body-wrapper td:nth-last-child(2) {
       box-shadow: 1px 0 $--right-box-border-color;
     }
     .el-table:not(.no-operation):not(.chart-table).el-table--border .el-table__header-wrapper th:nth-last-child(3) {
@@ -263,7 +332,7 @@
       th:last-of-type {
         border-right: none !important;
       }
-    }
+    }*/
     .el-table--border:not(.chart-table)::after, .el-table--group:not(.chart-table)::after {
       width: 0;
     }

src/assets/css/components/components/advancedSearch/advanced-search.scss

@@ -42,6 +42,10 @@
         color: #A6AAAE;
         font-size: 20px;
       }
+      .cn-icon-filter {
+        color: #A6AAAE;
+        font-size: 20px;
+      }
       .el-icon-search {
         color: #3976CB;
         font-size: 32px;
@@ -64,6 +68,10 @@
         color: #A6AAAE;
         font-size: 14px;
       }
+      .cn-icon-filter {
+        color: #A6AAAE;
+        font-size: 14px;
+      }
       .el-icon-search {
         color: white;
         font-size: 16px;

src/assets/css/components/components/advancedSearch/advanced-search2.scss

@@ -10,9 +10,10 @@
       right: 10px;
 
       .search__suffix {
-        margin-left: 8px;
+        margin-left: 8px; // 新版实体列表改版，后续记得解开
 
         .cn-icon-search-advance, .cn-icon-search-normal {
+        //.cn-icon-search-advance, .cn-icon-search-normal, .cn-icon-filter {
           color: #A6AAAE;
           font-size: 18px;
         }

src/assets/css/components/components/common/TimeRange/date-time-range.scss

@@ -1,7 +1,7 @@
 .date-range-box {
   font-size: 14px;
   border-radius: 2px;
-  margin-right: 10px;
+  //margin-right: 10px;
   display: flex;
   cursor: pointer;
 
@@ -204,3 +204,11 @@
     visibility: hidden !important;
   }
 }
+
+.my-date-picker {
+  .el-popper__arrow {
+    position: absolute;
+    top: 20px !important;
+    left: 642px !important; // element上样式设定是left，添加right不生效
+  }
+}

src/assets/css/components/components/table/common.scss

@@ -1,5 +1,5 @@
 .pop-custom {
-  padding: 0 12px 12px 12px;
+  padding: 12px;
   border: 1px solid #EBEEF5;
   position: absolute;
   top: 55px;
@@ -11,7 +11,9 @@
   z-index: 999999;
   box-shadow: 0 0 10px #CCC;
   box-sizing: border-box;
-
+  .pop-title {
+    margin: 10px 0;
+  }
   .el-button--mini{
     padding: 5px 7px;
   }
@@ -23,7 +25,6 @@
   top: 33px;
 }
 .custom-labels {
-  margin-top: 12px;
   width: 100%;
   height: 300px;
 }
@@ -41,8 +42,7 @@
   font-size: 14px;
 }
 .custom-label:hover{
-  color: #cccccc;
-  background-color: #DCDFE6;
+  background-color: rgba(220, 223, 230, .5)
 }
 .custom-title{
   padding: 2px 0 2px 2px;
@@ -57,6 +57,14 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+  .custom-bottom-btns-right {
+    .el-button:nth-of-type(1) {
+      margin-right: 3px;
+    }
+    .el-button .top-tool-btn-save {
+      color: #fff;
+    }
+  }
 }
 .unshow {
   display: none;
@@ -70,12 +78,79 @@
   border-radius: 2px;
   background-color: #F9F9F9;
   transition: background-color linear .1s;
+  padding-left:10px;
+}
+
+
+.list-page .top-tools .top-tool-btn--search{
+  width:28px !important;
+  height:28px !important;
+  padding:unset !important;
+  i {
+    font-size: 14px;
+    color: #575757;
+    margin-right:unset !important;
+  }
 }
 
 .list-page {
+  .el-input--small{
+    width: 214px !important;
+    line-height: 27px;
+  }
   .el-input--small .el-input__inner {
-    height: 33px;
-    line-height: 32px;
-    border-radius: 0px;
+    height: 28px;
+    border-radius: 2px 0px 0px 2px;
+  }
+}
+
+.list {
+  list-style: none;
+  padding-inline-start: 0 !important;
+  max-height: 358px !important;
+  overflow: auto;
+  margin: 0 0;
+
+  .drag-move {
+    transition: transform 0.3s;
+  }
+
+  .list-item:last-child {
+    margin-bottom: 6px;
+  }
+
+  .list-item {
+    width: 100%;
+    color: #575757;
+    margin-bottom: 0;
+    height: 24px;
+    line-height: 24px;
+    text-align: left;
+    font-weight: 400;
+    font-size: 12px;
+
+    .icon-drag {
+      cursor: move;
+      margin-left: 6px;
+      margin-right: 3px;
+    }
+
+    .el-checkbox__input.is-checked .el-checkbox__inner {
+      background-color: #38ACD2;
+      border-color: #38ACD2;
+      border-radius: 2px;
+    }
+
+    .el-checkbox__input .el-checkbox__inner {
+      background-color: #F2F7F9;
+      border: 1px solid rgba(0, 0, 0, 0.15);
+      border-radius: 2px;
+    }
+
+    .el-checkbox__input.is-checked + .el-checkbox__label, .el-checkbox__input + .el-checkbox__label {
+      font-size: 12px;
+      color: #575757;
+      font-weight: 400;
+    }
   }
 }

src/assets/css/components/index.scss

@@ -6,9 +6,9 @@
 @import './components/common/pagination';
 // @import './components/entities/entities';
 @import './components/layout/layout';
-@import 'components/rightBox/settings/chart-box';
+@import 'components/rightBox/administration/chart-box';
 @import 'components/setting/galaxy-proxy-debug';
-@import 'components/table/settings/galaxy-proxy-table';
+@import 'components/table/administration/galaxy-proxy-table';
 @import './components/table/common';
 @import './views/charts/chart';
 @import 'views/entityExplorer/entity-explorer';
@@ -42,8 +42,8 @@
 @import './views/chartHeader';
 @import './views/charts/chartMap';
 @import 'views/charts/chartRelationShipList';
-@import './views/report/builtinReport';
-@import './components/rightBox/report/builtinReportBox';
+@import 'views/report/report';
+@import 'components/rightBox/report/reportBox';
 
 @import './views/charts2/panel';
 @import './views/charts2/networkOverviewLine';
@@ -65,6 +65,8 @@
 @import './views/charts2/linkBlock';
 @import './views/charts2/linkTrafficSankey';
 @import './views/charts2/linkDirectionGrid';
+@import './views/charts2/domainNameResolution.scss';
+@import './views/charts2/informationAggregation.scss';
 @import 'views/charts2/linkTrafficLine';
 @import 'views/charts2/dnsTrafficLine';
 @import 'views/charts2/dnsRecentEvents';
@@ -76,4 +78,10 @@
 @import './components/common/chart-tab';
 
 @import 'views/administration/AdministrationTabs';
+@import 'views/administration/Appearance.scss';
 
+@import 'views/setting/knowledgeBase';
+@import 'views/charts2/entityDetailLine';
+@import 'views/charts2/entityDetailTabs';
+@import 'views/charts2/digitalCertificate';
+@import 'views/charts2/entityDetailBasicInfo';

src/assets/css/components/views/administration/Appearance.scss

@@ -0,0 +1,62 @@
+.appearance{
+  height: 100%;
+  display:flex;
+  flex-direction:column;
+  .appearance-form {
+    padding-top:40px;
+    padding-left:100px;
+    background-color: white;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    .el-input {
+      width:600px;
+    }
+    .el-form .el-form-item .el-form-item__label {
+      padding-bottom: 6px;
+      font-size: 14px;
+      line-height: 16px;
+    }
+  }
+  .edit-appearance-base__footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    height: 100px;
+    margin-top: 3px;
+    padding-left:200px;
+
+    .footer__btn {
+      margin: 0 10px;
+      height: 30px;
+      min-width: 74px;
+      padding: 0 15px;
+      color: white;
+      background-color: #38ACD2;
+      border: none;
+      border-radius: 4px;
+      outline: none;
+      font-size: 14px;
+      cursor: pointer;
+      transition: background-color linear .2s, color linear .1s;
+    }
+    .footer__btn:hover:not(.footer__btn--disabled) {
+      background-color: lighten(#38ACD2, 10%);
+    }
+    .footer__btn--light {
+      background-color: #F5F6F7;
+      border: 1px solid $--border-color-primary;
+      color: #333;
+    }
+    .footer__btn.footer__btn--light:hover:not(.footer__btn--disabled) {
+      background-color: white;
+      border-color: lighten(#38ACD2, 40%);
+      color: #38ACD2;
+    }
+    .footer__btn--disabled {
+      opacity: .6;
+      cursor: default;
+    }
+  }
+}

src/assets/css/components/views/charts2/digitalCertificate.scss

@@ -0,0 +1,70 @@
+.digital-certificate {
+  $font-family: NotoSansSChineseRegular;
+
+  .digital-certificate-header {
+    display: flex;
+    align-items: center;
+
+    .digital-certificate-header__icon {
+      width: 4px;
+      height: 16px;
+      background: #38ACD2;
+      border-radius: 1px;
+      margin-right: 6px;
+    }
+
+    .digital-certificate-header-name {
+      font-family: PingFangSC-Semibold;
+      font-size: 14px;
+      color: #575757;
+      font-weight: 600;
+    }
+  }
+
+  .digital-certificate-body {
+    height: auto;
+    min-height: 262px;
+    padding: 20px;
+    background: rgba(113, 113, 113, 0.04);
+    border: 1px solid #E2E5ECFF;
+    border-radius: 4px;
+
+    .digital-certificate-body-tags {
+      display: flex;
+      margin-bottom: 20px;
+    }
+
+    .certificate-list-list {
+      display: flex;
+      flex-wrap: wrap;
+    }
+
+    .certificate-list-item {
+      width: 50%;
+      display: flex;
+      margin-bottom: 10px;
+
+      .certificate-list-item__label {
+        width: 176px;
+        font-family: $font-family;
+        font-size: 14px;
+        color: #717171;
+        font-weight: 400;
+      }
+
+      .certificate-list-item__value, .certificate-list-item__value1 {
+        width: calc(100% - 176px - 75px);
+        font-family: $font-family;
+        font-size: 14px;
+        color: #353636;
+        font-weight: 400;
+      }
+
+      .certificate-list-item__value1 {
+        padding-bottom: 2px;
+        border-bottom: 1px #353636 solid;
+        word-break: break-word;
+      }
+    }
+  }
+}

src/assets/css/components/views/charts2/domainNameResolution.scss

@@ -0,0 +1,71 @@
+.type-data__column {
+  display:flex;
+  flex-direction: column;
+  margin-left:5px;
+  margin-right:0px;
+  margin-top:0px;
+  .type-data {
+    display:flex;
+    flex-flow:row wrap;
+    margin-top:0px;
+    .type-title {
+      display:flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      margin-bottom:15px;
+      margin-right:10px;
+      font-family: PingFangSC-Semibold;
+      font-size: 14px;
+      color: #575757;
+      line-height: 20px;
+      font-weight: 600;
+      .title-mark {
+        width: 4px;
+        height: 16px;
+        margin-left:0px;
+        margin-right: 6px;
+        background: #38ACD2;
+        border-radius: 1px;
+      }
+      .type-title-word {
+        margin-right: 6px;
+      }
+    }
+
+    .type-content {
+      margin-bottom:15px;
+      display:flex;
+      flex-flow: row wrap;
+      width:100%;
+      .data-item {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background: rgba(119,131,145,0.06);
+        border: 1px solid rgba(119,131,145,0.36);
+        border-radius: 2px;
+        height:28px;
+        padding:8px 15px;
+        margin-right:10px;
+        margin-bottom:15px;
+        font-size: 12px;
+        color: #353636;
+        font-weight: 400;
+      }
+    }
+
+    .type-error-content {
+      width:100%;
+      height: 40px;
+      margin-bottom: 12px;
+      position: relative;
+
+      .type-error-content__block {
+        position: absolute;
+        left: -12px;
+        top: -12px;
+      }
+    }
+  }
+}

src/assets/css/components/views/charts2/entityDetailBasicInfo.scss

@@ -0,0 +1,185 @@
+.el-popper.analysis-popper {
+  top: -5px !important;
+  padding: 0;
+  border: 1px solid #C5C5C5;
+  border-radius: 4px;
+  box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85);
+
+  .el-popper__arrow {
+    display: none;
+  }
+  .analysis-entry {
+    display: flex;
+    flex-direction: column;
+
+    .analysis-entry__header {
+      height: 42px;
+      line-height: 42px;
+      background-color: #F7F7F7;
+      padding-left: 20px;
+      color: #353636;
+      border-radius: 4px 4px 0 0;
+    }
+    .analysis-entry__body {
+      display: flex;
+      height: 134px;
+      align-items: center;
+      justify-content: space-around;
+
+      .analysis-entry-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        cursor: pointer;
+
+        &:hover {
+          div i, span {
+            color: #046ECA;
+          }
+        }
+        div {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-bottom: 9px;
+          height: 46px;
+          width: 46px;
+          border-radius: 50%;
+          background-color: #F5F6F8;
+
+          i {
+            color: #353636;
+            font-size: 22px;
+          }
+        }
+        span {
+          font-size: 12px;
+          color: #353636;
+        }
+      }
+    }
+  }
+}
+.entity-detail-basic-info {
+  position: relative;
+  padding: 35px 30px 0 30px;
+  height: 100%;
+  border: 1px solid #E2E5EC;
+  border-radius: 4px;
+
+  .dividing-line {
+    height: 1px;
+    width: calc(100% - 60px);
+    margin-top: 21px;
+    background-color: #EFF2F5;
+  }
+  .entity-type {
+    color: #717171;
+  }
+  .entity-basic-info {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .entity-basic-info__name {
+      display: flex;
+      align-items: center;
+
+      span {
+        padding-right: 12px;
+        font-family: Helvetica-Bold;
+        font-size: 32px;
+        color: #353636;
+        font-weight: bold;
+      }
+      div {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 28px;
+        width: 28px;
+        border-radius: 50%;
+        background-color: #EFF1F4;
+        cursor: pointer;
+
+        i {
+          color: #717171;
+          font-size: 12px;
+        }
+      }
+    }
+    .analysis-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 24px;
+      padding: 0 10px;
+      font-size: 12px;
+      color: #046ECA;
+      cursor: pointer;
+      background-color: #FFF;
+      transition: background-color linear .2s;
+
+      &.analysis-btn--active {
+        background-color: #EBF7FA;
+        border-radius: 2px;
+      }
+      i {
+        padding-right: 4px;
+        font-size: 14px;
+      }
+    }
+  }
+  .entity-tags {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    margin-top: 16px;
+    margin-bottom: -10px;
+
+    .entity-tag {
+      margin-bottom: 10px;
+      margin-right: 10px;
+
+      &:last-of-type {
+        margin-right: 0;
+      }
+    }
+  }
+  .entity-detail-info {
+    display: flex;
+    flex-flow: row wrap;
+    align-content: space-around;
+    padding: 10px 0;
+
+    .detail-card {
+      display: flex;
+      padding: 0 12px;
+      width: 298px;
+      height: 83px;
+      align-items: center;
+
+      i {
+        font-size: 22px;
+        color: #353636;
+        margin-right: 14px;
+      }
+      .detail-card__text {
+        .detail-card__label {
+          margin-bottom: 6px;
+          font-size: 12px;
+          color: #717171;
+        }
+        .detail-card__value {
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 3;
+          overflow: hidden;
+          color: #222;
+          line-height: 18px;
+          font-size: 14px;
+        }
+      }
+    }
+  }
+}

src/assets/css/components/views/charts2/entityDetailLine.scss

@@ -0,0 +1,68 @@
+.entity-detail-line {
+  height: 100%;
+  border-radius: 4px;
+
+  .line-header-right {
+    .panel__tools {
+      display: flex;
+      align-items: center;
+
+      & > .el-select {
+        width: 162px;
+        margin-right: 10px;
+
+        .select-prefix {
+          font-size: 14px;
+          color: #999;
+          padding: 0 6px 0 3px;
+        }
+
+        .el-input__inner {
+          font-size: 14px;
+          color: #353636;
+        }
+
+        .common-select {
+          top: 32px !important;
+        }
+      }
+
+      .panel__time {
+        display: flex;
+      }
+    }
+    .line-select-metric {
+      margin-right: 20px;
+
+      .el-input__inner {
+        width: 127px;
+        height: 24px;
+        line-height: 24px;
+        padding-left: 4px;
+        font-size: 12px;
+        color: #2C72C6;
+        font-weight: 400;
+        border-radius: 2px;
+      }
+    }
+
+    .line-select-reference-line {
+      margin-left: 0 !important;
+      line-height: 1;
+    }
+
+    .line-margin-right {
+      margin-right: 10px;
+    }
+
+    .line-date-right {
+      margin-right: 20px;
+    }
+
+    .entity-detail-date-time-range {
+      height: 24px;
+      line-height: 24px;
+      border: 1px solid #DCDFE6;
+    }
+  }
+}

src/assets/css/components/views/charts2/entityDetailTabs.scss

@@ -0,0 +1,102 @@
+.entity-detail-tabs {
+  position: relative;
+  $tab-border-color: #E2E5EC;
+  $tab-border-radius: 4px;
+  height: 100%;
+
+  .entity-detail-tabs__active-bar {
+    position: absolute;
+    height: 3px;
+    top: 1px;
+    background-color: #046EC9;
+    border-radius: 4px 4px 0 0;
+    transition: all linear .2s;
+    z-index: 3;
+  }
+
+  .cn-chart__tabs--border-card {
+    height: 100%;
+    border: none;
+    box-shadow: none;
+
+    & > .el-tabs__header {
+      background-color: #fff;
+      border-bottom: 1px solid $tab-border-color;
+
+      .el-tabs__item {
+        color: #353636;
+        user-select: none; // 避免鼠标框选文字
+
+        i {
+          margin-right: 8px;
+        }
+
+      }
+
+      .el-tabs__item:not(.is-disabled):not(.is-active):hover {
+        color: #353636;
+      }
+
+      .el-tabs__item.is-active {
+        color: #046ECA;
+        background-color: #FFFFFF;
+        border-right-color: $tab-border-color;
+        border-left-color: $tab-border-color;
+        border-radius: 4px 4px 0 0;
+        box-shadow: 0 1px $tab-border-color inset;
+
+        &:hover {
+          color: #046ECA;
+        }
+      }
+
+      .el-tabs__item:first-of-type.is-active {
+        box-shadow: 1px 1px $tab-border-color inset;
+      }
+    }
+
+    .el-tabs__content {
+      height: calc(100% - 39px);
+      border: 1px solid $tab-border-color;
+      border-top: none;
+      padding: 30px 20px 20px 20px; // 根据原型调整上边距为30px，但20px更协调
+    }
+
+    .tab-pane--border-card {
+      position: relative;
+      height: 100%;
+      overflow: auto;
+    }
+    .tab-pane-warn--icon {
+      width: 16px;
+      color: #E48F3E;
+      margin-left: 10px;
+      margin-right: 0 !important;
+    }
+  }
+
+  .entity-detail-event-border {
+    border: 1px solid #E2E5EC;
+    border-radius: $tab-border-radius;
+    margin-bottom: 10px;
+  }
+
+  .entity-detail-event-block {
+    width: calc(100% - 2px);
+  }
+
+  .entity-detail-event-error {
+    margin-top: 18px;
+    margin-left: 8px;
+  }
+
+  .entity-detail-performance {
+    height: 46px;
+    border-radius: $tab-border-radius;
+  }
+
+  .entity-detail-security {
+    height: 70px;
+    border-radius: $tab-border-radius;
+  }
+}

src/assets/css/components/views/charts2/informationAggregation.scss

@@ -0,0 +1,76 @@
+.information-aggregation__table {
+  .intelligence-content {
+    padding-top:10px !important;
+    padding-bottom:4px !important;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    .information-aggregation-tags {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: flex-start;
+      margin-bottom:6px;
+    }
+  }
+  .information-aggregation__valid {
+    background: #eff3e9;
+    border-radius: 10px;
+    font-size: 12px;
+    color: #7E9F54;
+    font-weight: 500;
+    width:fit-content;
+    padding-left:10px;
+    padding-right:10px;
+    height: 20px;
+    line-height: 20px;
+  }
+  .information-aggregation__invalid {
+    background: #ededed;
+    border-radius: 10px;
+    font-size: 12px;
+    color: #717171;
+    font-weight: 500;
+    width:fit-content;
+    padding-left:10px;
+    padding-right:10px;
+    height: 20px;
+    line-height: 20px;
+  }
+
+  .el-table {
+    font-size: 12px;
+    color: #353636;
+    font-weight: 400;
+  }
+  .el-table thead {
+    font-size: 12px;
+    line-height: 12px;
+    color: #353636;
+    font-weight: 500;
+    height:32px;
+  }
+
+  .el-table th {
+    padding: 4px 0;
+  }
+
+  .el-table--border th, .el-table--border td {
+    border-right: 0px !important;
+  }
+
+  .el-table--border {
+    //border: 1px solid #E2E5EC;
+    border-radius: 4px;
+  }
+}
+.margin-r-6{
+  margin-right: 6px;
+}
+.margin-b-6{
+  margin-bottom: 6px;
+}
+.padding-0{
+  padding:0px !important;
+}

src/assets/css/components/views/charts2/linkDirectionGrid.scss

@@ -17,8 +17,7 @@
       position: absolute;
       width: calc(100% - 20px);
       height: calc(100% - 60px);
-      margin-left: -12px;
-      margin-top: 10px;
+      margin-top: 50px;
     }
     .data-grid {
       height: 100px;

src/assets/css/components/views/charts2/networkOverviewApps.scss

@@ -256,7 +256,15 @@
           position: relative;
         }
         .el-tabs__item.is-top {
-          height: 32px;
+          height: 50px;
+          line-height: 60px;
+
+          &.is-active {
+            color: #046eca;
+          }
+        }
+        .el-tabs__active-bar {
+          background-color: #306DC2;
         }
         .el-tabs__item.is-top:nth-child(2) {
           padding: 0;
@@ -264,7 +272,7 @@
         .body__searcher {
           position: absolute;
           right: 28px;
-          top: 9px;
+          top: 11px;
           width: 280px;
           .el-input.el-input--mini {
             .el-input__inner {
@@ -282,9 +290,9 @@
             }
           }
         }
-        .el-tabs__nav-wrap::after {
+        /*.el-tabs__nav-wrap::after {
           height: 0;
-        }
+        }*/
         .el-tabs__header {
           padding-left: 20px;
         }

src/assets/css/components/views/charts2/networkOverviewLine.scss

@@ -30,6 +30,7 @@
   .line-header {
     display: flex;
     justify-content: space-between;
+    height: 73px;
     .line-select.line-header-right {
       display: flex;
       //flex: 1;
@@ -98,11 +99,11 @@
         //top: 0;
         //left: 0;
         display: flex;
-        .line-value-mpackets.mousemove-cursor {
+        .line-value-tabs.mousemove-cursor {
           border-top: 4px solid #D3D0D8;
           z-index: 0;
         }
-        .line-value-mpackets {
+        .line-value-tabs {
           cursor: pointer;
           padding: 16px 0 0 20px;
           border-top: 4px solid transparent;
@@ -122,10 +123,10 @@
               }
             }
           }
-          .line-value-mpackets-name {
+          .line-value-tabs-name {
             position: relative;
             display: flex;
-            .mpackets-name {
+            .tabs-name {
               flex: 1;
               padding-left: 19px;
             }

src/assets/css/components/views/charts2/networkOverviewTabs.scss

@@ -123,7 +123,7 @@
         align-items: center;
       }
       .el-table__header tr th:nth-of-type(1) .cell {
-        justify-content: start;
+        justify-content: flex-start;
       }
       .score-cell {
         display: flex !important;

src/assets/css/components/views/charts2/npmAppEventTable.scss

@@ -114,6 +114,6 @@
     position: absolute;
     width: 100%;
     left: 0;
-    top: 68px;
+    top: 32px;
   }
 }

src/assets/css/components/views/charts2/panel.scss

@@ -1,3 +1,14 @@
+.panel-box2.panel-box2--entity-detail {
+  height: 100%;
+
+  .chart-list {
+    height: 100%;
+
+    &>.vue-grid-layout {
+      margin-top: 0;
+    }
+  }
+}
 .panel-box2 {
   height: calc(100% - 20px);
   .panel__header {

src/assets/css/components/views/detections/detection-list/row.scss

@@ -107,6 +107,9 @@
           letter-spacing: 0;
           line-height: 14px;
           margin-left: 5px;
+          font-style: italic;
+          padding: 0 2px;
+          font-weight: 500;
         }
         .detection-event-severity-color-block {
           width: 5px;
@@ -143,12 +146,12 @@
             flex-wrap: wrap;
 
             .basic-info__item {
-              padding-right: 40px;
+              padding-right: 30px;
               display: flex;
               align-items: center;
 
               i {
-                padding-right: 6px;
+                padding-right: 5px;
                 color: #8FA1BE;
                 font-size: 14px;
               }

src/assets/css/components/views/detections/detection-overview.scss

@@ -220,6 +220,5 @@
   justify-content: center;
   align-items: center;
   padding: 0 4px;
-  //todo 此处文字显示白色，暂时取消
   //color: white;
 }

src/assets/css/components/views/detections/detections.scss

@@ -20,7 +20,7 @@
       display: flex;
       justify-content:space-between;
       align-items:center;
-      padding: 10px 20px 10px 0px;
+      padding: 10px 20px 10px 0;
       flex: 0 0 40px;
 
       font-size: 14px;
@@ -37,7 +37,7 @@
     }
 
     .chart-content {
-      height:calc(100% - 40px);
+      height: 147px;
     }
     .statistics__severity {
       width: 33%;

src/assets/css/components/views/entityExplorer/entity-detail.scss

@@ -1,3 +1,67 @@
+.entity-detail {
+  .entity-tag {
+    display: flex;
+    height: 28px;
+    padding: 0 12px;
+    justify-content: center;
+    line-height: 28px;
+    font-size: 14px;
+    border: 1px solid;
+    border-radius: 2px;
+
+    &.entity-tag--small {
+      height: 20px;
+      line-height: 20px;
+      padding: 0 6px;
+      font-size: 12px;
+    }
+    $normal-color: #778391;
+    $normal-light-color: #F7F8F9;
+    $negative-color: #E26154;
+    $negative-light-color: #FEF6F5;
+    $positive-color: #749F4D;
+    $positive-light-color: #F7FAF5;
+    &.entity-tag--level-one-normal {
+      border-color: $normal-color;
+      color: white;
+      background-color: $normal-color;
+    }
+    &.entity-tag--level-one-negative {
+      border-color: $negative-color;
+      color: white;
+      background-color: $negative-color;
+    }
+    &.entity-tag--level-one-positive {
+      border-color: $positive-color;
+      color: white;
+      background-color: $positive-color;
+    }
+    &.entity-tag--level-two-normal {
+      border-color: $normal-color;
+      color: $normal-color;
+      background-color: $normal-light-color;
+    }
+    &.entity-tag--level-two-negative {
+      border-color: $negative-color;
+      color: $negative-color;
+      background-color: $negative-light-color;
+    }
+    &.entity-tag--level-two-positive {
+      border-color: $positive-color;
+      color: $positive-color;
+      background-color: $positive-light-color;
+    }
+    &.entity-tag--level-two-negative-no-background {
+      border-color: $negative-color;
+      color: $negative-color;
+    }
+    &.entity-tag--level-two-positive-no-background {
+      border-color: $positive-color;
+      color: $positive-color;
+    }
+  }
+}
+/*
 .entity-detail.cn-home {
   .panel-chart {
     width: 100%;
@@ -105,3 +169,4 @@
     }
   }
 }
+*/

src/assets/css/components/views/entityExplorer/entity-explorer.scss

@@ -37,7 +37,7 @@
     }
     .el-button--mini{
       padding: 4px 6px !important;
-      min-height: 26px !important;
+      min-height: 28px !important;
       &.active i {
         color: $--color-primary;
       }
@@ -50,6 +50,10 @@
     display: flex;
     justify-content: space-between;
   }
+  .explorer-top-tools-new {
+    display: flex;
+    justify-content: space-between;
+  }
   .explorer-top-tools-title {
     font-size: 24px;
     line-height: 24px;
@@ -64,7 +68,7 @@
     color: #353636;
     font-weight: 500;
     padding: 0 10px;
-    margin-right: 10px;
+    margin-right: 20px;
     border: 1px solid #E2E5EC;
     border-radius: 2px;
     cursor: pointer;
@@ -77,6 +81,13 @@
     border: 1px solid #E2E5EC;
     border-radius: 4px;
   }
+  .explorer-result {
+    margin-top: 10px;
+    margin-bottom: 18px;
+    font-size: 14px;
+    color: #353636;
+    font-weight: 400;
+  }
   .explorer-container {
     display: flex;
     overflow: visible; /*overflow: hidden;*/

src/assets/css/components/views/entityExplorer/entityList/card.scss

@@ -5,6 +5,7 @@
   background: #FFFFFF;
   border-radius: 2px;
   transition: all .2s;
+  //border: 1px solid #E2E5EC; 新版实体列表改版，后续记得解开
 
   &:hover .cn-entity__header .header__content {
 

src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss

@@ -87,7 +87,7 @@
           padding-right: 20px;
 
           &.row__label--width130 {
-            flex-basis: 130px;
+            flex-basis: 140px;
             padding-right: unset;
           }
           &.row__label--width160 {

src/assets/css/components/views/entityExplorer/entityList/row.scss

@@ -1,5 +1,9 @@
 .cn-entity--list {
   display: flex;
+  //border: 1px #E2E5EC solid;
+  //margin-bottom: 10px;
+  //border-radius: 4px;
+  // 新版实体列表改版，后续记得解开
 
   .cn-entity__collapse {
     margin-bottom: 1px;
@@ -9,7 +13,8 @@
     justify-content: center;
     align-items: flex-start;
     background-color: #F3F7FA;
-
+    //border-radius: 4px 0 0 4px;
+    // 新版实体列表改版，后续记得解开
     span {
       transform: rotate(0);
       transition: all linear .2s;
@@ -36,10 +41,12 @@
     overflow: hidden;
     display: flex;
     flex-wrap: wrap;
+    //align-content: center;
     padding: 16px 0;
     margin-bottom: 1px;
     background-color: white;
-
+    //border-radius: 0 4px 4px 0;
+    // 新版实体列表改版，后续记得解开
     .cn-entity__icon {
       margin-left: 26px;
       margin-right: 10px;
@@ -70,6 +77,13 @@
         font-size: 16px;
         padding-bottom: 3px;
         color: #333333;
+        //.cn-entity__header-title {
+        //  margin-right: 10px;
+        //}
+        //.cn-entity__header-tag {
+        //
+        //}
+        // 新版实体列表改版，后续记得解开
       }
 
       .cn-entity__body {
@@ -87,7 +101,7 @@
             flex-wrap: wrap;
 
             .basic-info__item {
-              padding-right: 40px;
+              padding-right: 30px;
 
               .item__box {
                 display: flex;
@@ -105,7 +119,7 @@
                 }
 
                 i {
-                  padding-right: 6px;
+                  padding-right: 5px;
                   color: #8FA1BE;
                   font-size: 12px;
                   height: 13px;
@@ -147,8 +161,6 @@
               span:last-of-type {
                 color: #666;
               }
-
-
             }
           }
 
@@ -157,10 +169,19 @@
             padding: 0 30px;
             font-size: 12px;
             color: #3976CB;
+            //color: #2C72C6;
+            //font-weight: 400;
+            //margin-top: -17px;
+            // 新版实体列表改版，后续记得解开
 
             &:hover {
               cursor: pointer;
             }
+
+            //i {
+            //  font-size: 12px;
+            //  margin-right: 5px;
+            //}
           }
         }
       }

src/assets/css/components/views/report/report.scss

@@ -1,21 +1,22 @@
-.cn-builtin {
+.cn-report {
   background: #fff;
   margin: 10px;
   height: calc(100% - 20px) !important;
   display: flex;
   flex-direction: row;
-  .cn-builtin-left {
+  .cn-report-left {
     width: 288px;
     height: 100%;
     border-right: 1px solid  #E7EAED;
     position: relative;
-    .cn-builtin-left-title {
+    overflow: auto;
+    .cn-report-left-title {
       padding: 28px 0 26px 13px;
       font-size: 16px;
       color: #333333;
       letter-spacing: 0;
     }
-    .cn-builtin-left-menu {
+    .cn-report-left-menu {
       width: 250px;
       word-break: normal;
       margin: auto;
@@ -25,13 +26,13 @@
       padding: 14px;
       cursor: pointer;
     }
-    .cn-builtin-left-menu.cn-active {
+    .cn-report-left-menu.cn-active {
       background: #F4FAFF;
       border-radius: 2px;
       color: #0091FF;
     }
   }
-  .cn-builtin-right {
+  .cn-report-right {
     flex: 1;
     .list-page .main-container {
       padding: 0;
@@ -73,7 +74,7 @@
             height: 100%;
             width: calc(100% - 32px);
             background: #fff; //盖住fixed产生的阴影
-            ::v-deep .is-leaf {
+            :deep .is-leaf {
               color: #1b2e3b;
               background: #ebeef5;
             }

src/assets/css/font/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "cn-icon"; /* Project id 2614877 */
-  src: url('iconfont.woff2?t=1670817031037') format('woff2'),
-       url('iconfont.woff?t=1670817031037') format('woff'),
-       url('iconfont.ttf?t=1670817031037') format('truetype');
+  src: url('iconfont.woff2?t=1687167070241') format('woff2'),
+       url('iconfont.woff?t=1687167070241') format('woff'),
+       url('iconfont.ttf?t=1687167070241') format('truetype');
 }
 
 .cn-icon {
@@ -13,6 +13,174 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.cn-icon-expand-relationship:before {
+  content: "\e7f8";
+}
+
+.cn-icon-resolve-ip:before {
+  content: "\e7f9";
+}
+
+.cn-icon-subdomain:before {
+  content: "\e7fa";
+}
+
+.cn-icon-graph:before {
+  content: "\e7f5";
+}
+
+.cn-icon-detail:before {
+  content: "\e7f6";
+}
+
+.cn-icon-tag:before {
+  content: "\e7f7";
+}
+
+.cn-icon-upload2:before {
+  content: "\e7f4";
+}
+
+.cn-icon-warn:before {
+  content: "\e7f3";
+}
+
+.cn-icon-providers:before {
+  content: "\e7f2";
+}
+
+.cn-icon-configure-policies:before {
+  content: "\e7f1";
+}
+
+.cn-icon-dns-insight:before {
+  content: "\e7ef";
+}
+
+.cn-icon-network-performance:before {
+  content: "\e7f0";
+}
+
+.cn-icon-copy:before {
+  content: "\e7ee";
+}
+
+.cn-icon-analysis:before {
+  content: "\e7ed";
+}
+
+.cn-icon-duration:before {
+  content: "\e7ec";
+}
+
+.cn-icon-select:before {
+  content: "\e7eb";
+}
+
+.cn-icon-expire-date:before {
+  content: "\e7d4";
+}
+
+.cn-icon-registry-email:before {
+  content: "\e7d5";
+}
+
+.cn-icon-geo-location:before {
+  content: "\e7d6";
+}
+
+.cn-icon-credit-rating:before {
+  content: "\e7d7";
+}
+
+.cn-icon-registration-date:before {
+  content: "\e7d8";
+}
+
+.cn-icon-app-full-name:before {
+  content: "\e7d9";
+}
+
+.cn-icon-description:before {
+  content: "\e7da";
+}
+
+.cn-icon-technology:before {
+  content: "\e7db";
+}
+
+.cn-icon-registrar:before {
+  content: "\e7dc";
+}
+
+.cn-icon-registry:before {
+  content: "\e7dd";
+}
+
+.cn-icon-operator:before {
+  content: "\e7de";
+}
+
+.cn-icon-sub-type:before {
+  content: "\e7df";
+}
+
+.cn-icon-app-name:before {
+  content: "\e7e0";
+}
+
+.cn-icon-registration-country:before {
+  content: "\e7e1";
+}
+
+.cn-icon-as:before {
+  content: "\e7e2";
+}
+
+.cn-icon-as-subnet:before {
+  content: "\e7e3";
+}
+
+.cn-icon-category2:before {
+  content: "\e7e4";
+}
+
+.cn-icon-domain-name-resolution:before {
+  content: "\e7e5";
+}
+
+.cn-icon-open-port:before {
+  content: "\e7e6";
+}
+
+.cn-icon-security-event:before {
+  content: "\e7e7";
+}
+
+.cn-icon-dns-ptr:before {
+  content: "\e7e8";
+}
+
+.cn-icon-information-aggregation:before {
+  content: "\e7e9";
+}
+
+.cn-icon-digital-certificate:before {
+  content: "\e7ea";
+}
+
+.cn-icon-save:before {
+  content: "\e7d1";
+}
+
+.cn-icon-edit1:before {
+  content: "\e7d2";
+}
+
+.cn-icon-revoke:before {
+  content: "\e7d3";
+}
+
 .cn-icon-administrations:before {
   content: "\e7be";
 }

src/assets/css/themes/theme-dark.scss

@@ -31,12 +31,12 @@ $--button-primary-background-color: $--color-primary; // 普通按钮背景色
 $--button-hover-tint-percent: 20%; // 非灰色按钮在鼠标hover时背景色变浅的幅度
 $--button-active-shade-percent: 0; // 非灰色按钮在focus时背景色变深的幅度
 
-$--button-gray-color: #666; // 灰色按钮字色
+$--button-gray-color: #353636; // 灰色按钮字色
 $--button-gray-hover-color: $--button-gray-color; // 灰色按钮hover字色
 $--button-gray-active-color: $--color-primary; // 灰色按钮focus字色
 $--button-gray-background-color: #F9F9F9; // 灰色按钮背景色
-$--button-gray-hover-background-color: #FFF; // 灰色按钮hover背景色
-$--button-gray-active-background-color: $--button-gray-hover-background-color; // 灰色按钮focus背景色
+$--button-gray-hover-background-color: #EBF1F4; // 灰色按钮hover背景色
+$--button-gray-active-background-color: #E0E7EA; // 灰色按钮focus背景色
 $--button-gray-border-color: $--border-color-primary; // 灰色按钮边框色
 $--button-gray-hover-border-color: $--button-gray-border-color; // 灰色按钮hover边框色
 $--button-gray-active-border-color-tint-percent: 30%; // 灰色按钮在focus时边框色相对于主题色变浅的幅度

src/assets/css/themes/theme-light.scss

@@ -2,10 +2,10 @@
 
 /** 重写element-ui变量 **/
 
-$--color-primary: #0091ff; // 主题色
-$--color-primary-dark-10: darken(#0091ff, 10%); // 默认主题色 深10%
-$--color-primary-light-10: lighten(#0091ff, 10%); // 默认主题色 浅10%
-$--color-primary-light-20: lighten(#0091ff, 20%); // 默认主题色 浅20%
+$--color-primary: #699DC9; // 主题色
+$--color-primary-dark-10: darken(#699DC9, 10%); // 默认主题色 深10%
+$--color-primary-light-10: lighten(#699DC9, 10%); // 默认主题色 浅10%
+$--color-primary-light-20: lighten(#699DC9, 20%); // 默认主题色 浅20%
 
 /* menu相关 */
 $--menu-background-color: #00162B; // menu背景色
@@ -31,12 +31,12 @@ $--button-primary-background-color: $--color-primary; // 普通按钮背景色
 $--button-hover-tint-percent: 20%; // 非灰色按钮在鼠标hover时背景色变浅的幅度
 $--button-active-shade-percent: 0; // 非灰色按钮在focus时背景色变深的幅度
 
-$--button-gray-color: #666; // 灰色按钮字色
+$--button-gray-color: #353636; // 灰色按钮字色
 $--button-gray-hover-color: $--button-gray-color; // 灰色按钮hover字色
 $--button-gray-active-color: $--color-primary; // 灰色按钮focus字色
 $--button-gray-background-color: #F9F9F9; // 灰色按钮背景色
-$--button-gray-hover-background-color: #FFF; // 灰色按钮hover背景色
-$--button-gray-active-background-color: $--button-gray-hover-background-color; // 灰色按钮focus背景色
+$--button-gray-hover-background-color: #EBF1F4; // 灰色按钮hover背景色
+$--button-gray-active-background-color: #E0E7EA; // 灰色按钮focus背景色
 $--button-gray-border-color: $--border-color-primary; // 灰色按钮边框色
 $--button-gray-hover-border-color: $--button-gray-border-color; // 灰色按钮hover边框色
 $--button-gray-active-border-color-tint-percent: 30%; // 灰色按钮在focus时边框色相对于主题色变浅的幅度

src/components/advancedSearch/Index.vue

@@ -115,11 +115,11 @@ export default {
   },
   setup (props) {
     // 默认为文本模式
-    let searchMode = ref('text')
+    const searchMode = ref('text')
     if (props.defaultMode) {
       switch (props.defaultMode) {
         case 'tag': {
-          searchMode = 'tag'
+          searchMode.value = 'tag'
           break
         }
       }

src/components/advancedSearch/TagMode.vue

@@ -36,6 +36,7 @@
         <!-- 值 -->
         <div class="condition__value">
           <div v-if="meta.value.isEditing">
+            <!--避免blur事件和keyup.enter重复执行-->
             <el-input v-model="meta.value.value" size="mini" @blur="valueBlur(meta)" ref="valueInput" @keyup.enter="valueBlur(meta)"></el-input>
           </div>
           <span v-else @click="valueClick(meta)">{{meta.value.label}}</span>
@@ -75,9 +76,12 @@
     <div class="tag-search__add" @click="addCondition">{{$t('entities.advancedSearch.add')}}</div>
     <div class="search__suffixes search__suffixes--tag-mode">
       <div class="search__suffix" @click="changeMode">
+<!--        新版实体列表改版，后续记得解开-->
+<!--      <div class="search__suffix" style="margin-right: 12px" @click="changeMode">-->
         <i class="cn-icon cn-icon-search-normal"></i>
       </div>
       <div class="search__suffix" @click="search">
+<!--      <div class="search__suffix new-search__suffix" @click="search">-->
         <i class="el-icon-search"></i>
       </div>
     </div>
@@ -89,6 +93,7 @@ import Meta, { connection, condition, columnType } from './meta/meta'
 import _ from 'lodash'
 import { handleErrorTip } from '@/components/advancedSearch/meta/error'
 import Parser, { stringInQuot } from '@/components/advancedSearch/meta/parser'
+import { overwriteUrl, urlParamsHandler } from '@/utils/tools'
 export default {
   name: 'TagMode',
   props: {
@@ -131,7 +136,10 @@ export default {
         this.metaList.push(newCondition)
 
         this.$nextTick(() => {
-          this.$refs.columnSelect.focus()
+          const selectList = this.$refs.columnSelect
+          if (selectList && selectList.length > 0) {
+            this.$refs.columnSelect[selectList.length - 1].focus() // 在for循环里生成的dom，所以是数组
+          }
         })
       }
     },
@@ -181,7 +189,7 @@ export default {
     columnClick (meta) {
       meta.column.isEditing = true
       this.$nextTick(() => {
-        this.$refs.columnSelect.focus()
+        this.$refs.columnSelect[this.$refs.columnSelect.length - 1].focus()
       })
     },
     columnBlur (meta, index) {
@@ -220,7 +228,10 @@ export default {
         }
       }
       this.$nextTick(() => {
-        this.$refs.valueInput.focus()
+        const selectList = this.$refs.valueInput
+        if (selectList && selectList.length > 0) {
+          this.$refs.valueInput[selectList.length - 1].focus() // 在for循环里生成的dom，所以是数组
+        }
       })
     },
     operatorClick (meta) {
@@ -245,7 +256,8 @@ export default {
             str = str.substring(1, str.length)
             str = str.substring(0, str.length - 1)
           }
-          if (str.indexOf("'") > -1) {
+          // 如果此时参数为xi'an，处理为xi''an，后一个条件避免若参数为xi''an,则不处理
+          if (str.indexOf("'") > -1 && str.indexOf("''") === -1) {
             str = str.replace(/'/g, "''")
           }
           return str
@@ -264,7 +276,8 @@ export default {
             str = str.substring(1, str.length)
             str = str.substring(0, str.length - 1)
           }
-          if (str.indexOf("'") > -1) {
+          // 如果此时参数为xi'an，处理为xi''an，后一个条件避免若参数为xi''an,则不处理
+          if (str.indexOf("'") > -1 && str.indexOf("''") === -1) {
             str = str.replace(/'/g, "''")
           }
           meta.value.value = str
@@ -276,7 +289,7 @@ export default {
     valueClick (meta) {
       meta.value.isEditing = true
       this.$nextTick(() => {
-        this.$refs.valueInput.focus()
+        this.$refs.valueInput[0].focus()
       })
     },
     // 判断是否是用户自己添加的内容，用于判断是否是全局搜索
@@ -308,13 +321,15 @@ export default {
       const parser = new Parser(this.columnList)
       const errorList = parser.validateMeta(this.metaList)
       if (_.isEmpty(errorList)) {
+        this.reloadUrl({ mode: 'text' })
         this.$emit('changeMode', 'text', parser.parseMeta(this.metaList))
       } else {
+        this.reloadUrl({ mode: 'text' })
         this.$emit('changeMode', 'text', { metaList: [], str: '' })
       }
     },
     // 处理value，例如转换IN的值
-    handleValue (value, column, operator) {
+    handleValue (value, column, operator, flag) {
       const isArray = ['IN', 'NOT IN'].indexOf(operator) > -1
       if (isArray) {
         if (_.isArray(value)) {
@@ -324,7 +339,14 @@ export default {
           return value
         }
       } else {
-        return column.type === columnType.string ? stringInQuot(value) : value
+        let newValue = column.type === columnType.string ? stringInQuot(value) : value
+        if (flag) {
+          newValue = newValue.slice(1)
+          newValue = newValue.slice(0, newValue.length - 1)
+          return newValue
+        } else {
+          return newValue
+        }
       }
     },
     addParams (params) {
@@ -338,7 +360,7 @@ export default {
         meta.column.label = column ? column.label : param.column
         meta.operator.value = '='
         meta.operator.show = true
-        meta.value.value = this.handleValue(param.value, column, column.operator)
+        meta.value.value = this.handleValue(param.value, column, column.operator, 'noQuotes')
         meta.value.show = true
         meta.value.label = meta.value.value
         this.addCondition(meta)
@@ -378,10 +400,28 @@ export default {
           this.metaList.splice(metaIndex, 2)
         }
       })
+    },
+    /**
+     * 向地址栏添加/删除参数
+     */
+    reloadUrl (newParam, clean) {
+      const { query } = this.$route
+      let newUrl = urlParamsHandler(window.location.href, query, newParam)
+      if (clean) {
+        newUrl = urlParamsHandler(window.location.href, query, newParam, clean)
+      }
+      overwriteUrl(newUrl)
     }
   },
   mounted () {
     const vm = this
+    // 如果地址栏包含参数q，则匹配出metaList到搜索栏回显使用
+    const { q } = this.$route.query
+    if (q) {
+      const parser = new Parser(this.columnList)
+      this.metaList = parser.parseStr(q).metaList
+    }
+
     this.emitter.on('advanced-search', function () {
       vm.search()
     })
@@ -399,3 +439,21 @@ export default {
   }
 }
 </script>
+
+<!--// 新版实体列表改版，后续记得解开-->
+<!--<style lang="scss">-->
+<!--.new-search__suffix {-->
+<!--  width: 41px;-->
+<!--  height: 41px;-->
+<!--  line-height: 41px;-->
+<!--  background: #38ACD2;-->
+<!--  text-align: center;-->
+<!--  margin-top: -10px;-->
+<!--  margin-right: -10px;-->
+
+<!--  .el-icon-search {-->
+<!--    color: #fff !important;-->
+<!--    margin-top: 9px !important;-->
+<!--  }-->
+<!--}-->
+<!--</style>-->

src/components/advancedSearch/TextMode.vue

@@ -6,6 +6,10 @@
     <div class="search__suffix" @click="changeMode">
       <i class="cn-icon cn-icon-search-advance"></i>
     </div>
+<!--    <div class="search__suffix-close" @click="cleanParams">-->
+<!--      <i class="el-icon-error"></i>-->
+<!--    </div>-->
+<!--    <div class="search__suffix new-search__suffix" @click="search">-->
     <div class="search__suffix" @click="search">
       <i class="el-icon-search"></i>
     </div>
@@ -24,6 +28,7 @@ import { toRaw } from 'vue'
 import _ from 'lodash'
 import { columnType } from '@/components/advancedSearch/meta/meta'
 import { handleErrorTip } from '@/components/advancedSearch/meta/error'
+import { overwriteUrl, urlParamsHandler } from '@/utils/tools'
 
 export default {
   name: 'TextMode',
@@ -38,6 +43,9 @@ export default {
   },
   emits: ['changeMode', 'search'],
   methods: {
+    // cleanParams () {
+    //   toRaw(this.codeMirror).setValue('')
+    // },
     initCodeMirror () {
       this.codeMirror = CodeMirror.fromTextArea(this.$refs.textSearch, {
         mode: {
@@ -74,11 +82,14 @@ export default {
         const errorList = parser.validateStr(str)
         if (_.isEmpty(errorList)) {
           const metaList = parser.parseStr(str)
+          this.reloadUrl({ mode: 'tag' })
           this.$emit('changeMode', 'tag', metaList)
         } else {
+          this.reloadUrl({ mode: 'tag' })
           this.$emit('changeMode', 'tag', { metaList: [], str: '' })
         }
       } else {
+        this.reloadUrl({ mode: 'tag' })
         this.$emit('changeMode', 'tag', { str: '', metaList: [] })
       }
     },
@@ -128,6 +139,17 @@ export default {
         current = current.replace(oldSqlPiece, newSqlPiece)
       })
       toRaw(this.codeMirror).setValue(current.trim())
+    },
+    /**
+     * 向地址栏添加/删除参数
+     */
+    reloadUrl (newParam, clean) {
+      const { query } = this.$route
+      let newUrl = urlParamsHandler(window.location.href, query, newParam)
+      if (clean) {
+        newUrl = urlParamsHandler(window.location.href, query, newParam, clean)
+      }
+      overwriteUrl(newUrl)
     }
   },
   watch: {
@@ -143,7 +165,13 @@ export default {
     }
   },
   mounted () {
+    // 如果地址栏包含参数q，则将参数q回显到搜索栏内
+    const { q } = this.$route.query
     this.initCodeMirror()
+    if (q) {
+      toRaw(this.codeMirror).setValue(q)
+    }
+
     const vm = this
     this.emitter.on('advanced-search', function () {
       vm.search()
@@ -151,3 +179,29 @@ export default {
   }
 }
 </script>
+
+<!--<style lang="scss">-->
+<!--.search__suffix-close {-->
+<!--  .el-icon-error {-->
+<!--    font-size: 17px;-->
+<!--    color: #C4C4C4;-->
+<!--    margin: 0 12px;-->
+<!--    cursor: pointer;-->
+<!--  }-->
+<!--}-->
+
+<!--.new-search__suffix {-->
+<!--  width: 41px;-->
+<!--  height: 41px;-->
+<!--  line-height: 41px;-->
+<!--  background: #38ACD2;-->
+<!--  text-align: center;-->
+<!--  margin-top: -10px;-->
+<!--  margin-right: -10px;-->
+
+<!--  .el-icon-search {-->
+<!--    color: #fff !important;-->
+<!--    margin-top: 9px !important;-->
+<!--  }-->
+<!--}-->
+<!--</style>-->

src/components/advancedSearch/meta/parser.js

@@ -751,6 +751,10 @@ export default class Parser {
 
 // 使用单引号包裹
 export function stringInQuot (value) {
+  if (value.indexOf("'") > -1) {
+    value = value.split("'").join("''") // 如xi'an，多添加一个单引号，处理为xi''an
+  }
+
   const match = `${value}`.match(/^'.+?'$/)
   return match ? value : `'${value}'`
 }

src/components/advancedSearch/meta/sql-parser.js

@@ -250,6 +250,10 @@ function handleType (value) {
 
 // 使用单引号包裹
 export function stringInQuot (value) {
+  if (value.indexOf("'") > -1) {
+    value = value.split("'").join("''") // 如xi'an，多添加一个单引号，处理为xi''an
+  }
+
   const match = `${value}`.match(/^'.+?'$/)
   return match ? value : `'${value}'`
 }

src/components/common/ChartTabs.vue

@@ -10,7 +10,7 @@
         <template #label>
           <div class="chart-tabs__label">
             <i :class="tab.icon"></i>
-            <span>{{ $t(tab.i18n) }}</span>
+            <span>{{ $t(tab.i18n || tab.name) }}</span>
           </div>
         </template>
       </el-tab-pane>
@@ -45,6 +45,7 @@
 import { overwriteUrl, urlParamsHandler } from '@/utils/tools'
 import { ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+import { useStore } from 'vuex'
 
 export default {
   name: 'ChartTabs',
@@ -69,8 +70,9 @@ export default {
   setup (props) {
     const tabsData = ref([])
     const router = useRouter()
+    const store = useStore()
     const routerPath = router.currentRoute.value.path
-    const tabList = window.currentChartTabList
+    const tabList = store.getters.getChartTabList
     let currentTab = '0'
 
     if (props.data) {
@@ -94,7 +96,7 @@ export default {
           return item.path === routerPath
         })
         currentTab = JSON.stringify(currentTab)
-        window.currentChartTabList = [{ path: routerPath, index: currentTab }]
+        store.dispatch('dispatchChartTabList', [{ path: routerPath, index: currentTab }])
       } else {
         // 此处为切换界面，如果window里保存的路径和tabsData里的路径一致，选择window数据并使用
         // 两个不一致的话，则默认选择tabsData里的第一条
@@ -108,10 +110,15 @@ export default {
 
         if (obj0 && obj1) {
           currentTab = tabList[1].index
+          // 场景：从遮罩面板进入界面时，重置状态，默认选中第一个tab
+          if (routerPath === tabList[0].path) {
+            currentTab = tabList[0].index
+            store.dispatch('dispatchChartTabList', [{ path: tabsData.value[0].path, index: '0' }])
+          }
         } else if (obj0) {
           currentTab = tabList[0].index
         } else {
-          window.currentChartTabList = [{ path: tabsData.value[0].path, index: '0' }]
+          store.dispatch('dispatchChartTabList', [{ path: tabsData.value[0].path, index: '0' }])
           currentTab = '0'
         }
       }
@@ -156,9 +163,10 @@ export default {
           }
         }
       })
+      const tabList = this.$store.getters.getChartTabList
 
-      if (window.currentChartTabList && this.router !== 'noRouter') {
-        window.currentChartTabList.forEach((item) => {
+      if (tabList && this.router !== 'noRouter') {
+        tabList.forEach((item) => {
           this.$nextTick(() => {
             this.handleActiveBar(parseFloat(item.index))
           })
@@ -167,7 +175,7 @@ export default {
         this.$nextTick(() => {
           this.handleActiveBar(this.currentTab)
         })
-        window.currentChartTabList = null
+        this.$store.dispatch('dispatchChartTabList', null)
       }
     },
     handleActiveBar (index) {
@@ -186,7 +194,7 @@ export default {
           } else {
             // 数组长度为1，即代表刚刷新界面，获取active的dom添加样式，避免原模式错位问题
             // 可添加css样式，也可添加class类名，两个操作选一即可
-            if (window.currentChartTabList.length === 1) {
+            if (this.$store.getters.getChartTabList.length === 1) {
               // 此处操作是因为初始化时给active加border，导致tab下移，故需要将整体往上移动对应高度
               const topDom = document.getElementsByClassName('el-tabs__header is-top')
               topDom[0].style.cssText += 'top: -3px'
@@ -201,6 +209,7 @@ export default {
     },
     handleClick (item) {
       this.$emit('click', item)
+      const tabList = this.$store.getters.getChartTabList
 
       if (this.router === 'noRouter') {
         const { query } = this.$route
@@ -210,14 +219,15 @@ export default {
         })
         overwriteUrl(newUrl)
       } else {
-        window.currentChartTabList.push({
+        tabList.push({
           path: this.tabsData[item.index].path,
           index: item.index
         })
 
-        if (window.currentChartTabList.length > 2) {
-          window.currentChartTabList.splice(0, 1)
+        if (tabList.length > 2) {
+          tabList.splice(0, 1)
         }
+        this.$store.dispatch('dispatchChartTabList', tabList)
 
         this.$router.push({
           path: this.tabsData[item.index].path,
@@ -230,6 +240,19 @@ export default {
   },
   beforeUnmount () {
     clearTimeout(this.timer)
+    const path = this.$router.currentRoute.value.path
+    const list = this.$store.getters.getChartTabList
+    if (list && this.router !== 'noRouter') {
+      if (list[1]) {
+        // 去其他界面，清除状态
+        if (path !== list[0].path && path !== list[1].path) {
+          this.$store.dispatch('dispatchChartTabList', null)
+        }
+      } else if (path !== list[0].path) {
+        // 避免刷新页面之后又点击菜单栏进入该界面，还保留上次点击状态
+        this.$store.dispatch('dispatchChartTabList', null)
+      }
+    }
   }
 }
 </script>

src/components/common/Error.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="showDefault" class="error-component">
+  <div v-if="showDefault" class="error-component" :style="style" :class="myClass">
     <div class="error-block" :style="{'max-width': localMaxWidth, 'width': localWidth}">
       <svg class="icon error-icon-default" aria-hidden="true">
         <use xlink:href="#cn-icon-baocuo"></use>
@@ -101,6 +101,12 @@ export default {
     // 自定义svg图标
     svg: {
       type: String
+    },
+    style: {
+      type: String
+    },
+    class: {
+      type: String
     }
   },
   data () {
@@ -109,7 +115,8 @@ export default {
       showSmall: false, // 显示错误的类型，true为图表模块内显示报错，false为标题后显示报错
       localWidth: '',
       localMaxWidth: '',
-      localPopoverWidth: ''
+      localPopoverWidth: '',
+      myClass: this.class
     }
   },
   mounted () {
@@ -141,7 +148,6 @@ export default {
     hoverError (e) {
       // const dom = document.getElementById('error-content')
       // if (dom) {
-      //   console.log('---', dom.clientHeight)
       // }
     }
   }

src/components/common/Pagination.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="pagination">
+  <div class="pagination" >
     <el-pagination
         ref="page"
         @size-change="size"
@@ -11,6 +11,7 @@
         :page-size="Number(pageObj.pageSize)"
         :layout="layout"
         :total="pageObj.total"
+        v-bind="bind"
     >
       <el-select v-model="pageSize" :placeholder="pageSize+$t('pageSize')" size="mini"
                  :popper-append-to-body="appendToBody" class="pagination-size-select" @change="size"
@@ -42,16 +43,23 @@ export default {
     layout: {
       type: String,
       default: 'total, prev, pager, next, slot'
+    },
+    bind: {
+      type: Object,
+      default: () => {}
+    },
+    storePageNoOnUrl: {
+      type: Boolean,
+      default: true
     }
   },
   /**
    * 添加vue3的setup，目的是添加/获取地址栏的参数
    */
-  setup () {
+  setup (props) {
     const { query } = useRoute()
     const pageSize = ref(defaultPageSize)
-    const currentPageNo = ref(query.pageNo || 1)
-
+    const currentPageNo = ref(props.storePageNoOnUrl ? (query.pageNo || (props.pageObj.pageNo || 1)) : (props.pageObj.pageNo || 1))
     return {
       pageSize,
       currentPageNo

src/components/common/TimeRange/DateTimeRange.vue

@@ -1,6 +1,6 @@
 <template>
-  <div v-ele-click-outside="changeDropdown" style="position: relative;z-index: 1" class="date-range-box">
-    <div @click="showDropdown" class="date-range-text">
+  <div v-ele-click-outside="changeDropdown" style="position: relative;" class="date-range-box">
+    <div @click="showDropdown" class="date-range-text" :class="myClass" :style="style">
       <div class="calendar-popover-text"><i class="cn-icon cn-icon-Data"></i></div>
       <div class="calendar-popover-text" style="display: flex" v-if="isCustom">
         <div class="calendar-popover-text">{{ dateFormatByAppearance(getMillisecond(startTime)) }}</div>
@@ -14,7 +14,7 @@
         <i class="cn-icon cn-icon-dropdown" :class="dropdownFlag ? 'cn-icon-up' : ''"></i>
       </div>
     </div>
-    <transition name="el-zoom-in-top">
+    <transition name="el-zoom-in-top" style="z-index: 4;">
       <div v-if="dropdownFlag" class="date-range-panel">
         <el-row class="date-range-panel-top" style="position: relative">
           <el-col :span="16" class="date-range-panel-content date-range-panel-content-left">
@@ -22,9 +22,10 @@
             <el-date-picker
                 v-model="newDateValue"
                 ref="newDatePicker"
-                class="date_style"
+                popper-class="my-date-picker"
                 style="position: absolute;top: -53px;left: -536px;"
                 :clearable="false"
+                :default-time="defaultTime"
                 type="datetimerange"
                 @change="timeArrChange"
             />
@@ -78,7 +79,7 @@
 <script>
 import { ref, computed, watch, reactive } from 'vue'
 import { storageKey } from '@/utils/constants'
-import { getMillisecond, timestampToList } from '@/utils/date-util'
+import { getMillisecond, millTimestampDiffFromTz, timestampToList } from '@/utils/date-util'
 import { useStore } from 'vuex'
 
 export default {
@@ -94,6 +95,12 @@ export default {
     },
     dateRange: {
       type: Number
+    },
+    class: {
+      type: String
+    },
+    style: {
+      type: String
     }
   },
   emits: ['change'],
@@ -102,6 +109,7 @@ export default {
     const store = useStore()
     const myStartTime = ref(props.startTime)
     const myEndTime = ref(props.endTime)
+    const myClass = ref(props.class)
     // 时间选择器绑定的值
     const newDateValue = ref([
       new Date(...timestampToList(myStartTime.value)),
@@ -116,17 +124,22 @@ export default {
     const dateRangeValue = props.dateRange ? ref(props.dateRange) : ref(60)
     const isCustom = ref(dateRangeValue.value === -1)
     const dateRangeArr = [
-      { value: 5, name: 'last 5 Min' },
-      { value: 15, name: 'last 15 Min' },
-      { value: 30, name: 'last 30 Min' },
+      { value: 5, name: 'last 5 mins' },
+      { value: 15, name: 'last 15 mins' },
+      { value: 30, name: 'last 30 mins' },
       { value: 60, name: 'last 1 hour' },
-      { value: 180, name: 'last 3 hour' },
-      { value: 360, name: 'last 6 hour' },
-      { value: 720, name: 'last 12 hour' },
-      { value: 1440, name: 'last 1 days' },
+      { value: 180, name: 'last 3 hours' },
+      { value: 360, name: 'last 6 hours' },
+      { value: 720, name: 'last 12 hours' },
+      { value: 1440, name: 'last 1 day' },
       { value: 2880, name: 'last 2 days' }
     ]
     const dropdownFlag = ref(false)
+    // 默认日历选择时间，即开始时间YYYY-MM-DD 00:00:00,结束时间YYYY-MM-DD 59:59:59
+    const defaultTime = ref([
+      new Date(2023, 1, 1, 0, 0, 0),
+      new Date(2023, 1, 2, 23, 59, 59)
+    ])
 
     // computed
     const utcStr = computed(() => {
@@ -162,7 +175,7 @@ export default {
       value: computed(() => store.state.panel.rangeEchartsData)
     })
 
-    watch(() => rangeEchartsData.value, (newVal, oldVal) => {
+    watch(() => rangeEchartsData.value, (newVal) => {
       if (newVal) {
         myStartTime.value = getMillisecond(newVal.startTime)
         myEndTime.value = getMillisecond(newVal.endTime)
@@ -203,19 +216,15 @@ export default {
         new Date(...timestampToList(myEndTime.value))
       ]
       newDatePicker.value.focus()
-
-      // todo 此处为弹窗打开的方向标识，控制css的position修改其left与top属性未生效，只好隐藏，后续有更好的处理办法再修改
-      const dom = document.getElementsByClassName('el-picker__popper el-popper is-light is-pure')
-      const dom1 = dom[0].getElementsByClassName('el-popper__arrow')
-      dom1[0].style.display = 'none'
     }
     /**
      * 时间选择器，选择时间，点击OK后的回调
      * @param val，开始/结束时间数组
      */
     const timeArrChange = (val) => {
-      myStartTime.value = getMillisecond(val[0])
-      myEndTime.value = getMillisecond(val[1])
+      // 按服务器时区修正时间戳
+      myStartTime.value = getMillisecond(val[0]) + millTimestampDiffFromTz()
+      myEndTime.value = getMillisecond(val[1]) + millTimestampDiffFromTz()
       isCustom.value = true
       dateRangeValue.value = -1
       returnValue()
@@ -269,11 +278,13 @@ export default {
     return {
       myStartTime,
       myEndTime,
+      myClass,
       dropdownFlag,
       utcStr,
       rangeEchartsData,
       address,
       dateRangeArr,
+      defaultTime,
       dateRangeValue,
       isCustom,
       newDateValue,

src/components/common/TimeRange/TimeRefresh.vue

@@ -67,9 +67,10 @@ export default {
       if (refreshTime !== null) {
         // 此处是避免下钻后浏览器返回，获取不到url的refreshTime情况
         // 以及重新加载后改变时间但url回退仍保留上次数据的情况
-        refreshObj = refreshArr.find(item => item.value === refreshTime)
+        refreshObj = refreshArr.find(item => item.value === refreshTime) || refreshArr[0]
       } else if (query.refreshTime !== undefined) {
-        refreshObj = refreshArr.find(item => item.value === Number(query.refreshTime))
+        // 若地址栏的refreshTime不是数组里的值，直接关闭刷新
+        refreshObj = refreshArr.find(item => item.value === Number(query.refreshTime)) || refreshArr[0]
       }
     } else {
       // 浏览器回退时，清除掉地址栏的refreshTime
@@ -98,7 +99,6 @@ export default {
       if (val && val.value !== -1) {
         // 切换轮询请求时间频率时，发现有未结束的请求，终止请求
         const cancelList = this.$store.state.panel.httpCancel
-        // console.log('timeRefresh.vue------setRefresh------查看终止数量', cancelList, cancelList.length)
         if (cancelList.length > 0) {
           cancelList.forEach((cancel, index) => {
             cancel()
@@ -113,6 +113,8 @@ export default {
         this.$store.commit('setRefreshTime', val.value)
         this.$store.commit('setRefreshFlag', true)
 
+        // 在新的轮询开始前清除掉已经可能存在的定时器，避免新的刷新时间不生效
+        clearInterval(this.intervalTimer)
         // 设置定时器
         this.intervalTimer = setInterval(() => {
           this.$emit('change')

src/components/layout/Container.vue

@@ -20,7 +20,9 @@ export default {
     entityDetectionStyle () {
       const route = this.$route.name !== undefined ? this.$route.name : this.$route
       if (listScrollPath.indexOf(route.path) > -1) {
+        // 新版实体列表改版，后续记得解开
         const style = route.path === listScrollPath[0] ? 'overflow:auto;background-color: #EFF2F5;' : 'overflow:auto;'
+        // const style = 'overflow:auto;'
         return style
       } else {
         return ''

src/components/layout/Header.vue

@@ -42,9 +42,9 @@
     </div>
     <div class="cn-header__nav">
       <i class="cn-icon cn-icon-a-NetworkAnalytics"></i>
-      <el-breadcrumb class="header__left-breadcrumb" :separator="route.indexOf('detection') === -1 && route.indexOf('administration') === -1 ? '>' : ''">
-        <el-breadcrumb-item class="header__left-breadcrumb-item" :id="`breadcrumb${item}`" :title="item"
-                            v-for="(item,index) in breadcrumb" :key="item">
+      <el-breadcrumb class="header__left-breadcrumb" separator=">">
+        <el-breadcrumb-item class="header__left-breadcrumb-item" :id="`breadcrumb${item.value}`" :title="item.value"
+                            v-for="(item,index) in breadcrumb" :key="item.value">
           <template v-if="index===3">
             <div class="header__left-breadcrumb-item-select">
               <el-popover placement="bottom-start"
@@ -54,7 +54,7 @@
                           :hide-after="0"
                           :show-after="0"
                           popper-class="breadcrumb__popper"
-                          @show="showBreadcrumbPopover(item)"
+                          @show="showBreadcrumbPopover(item.value)"
                           @hide="hideBreadcrumbPopover()"
                           trigger="click">
                 <template #reference>
@@ -62,13 +62,13 @@
                        :class="showBackground?'breadcrumb-button__active':''">
                     <span id="breadcrumbValue">
                       <template v-if="curTabProp === 'qtype'">
-                        <span>{{ dnsQtypeMapData.get(item)}}</span>
+                        <span>{{ dnsQtypeMapData.get(item.value)}}</span>
                       </template>
                       <template v-else-if="curTabProp === 'rcode'">
-                        <span>{{ dnsRcodeMapData.get(item)}}</span>
+                        <span>{{ dnsRcodeMapData.get(item.value)}}</span>
                       </template>
                       <template v-else>
-                        <span>{{ item }}</span>
+                        <span>{{ item.value }}</span>
                       </template>
                     </span><i class="cn-icon-xiala cn-icon"></i>
                   </div>
@@ -82,7 +82,7 @@
                   </div>
                   <ul class="select-dropdown" id="breadcrumbSelectDropdown" @scroll="scrollList()">
                     <li v-for="item in breadcrumbColumnValueListShow" title='' :key="item" :id="item"
-                        class="select-dropdown__item" @click="changeValue(item)" :class="selected?'':''">
+                        class="select-dropdown__item" @click="changeValue(item)">
                       <template v-if="curTabProp === 'qtype'">
                         <span>{{ dnsQtypeMapData.get(item) }}</span>
                       </template>
@@ -99,39 +99,17 @@
             </div>
           </template>
           <template v-else-if="index===2">
-            <span v-if="route===wholeScreenRouterMapping.dns">{{ $t(item) }}</span>
-            <span v-else class="route-menu" @click="jump(route,item,'',3)">{{ $t(item) }}</span>
+            <span v-if="route===wholeScreenRouterMapping.dns">{{ $t(item.value) }}</span>
+            <span v-else class="route-menu" @click="jump(route,item.value,'',3)">{{ $t(item.value) }}</span>
           </template>
+          <!-- index=0和index=1的点击跳转由breadcrumb里的数据控制 -->
           <template v-else-if="index===1">
-            <span class="route-menu" @click="jump(route,'','',2)"
-                  v-if="route.indexOf('detection') === -1 && route.indexOf('administration') === -1">{{ item }}</span>
-            <!--            <div class="header__left-breadcrumb-item-select" v-if="route.indexOf('detection') > -1">-->
-            <!--              <el-popover placement="bottom-start"-->
-            <!--                          v-if="route.indexOf('detection') > -1"-->
-            <!--                          ref="breadcrumbPopover"-->
-            <!--                          :show-arrow="false"-->
-            <!--                          :append-to-body="false"-->
-            <!--                          :hide-after="0"-->
-            <!--                          :show-after="0"-->
-            <!--                          popper-class="breadcrumb__popper"-->
-            <!--                          trigger="click">-->
-            <!--                <template #reference>-->
-            <!--                  <div class="breadcrumb-button"  id="breadcrumbButton2" :class="showBackground?'breadcrumb-button__active':''"  v-if="route.indexOf('detection') > -1">-->
-            <!--                    <span id="breadcrumbValue2"> {{item}}</span><i class="cn-icon-xiala cn-icon"></i>-->
-            <!--                  </div>-->
-            <!--                </template>-->
-            <!--                <el-row type="flex" justify="center" style="width: fit-content;flex-direction: column;">-->
-            <!--                  <ul class="select-dropdown" id="breadcrumbSelectDropdown2">-->
-            <!--                    <li v-for="item in detectionMenuList" title='' :key="item.name" :id="item.name" class="select-dropdown__item" @click="jump(item.path,'','',2)">-->
-            <!--                      <span>{{$t(item.i18n)}}</span>-->
-            <!--                    </li>-->
-            <!--                  </ul>-->
-            <!--                </el-row>-->
-            <!--              </el-popover>-->
-            <!--            </div>-->
+            <span v-if="item.clickable" class="route-menu" @click="jump(route,'','',2)">{{ item.value }}</span>
+            <span v-else>{{ item.value }}</span>
           </template>
           <template v-else>
-            <span>{{ item }}</span>
+            <span v-if="item.clickable" class="route-menu" @click="jump(item.route,'','',0)">{{ item.value }}</span>
+            <span v-else>{{ item.value }}</span>
           </template>
         </el-breadcrumb-item>
       </el-breadcrumb>
@@ -233,6 +211,7 @@ import {
   handleSpecialValue
 } from '@/utils/tools'
 import { getNowTime, getSecond } from '@/utils/date-util'
+import _ from 'lodash'
 
 export default {
   name: 'Header',
@@ -310,7 +289,7 @@ export default {
       return this.$store.getters.menuList.find(menu => menu.code === 'networkAnalytics')
     },
     otherMenu () {
-      return this.$store.getters.menuList.filter(menu => menu.code !== 'networkAnalytics')
+      return this.$store.getters.menuList.filter(menu => ['networkAnalytics', 'chart', 'I18N', 'entityDetail', 'temp'].indexOf(menu.code) === -1)
 
       /* function excludeButton (menu) {
         for (let i = 0; i < menu.length; i++) {
@@ -326,38 +305,28 @@ export default {
       } */
     },
     breadcrumb () {
-      const breadcrumbMap = []
-      this.curTabProp = this.$route.query.dimensionType ? this.$route.query.dimensionType : null
-      this.$store.getters.menuList.forEach(menu => {
-        if (this.$_.isEmpty(menu.children) && menu.route) {
-          breadcrumbMap.push({
-            name: this.$t(menu.i18n),
-            path: menu.route,
-            columnName: menu.columnName,
-            columnValue: menu.columnValue
-          })
-        } else if (!this.$_.isEmpty(menu.children)) {
-          menu.children.forEach(child => {
-            breadcrumbMap.push({
-              name: child.i18n ? this.$t(child.i18n) : child.name,
-              parentName: menu.i18n ? this.$t(menu.i18n) : menu.name,
-              path: child.route,
-              columnName: child.columnName,
-              columnValue: child.columnValue
-            })
-          })
+      const breadcrumb = []
+      this.generateBreadcrumb(breadcrumb, this.$store.getters.menuList)
+      // 写死一级和二级菜单是否可以点击跳转
+      if (breadcrumb[0]) {
+        if (['knowledgeBase'].indexOf(breadcrumb[0].code) > -1) {
+          breadcrumb[0].clickable = true
         }
-      })
-      const breadcrumb = breadcrumbMap.find(b => this.route === b.path)
+        if (breadcrumb[1]) {
+          if (breadcrumb[1].route && breadcrumb[1].route.indexOf('/panel/') === 0) {
+            breadcrumb[1].clickable = true
+          }
+        }
+      }
+
       const thirdMenu = this.getUrlParam(this.curTabState.thirdMenu, '')
       const fourthMenu = this.getUrlParam(this.curTabState.fourthMenu, '')
-      let result = []
+
+      let result = [...breadcrumb]
       if (fourthMenu) {
-        result = breadcrumb ? [breadcrumb.parentName, breadcrumb.name, thirdMenu, fourthMenu] : []
+        result = [...result, { value: thirdMenu }, { value: fourthMenu }]
       } else if (thirdMenu) {
-        result = breadcrumb ? [breadcrumb.parentName, breadcrumb.name, thirdMenu] : []
-      } else {
-        result = breadcrumb ? [breadcrumb.parentName, breadcrumb.name] : []
+        result = [...result, { value: thirdMenu }]
       }
       return result
     },
@@ -381,6 +350,7 @@ export default {
       }
     },
     async breadcrumb (n) {
+      this.curTabProp = this.$route.query.dimensionType ? this.$route.query.dimensionType : null
       if (this.$route.params.typeName === fromRoute.dnsServiceInsights) {
         if (this.dnsQtypeMapData.size === 0) {
           this.dnsQtypeMapData = await getDnsMapData('dnsQtype')
@@ -421,6 +391,49 @@ export default {
     }
   },
   methods: {
+    generateBreadcrumb (breadcrumb, menus) {
+      if (this.route === '/entityDetail') {
+        const entityMenu = menus.find(m => m.route === '/entityExplorer')
+        const entityDetailMenu = menus.find(m => m.route === '/entityDetail')
+        breadcrumb.push({
+          code: entityMenu.code,
+          value: entityMenu.i18n ? this.$t(entityMenu.i18n) : entityMenu.name,
+          route: entityMenu.route,
+          type: entityMenu.type
+        })
+        breadcrumb.push({
+          code: entityDetailMenu.code,
+          value: entityDetailMenu.i18n ? this.$t(entityDetailMenu.i18n) : entityDetailMenu.name,
+          route: entityDetailMenu.route,
+          type: entityDetailMenu.type
+        })
+        return true
+      }
+      const menu = menus.find(m => m.route === this.route)
+      if (menu) {
+        breadcrumb.unshift({
+          code: menu.code,
+          value: menu.i18n ? this.$t(menu.i18n) : menu.name,
+          route: menu.route,
+          type: menu.type
+        })
+        return true
+      } else {
+        for (let i = 0; i < menus.length; i++) {
+          if (!_.isEmpty(menus[i].children)) {
+            if (this.generateBreadcrumb(breadcrumb, menus[i].children)) {
+              breadcrumb.unshift({
+                code: menus[i].code,
+                value: menus[i].i18n ? this.$t(menus[i].i18n) : menus[i].name,
+                route: menus[i].route,
+                type: menus[i].type
+              })
+              return true
+            }
+          }
+        }
+      }
+    },
     handleClose () {
       this.showChangePin = false
     },
@@ -532,13 +545,13 @@ export default {
     changeValue (value) {
       // 设置面包屑显示的内容及hover时的title
       let valName = value
-      if (this.tab === 'qtype') {
+      if (this.curTabProp === 'qtype') {
         valName = this.dnsQtypeMapData.get(value)
-      } else if (this.tab === 'rcode') {
+      } else if (this.curTabProp === 'rcode') {
         valName = this.dnsRcodeMapData.get(value)
       }
       this.curTabProp = this.$route.query.dimensionType ? this.$route.query.dimensionType : null
-      document.getElementById('breadcrumbValue').innerText = value
+      document.getElementById('breadcrumbValue').innerText = valName
       document.getElementById(this.valueMenuId).setAttribute('title', valName)
       document.getElementById('breadcrumbButton').click()
       const columnName = this.getUrlParam(this.curTabState.thirdMenu, '')
@@ -552,7 +565,7 @@ export default {
             queryCondition.push('common_l7_protocol=\'' + valueGroup[0] + '\'')
             queryCondition.push('common_server_port=' + valueGroup[1])
           }
-          console.log(queryCondition.join(' AND '))
+          // console.log(queryCondition.join(' AND '))
           this.urlChangeParams[this.curTabState.queryCondition] = queryCondition.join(' AND ')
         } else {
           searchProps.forEach(item => {
@@ -627,10 +640,8 @@ export default {
         this.urlChangeParams[this.curTabState.tabOperationBeforeType] = this.getUrlParam(this.curTabState.tabOperationType, '', true)
         this.urlChangeParams[this.curTabState.tabOperationType] = opeType
         if (opeType === 3) {
-          if (route !== '/panel/networkOverview') {
           this.urlChangeParams.queryCondition = ''
         }
-        }
       } else {
         this.urlChangeParams[this.curTabState.tabOperationType] = operationType.mainMenu
       }

src/components/layout/Home.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="cn-home">
     <cn-header @refresh="refresh"></cn-header>
+    <suspense>
       <cn-container v-if="containerShow" ref="container"></cn-container>
+    </suspense>
   </div>
 </template>
 

src/components/rightBox/report/ReportBox.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="reportForm" :model="editObject" :rules="rules" label-position="top" label-width="120px">
           <!--name-->
           <el-form-item :label="$t('report.name')" prop="name">
             <el-input id="account-input-name" v-model="editObject.name" maxlength="64" placeholder=" " show-word-limit size="small" type="text"></el-input>
@@ -19,7 +19,6 @@
                        v-model="editObject.config.timeConfig.type"
                        class="right-box__select"
                        collapse-tags
-                       :disabled="!!editObject.id"
                        placeholder=" "
                        popper-class="right-box-select-dropdown right-box-select-report "
                        size="small"
@@ -31,7 +30,6 @@
             </el-select>
             <template v-if="editObject.config.timeConfig.type === 'this'">
               <el-select id="reportBoxTimeUnitSelect"
-                         :disabled="!!editObject.id"
                          v-model="editObject.config.timeConfig.unit"
                          class="right-box__select"
                          collapse-tags
@@ -45,7 +43,7 @@
               </el-select>
             </template>
             <div v-else-if="editObject.config.timeConfig.type === 'last' || editObject.config.timeConfig.type === 'previous'" style="display: flex;">
-              <el-input v-model.number="editObject.config.timeConfig.offset" size="small" class="el-input-single" placeholder=" " :disabled="!!editObject.id">
+              <el-input v-model.number="editObject.config.timeConfig.offset" size="small" class="el-input-single" placeholder=" ">
                 <template #prepend><i @click="timeOffsetHandle('m')" class="cn-icon cn-icon-a-"></i></template>
                 <template #append><i @click="timeOffsetHandle('p')" class="cn-icon cn-icon-a-1"></i></template>
               </el-input>
@@ -53,7 +51,6 @@
                          v-model="editObject.config.timeConfig.unit"
                          class="right-box__select right-box__select-single"
                          collapse-tags
-                         :disabled="!!editObject.id"
                          placeholder=" "
                          popper-class="right-box-select-dropdown  el-select-last"
                          size="small"
@@ -73,10 +70,8 @@
                     v-model="editObject.config.startTime"
                     size="small"
                     :format="dateFormat"
-                    :disabled="!!editObject.id"
                     :disabled-date="startDisabledDate"
                     @change="startTimeChang"
-                    @focus="startFocus"
                     prefix-icon="cn-icon cn-icon-shijian"
                     type="datetime"
                     placeholder=" "
@@ -93,10 +88,8 @@
                     v-model="editObject.config.endTime"
                     size="small"
                     :format="dateFormat"
-                    :disabled="!!editObject.id"
                     :disabled-date="endDisabledDate"
                     @change="endTimeChange"
-                    @focus="endFocus"
                     prefix-icon="cn-icon cn-icon-shijian"
                     type="datetime"
                     placeholder=" "
@@ -105,41 +98,41 @@
             </div>
           </el-form-item >
           <el-form-item class="el-height">
-            <el-checkbox v-model="scheduleChecked" :disabled="editObject.config.timeConfig.type === 'customize' || !!editObject.id" :label="$t('report.enableTimeSchedule')" size="large" />
+            <el-checkbox v-model="scheduleChecked" :disabled="editObject.config.timeConfig.type === 'customize'" :label="$t('report.enableTimeSchedule')" size="large" />
           </el-form-item>
           <!--Enable time schedule-->
           <el-form-item prop="enableTimeSchedule" v-if="scheduleChecked">
             <div class="enable-tab">
-              <div class="enable-tabs" @click="editObject.id ? null : (scheduleType = type.value)" v-for="type in scheduleTypeList" :key="type.value" :class="{'active': scheduleType === type.value, 'disable': editObject.id}">{{$t(type.name)}}</div>
+              <div class="enable-tabs" @click="scheduleTypeChange(type.value)" v-for="type in scheduleTypeList" :key="type.value" :class="{'active': scheduleType === type.value}">{{$t(type.name)}}</div>
             </div>
             <div class="enable-tabs-daily" v-if="scheduleType === scheduleTypeList[0].value">
               <div class="enable-tabs-custom">{{$t('report.customEvery')}}</div>
-              <el-input v-model.number="editObject.config.schedulerConfig.interval" size="small" placeholder=" " style="margin-top: 0.3125rem;" :disabled="!!editObject.id">
+              <el-input v-model.number="editObject.config.schedulerConfig.interval" size="small" placeholder=" " style="margin-top: 0.3125rem;">
                 <template #append>{{$t('report.day')}}</template>
               </el-input>
             </div>
-            <div class="enable-tabs-weekly" v-else-if="scheduleType === scheduleTypeList[1].value" :disabled="!!editObject.id">
+            <div class="enable-tabs-weekly" v-else-if="scheduleType === scheduleTypeList[1].value">
               <!-- 每隔几周暂时隐藏 -->
               <!-- <div class="enable-tabs-custom">{{$t('report.customEvery')}}</div>
               <el-input v-model="editObject.config.schedulerConfig.interval" size="small" placeholder="Please input">
                 <template #append>{{$t('report.week')}}</template>
               </el-input>-->
-              <el-checkbox-group v-model="editObject.config.schedulerConfig.weekDates" style="margin-top: 0.3125rem" :disabled="!!editObject.id">
+              <el-checkbox-group v-model="editObject.config.schedulerConfig.weekDates" style="margin-top: 0.3125rem">
                 <el-checkbox v-for="(item, index) in weekdayList" :key="index" :label="item.value">{{$t(item.name)}}</el-checkbox>
               </el-checkbox-group>
             </div>
             <!-- 月 -->
             <div class="enable-tabs-per-month" v-else-if="scheduleType === scheduleTypeList[2].value">
               <div class="enable-month-tab">
-                <div class="enable-month-tabs" @click="editObject.id ? null : (monthScheduleType = 'daily')" :class="{'active': monthScheduleType === 'daily', 'disable': editObject.id}">{{$t('report.date')}}</div>
-                <div class="enable-month-tabs" @click="editObject.id ? null : (monthScheduleType = 'weekly')" :class="{'active': monthScheduleType === 'weekly', 'disable': editObject.id}">{{$t('report.week')}}</div>
-                <el-checkbox v-model="monthIsCycle" :label="$t('report.cycle')" size="large" :disabled="!!editObject.id"/>
+                <div class="enable-month-tabs" @click="monthScheduleType = 'daily'" :class="{'active': monthScheduleType === 'daily'}">{{$t('report.date')}}</div>
+                <div class="enable-month-tabs" @click="monthScheduleType = 'weekly'" :class="{'active': monthScheduleType === 'weekly'}">{{$t('report.week')}}</div>
+                <el-checkbox v-model="monthIsCycle" :label="$t('report.cycle')" size="large"/>
               </div>
               <div class="enable-month-data-tab">
                 <!-- 自定义月，循环 -->
                 <template v-if="monthIsCycle">
                   <div class="enable-tabs-custom">{{$t('report.customEvery')}}</div>
-                  <el-input v-model="editObject.config.schedulerConfig.interval" size="small" placeholder=" " style="margin-top: 0.3125rem;" :disabled="!!editObject.id">
+                  <el-input v-model="editObject.config.schedulerConfig.interval" size="small" placeholder=" " style="margin-top: 0.3125rem;">
                     <template #append>{{$t('report.month')}}</template>
                   </el-input>
                 </template>
@@ -147,8 +140,8 @@
                 <template v-else>
                   <div class="enable-month-moon-custom">{{$t('report.custom')}}</div>
                   <div class="enable-month-all">
-                    <el-checkbox v-model="monthCheckedAll" class="enable-month-all-months" :indeterminate="monthIsIndeterminate" @change="monthCheckAllChange" :label="$t('report.allMonths')" :disabled="!!editObject.id"/>
-                    <el-checkbox-group v-model="editObject.config.schedulerConfig.months" @change="monthCheckChange" :disabled="!!editObject.id">
+                    <el-checkbox v-model="monthCheckedAll" class="enable-month-all-months" :indeterminate="monthIsIndeterminate" @change="monthCheckAllChange" :label="$t('report.allMonths')"/>
+                    <el-checkbox-group v-model="editObject.config.schedulerConfig.months" @change="monthCheckChange">
                       <el-checkbox v-for="(item, index) in monthList" :key="index" :label="item.value">{{$t(item.name)}}</el-checkbox>
                     </el-checkbox-group>
                   </div>
@@ -156,8 +149,8 @@
                 <!-- 按日期 -->
                 <template v-if="monthScheduleType === 'daily'">
                   <div class="enable-month-data-tabs">
-                    <el-checkbox v-model="dateCheckedAll" :indeterminate="dateIsIndeterminate" @change="dateCheckAllChange" :label="$t('report.all')" size="large" :disabled="!!editObject.id"/>
-                    <el-checkbox-group v-model="editObject.config.schedulerConfig.monthDates" @change="dateCheckChange" :disabled="!!editObject.id">
+                    <el-checkbox v-model="dateCheckedAll" :indeterminate="dateIsIndeterminate" @change="dateCheckAllChange" :label="$t('report.all')" size="large"/>
+                    <el-checkbox-group v-model="editObject.config.schedulerConfig.monthDates" @change="dateCheckChange">
                       <el-checkbox v-for="item in dateList" :key="item" :label="item"/>
                     </el-checkbox-group>
                   </div>
@@ -170,7 +163,6 @@
                              class="right-box__select"
                              multiple
                              placeholder=" "
-                             :disabled="!!editObject.id"
                              popper-class="right-box-select-dropdown right-box-select-report"
                              size="small"
                              @change="()=>{ this.$forceUpdate() }">
@@ -179,8 +171,8 @@
                     </template>
                   </el-select>
                   <div class="enable-month-week">
-                    <el-checkbox v-model="monthWeekdayCheckedAll" class="enable-month-week-all" :label="$t('report.all')" :indeterminate="monthWeekdayIsIndeterminate" @change="monthWeekdayCheckAllChange" size="large" :disabled="!!editObject.id"/>
-                    <el-checkbox-group v-model="editObject.config.schedulerConfig.weekDates" @change="monthWeekdayCheckChange" :disabled="!!editObject.id">
+                    <el-checkbox v-model="monthWeekdayCheckedAll" class="enable-month-week-all" :label="$t('report.all')" :indeterminate="monthWeekdayIsIndeterminate" @change="monthWeekdayCheckAllChange" size="large"/>
+                    <el-checkbox-group v-model="editObject.config.schedulerConfig.weekDates" @change="monthWeekdayCheckChange">
                       <el-checkbox v-for="(item, index) in weekdayList" :key="index" :label="item.value">{{$t(item.name)}}</el-checkbox>
                     </el-checkbox-group>
                   </div>
@@ -230,7 +222,7 @@
                        :disabled="!!editObject.id"
                        popper-class="right-box-select-dropdown right-box-select-report"
                        size="small"
-                       @change="typeChange">
+            >
               <template v-for="category in categoryList" :key="category.id">
                 <el-option :label="category.name" :value="category.id"></el-option>
               </template>
@@ -241,9 +233,12 @@
 <!--            <el-input v-model="param.value" placeholder=" " v-for="(param, index) in editObject.categoryParams" :key="index" size="small" style="vertical-align: unset;" :disabled="!!editObject.id">
               <template #prepend>{{param.key}}</template>
             </el-input>-->
+            <template v-for="(param, index) in editObject.categoryParams" :key="index">
+              <el-input v-if="param.labelType === 'input'" v-model="param.value" placeholder=" " size="small" style="vertical-align: unset;" :disabled="!!editObject.id">
+                <template #prepend>{{param.key}}</template>
+              </el-input>
               <el-select v-model="param.value"
-                       v-for="(param, index) in editObject.categoryParams"
-                       :key="index"
+                         v-else
                          class="right-box__select right-box__select--param"
                          placeholder=" "
                          filterable
@@ -259,8 +254,8 @@
                     <el-option :key="p" :value="p" v-for="p in paramOption.options"></el-option>
                   </template>
                 </template>
-
               </el-select>
+            </template>
           </el-form-item>
         </el-form>
       </div>
@@ -283,28 +278,8 @@ import { api } from '@/utils/api'
 import _ from 'lodash'
 import { get, post, put } from '@/utils/http'
 import { dateFormat, getMillisecond } from '@/utils/date-util'
-import { ref } from 'vue'
-const paramValidator = (rule, value, callback) => {
-  let validate = true
-  if (value && value.length > 0) {
-    const hasEmpty = value.some(v => {
-      return !v.value && v.value !== 0
-    })
-    validate = !hasEmpty
-  }
-  return validate
-}
-const nameValidator = (rule, value, callback) => {
-  let validate = true
-  const reg = /^[\u4e00-\u9fa5A-Za-z0-9\-\_]*$/
-  if (reg.test(value)) {
-    validate = true
-  } else {
-    validate = false
-  }
-  return validate
-}
-
+import { ref, getCurrentInstance } from 'vue'
+import i18n from '@/i18n'
 export default {
   name: 'ReportBox',
   mixins: [rightBoxMixin],
@@ -313,32 +288,21 @@ export default {
     currentCategoryId: Number
   },
   setup () {
+    const { proxy } = getCurrentInstance()
+
     const startTime = ref('')
     const endTime = ref('')
-    const focus = ref('')
-    const focusDate = ref('')
     function endTimeChange (val) {
       endTime.value = val
     }
     function startTimeChang (val) {
       startTime.value = val
     }
-    function startFocus (val) {
-      focus.value = val.target.value
-    }
-    function endFocus (val) {
-      focusDate.value = val.target.value
-    }
     const endDisabledDate = (time) => {
       if (time.getTime() > new Date()) {
         return true
       }
-      if (startTime.value != '' && startTime.value > time) {
-        return true
-      }
-      if (focusDate.value != '' && endTime.value > time) {
-        return false
-      } else if (endTime.value != '' && endTime.value < time) {
+      if (startTime.value !== '' && startTime.value > time) {
         return true
       }
     }
@@ -346,22 +310,71 @@ export default {
       if (time.getTime() > new Date()) {
         return true
       }
-      if (focus.value != '' && startTime.value > time) {
-        return false
-      } else if (startTime.value != '' && startTime.value > time) {
+      if (endTime.value !== '' && endTime.value < time) {
         return true
       }
-      if (endTime.value != '' && endTime.value < time) {
-        return true
     }
+
+    const paramValidator = (rule, value, callback) => {
+      let validate = true
+      if (value && value.length > 0) {
+        const hasEmpty = value.some(v => {
+          return !v.value && v.value !== 0
+        })
+        validate = !hasEmpty
+      }
+      return validate
+    }
+    const nameValidator = (rule, value, callback) => {
+      let validate = true
+      const reg = /^[\u4e00-\u9fa5A-Za-z0-9\-\_]*$/
+      validate = reg.test(value)
+      return validate
+    }
+    const startTimeValidator = (rule, value, callback) => {
+      const form = proxy.$refs.reportForm
+      if (form.model.config.endTime) {
+        form.validateField('config.endTime', () => null)
+      }
+      callback()
+    }
+    const endTimeValidator = (rule, value, callback) => {
+      let validate = true
+      if (startTime.value !== '' && value <= startTime.value) {
+        validate = false
+      }
+      return validate
+    }
+    const rules = { // 表单校验规则
+      name: [
+        { required: true, message: i18n.global.t('validate.required'), trigger: 'blur' },
+        { validator: nameValidator, message: i18n.global.t('validate.onlyAllowNumberLetterChinese-_'), trigger: 'blur' }
+      ],
+      categoryId: [
+        { required: true, message: i18n.global.t('validate.required'), trigger: 'change' }
+      ],
+      schedulerStart: [
+        { required: true, message: i18n.global.t('validate.required'), trigger: 'change' }
+      ],
+      'config.startTime': [
+        { required: true, message: i18n.global.t('validate.required'), trigger: 'change' },
+        { validator: startTimeValidator, trigger: 'change' }
+      ],
+      'config.endTime': [
+        { required: true, message: i18n.global.t('validate.required'), trigger: 'change' },
+        { validator: endTimeValidator, message: i18n.global.t('validate.endTimeGreaterThanStart'), trigger: 'change' }
+      ],
+      categoryParams: [
+        { required: true, message: i18n.global.t('validate.required'), trigger: 'blur' },
+        { validator: paramValidator, message: i18n.global.t('validate.required'), trigger: 'blur' }
+      ]
     }
     return {
       endDisabledDate,
       startDisabledDate,
       startTimeChang,
       endTimeChange,
-      startFocus,
-      endFocus
+      rules
     }
   },
   data () {
@@ -391,48 +404,20 @@ export default {
       monthWeekdayCheckedAll: false,
       monthWeekdayIsIndeterminate: false,
 
-      rules: { // 表单校验规则
-        name: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
-          { validator: nameValidator, message: this.$t('validate.onlyAllowNumberLetterChinese-_'), trigger: 'blur' }
-        ],
-        categoryId: [
-          { required: true, message: this.$t('validate.required'), trigger: 'change' }
-        ],
-        schedulerStart: [
-          { required: true, message: this.$t('validate.required'), trigger: 'change' }
-        ],
-        'config.startTime': [
-          { required: true, message: this.$t('validate.required'), trigger: 'change' }
-        ],
-        'config.endTime': [
-          { required: true, message: this.$t('validate.required'), trigger: 'change' }
-        ],
-        categoryParams: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
-          { validator: paramValidator, message: this.$t('validate.required'), trigger: 'blur' }
-        ]
-      },
       paramsOptions: []
     }
   },
   watch: {
     scheduleType (n, o) {
       this.editObject.config.schedulerConfig.type = n
-      if (!this.editObject.id) {
       this.cleanScheduleConfig()
-      }
     },
     scheduleChecked (n) {
       this.editObject.config.isScheduler = n ? 1 : 0
-      if (!this.editObject.id) {
       this.cleanScheduleConfig()
-      }
     },
     monthScheduleType (n) {
-      if (!this.editObject.id) {
       this.cleanScheduleConfig()
-      }
     },
     monthIsCycle (n) {
       if (!this.editObject.id) {
@@ -566,15 +551,13 @@ export default {
           this.editObject.config.timeConfig.offset--
         }
       }
-    },
-    typeChange (id) {
-
     },
     cleanScheduleConfig () {
       this.editObject.config.schedulerConfig.monthDates = []
       this.editObject.config.schedulerConfig.weekDates = []
       this.editObject.config.schedulerConfig.months = []
       this.editObject.config.schedulerConfig.monthWeekDates = []
+      this.editObject.config.schedulerConfig.interval = 1
       this.monthIsCycle = true
       this.dateCheckedAll = false
       this.dateIsIndeterminate = false
@@ -588,11 +571,14 @@ export default {
         this.scheduleChecked = false
       }
     },
+    scheduleTypeChange (val) {
+      this.scheduleType = val
+    },
     save () {
       if (this.blockOperation.save) { return }
       this.blockOperation.save = true
 
-      this.$refs.userForm.validate((valid) => {
+      this.$refs.reportForm.validate((valid) => {
         if (valid) {
           let startTime = ''
           let endTime = ''

src/components/rightBox/settings/RoleBox.vue

@@ -15,7 +15,7 @@
                        show-word-limit size="small" type="text" v-model="editRole.name"></el-input>
           </el-form-item>
           <el-form-item :label="$t('overall.remark')">
-            <el-input maxlength="256" show-word-limit :rows="2" size='mini' type="textarea" v-model="editRole.remark" id="role-box-input-remark"/>
+            <el-input maxlength="255" show-word-limit :rows="2" size='mini' type="textarea" v-model="editRole.remark" id="role-box-input-remark"/>
           </el-form-item>
 
           <el-form-item :label="$t('config.roles.permission')">
@@ -26,8 +26,8 @@
             <el-tree :data="menus" :default-expand-all="expandAllFlag" :props="{label:labelFormatter}"  @check-change="selectChange" class="tree-border" node-key="id" ref="menuTree" show-checkbox id="role-box-input-menus">
               <template #default="{ data }">
               <span>
-                <i v-if="data.type == '1'" class="el-icon-menu"></i>
-                <i v-if="data.type == '2'" class="el-icon-edit"></i>
+                <i v-if="data.type === '1'" class="el-icon-menu"></i>
+                <i v-if="data.type === '2'" class="el-icon-edit"></i>
               </span>
                 {{$t(data.i18n)}}
               </template>
@@ -70,7 +70,8 @@ export default {
       rightBox: { model: { show: false } },
       rules: { // 表单校验规则
         name: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          { pattern: /^[a-zA-Z0-9]{2,64}$/, message: this.$t('validate.atLeastTwo') } // 目前仅对长度要求在2-64之间，后续有需求再添加
         ]
       },
       menus: [],
@@ -113,7 +114,7 @@ export default {
         self.menus = []
         if (self.editRole.id) {
           get(api.menu + self.editRole.id).then(response => {
-            if (response.code == 200) {
+            if (response.code === 200) {
               self.menus = response.data.menus
               self.selectedIds = response.data.selectedIds
             } else {
@@ -123,7 +124,7 @@ export default {
           })
         } else {
           get(api.sysMenu).then(response => {
-            if (response.code == 200) {
+            if (response.code === 200) {
               self.menus = response.data.list
             } else {
               self.$message.error('load menu faild')
@@ -161,7 +162,7 @@ export default {
       }
     },
     save () {
-      if (this.prevent_opt.save) { return } ;
+      if (this.prevent_opt.save) { return }
       this.prevent_opt.save = true
 
       this.$refs.roleForm.validate((valid) => {

src/components/rightBox/settings/UserBox.vue

@@ -12,30 +12,30 @@
           <!--name-->
           <el-form-item :label="$t('config.user.name')" prop="name">
             <el-input id="account-input-name" v-model="editObject.name" :disabled="editObject.username==='admin' && editObject.id === 1"
-                      maxlength="64" placeholder="" show-word-limit size="small" type="text"></el-input>
+                      minlength="2" maxlength="64" placeholder="" show-word-limit size="small" type="text"></el-input>
           </el-form-item>
           <!--username-->
           <el-form-item :label="$t('config.user.username')" prop="username">
             <el-input id="account-input-username" v-model="editObject.username" :disabled="editObject.username==='admin' && editObject.id === 1"
-                      maxlength="64" placeholder="" show-word-limit size="small" type="text"></el-input>
+                      minlength="2" maxlength="64" placeholder="" show-word-limit size="small" type="text"></el-input>
           </el-form-item>
           <!--password-->
           <el-form-item :label="$t('config.user.pin')" prop="pin">
-            <el-input id="account-input-password" v-model="editObject.pin"  maxlength="64" placeholder=""
+            <el-input id="account-input-password" v-model="editObject.pin" minlength="5" maxlength="64" placeholder=""
                       show-word-limit size="small" type="password" @blur="pinBlur" autocomplete="new-password"></el-input>
           </el-form-item>
           <!--pinChange-->
           <el-form-item :label="$t('config.user.confirmPin')" label-width="200px" prop="pinChange">
-            <el-input id="account-input-pinChange" v-model="editObject.pinChange"  maxlength="64" placeholder=""
+            <el-input id="account-input-pinChange" v-model="editObject.pinChange" minlength="5" maxlength="64" placeholder=""
                       show-word-limit size="small" type="password"></el-input>
           </el-form-item>
           <!--email-->
           <el-form-item label="E-mail" prop="email">
-            <el-input id="account-input-email" v-model="editObject.email" maxlength="64" show-word-limit placeholder="" size="small" type="text"></el-input>
+            <el-input id="account-input-email" v-model="editObject.email" maxlength="35" show-word-limit placeholder="" size="small" type="text"></el-input>
           </el-form-item>
           <!--mobile-->
           <el-form-item :label="$t('config.user.mobile')" prop="mobile">
-            <el-input id="account-input-mobile" v-model.number="editObject.mobile" maxlength="64" show-word-limit placeholder="" size="small" type="text"></el-input>
+            <el-input id="account-input-mobile" v-model.number="editObject.mobile" maxlength="11" show-word-limit placeholder="" size="small" type="text"></el-input>
           </el-form-item>
           <!--roles-->
           <el-form-item :label="$t('config.user.roles')" prop="roleIds">
@@ -89,7 +89,7 @@
             <el-switch
                id="account-input-status"
                v-model="editObject.status"
-               :disabled="(editObject.username === loginName) || (editObject.username==='admin' && editObject.id==1)"
+               :disabled="(editObject.username === loginName) || (editObject.username === 'admin' && editObject.id === 1)"
                :active-value="1"
                :inactive-value="0">
             </el-switch>
@@ -125,7 +125,7 @@ export default {
   data () {
     const validatePin = (rule, value, callback) => { // 确认密码的二次校验
       if (value === '' && this.editObject.pin) {
-        callback(new Error(this.$t('config.user.inputConfirmPin')))
+        callback(new Error(this.$t('config.user.confirmPin')))
       } else if (value !== this.editObject.pin) {
         callback(new Error(this.$t('config.user.confirmPinErr')))
       } else {
@@ -137,23 +137,31 @@ export default {
       loginName: localStorage.getItem(storageKey.username),
       rules: { // 表单校验规则
         name: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          { pattern: /^[a-zA-Z0-9]{2,64}$/, message: this.$t('validate.atLeastTwo') }
         ],
         username: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          { pattern: /^[a-zA-Z0-9]{2,64}$/, message: this.$t('validate.atLeastTwo') }
         ],
         pin: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          { pattern: /^[a-zA-Z0-9]{5,64}$/, message: this.$t('validate.atLeastFive') }
         ],
         pinChange: [
           { validator: validatePin, trigger: 'blur' },
-          { required: true, message: '', trigger: 'blur' }
+          { required: true, message: this.$t('validate.required') },
+          { pattern: /^[a-zA-Z0-9]{5,64}$/, message: this.$t('validate.atLeastFive') }
         ],
         roleIds: [
           { required: true, message: this.$t('validate.required'), trigger: 'blur' }
         ],
         email: [
           { type: 'email', message: this.$t('validate.email') }
+        ],
+        mobile: [
+          { required: false, message: this.$t('validate.required') },
+          { pattern: /^(1[345678]\d{9})$/, message: this.$t('validate.mobile') }
         ]
       },
       rules2: { // 表单校验规则
@@ -161,13 +169,19 @@ export default {
           { required: true, message: this.$t('validate.required'), trigger: 'blur' }
         ],
         pinChange: [
-          { validator: validatePin, trigger: 'blur' }
+          { validator: validatePin, trigger: 'blur' },
+          { required: true, message: this.$t('validate.required') },
+          { pattern: /^[a-zA-Z0-9]{5,64}$/, message: this.$t('validate.atLeastFive') }
         ],
         roleIds: [
           { required: true, message: this.$t('validate.required'), trigger: 'blur' }
         ],
         email: [
           { type: 'email', message: this.$t('validate.email') }
+        ],
+        mobile: [
+          { required: false, message: this.$t('validate.required') },
+          { pattern: /^(1[345678]\d{9})$/, message: this.$t('validate.mobile') }
         ]
       },
       roleData: [],

src/components/table/CnDataList.vue

@@ -2,31 +2,29 @@
   <div :class="from" class="list-page">
     <!-- 主页面 -->
     <div class="main-list">
-      <!-- 顶部工具栏 -->
       <div class="main-container">
+        <!-- 顶部工具栏 -->
         <div class="top-tools">
           <div class="top-tool-left" style="min-width: 300px">
             <slot name="top-tool-left"></slot>
-          </div>
-          <div class="top-tool-right">
-<!--           <el-input v-model="keyWord" value="keyWord"></el-input>
-            <el-button @click="onsearch" icon="el-icon-search" type="info" size="mini" style="margin-right: 10px"></el-button>-->
             <div v-if="showLayout.indexOf('search') > -1" class="top-tool-search margin-r-20">
               <div style="display: flex">
-                <el-input
-                    v-model="keyWord"  size="small" @keyup.enter="onsearch"></el-input>
-<!--                <el-button icon="el-icon-search" @click="onsearch" size="small"></el-button>-->
-                <button   class="top-tool-btn" style="border-radius: 0px"
-                        type="button" @click="onsearch">
+                <el-input v-model="keyWord"  size="small" @keyup.enter="onSearch"></el-input>
+                <!--                <el-button icon="el-icon-search" @click="onSearch" size="small"></el-button>-->
+                <button class="top-tool-btn  top-tool-btn--search" style="border-radius: 0 2px 2px 0 !important;" @click="onSearch">
                   <i class="el-icon-search"></i>
                 </button>
               </div>
             </div>
+          </div>
+          <div class="top-tool-right">
+<!--           <el-input v-model="keyWord" value="keyWord"></el-input>
+            <el-button @click="onSearch" icon="el-icon-search" type="info" size="mini" style="margin-right: 10px"></el-button>-->
+
             <slot name="top-tool-right"></slot>
-            <button v-if="showLayout.indexOf('elementSet') > -1"  class="top-tool-btn"
-                    type="button" @click="tools.showCustomTableTitle = true">
-              <i class="cn-icon-gear cn-icon"></i>
-            </button>
+            <div  v-if="showLayout.indexOf('elementSet') > -1" class="btn-customize"  @click="tools.showCustomTableTitle = true">
+              <i class="cn-icon-gear cn-icon icon-gear"></i> <span> {{$t('network.customize')}}</span>
+            </div>
           </div>
         </div>
         <div class="cn-table">
@@ -87,14 +85,15 @@ export default {
       tools: {
         showCustomTableTitle: false // 自定义列弹框是否显示
       },
-      showLayout: []
+      showLayout: [],
+      loading: true
     }
   },
   methods: {
     updateCustomTableTitle (custom) {
       this.$emit('update:customTableTitle', custom)
     },
-    onsearch () {
+    onSearch () {
       const params = {
         q: this.keyWord
       }

src/components/table/ColumnCustomize.vue

@@ -1,39 +1,59 @@
 <template>
   <div class="pop-custom" v-ele-click-outside="esc">
-    <div class="pop-title">{{$t('overall.select')}}</div>
-    <div class="pop-box custom-labels">
-      <div style="height: 100%; border-radius:2%; border:1px solid #DCDFE6; overflow: auto;">
-        <!--NotSet 为true不可设置-->
-        <div
-          v-for="(item,index) in custom"
-          :key="index"
-          class="custom-label"
-          @click="handler(item,index)"
-          :id="'element-set-el-'+index"
+    <transition-group name="dragTabs" class="list" tag="ul" ref="tabs">
+      <li v-for="(item, index) in custom"
+          :key="item.label"
+          class="list-item"
+          @dragenter="dragenter($event, index)"
+          @dragover="dragover($event, index)"
+          @dragstart="dragstart(index)"
+          :draggable="!item.sortable"
       >
-          <i class="cn-icon cn-icon-check" v-if="!allowedAll && !item.allowed && (index === 0 || index === 1 || item.visibility === 'disabled')"></i>
-          <i v-else class="cn-icon cn-icon-check" v-show="item.show"></i>
-          <span>{{item.label}}</span>
-        </div>
+        <i class="cn-icon-sort cn-icon icon-drag" :key="item.label"></i>
+        <el-checkbox
+            @change="tabChange(index)"
+            :disabled="item.disabled"
+            v-model="item.show"
+            :label="$t(item.label) "
+            size="small"
+            :key="item.label"/>
+      </li>
+    </transition-group>
+    <!--暂时保留之前代码-->
+    <!--    <div class="pop-title">{{$t('overall.select')}}</div>-->
+    <!--    <div class="pop-box custom-labels">-->
+    <!--      <div style="height: 100%; border-radius:2%; border:1px solid #DCDFE6; overflow: auto;">-->
+    <!--        &lt;!&ndash;NotSet 为true不可设置&ndash;&gt;-->
+    <!--        <div-->
+    <!--          v-for="(item,index) in custom"-->
+    <!--          :key="index"-->
+    <!--          class="custom-label"-->
+    <!--          @click="handler(item,index)"-->
+    <!--          :id="'element-set-el-'+index"-->
+    <!--        >-->
+    <!--          <i class="cn-icon cn-icon-check" v-if="!allowedAll && !item.allowed && (index === 0 || index === 1 || item.visibility === 'disabled')"></i>-->
+    <!--          <i v-else class="cn-icon cn-icon-check" v-show="item.show"></i>-->
+    <!--          <span>{{item.label}}</span>-->
+    <!--        </div>-->
 
-      </div>
-    </div>
-    <div class="custom-bottom-btns">
-      <el-button size="mini" v-if="isCancel" :id="tableId+'-element-set-none'" class="cn-btn cn-btn-size-small-new cn-btn-style-light-new is-cancel" type="button" @click="batchHandler(false)">
-        <span class="top-tool-btn-txt">{{$t('overall.clear')}}</span>
-      </el-button>
-      <el-button size="mini" v-if="!isCancel" :id="tableId+'-element-set-all'" class="cn-btn cn-btn-size-small-new cn-btn-style-light-new" type="button" @click="batchHandler(true)">
-        <span class="top-tool-btn-txt">{{$t('overall.all')}}</span>
-      </el-button>
-      <div>
-        <el-button size="mini" :id="tableId+'-element-set-esc'" class="cn-btn cn-btn-size-small-new cn-btn-style-light-new" type="button" @click="esc">
-          <span class="top-tool-btn-txt">{{$t('overall.cancel')}}</span>
-        </el-button>
-        <el-button size="mini" :id="tableId+'-element-set-save'" class="cn-btn cn-btn-size-small-new cn-btn-style-normal-new" type="button" @click="save" style="background-color: #0091ff;color:#DCDFE6">
-          <span class="top-tool-btn-txt">{{$t('overall.save')}}</span>
-        </el-button>
-      </div>
-    </div>
+    <!--      </div>-->
+    <!--    </div>-->
+    <!--    <div class="custom-bottom-btns">-->
+    <!--      <el-button size="mini" v-if="isCancel" :id="tableId+'-element-set-none'" class="cn-btn cn-btn-size-small-new cn-btn-style-light-new is-cancel" @click="batchHandler(false)">-->
+    <!--        <span class="top-tool-btn-txt">{{$t('overall.clear')}}</span>-->
+    <!--      </el-button>-->
+    <!--      <el-button size="mini" v-if="!isCancel" :id="tableId+'-element-set-all'" class="cn-btn cn-btn-size-small-new cn-btn-style-light-new" @click="batchHandler(true)">-->
+    <!--        <span class="top-tool-btn-txt">{{$t('overall.all')}}</span>-->
+    <!--      </el-button>-->
+    <!--      <div class="custom-bottom-btns-right">-->
+    <!--        <el-button size="mini" :id="tableId+'-element-set-esc'" class="cn-btn cn-btn-size-small-new cn-btn-style-light-new" @click="esc">-->
+    <!--          <span class="top-tool-btn-txt">{{$t('overall.cancel')}}</span>-->
+    <!--        </el-button>-->
+    <!--        <el-button size="mini" :id="tableId+'-element-set-save'" class="cn-btn cn-btn-size-small-new cn-btn-style-normal-new" @click="save" style="background-color: #0091ff;color:#DCDFE6">-->
+    <!--          <span class="top-tool-btn-txt top-tool-btn-save">{{$t('overall.save')}}</span>-->
+    <!--        </el-button>-->
+    <!--      </div>-->
+    <!--    </div>-->
   </div>
 </template>
 
@@ -48,7 +68,9 @@ export default {
   },
   data () {
     return {
-      custom: []
+      custom: [],
+      dragIndex: -1,
+      selectList: []
     }
   },
   created () {
@@ -63,10 +85,43 @@ export default {
       deep: true,
       handler (n) {
         this.custom = JSON.parse(JSON.stringify(n))
+        this.selectList = this.custom.filter(item => item.show)
       }
     }
   },
   methods: {
+    tabChange () {
+      this.selectList = this.custom.filter(item => item.show)
+      // 最少保留一个选项
+      if (this.selectList.length === 1) {
+        const obj = this.custom.find(item => item.prop === this.selectList[0].prop)
+        obj.disabled = true
+      } else if (this.selectList.length > 1) {
+        this.custom.forEach(item => {
+          // 该方案仅用于原始table列表无禁用的情况，目前无原始列表禁用的情况，后续有原始列表禁用的情况再修改
+          item.disabled = false
+        })
+      }
+      this.save()
+    },
+    /** 开始拖拽，获取键值 */
+    dragstart (index) {
+      this.dragIndex = index
+    },
+    /** 获取拖拽键值，修改数组，将数组保存到本地 */
+    dragenter (e, index) {
+      e.preventDefault()
+      if (this.dragIndex !== index) {
+        const moving = this.custom[this.dragIndex]
+        this.custom.splice(this.dragIndex, 1)
+        this.custom.splice(index, 0, moving)
+        this.dragIndex = index
+        this.save()
+      }
+    },
+    dragover (e) {
+      e.preventDefault()
+    },
     // 悬浮点击空白隐藏
     esc () {
       this.$emit('close')
@@ -86,6 +141,7 @@ export default {
     // 单选
     handler (val, index) {
       if (!this.allowedAll && !val.allowed && (index === 0 || index === 1 || val.NotSet)) {
+        //
       } else {
         this.custom[index].show = !this.custom[index].show
       }
@@ -93,9 +149,8 @@ export default {
     // 点击第二个cancel
     save () {
       this.$emit('update', this.custom)
-      localStorage.setItem(storageKey.tableTitle + '-' + localStorage.getItem(storageKey.username) + '-' + this.tableId,
-        JSON.stringify(this.custom))
-      this.esc()
+      localStorage.setItem(storageKey.tableTitle + '-' + localStorage.getItem(storageKey.username) + '-' + this.tableId, JSON.stringify(this.custom))
+      // this.esc()
     }
   },
   computed: {

src/components/table/administration/ChartTable.vue

@@ -5,6 +5,7 @@
           :data="tableData"
           :height="height"
           border
+          empty-text=" "
           @header-dragend="dragend"
           @sort-change="tableDataSort"
           @selection-change="selectionChange"
@@ -16,8 +17,8 @@
             width="55">
     </el-table-column>
     <el-table-column
-            v-for="(item, index) in customTableTitles"
-            :key="`col-${index}`"
+            v-for="item in customTableTitles"
+            :key="item.prop"
             :fixed="item.fixed"
             :label="item.label"
             :min-width="`${item.minWidth}`"
@@ -81,40 +82,27 @@
         <span v-else>{{scope.row[item.prop]}}</span>
       </template>
     </el-table-column>
-    <el-table-column
-            :resizable="false"
-            :width="operationWidth"
-            fixed="right">
-      <template #header>
-        <div class="table-operation-title">{{$t('overall.option')}}</div>
-      </template>
-      <template #default="scope">
-        <div class="table-operation-items">
-          <button class="table-operation-item" @click="tableOperation(['edit', scope.row])"><i class="cn-icon cn-icon-edit"></i></button>
-          <el-dropdown size="medium" trigger="hover" @command="tableOperation">
-            <div class="table-operation-item table-operation-item--more">
-              <i class="cn-icon cn-icon-more-arrow-down"></i>
-            </div>
-            <template #dropdown>
-              <el-dropdown-menu >
-                <el-dropdown-item :command="['delete', scope.row]" :disabled="scope.row['buildIn'] === 1"><i class="cn-icon cn-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
-              </el-dropdown-menu>
-            </template>
-          </el-dropdown>
+    <template v-slot:empty >
+      <div class="table-no-data" v-if="isNoData">
+        <div class="table-no-data__title">{{ $t('npm.noData') }}</div>
       </div>
     </template>
-    </el-table-column>
   </el-table>
 </template>
 
 <script>
 import table from '@/mixins/table'
 import { panelTypeAndRouteMapping } from '@/utils/constants'
-import { api } from '@/utils/api'
 
 export default {
   name: 'chartTable',
   mixins: [table],
+  props: {
+    isNoData: {
+      type: Boolean,
+      default: false
+    }
+  },
   data () {
     return {
       panelTypeAndRouteMapping: panelTypeAndRouteMapping,

src/components/table/administration/GalaxyProxyTable.vue

@@ -7,6 +7,7 @@
     :height="height"
     tooltip-effect="light"
     border
+    empty-text=" "
     @header-dragend="dragend"
     @sort-change="tableDataSort"
     @selection-change="selectionChange"
@@ -18,8 +19,8 @@
       width="55">
     </el-table-column>
     <el-table-column
-      v-for="(item, index) in customTableTitles"
-      :key="`col-${index}`"
+      v-for="item in customTableTitles"
+      :key="item.prop"
       :fixed="item.fixed"
       :label="item.label"
       :min-width="`${item.minWidth}`"
@@ -91,7 +92,6 @@
       </template>
       <template #default="scope">
         <div class="table-operation-items">
-          <button class="table-operation-item" @click="tableOperation(['edit', scope.row])"><i class="cn-icon cn-icon-edit"></i></button>
           <el-dropdown size="medium" trigger="hover" @command="tableOperation">
             <div class="table-operation-item table-operation-item--more">
               <i class="cn-icon cn-icon-more-arrow-down"></i>
@@ -99,7 +99,6 @@
             <template #dropdown>
               <el-dropdown-menu >
                 <el-dropdown-item :command="['copy', scope.row]"><i class="cn-icon cn-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
-                <el-dropdown-item :command="['delete', scope.row]"><i class="cn-icon cn-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
                 <el-dropdown-item :command="['debug', scope.row]"><i class="cn-icon cn-icon-debug"></i><span class="operation-dropdown-text">{{$t('overall.debug')}}</span></el-dropdown-item>
               </el-dropdown-menu>
             </template>
@@ -107,6 +106,11 @@
         </div>
       </template>
     </el-table-column>
+    <template v-slot:empty >
+      <div class="table-no-data" v-if="isNoData">
+        <div class="table-no-data__title">{{ $t('npm.noData') }}</div>
+      </div>
+    </template>
   </el-table>
 </template>
 
@@ -117,6 +121,12 @@ import { copyValue } from '@/utils/tools'
 export default {
   name: 'galaxyProxyTable',
   mixins: [table],
+  props: {
+    isNoData: {
+      type: Boolean,
+      default: false
+    }
+  },
   data () {
     return {
       tableTitle: [ // 原始table列

src/components/table/administration/I18nTable.vue

@@ -5,6 +5,7 @@
       :data="tableData"
       :height="height"
       border
+      empty-text=" "
       @header-dragend="dragend"
       @sort-change="tableDataSort"
       @selection-change="selectionChange"
@@ -16,8 +17,8 @@
         width="55">
     </el-table-column>
     <el-table-column
-        v-for="(item, index) in customTableTitles"
-        :key="`col-${index}`"
+        v-for="item in customTableTitles"
+        :key="item.prop"
         :fixed="item.fixed"
         :label="item.label"
         :min-width="`${item.minWidth}`"
@@ -32,32 +33,13 @@
         <div class="col-resize-area"></div>
       </template>
       <template #default="scope" :column="item">
-        <span>{{scope.row[item.prop]}}</span>
+        <span>{{scope.row[item.prop] || '-'}}</span>
       </template>
-    </el-table-column>
-    <el-table-column
-        :resizable="false"
-        :width="operationWidth"
-        fixed="right">
-      <template #header>
-        <div class="table-operation-title">{{$t('overall.option')}}</div>
-      </template>
-      <template #default="scope">
-        <div class="table-operation-items">
-          <button class="table-operation-item" @click="tableOperation(['edit', scope.row])"><i class="cn-icon cn-icon-edit"></i></button>
-          <el-dropdown size="medium" trigger="hover" @command="tableOperation">
-            <div class="table-operation-item table-operation-item--more">
-              <i class="cn-icon cn-icon-more-arrow-down"></i>
-            </div>
-            <template #dropdown>
-              <el-dropdown-menu >
-                <el-dropdown-item :command="['delete', scope.row]" :disabled="scope.row.id === 1"><i class="cn-icon cn-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
-              </el-dropdown-menu>
-            </template>
-          </el-dropdown>
+    </el-table-column><template v-slot:empty >
+    <div class="table-no-data" v-if="isNoData">
+      <div class="table-no-data__title">{{ $t('npm.noData') }}</div>
     </div>
   </template>
-    </el-table-column>
   </el-table>
 </template>
 
@@ -68,6 +50,12 @@ import { api } from '@/utils/api'
 export default {
   name: 'I18nTable',
   mixins: [table],
+  props: {
+    isNoData: {
+      type: Boolean,
+      default: false
+    }
+  },
   data () {
     return {
       url: api.i18nLang,

src/components/table/administration/OperationLogTable.vue

@@ -6,20 +6,17 @@
     :height="height"
     tooltip-effect="light"
     border
+    empty-text=" "
     class="no-operation"
     @header-dragend="dragend"
     @sort-change="tableDataSort"
     @selection-change="selectionChange"
+    :cell-style="{paddingLeft: '20px'}"
+    :header-cell-style="{paddingLeft: '20px'}"
   >
-    <el-table-column
-      :resizable="false"
-      align="center"
-      type="selection"
-      width="55">
-    </el-table-column>
     <el-table-column
       v-for="(item, index) in customTableTitles"
-      :key="`col-${index}`"
+      :key="item.prop+index"
       :fixed="item.fixed"
       :label="item.label"
       :min-width="`${item.minWidth}`"
@@ -39,24 +36,29 @@
                 {{scope.row[item.prop]}}ms
               </span>
         <span v-else-if="item.prop === 'state'">
-          <template v-if="scope.row[item.prop]==operationLogStateMapping.success">
+          <template v-if="scope.row[item.prop]===operationLogStateMapping.success">
             {{$t('operationLog.state.success')}}
           </template>
-          <template v-else-if="scope.row[item.prop]==operationLogStateMapping.fail">
+          <template v-else-if="scope.row[item.prop]===operationLogStateMapping.fail">
             {{$t('operationLog.state.fail')}}
           </template>
           <template v-else>
-            {{scope.row[item.prop]}}
+            {{scope.row[item.prop] || '-'}}
           </template>
         </span>
         <span v-else-if="item.prop === 'username'">{{formatUsername(scope.row)}}</span>
         <span v-else-if="item.prop === 'ctime'">{{dateFormatByAppearance(scope.row[item.prop])}}</span>
         <template v-else-if="item.prop === 'params' || item.prop === 'response'">
-          <span>{{scope.row[item.prop]}}</span>
+          <span>{{scope.row[item.prop] || '-'}}</span>
         </template>
-        <span v-else>{{scope.row[item.prop]}}</span>
+        <span v-else>{{scope.row[item.prop] || '-'}}</span>
       </template>
     </el-table-column>
+    <template v-slot:empty >
+      <div class="table-no-data" v-if="isNoData">
+        <div class="table-no-data__title">{{ $t('npm.noData') }}</div>
+      </div>
+    </template>
   </el-table>
 </template>
 
@@ -67,6 +69,12 @@ import { operationLogStateMapping } from '@/utils/constants'
 export default {
   name: 'roleTable',
   mixins: [table],
+  props: {
+    isNoData: {
+      type: Boolean,
+      default: false
+    }
+  },
   data () {
     return {
       operationLogStateMapping: operationLogStateMapping,
@@ -92,7 +100,7 @@ export default {
           show: true
         },
         {
-          label: this.$t('config.operationlog.type'),
+          label: this.$t('overall.type'),
           prop: 'type',
           show: true
         },

src/components/table/administration/RoleTable.vue

@@ -5,6 +5,7 @@
     :data="tableData"
     :height="height"
     border
+    empty-text=" "
     @header-dragend="dragend"
     @sort-change="tableDataSort"
     @selection-change="selectionChange"
@@ -13,11 +14,13 @@
       :resizable="false"
       align="center"
       type="selection"
+      :selectable="checkSelectable"
       width="55">
     </el-table-column>
+    <!--key只使用item.prop的话，拖拽后，界面无响应，添加index后问题解决-->
     <el-table-column
       v-for="(item, index) in customTableTitles"
-      :key="`col-${index}`"
+      :key="item.prop+index"
       :fixed="item.fixed"
       :label="item.label"
       :min-width="`${item.minWidth}`"
@@ -44,32 +47,14 @@
             <span>-</span>
           </template>
         </template>
-        <span v-else>{{scope.row[item.prop]}}</span>
+        <span v-else>{{scope.row[item.prop] || '-'}}</span>
       </template>
     </el-table-column>
-    <el-table-column
-            :resizable="false"
-            :width="operationWidth"
-            fixed="right">
-      <template #header>
-        <div class="table-operation-title">{{$t('overall.option')}}</div>
-      </template>
-      <template #default="scope">
-        <div class="table-operation-items">
-          <button class="table-operation-item" @click="tableOperation(['edit', scope.row])"><i class="cn-icon cn-icon-edit"></i></button>
-          <el-dropdown size="medium" trigger="hover" @command="tableOperation">
-            <div class="table-operation-item table-operation-item--more">
-              <i class="cn-icon cn-icon-more-arrow-down"></i>
-            </div>
-            <template #dropdown>
-              <el-dropdown-menu >
-                <el-dropdown-item :command="['delete', scope.row]" :disabled="scope.row.id === 1"><i class="cn-icon cn-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
-              </el-dropdown-menu>
-            </template>
-          </el-dropdown>
+    <template v-slot:empty >
+      <div class="table-no-data" v-if="isNoData">
+        <div class="table-no-data__title">{{ $t('npm.noData') }}</div>
       </div>
     </template>
-    </el-table-column>
   </el-table>
 </template>
 
@@ -78,6 +63,12 @@ import table from '@/mixins/table'
 export default {
   name: 'roleTable',
   mixins: [table],
+  props: {
+    isNoData: {
+      type: Boolean,
+      default: false
+    }
+  },
   data () {
     return {
       tableTitle: [ // 原table列
@@ -99,6 +90,12 @@ export default {
         }
       ]
     }
+  },
+  methods: {
+    // 禁止勾选buildIn为1的项，即禁止修改admin的权限
+    checkSelectable (row) {
+      return row.buildIn !== 1
+    }
   }
 }
 </script>

src/components/table/administration/UserTable.vue

@@ -4,7 +4,7 @@
     ref="dataTable"
     :data="tableData"
     :height="height"
-    empty-text=""
+    empty-text=" "
     border
     @header-dragend="dragend"
     @sort-change="tableDataSort"
@@ -14,11 +14,12 @@
       :resizable="false"
       align="center"
       type="selection"
+      :selectable="checkSelectable"
       width="55">
     </el-table-column>
     <el-table-column
       v-for="(item, index) in customTableTitles"
-      :key="`col-${index}`"
+      :key="item.prop+index"
       :fixed="item.fixed"
       :label="item.label"
       :min-width="`${item.minWidth}`"
@@ -43,7 +44,7 @@
         </template>
         <template v-else-if="item.prop === 'lastLoginTime'">
           <template v-if="scope.row[item.prop]">
-            {{dateFormatByAppearance(scope.row[item.prop])}}
+            {{dateFormatByAppearance(scope.row[item.prop]) || '-'}}
           </template>
           <template v-else>
             <span>-</span>
@@ -54,37 +55,19 @@
               v-if="scope.row.id"
               v-model="scope.row.status"
               active-value="1"
-                  :disabled="(scope.row.username === loginName) || (scope.row.username==='admin' && scope.row.id==1) "
+              :disabled="(scope.row.username === loginName) || (scope.row.username==='admin' && scope.row.id===1) || scope.row.buildIn === 1"
               inactive-value="0"
               @change="()=>{statusChange(scope.row)}">
           </el-switch>
         </template>
-        <span v-else>{{scope.row[item.prop]}}</span>
+        <span v-else>{{scope.row[item.prop] || '-'}}</span>
       </template>
     </el-table-column>
-    <el-table-column
-      :resizable="false"
-      :width="operationWidth"
-      fixed="right">
-      <template #header>
-        <div class="table-operation-title">{{$t('overall.option')}}</div>
-      </template>
-      <template #default="scope">
-        <div class="table-operation-items">
-          <button class="table-operation-item" @click="tableOperation(['edit', scope.row])"><i class="cn-icon cn-icon-edit"></i></button>
-          <el-dropdown size="medium" trigger="hover" @command="tableOperation">
-            <div class="table-operation-item table-operation-item--more">
-              <i class="cn-icon cn-icon-more-arrow-down"></i>
-            </div>
-            <template #dropdown>
-              <el-dropdown-menu >
-                <el-dropdown-item :command="['delete', scope.row]" :disabled="scope.row.id === 1"><i class="cn-icon cn-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
-              </el-dropdown-menu>
-            </template>
-          </el-dropdown>
+    <template v-slot:empty >
+      <div class="table-no-data" v-if="isNoData">
+        <div class="table-no-data__title">{{ $t('npm.noData') }}</div>
       </div>
     </template>
-    </el-table-column>
   </el-table>
 </template>
 
@@ -95,6 +78,12 @@ import { storageKey } from '@/utils/constants'
 
 export default {
   name: 'userTable',
+  props: {
+    isNoData: {
+      type: Boolean,
+      default: false
+    }
+  },
   mixins: [table],
   data () {
     return {
@@ -167,6 +156,10 @@ export default {
         }
         this.$emit('reload')
       })
+    },
+    // 禁止勾选buildIn为1的项，即禁止修改、删除admin的账号
+    checkSelectable (row) {
+      return row.buildIn !== 1
     }
   }
 }

src/components/table/report/ReportTable.vue

@@ -6,8 +6,8 @@
         :data="tableData"
         :height="height"
         :expand-row-keys="expandedIds"
-        :empty-text="$t('npm.noData')"
         border
+        empty-text=" "
         tooltip-effect="light"
         :row-key="(row) => { return row.id }"
         :reserve-selection="true"
@@ -96,8 +96,8 @@
           width="30">
       </el-table-column>
       <el-table-column
-          v-for="(item, index) in customTableTitles"
-          :key="`col-${index}`"
+          v-for="item in customTableTitles"
+          :key="item.prop"
           :fixed="item.fixed"
           :label="item.label"
           :min-width="`${item.minWidth}`"
@@ -117,9 +117,7 @@
             {{ handleTimeRange(scope.row) }}
           </span>
           <span v-else-if="item.prop === 'categoryId'">
-            <span v-for="(item, i) in categoryList" :key="i">
-              <span v-if="scope.row.categoryId === item.id">{{ item.name }}</span>
-            </span>
+            <span>{{ getCategoryName(scope.row.categoryId) }}</span>
           </span>
           <span v-else-if="item.prop === 'timePlan'">
             <template v-if="scope.row.config && scope.row.config.isScheduler === 0">
@@ -188,24 +186,13 @@
           <span v-else>{{ scope.row[item.prop] || '-' }}</span>
         </template>
       </el-table-column>
-      <el-table-column
-          :resizable="false"
-          :width="operationWidth"
-          fixed="right">
-        <template #header>
-          <div class="table-operation-title">{{ $t('overall.option') }}</div>
-        </template>
-        <template #default="scope">
-          <div class="table-operation-items">
-            <button class="table-operation-item" @click="tableOperation(['edit', scope.row])"><i
-                class="cn-icon cn-icon-bianji"></i></button>
-            <button class="table-operation-item" @click="tableOperation(['delete', scope.row])"><i
-                class="cn-icon cn-icon-shanchu"></i></button>
+      <template v-slot:empty >
+        <div class="table-no-data" v-if="isNoData">
+          <div class="table-no-data__title">{{ $t('npm.noData') }}</div>
         </div>
       </template>
-      </el-table-column>
     </el-table>
-    <div class="table-operation-all">
+<!--    <div class="table-operation-all">
       <el-checkbox v-model="checkboxAll" :indeterminate="isIndeterminate" @change="selectAll(tableData)"></el-checkbox>
       <div class="table-operation-all-span">
         <span>{{ $t('overall.all') }}</span>
@@ -216,7 +203,7 @@
           <span>{{ $t('report.batchDeletion') }}</span>
         </div>
       </div>
-    </div>
+    </div>-->
   </div>
 </template>
 
@@ -245,7 +232,11 @@ export default {
   props: {
     categoryList: Array,
     toolsLoading: Boolean,
-    categoryId: Number
+    categoryId: Number,
+    isNoData: {
+      type: Boolean,
+      default: false
+    }
   },
   inject: ['reload'],
   data () {
@@ -308,6 +299,7 @@ export default {
       loadingTableId: '',
       loadingPreviewId: '',
       downDataList: [],
+      disableEdit: false, // 编辑按钮是否不可用，当选择多条记录的时候你，编辑按钮不可用
       // pageObj: {
       //   pageNo: 1,
       //   pageSize: 20,
@@ -556,6 +548,12 @@ export default {
         })
         // this.selectIds = selectIds
       }
+      this.batchDeleteObjs = objs
+      if (objs.length > 1) {
+        this.disableEdit = true
+      } else {
+        this.disableEdit = false
+      }
     },
     /**
      * 全选按钮
@@ -574,6 +572,13 @@ export default {
         this.$refs.dataTable.clearSelection()
       }
 
+      this.batchDeleteObjs = objs
+      if (objs.length > 1) {
+        this.disableEdit = true
+      } else {
+        this.disableEdit = false
+      }
+
       // this.selectIds = selectIds
     },
     /**
@@ -662,7 +667,7 @@ export default {
             this.$message.error(response.msg)
           }
         })
-      })
+      }).catch(() => {})
     },
     pageJump (val) {
       this.pageObj.pageNo = val
@@ -761,6 +766,16 @@ export default {
         }
       }
       this.configCustom = str
+    },
+    getCategoryName (id) {
+      let name = '-'
+      for (let i = 0; i < this.categoryList.length; i++) {
+        if (id === this.categoryList[i].id) {
+          name = this.categoryList[i].name
+          break
+        }
+      }
+      return name
     }
   },
   beforeUnmount () {

src/components/table/setting/KnowledgeBaseTableForRow.vue

@@ -0,0 +1,185 @@
+<template>
+  <el-table
+        id="knowledgeBaseTable"
+        ref="dataTable"
+        :data="tableData"
+        :height="height"
+        border
+        empty-text=" "
+        @header-dragend="dragend"
+        @sort-change="tableDataSort"
+        @selection-change="selectionChange"
+    >
+      <el-table-column
+          :resizable="false"
+          align="center"
+          type="selection"
+          :selectable="selectable"
+          width="55">
+      </el-table-column>
+      <el-table-column
+          v-for="(item, index) in customTableTitles"
+          :key="`col-${index}`"
+          :fixed="item.fixed"
+          :label="item.label"
+          :min-width="`${item.minWidth}`"
+          :prop="item.prop"
+          :resizable="true"
+          :sort-orders="['ascending', 'descending']"
+          :sortable="item.sortable"
+          :width="`${item.width}`"
+          class="data-column"
+      >
+        <template #header>
+          <span class="data-column__span">{{item.label}}</span>
+          <div class="col-resize-area"></div>
+        </template>
+        <template  #default="scope" :column="item">
+          <template v-if="item.prop === 'name'" >
+            <template v-if="scope.row.i18n">
+              <span :title="scope.row[item.prop]">{{$t(scope.row.i18n)}}</span>
+            </template>
+            <template v-else-if="scope.row.name">
+              <span :title="scope.row[item.prop]">{{scope.row.name}}</span>
+            </template>
+            <template v-else>
+              <span>-</span>
+            </template>
+          </template>
+          <template v-else-if="item.prop === 'category'">
+            <span >{{tagCategoryText(scope.row[item.prop])}}</span>
+          </template>
+          <template v-else-if="item.prop === 'source'">
+            <span class="type-tag">{{tagSourceText(scope.row[item.prop])}}</span>
+          </template>
+          <template v-else-if="item.prop === 'opTime' || item.prop === 'ctime'">
+            <template v-if="scope.row[item.prop]">
+              {{dateFormatByAppearance(scope.row[item.prop])}}
+            </template>
+            <template v-else>
+              <span>-</span>
+            </template>
+          </template>
+          <template v-else-if="item.prop === 'cuser' || item.prop === 'uuser'">
+            <template v-if="scope.row[item.prop]">
+              {{scope.row[item.prop].username || '-'}}
+            </template>
+            <template v-else>
+              <span>-</span>
+            </template>
+          </template>
+          <template v-else-if="item.prop === 'description'">
+            <span class="list-desc" :title="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
+          </template>
+          <template v-else-if="item.prop === 'status'">
+            <el-switch class="card-enable"
+                       v-model="scope.row.status"
+                       active-color="#38ACD2"
+                       inactive-color="#C0CEDB"
+                       :active-value="1"
+                       :inactive-value="0"
+                       @change="changeStatus($event,scope.row.knowledgeId)"
+            >
+            </el-switch>
+          </template>
+          <span v-else>{{scope.row[item.prop] || '-'}}</span>
+        </template>
+      </el-table-column>
+      <template v-slot:empty >
+        <div class="table-no-data" v-if="isNoData">
+          <div class="table-no-data__title">{{ $t('npm.noData') }}</div>
+        </div>
+      </template>
+    </el-table>
+</template>
+
+<script>
+import table from '@/mixins/table'
+import { knowledgeBaseCategory, knowledgeBaseSource } from '@/utils/constants'
+export default {
+  name: 'KnowledgeBaseTableForRow',
+  props: {
+    isNoData: {
+      type: Boolean,
+      default: false
+    }
+  },
+  mixins: [table],
+  data () {
+    return {
+      tableTitle: [ // 原table列
+        {
+          label: 'ID',
+          prop: 'knowledgeId',
+          show: true,
+          width: 60,
+          sortable: 'custom'
+        }, {
+          label: this.$t('config.roles.name'),
+          prop: 'name',
+          minWidth: 100,
+          show: true,
+          sortable: 'custom'
+        }, {
+          label: this.$t('overall.category'),
+          prop: 'category',
+          width: 100,
+          show: true
+        }, {
+          label: this.$t('overall.source'),
+          prop: 'source',
+          width: 130,
+          show: true
+        }, {
+          label: this.$t('overall.remark'),
+          prop: 'description',
+          minWidth: 150,
+          show: true
+        },
+        {
+          label: this.$t('overall.createdBy'),
+          prop: 'opUser',
+          show: false
+        },
+        {
+          label: this.$t('config.user.createTime'),
+          prop: 'ctime',
+          show: false,
+          sortable: 'custom'
+        },
+        {
+          label: this.$t('overall.updatedBy'),
+          prop: 'uuser',
+          show: false
+        },
+        {
+          label: this.$t('overall.updateTime'),
+          prop: 'opTime',
+          show: true,
+          sortable: 'custom'
+        },
+        {
+          label: this.$t('knowledge.status'),
+          prop: 'status',
+          show: true,
+          minWidth: 40
+        }
+      ]
+    }
+  },
+  computed: {
+    tagCategoryText () {
+      return function (type) {
+        const t = knowledgeBaseCategory.find(t => t.value === type)
+        return t ? t.name : ''
+      }
+    },
+    tagSourceText () {
+      return function (type) {
+        const t = knowledgeBaseSource.find(t => t.value === type)
+        return t ? t.name : ''
+      }
+    }
+  }
+}
+</script>

src/components/table/setting/knowledgeBaseTableForCard.vue

@@ -0,0 +1,168 @@
+<template>
+  <el-checkbox-group v-model="checkList" v-if="!isNoData">
+    <div @click="isSelectedStatus && data.isBuiltIn !== 1 && clickCard(data,$event)"  @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)" v-for="data in tableData" :key="data.knowledgeId" class="card-item"  :class="data.isSelected ? 'card-selected' : ''">
+      <div class="card-content">
+        <div class="card-title">
+          <div class="card-title-name" :title="data.name">{{data.name}}</div>
+          <div class="card-title-more">
+            <span v-show="!isSelectedStatus && data.showMore && data.isBuiltIn !== 1"><i class="cn-icon cn-icon-more-dark" @mouseenter="mouseenterMore(data)" test-id="mouseenter-dark"></i></span>
+            <div class="card-operate" v-show="!isSelectedStatus && data.moreOptions" @mouseleave="mouseleaveMore(data)">
+              <div class="card-title-more-edit" @click="edit(data.knowledgeId)" >{{$t('overall.edit')}}</div>
+              <div class="card-title-more-delete" @click="del(data)" >{{$t('overall.delete')}}</div>
+            </div>
+            <el-checkbox @click.stop="" :disabled="data.isBuiltIn === 1" @change="(val) => {checkboxStatusChange(val,data)}" style="position: absolute;right: -12px;" v-if="isSelectedStatus" :key="data.knowledgeId" :label="data"><br></el-checkbox>
+
+          </div>
+        </div>
+        <div class="card-id">ID:{{data.knowledgeId}}</div>
+        <div class="card-desc" :title="data.description">{{data.description?data.description:'—'}}</div>
+      </div>
+      <div class="card-operate__footer">
+        <div class="card-type">
+          <div class="card-category">{{tagCategoryText(data.category)}}</div>
+          <div class="card-source">{{tagSourceText(data.source)}}</div>
+        </div>
+        <el-switch class="card-enable"
+                   v-model="data.status"
+                   active-color="#38ACD2"
+                   inactive-color="#C0CEDB"
+                   :active-value="1"
+                   :inactive-value="0"
+                   @change="changeStatus($event,data.knowledgeId)"
+        >
+        </el-switch>
+      </div>
+    </div>
+  </el-checkbox-group>
+  <div class="table-no-data" v-else="isNoData">
+    <div class="table-no-data__title">{{ $t('npm.noData') }}</div>
+  </div>
+</template>
+
+<script>
+import table from '@/mixins/table'
+import { knowledgeBaseCategory, knowledgeBaseSource } from '@/utils/constants'
+export default {
+  name: 'knowledgeBaseTableForCard',
+  mixins: [table],
+  props: {
+    isNoData: {
+      type: Boolean,
+      default: false
+    },
+    isSelectedStatus: {
+      type: Boolean
+    }
+  },
+  data () {
+    return {
+      tableTitle: [],
+      checkList: []
+    }
+  },
+  methods: {
+    clickCard (data, event) {
+      if (data.isSelected) { // 原来为选中，当前点击后未选中
+        const index = this.checkList.indexOf(data)
+        if (index > -1) {
+          this.checkList.splice(index, 1)
+        }
+      } else {
+        const index = this.checkList.indexOf(data)
+        if (index === -1) {
+          this.checkList.push(data)
+        }
+      }
+      const val = !data.isSelected
+      data.isSelected = val
+      this.$emit('checkboxStatusChange', val, data)
+    },
+    checkboxStatusChange (val, data) {
+      data.isSelected = val
+      this.$emit('checkboxStatusChange', val, data)
+    },
+    showSelect () {
+      // this.isSelectedStatus = true
+    },
+    hideSelect () {
+      // this.isSelectedStatus = false
+    },
+    clearSelect () {
+      this.$nextTick(() => {
+        this.checkList = []
+        if (this.tableData && this.tableData.length > 0) {
+          this.tableData.forEach(data => {
+            data.isSelected = false
+          })
+        }
+      })
+    },
+    mouseenterMore (card) {
+      this.tableData.forEach(t => {
+        if (t.knowledgeId === card.knowledgeId) {
+          t.moreOptions = true
+        }
+      })
+    },
+    mouseleaveMore (card) {
+      this.tableData.forEach(t => {
+        if (t.knowledgeId === card.knowledgeId) {
+          t.moreOptions = false
+        }
+      })
+    },
+    mouseenter (card) {
+      this.tableData.forEach(t => {
+        if (t.knowledgeId === card.knowledgeId) {
+          t.showMore = true
+        }
+      })
+    },
+    mouseleave (card) {
+      this.tableData.forEach(t => {
+        if (t.knowledgeId === card.knowledgeId) {
+          t.showMore = false
+          t.moreOptions = false
+        }
+      })
+    },
+    del (data) {
+      this.$emit('delete', data)
+    },
+    edit (id) {
+      const pageNo = this.$router.currentRoute.value.query.pageNo
+      const listMode = this.$router.currentRoute.value.query.listMode
+      this.$router.push({
+        path: '/knowledgeBase/edit',
+        query: {
+          t: +new Date(),
+          pageNoForTable: pageNo || 1,
+          id: id,
+          listMode: listMode
+        }
+      })
+    }
+  },
+  mounted () {
+    this.tableData.forEach(item => {
+      item.showMore = false
+      item.moreOptions = false
+    })
+  },
+  computed: {
+    tagCategoryText () {
+      return function (type) {
+        const t = knowledgeBaseCategory.find(t => t.value === type)
+        return t ? t.name : ''
+      }
+    },
+    tagSourceText () {
+      return function (type) {
+        const t = knowledgeBaseSource.find(t => t.value === type)
+        return t ? t.name : ''
+      }
+    }
+
+  }
+}
+</script>

src/indexedDB/index.js

@@ -1,8 +1,19 @@
 import { dbName, dbGeoDataTableName, dbDrilldownTableConfig } from '@/utils/constants'
 import Dexie from 'dexie'
+/* https://dexie.org/ */
 
-export const db = new Dexie(dbName)
-db.version(2).stores({
+const db = new Dexie(dbName)
+db.version(3).stores({
   [dbGeoDataTableName]: '++name, geo',
-  [dbDrilldownTableConfig]: '++id, config'
+  [dbDrilldownTableConfig]: '++id, config',
+  test: '++id, name'
 })
+function selectTable (tableName) {
+  return db[tableName]
+}
+
+const indexedDBUtils = {
+  db,
+  selectTable
+}
+export default indexedDBUtils

src/mixins/common.js

@@ -1,6 +1,6 @@
 import { hasButton } from '@/permission'
 import { dateFormatByAppearance } from '@/utils/date-util'
-import { storageKey } from '@/utils/constants'
+import { commonErrorTip } from '@/utils/constants'
 export default {
   data () {
     return {
@@ -21,13 +21,25 @@ export default {
         query: false
       },
       timeout: null,
-      debounceFunc: null
+      debounceFunc: null,
+      // 是否正在单元测试
+      isUnitTesting: false
     }
   },
   methods: {
     hasButton (code) {
       return hasButton(this.$store.getters.buttonList, code)
     },
+    errorMsgHandler (axiosError) {
+      if (axiosError.response) {
+        if (axiosError.response.data) {
+          return axiosError.response.data.message || commonErrorTip
+        }
+      } else if (axiosError.message) {
+        return axiosError.message
+      }
+      return commonErrorTip
+    },
     isBuiltIn (row) {
       return (row.buildIn && row.buildIn === 1) || (row.builtIn && row.builtIn === 1)
     },

src/mixins/data-list.js

@@ -5,10 +5,12 @@ import { ref } from 'vue'
 import pagination from '@/components/common/Pagination'
 import axios from 'axios'
 import { api } from '@/utils/api'
+import Loading from '@/components/common/Loading'
 
 export default {
   components: {
-    pagination
+    pagination,
+    Loading
   },
   data () {
     return {
@@ -20,11 +22,11 @@ export default {
       pageObj: { // 分页对象
         pageNo: 1,
         pageSize: defaultPageSize,
-        total: ''
+        total: null// total为0时，elment分页组件pagination,修改当前页无效。修改为null即可解决此问题
       },
       /* 工具参数 */
       tools: {
-        loading: true, // 是否显示table加载动画
+        // loading: true, // 是否显示table加载动画
         customTableTitle: [] // 自定义列工具的数据
       },
       mainTableHeight: position.tableHeight.normal, // 主列表table高度
@@ -37,7 +39,11 @@ export default {
       tableData: [],
       scrollbarWrap: null,
       delFlag: false,
-      operationWidth: '165' // 操作列宽
+      disableEdit: true, // 编辑按钮是否不可用，当选择多条记录的时候，编辑按钮不可用
+      disableDelete: true,
+      operationWidth: '165', // 操作列宽
+      loading: true,
+      isNoData: false
     }
   },
   methods: {
@@ -72,29 +78,66 @@ export default {
           break
       }
     },
-    selectionChange (objs) {
-      this.batchDeleteObjs = objs
+    toggleLoading (loading) {
+      this.loading = loading
     },
-    getTableData (params) {
+    selectionChange (objs) {
+      this.batchDeleteObjs = []
+      objs.forEach(obj => {
+        const delObj = this.batchDeleteObjs.find(item => item.id === obj.id)
+        if (delObj === undefined) {
+          this.batchDeleteObjs.push(obj)
+        }
+      })
+      if (this.batchDeleteObjs.length == 1) {
+        this.disableEdit = false
+      } else {
+        this.disableEdit = true
+      }
+      if (this.batchDeleteObjs.length >= 1) {
+        this.disableDelete = false
+      } else {
+        this.disableDelete = true
+      }
+    },
+    getTableData (params, isAll, isClearType) {
+      if (isAll) {
+        this.searchLabel = null
+      } else if (isClearType) {
+        // this.searchLabel.tagType = ''
+        this.searchLabel.type = ''// 换新接口需要修改的属性名称
+      }
       if (params) {
         this.searchLabel = { ...this.searchLabel, ...params }
       }
       this.searchLabel = { ...this.searchLabel, ...this.pageObj }
-      this.tools.loading = true
+      //this.tableData = []
+      this.isNoData = false
+      this.toggleLoading(true)
       delete this.searchLabel.total
       let listUrl = this.url
       if (this.listUrl) {
         listUrl = this.listUrl
       }
       get(listUrl, this.searchLabel).then(response => {
-        this.tools.loading = false
         if (response.code === 200) {
-          for (let i = 0; i < response.data.list.length; i++) {
-            response.data.list[i].status = response.data.list[i].status + ''
-          }
           this.tableData = response.data.list
           this.pageObj.total = response.data.total
-          // TODO 回到顶部
+        } else {
+          console.error(response)
+          this.isNoData = true
+          if (response.message) {
+            this.$message.error(response.message)
+          } else {
+            this.$message.error('Something went wrong...')
+          }
+        }
+      }).finally(() => {
+        this.toggleLoading(false)
+        if (!this.tableData || this.tableData.length === 0) {
+          this.isNoData = true
+        } else {
+          this.isNoData = false
         }
       })
     },
@@ -113,7 +156,49 @@ export default {
             this.$message.error(response.msg)
           }
         })
+      }).catch(e => {})
+    },
+    delSelectionChange () {
+    },
+    delBatch () {
+      const ids = []
+      if (this.batchDeleteObjs && this.batchDeleteObjs.length > 0) {
+        this.batchDeleteObjs.forEach(item => {
+          ids.push(item.id)
         })
+      }
+      if (ids.length === 0) {
+        this.$alert(this.$t('tip.pleaseSelect'), {
+          confirmButtonText: this.$t('tip.yes'),
+          type: 'warning'
+        }).catch(() => {})
+      } else {
+        this.$confirm(this.$t('tip.confirmDelete'), {
+          confirmButtonText: this.$t('tip.yes'),
+          cancelButtonText: this.$t('tip.no'),
+          type: 'warning'
+        }).then(() => {
+          this.toggleLoading(true)
+          axios.delete(this.url + '?ids=' + ids).then(response => {
+            if (response.data.code === 200) {
+              this.delFlag = true
+              this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
+              this.getTableData()
+            } else {
+              this.$message.error(response.data.message)
+            }
+          }).finally(() => {
+            this.toggleLoading(false)
+          })
+        }).catch(() => {})
+          .finally(() => {
+            if (this.isSelectedStatus != undefined) {
+              this.isSelectedStatus = false
+              this.disableDelete = true
+              this.batchDeleteObjs = []
+            }
+          })
+      }
     },
     newObject () {
       return JSON.parse(JSON.stringify(this.blankObject))
@@ -153,6 +238,21 @@ export default {
         }
       })
     },
+    editSelectRecord () {
+      if (this.batchDeleteObjs.length === 0) {
+        this.$alert(this.$t('tip.pleaseSelectForEdit'), {
+          confirmButtonText: this.$t('tip.yes'),
+          type: 'warning'
+        }).catch(() => {})
+      } else {
+        get(`${this.url}/${this.batchDeleteObjs[0].id}`).then(response => {
+          if (response.code === 200) {
+            this.object = response.data
+            this.rightBox.show = true
+          }
+        })
+      }
+    },
     copy (u) {
       this.object = { ...u, name: 'Copy from ' + u.name, id: '' }
       this.rightBox.show = true
@@ -248,7 +348,9 @@ export default {
     },
     dragend () {
       this.$nextTick(() => {
+        if (this.$refs.dataTable && this.$refs.dataTable.$refs.dataTable) {
           this.$refs.dataTable.$refs.dataTable.doLayout()
+        }
       })
     },
     tableDataSort (orderBy) {
@@ -257,6 +359,8 @@ export default {
     },
     search (params) {
       this.pageObj.pageNo = 1
+      delete this.searchLabel.category
+      delete this.searchLabel.source
       this.getTableData(params)
     },
     getTimeString () {
@@ -298,16 +402,31 @@ export default {
     }
     let localStorageTableTitle = localStorage.getItem(storageKey.tableTitle + '-' + localStorage.getItem(storageKey.username) + '-' + this.tableId)
     localStorageTableTitle = localStorageTableTitle ? JSON.parse(localStorageTableTitle) : this.$refs.dataTable.tableTitle
-    this.tools.customTableTitle = this.$refs.dataTable.tableTitle.map((item, index) => { // 修复切换中英文的问题
-      if (localStorageTableTitle[index]) {
-        item.show = localStorageTableTitle[index].show
+    // this.tools.customTableTitle = this.$refs.dataTable.tableTitle.map((item, index) => { // 修复切换中英文的问题
+    //   if (localStorageTableTitle[index]) {
+    //     item.show = localStorageTableTitle[index].show
+    //   }
+    //   return item
+    // })
+
+    // 不够优美，后续修改
+    // 为了避免缓存里的label在切换中英文时不一致，因为在拖拽后，键值不一致了，故根据prop匹配来修改label
+    for (let i = 0; i < localStorageTableTitle.length; i++) {
+      for (let j = 0; j < this.tools.customTableTitle.length; j++) {
+        if (localStorageTableTitle[i].prop === this.tools.customTableTitle.prop) {
+          localStorageTableTitle[i].label = this.tools.customTableTitle.label
+          break
         }
-      return item
-    })
+      }
+    }
+    this.tools.customTableTitle = localStorageTableTitle
     if (localStorageTableTitle && (localStorageTableTitle.length > this.$refs.dataTable.tableTitle.length)) {
       const arr = localStorageTableTitle.splice(this.$refs.dataTable.tableTitle.length, localStorageTableTitle.length)
       this.tools.customTableTitle = this.tools.customTableTitle.concat(arr)
     }
     // this.getTableData()
+  },
+  unmounted () {
+    this.isNoData = false
   }
 }

src/mixins/table.js

@@ -1,4 +1,7 @@
-import { chartTableOrderOptionsMapping } from '@/utils/constants'
+import { chartTableOrderOptionsMapping, storageKey } from '@/utils/constants'
+import { getWidthByLanguage } from '@/utils/tools'
+import { put, patch } from '@/utils/http'
+import { api } from '@/utils/api'
 export default {
   props: {
     tableData: {
@@ -20,6 +23,11 @@ export default {
   },
   computed: {
     customTableTitles () {
+      if (this.customTableTitle) {
+        // 设置列宽，避免分辨率过小时，文本显示省略号
+        this.getTableWidth(this.customTableTitle)
+      }
+
       return this.customTableTitle.filter(item => item.show)
     }
   },
@@ -27,18 +35,107 @@ export default {
     customTableTitle (n) {
       if (n) {
         setTimeout(() => {
+          if (this.$refs.dataTable) {
             this.$refs.dataTable.doLayout()
-        }, 100)
+          }
+        }, 200)
+      }
+    },
+    tableData: {
+      handler (n) {
+        if (this.tableData && this.tableData.length > 0) {
+          // this.isInit = false
+        }
       }
     }
   },
   data () {
     return {
       operationWidth: '165', // 操作列宽
-      show: true
+      show: true,
+      isNoData: false
     }
   },
   methods: {
+    toggleLoading (loading) {
+      this.$emit('toggleLoading', loading)
+    },
+    getTableWidth (list) {
+      if (list && list.length > 0) {
+        const language = localStorage.getItem(storageKey.language)
+        // 文字所占宽度，一个英文字母占7px，中文16px
+        let num = getWidthByLanguage(language) || 7
+        if (language !== 'cn') {
+          num = num + 1 // 最后一位加空格
+        }
+
+        list.forEach((item, index) => {
+          if (item.label && item.label !== 'IP') {
+            let tempLength = 0
+
+            if (item.label.indexOf(' ') > -1) {
+              let tempArr = []
+              tempArr = item.label.split(' ')
+              tempLength = Math.max(...tempArr.map(el => el.length))
+            } else {
+              tempLength = item.label.length
+            }
+
+            // 宽度 = 最小不可拆分单词文字宽度 + 22的padding边距
+            const newWidth = (num * tempLength) + 22
+
+            // 为了避免没有minWidth这种情况
+            if (!item.minWidth) {
+              item.minWidth = newWidth
+            }
+
+            // 排序最后一位一般是'操作'，或者是较长的字符，故不让其换行，宽度直接为字符宽度
+            if (index === list.length - 1) {
+              item.minWidth = (num * item.label.length) + 22
+            }
+
+            // 有排序的，额外添加24px的排序图标宽度
+            if (item.sortable) {
+              if (!item.initFlag) {
+                item.minWidth = item.minWidth + 32
+              }
+              // 避免customize多次点击save生成表格，导致width越来越大，保证初始化一次就确定宽度
+              item.initFlag = true
+            }
+
+            if (item.minWidth < newWidth) {
+              item.minWidth = newWidth
+            } else if (item.width < item.minWidth) {
+              item.width = item.minWidth
+            }
+          }
+        })
+      }
+    },
+    changeStatus (status, id) {
+      if (id) {
+        patch(api.knowledgeBaseEnable, { list: [{ knowledgeId: id, status: status }] }).then(response => {
+          if (response.code === 200) {
+            this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+          } else {
+            console.error(response)
+            if (response.message) {
+              this.$message.error(response.message)
+            } else {
+              this.$message.error('Something went wrong...')
+            }
+          }
+          this.$emit('reload')
+        })
+      }
+    },
+    selectable (row, rowIndex) {
+      if (row.isBuiltIn === 1) {
+        return false
+      } else {
+        return true
+      }
+    },
     tableOperation ([command, row]) {
       switch (command) {
         default:
@@ -49,27 +146,16 @@ export default {
     selectionChange (objs) {
       this.$emit('selectionChange', objs)
     },
+    checkboxStatusChange (isCheck, data) {
+      this.$emit('checkboxStatusChange', isCheck, data)
+    },
     dragend () {
       this.$nextTick(() => {
         this.$refs.dataTable.doLayout()
       })
     },
     tableDataSort (item) {
-      let orderBy = ''
-      if (item.order === 'ascending') {
-        if (item.prop === 'lastTime') {
-          orderBy = chartTableOrderOptionsMapping[item.prop]
-        } else {
-          orderBy = item.prop
-        }
-      }
-      if (item.order === 'descending') {
-        if (item.prop === 'lastTime') {
-          orderBy = '-' + chartTableOrderOptionsMapping[item.prop]
-        } else {
-          orderBy = '-' + item.prop
-        }
-      }
+      const orderBy = (item.order === 'descending' ? '-' : '') + (item.prop ? (chartTableOrderOptionsMapping[item.prop] || item.prop) : '')
       this.$emit('orderBy', orderBy)
     }
   }

src/mock/entity.js

@@ -0,0 +1,469 @@
+import Mock from 'mockjs'
+const urlAndVersion = BASE_CONFIG.baseUrl + BASE_CONFIG.apiVersion
+const openMock = true
+if (openMock) {
+  Mock.mock(new RegExp(urlAndVersion + '/entity/detail/traffic/throughput.*'), 'get', function (requestObj) {
+    const titleList = ['totalBitsRate', 'inboundBitsRate', 'outboundBitsRate', 'internalBitsRate', 'throughBitsRate', 'other']
+    const arr = [{ type: 'Bits/s' }, { type: 'Packets/s' }, { type: 'Sessions/s' }]
+
+    const endTime = JSON.parse(getQuery(requestObj.url).endTime)
+    let step = 0
+    for (let i = 0; i < arr.length; i++) {
+      for (const j in titleList) {
+        let startTime = JSON.parse(getQuery(requestObj.url).startTime)
+        step = (endTime - startTime) / 100 // 每条数据的时间间隔
+
+        const values = []
+        let max = 2975
+        let min = 0
+        if (titleList[j] === 'totalBitsRate') {
+          max = 4462975
+          min = 1162975
+        }
+        for (let i = 0; i < 101; i++) {
+          const random = Math.floor(Math.random() * (max - min) + min)
+          values.push([startTime, random])
+          startTime += step
+        }
+
+        const newValues = JSON.parse(JSON.stringify(values))
+        const sortArr = newValues.sort((a, b) => a[1] - b[1])
+        const maxAnalysis = Math.floor(sortArr[sortArr.length - 1][1])
+        let avg = 0
+        let sum = 0
+        newValues.forEach((item) => {
+          sum += item[1]
+        })
+        avg = JSON.parse(sum / newValues.length)
+
+        const analysis = {
+          avg: avg,
+          max: maxAnalysis,
+          min: Math.floor(sortArr[0][1]),
+          p95: maxAnalysis * 0.95 // 模拟值，p95并未最大值的95%
+        }
+
+        // Metric为Packets/s时，没有other的tab选项
+        if (arr[i].type === 'Packets/s' && titleList[j] === 'other') {
+          analysis.avg = 0
+        }
+
+        if (arr[i].type === 'Sessions/s') {
+          // Metric为Sessions/s时，只有total选项，故total填充数据完毕终止循环，节省性能
+          arr[i].totalBitsRate = { values: values, analysis: analysis }
+          break
+        } else {
+          arr[i][titleList[j]] = { values: values, analysis: analysis }
+        }
+      }
+    }
+
+    return {
+      msg: 'success',
+      code: 200,
+      data: {
+        result: arr
+      }
+    }
+  })
+  Mock.mock(new RegExp(urlAndVersion + '/entity/detail/event/security.*'), 'get', function (requestObj) {
+    const result = [
+      {
+        eventId: '1298414830886991872',
+        securityType: 'command and control',
+        domain: null,
+        offenderIp: '213.186.33.5',
+        victimIp: '116.178.217.92',
+        offenderDomain: 'baidu.com',
+        victimDomain: 'mi.com',
+        eventSeverity: 'critical',
+        malwareName: 'NetWire RC',
+        cryptominingPool: null,
+        startTime: 1683186600,
+        durationMs: 300000,
+        endTime: 1683186900
+      },
+      {
+        eventId: '1298414830886991873',
+        securityType: 'command and control',
+        domain: null,
+        offenderIp: '213.186.33.5',
+        victimIp: '116.178.217.93',
+        offenderDomain: 'baidu.com',
+        victimDomain: 'mi.com',
+        eventSeverity: 'low',
+        malwareName: 'NetWire RC',
+        cryptominingPool: null,
+        startTime: 1683186600,
+        durationMs: 300000,
+        endTime: 1683186900
+      },
+      {
+        eventId: '1298414830886991873',
+        securityType: 'command and control',
+        domain: null,
+        offenderIp: '213.186.33.5',
+        victimIp: '116.178.217.93',
+        offenderDomain: 'baidu.com',
+        victimDomain: 'mi.com',
+        eventSeverity: 'low',
+        malwareName: 'NetWire RC',
+        cryptominingPool: null,
+        startTime: 1683186600,
+        durationMs: 300000,
+        endTime: 1683186900
+      },
+      {
+        eventId: '1298414830886991873',
+        securityType: 'command and control',
+        domain: null,
+        offenderIp: '213.186.33.5',
+        victimIp: '116.178.217.93',
+        offenderDomain: 'baidu.com',
+        victimDomain: 'mi.com',
+        eventSeverity: 'low',
+        malwareName: 'NetWire RC',
+        cryptominingPool: null,
+        startTime: 1683186600,
+        durationMs: 300000,
+        endTime: 1683186900
+      },
+      {
+        eventId: '1298414830886991873',
+        securityType: 'command and control',
+        domain: null,
+        offenderIp: '213.186.33.5',
+        victimIp: '116.178.217.93',
+        offenderDomain: 'baidu.com',
+        victimDomain: 'mi.com',
+        eventSeverity: 'low',
+        malwareName: 'NetWire RC',
+        cryptominingPool: null,
+        startTime: 1683186600,
+        durationMs: 300000,
+        endTime: 1683186900
+      },
+      {
+        eventId: '1298414830886991873',
+        securityType: 'command and control',
+        domain: null,
+        offenderIp: '213.186.33.5',
+        victimIp: '116.178.217.93',
+        offenderDomain: 'baidu.com',
+        victimDomain: 'mi.com',
+        eventSeverity: 'low',
+        malwareName: 'NetWire RC',
+        cryptominingPool: null,
+        startTime: 1683186600,
+        durationMs: 300000,
+        endTime: 1683186900
+      },
+      {
+        eventId: '1298414830886991873',
+        securityType: 'command and control',
+        domain: null,
+        offenderIp: '213.186.33.5',
+        victimIp: '116.178.217.93',
+        offenderDomain: 'baidu.com',
+        victimDomain: 'mi.com',
+        eventSeverity: 'low',
+        malwareName: 'NetWire RC',
+        cryptominingPool: null,
+        startTime: 1683186600,
+        durationMs: 300000,
+        endTime: 1683186900
+      }
+    ]
+
+    return {
+      msg: 'success',
+      code: 200,
+      data: {
+        result: result
+      }
+    }
+  })
+  Mock.mock(new RegExp(urlAndVersion + '/entity/detail/event/performance.*'), 'get', function (requestObj) {
+    const result = [
+      {
+        eventId: '1308078720390412288',
+        entityType: 'ip',
+        serverIp: '116.178.78.180',
+        domain: null,
+        appName: null,
+        eventSeverity: 'critical',
+        eventType: 'Http error',
+        startTime: 1683250500,
+        durationMs: 900000,
+        endTime: 1683251400
+      },
+      {
+        eventId: '1308078720390412289',
+        entityType: 'ip',
+        serverIp: '116.178.78.180',
+        domain: null,
+        appName: null,
+        eventSeverity: 'info',
+        eventType: 'Http error',
+        startTime: 1683250500,
+        durationMs: 900000,
+        endTime: 1683251400
+      }
+    ]
+
+    return {
+      msg: 'success',
+      code: 200,
+      data: {
+        result: result
+      }
+    }
+  })
+  Mock.mock(new RegExp(`${BASE_CONFIG.baseUrl}${BASE_CONFIG.apiVersion}/entity/detail/basic.*`), 'get', function (requestObj) {
+    const result = {
+      asn: {
+        asn: 'ASN',
+        organization: 'AS org'
+      },
+      location: {
+        country: 'China',
+        province: 'Hebei',
+        city: 'Langfang',
+        isp: 'an ISP'
+      },
+      categories: {
+        categoryName: '类别1',
+        categoryGroup: '类别组1',
+        reputationLevel: '1',
+        appCategory: '类别1',
+        appSubcategory: '子类别1',
+        appTechnology: '技术1',
+        appName: '名称1',
+        appRisk: '风险等级1',
+        appLongname: '全称1',
+        appDescription: '这是描述'
+      },
+      whois: {
+        expireDate: '23-12',
+        registrarName: '注册商',
+        registrantOrg: '注册机构',
+        registrantCountry: 'China',
+        createDate: '22-12',
+        email: '1@2.3'
+      }
+    }
+    return {
+      msg: 'success',
+      code: 200,
+      data: {
+        result: result
+      }
+    }
+  })
+  Mock.mock(new RegExp(`${BASE_CONFIG.baseUrl}${BASE_CONFIG.apiVersion}/entity/detail/kb/intelligence/tag.*`), 'get', function (requestObj) {
+    const result = {
+      malware: {
+        malwareName: 'malware'
+      },
+      darkweb: {
+        nodeType: 'nodeType'
+      },
+      psiphon3Ip: {
+        type: 1
+      },
+      userDefinedTags: [
+        {
+          id: 1,
+          tagValue: 'userTag1'
+        },
+        {
+          id: 2,
+          tagValue: 'userTag2'
+        },
+        {
+          id: 3,
+          tagValue: 'userTag3'
+        }
+      ]
+    }
+    return {
+      msg: 'success',
+      code: 200,
+      data: result
+    }
+  })
+  Mock.mock(new RegExp(`${BASE_CONFIG.baseUrl}${BASE_CONFIG.apiVersion}/entity/detail/kb/intelligence/list.*`), 'get', function (requestObj) {
+    const result = [
+      {
+        location: {
+          isp: 'dba Omsoft',
+          updateTime: 1685696510,
+          createTime: 1685696510,
+          isValid: 1
+        }
+      },
+      {
+        malware: {
+          threatType: 'command and control',
+          malwareName: 'IcedID',
+          malwareAlias: 'BokBot,IceID',
+          updateTime: 1685696510,
+          createTime: 1685696510,
+          isValid: 1
+        }
+      },
+      {
+        darkweb: {
+          nodeType: 'i2p',
+          updateTime: 1685696510,
+          createTime: 1685696510,
+          isValid: 1
+        }
+      },
+      {
+        psiphon3Ip: {
+          type: 1
+        }
+      },
+      {
+        userDefinedTag: {
+          id: 1,
+          tagValue: '门户网站',
+          updateTime: 1685696500,
+          createTime: 1685696500,
+          isValid: 1
+        }
+      },
+      {
+        userDefinedTag: {
+          id: 1,
+          tagValue: '用户tag',
+          updateTime: 1685696500,
+          createTime: 1685696500,
+          isValid: 1
+        }
+      }
+    ]
+    return {
+      msg: 'success',
+      code: 200,
+      data: {
+        result: result
+      }
+    }
+  })
+  Mock.mock(new RegExp(urlAndVersion + '/entity/detail/ip/relate/ports.*'), 'get', function (requestObj) {
+    const result = [
+      {
+        port: 80,
+        l7Protocol: 'HTTP'
+      },
+      {
+        port: 443,
+        l7Protocol: 'HTTPS'
+      },
+      {
+        port: 53,
+        l7Protocol: 'DNS'
+      }
+    ]
+
+    return {
+      msg: 'success',
+      code: 200,
+      data: {
+        result: result
+      }
+    }
+  })
+  Mock.mock(new RegExp(urlAndVersion + '/entity/detail/ip/relate/apps.*'), 'get', function (requestObj) {
+    const result = ['Wechat', 'baidu', 'Wechat', 'baidu', 'Wechat', 'baidu', 'Wechat']
+
+    return {
+      msg: 'success',
+      code: 200,
+      data: {
+        result: result
+      }
+    }
+  })
+  Mock.mock(new RegExp(urlAndVersion + '/entity/detail/ip/relate/domains.*'), 'get', function (requestObj) {
+    const result = ['-*.pangolin-sdk-toutiao.com', '-*.pangolin-sdk-toutiao.com', '-*.pangolin-sdk-toutiao.com', '-*.pangolin-sdk-toutiao.com']
+
+    return {
+      msg: 'success',
+      code: 200,
+      data: {
+        result: result
+      }
+    }
+  })
+  Mock.mock(new RegExp(urlAndVersion + '/entity/detail/app/relate/ips.*'), 'get', function (requestObj) {
+    const result = ['116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242']
+    return {
+      msg: 'success',
+      code: 200,
+      data: {
+        result: result
+      }
+    }
+  })
+  Mock.mock(new RegExp(urlAndVersion + '/entity/detail/app/relate/domains.*'), 'get', function (requestObj) {
+    const result = ['-*.pangolin-sdk-toutiao.com', '-*.pangolin-sdk-toutiao.com', '-*.pangolin-sdk-toutiao.com', '-*.pangolin-sdk-toutiao.com']
+
+    return {
+      msg: 'success',
+      code: 200,
+      data: {
+        result: result
+      }
+    }
+  })
+  Mock.mock(new RegExp(urlAndVersion + '/entity/detail/domain/relate/ips.*'), 'get', function (requestObj) {
+    const result = ['116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242', '116.178.70.242']
+    return {
+      msg: 'success',
+      code: 200,
+      data: {
+        result: result
+      }
+    }
+  })
+  Mock.mock(new RegExp(urlAndVersion + '/entity/detail/domain/relate/apps.*'), 'get', function (requestObj) {
+    const result = ['Wechat', 'baidu', 'Wechat', 'baidu', 'Wechat', 'baidu', 'Wechat']
+
+    return {
+      msg: 'success',
+      code: 200,
+      data: {
+        result: result
+      }
+    }
+  })
+  Mock.mock(new RegExp(urlAndVersion + '/entity/detail/domain/relate/fqdns.*'), 'get', function (requestObj) {
+    const result = ['-*.pangolin-sdk-toutiao.com', '-*.pangolin-sdk-toutiao.com', '-*.pangolin-sdk-toutiao.com', '-*.pangolin-sdk-toutiao.com']
+
+    return {
+      msg: 'success',
+      code: 200,
+      data: {
+        result: result
+      }
+    }
+  })
+}
+
+const getQuery = (url) => {
+  // str为？之后的参数部分字符串
+  const str = url.substr(url.indexOf('?') + 1)
+  // arr每个元素都是完整的参数键值
+  const arr = str.split('&')
+  // result为存储参数键值的集合
+  const result = {}
+  for (let i = 0; i < arr.length; i++) {
+    // item的两个元素分别为参数名和参数值
+    const item = arr[i].split('=')
+    result[item[0]] = item[1]
+  }
+  return result
+}

src/mock/index.js

@@ -1,3 +1,4 @@
 import './npm'
 import './linkMonitor'
 import './dns'
+import './entity'

src/mock/linkMonitor.js

@@ -114,7 +114,7 @@ if (openMock) {
     }
   })
 
-  Mock.mock(new RegExp(BASE_CONFIG.baseUrl + 'interface/linkMonitor/bigramAnalysis1.*'), 'get', function (requestObj) {
+  Mock.mock(new RegExp(BASE_CONFIG.baseUrl + 'interface/linkMonitor/bigramAnalysis.*'), 'get', function (requestObj) {
     const data = []
     const ingressLinkIds = ['256', '512', '768', '1024', '1280', '1536', '1792', '2048', '2304', '2816']
     const egressLinkIds = ['257', '513', '769', '1025', '1281', '1537', '1793', '2049', '2305', '2817']
@@ -132,7 +132,7 @@ if (openMock) {
     }
   })
 
-  Mock.mock(new RegExp(BASE_CONFIG.baseUrl + 'interface/linkMonitor/bigramNextHopAnalysis1.*'), 'get', function (requestObj) {
+  Mock.mock(new RegExp(BASE_CONFIG.baseUrl + 'interface/linkMonitor/bigramNextHopAnalysis.*'), 'get', function (requestObj) {
     const data = []
     const ingressLinkIds = ['西安', '太原', '西宁']
     const egressLinkIds = ['西安', '太原', '西宁']
@@ -150,7 +150,7 @@ if (openMock) {
     }
   })
 
-  Mock.mock(new RegExp(BASE_CONFIG.baseUrl + 'interface/linkMonitor/analysis1.*'), 'get', function (requestObj) {
+  Mock.mock(new RegExp(BASE_CONFIG.baseUrl + 'interface/linkMonitor/analysis.*'), 'get', function (requestObj) {
     const linkData = []
     for (let i = 0; i < 10; i++) {
       linkData.push({ linkId: 'Hundredgige' + (i + 1), egressBytes: Math.floor(Math.pow(1.3, i) * 1000000000), ingressBytes: Math.floor(Math.pow(1.5, i) * 1000000000) })
@@ -164,7 +164,7 @@ if (openMock) {
     }
   })
 
-  Mock.mock(new RegExp(BASE_CONFIG.baseUrl + 'interface/linkMonitor/nextHopAnalysis1.*'), 'get', function (requestObj) {
+  Mock.mock(new RegExp(BASE_CONFIG.baseUrl + 'interface/linkMonitor/nextHopAnalysis.*'), 'get', function (requestObj) {
     const linkData = [
       { linkDirection: '西安', egressBytes: 1024000000000, ingressBytes: 1224000000000 },
       { linkDirection: '太原', egressBytes: 102400000000, ingressBytes: 142400000000 },

src/permission.js

@@ -1,6 +1,5 @@
 import router from './router'
 import store from './store'
-import { ElMessage } from 'element-plus'
 import { getPermission } from '@/utils/api'
 import { loadGeoData } from '@/utils/tools'
 import axios from 'axios'
@@ -8,7 +7,7 @@ import { storageKey } from '@/utils/constants'
 import { loadI18n } from '@/i18n'
 
 const loginWhiteList = ['/login', '/'] // 免登陆白名单
-const permissionWhiteList = [...loginWhiteList, '/entityDetail'] // 权限白名单
+const permissionWhiteList = [...loginWhiteList] // 权限白名单
 
 router.beforeEach(async (to, from, next) => {
   if (to.path.indexOf('/login') == -1) {
@@ -18,6 +17,7 @@ router.beforeEach(async (to, from, next) => {
   loadGeoData()
   // 加载baseUrl
   if (!axios.defaults.baseURL) {
+    // eslint-disable-next-line no-undef
     axios.defaults.baseURL = BASE_CONFIG.baseUrl
   }
   if (localStorage.getItem(storageKey.token)) {
@@ -36,11 +36,12 @@ router.beforeEach(async (to, from, next) => {
         store.commit('setRoleList', roleList)
       }
       if (to.path) {
-        if (hasMenu(store.getters.menuList, to.path)) {
+        next()
+        /* if (hasMenu(store.getters.menuList, to.path)) {
           next()
         } else {
           ElMessage.error('No access') // TODO 国际化
-        }
+        } */
       }
     }
   } else {
@@ -80,7 +81,7 @@ export function hasMenu (menuList, route) {
 export function hasParam (url, param) {
   let hasParam = false
   let tempArr = url.split('?')
-  const query = {}
+  // const query = {}
   if (tempArr[1]) {
     tempArr = tempArr[1].split('&')
     tempArr.forEach(t => {

src/router/index.js

@@ -6,10 +6,6 @@ const routes = [
     path: '/login',
     component: () => import('@/Login')
   },
-  {
-    path: '/entityDetail',
-    component: () => import('@/views/entityExplorer/EntityDetail')
-  },
   {
     path: '/',
     component: () => import('@/components/layout/Home'),
@@ -21,12 +17,24 @@ const routes = [
       },
       {
         path: '/report/builtIn',
-        component: () => import('@/views/report/reportTest')
+        component: () => import('@/views/report/Report')
       },
       {
         path: '/entityExplorer',
         component: () => import('@/views/entityExplorer/EntityExplorer')
       },
+      {
+        path: '/entityDetail',
+        component: () => import('@/views/entityExplorer/EntityDetail')
+      },
+      {
+        path: '/entityGraph',
+        component: () => import('@/views/entityExplorer/EntityGraph')
+      },
+      {
+        path: '/detection',
+        redirect: '/detection/securityEvent'
+      },
       {
         path: '/detection/:typeName',
         component: () => import('@/views/detections/Index')
@@ -35,6 +43,18 @@ const routes = [
         path: '/businessLog/viewer',
         component: () => import('@/views/businessLog/Viewer')
       },
+      {
+        path: '/knowledgeBase',
+        component: () => import('@/views/setting/KnowledgeBase')
+      },
+      {
+        path: '/knowledgeBase/create',
+        component: () => import('@/views/setting/KnowledgeBaseForm')
+      },
+      {
+        path: '/knowledgeBase/edit',
+        component: () => import('@/views/setting/KnowledgeBaseForm')
+      },
       {
         name: 'Administration',
         path: '/administration',
@@ -51,30 +71,30 @@ const routes = [
             path: '/administration/role',
             component: () => import('@/views/administration/Roles')
           },
-          {
-            name: 'I18n',
-            path: '/administration/i18n',
-            component: () => import('@/views/administration/I18n')
-          },
           {
             name: 'OperationLog',
             path: '/administration/operationLog',
             component: () => import('@/views/administration/OperationLog')
           },
           {
-            name: 'GalaxyProxy',
-            path: '/administration/galaxyProxy',
-            component: () => import('@/views/administration/GalaxyProxy')
+            name: 'Appearance',
+            path: '/administration/appearance',
+            component: () => import('@/views/administration/Appearance')
+          }
+        ]
+      },
+      {
+        name: 'I18n',
+        path: '/i18n',
+        component: () => import('@/views/administration/I18n')
       },
       {
         name: 'Chart',
-            path: '/administration/chart',
+        path: '/chart',
         component: () => import('@/views/administration/Chart')
       }
     ]
   }
-    ]
-  }
 ]
 
 const router = createRouter({

src/store/index.js

@@ -1,7 +1,6 @@
 import { createStore } from 'vuex'
 import user from './modules/user'
 import panel from './modules/panel'
-import { storageKey } from '@/utils/constants'
 
 const store = createStore({
   modules: {
@@ -12,7 +11,8 @@ const store = createStore({
     return {
       i18n: false,
       showEntityTypeSelector: false, // 在entity explore页面时，控制header显示实体类型选择框
-      from: '' // entity type
+      from: '', // entity type
+      test: 'jest' // 用于单测的demo
     }
   },
   getters: {
@@ -24,6 +24,9 @@ const store = createStore({
     },
     entityName (state) {
       return state.entityName
+    },
+    getTest (state) {
+      return state.test
     }
   },
   mutations: {
@@ -37,6 +40,9 @@ const store = createStore({
     },
     showEntityTypeSelector (state, show) {
       state.showEntityTypeSelector = show
+    },
+    setTest (state, test) {
+      state.test = test
     }
   }
 })

src/store/modules/panel.js

@@ -59,7 +59,8 @@ const panel = {
     rangeEchartsData: {}, // 框选echarts图表
     routerHistoryList: [], // 路由跳转记录列表
     dnsQtypeMapData: [],
-    dnsRcodeMapData: []
+    dnsRcodeMapData: [],
+    chartTabList: null // chartTabs组件的tab状态点击列表，初始化为null方便原有逻辑计算
   },
   mutations: {
     setShowRightBox (state, flag) {
@@ -151,6 +152,9 @@ const panel = {
     },
     setRouterHistoryList (state, list) {
       state.routerHistoryList = list
+    },
+    setChartTabList (state, list) {
+      state.chartTabList = list
     }
   },
   getters: {
@@ -225,6 +229,9 @@ const panel = {
     },
     getRouterHistoryList (state) {
       return state.routerHistoryList
+    },
+    getChartTabList (state) {
+      return state.chartTabList
     }
   },
   actions: {
@@ -253,6 +260,9 @@ const panel = {
     },
     clearPanel (store) {
       store.commit('cleanPanel')
+    },
+    dispatchChartTabList (store, list) {
+      store.commit('setChartTabList', list)
     }
   }
 }

src/store/modules/user.js

@@ -5,7 +5,7 @@ import { ElMessage } from 'element-plus' // dependent on utc plugin
 import { storageKey, dbDrilldownTableConfig } from '@/utils/constants'
 import { getConfigVersion } from '@/utils/tools'
 import { api } from '@/utils/api'
-import { db } from '@/indexedDB'
+import indexedDBUtils from '@/indexedDB'
 
 const user = {
   state () {
@@ -92,7 +92,7 @@ const user = {
         if (res.code === 200 && res.page.list && res.page.list.length > 0) {
           // 从接口返回整体配置，再读取用户缓存，将对应条目覆盖，作为使用的配置
           const defaultConfigs = JSON.parse(res.page.list[0].cvalue)
-          await db[dbDrilldownTableConfig].put({
+          await indexedDBUtils.selectTable(dbDrilldownTableConfig).put({
             id: 'default',
             version: defaultConfigs.version,
             config: defaultConfigs.config
@@ -100,7 +100,7 @@ const user = {
           const userId = localStorage.getItem(storageKey.userId)
           const oldVersion = await getConfigVersion(userId)
           if (oldVersion !== defaultConfigs.version) {
-            db[dbDrilldownTableConfig].delete(userId)
+            indexedDBUtils.selectTable(dbDrilldownTableConfig).delete(userId)
           }
         }
       })

src/utils/api.js

@@ -7,6 +7,7 @@ import { get, post } from '@/utils/http'
 import axios from 'axios'
 import { sortByOrderNum } from '@/permission'
 import { storageKey } from '@/utils/constants'
+const apiVersion = BASE_CONFIG.apiVersion
 
 export const api = {
   // 系统相关
@@ -20,6 +21,7 @@ export const api = {
   login: '/sys/login',
   // user
   user: '/sys/user',
+  timezone: '/sys/timezones',
   // 获取配置
   config: '/sys/config',
   // role
@@ -33,6 +35,11 @@ export const api = {
   chartList: '/visual/chart/list',
   // galaxyProxy
   galaxyProxy: '/galaxy/setting',
+  // 知识库
+  knowledgeBase: BASE_CONFIG.apiVersion + '/knowledgeBase',
+  knowledgeBaseList: BASE_CONFIG.apiVersion + '/knowledgeBase/list',
+  knowledgeBaseEnable: BASE_CONFIG.apiVersion + '/knowledgeBase/status',
+  knowledgeBaseStatistics: BASE_CONFIG.apiVersion + '/knowledgeBase/statistics',
 
   // 报告相关
   reportJob: '/report/job',
@@ -215,13 +222,8 @@ export const api = {
     bigramNextHopAnalysis: '/interface/link/overview/bigramNextHopAnalysis',
     analysis: '/interface/link/overview/analysis',
     nextHopAnalysis: '/interface/link/overview/nextHopAnalysis',
-    // todo 以下几个接口因接口返回数据为空，故造模拟接口平替
-    bigramAnalysis1: 'interface/linkMonitor/bigramAnalysis1',
-    bigramNextHopAnalysis1: '/interface/linkMonitor/bigramNextHopAnalysis1',
     drilldownQuadrupleIngressAnalysis: '/interface/link/overview/drilldown/quadrupleIngressAnalysis',
-    drilldownQquadrupleEgressAnalysis: '/interface/link/overview/drilldown/quadrupleEgressAnalysis',
-    analysis1: '/interface/linkMonitor/analysis1',
-    nextHopAnalysis1: '/interface/linkMonitor/nextHopAnalysis1'
+    drilldownQquadrupleEgressAnalysis: '/interface/link/overview/drilldown/quadrupleEgressAnalysis'
   },
   dnsInsight: {
     recentEvents: '/interface/dnsInsight/recentEvents',
@@ -229,6 +231,28 @@ export const api = {
     totalTrafficAnalysis: '/interface/dns/overview/totalTrafficAnalysis',
     eventChart: '/interface/dnsInsight/eventChart',
     drilldownTrafficAnalysis: '/interface/dns/overview/drilldown/trafficAnalysis'
+  },
+  entity: {
+    throughput: apiVersion + '/entity/detail/traffic/throughput',
+    security: apiVersion + '/entity/detail/event/security',
+    performance: apiVersion + '/entity/detail/event/performance',
+    // 域名解析：ip相关app、domain
+    domainNameResolutionAboutAppsOfIp: apiVersion + '/entity/detail/ip/relate/apps',
+    domainNameResolutionAboutDomainsOfIp: apiVersion + '/entity/detail/ip/relate/domains',
+    // 域名解析：app相关ip、domain
+    domainNameResolutionAboutIpsOfApp: apiVersion + '/entity/detail/app/relate/ips',
+    domainNameResolutionAboutDomainsOfApp: apiVersion + '/entity/detail/app/relate/domains',
+    // 域名解析：domain相关ip、app、fqdn
+    domainNameResolutionAboutAppsOfDomain: apiVersion + '/entity/detail/domain/relate/apps',
+    domainNameResolutionAboutIpsOfDomain: apiVersion + '/entity/detail/domain/relate/ips',
+    domainNameResolutionAboutFQDNsOfDomain: apiVersion + '/entity/detail/domain/relate/fqdns',
+    // 开放端口：ip、domain、app相关
+    openPortOfIp: apiVersion + '/entity/detail/ip/relate/ports',
+    openPortOfDomain: apiVersion + '/entity/detail/domain/relate/ports',
+    openPortOfApp: apiVersion + '/entity/detail/app/relate/ports',
+    basicInfo: apiVersion + '/entity/detail/basic',
+    tags: apiVersion + '/entity/detail/kb/intelligence/tag',
+    informationAggregation: apiVersion + '/entity/detail/kb/intelligence/list'
   }
 }
 
@@ -318,11 +342,12 @@ export async function getI18n () {
 
 /* 获得原始的3611-2 json字符串数据 */
 export async function getIso36112JsonData (suffix) {
+  const url = `${window.location.protocol}//${window.location.host}/geojson/${suffix}.json`
   const request = new Promise(resolve => {
-    axios({
-      url: `${window.location.protocol}//${window.location.host}:${window.location.port}/geojson/${suffix}.json`
-    }).then(response => {
+    axios({ url }).then(response => {
       resolve(response.data || response || null)
+    }).catch(err => {
+      console.error(err)
     })
   })
   return await request

src/utils/date-util.js

@@ -41,9 +41,13 @@ export function getNowTime (interval) {
 export function rTime (date) {
   return window.$dayJs.tz(new Date(date)).format('MM-DD HH:mm')
 }
+// 日期转换为时间戳
+export function toTime (date) {
+  return new Date(date).getTime()
+}
 // 时间格式转换
 export function dateFormat (date, format = 'YYYY-MM-DD HH:mm:ss') {
-  let d = date
+  let d
   // date不是数字，则视为utc时区的时间字符串，例如2022-02-22 22:22
   if (isNaN(date)) {
     d = window.$dayJs(date).valueOf() + parseInt(localStorage.getItem(storageKey.timezoneLocalOffset)) * 3600000
@@ -89,6 +93,47 @@ export function timestampToList (time) {
   const m = date.getMinutes()
   const s = date.getSeconds()
 
-  const arr = [Y, M, D, H, m, s]
-  return arr
+  return [Y, M, D, H, m, s]
+}
+/**
+ * 返回浏览器本地时区和服务器时区的毫秒差
+ * @returns {number}
+ */
+export function millTimestampDiffFromTz () {
+  return parseInt(localStorage.getItem(storageKey.timezoneLocalOffset)) * 3600 * 1000 - window.$dayJs.tz().utcOffset() * 60 * 1000
+}
+/**
+ * echarts时间类型横坐标formatter
+ * @returns {String}
+ */
+export function xAxisTimeFormatter (value) {
+  const date = new Date(value - millTimestampDiffFromTz())
+  const dayStart = new Date(value - millTimestampDiffFromTz())
+  dayStart.setHours(0)
+  dayStart.setMinutes(0)
+  dayStart.setSeconds(0)
+  dayStart.setMilliseconds(0)
+  const hourStart = new Date(value - millTimestampDiffFromTz())
+  hourStart.setMinutes(0)
+  hourStart.setSeconds(0)
+  hourStart.setMilliseconds(0)
+  const HHmm = (date.getHours() < 10 ? `0${date.getHours()}` : date.getHours()) +
+    ':' +
+    (date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes())
+  // 如果是一天的开始
+  if (date.getTime() === dayStart.getTime()) {
+    return '{day|' + dayStart.getDate() + '}'
+  } else if (date.getTime() === hourStart.getTime()) {
+    return '{hour|' + HHmm + '}'
+  } else {
+    return HHmm
+  }
+}
+export const xAxisTimeRich = {
+  day: {
+    fontWeight: 'bold'
+  },
+  hour: {
+    fontWeight: 'bold'
+  }
 }

src/utils/http.js

@@ -142,6 +142,21 @@ export function put (url, params, headers) {
   })
 }
 
+export function patch (url, params, headers) {
+  return new Promise((resolve) => {
+    axios.patch(url, params, { headers: headers }).then(response => {
+      resolve(response.data, response)
+    }).catch(err => {
+      if (err.response) {
+        resolve(err.response.data)
+        console.error(err)
+      } else if (err.message) {
+        resolve(err.message)
+      }
+    })
+  })
+}
+
 export function del (url, params) {
   return new Promise((resolve) => {
     axios.delete(url, params).then(response => {

src/utils/regular.js

@@ -0,0 +1,65 @@
+// 正则表达式
+const regular = {
+  ipv4CIDR: /^(?:(?:[0-9]|[0-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}(?:[0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\/([1-9]|[1-2]\d|3[0-2])$/,
+  ipv4CIDRMask: /^(?:(?:[0-9]|[0-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}(?:[0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\/([0-9]|[1-2]\d|3[0-2])$/, // 掩码可以为0
+
+  // ipv6CIDR并可以配置任意范围  如ffff:ffff:ffff:ffff:ffff:ffff:ffff:ffff/0和::/0
+  ipv6CIDRA: /^(?:[0-9a-fA-F]{1,4}:){7}[0-9a-fA-F]{1,4}\/([0-9]|[1-9]\d|1[01]\d|12[0-8])$/,
+  ipv6CIDRB: /^((?:[0-9A-Fa-f]{1,4}(?::[0-9A-Fa-f]{1,4})*)?)::((?:[0-9A-Fa-f]{1,4}(?::[0-9A-Fa-f]{1,4})*)?)\/([0-9]|[1-9]\d|1[01]\d|12[0-8])$/,
+  ipv6CIDRC: /^(([\d|a-fA-F]{1,4}:){6}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)|::([\d|a−fA−F]1,4:)0,4((25[0−5]|2[0−4]\d|[01]?\d\d?)\.)3(25[0−5]|2[0−4]\d|[01]?\d\d?)|^([\d|a-fA-F]{1,4}:):([\d|a-fA-F]{1,4}:){0,3}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)|([\d|a−fA−F]1,4:)2:([\d|a−fA−F]1,4:)0,2((25[0−5]|2[0−4]\d|[01]?\d\d?)\.)3(25[0−5]|2[0−4]\d|[01]?\d\d?)|^([\d|a-fA-F]{1,4}:){3}:([\d|a-fA-F]{1,4}:){0,1}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)|([\d|a−fA−F]1,4:)4:((25[0−5]|2[0−4]\d|[01]?\d\d?)\.)3(25[0−5]|2[0−4]\d|[01]?\d\d?)|^([\d|a-fA-F]{1,4}:){7}[\d|a-fA-F]{1,4}|:((:[\d|a−fA−F]1,4)1,6|:)|^[\d|a-fA-F]{1,4}:((:[\d|a-fA-F]{1,4}){1,5}|:)|([\d|a−fA−F]1,4:)2((:[\d|a−fA−F]1,4)1,4|:)|^([\d|a-fA-F]{1,4}:){3}((:[\d|a-fA-F]{1,4}){1,3}|:)|([\d|a−fA−F]1,4:)4((:[\d|a−fA−F]1,4)1,2|:)|^([\d|a-fA-F]{1,4}:){5}:([\d|a-fA-F]{1,4})?|([\d|a−fA−F]1,4:)6:)\/([0-9]|[1-9]\d|1[01]\d|120-8])/,
+
+  ipv6CIDR: /^(([a-zA-Z]|[a-zA-Z][a-zA-Z0-9\-]*[a-zA-Z0-9])\.)*([A-Za-z]|[A-Za-z][A-Za-z0-9\-]*[A-Za-z0-9])$|^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*\/([1-9]{1}|[1-9]{1}[0-9]{1}|1[01][0-9]{1}|12[0-8]|128)$/,
+  ipv6Range: /^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$/,
+  ipv4Range: /^(\d{1}|[1-9]{1}\d{1}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1}|[1-9]{1}\d{1}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1}|[1-9]{1}\d{1}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1}|[1-9]{1}\d{1}|1\d\d|2[0-4]\d|25[0-5])$/,
+  ipv4: /^(25[0-5]|2[0-4]\d|[0-1]?\d?\d)(\.(25[0-5]|2[0-4]\d|[0-1]?\d?\d)){3}$/,
+  ipv6: /^([\da-fA-F]{1,4}:){6}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^::([\da-fA-F]{1,4}:){0,4}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:):([\da-fA-F]{1,4}:){0,3}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:){2}:([\da-fA-F]{1,4}:){0,2}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:){3}:([\da-fA-F]{1,4}:){0,1}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:){4}:((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:){7}[\da-fA-F]{1,4}$|^:((:[\da-fA-F]{1,4}){1,6}|:)$|^[\da-fA-F]{1,4}:((:[\da-fA-F]{1,4}){1,5}|:)$|^([\da-fA-F]{1,4}:){2}((:[\da-fA-F]{1,4}){1,4}|:)$|^([\da-fA-F]{1,4}:){3}((:[\da-fA-F]{1,4}){1,3}|:)$|^([\da-fA-F]{1,4}:){4}((:[\da-fA-F]{1,4}){1,2}|:)$|^([\da-fA-F]{1,4}:){5}:([\da-fA-F]{1,4})?$|^([\da-fA-F]{1,4}:){6}:$/,
+  // ipv4/ipv6
+  ip: /^((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:){6}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^::([\da-fA-F]{1,4}:){0,4}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:):([\da-fA-F]{1,4}:){0,3}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:){2}:([\da-fA-F]{1,4}:){0,2}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:){3}:([\da-fA-F]{1,4}:){0,1}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:){4}:((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:){7}[\da-fA-F]{1,4}$|^:((:[\da-fA-F]{1,4}){1,6}|:)$|^[\da-fA-F]{1,4}:((:[\da-fA-F]{1,4}){1,5}|:)$|^([\da-fA-F]{1,4}:){2}((:[\da-fA-F]{1,4}){1,4}|:)$|^([\da-fA-F]{1,4}:){3}((:[\da-fA-F]{1,4}){1,3}|:)$|^([\da-fA-F]{1,4}:){4}((:[\da-fA-F]{1,4}){1,2}|:)$|^([\da-fA-F]{1,4}:){5}:([\da-fA-F]{1,4})?$|^([\da-fA-F]{1,4}:){6}:$/,
+  port: /^([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/,
+  ipv6Serialize: function (ipv6) {
+    let splited = ipv6.split(':')
+    if (splited.length < 8) {
+      // 将""替换成对应数量的"0000"
+      const index = splited.indexOf('')
+      const temp = splited.slice(index + 1, splited.length)
+      const zero = []
+      for (let i = 0; i < (8 - splited.length + 1); i++) {
+        // 8-去掉""之后的长度,得到需要补齐的元素数量
+        zero.push('0000')
+      }
+      return splited = splited.slice(0, index).concat(zero).concat(temp)// 空间复杂度比较大了,
+    } else {
+      return ipv6
+    }
+  },
+  trans: function (ip) {
+    if (this.ipv6Serialize(ip) instanceof Array) {
+      const arr1 = this.ipv6Serialize(ip)
+      // 找到数组最后一项，然后转化为16进制的
+      const num = arr1[arr1.length - 1]
+      return parseInt((num), 16)
+    } else {
+      const arr1 = this.ipv6Serialize(ip).toUpperCase().split(':')
+      // 找到数组最后一项，然后转化为16进制的
+      const num = arr1[arr1.length - 1]
+      return parseInt((num), 16)
+    }
+  },
+  ipv6Reg: function (start, end) {
+    return this.trans(start) <= this.trans(end)
+  },
+
+  // ipv4对比大小 结束ip不能小于开始ip
+  // 比较两个ip的大小,如果大于，返回1，等于返回0，小于返回-1
+  compareIP4: function (ip) {
+    let e = ip; const t = /^[0-9]([0-9\.]+\d)?$/
+    let c
+    let num
+    e ? true ? (e = e.split('.'), e.length !== 4 ? (msgError('IP格式错误'), void 0) : (num = 256 * 256 * 256 * Number(e[0]) + 256 * 256 * Number(e[1]) + 256 * Number(e[2]) + Number(e[3]), num >>>= 0, c = num, void 0)) : (msgError('IP格式错误'), void 0) : (msgError('请输入IP'), void 0)  
+    return c
+  }
+}
+
+export {
+  regular
+}

src/utils/static-data.js

@@ -0,0 +1,460 @@
+/**
+ * @name: 静态数据模板
+ * @description: 用于存放引用到的静态数据，如表格列名称、echarts的legend名称等
+ * 如有使用 this 的，js文件里不识别 this，需要引入对应方法，如this.$t引入i18n，this.$route 引入route
+ * @author: newhome
+ * @date: 2023-03-16 17:26:49
+ */
+// 如有使用this的
+import i18n from '@/i18n'
+import { unitTypes } from '@/utils/constants'
+const _this = i18n.global
+_this.$t = _this.t
+
+// NpmTrafficLine折线图数据
+export const dataForNpmTrafficLine = {
+  tabs: [
+    {
+      name: _this.$t('network.total'),
+      show: true,
+      positioning: 0,
+      data: [],
+      unitType: 'number'
+    },
+    {
+      name: _this.$t('network.inbound'),
+      show: true,
+      positioning: 1,
+      data: [],
+      unitType: 'number'
+    },
+    {
+      name: _this.$t('network.outbound'),
+      show: true,
+      positioning: 2,
+      data: [],
+      unitType: 'number'
+    },
+    {
+      name: _this.$t('network.internal'),
+      show: true,
+      positioning: 3,
+      data: [],
+      unitType: 'number'
+    },
+    {
+      name: _this.$t('network.through'),
+      show: true,
+      positioning: 4,
+      data: [],
+      unitType: 'number'
+    },
+    {
+      name: _this.$t('network.other'),
+      show: true,
+      positioning: 5,
+      data: [],
+      unitType: 'number'
+    }
+  ],
+  npmQuantity: [
+    { name: _this.$t('networkAppPerformance.tcpConnectionEstablishLatency'), show: true, positioning: 0, data: [], unitType: unitTypes.time, index: 0 },
+    { name: _this.$t('networkAppPerformance.httpResponse'), show: true, positioning: 0, data: [], unitType: unitTypes.time, index: 1 },
+    { name: _this.$t('networkAppPerformance.sslResponseLatency'), show: true, positioning: 0, data: [], unitType: unitTypes.time, index: 2 },
+    { name: _this.$t('networkAppPerformance.packetLoss'), show: true, positioning: 0, data: [], unitType: unitTypes.percent, index: 3 },
+    { name: _this.$t('overall.packetRetrans'), show: true, positioning: 0, data: [], unitType: unitTypes.percent, index: 4 }
+  ],
+  metricOptions: [
+    { value: 'Bits/s', label: 'Bits/s' },
+    { value: 'Packets/s', label: 'Packets/s' },
+    { value: 'Sessions/s', label: 'Sessions/s' },
+    { value: 'establishLatencyMs', label: _this.$t('networkAppPerformance.tcpConnectionEstablishLatency') },
+    { value: 'httpResponseLatency', label: _this.$t('networkAppPerformance.httpResponse') },
+    { value: 'sslConLatency', label: _this.$t('networkAppPerformance.sslResponseLatency') },
+    { value: 'tcpLostlenPercent', label: _this.$t('networkAppPerformance.packetLoss') },
+    { value: 'pktRetransPercent', label: _this.$t('overall.packetRetrans') }
+  ]
+}
+
+export const dataForNetworkOverviewLine = {
+  options2: [
+    {
+      value: 'Average',
+      label: 'Average'
+    },
+    {
+      value: '95th Percentile',
+      label: '95th Percentile'
+    },
+    {
+      value: 'Maximum',
+      label: 'Maximum'
+    }
+  ],
+  tabsTemplate: [
+    {
+      analysis: {},
+      name: 'network.total',
+      class: 'total',
+      show: true,
+      invertTab: true,
+      positioning: 0,
+      data: [],
+      unitType: ''
+    },
+    {
+      analysis: {},
+      name: 'network.inbound',
+      class: 'inbound',
+      show: true,
+      invertTab: true,
+      positioning: 1,
+      data: [],
+      unitType: ''
+    },
+    {
+      analysis: {},
+      name: 'network.outbound',
+      class: 'outbound',
+      show: true,
+      invertTab: true,
+      positioning: 2,
+      data: [],
+      unitType: ''
+    },
+    {
+      analysis: {},
+      name: 'network.internal',
+      class: 'internal',
+      show: true,
+      invertTab: true,
+      positioning: 3,
+      data: [],
+      unitType: ''
+    },
+    {
+      analysis: {},
+      name: 'network.through',
+      class: 'through',
+      show: true,
+      invertTab: true,
+      positioning: 4,
+      data: [],
+      unitType: ''
+    },
+    {
+      analysis: {},
+      name: 'network.other',
+      class: 'other',
+      show: true,
+      invertTab: true,
+      positioning: 5,
+      data: [],
+      unitType: ''
+    }
+  ]
+}
+
+export const dataForLinkTrafficLine = {
+  options: [
+    {
+      value: 'Bits/s',
+      label: 'Bits/s'
+    },
+    {
+      value: 'Packets/s',
+      label: 'Packets/s'
+    }
+  ],
+  tabs: [
+    { analysis: {}, name: 'network.total', class: 'total', show: true, invertTab: true, positioning: 0, data: [], unitType: '' },
+    { analysis: {}, name: 'linkMonitor.ingress', class: 'ingress', show: true, invertTab: true, positioning: 1, data: [], unitType: '' },
+    { analysis: {}, name: 'linkMonitor.egress', class: 'egress', show: true, invertTab: true, positioning: 2, data: [], unitType: '' }
+  ]
+}
+
+export const dataForNpmLine = {
+  chartOptionLineData: [
+    { legend: _this.$t('network.total'), index: 0, invertTab: true, show: false, color: '#749F4D' },
+    { legend: _this.$t('network.inbound'), index: 1, invertTab: true, show: false, color: '#98709B' },
+    { legend: _this.$t('network.outbound'), index: 2, invertTab: true, show: false, color: '#E5A219' }
+  ],
+  npmLineColor: [
+    { legend: '', color: '#749F4D' },
+    { legend: '', color: '#98709B' },
+    { legend: '', color: '#E5A219' }
+  ]
+}
+
+export const dataForDnsTrafficLine = {
+  options1: [
+    {
+      value: 'Bits/s',
+      label: 'Bits/s'
+    },
+    {
+      value: 'Queries/s',
+      label: 'Queries/s'
+    }
+  ],
+  options2: [
+    {
+      value: 'Average',
+      label: 'Average'
+    },
+    {
+      value: '95th Percentile',
+      label: '95th Percentile'
+    },
+    {
+      value: 'Maximum',
+      label: 'Maximum'
+    }
+  ],
+  tabs: [
+    { analysis: {}, name: 'network.total', class: 'total', show: true, invertTab: true, positioning: 0, data: [], unitType: '' },
+    { analysis: {}, name: 'network.inbound', class: 'inbound', show: true, invertTab: true, positioning: 1, data: [], unitType: '' },
+    { analysis: {}, name: 'network.outbound', class: 'outbound', show: true, invertTab: true, positioning: 2, data: [], unitType: '' }
+  ]
+}
+
+export const dataForNpmEventsHeader = {
+  chartData: [
+    {
+      eventSeverity: 'critical',
+      count: '-',
+      index: 0
+    },
+    {
+      eventSeverity: 'high',
+      count: '-',
+      index: 1
+    },
+    {
+      eventSeverity: 'medium',
+      count: '-',
+      index: 2
+    },
+    {
+      eventSeverity: 'low',
+      count: '-',
+      index: 3
+    },
+    {
+      eventSeverity: 'info',
+      count: '-',
+      index: 4
+    }
+  ]
+}
+
+export const dataForNpmRecentEvents = {
+  customTableTitles: [
+    { label: 'network.severity', prop: 'eventSeverity' },
+    { label: 'network.entity', prop: 'eventKey' },
+    { label: 'detections.eventType', prop: 'eventType' }
+  ],
+  // 下钻后
+  customTableTitles1: [
+    { label: 'network.severity', prop: 'eventSeverity' },
+    { label: 'detections.eventType', prop: 'eventType' },
+    { label: 'detection.list.startTime', prop: 'startTime' }
+  ]
+}
+export const dataForNpmNetworkQuantity = {
+  npmNetworkName: [
+    { name: 'networkAppPerformance.tcpConnectionEstablishLatency' },
+    { name: 'networkAppPerformance.httpResponse' },
+    { name: 'networkAppPerformance.sslResponseLatency' },
+    { name: 'networkAppPerformance.packetLoss' },
+    { name: 'overall.packetRetrans' }
+  ]
+}
+export const columnList = [
+  {
+    name: 'entity_type',
+    type: 'string',
+    label: 'Entity type'
+  },
+  {
+    name: 'ip_addr',
+    type: 'string',
+    label: 'IP.Address'
+  },
+  {
+    name: 'ip_location_country',
+    type: 'string',
+    label: 'IP.Country'
+  },
+  {
+    name: 'ip_location_province',
+    type: 'string',
+    label: 'IP.Province'
+  },
+  {
+    name: 'ip_location_city',
+    type: 'string',
+    label: 'IP.City'
+  },
+  {
+    name: 'ip_asn',
+    type: 'string',
+    label: 'IP.ASN'
+  },
+  {
+    name: 'dns_server_role',
+    type: 'string',
+    label: 'IP.DNS server role'
+  },
+  {
+    name: 'dns_server_org',
+    type: 'string',
+    label: 'IP.DNS server organization'
+  },
+  {
+    name: 'dns_server_os',
+    type: 'string',
+    label: 'IP.Operating system'
+  },
+  {
+    name: 'dns_server_software',
+    type: 'string',
+    label: 'IP.DNS server software'
+  },
+  {
+    name: 'domain_name',
+    type: 'string',
+    label: 'Domain.Name'
+  },
+  {
+    name: 'domain_category',
+    type: 'string',
+    label: 'Domain.Category'
+  },
+  {
+    name: 'domain_category_group',
+    type: 'string',
+    label: 'Domain.Category group'
+  },
+  {
+    name: 'domain_reputation_level',
+    type: 'string',
+    label: 'Domain.Reputation'
+  },
+  {
+    name: 'domain_whois_email',
+    type: 'string',
+    label: 'Domain.Whois email'
+  },
+  {
+    name: 'domain_whois_name_servers',
+    type: 'string',
+    label: 'Domain.Whois nameserver'
+  },
+  {
+    name: 'domain_whois_registrar',
+    type: 'string',
+    label: 'Domain.Whois registrar'
+  },
+  {
+    name: 'domain_whois_org',
+    type: 'string',
+    label: 'Domain.Whois organization'
+  },
+  {
+    name: 'domain_whois_address',
+    type: 'string',
+    label: 'Domain.Whois address'
+  },
+  {
+    name: 'domain_whois_city',
+    type: 'string',
+    label: 'Domain.Whois city'
+  },
+  {
+    name: 'domain_whois_state',
+    type: 'string',
+    label: 'Domain.Whois state'
+  },
+  {
+    name: 'domain_whois_country',
+    type: 'string',
+    label: 'Domain.Whois country'
+  },
+  {
+    name: 'domain_icp_owner',
+    type: 'string',
+    label: 'Domain.ICP owner'
+  },
+  {
+    name: 'domain_icp_company_name',
+    type: 'string',
+    label: 'Domain.ICP company'
+  },
+  {
+    name: 'domain_icp_company_type',
+    type: 'string',
+    label: 'Domain.ICP company type'
+  },
+  {
+    name: 'domain_icp_site_license',
+    type: 'string',
+    label: 'Domain.ICP site license'
+  },
+  {
+    name: 'domain_icp_site_name',
+    type: 'string',
+    label: 'Domain.ICP site'
+  },
+  {
+    name: 'app_name',
+    type: 'string',
+    label: 'APP.Name'
+  },
+  {
+    name: 'app_id',
+    type: 'string',
+    label: 'APP.ID'
+  },
+  {
+    name: 'app_category',
+    type: 'string',
+    label: 'APP.Category'
+  },
+  {
+    name: 'app_subcategory',
+    type: 'string',
+    label: 'APP.Subcategory'
+  },
+  {
+    name: 'app_risk',
+    type: 'string',
+    label: 'APP.Risk'
+  },
+  {
+    name: 'app_description',
+    type: 'string',
+    label: 'APP.Description'
+  },
+  {
+    name: 'app_longname',
+    type: 'string',
+    label: 'APP.Long name'
+  },
+  {
+    name: 'app_technology',
+    type: 'string',
+    label: 'APP.Technology'
+  }
+]
+export const operatorList = ['=', '!=', /* '>', '<', '>=', '<=', */'IN', 'NOT IN', 'LIKE', 'NOT LIKE']
+export const connectionList = [
+  {
+    value: 'AND',
+    label: 'AND'
+  },
+  {
+    value: 'OR',
+    label: 'OR'
+  }
+]