fix: 修复npm折线图堆叠bug

.gitlab-ci.yml

@@ -10,7 +10,7 @@ cache:
       - package.json
   paths:
     - node_modules
-    - dist/
+#    - dist/
 
 before_script:
   - export CNUI_TAG=$(date +%Y%m%d%H%M%S)
@@ -29,7 +29,7 @@ generate_git-log:
       - public/index.html
       - public/git-log.html
   only:
-    - dev
+    - dev-22.12
   tags:
     - galaxy
 
@@ -41,29 +41,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
+    - dev-22.12
     - tags
   tags:
     - galaxy
 
 build_image:
+  dependencies:
+    - build_project
   stage: build_image
   script:
     - echo "docker build"
-    - sudo docker build -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
+    - dev-22.12
   tags:
     - galaxy
 
 
 build_release_image:
+  dependencies:
+    - build_project
   stage: build_image
   script:
     - echo 'tag名称是'
@@ -71,11 +80,11 @@ build_release_image:
     - echo '提交的版本是'
     - echo $CI_COMMIT_REF_NAME
     - echo "docker build"
-    - sudo docker build -t cn-ui:$CI_COMMIT_TAG .
+    - sudo docker build --no-cache -t cn-ui-$CI_COMMIT_REF_NAME:$CI_COMMIT_TAG .
     - echo "docker tag"
-    - sudo docker tag cn-ui:$CI_COMMIT_TAG 192.168.40.153:9080/cyber-narrator/cn-ui:$CI_COMMIT_TAG
+    - sudo docker tag cn-ui-$CI_COMMIT_REF_NAME:$CI_COMMIT_TAG 192.168.40.153:9080/cyber-narrator/cn-ui-$CI_COMMIT_REF_NAME:$CI_COMMIT_TAG
     - echo "docker push"
-    - sudo docker push 192.168.40.153:9080/cyber-narrator/cn-ui:$CI_COMMIT_TAG
+    - sudo docker push 192.168.40.153:9080/cyber-narrator/cn-ui-$CI_COMMIT_REF_NAME:$CI_COMMIT_TAG
   only:
     - tags
   tags:

babel.config.js

@@ -12,8 +12,9 @@ module.exports = {
   ],
   plugins: [
     '@vue/babel-plugin-jsx',
-    ['@babel/proposal-class-properties', { loose: true }],
+    ['@babel/plugin-proposal-class-properties', { loose: true }],
     ['@babel/plugin-proposal-private-methods', { loose: true }],
+    ['@babel/plugin-proposal-private-property-in-object', { loose: true }],
     '@babel/transform-runtime',
     'lodash'
   ],

jest.config.js

@@ -0,0 +1,32 @@
+module.exports = {
+  roots: [
+    '<rootDir>/test'
+  ],
+  testMatch: [
+    '<rootDir>/test/**/__tests__/**/*.{vue,js,jsx,ts,tsx}',
+    '<rootDir>/test/**/*.{spec,test}.{vue,js,jsx,ts,tsx}'
+  ],
+  testEnvironment: 'jsdom',
+  transform: {
+    '^.+\\.(vue)$': '<rootDir>/node_modules/vue-jest',
+    '^.+\\.(js|jsx|mjs|cjs|ts|tsx)$': '<rootDir>/node_modules/babel-jest'
+  },
+  transformIgnorePatterns: [
+    '<rootDir>/node_modules/',
+    '[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$',
+    '^.+\\.module\\.(css|sass|scss|less)$'
+  ],
+  moduleFileExtensions: [
+    'vue',
+    'js',
+    'jsx',
+    'ts',
+    'tsx',
+    'json',
+    'node'
+  ],
+  moduleNameMapper: {
+    '@/(.*)$': '<rootDir>/src/$1'
+  },
+  resetMocks: true
+}

package.json

@@ -6,6 +6,7 @@
     "serve": "vue-cli-service serve",
     "build": "cross-env NODE_ENV=production vue-cli-service build",
     "lint": "vue-cli-service lint",
+    "test": "jest",
     "analyz": "cross-env NODE_ENV=production npm_config_report=true npm run build"
   },
   "dependencies": {
@@ -48,17 +49,23 @@
     "@rollup/plugin-commonjs": "^15.1.0",
     "@rollup/plugin-node-resolve": "^9.0.0",
     "@rollup/plugin-typescript": "^6.0.0",
-    "@types/jest": "^26.0.10",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/user-event": "^14.4.3",
+    "@testing-library/vue": "^6.4.2",
+    "@types/jest": "^26.0.24",
     "@types/lodash": "^4.14.161",
     "@typescript-eslint/eslint-plugin": "^3.10.1",
     "@typescript-eslint/parser": "^3.10.1",
     "@vue/babel-plugin-jsx": "^1.0.0",
+    "@vue/babel-preset-app": "^5.0.8",
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
     "@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",
     "babel-eslint": "^10.1.0",
+    "babel-jest": "^26.0.0",
     "compression-webpack-plugin": "^8.0.1",
     "cross-env": "^7.0.3",
     "eslint": "^7.22.0",
@@ -67,7 +74,10 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.3.1",
     "eslint-plugin-vue": "^7.7.0",
+    "jest": "^26.0.0",
+    "ts-jest": "^26.4.4",
     "uglifyjs-webpack-plugin": "^2.2.0",
+    "vue-jest": "^5.0.0-alpha.10",
     "vue3-ace-editor": "^2.0.2"
   },
   "browserslist": [

public/images/logo-title.svg

@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="278px" height="134px" viewBox="0 0 278 134" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组</title>
+    <defs>
+        <filter x="-17.8%" y="-24.0%" width="135.5%" height="147.9%" filterUnits="objectBoundingBox" id="filter-1">
+            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <filter x="-4.6%" y="-33.1%" width="109.2%" height="166.2%" filterUnits="objectBoundingBox" id="filter-2">
+            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+    </defs>
+    <g id="🪁login" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="登录定" transform="translate(-821.000000, -321.000000)">
+            <g id="编组-29备份-2" transform="translate(-92.000000, 0.483548)">
+                <g id="编组-3" transform="translate(845.000000, 261.000000)">
+                    <g id="编组" transform="translate(77.000000, 70.000000)">
+                        <g id="编组-2" filter="url(#filter-1)" transform="translate(92.000000, 0.000000)">
+                            <g id="编组-6" transform="translate(35.050168, 0.000000)" fill="#07C8EA">
+                                <path d="M27.0984325,0.0122014594 L31.8461546,0.0441807494 C33.4287159,0.0529564615 35.0111814,0.057058831 36.5933025,0.0481199837 C39.7135537,0.0288820298 40.9989786,1.482222 40.9483988,4.6197574 C40.8553785,10.3255597 40.893168,16.0325764 40.9093577,21.7387835 L40.9152603,25.1623944 L40.9214617,37.9840697 L40.9100279,44.3951016 C40.8908425,49.6015915 40.4443448,50.033571 35.0933494,50.052809 C30.3405147,50.0699729 25.5830136,50.1620025 20.8322952,50.0868551 L20.7215855,50.0942095 L20.7215855,50.0942095 L20.5477593,50.0992315 C18.9139006,50.0992315 17.5893964,48.7747273 17.5893964,47.1408687 C17.5893964,45.50701 18.9139006,44.1825058 20.5477593,44.1825058 L20.474,44.184 L20.4742959,44.1750333 C21.1471703,44.1739628 21.8199738,44.181749 22.4925791,44.1939776 L23.5363069,44.2159125 C27.0892892,44.2985782 30.6348941,44.4415229 34.1543247,43.9933811 L34.9660278,43.8791747 L34.9660278,6.26547692 C33.1063476,6.26547692 31.2448143,6.23793166 29.3832537,6.20623276 L26.5911206,6.15849312 C21.9382921,6.0834815 17.2909993,6.05560833 12.6777715,6.44036741 C8.6401071,6.77790605 5.98379485,10.2529801 5.89658827,14.448603 C5.6888441,24.353954 5.80079615,34.2622872 5.81918245,44.6967563 L0.447293679,44.6970037 L0.446704038,54.9559323 C0.117345075,53.9801448 0.113539117,52.6941057 0.104327596,51.8104584 C-0.0299705283,39.8654379 -0.0177616079,27.9186685 0.0467712572,15.9718991 C0.0973510704,7.02275274 6.25064696,0.487095115 15.2364124,0.139063039 C19.1868702,-0.0134803334 23.1421729,-0.0121848483 27.0984325,0.0122014594 Z" id="形状结合"></path>
+                            </g>
+                            <g id="编组-6" fill="#427497">
+                                <path d="M25.7134192,0.139063039 C34.6991847,0.487095115 40.8524806,7.02275274 40.9030604,15.9718991 L40.904,16.078 L40.902,16.078 L40.9025818,16.0941369 C40.9025818,17.6439559 39.6910759,18.9108125 38.1634453,18.9993255 L37.9924532,19.0042656 C36.3852335,19.0042656 35.0823245,17.7013566 35.0823245,16.0941369 C35.0823245,16.0780245 35.0824554,16.0619426 35.0827163,16.0458923 L35.0846058,16.0783793 C35.0750677,15.535054 35.0646363,14.991824 35.0532433,14.448603 C34.9660368,10.2529801 32.3097245,6.77790605 28.2720601,6.44036741 C23.6588323,6.05560833 19.0115395,6.0834815 14.358711,6.15849312 L11.566578,6.20623276 C9.70501736,6.23793166 7.84348402,6.26547692 5.98380382,6.26547692 L5.98380382,43.8791747 C9.76950351,44.4638711 13.587236,44.3049371 17.4135248,44.2159125 L18.4572525,44.1939776 C24.024744,44.0927552 29.6058224,44.2959137 35.128241,47.3070283 C35.128241,46.4331109 35.1291226,45.5631201 35.1306492,44.6967563 C35.1675419,43.1280395 36.4488408,41.8672653 38.0246093,41.8672653 C39.6211734,41.8672653 40.9154443,43.1615363 40.9154443,44.7581003 C40.9154443,44.8307331 40.9127656,44.9027403 40.9075017,44.9740284 L40.9088955,44.6972456 C40.8930463,47.0683764 40.8721613,49.4394518 40.845504,51.8104584 C40.8298068,53.3162655 40.8298068,55.990576 39.2077646,56.3068929 C37.5857223,56.6232099 35.9043795,55.3887179 34.756741,54.3638596 C31.4359146,51.4029636 27.806377,49.8569316 23.2908206,50.0090864 C17.486351,50.2067126 11.6679283,50.0737959 5.85648222,50.052809 C0.505486811,50.033571 0.0589891496,49.6015915 0.0398037033,44.3951016 C0.0171299939,37.9836163 0.0345713088,31.5738798 0.0345713088,25.1623944 C0.0363154403,18.3154317 0.113057226,11.4667201 0.00143281049,4.6197574 C-0.0491470027,1.482222 1.2362779,0.0288820298 4.35652914,0.0481199837 C5.93865019,0.057058831 7.52111576,0.0529564615 9.10367704,0.0441807494 L13.8513991,0.0122014594 C17.8076588,-0.0121848483 21.7629614,-0.0134803334 25.7134192,0.139063039 Z" id="形状结合"></path>
+                            </g>
+                        </g>
+                        <g id="编组备份-3" filter="url(#filter-2)" transform="translate(0.000000, 78.000000)" fill="#FFFFFF">
+                            <path d="M115.414634,3.4395964 C118.349928,2.7814294 120.475231,3.29905032 122.160731,5.90343768 C124.483413,9.49250456 127.148437,12.8399007 129.656213,16.2987054 C130.134509,16.9585864 130.56694,17.6544608 131.390854,18.88681 L131.390854,3.34275672 L136.97561,3.34275672 L136.97561,29.405484 C133.211489,30.4201581 132.565299,30.0088038 130.615261,26.8070956 C127.699624,22.0182451 124.570227,17.3716547 121.53174,12.6650751 C121.328628,12.749917 121.124697,12.8347588 120.921585,12.9196007 L120.921585,29.5546 L115.414634,29.5546 L115.414634,3.4395964 Z" id="Fill-3"></path>
+                            <path d="M52.5622826,19.5533129 C52.5622826,20.896183 52.5088273,22.2433081 52.5906808,23.5802213 C52.6199142,24.0550766 52.8596279,24.7231077 53.2146047,24.9324524 C54.4716401,25.6745201 57.2421295,24.9758532 58.2268768,23.7963741 C59.7353193,21.9905626 60.0802732,17.5781534 58.8733522,15.5408713 C57.9153325,13.9248317 56.2523707,13.4984832 53.9153706,13.9903583 C51.9625807,14.4022399 52.6833924,15.8736103 52.5756465,17.0105397 C52.4954635,17.8504718 52.5597769,18.7048708 52.5622826,19.5533129 M52.5330493,0 L52.5330493,9.65368764 C53.208758,9.5405053 53.6698102,9.49284958 54.1166633,9.38477321 C59.6952278,8.0333931 63.9023291,10.7650872 65.0299024,16.4812208 C66.1015147,21.9071651 64.1203266,26.9127179 59.9833855,28.7985229 C55.9491788,30.6358212 51.8139081,29.8256739 47.7396098,28.8470296 C47.3829626,28.7610791 46.9837181,27.8930642 46.9812124,27.3867221 C46.934439,19.0265469 46.9645076,10.6663717 46.9268751,2.30619654 C46.9219104,1.14373732 47.3194844,0.630587319 48.4453872,0.535275875 C49.7375027,0.424646521 51.0204305,0.203387813 52.5330493,0" id="Fill-5"></path>
+                            <path d="M19.5137739,23.4304503 C19.9932034,24.8985873 20.4620513,26.3353612 20.9268293,27.7602679 C14.4720316,31.407724 6.23789114,30.2659338 2.48710831,25.2529068 C-1.22541783,20.2898914 -0.709359604,11.0682613 3.55178365,6.23408942 C7.21547147,2.07888852 15.6189181,1.27107406 20.5540301,4.64219483 C20.064019,6.07049216 19.569938,7.51150431 19.047368,9.03558657 C14.6893621,7.55219171 10.4103114,6.14678104 7.12023675,10.7351332 C5.254613,13.3374317 5.32949842,19.2684681 7.28465909,21.8139737 C10.743226,26.3184081 15.1354187,24.6230997 19.5137739,23.4304503" id="Fill-7"></path>
+                            <path d="M80.9573503,17.4186957 C80.6994597,14.8122308 79.7157449,13.6997668 77.8026508,13.6278585 C75.6024709,13.5441065 74.4971096,14.6464187 74.0851334,17.4186957 L80.9573503,17.4186957 Z M85.2271429,28.6702323 C81.6093756,29.9578141 78.1497488,30.3511949 74.691744,29.2725702 C70.8371715,28.0704323 68.9305652,25.1475708 68.5664366,21.0217254 C68.1731129,16.5684856 69.1925106,12.666825 73.0543819,10.2946966 C76.3404597,8.27534184 79.851989,8.46568738 82.955597,10.8132824 C86.3227725,13.3596828 86.3714311,17.194511 86.1832845,21.2679056 L74.1800176,21.2679056 C74.761488,24.9149262 77.0054606,25.5857885 84.4437394,24.4377934 C84.6910873,25.7719041 84.9400571,27.1178586 85.2271429,28.6702323 L85.2271429,28.6702323 Z" id="Fill-9"></path>
+                            <path d="M25.3874943,30.8228052 C27.273054,31.3110201 28.457617,31.5073987 28.9411833,31.4119412 C30.9031674,31.0255922 31.8121184,29.009122 31.0620691,27.1434634 C28.7485252,21.3855088 26.4909674,15.603831 24.097561,9.54171142 L30.054319,9.54171142 C31.3765794,13.67717 34.2426251,22.3985378 34.3454245,22.3888832 C34.4546317,22.3786269 37.0270604,13.7593538 38.2422885,9.54425319 L43.7560976,9.54425319 C42.7483475,12.6968943 41.8846793,15.858008 40.7279074,18.901353 C39.1117199,23.1562747 37.3588605,27.3612083 35.512142,31.5153065 C33.6983565,35.5956933 30.1210084,37.5842041 24.3206821,35.2889865 C24.4266166,34.7659469 24.7822207,33.2772198 25.3874943,30.8228052 Z" id="Fill-11"></path>
+                            <path d="M234.415104,8.91275606 C240.021771,8.71254074 243.950192,12.7288259 244.138705,18.8507945 C244.331212,25.1524435 240.866885,29.6752563 235.685171,29.8865947 C229.702277,30.1295911 225.972753,26.2467828 225.762672,19.5583931 C225.578153,13.6708647 229.297293,9.09500335 234.415104,8.91275606 Z M234.692852,13.9760256 C237.392359,13.8724659 239.283821,15.9498548 239.374586,19.1163903 C239.467275,22.3758639 237.799265,24.7152498 235.304366,24.8245628 C232.423713,24.9502506 230.628017,22.9419015 230.526867,19.4823895 C230.438024,16.4371162 232.228721,14.0702914 234.692852,13.9760256 Z" id="Fill-13"></path>
+                            <path d="M200.239759,20.786111 C197.664552,20.8988821 196.292264,21.6284773 196.296349,23.2098363 C196.300526,24.7732545 197.562105,25.5643612 200.031561,25.6164751 C201.586435,25.6497938 202.385352,25.9804068 202.385352,23.3029579 C202.385352,21.2268237 202.1218,20.7040956 200.239759,20.786111 Z M195.974185,29.5438157 C192.681025,28.9030706 190.853512,26.6655885 190.878298,23.384119 C190.903083,20.2008971 192.687635,18.0659342 195.933702,17.440567 C197.008564,17.2338199 198.11069,17.1509501 199.203728,17.0885843 C200.211669,17.0304901 201.224567,17.0757694 202.23664,17.0757694 C201.947476,13.5226239 201.356756,13.3218571 193.403934,14.1138181 C193.270093,13.4534235 193.099073,12.7810682 193.005715,12.0967524 C192.91153,11.4090193 192.89418,10.7101799 192.829738,9.82851455 C196.569035,8.87423144 200.225714,8.3291709 203.912962,9.87806551 C205.883404,10.7050539 207.160681,12.3351096 207.250734,14.3684075 C207.461411,19.1663072 207.318481,23.9804391 207.318481,28.9141768 C203.589098,29.7411652 199.816754,30.2930604 195.974185,29.5438157 Z" id="Fill-17"></path>
+                            <path d="M149.508052,20.786111 C146.932844,20.8988821 145.560557,21.6284773 145.564642,23.2098363 C145.568819,24.7732545 146.830398,25.5643612 149.299854,25.6164751 C150.854727,25.6497938 151.653645,25.9804068 151.653645,23.3029579 C151.653645,21.2268237 151.390093,20.7040956 149.508052,20.786111 Z M145.242477,29.5438157 C141.949318,28.9030706 140.121805,26.6655885 140.14659,23.384119 C140.171376,20.2008971 141.955928,18.0659342 145.201994,17.440567 C146.276856,17.2338199 147.378982,17.1509501 148.47202,17.0885843 C149.479962,17.0304901 150.49286,17.0757694 151.504932,17.0757694 C151.215769,13.5226239 150.625049,13.3218571 142.672227,14.1138181 C142.538385,13.4534235 142.367366,12.7810682 142.274007,12.0967524 C142.179823,11.4090193 142.162473,10.7101799 142.098031,9.82851455 C145.837328,8.87423144 149.494007,8.3291709 153.181254,9.87806551 C155.151697,10.7050539 156.428973,12.3351096 156.519027,14.3684075 C156.729703,19.1663072 156.586774,23.9804391 156.586774,28.9141768 C152.857391,29.7411652 149.085047,30.2930604 145.242477,29.5438157 Z" id="Fill-17备份"></path>
+                            <path d="M214.368819,9.69369425 L221.009306,9.69369425 L221.009306,14.1842677 L214.659803,14.1842677 C214.659803,17.2278693 214.46217,20.0881822 214.726242,22.9064564 C214.912101,24.8906828 216.670619,25.2673495 218.414,25.1378703 C219.297043,25.07229 220.169154,24.8646188 221.178346,24.6998271 C221.447464,26.0938303 221.682942,27.3104301 221.95122,28.6918217 C218.65957,30.1530867 215.340167,30.4170898 212.263812,28.7515166 C210.96784,28.0503112 209.500306,26.2636666 209.442277,24.9133837 C209.153817,18.2393203 209.311082,11.5459192 209.311082,4.69193022 C210.769366,4.43885727 212.402576,4.157198 214.368819,3.81668457 L214.368819,9.69369425 Z" id="Fill-19"></path>
+                            <path d="M247.317073,29.2612484 L247.317073,19.8647936 L247.317073,13.6517012 C247.317073,10.1104359 247.31206,10.0838292 250.648221,9.42209492 C253.724541,8.8118575 256.802532,8.55179851 260,9.73279246 C259.7176,11.2193343 259.458594,12.5882916 259.207944,13.908327 L252.803818,13.908327 L252.803818,29.2612484 L247.317073,29.2612484 Z" id="Fill-25"></path>
+                            <path d="M175.02439,29.2612484 L175.02439,19.8647936 L175.02439,13.6517012 C175.02439,10.1104359 175.019377,10.0838292 178.355538,9.42209492 C181.431858,8.8118575 184.509849,8.55179851 187.707317,9.73279246 C187.424917,11.2193343 187.165912,12.5882916 186.915261,13.908327 L180.511135,13.908327 L180.511135,29.2612484 L175.02439,29.2612484 Z" id="Fill-25备份"></path>
+                            <path d="M159.804878,29.2612484 L159.804878,19.8647936 L159.804878,13.6517012 C159.804878,10.1104359 159.799865,10.0838292 163.136026,9.42209492 C166.212346,8.8118575 169.290337,8.55179851 172.487805,9.73279246 C172.205405,11.2193343 171.946399,12.5882916 171.695749,13.908327 L165.291623,13.908327 L165.291623,29.2612484 L159.804878,29.2612484 Z" id="Fill-25备份-2"></path>
+                            <path d="M89.4146341,29.2612484 L89.4146341,19.8647936 L89.4146341,13.6517012 C89.4146341,10.1104359 89.4096212,10.0838292 92.7457824,9.42209492 C95.8221023,8.8118575 98.9000932,8.55179851 102.097561,9.73279246 C101.815161,11.2193343 101.556155,12.5882916 101.305505,13.908327 L94.9013786,13.908327 L94.9013786,29.2612484 L89.4146341,29.2612484 Z" id="Fill-25备份-3"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

public/images/logo.svg

@@ -1,16 +1,33 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="36px" height="27px" viewBox="0 0 36 27" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>编组 8</title>
-    <g id="Dashboards-重构" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Network-Analytics_Network-Overview" transform="translate(-62.000000, -17.000000)">
-            <g id="编组-8" transform="translate(62.000000, 17.000000)">
-                <g id="编组-6" transform="translate(16.714286, 0.000000)" fill="#38ACD2">
-                    <path d="M17.2339653,0.0225148942 C18.7034774,0.013513634 19.3088605,0.693517934 19.2850395,2.16154166 C19.2324689,5.36517202 19.2686112,8.56962068 19.2694326,11.773251 C19.2694326,14.7731256 19.2776468,17.7721819 19.2669684,20.7720564 C19.2579328,23.2081248 19.0476504,23.410244 16.5275481,23.4192453 C14.3379832,23.4271009 12.1463155,23.468474 9.95759183,23.4373656 L9.81338222,23.4344346 C9.76856364,23.4387551 9.72312343,23.4409659 9.67716346,23.4409659 C8.90768211,23.4409659 8.28389423,22.8212427 8.28389423,22.0567754 C8.28389423,21.2923081 8.90768211,20.6725848 9.67716346,20.6725848 L9.642,20.674 L9.64253362,20.6690886 C11.7876709,20.6656961 13.9312779,20.8521924 16.054746,20.5879296 L16.4675847,20.530659 L16.4675847,2.93155856 C12.9642481,2.93155856 9.44694746,2.72534787 5.97071757,3.0133882 C4.06914096,3.1713194 2.81812533,4.79727433 2.77705456,6.76036737 C2.6828656,11.222083 2.72821584,15.6850917 2.7394565,20.3677855 L2.74,20.913 L0.21065723,20.9133136 L0.209644072,25.711202 C0.0552591026,25.2549048 0.0534654644,24.654429 0.0491340779,24.2416331 C-0.0141149065,18.6526688 -0.00836499885,13.0628862 0.0220273703,7.47310352 C0.0458484163,3.2858809 2.94380188,0.227907288 7.17573393,0.0650663065 C10.5246444,-0.0634062267 13.8809477,0.0413357112 17.2339653,0.0225148942 Z" id="形状结合"></path>
-                </g>
-                <g id="编组-6" fill="#427497">
-                    <path d="M19.2796515,7.71047301 C19.2796515,8.48046919 18.6655184,9.10467443 17.9079467,9.10467443 C17.1503751,9.10467443 16.536242,8.48046919 16.536242,7.71047301 C16.536242,7.70438876 16.5362803,7.69831361 16.5363568,7.6922478 L16.5373057,7.70225534 C16.532813,7.44217878 16.5278999,7.18214774 16.5225344,6.92212099 C16.4814291,4.91205752 15.2293621,3.24719877 13.3261873,3.08548879 C11.2386964,2.90852947 9.13640761,2.91375781 7.03121842,2.94625398 L4.92550309,2.98210165 C4.22356947,2.99325545 3.52175425,3.00170123 2.82049805,3.00170123 L2.82049805,21.021891 C4.19690236,21.2379613 5.58229019,21.2420622 6.97158301,21.2130673 L7.80558667,21.1931298 L8.53591703,21.1759185 C11.2145687,21.1207428 13.9006337,21.191491 16.557885,22.6641271 L16.559,21.413 C16.5761661,20.6622764 17.180207,20.0580137 17.9231037,20.0580137 C18.6756527,20.0580137 19.2857143,20.6780806 19.2857143,21.4429718 C19.2857143,21.4721841 19.2848245,21.5011851 19.2830709,21.5299484 L19.2826266,21.4139472 C19.2751561,22.549879 19.2653122,23.6857843 19.2527476,24.8216567 C19.2453486,25.5430675 19.2453486,26.8242918 18.4807903,26.9758347 C17.716232,27.1273777 16.923722,26.5359501 16.3827764,26.044955 C14.8174871,24.6264316 13.1066851,23.8857497 10.9782533,23.9586448 C8.24228541,24.0533248 5.49974066,23.9896462 2.76048433,23.9795917 C0.238263922,23.9703751 0.0278048523,23.7634198 0.0187616892,21.2690643 C0.00807431458,18.1974125 0.016295372,15.1265985 0.016295372,12.0549467 C0.0171174777,8.77466386 0.0532901303,5.49354316 0.000675362917,2.21326033 C-0.0231657035,0.710111565 0.582726227,0.0138369713 2.0534734,0.0230536025 C5.40930903,0.0423247405 8.76843308,-0.0649233317 12.1201582,0.0666231318 C16.355647,0.233360369 19.256036,3.36450135 19.2798771,7.65191061 Z" id="形状结合"></path>
+<svg width="96px" height="77px" viewBox="0 0 96 77" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 2</title>
+    <defs>
+        <filter x="-17.8%" y="-24.0%" width="135.5%" height="147.9%" filterUnits="objectBoundingBox" id="filter-1">
+            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+    </defs>
+    <g id="🪁login" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="登录定" transform="translate(-912.000000, -321.000000)">
+            <g id="编组-29备份-2" transform="translate(-92.000000, 0.483548)">
+                <g id="编组-3" transform="translate(845.000000, 261.000000)">
+                    <g id="logo" transform="translate(77.000000, 70.000000)">
+                        <g id="编组-2" filter="url(#filter-1)" transform="translate(92.000000, 0.000000)">
+                            <g id="编组-6" transform="translate(35.050168, 0.000000)" fill="#07C8EA">
+                                <path d="M27.0984325,0.0122014594 L31.8461546,0.0441807494 C33.4287159,0.0529564615 35.0111814,0.057058831 36.5933025,0.0481199837 C39.7135537,0.0288820298 40.9989786,1.482222 40.9483988,4.6197574 C40.8553785,10.3255597 40.893168,16.0325764 40.9093577,21.7387835 L40.9152603,25.1623944 L40.9214617,37.9840697 L40.9100279,44.3951016 C40.8908425,49.6015915 40.4443448,50.033571 35.0933494,50.052809 C30.3405147,50.0699729 25.5830136,50.1620025 20.8322952,50.0868551 L20.7215855,50.0942095 L20.7215855,50.0942095 L20.5477593,50.0992315 C18.9139006,50.0992315 17.5893964,48.7747273 17.5893964,47.1408687 C17.5893964,45.50701 18.9139006,44.1825058 20.5477593,44.1825058 L20.474,44.184 L20.4742959,44.1750333 C21.1471703,44.1739628 21.8199738,44.181749 22.4925791,44.1939776 L23.5363069,44.2159125 C27.0892892,44.2985782 30.6348941,44.4415229 34.1543247,43.9933811 L34.9660278,43.8791747 L34.9660278,6.26547692 C33.1063476,6.26547692 31.2448143,6.23793166 29.3832537,6.20623276 L26.5911206,6.15849312 C21.9382921,6.0834815 17.2909993,6.05560833 12.6777715,6.44036741 C8.6401071,6.77790605 5.98379485,10.2529801 5.89658827,14.448603 C5.6888441,24.353954 5.80079615,34.2622872 5.81918245,44.6967563 L0.447293679,44.6970037 L0.446704038,54.9559323 C0.117345075,53.9801448 0.113539117,52.6941057 0.104327596,51.8104584 C-0.0299705283,39.8654379 -0.0177616079,27.9186685 0.0467712572,15.9718991 C0.0973510704,7.02275274 6.25064696,0.487095115 15.2364124,0.139063039 C19.1868702,-0.0134803334 23.1421729,-0.0121848483 27.0984325,0.0122014594 Z" id="形状结合"></path>
+                            </g>
+                            <g id="编组-6" fill="#427497">
+                                <path d="M25.7134192,0.139063039 C34.6991847,0.487095115 40.8524806,7.02275274 40.9030604,15.9718991 L40.904,16.078 L40.902,16.078 L40.9025818,16.0941369 C40.9025818,17.6439559 39.6910759,18.9108125 38.1634453,18.9993255 L37.9924532,19.0042656 C36.3852335,19.0042656 35.0823245,17.7013566 35.0823245,16.0941369 C35.0823245,16.0780245 35.0824554,16.0619426 35.0827163,16.0458923 L35.0846058,16.0783793 C35.0750677,15.535054 35.0646363,14.991824 35.0532433,14.448603 C34.9660368,10.2529801 32.3097245,6.77790605 28.2720601,6.44036741 C23.6588323,6.05560833 19.0115395,6.0834815 14.358711,6.15849312 L11.566578,6.20623276 C9.70501736,6.23793166 7.84348402,6.26547692 5.98380382,6.26547692 L5.98380382,43.8791747 C9.76950351,44.4638711 13.587236,44.3049371 17.4135248,44.2159125 L18.4572525,44.1939776 C24.024744,44.0927552 29.6058224,44.2959137 35.128241,47.3070283 C35.128241,46.4331109 35.1291226,45.5631201 35.1306492,44.6967563 C35.1675419,43.1280395 36.4488408,41.8672653 38.0246093,41.8672653 C39.6211734,41.8672653 40.9154443,43.1615363 40.9154443,44.7581003 C40.9154443,44.8307331 40.9127656,44.9027403 40.9075017,44.9740284 L40.9088955,44.6972456 C40.8930463,47.0683764 40.8721613,49.4394518 40.845504,51.8104584 C40.8298068,53.3162655 40.8298068,55.990576 39.2077646,56.3068929 C37.5857223,56.6232099 35.9043795,55.3887179 34.756741,54.3638596 C31.4359146,51.4029636 27.806377,49.8569316 23.2908206,50.0090864 C17.486351,50.2067126 11.6679283,50.0737959 5.85648222,50.052809 C0.505486811,50.033571 0.0589891496,49.6015915 0.0398037033,44.3951016 C0.0171299939,37.9836163 0.0345713088,31.5738798 0.0345713088,25.1623944 C0.0363154403,18.3154317 0.113057226,11.4667201 0.00143281049,4.6197574 C-0.0491470027,1.482222 1.2362779,0.0288820298 4.35652914,0.0481199837 C5.93865019,0.057058831 7.52111576,0.0529564615 9.10367704,0.0441807494 L13.8513991,0.0122014594 C17.8076588,-0.0121848483 21.7629614,-0.0134803334 25.7134192,0.139063039 Z" id="形状结合"></path>
+                            </g>
+                        </g>
+                    </g>
                 </g>
             </g>
         </g>
     </g>
-</svg>
+</svg>

src/App.vue

@@ -5,6 +5,9 @@
 </template>
 <script>
 import { storageKey } from '@/utils/constants'
+import router from '@/router'
+import { post } from '@/utils/http'
+import { api } from '@/utils/api'
 const dayjs = require('dayjs')
 const utc = require('dayjs/plugin/utc')
 const timezone = require('dayjs/plugin/timezone')
@@ -26,7 +29,37 @@ export default {
     } else {
       window.$dayJs.tz.setDefault()
     }
-  }
+  },
+  mounted () {
+    this.loginAlready()
+  },
+  methods: {
+    /**
+     * 已经登录判断
+     * 如果已经登录，新打开页面按url打开，否则进入首页
+     */
+    loginAlready () {
+      // 登录判断在router/index.js下操作更合适，但该文件内引入post等方法会导致路由报错，
+      // 目前不知道其原因，后续解决该问题后，将登录操作移入router
+      const url = window.location.href
+      const currentPath = url.match(/#(\S*)/)[1]
 
+      if (currentPath === '/' || currentPath === '/login') {
+        if (localStorage.getItem(storageKey.token) !== null) {
+          // 刚进入会请求失败，故采用延时，请求成功清除延时器，避免内存泄漏
+          const timer = setTimeout(() => {
+            post(api.permissions, { token: localStorage.getItem(storageKey.token) }).then(res => {
+              if (res.code === 200) {
+                router.push({
+                  path: '/panel/networkOverview'
+                })
+                clearTimeout(timer)
+              }
+            })
+          }, 10)
+        }
+      }
+    }
+  }
 }
 </script>

