Merge branch 'cherry-pick-3f450020' into 'dev-23.07'

fix: 修复实体下拉预览跳转url参数不对的问题

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

.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

@@ -12,6 +12,7 @@
   "dependencies": {
     "@amcharts/amcharts4": "^4.10.24",
     "@amcharts/amcharts4-geodata": "^4.1.20",
+    "@antv/g6": "^4.8.17",
     "axios": "^0.21.1",
     "babel-plugin-lodash": "^3.3.4",
     "codemirror": "^5.65.1",
@@ -40,7 +41,9 @@
     "@babel/cli": "^7.12.1",
     "@babel/core": "^7.11.4",
     "@babel/plugin-proposal-class-properties": "^7.12.1",
+    "@babel/plugin-proposal-private-methods": "^7.12.1",
     "@babel/plugin-transform-runtime": "^7.12.1",
+    "@babel/plugin-proposal-private-property-in-object": "^7.12.1",
     "@babel/preset-env": "^7.11.5",
     "@babel/preset-typescript": "^7.10.4",
     "@commitlint/cli": "^9.1.2",
@@ -63,7 +66,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/right-box-common.scss

@@ -1,302 +1,304 @@
-.el-drawer.rtl {
-  width: 700px !important;
-}
-.el-drawer__body {
+.common-right-box {
   height: 100%;
-}
-.right-box, .right-sub-box {
-  display: flex;
-  flex-direction: column;
-  padding: 0;
-  height: 100%;
-  width: 100%;
 
-  .el-date-editor {
-    .el-input__inner {
-      padding-left: 32px;
-    }
+  .el-drawer__body {
+    height: 100%;
   }
-}
 
-.right-box__header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  height: 60px;
-  padding: 0 20px;
-  border-bottom: 1px solid $--right-box-border-color;
+  .right-box, .right-sub-box {
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+    height: 100%;
+    width: 100%;
 
-  .header__title {
-    font-size: 16px;
-    font-weight: bold;
-    color: #333;
-  }
-  .header__operation {
-    i {
-      color: #999;
-      font-size: 14px;
-    }
-  }
-}
-
-.right-box__container {
-  height: calc(100% - 130px);
-  padding: 0 30px;
-  overflow-x: hidden;
-  overflow-y: auto;
-
-  .el-textarea__inner {
-    padding: 5px 70px 4px 15px;
-  }
-  .container__form-width.container__form{
-    .input-box {
-      .el-textarea {
-        .el-textarea__inner {
-          width: 530px;
-          height: 32px;
-          padding: 5px 70px 4px 10px;
-        }
-        .el-input__count {
-          right: -40px;
-          line-height: 29px;
-          height: 25px;
-        }
+    .el-date-editor {
+      .el-input__inner {
+        padding-left: 32px;
       }
     }
   }
-  .el-form-item__content {
-    .input-box {
-      .el-textarea {
-        .el-textarea__inner {
-          width: 517px;
-          height: 32px;
-          padding: 5px 70px 4px 10px;
-        }
-        .el-input__count {
-          right: -40px;
-          line-height: 29px;
-          height: 25px;
-        }
+
+  .right-box__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 60px;
+    padding: 0 20px;
+    border-bottom: 1px solid $--right-box-border-color;
+
+    .header__title {
+      font-size: 16px;
+      font-weight: bold;
+      color: #333;
+    }
+    .header__operation {
+      i {
+        color: #999;
+        font-size: 14px;
       }
     }
   }
-  .form-row-item {
-    .input-box {
-      .el-textarea {
-        .el-textarea__inner {
-          width: 466px;
-          height: 32px;
-          padding: 5px 70px 4px 10px;
-        }
-        .el-input__count {
-          right: 0;
+
+  .right-box__container {
+    height: calc(100% - 130px);
+    padding: 0 30px;
+    overflow-x: hidden;
+    overflow-y: auto;
+
+    .el-textarea__inner {
+      padding: 5px 70px 4px 15px;
+    }
+    .container__form-width.container__form{
+      .input-box {
+        .el-textarea {
+          .el-textarea__inner {
+            width: 530px;
+            height: 32px;
+            padding: 5px 70px 4px 10px;
+          }
+          .el-input__count {
+            right: -40px;
+            line-height: 29px;
+            height: 25px;
+          }
         }
       }
     }
-  }
-  .el-form-item {
-    .el-input__count {
-      line-height: 29px;
-      height: 25px;
+    .el-form-item__content {
+      .input-box {
+        .el-textarea {
+          .el-textarea__inner {
+            width: 517px;
+            height: 32px;
+            padding: 5px 70px 4px 10px;
+          }
+          .el-input__count {
+            right: -40px;
+            line-height: 29px;
+            height: 25px;
+          }
+        }
+      }
     }
-  }
-  .el-form-item {
-    .el-input--small.not-fixed-height {
-      height: 32px;
+    .form-row-item {
+      .input-box {
+        .el-textarea {
+          .el-textarea__inner {
+            width: 466px;
+            height: 32px;
+            padding: 5px 70px 4px 10px;
+          }
+          .el-input__count {
+            right: 0;
+          }
+        }
+      }
+    }
+    .el-form-item {
       .el-input__count {
         line-height: 29px;
         height: 25px;
       }
     }
-  }
-  .el-input__inner, .el-textarea__inner {
-    padding: 0 10px;
-    border-radius: $--border-radius-primary;
-    border: 1px solid $--right-box-border-color;
-  }
-  .el-textarea__inner {
-    padding: 5px 70px 4px 15px;
-  }
-  .el-form {
-    padding-top: 20px;
-
     .el-form-item {
-      margin-bottom: 16px;
-      .el-form-item__label{
-        padding-bottom: 6px;
-        font-size: 14px;
-        line-height: 16px;
-        color: #666;
-      }
-
-      .el-input__inner:hover {
-        border-color: darken($--right-box-border-color, 10%);
-      }
-      .el-input__inner:focus {
-        border-color: darken($--right-box-border-color, 20%);
+      .el-input--small.not-fixed-height {
+        height: 32px;
+        .el-input__count {
+          line-height: 29px;
+          height: 25px;
+        }
       }
     }
-    .el-form-item.is-error .el-input__inner, .el-form-item.is-error .el-input__inner:focus, .el-form-item.is-error .el-textarea__inner, .el-form-item.is-error .el-textarea__inner:focus, .el-message-box__input input.invalid, .el-message-box__input input.invalid:focus {
-      border-color: #F56C6C
-    }
-
-    .form__sub-title {
-      display: flex;
-      justify-content: space-between;
+    .el-input__inner, .el-textarea__inner {
       padding: 0 10px;
-      margin-bottom: 20px;
-      line-height: 32px;
-      font-size: 14px;
-      font-weight: bold;
-      color: #555;
-      background-color: #F6F6F6;
-    }
-    /* 虚线框类型的form-item */
-    .form__dotted-item {
-      padding: 10px 10px 6px 10px;
-      margin-bottom: 10px;
-      border: 1px dashed $--border-color-primary;
       border-radius: $--border-radius-primary;
+      border: 1px solid $--right-box-border-color;
+    }
+    .el-textarea__inner {
+      padding: 5px 70px 4px 15px;
+    }
+    .el-form {
+      padding-top: 20px;
 
       .el-form-item {
-        margin-bottom: 0;
-
-        .el-form-item__label {
-          width: 100%;
+        margin-bottom: 16px;
+        .el-form-item__label{
+          padding-bottom: 6px;
+          font-size: 14px;
+          line-height: 16px;
+          color: #666;
         }
-        .form__labels-label {
-          display: flex;
-          justify-content: space-between;
+
+        .el-input__inner:hover {
+          border-color: darken($--right-box-border-color, 10%);
+        }
+        .el-input__inner:focus {
+          border-color: darken($--right-box-border-color, 20%);
         }
       }
+      .el-form-item.is-error .el-input__inner, .el-form-item.is-error .el-input__inner:focus, .el-form-item.is-error .el-textarea__inner, .el-form-item.is-error .el-textarea__inner:focus, .el-message-box__input input.invalid, .el-message-box__input input.invalid:focus {
+        border-color: #F56C6C
+      }
+
+      .form__sub-title {
+        display: flex;
+        justify-content: space-between;
+        padding: 0 10px;
+        margin-bottom: 20px;
+        line-height: 32px;
+        font-size: 14px;
+        font-weight: bold;
+        color: #555;
+        background-color: #F6F6F6;
+      }
+      /* 虚线框类型的form-item */
+      .form__dotted-item {
+        padding: 10px 10px 6px 10px;
+        margin-bottom: 10px;
+        border: 1px dashed $--border-color-primary;
+        border-radius: $--border-radius-primary;
+
+        .el-form-item {
+          margin-bottom: 0;
+
+          .el-form-item__label {
+            width: 100%;
+          }
+          .form__labels-label {
+            display: flex;
+            justify-content: space-between;
+          }
+        }
+      }
+      .form__create-btn {
+        margin-bottom: 20px;
+        width: 300px;
+        height: 28px;
+        border: 1px solid lighten($--color-primary, 60%);
+        border-radius: $--border-radius-primary;
+        background-color: lighten($--color-primary, 95%);
+
+        i {
+          color: $--color-primary;
+        }
+      }
+      .form__flex-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .one-third-form-item-left{
+        display: inline-block;
+        width: calc(50% - 5px);
+      }
+      .one-third-form-item-right{
+        display: inline-block;
+        width: calc(50% - 5px);
+      }
+      .form-item--half-width-other-two{
+        display: inline-block;
+        width: calc(50% - 10px);
+      }
+      .form-item--half-width-other{
+        display: inline-block;
+        width: calc(50% - 10px);
+      }
     }
-    .form__create-btn {
-      margin-bottom: 20px;
+  }
+
+  .right-box__footer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 70px;
+    box-shadow: -3px 0 8px -3px rgba(205,205,205,0.77);
+
+    .footer__btn {
+      margin: 0 15px;
+      height: 30px;
+      min-width: 74px;
+      padding: 0 15px;
+      color: white;
+      background-color: $--color-primary;
+      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($--color-primary, 10%);
+    }
+    .footer__btn--light {
+      background-color: white;
+      border: 1px solid $--border-color-primary;
+      color: #333;
+    }
+    .footer__btn.footer__btn--light:hover:not(.footer__btn--disabled) {
+      background-color: white;
+      border-color: lighten($--color-primary, 40%);
+      color: $--color-primary;
+    }
+    .footer__btn--disabled {
+      opacity: .6;
+      cursor: default;
+    }
+  }
+  /* 隐藏label新增按钮处级联选择器的input */
+  .hide-casc-input {
+    position: relative;
+
+    .hide-input {
+      position: absolute;
+      top: 0;
       width: 300px;
-      height: 28px;
-      border: 1px solid lighten($--color-primary, 60%);
-      border-radius: $--border-radius-primary;
-      background-color: lighten($--color-primary, 95%);
+      opacity: 0;
+    }
+  }
+  .label__multi-text {
+    display: flex;
+    justify-content: space-between;
+  }
+  .right-box__select {
+    width: 100%;
+  }
+  .el-select-last.right-box-select-dropdown {
+    left: 1698px;
+  }
+  .limit-height .el-cascader-menu {
+    max-height: 200px;
+    overflow: auto;
+  }
 
-      i {
-        color: $--color-primary;
+  .form-items--half-width-group {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+
+    .form-item--half-width {
+      width: calc(50% - 10px);
+
+      .el-select {
+        width: 100%;
       }
     }
-    .form__flex-container {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-    .one-third-form-item-left{
-      display: inline-block;
-      width: calc(50% - 5px);
-    }
-    .one-third-form-item-right{
-      display: inline-block;
-      width: calc(50% - 5px);
-    }
-    .form-item--half-width-other-two{
-      display: inline-block;
-      width: calc(50% - 10px);
-    }
-    .form-item--half-width-other{
-      display: inline-block;
-      width: calc(50% - 10px);
-    }
   }
-}
-
-.right-box__footer {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 70px;
-  box-shadow: -3px 0 8px -3px rgba(205,205,205,0.77);
-
-  .footer__btn {
-    margin: 0 15px;
-    height: 30px;
-    min-width: 74px;
-    padding: 0 15px;
-    color: white;
-    background-color: $--color-primary;
-    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($--color-primary, 10%);
-  }
-  .footer__btn--light {
-    background-color: white;
-    border: 1px solid $--border-color-primary;
-    color: #333;
-  }
-  .footer__btn.footer__btn--light:hover:not(.footer__btn--disabled) {
-    background-color: white;
-    border-color: lighten($--color-primary, 40%);
-    color: $--color-primary;
-  }
-  .footer__btn--disabled {
-    opacity: .6;
-    cursor: default;
-  }
-}
-/* 隐藏label新增按钮处级联选择器的input */
-.hide-casc-input {
-  position: relative;
-
-  .hide-input {
+  .cn-icon-minus-position {
+    display: inline-flex;
+    flex-direction: column;
     position: absolute;
-    top: 0;
-    width: 300px;
-    opacity: 0;
+    right: 0;
+    top: 50%;
+    height: 100%;
+    transform: translateY(-50%);
+    justify-content: space-between;
+  }
+  .form-item--end-with-btn { // 末尾留出btn宽度空间的form item
+
+  }
+  .el-form-item__content .el-autocomplete .el-input-group {
+    vertical-align: unset;
   }
 }
-.label__multi-text {
-  display: flex;
-  justify-content: space-between;
-}
-.right-box__select {
-  width: 100%;
-}
-.el-select-last.right-box-select-dropdown {
-  left: 1698px;
-}
-.limit-height .el-cascader-menu {
-  max-height: 200px;
-  overflow: auto;
-}
-
-.form-items--half-width-group {
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-
-  .form-item--half-width {
-    width: calc(50% - 10px);
-
-    .el-select {
-      width: 100%;
-    }
-  }
-}
-.cn-icon-minus-position {
-  display: inline-flex;
-  flex-direction: column;
-  position: absolute;
-  right: 0;
-  top: 50%;
-  height: 100%;
-  transform: translateY(-50%);
-  justify-content: space-between;
-}
-.form-item--end-with-btn { // 末尾留出btn宽度空间的form item
-
-}
-.el-form-item__content .el-autocomplete .el-input-group {
-  vertical-align: unset;
-}

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,9 @@
       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,13 @@
 @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';
+
+@import "views/charts2/graphRightListBlock";
+@import "views/charts2/graphRightDetailBlock";

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,78 @@
+.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;
+      }
+    }
+
+    .more{
+      margin-bottom:20px;
+      .button {
+        color:#909399;
+        cursor: pointer;
+      }
+    }
+    .type-content {
+      margin-bottom:0px;
+      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,186 @@
+.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-evenly;
+
+      .analysis-entry-item {
+        display: flex;
+        flex-direction: column;
+        min-width: 70px;
+        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: 100%;
+    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/graphRightDetailBlock.scss

@@ -0,0 +1,205 @@
+$font-size: 12px;
+.graph-detail-basic-info {
+  position: relative;
+  padding-bottom: 12px;
+  display: flex;
+  justify-content: space-between;
+  //height: 100%;
+
+  .graph-detail-header {
+    display: flex;
+    flex-direction: column;
+
+    .entity-graph-type {
+      font-size: 12px;
+      color: #717171;
+      font-weight: 400;
+    }
+  }
+
+  .entity-type {
+    color: #717171;
+  }
+
+  .graph-basic-info {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .graph-basic-info-name__block {
+      display: flex;
+      align-items: center;
+
+      .graph-basic-info-name {
+        padding-right: 10px;
+        max-width: 260px;
+        font-size: 20px;
+        color: #353636;
+        font-weight: 700;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .graph-basic-info-icon {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 18px;
+        width: 18px;
+        border-radius: 50%;
+        background-color: #EFF1F4;
+        cursor: pointer;
+        flex-shrink: 0;
+
+        i {
+          color: #717171;
+          font-size: 10px;
+          -webkit-transform: scale(0.8); // 强制给文字进行缩放，达到12px以下小字体的效果
+        }
+      }
+    }
+  }
+
+  .graph-detail__icon {
+    width: 50px;
+    height: 50px;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    justify-items: center;
+    align-items: center;
+    margin-right: 10px;
+    border-radius: 50%;
+    background-color: #F3F7FA;
+
+    i {
+      font-size: 26px;
+      color: #4E84B4;
+    }
+  }
+}
+
+.graph-close {
+  color: #575757;
+  font-size: 8px;
+  cursor: pointer;
+}
+
+.graph-basic-info__block {
+  margin-top: 12px;
+  margin-bottom: 18px;
+
+  .graph-header__icon {
+    width: 3px !important;
+    height: 14px !important;
+  }
+
+  .graph-basic-info__block-content {
+
+    .graph-content-item, .graph-content-relationship-item {
+      display: flex;
+      line-height: 24px;
+    }
+
+    .graph-content-item {
+
+      .graph-content-item-label, .graph-content-item-value {
+        width: 130px;
+        font-family: NotoSansSChineseRegular;
+        font-size: $font-size;
+        color: #717171;
+        font-weight: 400;
+        padding-right: 10px;
+        flex-shrink: 0;
+      }
+
+      .graph-content-item-value {
+        width: 230px;
+        color: #353636;
+        font-weight: 400;
+        overflow-wrap: break-word;
+        line-height: normal;
+        margin-top: 0.15rem;
+      }
+    }
+
+    .graph-content-relationship-item {
+      justify-content: space-between;
+      line-height: 24px;
+
+      .graph-relationship-item-label, .graph-relationship-item-value {
+        font-size: $font-size;
+        color: #353636;
+        font-weight: 400;
+        //height: 40px;
+        display: flex;
+        align-items: center !important;
+        padding-top: 1px;
+
+        .graph-relationship-item-label-icon {
+          font-size: 14px;
+        }
+      }
+
+      .graph-relationship-item-value {
+        color: #717171;
+
+        i {
+          cursor: pointer;
+        }
+      }
+    }
+  }
+
+  .graph-tag-list {
+    display: flex;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    margin: 6px 0;
+
+    .graph-tag-item {
+      margin-bottom: 10px;
+      margin-right: 9px;
+      padding: 0 8px;
+      height: 24px;
+      line-height: 24px;
+      font-size: 12px;
+
+      span {
+        margin-top: -1px;
+      }
+    }
+  }
+}
+
+.padding-b-10 {
+  padding-bottom: 10px;
+}
+
+.padding-b-4 {
+  padding-bottom: 4px;
+}
+
+//修改popover样式
+.graph-popover {
+  width: auto !important;
+  background: #303133 !important;
+  color: #fff !important;
+  font-size: 12px !important;
+  padding: 10px !important;
+}
+
+.graph-popover .el-popper__arrow::before {
+  background: #303133 !important;
+}
+
+.graph-expand-relationship__icon {
+  font-size: 13px;
+}
+
+.graph-basic-info__block-title {
+  font-size: 13px;
+  color: #353636;
+  font-weight: 600;
+}

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

@@ -0,0 +1,154 @@
+$font-size: 12px;
+.graph-list-header {
+  display: flex;
+  justify-content: space-between;
+
+  .graph-list-header-title {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+
+    span {
+      font-size: 16px;
+      color: #353636;
+      line-height: 21px;
+      font-weight: 600;
+    }
+
+    .graph-list-header-icon {
+      font-size: 21px;
+      color: #717171;
+      margin-right: 9px;
+    }
+  }
+
+  .graph-list-header-number {
+    font-size: 12px;
+    color: #717171;
+    font-weight: 400;
+
+    span {
+      font-weight: bold;
+    }
+  }
+}
+
+.graph-list-expand-btn-block {
+  margin-top: 16px;
+  margin-bottom: 24px;
+
+  .graph-list-expand-btn {
+    height: 28px;
+    line-height: 28px;
+    background: #38ACD2;
+    border-radius: 3px;
+    font-size: 12px;
+    color: #FFFFFF;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 500;
+    padding: 14px 10px;
+    cursor: pointer;
+    border: 1px solid rgba(46,136,166,0.85);
+
+    i {
+      font-size: 16px;
+      margin-right: 7px;
+    }
+
+    &.graph-list-expand-btn--disabled {
+      opacity: .4;
+      cursor: default;
+    }
+  }
+}
+
+.graph-list-content-header {
+  font-size: 14px;
+  color: #353636;
+  font-weight: 500;
+}
+
+.graph-list-content {
+  padding: 0 10px;
+
+  .graph-list-item-ip {
+    margin-bottom: 10px;
+    font-size: $font-size;
+    color: #353636;
+    font-weight: 400;
+  }
+
+  .graph-list-item-block {
+    width: 100%;
+    background: rgba(247, 247, 247, 1);
+    border: 1px solid rgba(226, 229, 236, 1);
+    border-radius: 2px;
+    padding: 10px 15px;
+
+    .graph-list-item, .graph-list-item__app {
+      display: flex;
+
+      .graph-list-item-label, .graph-list-item-label__app {
+        width: 72px;
+        //margin-right: 15px;
+        font-size: $font-size;
+        color: #717171;
+        font-weight: 400;
+        flex-shrink: 0;
+      }
+
+      .graph-list-item-label__app {
+        width: 83px;
+        display: flex;
+        align-items: flex-start;
+        line-height: 22px;
+      }
+
+      .graph-list-country-flag {
+        width: 16px;
+        height: 14px;
+        margin-right: 5px;
+      }
+
+      .graph-list-item-value {
+        font-size: $font-size;
+        color: #353636;
+        font-weight: 400;
+        line-height: 18px;
+        display: flex;
+        align-items: center;
+        margin-top: 0.15rem;
+      }
+
+      .graph-list-item-value1 {
+        display: flex;
+        align-content: center;
+      }
+    }
+
+    .graph-list-item {
+      align-items: center;
+    }
+  }
+}
+
+.padding-b-20 {
+  padding-bottom: 20px;
+}
+
+.padding-b-16 {
+  padding-bottom: 16px;
+}
+
+.padding-b-12 {
+  padding-bottom: 12px;
+}
+
+.graph-list-dividing-line {
+  width: 300px;
+  height: 1px;
+  background: #ECECEC;
+  margin: 11px 0;
+}

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

@@ -0,0 +1,70 @@
+.information-aggregation__table {
+    .information-aggregation-tags {
+      display: flex;
+      flex-direction: row;
+      justify-content: left;
+      align-items: flex-start;
+      margin-bottom:6px;
+      padding-top:10px !important;
+      padding-bottom:4px !important;
+    }
+  .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 {
@@ -60,7 +71,7 @@
         .el-input__inner {
           font-size: 14px;
           color: #353636;
-          background-color: #F5F8FA;
+          background-color: #FFFFFF;
         }
         .common-select {
           top: 32px !important;

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,12 @@
   justify-content: center;
   align-items: center;
   padding: 0 4px;
-  //todo 此处文字显示白色，暂时取消
   //color: white;
 }
+
+.performance-event-remark {
+  font-family: NotoSansSChineseRegular;
+  font-size: 12px;
+  color: #353636;
+  font-weight: 400;
+}

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;*/
@@ -106,9 +117,9 @@
 
       .overview-left {
         display: flex;
-        flex-direction: column;
+        //flex-direction: column;
         align-items: center;
-        padding: 0 30px;
+        padding: 0 0 0 30px;
 
         .overview-left-span {
           font-size: 16px;
@@ -130,12 +141,14 @@
       .overview-right {
         display: flex;
         flex-direction: column;
-        padding: 0 30px;
+        justify-content: center;
+        padding: 0 15px;
 
         .right-row {
           display: flex;
-          height: 30px;
+          height: 18px;
           align-items: center;
+          color: #666666;
 
           .right-label-loading {
             position: relative;
@@ -157,7 +170,7 @@
             font-weight: bold;
           }
           i {
-            padding-right: 10px;
+            padding-right: 4px;
             font-size: 18px;
           }
           .cn-icon-increase {

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

@@ -1,104 +1,100 @@
 .entity-filter-case {
   display: flex;
   flex-direction: column;
-  width: 280px;
-  margin-right: 10px;
+  width: 320px;
+  margin-right: 20px;
   overflow: auto;
   z-index: 1;
+  border: 1px solid rgba(226, 229, 236, 1) !important;
+  border-radius: 4px !important;
 
   .filter-case__header {
-    background-color: #E1E6ED;
-    margin-bottom: 10px;
-    padding-left: 8px;
-    height: 36px;
-    line-height: 36px;
-    color: #666;
-    font-size: 14px;
-  }
-  .entity-filter {
-    display: flex;
-    flex-direction: column;
-    border: 1px solid #E7EAED;
-    margin-bottom: 10px;
-    background-color: white;
-
-    .filter__header {
-      height: 46px;
-      margin: 0 15px;
-      line-height: 46px;
-      border-bottom: 1px solid #EFF2F5;
+      padding-left: 8px;
+      height: 36px;
+      line-height: 36px;
+      color: #666;
       font-size: 14px;
-      color: #333;
+      background: #F7F7F7;
+      box-shadow: 0 1px 0 0 rgba(226,229,236,1);
+      border-radius: 4px 4px 0 0;
     }
-    .filter__body {
-      padding: 11px 0 21px 0;
-      .filter__row {
-        padding: 0 15px;
+
+  .filter__header {
+    height: 46px;
+    line-height: 46px;
+    margin: 0 20px;
+    font-size: 14px;
+    color: #353636;
+    font-weight: 500;
+  }
+
+  .filter__body {
+    width: calc(100% - 40px);
+    margin: 0 20px;
+
+    .filter-hr {
+      width: calc(100% + 20px);
+      margin-left: -10px;
+      margin-top: 10px;
+      height: 1px;
+      background: #EFF2F5;
+      //background: #000;
+    }
+
+    .filter__body-item {
+      height: 26px;
+      line-height: 26px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      cursor: pointer;
+
+      .filter__body-item-left {
+        display: flex;
         align-items: center;
-        cursor: pointer;
-        transition: all linear .2s;
-        .filter__row-popover {
-          display: flex;
-          line-height: 26px;
+        font-size: 14px;
+        color: #353636;
+        font-weight: 400;
+
+        .filter-country-flag {
+          width: 18px;
+          height: 12px;
         }
 
-        &:hover, &.filter__row--active {
-          background-color: #F3F7FA;
-        }
-        .row__label {
-          font-size: 14px;
-          flex: 8;
-          display: flex;
-          i {
-            color: #8FA1BE;
-          }
-          span {
-            padding-left: 6px;
-            color: #333;
-          }
-        }
-        .row__value {
-          color: #666;
-          position: relative;
-          display: inline-block;
+        .filter__body-item-left-index {
+          width: 16px;
+          height: 16px;
           text-align: center;
-          flex: 1;
-          .chart__loading img {
-            left: unset;
-            right: 0;
-          }
-        }
-      }
-    }
-  }
-}
-.filter__row-popover {
-  .pop-title {
-    i {
-      margin-right: 6px;
-    }
-  }
-  .entity-pop-custom {
-    .filter-top-box {
-      .chart__loading {
-        height: calc(100% - 65px);
-        top: 64px;
-      }
-      .top-table-percent{
-        display:grid;
-        grid-template-columns: 50% auto;
-        grid-template-rows: 100%;
-        grid-row-gap: 0px;
-        grid-column-gap: 0px;
-        .top-table-progress{
-          align-content: center;
-          padding-top: 8px;
-        }
-      }
-      .customer-no-border-table {
-        .el-table__body-wrapper {
-          height: calc(100% - 36px);
+          background: #EFF2F5;
+          border-radius: 2px;
+          margin-right: 6px;
+          font-family: NotoSansHans-Black;
+          font-size: 9px;
+          color: #96A2B0;
+          font-weight: 900;
+          display: flex;
+          align-items: center;
+          justify-content: center;
         }
+
+        .filter__body-item-left-label {
+          max-width: 180px;
+          font-family: NotoSansSChineseRegular;
+          font-size: 14px;
+          color: #353636;
+          font-weight: 400;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+      }
+
+      .filter__body-item-right {
+        flex-shrink: 0;
+        font-family: NotoSansSChineseRegular;
+        font-size: 12px;
+        color: #717171;
+        font-weight: 400;
       }
     }
   }

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

@@ -34,6 +34,7 @@
     .overview__title {
       color: #333;
       font-size: 14px;
+      font-weight: 600;
     }
     .overview__content-loading.overview__content {
       position: relative;
@@ -87,7 +88,7 @@
           padding-right: 20px;
 
           &.row__label--width130 {
-            flex-basis: 130px;
+            flex-basis: 140px;
             padding-right: unset;
           }
           &.row__label--width160 {
@@ -130,6 +131,9 @@
               background-color: #F6C738;
             }
           }
+          &.row__content--width90 {
+            width: 90px;
+          }
           &.row__content--width200 {
             width: 200px;
           }
@@ -144,7 +148,7 @@
         }
         .row__contents {
           display: flex;
-          flex-direction: column;
+          //flex-direction: column;
 
           .row__content {
             padding: 2px 0;
@@ -156,15 +160,26 @@
             &:last-of-type {
               padding-bottom: 0;
             }
+
+            .el-popper {
+              min-width: 90px !important;
+            }
+          }
+          .row__content-accept {
+            margin-left: 39px;
           }
           .row__charts-msg {
             width: auto;
-            padding-right: 20px;
+            padding-right: 10px;
+          }
+          .new-row__charts-msg {
+            width: auto;
+            padding-right: 10px;
           }
           .row__charts {
             height: 20px;
             width: 60px;
-            padding-left: 5px;
+            //padding-left: 5px;
           }
         }
         .row__charts {
@@ -176,6 +191,12 @@
           color: #666666;
         }
       }
+
+      .overview__row-related {
+        display: flex;
+        align-items: center;
+        margin-bottom: 8px;
+      }
     }
 
     .overview__content.domain__content {
@@ -292,3 +313,11 @@
     }
   }
 }
+.margin-l-140 {
+  margin-left: 140px;
+}
+
+.line-center {
+  display: flex;
+  align-items: center;
+}

src/assets/css/components/views/entityExplorer/entityList/entity-list.scss

@@ -1,5 +1,5 @@
 .entity-list {
-  width: calc(100% - 290px);
+  width: 100%;
   height: calc(100% - 42px);
   flex: 1;
   position: relative;

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

@@ -1,5 +1,8 @@
 .cn-entity--list {
   display: flex;
+  border: 1px #E2E5EC solid;
+  margin-bottom: 10px;
+  border-radius: 4px;
 
   .cn-entity__collapse {
     margin-bottom: 1px;
@@ -9,6 +12,7 @@
     justify-content: center;
     align-items: flex-start;
     background-color: #F3F7FA;
+    border-radius: 4px 0 0 4px;
 
     span {
       transform: rotate(0);
@@ -36,9 +40,11 @@
     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;
@@ -70,6 +76,12 @@
         font-size: 16px;
         padding-bottom: 3px;
         color: #333333;
+        .cn-entity__header-title {
+          margin-right: 10px;
+        }
+        .cn-entity__header-tag {
+
+        }
       }
 
       .cn-entity__body {
@@ -87,7 +99,7 @@
             flex-wrap: wrap;
 
             .basic-info__item {
-              padding-right: 40px;
+              padding-right: 30px;
 
               .item__box {
                 display: flex;
@@ -105,7 +117,7 @@
                 }
 
                 i {
-                  padding-right: 6px;
+                  padding-right: 5px;
                   color: #8FA1BE;
                   font-size: 12px;
                   height: 13px;
@@ -126,7 +138,7 @@
                 .row__charts {
                   height: 19px;
                   width: 60px;
-                  padding-left: 5px;
+                  margin-left: 4px;
                 }
               }
 
@@ -147,25 +159,47 @@
               span:last-of-type {
                 color: #666;
               }
-
-
             }
-          }
 
-          .show-detail {
-            flex-shrink: 0;
-            padding: 0 30px;
-            font-size: 12px;
-            color: #3976CB;
+            .row-item-label {
+              font-family: NotoSansSChineseRegular;
+              font-size: 14px;
+              color: #717171;
+              font-weight: 400;
+            }
 
-            &:hover {
-              cursor: pointer;
+            .row-item-value {
+              font-family: NotoSansSChineseRegular;
+              font-size: 14px;
+              color: #353636;
+              font-weight: 400;
             }
           }
         }
       }
     }
 
+    .new-show-detail {
+      flex-shrink: 0;
+      padding: 0 30px;
+      font-size: 12px;
+      color: #2C72C6;
+      font-weight: 400;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+      align-items: center;
+
+      &:hover {
+        cursor: pointer;
+      }
+
+      i {
+        font-size: 12px;
+        margin-right: 5px;
+      }
+    }
+
     .cn-entity__detail-overview {
       flex-basis: 100%;
       padding: 0 10px;

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=1689317280458') format('woff2'),
+       url('iconfont.woff?t=1689317280458') format('woff'),
+       url('iconfont.ttf?t=1689317280458') format('truetype');
 }
 
 .cn-icon {
@@ -13,6 +13,214 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.cn-icon-add-knowledge-base:before {
+  content: "\e802";
+}
+
+.cn-icon-update-knowledge-base:before {
+  content: "\e803";
+}
+
+.cn-icon-zoom-out:before {
+  content: "\e7fd";
+}
+
+.cn-icon-to-default:before {
+  content: "\e7fe";
+}
+
+.cn-icon-reset:before {
+  content: "\e7ff";
+}
+
+.cn-icon-next-step:before {
+  content: "\e800";
+}
+
+.cn-icon-pre-step:before {
+  content: "\e801";
+}
+
+.cn-icon-zoom-in:before {
+  content: "\e7f";
+}
+
+.cn-icon-expand-continue:before {
+  content: "\e7fc";
+}
+
+.cn-icon-domain1:before {
+  content: "\e7fb";
+}
+
+.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/assets/img/entity-symbol2/app-colored.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1687771200531" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7765" width="36" height="36" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M723.84487531 71.54166698c60.46291698 0 110.11458302 49.45145802 110.11458302 110.11458302v12.21270802h10.05045802c27.58870802 0 49.77179198 22.30320802 49.77179198 49.73175v256.78720896c0 27.42854198-22.34325 49.73175-49.77179198 49.73175h-10.05045802v292.22408302c0 60.50295802-49.4915 110.11458302-110.11458302 110.11458302H310.89516635a110.394875 110.394875 0 0 1-110.11458302-110.11458302v-292.22408302h-10.0905A49.81183302 49.81183302 0 0 1 140.95833333 500.38791698V243.60070802c0-27.42854198 22.30320802-49.73175 49.73175-49.73175h10.0905V181.65625C200.78058333 121.15329198 250.23204135 71.54166698 310.89516635 71.54166698z m54.97720802 688.31625H255.75779135v82.48583302a55.2575 55.2575 0 0 0 55.137375 55.137375h412.94970896a55.2575 55.2575 0 0 0 55.09733302-55.137375l-0.120125-82.48583302z m-261.47208302 27.508625c22.02291698 0 41.24291698 19.22 41.24291604 41.28295802 0 22.02291698-19.22 41.24291698-41.24291604 41.24291698-21.90279198 0-41.24291698-19.22-41.24291698-41.24291698s19.22-41.24291698 41.24291698-41.24291698z m261.59220802-237.246875H255.87791635v154.56083302h523.06429198v-154.56083302z m61.06354198-302.47475H194.73429135v248.65875h645.27145896v-248.65875z m-518.53958396 23.78475c12.41291698 0 23.5445 7.52783302 28.10925 18.97975l60.903375 150.55666604a24.865875 24.865875 0 0 1-23.10404104 34.27566698 25.106125 25.106125 0 0 1-23.26420896-15.8565l-6.56683302-16.697375H284.78800031l-6.32658396 16.53720802a25.14616698 25.14616698 0 1 1-46.76866604-18.41916604l61.70420802-150.55666698a30.43166698 30.43166698 0 0 1 28.10925-18.81958302z m217.82666698 0c40.722375 0 71.63454198 31.47275 71.63454198 69.6725 0 38.15970802-31.19245802 69.071875-74.4775 69.071875h-20.70154198v40.32195802a24.66566698 24.66566698 0 0 1-24.74575 24.74575 24.82583302 24.82583302 0 0 1-24.74575-24.74575V296.17541698a24.66566698 24.66566698 0 0 1 24.74575-24.74575z m190.878625 0c40.722375 0 71.67458302 31.47275 71.67458302 69.6725 0 38.15970802-31.2325 69.071875-74.4775 69.071875h-20.74158302v40.32195802a24.66566698 24.66566698 0 0 1-24.74575 24.74575 24.66566698 24.66566698 0 0 1-24.70570802-24.74575V296.17541698a24.66566698 24.66566698 0 0 1 24.70570802-24.74575zM321.10579135 348.30966698l-20.181 52.05416604H341.16666635l-20.02083302-52.05416604z m215.46420896-27.3885h-20.70154198v47.16908302h18.17891698c18.65941698 0 27.3885-11.57204198 27.3885-25.14616698 0-11.01145802-6.68695802-22.02291698-24.82583396-22.02291604z m190.7585 0h-20.70154198v47.16908302h18.138875c18.69945802 0 27.42854198-11.57204198 27.42854198-25.14616698 0-11.01145802-6.727-22.02291698-24.82583396-22.02291604z m-3.3635-194.40229198H311.01529135A55.2575 55.2575 0 0 0 255.87791635 181.65625v12.21270802h523.22445896V181.65625a55.2575 55.2575 0 0 0-55.137375-55.137375z" p-id="7766" fill="#E5A219"></path></svg>

src/assets/img/entity-symbol2/app.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1688290120782" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7911" xmlns:xlink="http://www.w3.org/1999/xlink" width="36" height="36"><path d="M723.84487531 71.54166698c60.46291698 0 110.11458302 49.45145802 110.11458302 110.11458302v12.21270802h10.05045802c27.58870802 0 49.77179198 22.30320802 49.77179198 49.73175v256.78720896c0 27.42854198-22.34325 49.73175-49.77179198 49.73175h-10.05045802v292.22408302c0 60.50295802-49.4915 110.11458302-110.11458302 110.11458302H310.89516635a110.394875 110.394875 0 0 1-110.11458302-110.11458302v-292.22408302h-10.0905A49.81183302 49.81183302 0 0 1 140.95833333 500.38791698V243.60070802c0-27.42854198 22.30320802-49.73175 49.73175-49.73175h10.0905V181.65625C200.78058333 121.15329198 250.23204135 71.54166698 310.89516635 71.54166698z m54.97720802 688.31625H255.75779135v82.48583302a55.2575 55.2575 0 0 0 55.137375 55.137375h412.94970896a55.2575 55.2575 0 0 0 55.09733302-55.137375l-0.120125-82.48583302z m-261.47208302 27.508625c22.02291698 0 41.24291698 19.22 41.24291604 41.28295802 0 22.02291698-19.22 41.24291698-41.24291604 41.24291698-21.90279198 0-41.24291698-19.22-41.24291698-41.24291698s19.22-41.24291698 41.24291698-41.24291698z m261.59220802-237.246875H255.87791635v154.56083302h523.06429198v-154.56083302z m61.06354198-302.47475H194.73429135v248.65875h645.27145896v-248.65875z m-518.53958396 23.78475c12.41291698 0 23.5445 7.52783302 28.10925 18.97975l60.903375 150.55666604a24.865875 24.865875 0 0 1-23.10404104 34.27566698 25.106125 25.106125 0 0 1-23.26420896-15.8565l-6.56683302-16.697375H284.78800031l-6.32658396 16.53720802a25.14616698 25.14616698 0 1 1-46.76866604-18.41916604l61.70420802-150.55666698a30.43166698 30.43166698 0 0 1 28.10925-18.81958302z m217.82666698 0c40.722375 0 71.63454198 31.47275 71.63454198 69.6725 0 38.15970802-31.19245802 69.071875-74.4775 69.071875h-20.70154198v40.32195802a24.66566698 24.66566698 0 0 1-24.74575 24.74575 24.82583302 24.82583302 0 0 1-24.74575-24.74575V296.17541698a24.66566698 24.66566698 0 0 1 24.74575-24.74575z m190.878625 0c40.722375 0 71.67458302 31.47275 71.67458302 69.6725 0 38.15970802-31.2325 69.071875-74.4775 69.071875h-20.74158302v40.32195802a24.66566698 24.66566698 0 0 1-24.74575 24.74575 24.66566698 24.66566698 0 0 1-24.70570802-24.74575V296.17541698a24.66566698 24.66566698 0 0 1 24.70570802-24.74575zM321.10579135 348.30966698l-20.181 52.05416604H341.16666635l-20.02083302-52.05416604z m215.46420896-27.3885h-20.70154198v47.16908302h18.17891698c18.65941698 0 27.3885-11.57204198 27.3885-25.14616698 0-11.01145802-6.68695802-22.02291698-24.82583396-22.02291604z m190.7585 0h-20.70154198v47.16908302h18.138875c18.69945802 0 27.42854198-11.57204198 27.42854198-25.14616698 0-11.01145802-6.727-22.02291698-24.82583396-22.02291604z m-3.3635-194.40229198H311.01529135A55.2575 55.2575 0 0 0 255.87791635 181.65625v12.21270802h523.22445896V181.65625a55.2575 55.2575 0 0 0-55.137375-55.137375z" p-id="7912" fill="#778391"></path></svg>

src/assets/img/entity-symbol2/domain-colored.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1688298522321" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7364" xmlns:xlink="http://www.w3.org/1999/xlink" width="36" height="36"><path d="M512 61.06201172a450.93798828 450.93798828 0 1 1 0 901.87597656 450.93798828 450.93798828 0 0 1 0-901.87597656z m0 45.09379883a405.84418945 405.84418945 0 1 0 0 811.6883789 405.84418945 405.84418945 0 0 0 0-811.6883789z" p-id="7365" fill="#38ACD2"></path><path d="M229.64344446 586.23133044l15.95626722-52.586307c4.64812962-15.19314186 8.18625866-30.6637832 10.54501134-46.41192491h0.69375048c3.1912538 18.3150199 6.17438209 31.77378466 10.12876124 46.48129978l15.05439124 52.51693213h46.82817591l49.11755284-149.36453686h-48.77067761l-13.73626514 59.24631408c-3.60750391 17.06626868-6.93750745 33.855037-9.22688438 50.99068056h-0.69375136a864.41343565 864.41343565 0 0 0-11.79376257-50.64380531l-15.95626721-59.59318933h-39.33566772l-17.06626869 61.39694129c-3.88500427 14.63814112-8.46375903 31.70440892-11.79376256 48.84005335h-0.69375049A890.56783897 890.56783897 0 0 0 199.81216237 497.84748474l-12.7650143-61.05006603h-50.78255506l46.55067554 149.36453685h46.82817591zM570.27506324 496.04373279c-3.53812904 17.20501843-6.86813258 33.99378674-9.1575104 51.06005543h-0.69375047c-3.1912538-17.13564355-7.49250818-33.855037-11.79376257-50.64380531l-15.95626721-59.59318933H493.26872999l-17.06626869 61.39694129c-3.88500427 14.63814112-8.46375903 31.77378466-11.79376256 48.84005335h-0.69375137a904.30410413 904.30410413 0 0 0-9.08813463-49.18692861l-12.83438917-61.05006603h-50.78255417l46.48129978 149.29516199h46.89755078l16.09501783-52.51693213c4.57875475-15.26251673 8.11688379-30.73315807 10.40626074-46.48130068h0.69375136c3.33000354 18.38439477 6.24375697 31.84315955 10.19813611 46.48130068l15.05439124 52.51693212h46.82817502l49.11755373-149.29516198H584.15007813l-13.73626514 59.24631408zM825.22846423 496.04373279c-3.60750391 17.20501843-6.93750745 33.99378674-9.15751039 51.06005543h-0.69375048c-3.26062867-17.13564355-7.56188305-33.855037-11.79376256-50.64380531l-16.02564208-59.59318933h-39.33566773l-16.99689381 61.39694129a710.40076917 710.40076917 0 0 0-11.79376257 48.84005335h-0.69375049a893.96721827 893.96721827 0 0 0-9.15751038-49.18692861l-12.76501342-61.05006603H645.89389464l46.55067554 149.29516199h46.82817591l16.09501784-52.51693213a328.14410573 328.14410573 0 0 0 10.47563559-46.48130068h0.69375136c3.26062867 18.38439477 6.24375697 31.84315955 10.12876036 46.48130068l15.05439124 52.51693212h46.82817591l49.1869286-149.29516198h-48.84005337l-13.73626426 59.24631408z" p-id="7366" fill="#38ACD2"></path><path d="M320.17791736 643.11889184c28.65190576 164.34955323 107.87824195 274.72529762 191.82208264 274.72529761 81.30758763 0 158.24454601-103.7157373 189.04707984-259.80965612l2.42812756-12.83438916 44.40004835 7.90875828C715.4077206 835.28784972 623.34699522 962.93798828 512 962.93798828c-109.26574291 0-200.07771705-123.00200805-233.93275317-299.56157396l-2.28937782-12.48751393 44.40004835-7.70063368zM512 61.06201172c109.40449353 0 200.14709193 123.14075868 234.00212804 299.83907432l2.28937782 12.48751393-44.40004834 7.70063369C675.10080202 216.67030556 595.94384069 106.15581055 512 106.15581055c-82.07071387 0-159.56267298 105.58886413-189.81020519 263.62528552l-2.28937782 12.69563854-44.40004834-7.63125792C307.06602784 190.65465198 399.7511288 61.06201172 512 61.06201172z" p-id="7367" fill="#38ACD2"></path><path d="M549.60129065 647.28139648V962.93798828h-60.14819006V647.28139648h60.14819006z m0-586.21938476v315.6565918h-60.14819006V61.06201172h60.14819006z" p-id="7368" fill="#38ACD2"></path><path d="M151.24960938 241.43720703h721.50078124v45.09379883H151.24960938V241.43720703z m0 496.03178711h721.50078124v45.09379883H151.24960938v-45.09379883z" p-id="7369" fill="#38ACD2"></path></svg>

src/assets/img/entity-symbol2/domain-colored2.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1687771150463" class="icon" viewBox="0 0 1228 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7479" width="35.9765625" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M1099.86729167 250.4559668V115.17457031H125.84123698v135.28139649h974.02605469z m0 54.11255859H125.84123698v595.23814453h974.02605469V304.56852539zM71.72867839 61.06201172h1082.25117187v892.8572168H71.72867839V61.06201172z m324.31460117 504.74992185v44.34223492c0.1803752 10.31144837 2.1344401 18.12770712 5.89225608 23.50890074 3.72775374 5.38119362 11.15319987 8.05675843 22.27633663 8.05675844h99.65729541v44.34223581h-119.73906657c-20.14189651 0-34.15103728-4.65969284-41.99735827-13.9490154-7.81625876-9.28932256-11.7243877-23.32852556-11.72438769-42.14767035v-82.61183945c0-18.81914567 3.90812893-32.85834779 11.72438769-42.14767034 7.81625876-9.31938479 21.82539863-13.9490154 41.99735827-13.9490154h119.73906657v44.34223581h-99.65729541c-11.12313675 0-18.54858288 2.70562793-22.27633663 8.05675842-3.75781686 5.38119362-5.71188089 12.7465135-5.89225608 22.1560868z m327.98223044 64.15344416c0 18.12770712-3.72775374 32.01659717-11.21332523 41.66667012-7.4855706 9.62001071-21.40452288 14.43001562-41.7267946 14.43001563h-66.76888539c-20.17195963 0-34.18109951-4.65969284-41.99735738-13.9490154-7.81625876-9.28932256-11.7243877-23.32852556-11.7243877-42.14767035v-82.61183945c0-18.81914567 3.90812893-32.85834779 11.7243877-42.14767034 7.81625876-9.31938479 21.82539863-13.9490154 41.99735738-13.9490154h66.73882227c20.35233483 0 34.27128711 4.81000491 41.75685772 14.43001562 7.4855706 9.62001071 11.21332435 23.53896299 11.21332523 41.66667012v82.61183945zM678.39058559 611.20635742v-44.67292307c0-10.76238636-1.74362659-18.60870736-5.23088067-23.50890076-3.48725407-4.93025564-11.21332435-7.39538301-23.20827572-7.395383h-25.55315237c-11.12313675 0-18.57864512 2.70562793-22.30639886 8.05675842-3.72775374 5.38119362-5.6216933 12.98701406-5.62169418 22.84752534v44.31217268c0 9.86051038 1.89393956 17.4663317 5.62169418 22.84752444 3.72775374 5.38119362 11.18326211 8.05675843 22.30639886 8.05675932h25.55315237c11.99495049 0 19.63083405-2.46512737 22.93771293-7.39538301 3.30687888-4.90019251 5.14069306-12.62626367 5.50144346-23.14815036z m241.37207356-119.91944264c20.32227171 0 34.27128711 4.81000491 41.72679548 14.43001562 7.4855706 9.62001071 11.21332435 23.53896299 11.21332434 41.66667012v138.7085252h-45.63492441v-119.55869137c0-10.76238636-1.74362659-18.60870736-5.23088066-23.50890076-3.48725407-4.93025564-11.21332435-7.39538301-23.20827484-7.395383h-14.61039082v150.46297513h-46.17605l-0.24050055-150.46297513h-13.04713943c-11.12313675 0-18.54858288 2.70562793-22.30639886 8.05675842-3.72775374 5.38119362-5.59163105 12.98701406-5.59163105 22.84752534v119.55869137h-45.90548721v-138.7085252c0-18.81914567 3.90812893-32.85834779 11.72438769-42.14767035 7.81625876-9.31938479 21.82539863-13.9490154 41.99735828-13.94901539h115.28981204zM244.88886589 637.36076074h48.70130273v48.70130274H244.88886589v-48.70130274z" p-id="7480" fill="#38ACD2"></path></svg>

src/assets/img/entity-symbol2/domain.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1688290376101" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8107" xmlns:xlink="http://www.w3.org/1999/xlink" width="36" height="36"><path d="M512 61.06201172a450.93798828 450.93798828 0 1 1 0 901.87597656 450.93798828 450.93798828 0 0 1 0-901.87597656z m0 45.09379883a405.84418945 405.84418945 0 1 0 0 811.6883789 405.84418945 405.84418945 0 0 0 0-811.6883789z" p-id="8108" fill="#778391"></path><path d="M229.64344446 586.23133044l15.95626722-52.586307c4.64812962-15.19314186 8.18625866-30.6637832 10.54501134-46.41192491h0.69375048c3.1912538 18.3150199 6.17438209 31.77378466 10.12876124 46.48129978l15.05439124 52.51693213h46.82817591l49.11755284-149.36453686h-48.77067761l-13.73626514 59.24631408c-3.60750391 17.06626868-6.93750745 33.855037-9.22688438 50.99068056h-0.69375136a864.41343565 864.41343565 0 0 0-11.79376257-50.64380531l-15.95626721-59.59318933h-39.33566772l-17.06626869 61.39694129c-3.88500427 14.63814112-8.46375903 31.70440892-11.79376256 48.84005335h-0.69375049A890.56783897 890.56783897 0 0 0 199.81216237 497.84748474l-12.7650143-61.05006603h-50.78255506l46.55067554 149.36453685h46.82817591zM570.27506324 496.04373279c-3.53812904 17.20501843-6.86813258 33.99378674-9.1575104 51.06005543h-0.69375047c-3.1912538-17.13564355-7.49250818-33.855037-11.79376257-50.64380531l-15.95626721-59.59318933H493.26872999l-17.06626869 61.39694129c-3.88500427 14.63814112-8.46375903 31.77378466-11.79376256 48.84005335h-0.69375137a904.30410413 904.30410413 0 0 0-9.08813463-49.18692861l-12.83438917-61.05006603h-50.78255417l46.48129978 149.29516199h46.89755078l16.09501783-52.51693213c4.57875475-15.26251673 8.11688379-30.73315807 10.40626074-46.48130068h0.69375136c3.33000354 18.38439477 6.24375697 31.84315955 10.19813611 46.48130068l15.05439124 52.51693212h46.82817502l49.11755373-149.29516198H584.15007813l-13.73626514 59.24631408zM825.22846423 496.04373279c-3.60750391 17.20501843-6.93750745 33.99378674-9.15751039 51.06005543h-0.69375048c-3.26062867-17.13564355-7.56188305-33.855037-11.79376256-50.64380531l-16.02564208-59.59318933h-39.33566773l-16.99689381 61.39694129a710.40076917 710.40076917 0 0 0-11.79376257 48.84005335h-0.69375049a893.96721827 893.96721827 0 0 0-9.15751038-49.18692861l-12.76501342-61.05006603H645.89389464l46.55067554 149.29516199h46.82817591l16.09501784-52.51693213a328.14410573 328.14410573 0 0 0 10.47563559-46.48130068h0.69375136c3.26062867 18.38439477 6.24375697 31.84315955 10.12876036 46.48130068l15.05439124 52.51693212h46.82817591l49.1869286-149.29516198h-48.84005337l-13.73626426 59.24631408z" p-id="8109" fill="#778391"></path><path d="M320.17791736 643.11889184c28.65190576 164.34955323 107.87824195 274.72529762 191.82208264 274.72529761 81.30758763 0 158.24454601-103.7157373 189.04707984-259.80965612l2.42812756-12.83438916 44.40004835 7.90875828C715.4077206 835.28784972 623.34699522 962.93798828 512 962.93798828c-109.26574291 0-200.07771705-123.00200805-233.93275317-299.56157396l-2.28937782-12.48751393 44.40004835-7.70063368zM512 61.06201172c109.40449353 0 200.14709193 123.14075868 234.00212804 299.83907432l2.28937782 12.48751393-44.40004834 7.70063369C675.10080202 216.67030556 595.94384069 106.15581055 512 106.15581055c-82.07071387 0-159.56267298 105.58886413-189.81020519 263.62528552l-2.28937782 12.69563854-44.40004834-7.63125792C307.06602784 190.65465198 399.7511288 61.06201172 512 61.06201172z" p-id="8110" fill="#778391"></path><path d="M549.60129065 647.28139648V962.93798828h-60.14819006V647.28139648h60.14819006z m0-586.21938476v315.6565918h-60.14819006V61.06201172h60.14819006z" p-id="8111" fill="#778391"></path><path d="M151.24960938 241.43720703h721.50078124v45.09379883H151.24960938V241.43720703z m0 496.03178711h721.50078124v45.09379883H151.24960938v-45.09379883z" p-id="8112" fill="#778391"></path></svg>

src/assets/img/entity-symbol2/ip-colored.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1687770782238" class="icon" viewBox="0 0 1109 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7446" width="35.7392578125" height="33" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M306.07165232 286.53100586h88.45900173v402.31184159H306.07165232V286.53100586z m254.70480646 258.08684225h92.9683825c25.1773713 0 46.59692575-3.68265995 64.25866333-10.97282467 17.66173758-7.36532077 32.01659717-16.9853306 43.06457788-29.01034421 11.12313675-12.02501272 19.1648645-25.85377829 24.27549445-41.48629492a152.94313406 152.94313406 0 0 0 0-95.44854056 111.6071521 111.6071521 0 0 0-24.27549445-41.18566989 120.25012991 120.25012991 0 0 0-43.06457788-29.01034333A167.59861869 167.59861869 0 0 0 653.74484128 286.53100586H472.31745703v402.31184159h88.45900175v-144.30015625z m0-189.39395508h68.7680432c10.14610474 0 19.84127148 0.75156302 29.31096924 2.25468995a68.39226126 68.39226126 0 0 1 24.80158936 8.79329077 47.72427072 47.72427072 0 0 1 17.13564355 18.33814456 64.48413233 64.48413233 0 0 1 6.46344479 30.96440824c0 12.77657663-2.1795339 23.07299344-6.46344479 30.96440911a47.6491138 47.6491138 0 0 1-17.21079959 18.33814456 68.09163623 68.09163623 0 0 1-24.80158936 8.71813474c-9.39454172 1.50312692-19.08970846 2.25468994-29.31096923 2.25468994H560.85161569V355.29904907z" p-id="7447" fill="#7E9F54"></path><path d="M997.43474439 61.06201172H101.72158671C79.2498442 61.06201172 61.06201172 80.60265817 61.06201172 104.65268362v814.69463276c0 24.05002634 18.18783249 43.5906719 40.65957499 43.5906719h895.71315768c22.47174337 0 40.65957499-19.54064646 40.65957497-43.5906719V104.65268362c0-24.05002634-18.18783249-43.5906719-40.65957497-43.5906719z m-20.36736551 835.73840524H122.0889531V126.44802001h854.97842578v770.35239695z" p-id="7448" fill="#7E9F54"></path></svg>

src/assets/img/entity-symbol2/ip.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1688290403407" class="icon" viewBox="0 0 1109 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8307" xmlns:xlink="http://www.w3.org/1999/xlink" width="38.98828125" height="36"><path d="M306.07165232 286.53100586h88.45900173v402.31184159H306.07165232V286.53100586z m254.70480646 258.08684225h92.9683825c25.1773713 0 46.59692575-3.68265995 64.25866333-10.97282467 17.66173758-7.36532077 32.01659717-16.9853306 43.06457788-29.01034421 11.12313675-12.02501272 19.1648645-25.85377829 24.27549445-41.48629492a152.94313406 152.94313406 0 0 0 0-95.44854056 111.6071521 111.6071521 0 0 0-24.27549445-41.18566989 120.25012991 120.25012991 0 0 0-43.06457788-29.01034333A167.59861869 167.59861869 0 0 0 653.74484128 286.53100586H472.31745703v402.31184159h88.45900175v-144.30015625z m0-189.39395508h68.7680432c10.14610474 0 19.84127148 0.75156302 29.31096924 2.25468995a68.39226126 68.39226126 0 0 1 24.80158936 8.79329077 47.72427072 47.72427072 0 0 1 17.13564355 18.33814456 64.48413233 64.48413233 0 0 1 6.46344479 30.96440824c0 12.77657663-2.1795339 23.07299344-6.46344479 30.96440911a47.6491138 47.6491138 0 0 1-17.21079959 18.33814456 68.09163623 68.09163623 0 0 1-24.80158936 8.71813474c-9.39454172 1.50312692-19.08970846 2.25468994-29.31096923 2.25468994H560.85161569V355.29904907z" p-id="8308" fill="#778391"></path><path d="M997.43474439 61.06201172H101.72158671C79.2498442 61.06201172 61.06201172 80.60265817 61.06201172 104.65268362v814.69463276c0 24.05002634 18.18783249 43.5906719 40.65957499 43.5906719h895.71315768c22.47174337 0 40.65957499-19.54064646 40.65957497-43.5906719V104.65268362c0-24.05002634-18.18783249-43.5906719-40.65957497-43.5906719z m-20.36736551 835.73840524H122.0889531V126.44802001h854.97842578v770.35239695z" p-id="8309" fill="#778391"></path></svg>

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

@@ -15,9 +15,9 @@
                 allow-create
                 filterable
                 size="mini"
-                v-model="meta.column.name"
+                v-model="meta.column.label"
                 ref="columnSelect"
-                :placeholder="meta.column.name || ''"
+                :placeholder="meta.column.label || ''"
                 @blur="columnBlur(meta, index)"
                 @change="(value) => selectColumn(value, meta)"
             >
@@ -25,7 +25,7 @@
                   v-for="(column, index) in columnList"
                   :key="index"
                   :label="column.label"
-                  :value="column.name"
+                  :value="column.label"
               ></el-option>
             </el-select>
           </div>
@@ -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>
@@ -74,10 +75,20 @@
     </div>
     <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">
-        <i class="cn-icon cn-icon-search-normal"></i>
+      <div class="search__suffix" style="margin-right: 12px">
+        <el-popover
+            popper-class="my-popper-class"
+            placement="top"
+            :popper-style="{border: '1px red solid'}"
+            trigger="hover"
+            :content="$t('entity.switchToBasicSearch')"
+        >
+          <template #reference>
+            <i class="cn-icon cn-icon-search-normal" @click="changeMode"></i>
+          </template>
+        </el-popover>
       </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 +100,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 +143,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，所以是数组
+          }
         })
       }
     },
@@ -149,6 +164,18 @@ export default {
       } else {
         this.metaList.splice(index - 1, 2)
       }
+
+      if (this.metaList.length > 0) {
+        const parser = new Parser(this.columnList)
+        const errorList = parser.validateMeta(this.metaList)
+        if (_.isEmpty(errorList)) {
+          this.reloadUrl({ q: parser.parseMeta(this.metaList).q })
+        }
+      } else {
+        const routeQuery = this.$route.query
+        delete routeQuery.q
+        this.reloadUrl(routeQuery, 'cleanOldParams')
+      }
     },
     // 选择搜索条件的事件
     selectColumn (value, meta) {
@@ -160,7 +187,7 @@ export default {
         meta.resetValue()
       } else {
         const selectedColumn = this.columnList.find(column => {
-          return column.name === value
+          return column.label === value
         })
         meta.column.label = selectedColumn.label
         meta.column.type = selectedColumn.type
@@ -181,12 +208,12 @@ 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) {
       setTimeout(() => {
-        meta.column.name = meta.column.name.replace(/"/g, '')
+        meta.column.label = meta.column.label.replace(/"/g, '')
         meta.column.isEditing = false
         if (meta.isEmpty()) {
           if (this.metaList.length > 1) {
@@ -220,7 +247,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 +275,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 +295,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,13 +308,13 @@ export default {
     valueClick (meta) {
       meta.value.isEditing = true
       this.$nextTick(() => {
-        this.$refs.valueInput.focus()
+        this.$refs.valueInput[0].focus()
       })
     },
     // 判断是否是用户自己添加的内容，用于判断是否是全局搜索
     isCustomized (value) {
       return !this.columnList.some(meta => {
-        return meta.name === value
+        return meta.label === value
       })
     },
     enterSearch () {
@@ -308,13 +340,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,21 +358,28 @@ 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) {
       params.forEach(param => {
         const column = this.columnList.find(column => {
-          return column.name === param.column
+          return column.label === param.column
         })
         const meta = new Meta()
-        meta.column.name = param.column
+        meta.column.label = param.column
         meta.column.type = column ? column.type : columnType.string
         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)
@@ -347,16 +388,16 @@ export default {
     changeParams (params) {
       params.forEach(param => {
         const oldColumn = this.columnList.find(column => {
-          return column.name === param.oldParam.column
+          return column.label === param.oldParam.column
         })
         const newColumn = this.columnList.find(column => {
-          return column.name === param.newParam.column
+          return column.label === param.newParam.column
         })
-        const meta = this.metaList.find(m => m.column && m.column.name === oldColumn.name && m.operator.value === param.oldParam.operator && m.value.value === this.handleValue(param.oldParam.value, oldColumn, param.oldParam.operator))
+        const meta = this.metaList.find(m => m.column && m.column.label === oldColumn.label && m.operator.value === param.oldParam.operator && m.value.value === this.handleValue(param.oldParam.value, oldColumn, param.oldParam.operator))
         if (meta) {
-          meta.column.name = newColumn.name
+          meta.column.label = newColumn.label
           meta.column.type = newColumn.type
-          meta.column.label = newColumn.label ? newColumn.label : newColumn.name
+          meta.column.label = newColumn.label ? newColumn.label : newColumn.label
           meta.operator.value = param.newParam.operator
           meta.value.value = this.handleValue(param.newParam.value, newColumn, param.newParam.operator)
           meta.value.label = meta.value.value
@@ -366,9 +407,9 @@ export default {
     removeParams (params) {
       params.forEach(param => {
         const column = this.columnList.find(c => {
-          return c.name === param.column
+          return c.label === param.column
         })
-        const metaIndex = this.metaList.findIndex(m => m.column && m.column.name === param.column && m.operator.value === param.operator && m.value.value === this.handleValue(param.value, column, param.operator))
+        const metaIndex = this.metaList.findIndex(m => m.column && m.column.label === param.column && m.operator.value === param.operator && m.value.value === this.handleValue(param.value, column, param.operator))
         // 不是在首位，则删除时顺带删除前一个index（and或or），否则顺带删除后一个index
         if (metaIndex > 0) {
           this.metaList.splice(metaIndex - 1, 2)
@@ -378,10 +419,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 +458,23 @@ 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;
+  }
+}
+.my-popper-class .el-popper__arrow {
+  display: none;
+}
+</style>

src/components/advancedSearch/TextMode.vue

@@ -3,10 +3,22 @@
       ref="textSearch"
   ></textarea>
   <div class="search__suffixes search__suffixes--text-mode">
-    <div class="search__suffix" @click="changeMode">
-      <i class="cn-icon cn-icon-search-advance"></i>
+    <div class="search__suffix">
+      <el-popover
+          popper-class="my-popper-class"
+          placement="top"
+          trigger="hover"
+          :content="$t('entity.switchToAdvancedSearch')"
+      >
+        <template #reference>
+          <i class="cn-icon cn-icon-filter" @click="changeMode"></i>
+        </template>
+      </el-popover>
     </div>
-    <div class="search__suffix" @click="search">
+    <div class="search__suffix-close" @click="cleanParams">
+      <i class="el-icon-error"></i>
+    </div>
+    <div class="search__suffix new-search__suffix" @click="search">
       <i class="el-icon-search"></i>
     </div>
   </div>
@@ -24,6 +36,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 +51,12 @@ export default {
   },
   emits: ['changeMode', 'search'],
   methods: {
+    cleanParams () {
+      toRaw(this.codeMirror).setValue('')
+      const routeQuery = this.$route.query
+      delete routeQuery.q
+      this.reloadUrl(routeQuery, 'cleanOldParams')
+    },
     initCodeMirror () {
       this.codeMirror = CodeMirror.fromTextArea(this.$refs.textSearch, {
         mode: {
@@ -74,11 +93,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: [] })
       }
     },
@@ -99,7 +121,7 @@ export default {
     addParams (params) {
       let current = this.codeMirror.getValue()
       params.forEach(param => {
-        const column = this.columnList.find(c => c.name === param.column)
+        const column = this.columnList.find(c => c.label === param.column)
         current = `${current ? current + ' AND ' : ''}${param.column}${handleOperatorSpace(param.operator)}${this.handleValue(param.value, column, param.operator)}`
       })
       toRaw(this.codeMirror).setValue(current.trim())
@@ -107,7 +129,7 @@ export default {
     removeParams (params) {
       let current = this.codeMirror.getValue()
       params.forEach(param => {
-        const column = this.columnList.find(c => c.name === param.column)
+        const column = this.columnList.find(c => c.label === param.column)
         // 将对应内容替换为空串
         const sqlPiece = `${param.column}${handleOperatorSpace(param.operator)}${this.handleValue(param.value, column, param.operator)}`.trim()
         const sqlPieceWithConnection = [` AND ${sqlPiece}`, ` OR ${sqlPiece}`, `${sqlPiece} AND `, `${sqlPiece} OR `, sqlPiece]
@@ -120,14 +142,25 @@ export default {
     changeParams (params) {
       let current = this.codeMirror.getValue()
       params.forEach(param => {
-        const oldColumn = this.columnList.find(c => c.name === param.oldParam.column)
-        const newColumn = this.columnList.find(c => c.name === param.newParam.column)
+        const oldColumn = this.columnList.find(c => c.label === param.oldParam.column)
+        const newColumn = this.columnList.find(c => c.label === param.newParam.column)
         // 将oldParam内容替换为newParam
         const oldSqlPiece = `${param.oldParam.column}${handleOperatorSpace(param.oldParam.operator)}${this.handleValue(param.oldParam.value, oldColumn, param.oldParam.operator)}`.trim()
         const newSqlPiece = `${param.newParam.column}${handleOperatorSpace(param.newParam.operator)}${this.handleValue(param.newParam.value, newColumn, param.newParam.operator)}`.trim()
         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 +176,22 @@ export default {
     }
   },
   mounted () {
+    // 如果地址栏包含参数q，则将参数q回显到搜索栏内
+    let { q } = this.$route.query
     this.initCodeMirror()
+    if (q) {
+      // 为避免地址栏任意输入导致全查询的q带QUERY，解析时不识别导致的语法错误
+      // 如地址栏输入116.178.222.171，此时的q很长，刷新界面时需要把q里的116.178.222.171拿出来进行搜索
+      if (q.indexOf('QUERY') > -1) {
+        const strList = q.split(' ')
+        if (strList.length > 0) {
+          // 此时strList[1]为ip_addr:116.178.222.171，获取116.178.222.171
+          q = strList[1].slice(8)
+        }
+      }
+      toRaw(this.codeMirror).setValue(q)
+    }
+
     const vm = this
     this.emitter.on('advanced-search', function () {
       vm.search()
@@ -151,3 +199,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/meta.js

@@ -63,7 +63,7 @@ export default class Meta {
 
   isEmpty () {
     if (this.meta === condition) {
-      return _.isEmpty(this.column.name)
+      return _.isEmpty(this.column.label)
     } else {
       return true
     }
@@ -73,8 +73,8 @@ export default class Meta {
   isCompleteCondition () {
     if (this.meta === condition) {
       return (this.column.type === columnType.fullText)
-        ? !_.isEmpty(this.column.name)
-        : !_.isEmpty(this.column.name) && !_.isEmpty(this.operator.value) && (!_.isEmpty(this.value.value) || (_.isNumber(this.value.value) && !_.isNaN(this.value.value)))
+        ? !_.isEmpty(this.column.label)
+        : !_.isEmpty(this.column.label) && !_.isEmpty(this.operator.value) && (!_.isEmpty(this.value.value) || (_.isNumber(this.value.value) && !_.isNaN(this.value.value)))
     } else if (this.meta === connection) {
       return !!this.value
     }

src/components/advancedSearch/meta/parser.js

@@ -80,9 +80,9 @@ export default class Parser {
           str += `${meta.value.toUpperCase()} `
         } else if (meta.meta === condition) {
           if (meta.column.type === columnType.fullText) {
-            str += `'${meta.column.name}' `
+            str += `'${meta.column.label}' `
           } else if (meta.column.type === columnType.array) {
-            str += `${meta.column.name} ${meta.operator.value} (`
+            str += `${meta.column.label} ${meta.operator.value} (`
             meta.value.value.forEach((s, j) => {
               str += `'${s}'`
               if (j < meta.value.value.length) {
@@ -93,13 +93,13 @@ export default class Parser {
             str += ') '
           } else if (meta.column.type === columnType.string) {
             if (meta.operator.value.toLowerCase().indexOf('like') > -1 || meta.operator.value.toLowerCase().indexOf('in') > -1) {
-              str += `${meta.column.name} ${meta.operator.value} '${meta.value.value}' `
+              str += `${meta.column.label} ${meta.operator.value} '${meta.value.value}' `
             } else {
-              str += `${meta.column.name}${meta.operator.value}'${meta.value.value}' `
+              str += `${meta.column.label}${meta.operator.value}'${meta.value.value}' `
             }
           } else if (meta.column.type === columnType.number) {
             if (_.isNumber(Number(meta.value.value))) {
-              str += `${meta.column.name}${meta.operator.value}${meta.value.value} `
+              str += `${meta.column.label}${meta.operator.value}${meta.value.value} `
             } else {
               this.errorList.push(new ParserError(i, errorTypes.typeError, errorDesc.typeError.number))
               return
@@ -125,11 +125,11 @@ export default class Parser {
         if (meta.column.type === columnType.fullText) {
           str += "QUERY('"
           this.columnList.forEach(column => {
-            str += `${column.name}:${meta.column.name} `
+            str += `${column.label}:${meta.column.label} `
           })
           str += "') "
         } else if (meta.column.type === columnType.array) {
-          str += `${meta.column.name} ${meta.operator.value} (`
+          str += `${meta.column.label} ${meta.operator.value} (`
           meta.value.value.forEach((s, j) => {
             str += `'${s}'`
             if (j < meta.value.value.length) {
@@ -140,13 +140,13 @@ export default class Parser {
           str += ') '
         } else if (meta.column.type === columnType.string) {
           if (meta.operator.value.toLowerCase().indexOf('like') > -1 || meta.operator.value.toLowerCase().indexOf('in') > -1) {
-            str += `${meta.column.name} ${meta.operator.value} '${meta.value.value}' `
+            str += `${meta.column.label} ${meta.operator.value} '${meta.value.value}' `
           } else {
-            str += `${meta.column.name}${meta.operator.value}'${meta.value.value}' `
+            str += `${meta.column.label}${meta.operator.value}'${meta.value.value}' `
           }
         } else if (meta.column.type === columnType.number) {
           if (_.isNumber(Number(meta.value.value))) {
-            str += `${meta.column.name}${meta.operator.value}${meta.value.value} `
+            str += `${meta.column.label}${meta.operator.value}${meta.value.value} `
           }
         }
       }
@@ -566,12 +566,12 @@ export default class Parser {
             // 前面是连接符或空，后面是操作符，不在单引号内，则是key
             // 前面是连接符或操作符或空后面是连接符或空，或在单引号内，是value
             if (isInApostrophe) {
-              if (meta.column.name) {
+              if (meta.column.label) {
                 meta.value.value = token.value
                 meta.column.type = columnType.string
               } else {
                 meta.column.type = columnType.fullText
-                meta.column.name = token.value
+                meta.column.label = token.value
               }
             } else {
               let isColumn = true
@@ -579,14 +579,14 @@ export default class Parser {
                 if (prevToken) {
                   if (prevToken.type === types.connection && [types.commonOperator, types.letterOperator].indexOf(nextToken.type) > -1) {
                     meta.column.type = columnType.string
-                    meta.column.name = token.value
+                    meta.column.label = token.value
                   } else {
                     isColumn = false
                   }
                 } else {
                   if ([types.commonOperator, types.letterOperator].indexOf(nextToken.type) > -1) {
                     meta.column.type = columnType.string
-                    meta.column.name = token.value
+                    meta.column.label = token.value
                   } else {
                     isColumn = false
                   }
@@ -604,7 +604,7 @@ export default class Parser {
                     meta.column.type = columnType.string
                   } else if (prevToken && (!prevToken.prevToken || prevToken.prevToken.type === types.connection)) {
                     meta.column.type = columnType.fullText
-                    meta.column.name = token.value
+                    meta.column.label = token.value
                   } else {
                     errorList.push(new ParserError(token.end, errorTypes.syntaxError, errorDesc.syntaxError.unexpectedString))
                     break
@@ -631,14 +631,14 @@ export default class Parser {
                           meta.value.value = token.value
                         }
                       } else if (prevToken.type === types.connection) {
-                        meta.column.name = token.value
+                        meta.column.label = token.value
                         meta.column.type = columnType.fullText
                       } else {
                         errorList.push(new ParserError(token.end, errorTypes.syntaxError, errorDesc.syntaxError.unexpectedString))
                         break
                       }
                     } else {
-                      meta.column.name = token.value
+                      meta.column.label = token.value
                       meta.column.type = columnType.fullText
                     }
                   } else {
@@ -707,10 +707,10 @@ export default class Parser {
           if (meta.column.type === columnType.fullText) {
             meta.operator.show = false
             meta.value.show = false
-            meta.column.label = meta.column.name
+            // meta.column.label = meta.column.name
             metaList.push(meta)
           } else {
-            const column = this.columnList.find(c => c.name === meta.column.name)
+            const column = this.columnList.find(c => c.label === meta.column.label)
             if (column) {
               meta.operator.show = true
               meta.value.show = true
@@ -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,11 @@
             <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"
+                :unlink-panels="true"
                 type="datetimerange"
                 @change="timeArrChange"
             />
@@ -78,7 +80,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 +96,12 @@ export default {
     },
     dateRange: {
       type: Number
+    },
+    class: {
+      type: String
+    },
+    style: {
+      type: String
     }
   },
   emits: ['change'],
@@ -102,6 +110,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 +125,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 +176,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 +217,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()
@@ -242,6 +252,7 @@ export default {
      * 重置时间，将时间存入缓存，并触发方法请求接口刷新界面
      */
     const returnValue = () => {
+      store.commit('setTimeFilter', { startTime: myStartTime.value, endTime: myEndTime.value, range: dateRangeValue.value })
       cancelHttp()
       rangeHistory.value.unshift({
         start: myStartTime.value,
@@ -269,11 +280,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,8 +20,7 @@ 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;'
-        return style
+        return 'overflow:auto;'
       } 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>
@@ -214,25 +192,27 @@ import { get, put } from '@/utils/http'
 import {
   curTabState,
   entityType,
+  fromRoute,
   networkTable,
   operationType,
   storageKey,
-  wholeScreenRouterMapping,
-  fromRoute
+  wholeScreenRouterMapping
 } from '@/utils/constants'
 import { api } from '@/utils/api'
 import { ref } from 'vue'
 import {
+  combineDrilldownTableWithUserConfig,
   combineTabList,
   getDefaultCurTab,
-  getTabList,
-  overwriteUrl,
-  urlParamsHandler,
-  combineDrilldownTableWithUserConfig,
   getDnsMapData,
-  handleSpecialValue
+  getTabList,
+  handleSpecialValue,
+  overwriteUrl,
+  urlParamsHandler
 } from '@/utils/tools'
 import { getNowTime, getSecond } from '@/utils/date-util'
+import _ from 'lodash'
+import { useRoute } from 'vue-router'
 
 export default {
   name: 'Header',
@@ -244,6 +224,13 @@ export default {
         callback()
       }
     }
+    const validateFiveLength = (rule, value, callback) => {
+      if (value.length < 5) {
+        callback(new Error(this.$t('validate.atLeastFive')))
+      } else {
+        callback()
+      }
+    }
     return {
       username: localStorage.getItem(storageKey.username),
       language: localStorage.getItem(storageKey.language) ? localStorage.getItem(storageKey.language) : 'en',
@@ -264,11 +251,17 @@ export default {
           required: true,
           message: this.$t('validate.required'),
           trigger: 'blur'
+        }, {
+          validator: validateFiveLength,
+          trigger: 'change'
         }],
         newPwd2: [{
           required: true,
           message: this.$t('validate.required'),
           trigger: 'blur'
+        }, {
+          validator: validateFiveLength,
+          trigger: 'change'
         }, {
           validator: passwordComparison,
           trigger: 'blur'
@@ -310,7 +303,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 +319,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 +364,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')
@@ -389,6 +373,11 @@ export default {
           this.dnsRcodeMapData = await getDnsMapData('dnsRcode')
         }
       }
+    },
+    '$store.getters.timeFilter': function (newVal) {
+      if (newVal && Object.keys(newVal).length > 0) {
+        this.chartTimeFilter = newVal
+      }
     }
   },
   async mounted () {
@@ -405,22 +394,73 @@ export default {
     this.initDropdownList()
   },
   setup () {
-    const dateRangeValue = 60
-    const {
-      startTime,
-      endTime
-    } = getNowTime(dateRangeValue)
-    const chartTimeFilter = ref({
-      startTime,
-      endTime,
-      dateRangeValue
-    })
+    const { query } = useRoute()
+    // 获取url携带的range、startTime、endTime
+    const rangeParam = query.range
+    const startTimeParam = query.startTime
+    const endTimeParam = query.endTime
+    // 若url携带了，使用携带的值，否则使用默认值。
+
+    const dateRangeValue = rangeParam ? parseInt(query.range) : 60
+    const chartTimeFilter = ref({ dateRangeValue })
+    if (!startTimeParam || !endTimeParam) {
+      const { startTime, endTime } = getNowTime(60)
+      chartTimeFilter.value.startTime = startTime
+      chartTimeFilter.value.endTime = endTime
+    } else {
+      chartTimeFilter.value.startTime = parseInt(startTimeParam)
+      chartTimeFilter.value.endTime = parseInt(endTimeParam)
+    }
+
     return {
       chartTimeFilter,
       entityType // 所有entity类型，用于header下拉框选择
     }
   },
   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 +572,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 +592,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 => {
@@ -579,6 +619,15 @@ export default {
               this.showChangePin = false
             } else if (res.code === 518005) {
               this.$message.error('密码错误')
+            } else {
+              this.$message.error(res.message)
+            }
+          }).catch(e => {
+            console.error(e)
+            if (e.response.data && e.response.data.message) {
+              this.$message.error(e.response.data.message)
+            } else {
+              this.$message.error('Something went wrong...')
             }
           })
         } else {
@@ -627,9 +676,7 @@ 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 = ''
-          }
+          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>
-    <cn-container v-if="containerShow" ref="container"></cn-container>
+    <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,26 +233,29 @@
 <!--            <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>-->
-            <el-select v-model="param.value"
-                       v-for="(param, index) in editObject.categoryParams"
-                       :key="index"
-                       class="right-box__select right-box__select--param"
-                       placeholder=" "
-                       filterable
-                       :disabled="!!editObject.id"
-                       popper-class="right-box-select-dropdown right-box-select-report "
-                       size="small"
-            >
-              <template #prefix>
-                {{$t(param.i18n)}}
-              </template>
-              <template v-for="paramOption in paramsOptions">
-                <template v-if="paramOption.key === param.key">
+            <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-else
+                         class="right-box__select right-box__select--param"
+                         placeholder=" "
+                         filterable
+                         :disabled="!!editObject.id"
+                         popper-class="right-box-select-dropdown right-box-select-report "
+                         size="small"
+              >
+                <template #prefix>
+                  {{$t(param.i18n)}}
+                </template>
+                <template v-for="paramOption in paramsOptions">
+                  <template v-if="paramOption.key === param.key">
                     <el-option :key="p" :value="p" v-for="p in paramOption.options"></el-option>
                   </template>
                 </template>
-
-            </el-select>
+              </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()
-      }
+      this.cleanScheduleConfig()
     },
     scheduleChecked (n) {
       this.editObject.config.isScheduler = n ? 1 : 0
-      if (!this.editObject.id) {
-        this.cleanScheduleConfig()
-      }
+      this.cleanScheduleConfig()
     },
     monthScheduleType (n) {
-      if (!this.editObject.id) {
-        this.cleanScheduleConfig()
-      }
+      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/ChartBox.vue

@@ -376,7 +376,7 @@ export default {
                 this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
                 this.esc(true)
               } else {
-                this.$message.error(res.msg)
+                this.$message.error(res.msg || res.message)
               }
             })
           } else {
@@ -386,7 +386,7 @@ export default {
                 this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
                 this.esc(true)
               } else {
-                this.$message.error(res.msg)
+                this.$message.error(res.msg || res.message)
               }
             })
           }

src/components/rightBox/settings/I18nBox.vue

@@ -112,7 +112,7 @@ export default {
                 this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
                 this.esc(true)
               } else {
-                this.$message.error(res.msg)
+                this.$message.error(res.msg || res.message)
               }
             })
           } else {
@@ -122,7 +122,7 @@ export default {
                 this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
                 this.esc(true)
               } else {
-                this.$message.error(res.msg)
+                this.$message.error(res.msg || res.message)
               }
             })
           }

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>
@@ -64,13 +64,26 @@ export default {
     detail: Boolean
   },
   data () {
+    const validateName = (rule, value, callback) => {
+      let validate = true
+      const reg = /^[a-zA-Z0-9\u4e00-\u9fa5\u30a1-\u30f6\u3041-\u3093\uFF00-\uFFFF\u4e00-\u9fa5\u0400-\u04FF\s]{2,64}$/
+      validate = reg.test(value)
+      if (value.length < 2) {
+        callback(new Error(this.$t('validate.atLeastTwo')))
+      } else if (!validate) {
+        callback(new Error(this.$t('validate.name')))
+      } else {
+        callback()
+      }
+    }
     return {
       editRole: {},
       url: api.role,
       rightBox: { model: { show: false } },
       rules: { // 表单校验规则
         name: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          { validator: validateName, trigger: 'change' }
         ]
       },
       menus: [],
@@ -113,7 +126,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 +136,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 +174,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) => {
@@ -173,7 +186,7 @@ export default {
                 this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
                 this.esc(true)
               } else {
-                this.$message.error(res.msg)
+                this.$message.error(res.msg || res.message)
               }
             })
           } else {
@@ -183,7 +196,7 @@ export default {
                 this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
                 this.esc(true)
               } else {
-                this.$message.error(res.msg)
+                this.$message.error(res.msg || res.message)
               }
             })
           }

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,35 +125,67 @@ 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 {
         callback()
       }
     }
+    const validateName = (rule, value, callback) => {
+      let validate = true
+      const reg = /^[a-zA-Z0-9\u4e00-\u9fa5\u30a1-\u30f6\u3041-\u3093\uFF00-\uFFFF\u4e00-\u9fa5\u0400-\u04FF\s]{2,64}$/
+      validate = reg.test(value)
+      if (value.length < 2) {
+        callback(new Error(this.$t('validate.atLeastTwo')))
+      } else if (!validate) {
+        callback(new Error(this.$t('validate.name')))
+      } else {
+        callback()
+      }
+    }
+    const validateUserName = (rule, value, callback) => {
+      let validate = true
+      const reg = /^[a-zA-Z0-9_]{2,64}$/
+      validate = reg.test(value)
+      if (value.length < 2) {
+        callback(new Error(this.$t('validate.atLeastTwo')))
+      } else if (!validate) {
+        callback(new Error(this.$t('validate.userName')))
+      } else {
+        callback()
+      }
+    }
     return {
       url: api.user,
       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' },
+          { validator: validateName, trigger: 'change' }
         ],
         username: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          { validator: validateUserName, trigger: 'change' }
         ],
         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 +193,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: [],
@@ -203,7 +241,7 @@ export default {
                 this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
                 this.esc(true)
               } else {
-                this.$message.error(res.msg)
+                this.$message.error(res.msg || res.message)
               }
             })
           } else {
@@ -213,7 +251,7 @@ export default {
                 this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
                 this.esc(true)
               } else {
-                this.$message.error(res.msg)
+                this.$message.error(res.msg || res.message)
               }
             })
           }

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,44 +1,66 @@
 <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"
-        >
-          <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>
+    <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-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>
 
 <script>
-import { storageKey } from '@/utils/constants'
+import indexedDBUtils from '@/indexedDB'
+import { storageKey, dbTableColumnCustomizeConfigPre } from '@/utils/constants'
+import { get } from '@/utils/http'
 export default {
   props: {
     customTableTitle: Array, // 自定义的title
@@ -48,14 +70,17 @@ export default {
   },
   data () {
     return {
-      custom: []
+      custom: [],
+      dragIndex: -1,
+      selectList: []
     }
   },
   created () {
+    /*
     const localStorageTitle = JSON.parse(localStorage.getItem(storageKey.tableTitle + '-' + localStorage.getItem(storageKey.username) + '-' + this.tableId))
     if (localStorageTitle) {
       localStorage.setItem(storageKey.tableTitle + '-' + localStorage.getItem(storageKey.username) + '-' + this.tableId, JSON.stringify(localStorageTitle))
-    }
+    } */
   },
   watch: {
     customTableTitle: {
@@ -63,10 +88,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,16 +144,36 @@ 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
       }
     },
     // 点击第二个cancel
-    save () {
+    async save () {
       this.$emit('update', this.custom)
-      localStorage.setItem(storageKey.tableTitle + '-' + localStorage.getItem(storageKey.username) + '-' + this.tableId,
-        JSON.stringify(this.custom))
-      this.esc()
+      const userId = localStorage.getItem(storageKey.userId)
+      const tableName = dbTableColumnCustomizeConfigPre + '-' + this.tableId
+
+      const defaultConfigInDb = await indexedDBUtils.selectTable(tableName).get({ id: userId })
+      let fullVersion = ''
+      if (defaultConfigInDb && defaultConfigInDb.version) {
+        const oldVersion = defaultConfigInDb.version
+        if (oldVersion.startsWith(BASE_CONFIG.version)) {
+          const realVersion = Number(oldVersion.substring(BASE_CONFIG.version.length + 1))
+          fullVersion = BASE_CONFIG.version + '.' + (realVersion + 1)
+        } else {
+          fullVersion = BASE_CONFIG.version + '.1'
+        }
+      } else {
+        fullVersion = BASE_CONFIG.version + '.1'
+      }
+
+      await indexedDBUtils.selectTable(tableName).put({
+        id: userId,
+        version: fullVersion,
+        config: _.cloneDeep(this.custom)
+      })
     }
   },
   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>
-        </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>
 
 <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>
-        </div>
-      </template>
-    </el-table-column>
+    </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>
 
@@ -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>
-      </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>
-        </div>
+        <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>
 
@@ -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>
@@ -51,40 +52,22 @@
         </template>
         <template v-else-if="item.prop === 'status'">
           <el-switch
-                  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) "
-                  inactive-value="0"
-                  @change="()=>{statusChange(scope.row)}">
+              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) || scope.row.buildIn === 1"
+              inactive-value="0"
+              @change="()=>{statusChange(scope.row)}">
           </el-switch>
         </template>
-        <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>
-        </div>
+        <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>
 
@@ -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>
-          </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>
-    <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,26 @@
-import { dbName, dbGeoDataTableName, dbDrilldownTableConfig } from '@/utils/constants'
+import { dbName, dbGeoDataTableName, dbDrilldownTableConfig, dbUserTableColumnCustomizeConfig, dbRoleTableColumnCustomizeConfig, dbOperationLogTableColumnCustomizeConfig, dbChartTableColumnCustomizeConfig, dbI18nTableColumnCustomizeConfig, dbReportTableColumnCustomizeConfig, dbGalaxySettingTableColumnCustomizeConfig } 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(4).stores({
   [dbGeoDataTableName]: '++name, geo',
-  [dbDrilldownTableConfig]: '++id, config'
+  [dbDrilldownTableConfig]: '++id, config',
+  [dbUserTableColumnCustomizeConfig]: '++id, config',
+  [dbRoleTableColumnCustomizeConfig]: '++id, config',
+  [dbOperationLogTableColumnCustomizeConfig]: '++id, config',
+  [dbChartTableColumnCustomizeConfig]: '++id, config',
+  [dbI18nTableColumnCustomizeConfig]: '++id, config',
+  [dbReportTableColumnCustomizeConfig]: '++id, config',
+  [dbGalaxySettingTableColumnCustomizeConfig]: '++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

@@ -1,14 +1,17 @@
 import { tableSort } from '@/utils/tools'
-import { defaultPageSize, fromRoute, position, storageKey } from '@/utils/constants'
+import { defaultPageSize, fromRoute, position, storageKey, dbTableColumnCustomizeConfigPre } from '@/utils/constants'
 import { get, del } from '@/utils/http'
 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'
+import indexedDBUtils from '@/indexedDB'
 
 export default {
   components: {
-    pagination
+    pagination,
+    Loading
   },
   data () {
     return {
@@ -20,11 +23,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 +40,11 @@ export default {
       tableData: [],
       scrollbarWrap: null,
       delFlag: false,
-      operationWidth: '165' // 操作列宽
+      disableEdit: true, // 编辑按钮是否不可用，当选择多条记录的时候，编辑按钮不可用
+      disableDelete: true,
+      operationWidth: '165', // 操作列宽
+      loading: true,
+      isNoData: false
     }
   },
   methods: {
@@ -72,30 +79,67 @@ 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.type = ''// 换新接口需要修改的属性名称
+      }
       if (params) {
         this.searchLabel = { ...this.searchLabel, ...params }
       }
       this.searchLabel = { ...this.searchLabel, ...this.pageObj }
-      this.tools.loading = true
+      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 回到顶部
+          if (!this.tableData || this.tableData.length === 0) {
+            this.isNoData = true
+          } else {
+            this.isNoData = false
+          }
+        } else {
+          console.error(response)
+          this.isNoData = true
+          if (response.message) {
+            this.$message.error(response.message)
+          } else {
+            this.$message.error('Something went wrong...')
+          }
         }
+      }).catch(() => {
+        this.isNoData = true
+      }).finally(() => {
+        this.toggleLoading(false)
       })
     },
     del (row) {
@@ -113,7 +157,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))
@@ -131,6 +217,7 @@ export default {
     },
     pageSize (val) {
       this.pageObj.pageSize = val
+      this.pageObj.pageNo = 1
       localStorage.setItem(storageKey.pageSize + '-' + localStorage.getItem(storageKey.username) + '-' + this.tableId, val)
       this.getTableData()
     },
@@ -153,6 +240,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
@@ -161,8 +263,14 @@ export default {
       if (this.$refs.dataTable.loadingTableId === u.id) { // 列表单个下载
         return
       }
-      if (u.state !== 1 || u.upload !== 1) {
-        return
+      if (localStorage.getItem(storageKey.s3Enable) == 1) {
+        if (u.state !== 1 || u.upload !== 1) {
+          return
+        }
+      } else {
+        if (u.state !== 1) {
+          return
+        }
       }
       let fileName = ''
       let url = ''
@@ -223,8 +331,14 @@ export default {
       if (this.$refs.dataTable.loadingPreviewId === u.id) { // 列表单个下载
         return
       }
-      if (u.state !== 1 || u.upload !== 1) {
-        return
+      if (localStorage.getItem(storageKey.s3Enable) == 1) {
+        if (u.state !== 1 || u.upload !== 1) {
+          return
+        }
+      } else {
+        if (u.state !== 1) {
+          return
+        }
       }
       const params = {
         id: u.id
@@ -248,7 +362,9 @@ export default {
     },
     dragend () {
       this.$nextTick(() => {
-        this.$refs.dataTable.$refs.dataTable.doLayout()
+        if (this.$refs.dataTable && this.$refs.dataTable.$refs.dataTable) {
+          this.$refs.dataTable.$refs.dataTable.doLayout()
+        }
       })
     },
     tableDataSort (orderBy) {
@@ -257,6 +373,8 @@ export default {
     },
     search (params) {
       this.pageObj.pageNo = 1
+      delete this.searchLabel.category
+      delete this.searchLabel.source
       this.getTableData(params)
     },
     getTimeString () {
@@ -291,23 +409,46 @@ export default {
       }
     }
   },
-  mounted () {
+  async mounted () {
     const pageSize = localStorage.getItem(storageKey.pageSize + '-' + localStorage.getItem(storageKey.username) + '-' + this.tableId)
     if (pageSize && pageSize !== 'undefined') {
       this.pageObj.pageSize = pageSize
     }
-    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
+    const userId = localStorage.getItem(storageKey.userId)
+    const tableName = dbTableColumnCustomizeConfigPre + '-' + this.tableId
+    let localStorageTableTitle = []
+    if (indexedDBUtils.selectTable(tableName)) {
+      localStorageTableTitle = await indexedDBUtils.selectTable(tableName).get({ id: userId })
+    }
+
+    localStorageTableTitle = localStorageTableTitle && localStorageTableTitle.config
+      ? localStorageTableTitle.config
+      : (this.$refs.dataTable && this.$refs.dataTable.tableTitle ? this.$refs.dataTable.tableTitle : [])
+    // 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
   }
 }