src/Login.vue

@@ -2,12 +2,12 @@
   <div class="logins">
     <div class="inside">
       <div class="title">
-        <img src="../public/images/cion.png" />
+        <img src="../public/images/logo-title.svg" />
       </div>
       <el-form class="login__box">
         <el-form-item>
           <el-input
-              prefix-icon="el-icon-user"
+              prefix-icon="cn-icon cn-icon-user2"
               class="login--input login__input"
             v-model="username"
           ></el-input>
@@ -136,58 +136,99 @@ export default {
 }
 </script>
 
-<style>
- .logins{
+<style scoped>
+.logins {
   background-color: #000C18;
   background-size: auto;
   background-repeat: round;
   background-image: url('../public/images/bg.png');
   display: flex;
-   height: 100%;
+  height: 100%;
   justify-content: center;
   align-items: center;
-   margin: auto;
 }
 
+>>>.el-input__inner {
+  background-color: #0B325C !important;
+  border: none;
+  border-radius: 0px;
+  border-bottom: 1px solid #295688;
+  font-size: 14px;
+  line-height: 14px;
+}
+>>>.el-input__inner:hover {
+  border-color: #295688;
+}
+>>>.el-input__inner:focus {
+  border-color: #295688;
+}
+.el-button--primary:hover, .el-button--primary:focus, .el-button--primary:active {
+  background: #21B4ED;
+  border-color: #21B4ED;
+  color: #FFFFFF;
+}
+>>>.el-loading-mask {
+  background-color: transparent;
+}
+>>>input {
+  -webkit-text-fill-color: rgba(231,234,237, .8) !important;
+  transition: background-color 500000000000000000s ease-in-out 0s !important;
+  caret-color: #fff ;
+}
 .inside {
-  opacity: 0.78;
-  background: #051a37;
-  border-radius: 6px;
-  width: 368px;
-  height: 400px;
-  /* margin-top:340px; */
+  width: 414px;
+  height: 524px;
+  background: #0B325C;
+  border: 1px solid rgba(103,179,245,0.65);
+  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.38);
+  border-radius: 4px;
+}
+.inside {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }
 .inside > div {
   display: block;
 }
 
 .title {
-  margin-top: 70px;
+  margin-top: 65px;
   text-align: center;
-
 }
 .title > img {
-  height: 43px;
-  width: 248px;
+  height: 135px;
 }
-.login--input{
-  width: 300px;
-  height: 40px;
+.login__box {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+}
+>>>.el-form-item {
+  width: 334px;
+  margin-bottom: 25px;
+}
+>>>.el-input__prefix {
+  color: #6DBBFF;
+}
+>>>.el-input__prefix i {
+  width: 17px;
+  font-size: 17px;
+}
+.login__box .el-form-item:nth-of-type(3) {
+  margin-top: 25px;
+  margin-bottom: 65px;
 }
- .login__input:first-of-type{
-   margin-top: 45.57px;
- }
- .login__box{
-   width: 300px;
-   height: 250px;
-   margin: auto;
- }
 .login--button {
-  background: #0091ff;
-  color: #fff;
+  background: #21B4ED;
   border-radius: 4px;
   border: 0;
   font-weight: 400;
-  text-align: center;
+  font-size: 16px;
+  color: #FFFFFF;
+  line-height: 22px;
+  width: 334px;
+  height: 52px;
 }
 </style>

src/Test.vue

@@ -0,0 +1,28 @@
+<template>
+  <span data-test="count">{{count}}</span>
+  <button data-test="button" @click="click">click</button>
+</template>
+
+<script>
+/* vue-jest的测试示例 */
+import VueRouter from 'vue-router'
+export default {
+  name: 'Test',
+  data () {
+    return {
+      count: 0
+    }
+  },
+  methods: {
+    click () {
+      this.count++
+    }
+  },
+  created () {
+    const { currentRoute } = VueRouter.useRouter()
+    return {
+      currentRoute
+    }
+  }
+}
+</script>

src/assets/css/components/components/advancedSearch/codemirror.scss

@@ -2,7 +2,6 @@
 
 .CodeMirror {
   /* Set height, width, borders, and global font properties here */
-  font-family: monospace;
   height: 40px;
   color: black;
   direction: ltr;

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

@@ -199,4 +199,8 @@
       text-align: right;
     }
   }
+
+  .el-input__inner {
+    visibility: hidden !important;
+  }
 }

src/assets/css/components/components/common/chart-tab.scss

@@ -0,0 +1,64 @@
+.chart-tabs {
+  position: relative;
+
+  .chart-tabs__active-bar {
+    position: absolute;
+    height: 3px;
+    top: 0;
+    background-color: #046EC9;
+    border-radius: 5px 5px 0 0;
+    transition: all linear .2s;
+  }
+  .el-tabs.el-tabs--border-card {
+    position: absolute;
+    top: 3px;
+    width: 100%;
+    border: none;
+    box-shadow: none;
+
+    &>.el-tabs__header {
+      background-color: white;
+      border-color: #E2E5EC;
+
+      .el-tabs__nav-wrap {
+        padding-left: 27px;
+      }
+      .el-tabs__item:first-child {
+        margin-left: 0;
+      }
+    }
+    .el-tabs__content {
+      display: none;
+    }
+  }
+  .el-tabs__nav {
+    z-index: 1;
+  }
+
+  .el-tabs__item.is-top {
+    height: 35px;
+    line-height: 35px;
+
+    .chart-tabs__label {
+      color: #353636;
+      font-size: 14px;
+      font-weight: bold;
+      box-sizing: border-box;
+
+      i {
+        padding-right: 7px;
+        font-size: 16px;
+        font-weight: normal;
+      }
+    }
+    &.is-active {
+      .chart-tabs__label {
+        color: #353636;
+
+        i {
+          color: #046EC9;
+        }
+      }
+    }
+  }
+}

src/assets/css/components/components/layout/layout.scss

@@ -144,7 +144,6 @@
                 text-align: -webkit-match-parent;
                 box-sizing: border-box;
                 cursor: pointer;
-                font-family: Helvetica;
                 font-size: 12px;
                 font-weight: 400;
               }

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

@@ -74,7 +74,7 @@
 
 .list-page {
   .el-input--small .el-input__inner {
-    height: 32.4px;
+    height: 33px;
     line-height: 32px;
     border-radius: 0px;
   }

src/assets/css/components/index.scss

@@ -73,3 +73,7 @@
 @import './views/charts2/dnsEventChartByPie';
 //@import '../chart';
 @import './components/common/chart-error';
+@import './components/common/chart-tab';
+
+@import 'views/administration/AdministrationTabs';
+

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

@@ -0,0 +1,17 @@
+.administration {
+  .administration-tabs {
+    height: 18px;
+  }
+  .administration-container {
+    height: calc(100% - 26px);
+    flex-direction: column;
+    .list-page {
+      .main-container {
+        padding: 0px;
+        .cn-pagination {
+          height: 34px;
+        }
+      }
+    }
+  }
+}

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

@@ -68,7 +68,6 @@
             display: flex;
             justify-content: space-around;
             align-items: center;
-            font-family: Roboto-Regular;
             font-size: 12px;
             font-weight: 400;
         }

src/assets/css/components/views/charts/chartAlarmInfo.scss

@@ -50,7 +50,6 @@
                     .text-box__title {
                         font-size: 16px;
                         line-height: 19px;
-                        font-family: Roboto-Regular;
                         color: #333333;
                         font-weight: 400;
                         div {
@@ -86,7 +85,6 @@
                             }
 
                             .time-box__start-time {
-                                font-family: PingFangSC-Regular;
                                 font-size: 12px;
                                 color: #999999;
                                 line-height: 14px;
@@ -109,7 +107,6 @@
                             }
 
                             .time-box__start-time {
-                                font-family: PingFangSC-Regular;
                                 font-size: 12px;
                                 color: #999999;
                                 font-weight: 400;
@@ -118,7 +115,6 @@
 
                         .text__type {
                             width: auto;
-                            font-family: Roboto-Regular;
                             line-height: 16px;
                             font-size: 12px;
                             border: 1px solid;
@@ -138,7 +134,6 @@
                             width: 5px;
                             height: 5px;
                             border-radius: 50%;
-                            font-family: Roboto-Black;
                             font-size: 12px;
                             color: #666666;
                             line-height: 17px;

src/assets/css/components/views/charts/chartSingleValue.scss

@@ -306,7 +306,6 @@
         display: flex;
         align-items: center;
         margin: 16px 0 27px 0;
-        font-family: PingFangSC-Medium;
         font-size: 16px;
         color: #333333;
         line-height: 22px;
@@ -324,7 +323,6 @@
 
         .content__data__doh {
           .content__data__doh__count {
-            font-family: Roboto-Medium;
             font-size: 30px;
             color: #333333;
             font-weight: 500;
@@ -332,13 +330,11 @@
 
           .content__data__doh__percent {
             margin-top: 10px;
-            font-family: Roboto-Black;
             font-size: 14px;
             color: #666666;
             font-weight: 400;
 
             span {
-              font-family: Roboto-Medium;
               font-size: 14px;
               color: #FC8157;
               font-weight: 500;

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

@@ -7,7 +7,6 @@
   flex-direction: column;
 
   .dns-mailcious-domain-title {
-    font-family: NotoSansHans-Medium;
     font-size: 14px;
     color: #353636;
     margin-bottom: 12px;

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

@@ -39,6 +39,9 @@
           font-weight: 400;
           margin-bottom: 12px;
         }
+        .ddos-detection-type-value-number.ddos-event {
+          color: #E48F3E;
+        }
         .ddos-detection-type-value-number {
           font-size: 18px;
           color: #E26154;

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

@@ -130,6 +130,10 @@
     .data-score.data-score-green {
       background: #749F4D;
     }
+    .data-score-no-data {
+      width: 34px;
+      text-align: center;
+    }
   }
   .data-total-value {
     display: flex;

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

@@ -86,6 +86,9 @@
       color: #046ECA;
       font-weight: 400
     }
+    .click-active {
+      cursor: pointer;
+    }
     .data-recent-table-eventType {
       font-size: 12px;
       color: #046ECA;

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

@@ -116,7 +116,6 @@
           margin-right: 12px;
         }
         .detection-event-severity-block {
-          font-family: NotoSansHans-Medium;
           font-size: 12px;
           color: #046EC9;
           font-weight: 500;

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

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

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

@@ -57,7 +57,6 @@
     color: #353636;
   }
   .explorer-top-tools-block {
-    font-family: NotoSansHans-Medium;
     height: 28px;
     line-height: 28px;
     background: #F5F8FA;

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

@@ -139,6 +139,12 @@
                   color: #666666;
                   font-weight: 400;
                   margin-bottom: 4px;
+                  display: flex;
+                  align-items: center;
+                  justify-content: center;
+                  i {
+                    padding: 2px 3px 0 0;
+                  }
                 }
                 .expand-time {
                   font-size: 12px;

src/assets/css/font/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "cn-icon"; /* Project id 2614877 */
-  src: url('iconfont.woff2?t=1668593055875') format('woff2'),
-       url('iconfont.woff?t=1668593055875') format('woff'),
-       url('iconfont.ttf?t=1668593055875') format('truetype');
+  src: url('iconfont.woff2?t=1670817031037') format('woff2'),
+       url('iconfont.woff?t=1670817031037') format('woff'),
+       url('iconfont.ttf?t=1670817031037') format('truetype');
 }
 
 .cn-icon {
@@ -13,6 +13,34 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.cn-icon-administrations:before {
+  content: "\e7be";
+}
+
+.cn-icon-chart:before {
+  content: "\e7b8";
+}
+
+.cn-icon-user2:before {
+  content: "\e7b9";
+}
+
+.cn-icon-operation-log:before {
+  content: "\e7ba";
+}
+
+.cn-icon-role2:before {
+  content: "\e7bb";
+}
+
+.cn-icon-proxy:before {
+  content: "\e7bc";
+}
+
+.cn-icon-i18n:before {
+  content: "\e7bd";
+}
+
 .cn-icon-baocuo:before {
   content: "\e7b7";
 }

src/components/advancedSearch/Index.vue

@@ -60,6 +60,7 @@ export default {
     // 连接符列表
     connectionList: Array
   },
+  emits: ['search'],
   methods: {
     search (parseData) {
       this.$emit('search', parseData)

src/components/advancedSearch/TagMode.vue

@@ -104,6 +104,7 @@ export default {
       metaList: []
     }
   },
+  emits: ['changeMode', 'search'],
   methods: {
     // 新增条件
     addCondition (meta) {

src/components/advancedSearch/TextMode.vue

@@ -23,7 +23,7 @@ import CodeMirror from 'codemirror'
 import { toRaw } from 'vue'
 import _ from 'lodash'
 import { columnType } from '@/components/advancedSearch/meta/meta'
-import {handleErrorTip} from "@/components/advancedSearch/meta/error";
+import { handleErrorTip } from '@/components/advancedSearch/meta/error'
 
 export default {
   name: 'TextMode',
@@ -36,6 +36,7 @@ export default {
       codeMirror: null
     }
   },
+  emits: ['changeMode', 'search'],
   methods: {
     initCodeMirror () {
       this.codeMirror = CodeMirror.fromTextArea(this.$refs.textSearch, {

src/components/advancedSearch/meta/parser.js

@@ -233,6 +233,7 @@ export default class Parser {
           break
         }
       } else if (s === ' ') {
+        // 预留
       } else if (s === '(') {
         token = new Token(types.leftBracket, s)
         token.setStart(i)

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

@@ -4,7 +4,7 @@ import { riskLevelMapping } from '@/utils/constants'
 import _ from 'lodash'
 // 补全语句，用于解析
 const sqlPrev = 'select a from b where '
-export default class SqlParser/* extends SqlParserVisitor*/ {
+export default class SqlParser/* extends SqlParserVisitor */ {
   constructor (init, columnList) {
     // super()
     this.tempMeta = null

src/components/common/ChartTabs.vue

@@ -0,0 +1,235 @@
+<template>
+  <div class="chart-tabs administration-tabs">
+    <div class="chart-tabs__active-bar" :style="{'background-color': color}"></div>
+    <el-tabs v-model="currentTab" ref="elTabs" type="border-card" @tab-click="handleClick">
+      <el-tab-pane
+          v-for="(tab,index) in tabsData"
+          :key="tab.i18n"
+          :name="JSON.stringify(index)"
+          :disabled="tab.disable">
+        <template #label>
+          <div class="chart-tabs__label">
+            <i :class="tab.icon"></i>
+            <span>{{ $t(tab.i18n) }}</span>
+          </div>
+        </template>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<!--  start----------------调用方式----------------start  -->
+<!--
+   组件名：<chart-tabs></chart-tabs>
+   目前有两种形式，分别是default、router
+   默认default，非路由切换：<chart-tabs :data="tabsData" />
+   路由模式router，点击tab路由切换：<chart-tabs :data="tabsData" router />
+   数据格式：
+   tabsData: [
+      {
+        i18n: 'entities.securityEvents',
+        path: '/detection/securityEvent',
+        icon: 'cn-icon cn-icon-a-SecurityEvent'
+      }
+  ]
+  需要禁用，则对应对象里添加 disable: true
+ -->
+<!--
+  active颜色：<chart-tabs :data="tabsData" color="red" />
+-->
+<!--
+  接收回调：@click
+-->
+<!--  end----------------调用方式----------------end  -->
+<script>
+import { overwriteUrl, urlParamsHandler } from '@/utils/tools'
+import { ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+export default {
+  name: 'ChartTabs',
+  props: {
+    data: {
+      type: Array
+    },
+    router: {
+      type: String,
+      default: 'noRouter'
+    },
+    color: {
+      type: String
+    }
+  },
+  data () {
+    return {
+      leftOffset: 27,
+      timer: null
+    }
+  },
+  setup (props) {
+    const tabsData = ref([])
+    const router = useRouter()
+    const routerPath = router.currentRoute.value.path
+    const tabList = window.currentChartTabList
+    let currentTab = '0'
+
+    if (props.data) {
+      tabsData.value = [...props.data]
+      tabsData.value.forEach(item => {
+        if (!item.disable) {
+          item.disable = false
+        }
+      })
+
+      // 非路由跳转，获取tabIndex定位
+      // 路由跳转，根据路由名对比传入数据，获取index从而定位
+      // 路由模式为了切换有过渡，需要设置上次tab和当前tab
+      if (props.router === 'noRouter') {
+        const { query } = useRoute()
+        const tabIndexParam = query.tabIndex
+        currentTab = ref(tabIndexParam ? JSON.stringify(tabIndexParam) : '0')
+      } else if (!tabList) {
+        // 此处为刷新界面时，根据当前路由获取index
+        currentTab = tabsData.value.findIndex(item => {
+          return item.path === routerPath
+        })
+        currentTab = JSON.stringify(currentTab)
+        window.currentChartTabList = [{ path: routerPath, index: currentTab }]
+      } else {
+        // 此处为切换界面，如果window里保存的路径和tabsData里的路径一致，选择window数据并使用
+        // 两个不一致的话，则默认选择tabsData里的第一条
+        let obj0 = null
+        let obj1 = null
+        obj0 = tabsData.value.find(item => { return item.path === tabList[0].path })
+
+        if (tabList[1]) {
+          obj1 = tabsData.value.find(item => { return item.path === tabList[1].path })
+        }
+
+        if (obj0 && obj1) {
+          currentTab = tabList[1].index
+        } else if (obj0) {
+          currentTab = tabList[0].index
+        } else {
+          window.currentChartTabList = [{ path: tabsData.value[0].path, index: '0' }]
+          currentTab = '0'
+        }
+      }
+    }
+
+    return {
+      currentTab,
+      tabsData
+    }
+  },
+  mounted () {
+    const time = this.router === 'noRouter' ? 900 : 0
+    this.timer = setTimeout(() => {
+      this.$nextTick(() => {
+        this.init()
+      })
+    }, time)
+  },
+  watch: {
+    currentTab (n) {
+      if (this.router === 'noRouter') {
+        const { query } = this.$route
+        const newUrl = urlParamsHandler(window.location.href, query, {
+          tabIndex: n
+        })
+        overwriteUrl(newUrl)
+      }
+
+      this.$nextTick(() => {
+        this.handleActiveBar(n)
+      })
+    }
+  },
+  methods: {
+    init () {
+      // 添加禁用小手
+      this.tabsData.forEach((item, index) => {
+        if (item.disable) {
+          const tabEle = document.getElementById('tab-' + index)
+          if (tabEle) {
+            tabEle.style.cssText = 'cursor: not-allowed;'
+          }
+        }
+      })
+
+      if (window.currentChartTabList && this.router !== 'noRouter') {
+        window.currentChartTabList.forEach((item) => {
+          this.$nextTick(() => {
+            this.handleActiveBar(parseFloat(item.index))
+          })
+        })
+      } else {
+        this.$nextTick(() => {
+          this.handleActiveBar(this.currentTab)
+        })
+        window.currentChartTabList = null
+      }
+    },
+    handleActiveBar (index) {
+      const activeDom = document.getElementsByClassName('el-tabs__item is-top is-active')
+      const tabDom = document.getElementById('tab-' + index)
+
+      if (tabDom && activeDom) {
+        this.$nextTick(() => {
+          const offsetLeft = tabDom.offsetLeft
+          const clientWidth = tabDom.clientWidth
+          const clientLeft = tabDom.clientLeft
+          const activeBar = document.querySelector('.chart-tabs .chart-tabs__active-bar')
+
+          if (this.router === 'noRouter') {
+            activeBar.style.cssText += `width: ${clientWidth + 2}px; left: ${offsetLeft + this.leftOffset + clientLeft - 1}px;`
+          } else {
+            // 数组长度为1，即代表刚刷新界面，获取active的dom添加样式，避免原模式错位问题
+            // 可添加css样式，也可添加class类名，两个操作选一即可
+            if (window.currentChartTabList.length === 1) {
+              // 此处操作是因为初始化时给active加border，导致tab下移，故需要将整体往上移动对应高度
+              const topDom = document.getElementsByClassName('el-tabs__header is-top')
+              topDom[0].style.cssText += 'top: -3px'
+              activeDom[0].style.cssText += 'height: calc(100% - 1px);border-top: 4px #046EC9 solid;border-radius: 5px 5px 0 0;transition: all linear .2s;'
+            } else {
+              activeBar.style.cssText += `width: ${clientWidth + 2}px; left: ${offsetLeft + this.leftOffset + clientLeft - 1}px;`
+              activeDom[0].style.cssText += 'height:calc(100% + 1px)'
+            }
+          }
+        })
+      }
+    },
+    handleClick (item) {
+      this.$emit('click', item)
+
+      if (this.router === 'noRouter') {
+        const { query } = this.$route
+        const newUrl = urlParamsHandler(window.location.href, query, {
+          t: +new Date(),
+          tabIndex: item.index
+        })
+        overwriteUrl(newUrl)
+      } else {
+        window.currentChartTabList.push({
+          path: this.tabsData[item.index].path,
+          index: item.index
+        })
+
+        if (window.currentChartTabList.length > 2) {
+          window.currentChartTabList.splice(0, 1)
+        }
+
+        this.$router.push({
+          path: this.tabsData[item.index].path,
+          query: {
+            t: +new Date()
+          }
+        })
+      }
+    }
+  },
+  beforeUnmount () {
+    clearTimeout(this.timer)
+  }
+}
+</script>

src/components/common/MyDatePicker/index.d.ts

@@ -1,4 +0,0 @@
-import DatePicker from './src/date-picker';
-import type { SFCWithInstall } from 'element-plus/lib/utils/types';
-declare const _DatePicker: SFCWithInstall<typeof DatePicker>;
-export default _DatePicker;

src/components/common/MyDatePicker/src/date-picker-com/basic-date-table.vue.d.ts

@@ -1,61 +0,0 @@
-import { PropType } from 'vue';
-import dayjs from 'dayjs';
-declare const _default: import("vue").DefineComponent<{
-    date: {
-        type: PropType<dayjs.Dayjs>;
-    };
-    minDate: {
-        type: PropType<dayjs.Dayjs>;
-    };
-    maxDate: {
-        type: PropType<dayjs.Dayjs>;
-    };
-    parsedValue: {
-        type: PropType<dayjs.Dayjs | dayjs.Dayjs[]>;
-    };
-    selectionMode: {
-        type: StringConstructor;
-        default: string;
-    };
-    showWeekNumber: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    disabledDate: {
-        type: FunctionConstructor;
-    };
-    cellClassName: {
-        type: FunctionConstructor;
-    };
-    rangeState: {
-        type: ObjectConstructor;
-        default: () => {
-            endDate: any;
-            selecting: boolean;
-        };
-    };
-}, {
-    handleMouseMove: (event: any) => void;
-    t: (...args: any[]) => string;
-    rows: import("vue").ComputedRef<any[][]>;
-    isWeekActive: (cell: any) => any;
-    getCellClasses: (cell: any) => string;
-    WEEKS: import("vue").ComputedRef<any>;
-    handleClick: (event: any) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("changerange" | "pick" | "select")[], "changerange" | "pick" | "select", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    selectionMode: unknown;
-    showWeekNumber: boolean;
-    rangeState: Record<string, any>;
-} & {
-    date?: unknown;
-    minDate?: unknown;
-    maxDate?: unknown;
-    parsedValue?: unknown;
-    disabledDate?: unknown;
-    cellClassName?: unknown;
-}>, {
-    selectionMode: unknown;
-    showWeekNumber: boolean;
-    rangeState: Record<string, any>;
-}>;
-export default _default;

src/components/common/MyDatePicker/src/date-picker-com/basic-month-table.vue.d.ts

@@ -1,50 +0,0 @@
-import dayjs from 'dayjs';
-import { PropType } from 'vue';
-declare const _default: import("vue").DefineComponent<{
-    disabledDate: {
-        type: PropType<(_: Date) => void>;
-    };
-    selectionMode: {
-        type: StringConstructor;
-        default: string;
-    };
-    minDate: {
-        type: PropType<dayjs.Dayjs>;
-    };
-    maxDate: {
-        type: PropType<dayjs.Dayjs>;
-    };
-    date: {
-        type: PropType<dayjs.Dayjs>;
-    };
-    parsedValue: {
-        type: PropType<dayjs.Dayjs>;
-    };
-    rangeState: {
-        type: ObjectConstructor;
-        default: () => {
-            endDate: any;
-            selecting: boolean;
-        };
-    };
-}, {
-    handleMouseMove: (event: any) => void;
-    handleMonthTableClick: (event: any) => void;
-    rows: import("vue").ComputedRef<any[][]>;
-    getCellStyle: (cell: any) => any;
-    t: (...args: any[]) => string;
-    months: any;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("changerange" | "pick" | "select")[], "changerange" | "pick" | "select", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    selectionMode: unknown;
-    rangeState: Record<string, any>;
-} & {
-    disabledDate?: unknown;
-    minDate?: unknown;
-    maxDate?: unknown;
-    date?: unknown;
-    parsedValue?: unknown;
-}>, {
-    selectionMode: unknown;
-    rangeState: Record<string, any>;
-}>;
-export default _default;

src/components/common/MyDatePicker/src/date-picker-com/basic-year-table.vue.d.ts

@@ -1,22 +0,0 @@
-import { PropType } from 'vue';
-import dayjs from 'dayjs';
-declare const _default: import("vue").DefineComponent<{
-    disabledDate: {
-        type: PropType<(_: Date) => void>;
-    };
-    parsedValue: {
-        type: PropType<dayjs.Dayjs>;
-    };
-    date: {
-        type: PropType<dayjs.Dayjs>;
-    };
-}, {
-    startYear: import("vue").ComputedRef<number>;
-    getCellStyle: (year: any) => any;
-    handleYearTableClick: (event: any) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "pick"[], "pick", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{} & {
-    disabledDate?: unknown;
-    parsedValue?: unknown;
-    date?: unknown;
-}>, {}>;
-export default _default;

src/components/common/MyDatePicker/src/date-picker-com/panel-date-pick.vue.d.ts

@@ -1,136 +0,0 @@
-import dayjs, { Dayjs } from 'dayjs';
-import { PropType } from 'vue';
-declare const _default: import("vue").DefineComponent<{
-    visible: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    parsedValue: {
-        type: PropType<dayjs.Dayjs | dayjs.Dayjs[]>;
-    };
-    format: {
-        type: StringConstructor;
-        default: string;
-    };
-    type: {
-        type: StringConstructor;
-        required: true;
-    };
-}, {
-    handleTimePick: (value: any, visible: any, first: any) => void;
-    handleTimePickClose: () => void;
-    onTimePickerInputFocus: () => void;
-    timePickerVisible: import("vue").Ref<boolean>;
-    visibleTime: import("vue").ComputedRef<any>;
-    visibleDate: import("vue").ComputedRef<any>;
-    showTime: import("vue").ComputedRef<boolean>;
-    changeToNow: () => void;
-    onConfirm: () => void;
-    footerVisible: import("vue").ComputedRef<boolean>;
-    handleYearPick: (year: any) => void;
-    showMonthPicker: () => void;
-    showYearPicker: () => void;
-    handleMonthPick: (month: any) => void;
-    hasShortcuts: import("vue").ComputedRef<boolean>;
-    shortcuts: any;
-    arrowControl: any;
-    disabledDate: any;
-    cellClassName: any;
-    selectionMode: import("vue").ComputedRef<unknown>;
-    handleShortcutClick: (shortcut: any) => void;
-    prevYear_: () => void;
-    nextYear_: () => void;
-    prevMonth_: () => void;
-    nextMonth_: () => void;
-    innerDate: import("vue").Ref<{
-        clone: () => dayjs.Dayjs;
-        isValid: () => boolean;
-        year: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        month: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        date: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        day: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        hour: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        minute: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        second: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        millisecond: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        set: (unit: dayjs.UnitType, value: number) => dayjs.Dayjs;
-        get: (unit: dayjs.UnitType) => number;
-        add: (value: number, unit: dayjs.OpUnitType) => dayjs.Dayjs;
-        subtract: (value: number, unit: dayjs.OpUnitType) => dayjs.Dayjs;
-        startOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
-        endOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
-        format: (template?: string) => string;
-        diff: (date: dayjs.ConfigType, unit?: "M" | "week" | "month" | "year" | "day" | "date" | "hour" | "minute" | "second" | "millisecond" | "d" | "y" | "h" | "m" | "s" | "ms" | "w" | "quarter" | "Q", float?: boolean) => number;
-        valueOf: () => number;
-        unix: () => number;
-        daysInMonth: () => number;
-        toDate: () => Date;
-        toJSON: () => string;
-        toISOString: () => string;
-        toString: () => string;
-        utcOffset: () => number;
-        isBefore: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
-        isSame: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
-        isAfter: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
-        locale: {
-            (): string;
-            (preset: string | ILocale, object?: Partial<ILocale>): dayjs.Dayjs;
-        };
-        localeData: () => any;
-        week: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        weekYear: () => number;
-        dayOfYear: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        isSameOrAfter: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
-        isSameOrBefore: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
-    }>;
-    t: (...args: any[]) => string;
-    yearLabel: import("vue").ComputedRef<string>;
-    currentView: import("vue").Ref<string>;
-    month: import("vue").ComputedRef<number>;
-    handleDatePick: (value: Dayjs) => void;
-    handleVisibleTimeChange: (value: any) => void;
-    handleVisibleDateChange: (value: any) => void;
-    timeFormat: import("vue").ComputedRef<any>;
-    userInputTime: any;
-    userInputDate: any;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("pick" | "set-picker-option")[], "pick" | "set-picker-option", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    visible: boolean;
-    format: unknown;
-    type: unknown;
-} & {
-    parsedValue?: unknown;
-}>, {
-    visible: boolean;
-    format: unknown;
-}>;
-export default _default;

src/components/common/MyDatePicker/src/date-picker-com/panel-date-range.vue.d.ts

@@ -1,210 +0,0 @@
-import { PropType } from 'vue';
-import dayjs from 'dayjs';
-declare const _default: import("vue").DefineComponent<{
-    unlinkPanels: BooleanConstructor;
-    parsedValue: {
-        type: PropType<dayjs.Dayjs[]>;
-    };
-    type: {
-        type: StringConstructor;
-        required: true;
-    };
-}, {
-    shortcuts: any;
-    disabledDate: any;
-    cellClassName: any;
-    minTimePickerVisible: import("vue").Ref<boolean>;
-    maxTimePickerVisible: import("vue").Ref<boolean>;
-    handleMinTimeClose: () => void;
-    handleMaxTimeClose: () => void;
-    handleShortcutClick: (shortcut: any) => void;
-    rangeState: import("vue").Ref<{
-        endDate: any;
-        selecting: boolean;
-    }>;
-    minDate: any;
-    maxDate: any;
-    handleRangePick: (val: any, close?: boolean) => void;
-    onSelect: (selecting: any) => void;
-    handleChangeRange: (val: any) => void;
-    btnDisabled: import("vue").ComputedRef<boolean>;
-    enableYearArrow: import("vue").ComputedRef<boolean>;
-    enableMonthArrow: import("vue").ComputedRef<boolean>;
-    rightPrevMonth: () => void;
-    rightPrevYear: () => void;
-    rightNextMonth: () => void;
-    rightNextYear: () => void;
-    leftPrevMonth: () => void;
-    leftPrevYear: () => void;
-    leftNextMonth: () => void;
-    leftNextYear: () => void;
-    hasShortcuts: import("vue").ComputedRef<boolean>;
-    leftLabel: import("vue").ComputedRef<string>;
-    rightLabel: import("vue").ComputedRef<string>;
-    leftDate: import("vue").Ref<{
-        clone: () => dayjs.Dayjs;
-        isValid: () => boolean;
-        year: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        month: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        date: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        day: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        hour: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        minute: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        second: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        millisecond: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        set: (unit: dayjs.UnitType, value: number) => dayjs.Dayjs;
-        get: (unit: dayjs.UnitType) => number;
-        add: (value: number, unit: dayjs.OpUnitType) => dayjs.Dayjs;
-        subtract: (value: number, unit: dayjs.OpUnitType) => dayjs.Dayjs;
-        startOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
-        endOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
-        format: (template?: string) => string;
-        diff: (date: dayjs.ConfigType, unit?: "M" | "millisecond" | "second" | "minute" | "hour" | "day" | "month" | "year" | "date" | "d" | "y" | "h" | "m" | "s" | "ms" | "week" | "w" | "quarter" | "Q", float?: boolean) => number;
-        valueOf: () => number;
-        unix: () => number;
-        daysInMonth: () => number;
-        toDate: () => Date;
-        toJSON: () => string;
-        toISOString: () => string;
-        toString: () => string;
-        utcOffset: () => number;
-        isBefore: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
-        isSame: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
-        isAfter: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
-        locale: {
-            (): string;
-            (preset: string | ILocale, object?: Partial<ILocale>): dayjs.Dayjs;
-        };
-        localeData: () => any;
-        week: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        weekYear: () => number;
-        dayOfYear: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        isSameOrAfter: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
-        isSameOrBefore: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
-    }>;
-    rightDate: import("vue").Ref<{
-        clone: () => dayjs.Dayjs;
-        isValid: () => boolean;
-        year: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        month: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        date: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        day: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        hour: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        minute: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        second: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        millisecond: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        set: (unit: dayjs.UnitType, value: number) => dayjs.Dayjs;
-        get: (unit: dayjs.UnitType) => number;
-        add: (value: number, unit: dayjs.OpUnitType) => dayjs.Dayjs;
-        subtract: (value: number, unit: dayjs.OpUnitType) => dayjs.Dayjs;
-        startOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
-        endOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
-        format: (template?: string) => string;
-        diff: (date: dayjs.ConfigType, unit?: "M" | "millisecond" | "second" | "minute" | "hour" | "day" | "month" | "year" | "date" | "d" | "y" | "h" | "m" | "s" | "ms" | "week" | "w" | "quarter" | "Q", float?: boolean) => number;
-        valueOf: () => number;
-        unix: () => number;
-        daysInMonth: () => number;
-        toDate: () => Date;
-        toJSON: () => string;
-        toISOString: () => string;
-        toString: () => string;
-        utcOffset: () => number;
-        isBefore: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
-        isSame: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
-        isAfter: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
-        locale: {
-            (): string;
-            (preset: string | ILocale, object?: Partial<ILocale>): dayjs.Dayjs;
-        };
-        localeData: () => any;
-        week: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        weekYear: () => number;
-        dayOfYear: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        isSameOrAfter: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
-        isSameOrBefore: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
-    }>;
-    showTime: import("vue").ComputedRef<boolean>;
-    t: (...args: any[]) => string;
-    minVisibleDate: import("vue").ComputedRef<any>;
-    maxVisibleDate: import("vue").ComputedRef<any>;
-    minVisibleTime: import("vue").ComputedRef<any>;
-    maxVisibleTime: import("vue").ComputedRef<any>;
-    arrowControl: any;
-    handleDateInput: (value: any, type: any) => void;
-    handleDateChange: (value: any, type: any) => void;
-    handleTimeInput: (value: any, type: any) => void;
-    handleTimeChange: (value: any, type: any) => void;
-    handleMinTimePick: (value: any, visible: any, first: any) => void;
-    handleMaxTimePick: (value: any, visible: any, first: any) => void;
-    handleClear: () => void;
-    handleConfirm: (visible?: boolean) => void;
-    timeFormat: import("vue").ComputedRef<any>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("pick" | "set-picker-option")[], "pick" | "set-picker-option", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    unlinkPanels: boolean;
-    type: unknown;
-} & {
-    parsedValue?: unknown;
-}>, {
-    unlinkPanels: boolean;
-}>;
-export default _default;

src/components/common/MyDatePicker/src/date-picker-com/panel-month-range.vue.d.ts

@@ -1,179 +0,0 @@
-import dayjs from 'dayjs';
-import { PropType } from 'vue';
-declare const _default: import("vue").DefineComponent<{
-    unlinkPanels: BooleanConstructor;
-    parsedValue: {
-        type: PropType<dayjs.Dayjs[]>;
-    };
-}, {
-    shortcuts: any;
-    disabledDate: any;
-    onSelect: (selecting: any) => void;
-    handleRangePick: (val: any, close?: boolean) => void;
-    rangeState: import("vue").Ref<{
-        endDate: any;
-        selecting: boolean;
-    }>;
-    handleChangeRange: (val: any) => void;
-    minDate: any;
-    maxDate: any;
-    enableYearArrow: import("vue").ComputedRef<boolean>;
-    leftLabel: import("vue").ComputedRef<string>;
-    rightLabel: import("vue").ComputedRef<string>;
-    leftNextYear: () => void;
-    leftPrevYear: () => void;
-    rightNextYear: () => void;
-    rightPrevYear: () => void;
-    t: (...args: any[]) => string;
-    leftDate: import("vue").Ref<{
-        clone: () => dayjs.Dayjs;
-        isValid: () => boolean;
-        year: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        month: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        date: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        day: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        hour: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        minute: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        second: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        millisecond: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        set: (unit: dayjs.UnitType, value: number) => dayjs.Dayjs;
-        get: (unit: dayjs.UnitType) => number;
-        add: (value: number, unit: dayjs.OpUnitType) => dayjs.Dayjs;
-        subtract: (value: number, unit: dayjs.OpUnitType) => dayjs.Dayjs;
-        startOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
-        endOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
-        format: (template?: string) => string;
-        diff: (date: dayjs.ConfigType, unit?: "M" | "millisecond" | "second" | "minute" | "hour" | "day" | "month" | "year" | "date" | "d" | "y" | "h" | "m" | "s" | "ms" | "week" | "w" | "quarter" | "Q", float?: boolean) => number;
-        valueOf: () => number;
-        unix: () => number;
-        daysInMonth: () => number;
-        toDate: () => Date;
-        toJSON: () => string;
-        toISOString: () => string;
-        toString: () => string;
-        utcOffset: () => number;
-        isBefore: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
-        isSame: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
-        isAfter: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
-        locale: {
-            (): string;
-            (preset: string | ILocale, object?: Partial<ILocale>): dayjs.Dayjs;
-        };
-        localeData: () => any;
-        week: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        weekYear: () => number;
-        dayOfYear: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        isSameOrAfter: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
-        isSameOrBefore: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
-    }>;
-    rightDate: import("vue").Ref<{
-        clone: () => dayjs.Dayjs;
-        isValid: () => boolean;
-        year: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        month: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        date: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        day: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        hour: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        minute: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        second: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        millisecond: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        set: (unit: dayjs.UnitType, value: number) => dayjs.Dayjs;
-        get: (unit: dayjs.UnitType) => number;
-        add: (value: number, unit: dayjs.OpUnitType) => dayjs.Dayjs;
-        subtract: (value: number, unit: dayjs.OpUnitType) => dayjs.Dayjs;
-        startOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
-        endOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
-        format: (template?: string) => string;
-        diff: (date: dayjs.ConfigType, unit?: "M" | "millisecond" | "second" | "minute" | "hour" | "day" | "month" | "year" | "date" | "d" | "y" | "h" | "m" | "s" | "ms" | "week" | "w" | "quarter" | "Q", float?: boolean) => number;
-        valueOf: () => number;
-        unix: () => number;
-        daysInMonth: () => number;
-        toDate: () => Date;
-        toJSON: () => string;
-        toISOString: () => string;
-        toString: () => string;
-        utcOffset: () => number;
-        isBefore: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
-        isSame: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
-        isAfter: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
-        locale: {
-            (): string;
-            (preset: string | ILocale, object?: Partial<ILocale>): dayjs.Dayjs;
-        };
-        localeData: () => any;
-        week: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        weekYear: () => number;
-        dayOfYear: {
-            (): number;
-            (value: number): dayjs.Dayjs;
-        };
-        isSameOrAfter: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
-        isSameOrBefore: (date: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
-    }>;
-    hasShortcuts: import("vue").ComputedRef<boolean>;
-    handleShortcutClick: (shortcut: any) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("pick" | "set-picker-option")[], "pick" | "set-picker-option", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    unlinkPanels: boolean;
-} & {
-    parsedValue?: unknown;
-}>, {
-    unlinkPanels: boolean;
-}>;
-export default _default;

src/components/common/MyDatePicker/src/date-picker.d.ts

@@ -1,154 +0,0 @@
-declare const _default: import("vue").DefineComponent<{
-    type: {
-        type: StringConstructor;
-        default: string;
-    };
-    name: {
-        type: (ArrayConstructor | StringConstructor)[];
-        default: string;
-    };
-    popperClass: {
-        type: StringConstructor;
-        default: string;
-    };
-    format: {
-        type: StringConstructor;
-    };
-    clearable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    clearIcon: {
-        type: StringConstructor;
-        default: string;
-    };
-    editable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    prefixIcon: {
-        type: StringConstructor;
-        default: string;
-    };
-    size: {
-        type: import("vue").PropType<ComponentSize>;
-        validator: (val: string) => boolean;
-    };
-    readonly: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    placeholder: {
-        type: StringConstructor;
-        default: string;
-    };
-    popperOptions: {
-        type: import("vue").PropType<import("@popperjs/core").Options>;
-        default: () => {};
-    };
-    modelValue: {
-        type: import("vue").PropType<string | Date | Date[]>;
-        default: string;
-    };
-    rangeSeparator: {
-        type: StringConstructor;
-        default: string;
-    };
-    startPlaceholder: StringConstructor;
-    endPlaceholder: StringConstructor;
-    defaultValue: {
-        type: import("vue").PropType<Date | Date[]>;
-    };
-    defaultTime: {
-        type: import("vue").PropType<Date | Date[]>;
-    };
-    isRange: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    disabledHours: {
-        type: FunctionConstructor;
-    };
-    disabledMinutes: {
-        type: FunctionConstructor;
-    };
-    disabledSeconds: {
-        type: FunctionConstructor;
-    };
-    disabledDate: {
-        type: FunctionConstructor;
-    };
-    cellClassName: {
-        type: FunctionConstructor;
-    };
-    shortcuts: {
-        type: ArrayConstructor;
-        default: () => any[];
-    };
-    arrowControl: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    validateEvent: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    unlinkPanels: BooleanConstructor;
-}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    type: unknown;
-    name: unknown;
-    popperClass: unknown;
-    clearable: boolean;
-    clearIcon: unknown;
-    editable: boolean;
-    prefixIcon: unknown;
-    readonly: boolean;
-    disabled: boolean;
-    placeholder: unknown;
-    popperOptions: unknown;
-    modelValue: unknown;
-    rangeSeparator: unknown;
-    isRange: boolean;
-    shortcuts: unknown;
-    arrowControl: boolean;
-    validateEvent: boolean;
-    unlinkPanels: boolean;
-} & {
-    format?: unknown;
-    size?: unknown;
-    startPlaceholder?: unknown;
-    endPlaceholder?: unknown;
-    defaultValue?: unknown;
-    defaultTime?: unknown;
-    disabledHours?: unknown;
-    disabledMinutes?: unknown;
-    disabledSeconds?: unknown;
-    disabledDate?: unknown;
-    cellClassName?: unknown;
-}>, {
-    type: unknown;
-    name: unknown;
-    popperClass: unknown;
-    clearable: boolean;
-    clearIcon: unknown;
-    editable: boolean;
-    prefixIcon: unknown;
-    readonly: boolean;
-    disabled: boolean;
-    placeholder: unknown;
-    popperOptions: unknown;
-    modelValue: unknown;
-    rangeSeparator: unknown;
-    isRange: boolean;
-    shortcuts: unknown;
-    arrowControl: boolean;
-    validateEvent: boolean;
-    unlinkPanels: boolean;
-}>;
-export default _default;

src/components/common/MytTimePicker/index.d.ts

@@ -1,10 +0,0 @@
-import TimePicker from './src/time-picker';
-import CommonPicker from './src/common/picker.vue';
-import TimePickPanel from './src/time-picker-com/panel-time-pick.vue';
-import type { SFCWithInstall } from 'element-plus/lib/utils/types';
-export * from './src/common/date-utils';
-export * from './src/common/constant';
-export * from './src/common/props';
-declare const _TimePicker: SFCWithInstall<typeof TimePicker>;
-export { CommonPicker, TimePickPanel };
-export default _TimePicker;

src/components/common/MytTimePicker/src/common/constant.d.ts

@@ -1,12 +0,0 @@
-export declare const DEFAULT_FORMATS_TIME = "HH:mm:ss";
-export declare const DEFAULT_FORMATS_DATE = "YYYY-MM-DD";
-export declare const DEFAULT_FORMATS_DATEPICKER: {
-    date: string;
-    week: string;
-    year: string;
-    month: string;
-    datetime: string;
-    monthrange: string;
-    daterange: string;
-    datetimerange: string;
-};

src/components/common/MytTimePicker/src/common/date-utils.d.ts

@@ -1,3 +0,0 @@
-export declare const rangeArr: (n: any) => number[];
-export declare const extractDateFormat: (format: any) => any;
-export declare const extractTimeFormat: (format: any) => any;

src/components/common/MytTimePicker/src/common/picker.vue.d.ts

@@ -1,182 +0,0 @@
-import type { Options } from '@popperjs/core';
-declare const _default: import("vue").DefineComponent<{
-    name: {
-        type: (ArrayConstructor | StringConstructor)[];
-        default: string;
-    };
-    popperClass: {
-        type: StringConstructor;
-        default: string;
-    };
-    format: {
-        type: StringConstructor;
-    };
-    type: {
-        type: StringConstructor;
-        default: string;
-    };
-    clearable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    clearIcon: {
-        type: StringConstructor;
-        default: string;
-    };
-    editable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    prefixIcon: {
-        type: StringConstructor;
-        default: string;
-    };
-    size: {
-        type: import("vue").PropType<ComponentSize>;
-        validator: (val: string) => boolean;
-    };
-    readonly: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    placeholder: {
-        type: StringConstructor;
-        default: string;
-    };
-    popperOptions: {
-        type: import("vue").PropType<Options>;
-        default: () => {};
-    };
-    modelValue: {
-        type: import("vue").PropType<string | Date | Date[]>;
-        default: string;
-    };
-    rangeSeparator: {
-        type: StringConstructor;
-        default: string;
-    };
-    startPlaceholder: StringConstructor;
-    endPlaceholder: StringConstructor;
-    defaultValue: {
-        type: import("vue").PropType<Date | Date[]>;
-    };
-    defaultTime: {
-        type: import("vue").PropType<Date | Date[]>;
-    };
-    isRange: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    disabledHours: {
-        type: FunctionConstructor;
-    };
-    disabledMinutes: {
-        type: FunctionConstructor;
-    };
-    disabledSeconds: {
-        type: FunctionConstructor;
-    };
-    disabledDate: {
-        type: FunctionConstructor;
-    };
-    cellClassName: {
-        type: FunctionConstructor;
-    };
-    shortcuts: {
-        type: ArrayConstructor;
-        default: () => any[];
-    };
-    arrowControl: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    validateEvent: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    unlinkPanels: BooleanConstructor;
-}, {
-    elPopperOptions: Options;
-    isDatesPicker: import("vue").ComputedRef<boolean>;
-    handleEndChange: () => void;
-    handleStartChange: () => void;
-    handleStartInput: (event: any) => void;
-    handleEndInput: (event: any) => void;
-    onUserInput: (e: any) => void;
-    handleChange: () => void;
-    handleKeydown: (event: any) => void;
-    popperPaneRef: import("vue").ComputedRef<any>;
-    onClickOutside: () => void;
-    pickerSize: import("vue").ComputedRef<any>;
-    isRangeInput: import("vue").ComputedRef<boolean>;
-    onMouseLeave: () => void;
-    onMouseEnter: () => void;
-    onClearIconClick: (event: any) => void;
-    showClose: import("vue").Ref<boolean>;
-    triggerClass: import("vue").ComputedRef<unknown>;
-    onPick: (date?: any, visible?: boolean) => void;
-    handleFocus: (e: any) => void;
-    pickerVisible: import("vue").Ref<boolean>;
-    pickerActualVisible: import("vue").Ref<boolean>;
-    displayValue: import("vue").ComputedRef<any>;
-    parsedValue: import("vue").ComputedRef<any>;
-    setSelectionRange: (start: any, end: any, pos: any) => void;
-    refPopper: any;
-    pickerDisabled: import("vue").ComputedRef<boolean>;
-    onSetPickerOption: (e: any) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change" | "focus" | "blur")[], "update:modelValue" | "change" | "focus" | "blur", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    name: unknown;
-    popperClass: unknown;
-    type: unknown;
-    clearable: boolean;
-    clearIcon: unknown;
-    editable: boolean;
-    prefixIcon: unknown;
-    readonly: boolean;
-    disabled: boolean;
-    placeholder: unknown;
-    popperOptions: unknown;
-    modelValue: unknown;
-    rangeSeparator: unknown;
-    isRange: boolean;
-    shortcuts: unknown;
-    arrowControl: boolean;
-    validateEvent: boolean;
-    unlinkPanels: boolean;
-} & {
-    format?: unknown;
-    size?: unknown;
-    startPlaceholder?: unknown;
-    endPlaceholder?: unknown;
-    defaultValue?: unknown;
-    defaultTime?: unknown;
-    disabledHours?: unknown;
-    disabledMinutes?: unknown;
-    disabledSeconds?: unknown;
-    disabledDate?: unknown;
-    cellClassName?: unknown;
-}>, {
-    name: unknown;
-    popperClass: unknown;
-    type: unknown;
-    clearable: boolean;
-    clearIcon: unknown;
-    editable: boolean;
-    prefixIcon: unknown;
-    readonly: boolean;
-    disabled: boolean;
-    placeholder: unknown;
-    popperOptions: unknown;
-    modelValue: unknown;
-    rangeSeparator: unknown;
-    isRange: boolean;
-    shortcuts: unknown;
-    arrowControl: boolean;
-    validateEvent: boolean;
-    unlinkPanels: boolean;
-}>;
-export default _default;

src/components/common/MytTimePicker/src/common/props.d.ts

@@ -1,103 +0,0 @@
-import type { PropType } from 'vue';
-import type { Options } from '@popperjs/core';
-export declare const defaultProps: {
-    name: {
-        type: (ArrayConstructor | StringConstructor)[];
-        default: string;
-    };
-    popperClass: {
-        type: StringConstructor;
-        default: string;
-    };
-    format: {
-        type: StringConstructor;
-    };
-    type: {
-        type: StringConstructor;
-        default: string;
-    };
-    clearable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    clearIcon: {
-        type: StringConstructor;
-        default: string;
-    };
-    editable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    prefixIcon: {
-        type: StringConstructor;
-        default: string;
-    };
-    size: {
-        type: PropType<ComponentSize>;
-        validator: (val: string) => boolean;
-    };
-    readonly: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    placeholder: {
-        type: StringConstructor;
-        default: string;
-    };
-    popperOptions: {
-        type: PropType<Options>;
-        default: () => {};
-    };
-    modelValue: {
-        type: PropType<string | Date | Date[]>;
-        default: string;
-    };
-    rangeSeparator: {
-        type: StringConstructor;
-        default: string;
-    };
-    startPlaceholder: StringConstructor;
-    endPlaceholder: StringConstructor;
-    defaultValue: {
-        type: PropType<Date | Date[]>;
-    };
-    defaultTime: {
-        type: PropType<Date | Date[]>;
-    };
-    isRange: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    disabledHours: {
-        type: FunctionConstructor;
-    };
-    disabledMinutes: {
-        type: FunctionConstructor;
-    };
-    disabledSeconds: {
-        type: FunctionConstructor;
-    };
-    disabledDate: {
-        type: FunctionConstructor;
-    };
-    cellClassName: {
-        type: FunctionConstructor;
-    };
-    shortcuts: {
-        type: ArrayConstructor;
-        default: () => any[];
-    };
-    arrowControl: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    validateEvent: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    unlinkPanels: BooleanConstructor;
-};

src/components/common/MytTimePicker/src/time-picker-com/basic-time-spinner.vue.d.ts

@@ -1,86 +0,0 @@
-import { Ref, PropType } from 'vue';
-import { Dayjs } from 'dayjs';
-declare const _default: import("vue").DefineComponent<{
-    role: {
-        type: StringConstructor;
-        required: true;
-    };
-    spinnerDate: {
-        type: PropType<Dayjs>;
-        required: true;
-    };
-    showSeconds: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    arrowControl: BooleanConstructor;
-    amPmMode: {
-        type: StringConstructor;
-        default: string;
-    };
-    disabledHours: {
-        type: FunctionConstructor;
-    };
-    disabledMinutes: {
-        type: FunctionConstructor;
-    };
-    disabledSeconds: {
-        type: FunctionConstructor;
-    };
-}, {
-    getRefId: (item: any) => string;
-    spinnerItems: import("vue").ComputedRef<string[]>;
-    currentScrollbar: any;
-    hours: import("vue").ComputedRef<any>;
-    minutes: import("vue").ComputedRef<any>;
-    seconds: import("vue").ComputedRef<any>;
-    hoursList: import("vue").ComputedRef<any[]>;
-    minutesList: import("vue").ComputedRef<any[]>;
-    arrowHourList: import("vue").ComputedRef<any[]>;
-    arrowMinuteList: import("vue").ComputedRef<any[]>;
-    arrowSecondList: import("vue").ComputedRef<any[]>;
-    getAmPmFlag: (hour: any) => string;
-    emitSelectRange: (type: any) => void;
-    adjustCurrentSpinner: (type: any) => void;
-    typeItemHeight: (type: any) => any;
-    listHoursRef: Ref<HTMLElement>;
-    listMinutesRef: Ref<HTMLElement>;
-    listSecondsRef: Ref<HTMLElement>;
-    onIncreaseClick: () => void;
-    onDecreaseClick: () => void;
-    handleClick: (type: any, { value, disabled }: {
-        value: any;
-        disabled: any;
-    }) => void;
-    secondsList: import("vue").ComputedRef<any[]>;
-    timePartsMap: import("vue").ComputedRef<{
-        hours: import("vue").ComputedRef<any>;
-        minutes: import("vue").ComputedRef<any>;
-        seconds: import("vue").ComputedRef<any>;
-    }>;
-    arrowListMap: import("vue").ComputedRef<{
-        hours: import("vue").ComputedRef<any[]>;
-        minutes: import("vue").ComputedRef<any[]>;
-        seconds: import("vue").ComputedRef<any[]>;
-    }>;
-    listMap: import("vue").ComputedRef<{
-        hours: import("vue").ComputedRef<any[]>;
-        minutes: import("vue").ComputedRef<any[]>;
-        seconds: import("vue").ComputedRef<any[]>;
-    }>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "select-range" | "set-option")[], "change" | "select-range" | "set-option", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    role: unknown;
-    spinnerDate: unknown;
-    showSeconds: boolean;
-    arrowControl: boolean;
-    amPmMode: unknown;
-} & {
-    disabledHours?: unknown;
-    disabledMinutes?: unknown;
-    disabledSeconds?: unknown;
-}>, {
-    showSeconds: boolean;
-    arrowControl: boolean;
-    amPmMode: unknown;
-}>;
-export default _default;

src/components/common/MytTimePicker/src/time-picker-com/panel-time-pick.vue.d.ts

@@ -1,45 +0,0 @@
-import { PropType } from 'vue';
-import dayjs, { Dayjs } from 'dayjs';
-declare const _default: import("vue").DefineComponent<{
-    visible: BooleanConstructor;
-    actualVisible: {
-        type: BooleanConstructor;
-        default: any;
-    };
-    datetimeRole: {
-        type: StringConstructor;
-    };
-    parsedValue: {
-        type: PropType<string | dayjs.Dayjs>;
-    };
-    format: {
-        type: StringConstructor;
-        default: string;
-    };
-}, {
-    transitionName: import("vue").ComputedRef<"" | "el-zoom-in-top">;
-    arrowControl: any;
-    onSetOption: (e: any) => void;
-    t: (...args: any[]) => string;
-    handleConfirm: (visible: boolean, first: any) => void;
-    handleChange: (_date: Dayjs) => void;
-    setSelectionRange: (start: any, end: any) => void;
-    amPmMode: import("vue").ComputedRef<"" | "A" | "a">;
-    showSeconds: import("vue").ComputedRef<any>;
-    handleCancel: () => void;
-    disabledHours: any;
-    disabledMinutes: any;
-    disabledSeconds: any;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("pick" | "select-range" | "set-picker-option")[], "pick" | "select-range" | "set-picker-option", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    visible: boolean;
-    actualVisible: boolean;
-    format: unknown;
-} & {
-    datetimeRole?: unknown;
-    parsedValue?: unknown;
-}>, {
-    visible: boolean;
-    actualVisible: boolean;
-    format: unknown;
-}>;
-export default _default;

src/components/common/MytTimePicker/src/time-picker-com/panel-time-range.vue.d.ts

@@ -1,44 +0,0 @@
-import { PropType } from 'vue';
-import dayjs from 'dayjs';
-declare const _default: import("vue").DefineComponent<{
-    visible: BooleanConstructor;
-    actualVisible: BooleanConstructor;
-    parsedValue: {
-        type: PropType<string | dayjs.Dayjs[]>;
-    };
-    format: {
-        type: StringConstructor;
-        default: string;
-    };
-}, {
-    arrowControl: any;
-    onSetOption: (e: any) => void;
-    setMaxSelectionRange: (start: any, end: any) => void;
-    setMinSelectionRange: (start: any, end: any) => void;
-    btnConfirmDisabled: import("vue").ComputedRef<boolean>;
-    handleCancel: () => void;
-    handleConfirm: (visible?: boolean) => void;
-    t: (...args: any[]) => string;
-    showSeconds: import("vue").ComputedRef<any>;
-    minDate: import("vue").ComputedRef<any>;
-    maxDate: import("vue").ComputedRef<any>;
-    amPmMode: import("vue").ComputedRef<"" | "A" | "a">;
-    handleMinChange: (date: any) => void;
-    handleMaxChange: (date: any) => void;
-    minSelectableRange: import("vue").Ref<any[]>;
-    maxSelectableRange: import("vue").Ref<any[]>;
-    disabledHours_: (role: any, compare: any) => any[];
-    disabledMinutes_: (hour: any, role: any, compare: any) => any;
-    disabledSeconds_: (hour: any, minute: any, role: any, compare: any) => any;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("pick" | "select-range" | "set-picker-option")[], "pick" | "select-range" | "set-picker-option", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    visible: boolean;
-    actualVisible: boolean;
-    format: unknown;
-} & {
-    parsedValue?: unknown;
-}>, {
-    visible: boolean;
-    actualVisible: boolean;
-    format: unknown;
-}>;
-export default _default;

src/components/common/MytTimePicker/src/time-picker-com/useTimePicker.d.ts

@@ -1,155 +0,0 @@
-import { Dayjs } from 'dayjs';
-export declare const getTimeLists: (disabledHours: any, disabledMinutes: any, disabledSeconds: any) => {
-    getHoursList: (role: any, compare?: any) => any[];
-    getMinutesList: (hour: any, role: any, compare?: any) => any[];
-    getSecondsList: (hour: any, minute: any, role: any, compare?: any) => any[];
-};
-export declare const getAvaliableArrs: (disabledHours: any, disabledMinutes: any, disabledSeconds: any) => {
-    getAvaliableHours: (role: any, compare?: any) => any;
-    getAvaliableMinutes: (hour: any, role: any, compare?: any) => any;
-    getAvaliableSeconds: (hour: any, minute: any, role: any, compare?: any) => any;
-};
-export declare const useOldValue: (props: {
-    parsedValue?: string | Dayjs | Dayjs[];
-    visible: boolean;
-}) => import("vue").Ref<string | {
-    clone: () => Dayjs;
-    isValid: () => boolean;
-    year: {
-        (): number;
-        (value: number): Dayjs;
-    };
-    month: {
-        (): number;
-        (value: number): Dayjs;
-    };
-    date: {
-        (): number;
-        (value: number): Dayjs;
-    };
-    day: {
-        (): number;
-        (value: number): Dayjs;
-    };
-    hour: {
-        (): number;
-        (value: number): Dayjs;
-    };
-    minute: {
-        (): number;
-        (value: number): Dayjs;
-    };
-    second: {
-        (): number;
-        (value: number): Dayjs;
-    };
-    millisecond: {
-        (): number;
-        (value: number): Dayjs;
-    };
-    set: (unit: import("dayjs").UnitType, value: number) => Dayjs;
-    get: (unit: import("dayjs").UnitType) => number;
-    add: (value: number, unit: import("dayjs").OpUnitType) => Dayjs;
-    subtract: (value: number, unit: import("dayjs").OpUnitType) => Dayjs;
-    startOf: (unit: import("dayjs").OpUnitType) => Dayjs;
-    endOf: (unit: import("dayjs").OpUnitType) => Dayjs;
-    format: (template?: string) => string;
-    diff: (date: import("dayjs").ConfigType, unit?: "year" | "month" | "date" | "day" | "hour" | "minute" | "second" | "millisecond" | "week" | "d" | "M" | "y" | "h" | "m" | "s" | "ms" | "w" | "quarter" | "Q", float?: boolean) => number;
-    valueOf: () => number;
-    unix: () => number;
-    daysInMonth: () => number;
-    toDate: () => Date;
-    toJSON: () => string;
-    toISOString: () => string;
-    toString: () => string;
-    utcOffset: () => number;
-    isBefore: (date: import("dayjs").ConfigType, unit?: import("dayjs").OpUnitType) => boolean;
-    isSame: (date: import("dayjs").ConfigType, unit?: import("dayjs").OpUnitType) => boolean;
-    isAfter: (date: import("dayjs").ConfigType, unit?: import("dayjs").OpUnitType) => boolean;
-    locale: {
-        (): string;
-        (preset: string | ILocale, object?: Partial<ILocale>): Dayjs;
-    };
-    localeData: () => any;
-    week: {
-        (): number;
-        (value: number): Dayjs;
-    };
-    weekYear: () => number;
-    dayOfYear: {
-        (): number;
-        (value: number): Dayjs;
-    };
-    isSameOrAfter: (date: import("dayjs").ConfigType, unit?: import("dayjs").OpUnitType) => boolean;
-    isSameOrBefore: (date: import("dayjs").ConfigType, unit?: import("dayjs").OpUnitType) => boolean;
-} | {
-    clone: () => Dayjs;
-    isValid: () => boolean;
-    year: {
-        (): number;
-        (value: number): Dayjs;
-    };
-    month: {
-        (): number;
-        (value: number): Dayjs;
-    };
-    date: {
-        (): number;
-        (value: number): Dayjs;
-    };
-    day: {
-        (): number;
-        (value: number): Dayjs;
-    };
-    hour: {
-        (): number;
-        (value: number): Dayjs;
-    };
-    minute: {
-        (): number;
-        (value: number): Dayjs;
-    };
-    second: {
-        (): number;
-        (value: number): Dayjs;
-    };
-    millisecond: {
-        (): number;
-        (value: number): Dayjs;
-    };
-    set: (unit: import("dayjs").UnitType, value: number) => Dayjs;
-    get: (unit: import("dayjs").UnitType) => number;
-    add: (value: number, unit: import("dayjs").OpUnitType) => Dayjs;
-    subtract: (value: number, unit: import("dayjs").OpUnitType) => Dayjs;
-    startOf: (unit: import("dayjs").OpUnitType) => Dayjs;
-    endOf: (unit: import("dayjs").OpUnitType) => Dayjs;
-    format: (template?: string) => string;
-    diff: (date: import("dayjs").ConfigType, unit?: "year" | "month" | "date" | "day" | "hour" | "minute" | "second" | "millisecond" | "week" | "d" | "M" | "y" | "h" | "m" | "s" | "ms" | "w" | "quarter" | "Q", float?: boolean) => number;
-    valueOf: () => number;
-    unix: () => number;
-    daysInMonth: () => number;
-    toDate: () => Date;
-    toJSON: () => string;
-    toISOString: () => string;
-    toString: () => string;
-    utcOffset: () => number;
-    isBefore: (date: import("dayjs").ConfigType, unit?: import("dayjs").OpUnitType) => boolean;
-    isSame: (date: import("dayjs").ConfigType, unit?: import("dayjs").OpUnitType) => boolean;
-    isAfter: (date: import("dayjs").ConfigType, unit?: import("dayjs").OpUnitType) => boolean;
-    locale: {
-        (): string;
-        (preset: string | ILocale, object?: Partial<ILocale>): Dayjs;
-    };
-    localeData: () => any;
-    week: {
-        (): number;
-        (value: number): Dayjs;
-    };
-    weekYear: () => number;
-    dayOfYear: {
-        (): number;
-        (value: number): Dayjs;
-    };
-    isSameOrAfter: (date: import("dayjs").ConfigType, unit?: import("dayjs").OpUnitType) => boolean;
-    isSameOrBefore: (date: import("dayjs").ConfigType, unit?: import("dayjs").OpUnitType) => boolean;
-}[]>;

src/components/common/MytTimePicker/src/time-picker.d.ts

@@ -1,154 +0,0 @@
-declare const _default: import("vue").DefineComponent<{
-    isRange: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    name: {
-        type: (ArrayConstructor | StringConstructor)[];
-        default: string;
-    };
-    popperClass: {
-        type: StringConstructor;
-        default: string;
-    };
-    format: {
-        type: StringConstructor;
-    };
-    type: {
-        type: StringConstructor;
-        default: string;
-    };
-    clearable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    clearIcon: {
-        type: StringConstructor;
-        default: string;
-    };
-    editable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    prefixIcon: {
-        type: StringConstructor;
-        default: string;
-    };
-    size: {
-        type: import("vue").PropType<ComponentSize>;
-        validator: (val: string) => boolean;
-    };
-    readonly: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    placeholder: {
-        type: StringConstructor;
-        default: string;
-    };
-    popperOptions: {
-        type: import("vue").PropType<import("@popperjs/core").Options>;
-        default: () => {};
-    };
-    modelValue: {
-        type: import("vue").PropType<string | Date | Date[]>;
-        default: string;
-    };
-    rangeSeparator: {
-        type: StringConstructor;
-        default: string;
-    };
-    startPlaceholder: StringConstructor;
-    endPlaceholder: StringConstructor;
-    defaultValue: {
-        type: import("vue").PropType<Date | Date[]>;
-    };
-    defaultTime: {
-        type: import("vue").PropType<Date | Date[]>;
-    };
-    disabledHours: {
-        type: FunctionConstructor;
-    };
-    disabledMinutes: {
-        type: FunctionConstructor;
-    };
-    disabledSeconds: {
-        type: FunctionConstructor;
-    };
-    disabledDate: {
-        type: FunctionConstructor;
-    };
-    cellClassName: {
-        type: FunctionConstructor;
-    };
-    shortcuts: {
-        type: ArrayConstructor;
-        default: () => any[];
-    };
-    arrowControl: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    validateEvent: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    unlinkPanels: BooleanConstructor;
-}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    isRange: boolean;
-    name: unknown;
-    popperClass: unknown;
-    type: unknown;
-    clearable: boolean;
-    clearIcon: unknown;
-    editable: boolean;
-    prefixIcon: unknown;
-    readonly: boolean;
-    disabled: boolean;
-    placeholder: unknown;
-    popperOptions: unknown;
-    modelValue: unknown;
-    rangeSeparator: unknown;
-    shortcuts: unknown;
-    arrowControl: boolean;
-    validateEvent: boolean;
-    unlinkPanels: boolean;
-} & {
-    format?: unknown;
-    size?: unknown;
-    startPlaceholder?: unknown;
-    endPlaceholder?: unknown;
-    defaultValue?: unknown;
-    defaultTime?: unknown;
-    disabledHours?: unknown;
-    disabledMinutes?: unknown;
-    disabledSeconds?: unknown;
-    disabledDate?: unknown;
-    cellClassName?: unknown;
-}>, {
-    isRange: boolean;
-    name: unknown;
-    popperClass: unknown;
-    type: unknown;
-    clearable: boolean;
-    clearIcon: unknown;
-    editable: boolean;
-    prefixIcon: unknown;
-    readonly: boolean;
-    disabled: boolean;
-    placeholder: unknown;
-    popperOptions: unknown;
-    modelValue: unknown;
-    rangeSeparator: unknown;
-    shortcuts: unknown;
-    arrowControl: boolean;
-    validateEvent: boolean;
-    unlinkPanels: boolean;
-}>;
-export default _default;

src/components/common/Pagination.vue

@@ -23,8 +23,8 @@
 </template>
 
 <script>
-import { defaultPageSize } from '@/utils/constants'
-import { storageKey } from '@/utils/constants'
+import { defaultPageSize, storageKey } from '@/utils/constants'
+
 import { urlParamsHandler, overwriteUrl } from '@/utils/tools'
 import { ref } from 'vue'
 import { useRoute } from 'vue-router'
@@ -186,7 +186,6 @@ export default {
       }
     }
 
-    this.size(this.pageSize)
     this.currentPageNo = parseInt(this.currentPageNo)
     this.current(this.currentPageNo)
   },

src/components/common/TimeRange/DateTimeRange.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-ele-click-outside="changeDropdown" style="position: relative;z-index: 2" class="date-range-box">
+  <div v-ele-click-outside="changeDropdown" style="position: relative;z-index: 1" class="date-range-box">
     <div @click="showDropdown" class="date-range-text">
       <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">
@@ -86,7 +86,7 @@ export default {
   props: {
     startTime: {
       type: Number,
-      default: window.$dayJs.tz().valueOf() - 1 * 60 * 60 * 1000
+      default: window.$dayJs.tz().valueOf() - 60 * 60 * 1000
     },
     endTime: {
       type: Number,
@@ -293,9 +293,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-/deep/.el-input__inner {
-  visibility: hidden !important;
-}
-</style>

src/components/common/TimeRange/TimeRefresh.vue

@@ -42,17 +42,9 @@ export default {
       unit: 2,
       dropdownShow: false,
       interLabel: ''
-      // refreshArr: [
-      //   { value: -1, label: 'off' },
-      //   { value: 30, label: '30s' },
-      //   { value: 60, label: '1m' },
-      //   { value: 300, label: '5m' },
-      //   { value: 900, label: '15m' },
-      //   { value: 1800, label: '30m' }
-      // ]
     }
   },
-  setup (props, ctx) {
+  setup () {
     const { query } = useRoute()
     const store = useStore()
     const refreshArr = [
@@ -100,7 +92,7 @@ export default {
   methods: {
     setRefresh (val) {
       this.interval = val.value
-      this.interLabel = val.value == -1 ? '' : val.label
+      this.interLabel = val.value === -1 ? '' : val.label
       this.dropdownShow = false
       const now = window.$dayJs.tz().valueOf()
       if (val && val.value !== -1) {
@@ -119,6 +111,7 @@ export default {
         }
         this.reloadUrl(dateParam)
         this.$store.commit('setRefreshTime', val.value)
+        this.$store.commit('setRefreshFlag', true)
 
         // 设置定时器
         this.intervalTimer = setInterval(() => {

src/components/layout/Header.vue

@@ -4,7 +4,7 @@
       <div class="banner__left">
         <span @click="shrink" class="shrink-button" :class="{'shrink-button--collapse': showMenu}"><i
             class="cn-icon cn-icon-navigation"></i></span>
-        <img alt="loading..." height="26" :src="logo?logo:require('../../assets/img/logo-header.svg')"/>
+        <img alt="loading..." height="26" :src="logo?logo:require('../../assets/img/logo-header.svg')" @click="jump('/panel/networkOverview', '', '', 0)" style="cursor: pointer"/>
       </div>
       <!--个人操作-->
       <div class="personal">
@@ -42,7 +42,7 @@
     </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 ? '>' : ''">
+      <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">
           <template v-if="index===3">
@@ -104,7 +104,7 @@
           </template>
           <template v-else-if="index===1">
             <span class="route-menu" @click="jump(route,'','',2)"
-                  v-if="route.indexOf('detection') === -1">{{ item }}</span>
+                  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"-->
@@ -228,7 +228,7 @@ import {
   getTabList,
   overwriteUrl,
   urlParamsHandler,
-  combinDrilldownTableWithUserConfig,
+  combineDrilldownTableWithUserConfig,
   getDnsMapData,
   handleSpecialValue
 } from '@/utils/tools'
@@ -301,7 +301,8 @@ export default {
       curPageNum: 1,
       curTabState: curTabState,
       urlChangeParams: {},
-      wholeScreenRouterMapping
+      wholeScreenRouterMapping,
+      logo: '' // 此处logo的url未被初始化，可能后续会改动
     }
   },
   computed: {
@@ -378,14 +379,28 @@ export default {
       if (this.from !== n) {
         this.from = n
       }
+    },
+    async breadcrumb (n) {
+      if (this.$route.params.typeName === fromRoute.dnsServiceInsights) {
+        if (this.dnsQtypeMapData.size === 0) {
+          this.dnsQtypeMapData = await getDnsMapData('dnsQtype')
+        }
+        if (this.dnsRcodeMapData.size === 0) {
+          this.dnsRcodeMapData = await getDnsMapData('dnsRcode')
+        }
+      }
     }
   },
   async mounted () {
     this.from = Object.keys(this.entityType)[0]
     // 是否需要dns的qtype和rcode的数据字典
-    if(this.$route.params.typeName === fromRoute.dnsServiceInsights) {
-      this.dnsQtypeMapData = await getDnsMapData('dnsQtype')
-      this.dnsRcodeMapData = await getDnsMapData('dnsRcode')
+    if (this.$route.params.typeName === fromRoute.dnsServiceInsights) {
+      if (this.dnsQtypeMapData.size === 0) {
+        this.dnsQtypeMapData = await getDnsMapData('dnsQtype')
+      }
+      if (this.dnsRcodeMapData.size === 0) {
+        this.dnsRcodeMapData = await getDnsMapData('dnsRcode')
+      }
     }
     this.initDropdownList()
   },
@@ -435,7 +450,7 @@ export default {
       const tableType = this.$route.params ? this.$route.params.typeName : 'networkOverview'
       const curTableInCode = networkTable[tableType] ? networkTable[tableType] : networkTable.networkOverview
       if (curTableInCode && curTableInCode.tabList) {
-        curTab = curTableInCode.tabList.find(item => item.label == label)
+        curTab = curTableInCode.tabList.find(item => item.label === label)
       }
       return curTab
     },
@@ -448,7 +463,7 @@ export default {
       const tableType = this.$route.params ? this.$route.params.typeName : 'networkOverview'
       const curTableInCode = networkTable[tableType] ? networkTable[tableType] : networkTable.networkOverview
       if (curTableInCode && curTableInCode.tabList) {
-        const curTab = curTableInCode.tabList.find(item => item.label == columnName)
+        const curTab = curTableInCode.tabList.find(item => item.label === columnName)
         if (curTab) {
           type = curTab.prop
         }
@@ -460,12 +475,20 @@ export default {
         type: type,
         name: this.dropDownValue ? this.dropDownValue : ''
       }
+      // 有的界面刷新时没有drilldownList接口地址，会报404
+      if (!curTableInCode.url.drilldownList) {
+        return true
+      }
       get(curTableInCode.url.drilldownList, params).then(async response => {
         if (response.code === 200) {
           this.breadcrumbColumnValueListShow = response.data.result
-          if(this.from === fromRoute.dnsServiceInsights) {
-            this.dnsQtypeMapData = await getDnsMapData('dnsQtype')
-            this.dnsRcodeMapData = await getDnsMapData('dnsRcode')
+          if (this.$route.params.typeName === fromRoute.dnsServiceInsights) {
+            if (this.dnsQtypeMapData.size === 0) {
+              this.dnsQtypeMapData = await getDnsMapData('dnsQtype')
+            }
+            if (this.dnsRcodeMapData.size === 0) {
+              this.dnsRcodeMapData = await getDnsMapData('dnsRcode')
+            }
           }
           this.$nextTick(() => {
             this.breadcrumbColumnValueListShow.forEach(item => {
@@ -571,17 +594,17 @@ export default {
       }
       this.urlChangeParams = {}
     },
-    async handleCurDrilldownTableConfig (thirdMenu, fourthMenu) {
+    async handleCurDrilldownTableConfig (thirdMenu) {
       // const userId = localStorage.getItem(storageKey.userId)
       const tableType = this.$route.params ? this.$route.params.typeName : 'networkOverview'
-      const drillDownTableConfigs = await combinDrilldownTableWithUserConfig()
+      const metric = this.getUrlParam(this.curTabState.tableMetric, 'Bits/s')
+      const drillDownTableConfigs = await combineDrilldownTableWithUserConfig()
       const currentTableConfig = drillDownTableConfigs.find(config => config.route === tableType)
       const tables = currentTableConfig ? currentTableConfig.tables : []
       const commonTabList = currentTableConfig ? currentTableConfig.tabs : []
       if (tables && tables.length > 0) {
         const curTable = tables.find(table => table.id === tableType)
         if (curTable) {
-          const metric = this.getUrlParam(this.curTabState.tableMetric, 'Bits/s')
           const tabList = getTabList(curTable, metric)// 未下钻的tab列表
           if (tabList && tabList.length > 0) {
             combineTabList(tableType, tabList, commonTabList)
@@ -595,6 +618,9 @@ export default {
       }
     },
     jump (route, columnName, columnValue, opeType) {
+      if (route === '/panel/linkMonitor' && opeType === 3) {
+        return true
+      }
       this.showMenu = false
       const menus = this.breadcrumb
       if (opeType) {
@@ -668,7 +694,7 @@ export default {
             t: +new Date()
           }
         })
-      } else if (opeType != 4) {
+      } else if (opeType !== 4) {
         this.$router.push({
           query: {
             ...this.$route.query,

src/components/table/report/builtinReportTable.vue

@@ -1,172 +0,0 @@
-<template>
-  <el-table
-      id="userTable"
-      ref="dataTable"
-      :data="tableData"
-      :height="height"
-      border
-      @header-dragend="dragend"
-      @sort-change="tableDataSort"
-      @selection-change="selectionChange"
-  >
-    <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}`"
-        :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}`"
-    >
-      <template #header>
-        <span class="data-column__span">{{item.label}}</span>
-        <div class="col-resize-area"></div>
-      </template>
-      <template #default="scope" :column="item">
-        <span v-if="item.prop === 'dataRange'">
-          <template v-if="scope.row.startTime && scope.row.endTime">
-            {{dateFormatByAppearance(scope.row.startTime)}}<span style="padding: 0 5px">-</span>{{dateFormatByAppearance(scope.row.endTime)}}
-          </template>
-        </span>
-        <span v-else-if="item.prop === 'type'">
-            {{$_.get(scope.row.reportTemp, 'name')}}
-        </span>
-        <span v-else-if="item.prop === 'state'">
-            {{getJobStatus(scope.row)}}
-        </span>
-        <span v-else>{{scope.row[item.prop]}}</span>
-      </template>
-
-    </el-table-column>
-    <el-table-column
-        :resizable="false"
-        :width="operationWidth"
-        fixed="right">
-      <template #header>
-        <div class="table-operation-title">{{$t('overall.option')}}</div>
-      </template>
-      <template #default="scope">
-        <div class="table-operation-items" v-if="scope.row.state === 1">
-          <div class="table-operation-item--no-border" @click="tableOperation(['download', scope.row, 1])">
-            <loading :loading="loadingTableId === scope.row.id"></loading>
-            <svg class="icon" aria-hidden="true" :class="{'table-operation-all-loading': loadingTableId}">
-              <use xlink:href="#cn-icon-download2"></use>
-            </svg>
-          </div>
-          <div class="table-operation-item--no-border" @click="tableOperation(['preview', scope.row])">
-            <loading :loading="loadingPreviewId === scope.row.id"></loading>
-            <svg class="icon" aria-hidden="true" :class="{'table-operation-all-loading': loadingPreviewId}">
-              <use xlink:href="#cn-icon-preview"></use>
-            </svg>
-          </div>
-<!--          <div class="table-operation-item&#45;&#45;no-border" @click="tableOperation(['rerun', scope.row])">
-            <loading :loading="loadingPreviewId === scope.row.id"></loading>
-            <svg class="icon2" aria-hidden="true" :class="{'table-operation-all-loading': loadingPreviewId}">
-              <use xlink:href="#cn-icon-refresh"></use>
-            </svg>
-          </div>-->
-        </div>
-      </template>
-    </el-table-column>
-  </el-table>
-  <div class="table-operation-all">
-    <el-checkbox v-model="checkboxAll" @change="selectAll(tableData)"></el-checkbox>
-    <div class="table-operation-all-span">
-      <span>{{ $t('overall.all') }}</span>
-      <div class="table-operation-back-down" :class="{'table-operation-all-checkbox': batchDow, 'table-operation-all-loading': loading}" @click="tableOperation(['download', this.checkboxIds, 2])">
-        <loading :loading="loading"></loading>
-        <span>{{$t('report.batchDow')}}</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import table from '@/mixins/table'
-import Loading from '@/components/common/Loading'
-export default {
-  name: 'builtinReportTable',
-  mixins: [table],
-  components: {
-    Loading
-  },
-  data () {
-    return {
-      tableTitle: [ // 原始table列
-        {
-          label: this.$t('config.user.name'),
-          prop: 'name',
-          show: true,
-          sortable: 'custom'
-        }, /* {
-          label: this.$t('config.chart.remark'),
-          prop: 'remark',
-          show: true
-        }, */{
-          label: this.$t('overall.type'),
-          prop: 'type',
-          show: true,
-          sortable: 'custom'
-        }, {
-          label: this.$t('report.dataRange'),
-          prop: 'dataRange',
-          show: true,
-          minWidth: 110
-        }, {
-          label: this.$t('overall.completionTime'),
-          prop: 'finishTime',
-          show: true
-        }, {
-          label: this.$t('overall.status'),
-          prop: 'state',
-          show: true,
-          width: 130,
-          sortable: 'custom'
-        }
-      ],
-      checkboxAll: false,
-      checkboxIds: '',
-      batchDow: false,
-      builtinId: '',
-      indeterminate: false,
-      loading: false,
-      loadingTableId: '',
-      loadingPreviewId: ''
-
-    }
-  },
-  methods: {
-    getJobStatus (report) {
-      if (report.state === 1 && report.upload === 1) {
-        return this.$t('overall.completed')
-      } else {
-        return this.$t('overall.inProgress')
-      }
-    },
-    selectionChange (objs) {
-      this.$emit('selectionChange', objs)
-      this.checkboxIds = objs.map(item => { return item.id }).join(',')
-      this.checkboxAll = objs.length > 0 || objs.length === this.tableData.length
-      this.batchDow = objs.length > 0
-    },
-    selectAll (objs) {
-      if (objs) {
-        objs.forEach(item => {
-          this.$refs.dataTable.toggleAllSelection(item)
-        })
-      } else {
-        this.$refs.dataTable.clearSelection()
-      }
-    }
-  }
-}
-</script>

src/components/table/report/reportTestTable.vue

@@ -6,7 +6,7 @@
         :data="tableData"
         :height="height"
         :expand-row-keys="expandedIds"
-        empty-text=""
+        :empty-text="$t('npm.noData')"
         border
         tooltip-effect="light"
         :row-key="(row) => { return row.id }"

src/i18n/index.js

@@ -1,4 +1,4 @@
-import { createI18n } from 'vue-i18n'
+import { createI18n } from 'vue-i18n/index'
 import { storageKey } from '@/utils/constants'
 import { getI18n } from '@/utils/api'
 import store from '@/store'

src/jest.config.js

@@ -1,37 +0,0 @@
-module.exports = {
-  globals: {
-    // work around: https://github.com/kulshekhar/ts-jest/issues/748#issuecomment-423528659
-    'ts-jest': {
-      diagnostics: {
-        ignoreCodes: [151001]
-      }
-    }
-  },
-  testEnvironment: 'jsdom',
-  transform: {
-    '^.+\\.vue$': 'vue-jest',
-    '^.+\\.(t|j)sx?$': [
-      'babel-jest', {
-        presets: [
-          [
-            '@babel/preset-env',
-            {
-              targets: {
-                node: true
-              }
-            }
-          ],
-          '@babel/preset-typescript'
-        ],
-        plugins: [
-          '@vue/babel-plugin-jsx',
-          '@babel/plugin-proposal-class-properties'
-        ]
-      }
-    ]
-  },
-  moduleFileExtensions: ['ts', 'tsx', 'js', 'json'],
-  // u can change this option to a more specific folder for test single component or util when dev
-  // for example, ['<rootDir>/packages/input']
-  roots: ['<rootDir>']
-}

src/mixins/data-list.js

@@ -32,6 +32,8 @@ export default {
       object: {},
       searchLabel: ref({}),
 
+      isFirstQuery: true,
+
       tableData: [],
       scrollbarWrap: null,
       delFlag: false,
@@ -118,7 +120,14 @@ export default {
     },
     pageNo (val) {
       this.pageObj.pageNo = val
-      this.getTableData()
+      if (this.isFirstQuery) {
+        this.isFirstQuery = false
+        setTimeout(() => {
+          this.getTableData()
+        }, 300)
+      } else {
+        this.getTableData()
+      }
     },
     pageSize (val) {
       this.pageObj.pageSize = val
@@ -152,6 +161,9 @@ export default {
       if (this.$refs.dataTable.loadingTableId === u.id) { // 列表单个下载
         return
       }
+      if (u.state !== 1 || u.upload !== 1) {
+        return
+      }
       let fileName = ''
       let url = ''
       let params = {}
@@ -211,6 +223,9 @@ export default {
       if (this.$refs.dataTable.loadingPreviewId === u.id) { // 列表单个下载
         return
       }
+      if (u.state !== 1 || u.upload !== 1) {
+        return
+      }
       const params = {
         id: u.id
       }
@@ -293,6 +308,6 @@ export default {
       const arr = localStorageTableTitle.splice(this.$refs.dataTable.tableTitle.length, localStorageTableTitle.length)
       this.tools.customTableTitle = this.tools.customTableTitle.concat(arr)
     }
-    this.getTableData()
+    // this.getTableData()
   }
 }

src/mock/npm.js

@@ -4,27 +4,27 @@ const openMock = false
 if (openMock) {
   Mock.mock(new RegExp(BASE_CONFIG.baseUrl + 'visual/panel.*'), 'get', function (requestObj) {
     return {
-      "msg": "success",
-      "code": 200,
-      "data": {
-        "total": 1,
-        "pageSize": 10,
-        "pages": 1,
-        "pageNo": 1,
-        "list": [
+      msg: 'success',
+      code: 200,
+      data: {
+        total: 1,
+        pageSize: 10,
+        pages: 1,
+        pageNo: 1,
+        list: [
           {
-            "id": 2,
-            "name": "Network & App",
-            "i18n": "npm.npm",
-            "type": 2,
-            "params": "",
-            "cby": 1,
-            "ctime": "2021-06-03 08:27:32",
-            "uby": 1,
-            "utime": "2021-06-03 08:28:10",
-            "remark": "",
-            "state": 1,
-            "buildIn": 1
+            id: 2,
+            name: 'Network & App',
+            i18n: 'npm.npm',
+            type: 2,
+            params: '',
+            cby: 1,
+            ctime: '2021-06-03 08:27:32',
+            uby: 1,
+            utime: '2021-06-03 08:28:10',
+            remark: '',
+            state: 1,
+            buildIn: 1
           }
         ]
       }

src/router/index.js

@@ -19,26 +19,10 @@ const routes = [
         path: '/panel/:typeName',
         component: () => import('@/views/charts2/Panel')
       },
-      {
-        path: '/user',
-        component: () => import('@/views/settings/User')
-      },
-      {
-        path: '/role',
-        component: () => import('@/views/settings/Roles')
-      },
-      {
-        path: '/i18n',
-        component: () => import('@/views/settings/I18n')
-      },
       {
         path: '/report/builtIn',
         component: () => import('@/views/report/reportTest')
       },
-      {
-        path: '/operationLog',
-        component: () => import('@/views/settings/OperationLog')
-      },
       {
         path: '/entityExplorer',
         component: () => import('@/views/entityExplorer/EntityExplorer')
@@ -47,21 +31,47 @@ const routes = [
         path: '/detection/:typeName',
         component: () => import('@/views/detections/Index')
       },
-      {
-        path: '/galaxyProxy',
-        component: () => import('@/views/settings/GalaxyProxy')
-      },
-      {
-        path: '/chart',
-        component: () => import('@/views/settings/Chart')
-      },
-      {
-        path: '/temp',
-        component: () => import('@/views/Temp')
-      },
       {
         path: '/businessLog/viewer',
         component: () => import('@/views/businessLog/Viewer')
+      },
+      {
+        name: 'Administration',
+        path: '/administration',
+        redirect: '/administration/user',
+        component: () => import('@/views/administration/Index'),
+        children: [
+          {
+            name: 'User',
+            path: '/administration/user',
+            component: () => import('@/views/administration/User')
+          },
+          {
+            name: 'Role',
+            path: '/administration/role',
+            component: () => import('@/views/administration/Roles')
+          },
+          {
+            name: 'I18n',
+            path: '/administration/i18n',
+            component: () => import('@/views/administration/I18n')
+          },
+          {
+            name: 'OperationLog',
+            path: '/administration/operationLog',
+            component: () => import('@/views/administration/OperationLog')
+          },
+          {
+            name: 'GalaxyProxy',
+            path: '/administration/galaxyProxy',
+            component: () => import('@/views/administration/GalaxyProxy')
+          },
+          {
+            name: 'Chart',
+            path: '/administration/chart',
+            component: () => import('@/views/administration/Chart')
+          }
+        ]
       }
     ]
   }

src/store/modules/panel.js

@@ -58,8 +58,8 @@ const panel = {
     httpCancel: null, // 终止http请求
     rangeEchartsData: {}, // 框选echarts图表
     routerHistoryList: [], // 路由跳转记录列表
-    dnsQtypeMapData:[],
-    dnsRcodeMapData:[]
+    dnsQtypeMapData: [],
+    dnsRcodeMapData: []
   },
   mutations: {
     setShowRightBox (state, flag) {

src/store/modules/user.js

@@ -64,9 +64,9 @@ const user = {
           if (tempArr[1]) {
             tempArr = tempArr[1].split('&')
             tempArr.forEach(t => {
-              let firstEqualIndex = t.indexOf('=')
-              let key = t.substring(0, firstEqualIndex)
-              let value = t.substring(firstEqualIndex + 1)
+              const firstEqualIndex = t.indexOf('=')
+              const key = t.substring(0, firstEqualIndex)
+              const value = t.substring(firstEqualIndex + 1)
               query[key] = value
             })
           }
@@ -97,9 +97,9 @@ const user = {
             version: defaultConfigs.version,
             config: defaultConfigs.config
           })
-          let userId = localStorage.getItem(storageKey.userId)
-          let oldVersion = await getConfigVersion(userId)
-          if(oldVersion !== defaultConfigs.version ){
+          const userId = localStorage.getItem(storageKey.userId)
+          const oldVersion = await getConfigVersion(userId)
+          if (oldVersion !== defaultConfigs.version) {
             db[dbDrilldownTableConfig].delete(userId)
           }
         }

src/utils/tools.js

@@ -6,6 +6,7 @@ import { getIso36112JsonData, getDictList } from '@/utils/api'
 import { format } from 'echarts'
 import router from '@/router'
 import { db } from '@/indexedDB'
+import { useRoute } from 'vue-router'
 
 export const tableSort = {
   // 是否需要排序
@@ -414,7 +415,6 @@ export function extensionEchartY (chart) {
   // 该div用来盛放文本显示内容的，方便对其悬浮位置进行处理
   const id = document.getElementById('extension')
   if (!id) {
-    const div = "<div id = 'extension' style=\"display:block\"></div>"
     const contentDiv = document.createElement('div')
     contentDiv.setAttribute('id', 'extension')
     contentDiv.setAttribute('style', 'display:block')
@@ -863,10 +863,10 @@ export async function getDnsMapData (type) {
       if (code.indexOf('-') > -1) {
         const range = mapData.code.split('-')
         if (range && range.length >= 2) {
-          const start = range[0].trim()
-          const eEnd = range[1].trim()
-          mapData.value = (start <= code && code <= eEnd) ? mapData.value : code
+          const start = Number(range[0].trim())
+          const eEnd = Number(range[1].trim())
           for (let i = start; i <= eEnd; i++) {
+            mapData.value = (start <= i && i <= eEnd) ? mapData.value : i
             codeValueMap.set(i, mapData.value)
           }
         }
@@ -877,10 +877,12 @@ export async function getDnsMapData (type) {
   }
   return codeValueMap
 }
-export function handleSpecialValue(value){
-  value = value.replaceAll("'", "\\\\'")
-               .replaceAll('"','\\"')
-               .replaceAll('&','%26')
+export function handleSpecialValue (value) {
+  if (value) {
+    value = value.replaceAll("'", "\\\\'")
+      .replaceAll('"', '\\"')
+      .replaceAll('&', '%26')
+  }
   return value
 }
 export function combineTabList (tableType, list, commonTabList) {
@@ -935,53 +937,92 @@ export async function getDefaultCurTab (tableType, metric, columnName) {
 export async function readDrilldownTableConfigByUser () {
   // 获取用户定制的自定义配置
   const userId = localStorage.getItem(storageKey.userId)
-  const userLocalCongfig = await db[dbDrilldownTableConfig].get({ id: userId })
+  const userLocalConfig = await db[dbDrilldownTableConfig].get({ id: userId })
   let defaultDrillDownTableConfigs = []
-  if (userLocalCongfig) {
-    defaultDrillDownTableConfigs = userLocalCongfig.config
+  if (userLocalConfig) {
+    defaultDrillDownTableConfigs = userLocalConfig.config
   }
   return defaultDrillDownTableConfigs
 }
 
 export async function getConfigVersion (id) {
-  let defaultCongfigInDb = await db[dbDrilldownTableConfig].get({ id: id })
-  let version
-  if(defaultCongfigInDb) {
-    version = defaultCongfigInDb ? defaultCongfigInDb.version : ''
-  }else {
-    defaultCongfigInDb = await db[dbDrilldownTableConfig].get({ id: 'default' })
+  let defaultConfigInDb = await db[dbDrilldownTableConfig].get({ id: id })
+  if (!defaultConfigInDb) {
+    defaultConfigInDb = await db[dbDrilldownTableConfig].get({ id: 'default' })
   }
-  return version
+  return defaultConfigInDb.version || ''
 }
 
-export async function combinDrilldownTableWithUserConfig () {
-  const defaultCongfigInDb = await db[dbDrilldownTableConfig].get({ id: 'default' })
-  const defaultConfigs = defaultCongfigInDb ? defaultCongfigInDb.config : []
-  const curUserConfig = await readDrilldownTableConfigByUser()
-  if (defaultConfigs && curUserConfig && curUserConfig.length > 0) {
-    defaultConfigs.forEach(defaultConfig => {
-      const currentTableConfig = curUserConfig.find(config => config.route === defaultConfig.route)
-      if (currentTableConfig) {
-        const tableConfig = defaultConfig.tables.find(table => table.id === defaultConfig.route)
-        const newTableConfig = currentTableConfig.tables.find(table => table.id === defaultConfig.route)
-        tableConfig.hiddenColumns = newTableConfig.hiddenColumns
-        tableConfig.tabs.forEach(tab => {
-          const newTab = newTableConfig.tabs.find(newTab => newTab.name === tab.name)
-          if (newTab) {
-            tab.hiddenDrilldownTabs = newTab.hiddenDrilldownTabs
-            tab.checked = newTab.checked
+export async function combineDrilldownTableWithUserConfig () {
+  const defaultConfigInDb = await db[dbDrilldownTableConfig].get({ id: 'default' })
+  const defaultConfigGroup = defaultConfigInDb ? defaultConfigInDb.config : []
+  const currentUserConfigGroup = await readDrilldownTableConfigByUser()
+  if (defaultConfigGroup && currentUserConfigGroup && currentUserConfigGroup.length > 0) {
+    defaultConfigGroup.forEach(defaultConfig => {
+      const currentUserConfig = currentUserConfigGroup.find(config => config.route === defaultConfig.route)
+      if (currentUserConfig) {
+        const defaultTableConfig = defaultConfig.tables.find(table => table.id === defaultConfig.route)
+        const currentUserTableConfig = currentUserConfig.tables.find(table => table.id === defaultConfig.route)
+        defaultTableConfig.hiddenColumns = currentUserTableConfig.hiddenColumns
+        const sortTabs = []
+        currentUserTableConfig.tabs.forEach(currentUserTab => {
+          const defaultTab = defaultTableConfig.tabs.find(tab => tab.name === currentUserTab.name)
+          if (defaultTab) {
+            defaultTab.hiddenDrilldownTabs = currentUserTab.hiddenDrilldownTabs
+            defaultTab.checked = currentUserTab.checked
+            if (defaultTab && defaultTab.hasMetricSearch === true) {
+              defaultTab.metrics.forEach(metric => {
+                if (currentUserTableConfig.columns) {
+                  const sortColumns = []
+                  sortColumns.push(metric.columns[0])
+                  currentUserTableConfig.columns.forEach((column, index) => {
+                    const sortColumn = metric.columns.find(metricColumn => {
+                      if (metricColumn.name) {
+                        return metricColumn.name === column
+                      } else {
+                        return metricColumn === column
+                      }
+                    })
+                    if (sortColumn) {
+                      sortColumns.push(sortColumn)
+                    }
+                  })
+                  metric.columns = sortColumns
+                }
+              })
+            } else {
+              if (currentUserTableConfig.columns) {
+                const sortColumns = []
+                sortColumns.push(defaultTab.columns[0])
+                currentUserTableConfig.columns.forEach((column, index) => {
+                  const sortColumn = defaultTab.columns.find(metricColumn => {
+                    if (metricColumn.name) {
+                      return metricColumn.name === column
+                    } else {
+                      return metricColumn === column
+                    }
+                  })
+                  if (sortColumn) {
+                    sortColumns.push(sortColumn)
+                  }
+                })
+                defaultTab.columns = sortColumns
+              }
+            }
+            sortTabs.push(defaultTab)
           }
         })
+        defaultTableConfig.tabs = sortTabs
       }
     })
   }
-  return defaultConfigs
+  return defaultConfigGroup
 }
 
 export async function getUserDrilldownTableConfig (tableType, curMetric) {
   let list = []
   // 获取用户定制的自定义配置，如果没有，则使用默认的自定义配置
-  const drillDownTableConfigs = await combinDrilldownTableWithUserConfig()
+  const drillDownTableConfigs = await combineDrilldownTableWithUserConfig()
   const currentTableConfig = drillDownTableConfigs.find(config => config.route === tableType)
   const commonTabList = currentTableConfig ? currentTableConfig.tabs : []
   const tables = currentTableConfig ? currentTableConfig.tables : []
@@ -1016,7 +1057,7 @@ export function urlParamsHandler (url, oldParams, newParams, cleanOldParams) {
 }
 
 export function overwriteUrl (url) {
-  window.history.replaceState('', '', url)
+  window.history.replaceState({}, '', url)
 }
 
 /*

src/views/Temp.vue

@@ -1,9 +0,0 @@
-<template>
-  <div>Temp</div>
-</template>
-
-<script>
-export default {
-  name: 'Temp'
-}
-</script>

src/views/administration/Chart.vue

@@ -0,0 +1,82 @@
+<template>
+  <div style="height: 100%;">
+    <cn-data-list
+      ref="dataList"
+      :tableId="tableId"
+      v-model:custom-table-title="tools.customTableTitle"
+      :api="url"
+      :from="fromRoute.chart"
+      :layout="['columnCustomize','elementSet','search']"
+      @search="search"
+    >
+      <template #top-tool-right>
+        <button
+          id="account-add"
+          class="top-tool-btn margin-r-10"
+          type="button"
+          @click="add"
+        >
+          <i class="cn-icon-add cn-icon"/>
+        </button>
+      </template>
+      <template #default>
+        <chart-table
+          ref="dataTable"
+          v-loading="tools.loading"
+          :api="url"
+          :custom-table-title="tools.customTableTitle"
+          :height="mainTableHeight"
+          :table-data="tableData"
+          @delete="del"
+          @edit="edit"
+          @orderBy="tableDataSort"
+          @reload="getTableData"
+          @selectionChange="selectionChange"
+        />
+      </template>
+      <template #pagination>
+        <pagination ref="pagination" :page-obj="pageObj" :table-id="tableId" @pageNo='pageNo' @pageSize='pageSize'></pagination>
+      </template>
+    </cn-data-list>
+    <el-drawer
+            v-model="rightBox.show"
+            direction="rtl"
+            :with-header="false"
+            destroy-on-close>
+      <chart-box
+              :object="object"
+              @close="closeRightBox"
+      />
+    </el-drawer>
+  </div>
+</template>
+<script>
+import cnDataList from '@/components/table/CnDataList'
+import dataListMixin from '@/mixins/data-list'
+import chartTable from '@/components/table/settings/ChartTable'
+import chartBox from '@/components/rightBox/settings/ChartBox'
+import { api } from '@/utils/api'
+
+export default {
+  name: 'Chart',
+  mixins: [dataListMixin],
+  components: {
+    cnDataList,
+    chartTable,
+    chartBox
+  },
+  data () {
+    return {
+      url: api.chart,
+      listUrl: api.chartList,
+      blankObject: { // 空白对象
+        id: '',
+        name: '',
+        params: '',
+        i18n: ''
+      },
+      tableId: 'chartTable'
+    }
+  }
+}
+</script>

src/views/administration/GalaxyProxy.vue

@@ -0,0 +1,144 @@
+<template>
+  <div style="height: 100%;">
+    <cn-data-list
+        ref="dataList"
+        :tableId="tableId"
+        v-model:custom-table-title="tools.customTableTitle"
+        :api="url"
+        :from="fromRoute.galaxyProxy"
+        :layout="['columnCustomize','elementSet','search']"
+        @search="search"
+    >
+      <template v-slot:top-tool-right>
+        <button id="galaxy-proxy-clear-cache" class="top-tool-btn margin-r-10" :title="$t('overall.clearCache')"
+                type="button" @click="clearCache">
+          <i class="cn-icon cn-icon-clear-cache"></i>
+        </button>
+        <button id="galaxy-proxy-add" class="top-tool-btn margin-r-10"
+                type="button" @click="add">
+          <i class="cn-icon-add cn-icon"></i>
+        </button>
+        <button id="galaxy-proxy-debug" class="top-tool-btn margin-r-10"  :title="$t('overall.debug')"
+                type="button" @click="debug(true,{})">
+          <i class="cn-icon-category cn-icon"></i>
+        </button>
+        <top-tool-more-options
+                ref="export"
+                id="model"
+                :params="searchLabel"
+                class="top-tool-export margin-l-10 margin-r-10"
+                export-file-name="galaxyProxy"
+                export-url="/galaxy/setting/export"
+                import-url="/galaxy/setting/import"
+                @afterImport="getTableData"
+        >
+          <template v-slot:before>
+          </template>
+        </top-tool-more-options>
+      </template>
+      <template v-slot:default>
+        <galaxy-proxy-table
+            ref="dataTable"
+            v-loading="tools.loading"
+            :api="url"
+            :custom-table-title="tools.customTableTitle"
+            :height="mainTableHeight"
+            :table-data="tableData"
+            @delete="del"
+            @edit="edit"
+            @orderBy="tableDataSort"
+            @reload="getTableData"
+            @selectionChange="selectionChange"
+            @copy="copy"
+            @debug="debugRow"
+        ></galaxy-proxy-table>
+      </template>
+      <!-- 分页组件 -->
+      <template #pagination>
+        <pagination ref="pagination" :page-obj="pageObj" :table-id="tableId" @pageNo='pageNo' @pageSize='pageSize'></pagination>
+      </template>
+    </cn-data-list>
+    <el-drawer
+        v-model="rightBox.show"
+        direction="rtl"
+        :with-header="false"
+        destroy-on-close>
+      <galaxy-proxy-box :object="object" @close="closeRightBox"></galaxy-proxy-box>
+    </el-drawer>
+  </div>
+  <galaxy-proxy-debug
+          v-model:show-debug="showDebug"
+          top="5vh"
+          :show-close="false"
+          :curGalaxyProxy="curGalaxyProxy"></galaxy-proxy-debug>
+</template>
+
+<script>
+import cnDataList from '@/components/table/CnDataList'
+import galaxyProxyBox from '@/components/rightBox/settings/GalaxyProxyBox'
+import galaxyProxyTable from '@/components/table/settings/GalaxyProxyTable'
+import dataListMixin from '@/mixins/data-list'
+import { api } from '@/utils/api'
+import { get, put } from '@/utils/http'
+import TopToolMoreOptions from '@/components/common/popBox/TopToolMoreOptions'
+import galaxyProxyDebug from '@/components/setting/GalaxyProxyDebug'
+
+export default {
+  name: 'GalaxyProxy',
+  components: {
+    cnDataList,
+    galaxyProxyBox,
+    galaxyProxyTable,
+    TopToolMoreOptions,
+    galaxyProxyDebug
+  },
+  mixins: [dataListMixin],
+  data () {
+    return {
+      url: api.galaxyProxy,
+      tableId: 'galaxySettingTable', // 需要分页的table的id，用于记录每页数量
+      blankObject: { // 空白对象
+        name: ''
+      },
+      showDebug: false,
+      curGalaxyProxy: {}
+    }
+  },
+  methods: {
+    edit (u) {
+      get(`${this.url}/${u.id}`).then(response => {
+        if (response.code === 200) {
+          const editObject = response.data
+          editObject.targetHeader || (editObject.targetHeader = '')
+          editObject.preHandle || (editObject.preHandle = '')
+          editObject.postHandle || (editObject.postHandle = '')
+          editObject.targetParam || (editObject.targetParam = '')
+          this.object = editObject
+          this.rightBox.show = true
+        }
+      })
+    },
+    debug (isTopDebug, u) {
+      if (!isTopDebug && u) {
+        this.curGalaxyProxy = JSON.parse(JSON.stringify(u))
+      }
+      this.showDebug = true
+    },
+    debugRow (u) {
+      this.debug(false, u)
+    },
+    clearCache () {
+      put(`${this.url}/clearCache`).then(response => {
+        if (response.code === 200) {
+          this.$message({ duration: 2000, type: 'success', message: this.$t('tip.success') })
+        } else {
+          this.$message.error(response.msg || response.message)
+        }
+      }).catch(() => {
+        this.$message.error(this.$t('tip.unknownError'))
+      })
+    }
+
+  }
+}
+</script>

src/views/administration/I18n.vue

@@ -0,0 +1,86 @@
+<template>
+  <div style="height: 100%;">
+    <cn-data-list
+        ref="dataList"
+        :tableId="tableId"
+        v-model:custom-table-title="tools.customTableTitle"
+        :api="url"
+        :from="fromRoute.user"
+        :layout="['columnCustomize','elementSet','search']"
+        @search="search"
+    >
+      <template #top-tool-right>
+        <button
+            id="account-add"
+            v-has="'user_add'"
+            class="top-tool-btn margin-r-10"
+            type="button"
+            @click="add"
+        >
+          <i class="cn-icon-add cn-icon"/>
+        </button>
+      </template>
+      <template #default>
+        <i18n-table
+            ref="dataTable"
+            v-loading="tools.loading"
+            :api="url"
+            :custom-table-title="tools.customTableTitle"
+            :height="mainTableHeight"
+            :table-data="tableData"
+            @delete="del"
+            @edit="edit"
+            @orderBy="tableDataSort"
+            @reload="getTableData"
+            @selectionChange="selectionChange"
+            @showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"
+        />
+      </template>
+      <template #pagination>
+        <pagination ref="pagination" :page-obj="pageObj" :table-id="tableId" @pageNo='pageNo' @pageSize='pageSize'></pagination>
+      </template>
+    </cn-data-list>
+    <el-drawer
+        v-model="rightBox.show"
+        direction="rtl"
+        :with-header="false"
+        destroy-on-close>
+      <i18n-box
+          :object="object"
+          @close="closeRightBox"
+      />
+    </el-drawer>
+  </div>
+</template>
+<script>
+import cnDataList from '@/components/table/CnDataList'
+import dataListMixin from '@/mixins/data-list'
+import i18nTable from '@/components/table/settings/I18nTable'
+import i18nBox from '@/components/rightBox/settings/I18nBox'
+import { api } from '@/utils/api'
+
+export default {
+  name: 'I18n',
+  mixins: [dataListMixin],
+  components: {
+    cnDataList,
+    i18nTable,
+    i18nBox
+  },
+  data () {
+    return {
+      url: api.i18nSys,
+      blankObject: { // 空白对象
+        id: '',
+        name: '',
+        code: '',
+        lang: '',
+        value: ''
+      },
+      tableId: 'i18nTable'
+    }
+  },
+  methods: {
+  }
+}
+</script>

src/views/administration/Index.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="administration entity-explorer entity-explorer--show-list">
+    <!-- 顶部工具栏，在列表页显示 -->
+    <div class="explorer-top-tools explorer-detection-top-tools">
+      <div class="explorer-top-tools-title">{{$t('overall.administration')}}</div>
+    </div>
+    <div style="width: 100%;padding-bottom: 26px;">
+      <chart-tabs :data="tabsData" router></chart-tabs>
+    </div>
+    <!-- 内容区 -->
+    <div class="explorer-container administration-container">
+      <router-view />
+    </div>
+  </div>
+</template>
+
+<script>
+import ChartTabs from '@/components/common/ChartTabs'
+export default {
+  name: 'index',
+  components: {
+    ChartTabs
+  },
+  data () {
+    return {
+      tabsData: [
+        {
+          i18n: 'overall.user',
+          path: '/administration/user',
+          icon: 'cn-icon cn-icon-user2'
+        },
+        {
+          i18n: 'overall.role',
+          path: '/administration/role',
+          icon: 'cn-icon cn-icon-role2'
+        },
+        {
+          i18n: 'overall.operationLog',
+          path: '/administration/operationLog',
+          icon: 'cn-icon cn-icon-operation-log'
+        },
+        {
+          i18n: 'I18n',
+          path: '/administration/i18n',
+          icon: 'cn-icon cn-icon-i18n'
+        },
+        {
+          i18n: 'galaxyProxy.galaxyProxy',
+          path: '/administration/galaxyProxy',
+          icon: 'cn-icon cn-icon-proxy'
+        },
+        {
+          i18n: 'overall.chart',
+          path: '/administration/chart',
+          icon: 'cn-icon cn-icon-chart'
+        }
+      ]
+    }
+  }
+}
+</script>

src/views/administration/OperationLog.vue

@@ -0,0 +1,54 @@
+<template>
+  <div style="height: 100%;">
+    <cn-data-list
+      ref="dataList"
+      :api="url"
+      :tableId="tableId"
+      :layout="['search', 'elementSet','search']"
+      v-model:custom-table-title="tools.customTableTitle"
+      :from="fromRoute.operationLog"
+      @search="search">
+      <template v-slot:default>
+        <operation-log-table
+          ref="dataTable"
+          v-loading="tools.loading"
+          :api="url"
+          :custom-table-title="tools.customTableTitle"
+          :height="mainTableHeight"
+          :table-data="tableData"
+          @del="del"
+          @edit="edit"
+          @orderBy="tableDataSort"
+          @reload="getTableData"
+          @selectionChange="selectionChange"
+          @showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"></operation-log-table>
+          @search="search"
+      </template>
+      <!-- 分页组件 -->
+      <template #pagination>
+        <pagination ref="pagination" :page-obj="pageObj" :table-id="tableId" @pageNo='pageNo' @pageSize='pageSize'></pagination>
+      </template>
+    </cn-data-list>
+  </div>
+</template>
+<script>
+import cnDataList from '@/components/table/CnDataList'
+import dataListMixin from '@/mixins/data-list'
+import operationLogTable from '@/components/table/settings/OperationLogTable'
+import { api } from '@/utils/api'
+
+export default {
+  name: 'operationLog',
+  components: {
+    cnDataList,
+    operationLogTable
+  },
+  mixins: [dataListMixin],
+  data () {
+    return {
+      url: api.operationLog,
+      tableId: 'operationLogTable' // 需要分页的table的id，用于记录每页数量
+    }
+  }
+}
+</script>

src/views/administration/Roles.vue

@@ -0,0 +1,91 @@
+<template>
+  <div style="height: 100%;">
+    <cn-data-list
+            ref="dataList"
+            :tableId="tableId"
+            v-model:custom-table-title="tools.customTableTitle"
+            :api="url"
+            :from="fromRoute.roles"
+            :layout="['columnCustomize','elementSet','search']"
+            @search="search"
+    >
+      <template v-slot:top-tool-right>
+        <button id="roles-add" :title="$t('overall.createRole')" class="top-tool-btn margin-r-10"
+                type="button" @click="add">
+          <i class="cn-icon-add cn-icon"></i>
+        </button>
+        <delete-button id="role-list-batch-delete" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button>
+      </template>
+      <template v-slot:default>
+        <roles-table
+          ref="dataTable"
+          v-loading="tools.loading"
+          :api="url"
+          :custom-table-title="tools.customTableTitle"
+          :height="mainTableHeight"
+          :table-data="tableData"
+          @delete="del"
+          @edit="edit"
+          @orderBy="tableDataSort"
+          @reload="getTableData"
+          @selectionChange="selectionChange"
+        ></roles-table>
+      </template>
+      <!-- 分页组件 -->
+      <template #pagination>
+        <pagination ref="pagination" :page-obj="pageObj" :table-id="tableId" @pageNo='pageNo' @pageSize='pageSize'></pagination>
+      </template>
+    </cn-data-list>
+    <el-drawer
+            v-model="rightBox.show"
+            direction="rtl"
+            :with-header="false"
+            destroy-on-close>
+      <role-box :object="object" @close="closeRightBox"></role-box>
+    </el-drawer>
+  </div>
+</template>
+<script>
+import cnDataList from '@/components/table/CnDataList'
+import dataListMixin from '@/mixins/data-list'
+import rolesTable from '@/components/table/settings/RoleTable'
+import roleBox from '@/components/rightBox/settings/RoleBox'
+import { api } from '@/utils/api'
+import { get } from '@/utils/http'
+
+export default {
+  name: 'roles',
+  components: {
+    cnDataList,
+    roleBox,
+    rolesTable
+  },
+  mixins: [dataListMixin],
+  data () {
+    return {
+      url: api.role,
+      tableId: 'rolesTable', // 需要分页的table的id，用于记录每页数量
+      blankObject: { // 空白对象
+        name: '',
+        buildIn: '',
+        i18n: '',
+        id: '',
+        menuIds: [],
+        remark: '',
+        uby: 0,
+        utime: ''
+      }
+    }
+  },
+  methods: {
+    edit (u) {
+      get(`${this.url}`, { ids: u.id }).then(response => {
+        if (response.code === 200) {
+          this.object = response.data.list[0]
+          this.rightBox.show = true
+        }
+      })
+    }
+  }
+}
+</script>

src/views/administration/User.vue

@@ -0,0 +1,86 @@
+<template>
+  <div style="height: 100%;">
+    <cn-data-list
+      ref="dataList"
+      :tableId="tableId"
+      v-model:custom-table-title="tools.customTableTitle"
+      :api="url"
+      :from="fromRoute.user"
+      :layout="['columnCustomize','elementSet','search']"
+      @search="search"
+    >
+      <template #top-tool-right>
+        <button
+          id="account-add"
+          class="top-tool-btn margin-r-10"
+          type="button"
+          @click="add"
+        >
+          <i class="cn-icon-add cn-icon"/>
+        </button>
+      </template>
+      <template #default>
+        <user-table
+          ref="dataTable"
+          v-loading="tools.loading"
+          :api="url"
+          :custom-table-title="tools.customTableTitle"
+          :height="mainTableHeight"
+          :table-data="tableData"
+          @delete="del"
+          @edit="edit"
+          @orderBy="tableDataSort"
+          @reload="getTableData"
+          @selectionChange="selectionChange"
+        />
+      </template>
+      <template #pagination>
+        <pagination ref="pagination" :page-obj="pageObj" :table-id="tableId" @pageNo='pageNo' @pageSize='pageSize'></pagination>
+      </template>
+    </cn-data-list>
+    <el-drawer
+            v-model="rightBox.show"
+            direction="rtl"
+            :with-header="false"
+            destroy-on-close>
+      <user-box
+              :object="object"
+              @close="closeRightBox"
+      />
+    </el-drawer>
+  </div>
+</template>
+<script>
+import cnDataList from '@/components/table/CnDataList'
+import dataListMixin from '@/mixins/data-list'
+import userTable from '@/components/table/settings/UserTable'
+import userBox from '@/components/rightBox/settings/UserBox'
+import { api } from '@/utils/api'
+
+export default {
+  name: 'User',
+  mixins: [dataListMixin],
+  components: {
+    cnDataList,
+    userTable,
+    userBox
+  },
+  data () {
+    return {
+      url: api.user,
+      blankObject: { // 空白对象
+        id: '',
+        name: '',
+        username: '',
+        email: '',
+        pin: '',
+        mobile: '',
+        status: 1,
+        roleIds: '',
+        pinChange: ''
+      },
+      tableId: 'userTable'
+    }
+  }
+}
+</script>

src/views/charts/ChartHeader.vue

@@ -81,7 +81,7 @@
             @change="tableLimitChange"
           >
             <template
-              v-for="(item, index) in table.tableColumns.order"
+              v-for="item in table.tableColumns.order"
               :key="item.prop"
             >
               <el-option
@@ -123,7 +123,7 @@
         <div class="header__operation header__operation--table">
           <el-select
             size="mini"
-            v-model="orderPieTable"
+            v-model="copyOrderPieTable"
             class="option__select select-column"
             placeholder=""
             popper-class="option-popper"
@@ -247,9 +247,8 @@ import {
   chartActiveIpTableOrderOptions,
   chartPieTableTopOptions,
   eventSeverity,
-  chartTableColumnMapping, panelTypeAndRouteMapping
+  chartTableColumnMapping
 } from '@/utils/constants'
-import { useRouter } from 'vue-router'
 
 export default {
   name: 'ChartHeader',
@@ -342,7 +341,7 @@ export default {
       this.$emit('tableChange')
     },
     orderPieTableChange () {
-      this.$emit('orderPieTableChange', this.orderPieTable)
+      this.$emit('orderPieTableChange', this.copyOrderPieTable)
     },
     tabHandleClick (item) {
       this.isFocus = item
@@ -370,21 +369,19 @@ export default {
     }
   },
   setup (props) {
-    const { currentRoute } = useRouter()
-
-    function isEntityDetail (r) {
-      return r.indexOf('entityDetail') > -1
-    }
-    const dateRangeValue = isEntityDetail(currentRoute.value.path) ? 60 * 24 : 60
+    const dateRangeValue = 60
     const { startTime, endTime } = getNowTime(dateRangeValue)
     // entity详情内的chart时间工具不是公共的，需要单独定义
     const chartTimeFilter = ref({ startTime, endTime, dateRangeValue })
+    // 复制一份prop中需要被组件v-model的内容，避免报错
+    const copyOrderPieTable = ref(props.orderPieTable)
     return {
       chartTimeFilter,
       chartTableTopOptions,
       chartActiveIpTableOrderOptions,
       chartPieTableTopOptions,
       eventSeverity,
+      copyOrderPieTable,
       isTitle: isTitle(props.chartInfo.type),
       isBlock: isBlock(props.chartInfo.type),
       isTabs: isTabs(props.chartInfo.type),

src/views/charts/Panel.vue

@@ -107,11 +107,8 @@ export default {
     const { params } = useRoute()
     panelType = props.entity ? props.entity.type : panelTypeAndRouteMapping[params.typeName]
 
-    function isEntityDetail (t) {
-      return [4, 5, 6].indexOf(t) > -1
-    }
     // date
-    const dateRangeValue = isEntityDetail(panelType) ? 60 * 24 : 60
+    const dateRangeValue = 60
     const { startTime, endTime } = getNowTime(dateRangeValue)
     const timeFilter = ref({ startTime, endTime, dateRangeValue })
 

src/views/charts/charts/ChartDomainRecursiveResolve.vue

@@ -42,6 +42,7 @@
 </template>
 
 <script>
+import _ from 'lodash'
 export default {
   name: 'ChartDomainRecursiveResolve',
   props: {

src/views/charts/charts/ChartEchartWithTable.vue

@@ -47,7 +47,7 @@ export default {
   },
   methods: {
     handleQueryParams (queryParams) {
-      return this.timeFilter = {
+      this.timeFilter = {
         startTime: Number(queryParams.startTime) * 1000,
         endTime: Number(queryParams.endTime) * 1000
       }

src/views/charts/charts/ChartOneSituationStatistics.vue

@@ -17,7 +17,6 @@
 </template>
 
 <script>
-import _ from 'lodash'
 export default {
   name: 'ChartOneSituationStatistics',
   props: {

src/views/charts/charts/ChartRelationShip.vue

@@ -100,7 +100,7 @@
         <div class="ship-body-list-title">{{$t('relationShip.alert')}}</div>
         <div class="ship-body-list-value security">
           <template v-if="shipSeverity.length > 0">
-            <span v-for="ship in shipSeverity" class="ship-severity">
+            <span v-for="ship in shipSeverity" class="ship-severity" :key="ship">
               <span class="ship-body-list-security-alert" :class="iconClass(ship)">{{ ship.eventSeverity }}</span>
               <span class="ship-body-list-security-length">{{ ship.totalNumberOfEvents }}</span>
             </span>

src/views/charts/charts/chart-options.js

@@ -38,10 +38,8 @@ export const entityListLineOption = {
       type: 'line',
       legendHoverLink: false,
       itemStyle: {
-        normal: {
-          lineStyle: {
-            width: 2
-          }
+        lineStyle: {
+          width: 2
         }
       },
       data: [],

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

@@ -108,10 +108,8 @@ export default {
                     type: 'line',
                     legendHoverLink: false,
                     itemStyle: {
-                      normal: {
-                        lineStyle: {
-                          width: 1
-                        }
+                      lineStyle: {
+                        width: 1
                       }
                     },
                     color: '#69b072',
@@ -130,10 +128,8 @@ export default {
                     type: 'line',
                     legendHoverLink: false,
                     itemStyle: {
-                      normal: {
-                        lineStyle: {
-                          width: 1
-                        }
+                      lineStyle: {
+                        width: 1
                       }
                     },
                     color: '#7899c6',

src/views/charts/charts/options/line.js

@@ -219,11 +219,9 @@ export const singleValueLine = {
       type: 'line',
       legendHoverLink: false,
       itemStyle: {
-        normal: {
-          color: '#81C9FF',
-          lineStyle: {
-            width: 2
-          }
+        color: '#81C9FF',
+        lineStyle: {
+          width: 2
         }
       },
       data: [],
@@ -272,10 +270,8 @@ export const entityListLine = {
       type: 'line',
       legendHoverLink: false,
       itemStyle: {
-        normal: {
-          lineStyle: {
-            width: 2
-          }
+        lineStyle: {
+          width: 2
         }
       },
       data: [],

src/views/charts2/ChartList.vue

@@ -88,7 +88,7 @@ export default {
           layout = [...n]
         }
 
-        /*const overviewAppChart = layout.find(c => c.type === typeMapping.networkOverview.appList)
+        /* const overviewAppChart = layout.find(c => c.type === typeMapping.networkOverview.appList)
         let actuallyLength = 0
         if (overviewAppChart) {
           const params = overviewAppChart.params.app ? overviewAppChart.params : { app: [] }
@@ -98,7 +98,7 @@ export default {
             actuallyLength = params.app.find(p => p.user === 'default').list.length + 1
           }
           overviewAppChart.h = actuallyLength % 3 > 0 ? (Math.floor(actuallyLength / 3) + 1) * 2 + 2 : Math.floor(actuallyLength / 3) * 2 + 2
-        }*/
+        } */
         this.layout = layout
         const overviewAppChart = layout.find(c => c.type === typeMapping.networkOverview.appList)
         if (overviewAppChart) {

src/views/charts2/Panel.vue

@@ -238,20 +238,16 @@ export default {
     } else {
       panelType = props.entity ? props.entity.type : panelTypeAndRouteMapping[params.typeName]
     }
-
-    function isEntityDetail (t) {
-      return [4, 5, 6].indexOf(t) > -1
-    }
     // 获取url携带的range、startTime、endTime
     const rangeParam = query.range
     const startTimeParam = query.startTime
     const endTimeParam = query.endTime
     // 若url携带了，使用携带的值，否则使用默认值。
 
-    const dateRangeValue = rangeParam ? parseInt(query.range) : (isEntityDetail(panelType) ? 60 * 24 : 60)
+    const dateRangeValue = rangeParam ? parseInt(query.range) : 60
     const timeFilter = ref({ dateRangeValue })
     if (!startTimeParam || !endTimeParam) {
-      const { startTime, endTime } = getNowTime(isEntityDetail(panelType) ? 60 * 24 : 60)
+      const { startTime, endTime } = getNowTime(60)
       timeFilter.value.startTime = startTime
       timeFilter.value.endTime = endTime
     } else {
@@ -330,9 +326,11 @@ export default {
     },
     timeRefreshChange () {
       // 不是自选时间
-      if (!this.$refs.dateTimeRange.isCustom) {
-        const value = this.timeFilter.dateRangeValue
-        this.$refs.dateTimeRange.quickChange(value)
+      if (this.$refs.dateTimeRange) {
+        if (!this.$refs.dateTimeRange.isCustom) {
+          const value = this.timeFilter.dateRangeValue
+          this.$refs.dateTimeRange.quickChange(value)
+        }
       } else {
         this.timeFilter = JSON.parse(JSON.stringify(this.timeFilter))
       }

src/views/charts2/chart-mixin.js

@@ -8,6 +8,7 @@ export default {
       isNoData: false
     }
   },
+  emits: ['toggleLoading'],
   methods: {
     toggleLoading (loading) {
       this.$emit('toggleLoading', loading)

src/views/charts2/charts/appsTestData.js

@@ -1,12 +1,12 @@
 export const appTestData = [
   {
-    "type": "bytes",
-    "l11": {
-      "analysis": {
-        "rate": 2,
-        "total":2245435
+    type: 'bytes',
+    l11: {
+      analysis: {
+        rate: 2,
+        total: 2245435
       },
-      "values": [
+      values: [
         [
           1435781430781,
           3
@@ -17,12 +17,12 @@ export const appTestData = [
         ]
       ]
     },
-    "a0": {
-      "analysis": {
-        "rate": 2,
-        "total":3245435
+    a0: {
+      analysis: {
+        rate: 2,
+        total: 3245435
       },
-      "values": [
+      values: [
         [
           1435781430781,
           1
@@ -35,13 +35,13 @@ export const appTestData = [
     }
   },
   {
-    "type": "packets",
-    "l11": {
-      "analysis": {
-        "rate": 3,
-        "total":4245435
+    type: 'packets',
+    l11: {
+      analysis: {
+        rate: 3,
+        total: 4245435
       },
-      "values": [
+      values: [
         [
           1435781430781,
           4
@@ -52,12 +52,12 @@ export const appTestData = [
         ]
       ]
     },
-    "a0": {
-      "analysis": {
-        "rate": 3,
-        "total":2245435
+    a0: {
+      analysis: {
+        rate: 3,
+        total: 2245435
       },
-      "values": [
+      values: [
         [
           1435781430781,
           2
@@ -70,13 +70,13 @@ export const appTestData = [
     }
   },
   {
-    "type": "sessions",
-    "l11": {
-      "analysis": {
-        "rate": 2,
-        "total": 2245435
+    type: 'sessions',
+    l11: {
+      analysis: {
+        rate: 2,
+        total: 2245435
       },
-      "values": [
+      values: [
         [
           1435781430781,
           3
@@ -87,12 +87,12 @@ export const appTestData = [
         ]
       ]
     },
-    "a0": {
-      "analysis": {
-        "rate": 3,
-        "total": 3245435
+    a0: {
+      analysis: {
+        rate: 3,
+        total: 3245435
       },
-      "values": [
+      values: [
         [
           1435781430781,
           1
@@ -107,64 +107,64 @@ export const appTestData = [
 ]
 export const appPrevTestData = [
   {
-    "type": "bytes",
-    "l11": {
-      "rate": 2,
-      "total":3245435
+    type: 'bytes',
+    l11: {
+      rate: 2,
+      total: 3245435
     },
-    "a0": {
-      "rate": 3,
-      "total":4245435
+    a0: {
+      rate: 3,
+      total: 4245435
     }
   },
   {
-    "type": "packets",
-    "l11": {
-      "rate": 2,
-      "total":3245435
+    type: 'packets',
+    l11: {
+      rate: 2,
+      total: 3245435
     },
-    "a0": {
-      "rate": 4,
-      "total":4245435
+    a0: {
+      rate: 4,
+      total: 4245435
     }
   },
   {
-    "type": "sessions",
-    "l11": {
-      "rate": 3,
-      "total":233451
+    type: 'sessions',
+    l11: {
+      rate: 3,
+      total: 233451
     },
-    "a0": {
-      "rate": 3,
-      "total":4245435
+    a0: {
+      rate: 3,
+      total: 4245435
     }
   }
 ]
 export const providerTestData = [
   {
-    "type": "bytes",
-    "d3": {
-      "analysis": {
-        "rate": 4,
-        "total":4245435
+    type: 'bytes',
+    d3: {
+      analysis: {
+        rate: 4,
+        total: 4245435
       },
-      "values": [
+      values: [
         [
           1435781430781,
-          "1"
+          '1'
         ],
         [
           1435781431781,
-          "1"
+          '1'
         ]
       ]
     },
-    "a0": {
-      "analysis": {
-        "rate": 2,
-        "total":3245435
+    a0: {
+      analysis: {
+        rate: 2,
+        total: 3245435
       },
-      "values": [
+      values: [
         [
           1435781430781,
           1
@@ -177,13 +177,13 @@ export const providerTestData = [
     }
   },
   {
-    "type": "packets",
-    "d3": {
-      "analysis": {
-        "rate": 3,
-        "total": 1245435
+    type: 'packets',
+    d3: {
+      analysis: {
+        rate: 3,
+        total: 1245435
       },
-      "values": [
+      values: [
         [
           1435781430781,
           2
@@ -194,12 +194,12 @@ export const providerTestData = [
         ]
       ]
     },
-    "a0": {
-      "analysis": {
-        "rate": 3,
-        "total": 3245435
+    a0: {
+      analysis: {
+        rate: 3,
+        total: 3245435
       },
-      "values": [
+      values: [
         [
           1435781430781,
           5
@@ -212,29 +212,29 @@ export const providerTestData = [
     }
   },
   {
-    "type": "sessions",
-    "d3": {
-      "analysis": {
-        "rate": 2,
-        "total":2245435
+    type: 'sessions',
+    d3: {
+      analysis: {
+        rate: 2,
+        total: 2245435
       },
-      "values": [
+      values: [
         [
           1435781430781,
-          "1"
+          '1'
         ],
         [
           1435781431781,
-          "1"
+          '1'
         ]
       ]
     },
-    "a0": {
-      "analysis": {
-        "rate": 3,
-        "total": 3245435
+    a0: {
+      analysis: {
+        rate: 3,
+        total: 3245435
       },
-      "values": [
+      values: [
         [
           1435781430781,
           1
@@ -249,36 +249,36 @@ export const providerTestData = [
 ]
 export const providerPrevTestData = [
   {
-    "type": "bytes",
-    "d3": {
-      "rate": 2,
-      "total":2245435
+    type: 'bytes',
+    d3: {
+      rate: 2,
+      total: 2245435
     },
-    "a0": {
-      "rate": 3,
-      "total":4245435
+    a0: {
+      rate: 3,
+      total: 4245435
     }
   },
   {
-    "type": "packets",
-    "d3": {
-      "rate": 2,
-      "total":3245435
+    type: 'packets',
+    d3: {
+      rate: 2,
+      total: 3245435
     },
-    "a0": {
-      "rate": 4,
-      "total":4245435
+    a0: {
+      rate: 4,
+      total: 4245435
     }
   },
   {
-    "type": "sessions",
-    "d3": {
-      "rate": 3,
-      "total":233451
+    type: 'sessions',
+    d3: {
+      rate: 3,
+      total: 233451
     },
-    "a0": {
-      "rate": 3,
-      "total":4245435
+    a0: {
+      rate: 3,
+      total: 4245435
     }
   }
 ]

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

@@ -60,7 +60,7 @@
 
 <script>
 import { api } from '@/utils/api'
-import { dateFormatByAppearance, getSecond } from '@/utils/date-util'
+import { getSecond } from '@/utils/date-util'
 import { get } from '@/utils/http'
 import chartMixin from '@/views/charts2/chart-mixin'
 

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

@@ -44,8 +44,8 @@
       </div>
     </div>
     <el-table
-        :id="`tabTable_${index}`"
-        :ref="`dataTable_${index}`"
+        id="tabTable"
+        ref="dataTable"
         :data="tableData"
         class="npm-app-event-table dns-recent-event-table"
         height="100%"

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

@@ -242,14 +242,10 @@ export default {
                 mpackets[0].invertTab = false
                 this.lineTab = 'total'
                 this.legendSelectChange(mpackets[0], 0)
-                this.$nextTick(() => {
-                  this.echartsInit(this.mpackets)
-                })
+                this.echartsInit(this.mpackets)
               } else {
-                this.$nextTick(() => {
-                  this.echartsInit(this.mpackets, show)
-                  if (!this.lineRefer) this.lineRefer = 'Average'
-                })
+                this.echartsInit(this.mpackets, show)
+                if (!this.lineRefer) this.lineRefer = 'Average'
               }
             } else if (t.type === 'queries' && val === 'Queries/s') {
               const mpackets = _.cloneDeep(this.mpackets)
@@ -265,9 +261,7 @@ export default {
                 this.legendSelectChange(e, 0)
               })
               this.mpackets = mpackets
-              this.$nextTick(() => {
-                this.echartsInit(this.mpackets, true)
-              })
+              this.echartsInit(this.mpackets, true)
             }
           })
         } else {
@@ -285,112 +279,116 @@ export default {
       })
     },
     echartsInit (echartsData, show) {
-      if (this.lineTab) {
-        this.handleActiveBar()
-        echartsData = echartsData.filter(t => t.show === true && t.invertTab === false)
-      } else {
-        echartsData = echartsData.filter(t => t.show === true)
-      }
-      const _this = this
-      const dom = document.getElementById('dnsLineChart')
-      !this.myChart && (this.myChart = echarts.init(dom))
-      this.chartOption = stackedLineChartOption
-      const chartOption = this.chartOption.series[0]
-      this.chartOption.series = echartsData.map((t, i) => {
-        return {
-          ...chartOption,
-          name: t.name,
-          lineStyle: {
-            color: chartColor3[t.positioning],
-            width: 1
-          },
-          stack: t.name !== 'network.total' ? 'network.total' : '',
-          symbolSize: function (value) {
-            return _this.symbolSizeSortChange(i, value[0])
-          },
-          itemStyle: {
-            emphasis: {
-              borderColor: chartColor4[t.positioning],
-              borderWidth: 2,
-              shadowColor: chartColor4[t.positioning],
-              shadowBlur: this.sizes[t.positioning] + 2
-            }
-          },
-          areaStyle: {
-            opacity: 0.1,
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              {
-                offset: 0,
-                color: chartColor3[t.positioning]
-              },
-              {
-                offset: 1,
-                color: chartColor3[t.positioning]
-              }
-            ])
-          },
-          data: t.data.map(v => [Number(v[0]) * 1000, Number(v[1]), 'number']),
-          markLine: {
-            silent: true,
-            lineStyle: {
-              color: '#B4B1A8'
-            },
-            symbol: 'none',
-            label: {
-              formatter (params) {
-                const arr = unitConvert(params.value, unitTypes.number).join('')
-                return _this.lineRefer + '(' + arr + echartsData[0].unitType + ')'
-              },
-              position: 'insideStartTop',
-              color: '#717171',
-              fontFamily: 'NotoSansSChineseRegular'
-            }
-          }
+      this.$nextTick(() => {
+        if (this.lineTab) {
+          this.handleActiveBar()
+          echartsData = echartsData.filter(t => t.show === true && t.invertTab === false)
+        } else {
+          echartsData = echartsData.filter(t => t.show === true)
         }
-      })
-      if (!show) {
-        this.chartOption.series.forEach((t) => {
-          t.markLine.label.show = false
-          t.markLine = []
-        })
-      }
-      if (this.lineRefer === 'Average' && show) {
-        this.chartOption.series.forEach((t, i) => {
-          t.markLine.label.show = true
-          t.markLine.data = [
-            {
-              yAxis: echartsData[i].analysis.avg
-            }
-          ]
-        })
-      } else if (this.lineRefer === '95th Percentile' && show) {
-        this.chartOption.series.forEach((t, i) => {
-          t.markLine.label.show = true
-          t.markLine.data = [
-            { yAxis: echartsData[i].analysis.p95 }
-          ]
-        })
-      } else if (this.lineRefer === 'Maximum' && show) {
-        this.chartOption.series.forEach((t, i) => {
-          t.markLine.label.show = true
-          t.markLine.data = [
-            { yAxis: echartsData[i].analysis.max }
-          ]
-        })
-      }
-      this.chartOption.tooltip.formatter = (params) => {
-        params.forEach(t => {
-          t.seriesName = this.$t(t.seriesName)
-          this.mpackets.forEach(e => {
-            if (this.$t(e.name) === t.seriesName) {
-              t.borderColor = chartColor3[e.positioning]
+        const _this = this
+        if (echartsData.length > 0) {
+          const dom = document.getElementById('dnsLineChart')
+          !this.myChart && (this.myChart = echarts.init(dom))
+          this.chartOption = stackedLineChartOption
+          const chartOption = this.chartOption.series[0]
+          this.chartOption.series = echartsData.map((t, i) => {
+            return {
+              ...chartOption,
+              name: t.name,
+              lineStyle: {
+                color: chartColor3[t.positioning],
+                width: 1
+              },
+              stack: t.name !== 'network.total' ? 'network.total' : '',
+              symbolSize: function (value) {
+                return _this.symbolSizeSortChange(i, value[0])
+              },
+              emphasis: {
+                itemStyle: {
+                  borderColor: chartColor4[t.positioning],
+                  borderWidth: 2,
+                  shadowColor: chartColor4[t.positioning],
+                  shadowBlur: this.sizes[t.positioning] + 2
+                }
+              },
+              areaStyle: {
+                opacity: 0.1,
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: chartColor3[t.positioning]
+                  },
+                  {
+                    offset: 1,
+                    color: chartColor3[t.positioning]
+                  }
+                ])
+              },
+              data: t.data.map(v => [Number(v[0]) * 1000, Number(v[1]), 'number']),
+              markLine: {
+                silent: true,
+                lineStyle: {
+                  color: '#B4B1A8'
+                },
+                symbol: 'none',
+                label: {
+                  formatter (params) {
+                    const arr = unitConvert(params.value, unitTypes.number).join('')
+                    return _this.lineRefer + '(' + arr + echartsData[0].unitType + ')'
+                  },
+                  position: 'insideStartTop',
+                  color: '#717171',
+                  fontFamily: 'NotoSansSChineseRegular'
+                }
+              }
             }
           })
-        })
-        return stackedLineTooltipFormatter(params)
-      }
-      this.showMarkLine = true
-      this.myChart.setOption(this.chartOption)
+          if (!show) {
+            this.chartOption.series.forEach((t) => {
+              t.markLine.label.show = false
+              t.markLine = []
+            })
+          }
+          if (this.lineRefer === 'Average' && show) {
+            this.chartOption.series.forEach((t, i) => {
+              t.markLine.label.show = true
+              t.markLine.data = [
+                {
+                  yAxis: echartsData[i].analysis.avg
+                }
+              ]
+            })
+          } else if (this.lineRefer === '95th Percentile' && show) {
+            this.chartOption.series.forEach((t, i) => {
+              t.markLine.label.show = true
+              t.markLine.data = [
+                { yAxis: echartsData[i].analysis.p95 }
+              ]
+            })
+          } else if (this.lineRefer === 'Maximum' && show) {
+            this.chartOption.series.forEach((t, i) => {
+              t.markLine.label.show = true
+              t.markLine.data = [
+                { yAxis: echartsData[i].analysis.max }
+              ]
+            })
+          }
+          this.chartOption.tooltip.formatter = (params) => {
+            params.forEach(t => {
+              t.seriesName = this.$t(t.seriesName)
+              this.mpackets.forEach(e => {
+                if (this.$t(e.name) === t.seriesName) {
+                  t.borderColor = chartColor3[e.positioning]
+                }
+              })
+            })
+            return stackedLineTooltipFormatter(params)
+          }
+          this.showMarkLine = true
+          this.myChart.setOption(this.chartOption)
+        }
+      })
     },
     activeChange (item, index) {
       if (this.isNoData) return
@@ -474,7 +472,33 @@ export default {
     },
     referenceSelectChange (val) {
       this.lineRefer = val
-      this.echartsInit(this.mpackets, this.showMarkLine)
+      let echartsData
+      const chartOption = this.myChart.getOption()
+      if (this.lineTab) {
+        echartsData = this.mpackets.filter(t => t.show === true && t.invertTab === false)
+      } else {
+        echartsData = this.mpackets.filter(t => t.show === true)
+      }
+      if (this.lineRefer === 'Average' && this.showMarkLine) {
+        chartOption.series.forEach((t, i) => {
+          if (t.name === echartsData[0].name) {
+            t.markLine.data = [{ yAxis: echartsData[0].analysis.avg }]
+          }
+        })
+      } else if (this.lineRefer === '95th Percentile' && this.showMarkLine) {
+        chartOption.series.forEach((t, i) => {
+          if (t.name === echartsData[0].name) {
+            t.markLine.data = [{ yAxis: echartsData[0].analysis.p95 }]
+          }
+        })
+      } else if (this.lineRefer === 'Maximum' && this.showMarkLine) {
+        chartOption.series.forEach((t, i) => {
+          if (t.name === echartsData[0].name) {
+            t.markLine.data = [{ yAxis: echartsData[0].analysis.max }]
+          }
+        })
+      }
+      this.myChart.setOption(chartOption)
     },
     symbolSizeSortChange (index, time) {
       const dataIntegrationArray = []
@@ -518,6 +542,9 @@ export default {
   beforeUnmount () {
     clearTimeout(this.timer)
     window.removeEventListener('resize', this.resize)
+    this.myChart = null
+    this.chartOption = null
+    this.unitConvert = null
   }
 }
 </script>

src/views/charts2/charts/linkMonitor/LinkDirectionGrid.vue

@@ -222,18 +222,16 @@ export default {
         } else {
           this.isNextNoData = false
           this.isNextShowError = true
-          // todo 此时返回的是msg，后期记得改为message
-          this.nextErrorMsg = res[1].msg
+          this.nextErrorMsg = res[1].message
         }
       }).catch(e => {
         console.error(e)
 
         this.isLinkShowError = true
-        // todo 此时返回的是msg，后期记得改为message
-        this.linkErrorMsg = e[0].msg
+        this.linkErrorMsg = e[0].message
 
         this.isNextShowError = true
-        this.nextErrorMsg = e[1].msg
+        this.nextErrorMsg = e[1].message
       }).finally(() => {
         this.toggleLoading(false)
       })

src/views/charts2/charts/linkMonitor/LinkTrafficLine.vue

@@ -277,9 +277,7 @@ export default {
           })
         } else {
           this.showError = true
-          // todo 此时返回的是msg，后期记得改
-          this.errorMsg = res.msg
-          // this.errorMsg = res.message
+          this.errorMsg = res.message
         }
       }).catch(e => {
         console.error(e)
@@ -314,8 +312,8 @@ export default {
           symbolSize: function (value) {
             return _this.symbolSizeSortChange(i, value[0])
           },
-          itemStyle: {
-            emphasis: {
+          emphasis: {
+            itemStyle: {
               borderColor: chartColor4[t.positioning],
               borderWidth: 2,
               shadowColor: chartColor4[t.positioning],
@@ -475,6 +473,9 @@ export default {
   beforeUnmount () {
     clearTimeout(this.timer)
     window.removeEventListener('resize', this.resize)
+    this.myChart = null
+    this.chartOption = null
+    this.unitConvert = null
   }
 }
 </script>

src/views/charts2/charts/linkMonitor/LinkTrafficSankey.vue

@@ -51,7 +51,7 @@ export default {
   },
   setup () {
     const { query } = useRoute()
-    const tab = ref(query.tabIndex || 0)
+    const tab = ref(query.tabIndex || '0')
     const queryCondition = ref(query.queryCondition || '')
     return {
       tab,
@@ -151,8 +151,8 @@ export default {
               t.linkDirection = e.nextHop
               t.bandwidth = e.bandwidth
               t.value = parseInt(t.ingressBitsRate)
-              t.client = `c_${t.clientProvince}`
-              t.server = `s_${t.serverProvince}`
+              t.external = `e_${t.externalLocation}`
+              t.internal = `i_${t.internalLocation}`
             }
           })
         })
@@ -164,13 +164,13 @@ export default {
               t.bandwidth = e.bandwidth
               t.linkDirection = e.nextHop
               t.value = parseInt(t.egressBitsRate)
-              t.client = `c_${t.clientProvince}`
-              t.server = `s_${t.serverProvince}`
+              t.external = `e_${t.externalLocation}`
+              t.internal = `i_${t.internalLocation}`
             }
           })
         })
       }
-      result = result.filter(r => r.clientProvince && r.serverProvince)
+      result = result.filter(r => r.externalLocation && r.internalLocation)
 
       const data = []
       const links = []
@@ -186,20 +186,20 @@ export default {
       if (tab === 1) {
         result.forEach(r => {
           // 第一列
-          if (!data0.some(d => d.name === r.client)) {
-            data0.push({ name: r.client, originalName: r.clientProvince, depth: 0 })
+          if (!data0.some(d => d.name === r.internal)) {
+            data0.push({ name: r.internal, originalName: r.internalLocation, depth: 0 })
           }
-          const existLink0 = links0.find(l => l.source === r.client && l.target === r.linkId)
+          const existLink0 = links0.find(l => l.source === r.internal && l.target === r.linkId)
           if (existLink0) {
             existLink0.value += r.value
           } else {
-            links0.push({ source: r.client, target: r.linkId, tooltip0: r.clientProvince, tooltip1: r.linkId, value: r.value, depth: 0, bandwidth: r.bandwidth })
+            links0.push({ source: r.internal, target: r.linkId, tooltip0: r.internalLocation, tooltip1: r.linkId, value: r.value, depth: 0, bandwidth: r.bandwidth })
           }
-          const existLinkAnalyze0 = linksAnalyze0.find(l => l.name === r.client)
+          const existLinkAnalyze0 = linksAnalyze0.find(l => l.name === r.internal)
           if (existLinkAnalyze0) {
             existLinkAnalyze0.value += r.value
           } else {
-            linksAnalyze0.push({ name: r.client, value: r.value })
+            linksAnalyze0.push({ name: r.internal, value: r.value })
           }
           // 第二列
           if (!data1.some(d => d.name === r.linkId)) {
@@ -215,40 +215,40 @@ export default {
           if (!data2.some(d => d.name === r.linkDirection)) {
             data2.push({ name: r.linkDirection, depth: 2 })
           }
-          const existLink2 = links2.find(l => l.source === r.linkDirection && l.target === r.server)
+          const existLink2 = links2.find(l => l.source === r.linkDirection && l.target === r.external)
           if (existLink2) {
             existLink2.value += r.value
           } else {
-            links2.push({ source: r.linkDirection, target: r.server, tooltip0: r.linkDirection, tooltip1: r.serverProvince, value: r.value, depth: 2 })
+            links2.push({ source: r.linkDirection, target: r.external, tooltip0: r.linkDirection, tooltip1: r.externalLocation, value: r.value, depth: 2 })
           }
-          const existLinkAnalyze2 = linksAnalyze2.find(l => l.name === r.server)
+          const existLinkAnalyze2 = linksAnalyze2.find(l => l.name === r.external)
           if (existLinkAnalyze2) {
             existLinkAnalyze2.value += r.value
           } else {
-            linksAnalyze2.push({ name: r.server, value: r.value })
+            linksAnalyze2.push({ name: r.external, value: r.value })
           }
           // 第四列
-          if (!data3.some(d => d.name === r.server)) {
-            data3.push({ name: r.server, originalName: r.serverProvince, depth: 3 })
+          if (!data3.some(d => d.name === r.external)) {
+            data3.push({ name: r.external, originalName: r.externalLocation, depth: 3 })
           }
         })
       } else {
         result.forEach(r => {
           // 第一列
-          if (!data0.some(d => d.name === r.client)) {
-            data0.push({ name: r.client, originalName: r.clientProvince, depth: 0 })
+          if (!data0.some(d => d.name === r.external)) {
+            data0.push({ name: r.external, originalName: r.externalLocation, depth: 0 })
           }
-          const existLink0 = links0.find(l => l.source === r.client && l.target === r.linkDirection)
+          const existLink0 = links0.find(l => l.source === r.external && l.target === r.linkDirection)
           if (existLink0) {
             existLink0.value += r.value
           } else {
-            links0.push({ source: r.client, target: r.linkDirection, tooltip0: r.clientProvince, tooltip1: r.linkDirection, value: r.value, depth: 0 })
+            links0.push({ source: r.external, target: r.linkDirection, tooltip0: r.externalLocation, tooltip1: r.linkDirection, value: r.value, depth: 0 })
           }
-          const existLinkAnalyze0 = linksAnalyze0.find(l => l.name === r.client)
+          const existLinkAnalyze0 = linksAnalyze0.find(l => l.name === r.external)
           if (existLinkAnalyze0) {
             existLinkAnalyze0.value += r.value
           } else {
-            linksAnalyze0.push({ name: r.client, value: r.value })
+            linksAnalyze0.push({ name: r.external, value: r.value })
           }
           // 第二列
           if (!data1.some(d => d.name === r.linkDirection)) {
@@ -264,21 +264,21 @@ export default {
           if (!data2.some(d => d.name === r.linkId)) {
             data2.push({ name: r.linkId, depth: 2 })
           }
-          const existLink2 = links2.find(l => l.source === r.linkId && l.target === r.server)
+          const existLink2 = links2.find(l => l.source === r.linkId && l.target === r.internal)
           if (existLink2) {
             existLink2.value += r.value
           } else {
-            links2.push({ source: r.linkId, target: r.server, tooltip0: r.linkId, tooltip1: r.serverProvince, value: r.value, depth: 2, bandwidth: r.bandwidth })
+            links2.push({ source: r.linkId, target: r.internal, tooltip0: r.linkId, tooltip1: r.internalLocation, value: r.value, depth: 2, bandwidth: r.bandwidth })
           }
-          const existLinkAnalyze2 = linksAnalyze2.find(l => l.name === r.server)
+          const existLinkAnalyze2 = linksAnalyze2.find(l => l.name === r.internal)
           if (existLinkAnalyze2) {
             existLinkAnalyze2.value += r.value
           } else {
-            linksAnalyze2.push({ name: r.server, value: r.value })
+            linksAnalyze2.push({ name: r.internal, value: r.value })
           }
           // 第四列
-          if (!data3.some(d => d.name === r.server)) {
-            data3.push({ name: r.server, originalName: r.serverProvince, depth: 3 })
+          if (!data3.some(d => d.name === r.internal)) {
+            data3.push({ name: r.internal, originalName: r.internalLocation, depth: 3 })
           }
         })
       }
@@ -294,7 +294,11 @@ export default {
             if (existOtherLinkAnalyze0) {
               existOtherLinkAnalyze0.value += sl.value
             } else {
-              otherLinksAnalyze0.push({ ...sl, name: 'c_others' })
+              if (tab === 0) {
+                otherLinksAnalyze0.push({ ...sl, name: 'e_others' })
+              } else if (tab === 1) {
+                otherLinksAnalyze0.push({ ...sl, name: 'i_others' })
+              }
             }
           }
         })
@@ -308,14 +312,22 @@ export default {
             if (existOtherSLink0) {
               existOtherSLink0.value += l0.value
             } else {
-              othersLinks0.push({ ...l0, source: 'c_others', tooltip0: 'others' })
+              if (tab === 0) {
+                othersLinks0.push({ ...l0, source: 'e_others', tooltip0: 'others' })
+              } else if (tab === 1) {
+                othersLinks0.push({ ...l0, source: 'i_others', tooltip0: 'others' })
+              }
             }
           }
         })
         links.push(...top10Links0)
         links.push(...othersLinks0)
         data.push(...data0.filter(d0 => top10LinksAnalyze0.some(l0 => l0.name === d0.name)))
-        data.push({ name: 'c_others', originalName: 'others', depth: 0 })
+        if (tab === 0) {
+          data.push({ name: 'e_others', originalName: 'others', depth: 0 })
+        } else if (tab === 1) {
+          data.push({ name: 'i_others', originalName: 'others', depth: 0 })
+        }
       } else {
         data.push(...data0)
         links.push(...links0)
@@ -337,7 +349,11 @@ export default {
             if (existOtherLinkAnalyze2) {
               existOtherLinkAnalyze2.value += sl.value
             } else {
-              otherLinksAnalyze2.push({ ...sl, name: 's_others' })
+              if (tab === 0) {
+                otherLinksAnalyze2.push({ ...sl, name: 'i_others' })
+              } else if (tab === 1) {
+                otherLinksAnalyze2.push({ ...sl, name: 'e_others' })
+              }
             }
           }
         })
@@ -351,14 +367,22 @@ export default {
             if (existOtherSLink2) {
               existOtherSLink2.value += l2.value
             } else {
-              othersLinks2.push({ ...l2, target: 's_others', tooltip1: 'others' })
+              if (tab === 0) {
+                othersLinks2.push({ ...l2, target: 'i_others', tooltip1: 'others' })
+              } else if (tab === 1) {
+                othersLinks2.push({ ...l2, target: 'e_others', tooltip1: 'others' })
+              }
             }
           }
         })
         links.push(...top10Links2)
         links.push(...othersLinks2)
         data.push(...data3.filter(d2 => top10LinksAnalyze2.some(l2 => l2.name === d2.name)))
-        data.push({ name: 's_others', originalName: 'others', depth: 3 })
+        if (tab === 0) {
+          data.push({ name: 'i_others', originalName: 'others', depth: 3 })
+        } else if (tab === 1) {
+          data.push({ name: 'e_others', originalName: 'others', depth: 3 })
+        }
       } else {
         data.push(...data3)
         links.push(...links2)
@@ -422,7 +446,7 @@ export default {
       })
     },
     resize () {
-      if (this.tab === 0) {
+      if (this.tab === '0') {
         this.myChart.resize()
       } else {
         this.myChart2.resize()