fix: 修复npm折线图堆叠bug

fix: 将entity-detail默认时间查询范围改为1小时
fix: 将entity默认时间查询范围改为1小时
2023-03-14 17:58:27 +08:00 · 2023-03-11 20:40:35 +08:00 · 2023-03-11 15:10:27 +08:00 · 2023-03-11 11:15:41 +08:00 · 2023-02-14 16:35:14 +08:00 · 2023-02-14 16:35:05 +08:00
169 changed files with 6965 additions and 8984 deletions
--- a/.gitlab-ci.yml
+++ b/.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)
@@ -18,7 +18,7 @@ before_script:
 generate_git-log:
  stage: gen_git-log
  script:
-    - if (( `grep git-log.html ./public/index.html | wc -l` == 0 )); then         sed -i 's+</body>+<a style="position:fixed;top:0;left:0;z-index:999;font-size:12px;color:darkblue;text-decoration:none;" target="_blank" href="./git-log.html">R</a>\n</body>+g' ./public/index.html;         echo "添加更新记录链接"; fi;
+    - if (( `grep git-log.html ./public/index.html | wc -l` == 0 )); then         sed -i 's+</body>+<a style="position:fixed;top:0;left:0;z-index:999;font-size:12px;color:transparent;text-decoration:none;display:none;" target="_blank" href="./git-log.html">R</a>\n</body>+g' ./public/index.html;         echo "添加更新记录链接"; fi;
    - echo "最近的100个提交记录"
    - echo "<!DOCTYPE html><html><head><meta charset='utf-8'></head><body><pre>" > ./public/git-log.html
    - "git log -100 --pretty=format:'%ad : %s' >> ./public/git-log.html"
@@ -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:
--- a/babel.config.js
+++ b/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'
  ],
--- a/jest.config.js
+++ b/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
 }
--- a/package.json
+++ b/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": [
--- a/public/images/bg.png
+++ b/public/images/bg.png
--- a/public/images/logo-title.svg
+++ b/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>
--- a/public/images/logo.svg
+++ b/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">
+<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>编组 8</title>
+    <title>编组 2</title>
-    <g id="Dashboards-重构" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <defs>
-        <g id="Network-Analytics_Network-Overview" transform="translate(-62.000000, -17.000000)">
+        <filter x="-17.8%" y="-24.0%" width="135.5%" height="147.9%" filterUnits="objectBoundingBox" id="filter-1">
-            <g id="编组-8" transform="translate(62.000000, 17.000000)">
+            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-                <g id="编组-6" transform="translate(16.714286, 0.000000)" fill="#38ACD2">
+            <feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-                    <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>
+            <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>
-                </g>
+            <feMerge>
-                <g id="编组-6" fill="#427497">
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
-                    <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>
+                <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>
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,6 +5,20 @@
 </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')
 const advancedFormat = require('dayjs/plugin/advancedFormat')
 const weekday = require('dayjs/plugin/weekday')
 dayjs.extend(utc)
 dayjs.extend(timezone)
 dayjs.extend(advancedFormat)
 dayjs.extend(weekday)
 window.$dayJs = dayjs
 export default {
  name: 'App',
  setup () {
@@ -15,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>
--- a/src/Login.vue
+++ b/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>
+<style scoped>
- .logins{
+.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;
+  width: 414px;
-  background: #051a37;
+  height: 524px;
-  border-radius: 6px;
+  background: #0B325C;
-  width: 368px;
+  border: 1px solid rgba(103,179,245,0.65);
-  height: 400px;
+  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.38);
-  /* margin-top:340px; */
+  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;
+  height: 135px;
  width: 248px;
 }
-.login--input{
+.login__box {
-  width: 300px;
+  display: flex;
-  height: 40px;
+  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;
+  background: #21B4ED;
  color: #fff;
  border-radius: 4px;
  border: 0;
  font-weight: 400;
-  text-align: center;
+  font-size: 16px;
  color: #FFFFFF;
  line-height: 22px;
  width: 334px;
  height: 52px;
 }
 </style>
--- a/src/Test.vue
+++ b/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>
--- a/src/assets/css/common.scss
+++ b/src/assets/css/common.scss
@@ -4,7 +4,7 @@
  display: none !important;
 }
 * {
-  font-family: NotoSansSChineseRegular;
+  font-family: NotoSansSChineseRegular, serif;
  box-sizing: border-box;
 }
 html, body, #app {
@@ -43,3 +43,20 @@ body {
 .el-form-item__error {
  padding-top: 0 !important;
 }
 /* 请求报错样式关于popover的修改 */
 .error-popover {
  //min-width: 30px !important;
  display: inline-block;
  background: #FFE7E6 !important;
  border: 1px solid rgba(226,97,84,0.42) !important;
  padding: 6.6px 12px !important;
  border-radius: 4px !important;
  font-size: 14px !important;
  color: #F53A19 !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  .el-popper__arrow {
    display: none !important;
  }
 }
--- a/src/assets/css/components/components/advancedSearch/codemirror.scss
+++ b/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;
--- a/src/assets/css/components/components/common/TimeRange/date-time-range.scss
+++ b/src/assets/css/components/components/common/TimeRange/date-time-range.scss
@@ -71,6 +71,7 @@
    white-space: nowrap;
    display: inline-block;
    margin: 0 5px;
    color: #353636;
    .cn-icon-Data {
      color: #575757;
    }
@@ -122,7 +123,8 @@
      }
      .date-range-history {
-        height: 116px;
+        height: 140px;
        line-height: 24px;
        overflow-y: auto;
        .date-range-history-item {
@@ -197,4 +199,8 @@
      text-align: right;
    }
  }
  .el-input__inner {
    visibility: hidden !important;
  }
 }
--- a/src/assets/css/components/components/common/chart-error.scss
+++ b/src/assets/css/components/components/common/chart-error.scss
@@ -0,0 +1,80 @@
 .error-component {
  position: absolute;
  //width: 100%;
  //height: 100%;
  left: 0;
  top: 0;
 }
 .error-block {
  display: inline-block;
  //width: 100%;
  //max-width: calc(100% - 24px);
  //max-height: calc(100% - 24px);
  //line-height: 24px;
  background: #FFE7E6;
  font-size: 14px;
  color: #F53A19;
  font-weight: 400;
  padding: 7.6px 12px;
  margin: 12px;
  z-index: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  //white-space: nowrap;
  word-break: break-all;
  border: 1px solid rgba(226,97,84,0.42);
  border-radius: 4px;
 }
 .error-block-info {
  position: absolute;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  font-size: 14px;
  color: #575757;
  line-height: 24px;
  font-weight: 400;
  font-family: NotoSansSChineseRegular, serif;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
 }
 .new-error-icon {
  position: relative;
  display: inline-block;
 }
 .new-error-icon .error-content {
  position: absolute;
  z-index: 2;
  top: -42px;
  left: 0;
  visibility: hidden;
  max-width: 220px;
  overflow: scroll;
  height: auto;
  background: #FFE7E6;
  border: 1px solid rgba(226,97,84,0.42);
  border-radius: 4px;
  font-size: 14px;
  color: #F53A19;
  font-weight: 400;
  padding: 5px 12px;
 }
 .error-icon-default {
  font-size: 16px;
  margin-left: -2px;
  margin-right: 8px;
 }
 .error-icon-tooltip {
  font-size: 16px !important;
  margin-bottom: -1px;
  margin-left: 6px;
 }
--- a/src/assets/css/components/components/common/chart-tab.scss
+++ b/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;
        }
      }
    }
  }
 }
--- a/src/assets/css/components/components/layout/layout.scss
+++ b/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;
              }
--- a/src/assets/css/components/components/table/common.scss
+++ b/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;
  }
--- a/src/assets/css/components/index.scss
+++ b/src/assets/css/components/index.scss
@@ -72,3 +72,8 @@
@import 'views/charts2/dnsEventChart';
@import './views/charts2/dnsEventChartByPie';
 //@import '../chart';
@import './components/common/chart-error';
@import './components/common/chart-tab';
@import 'views/administration/AdministrationTabs';
--- a/src/assets/css/components/views/administration/AdministrationTabs.scss
+++ b/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;
        }
      }
    }
  }
 }
--- a/src/assets/css/components/views/chartHeader.scss
+++ b/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;
        }
--- a/src/assets/css/components/views/charts/chartAlarmInfo.scss
+++ b/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;
--- a/src/assets/css/components/views/charts/chartSingleValue.scss
+++ b/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;
--- a/src/assets/css/components/views/charts2/dnsActiveMaliciousDomain.scss
+++ b/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;
--- a/src/assets/css/components/views/charts2/linkDirectionGrid.scss
+++ b/src/assets/css/components/views/charts2/linkDirectionGrid.scss
@@ -13,6 +13,13 @@
      font-size: 14px;
      color: #046ECA;
    }
    .link-block-error {
      position: absolute;
      width: calc(100% - 20px);
      height: calc(100% - 60px);
      margin-left: -12px;
      margin-top: 10px;
    }
    .data-grid {
      height: 100px;
      .egress-row {
--- a/src/assets/css/components/views/charts2/networkOverviewApps.scss
+++ b/src/assets/css/components/views/charts2/networkOverviewApps.scss
@@ -1,46 +1,58 @@
 .network-overview-apps {
  height: 100%;
-  .line-select-metric {
+  .network-overview-apps-header {
    display: flex;
-    justify-content: flex-end;
+    //justify-content: space-between;
    align-items: center;
-    &>span {
+    .network-overview-apps-title {
-      font-size: 12px;
+      font-size: 14px;
-      color: #575757;
+      color: #353636;
-      font-weight: 400;
+      font-weight: 600;
-      margin-right: 3px;
+      display: flex;
      align-items: flex-end;
    }
-    .line-select__operation {
+
-      height: 24px;
+    .line-select-metric {
-      margin-left: 3px;
+      display: flex;
-      box-shadow: none;
+      justify-content: flex-end;
-      border-radius: 2px;
+      align-items: center;
-      .el-input__inner {
+
-        width: 100px;
+      &>span {
        height: 24px;
        padding-left: 4px;
        line-height: 24px;
        font-size: 12px;
-        color: #2C72C6;
+        color: #575757;
        font-weight: 400;
        margin-right: 3px;
      }
-      .el-input__suffix {
+      .line-select__operation {
-        display: flex;
+        height: 24px;
-        .el-input__suffix-inner {
+        margin-left: 3px;
        box-shadow: none;
        border-radius: 2px;
        .el-input__inner {
          width: 100px;
          height: 24px;
          padding-left: 4px;
          line-height: 24px;
-          .el-select__caret {
+          font-size: 12px;
          color: #2C72C6;
          font-weight: 400;
        }
        .el-input__suffix {
          display: flex;
          .el-input__suffix-inner {
            line-height: 24px;
-            width: 16px;
+            .el-select__caret {
-            color: #575757;
+              line-height: 24px;
              width: 16px;
              color: #575757;
            }
          }
        }
      }
    }
  }
  .app-cards {
    display: grid;
    grid-template-rows: repeat(auto-fill, 100px);
@@ -48,7 +60,6 @@
    grid-gap: 20px;
    width: 100%;
    padding-top: 10px;
    height: calc(100% - 24px);
    .app-card {
      border: 1px solid #E2E5EC;
--- a/src/assets/css/components/views/charts2/networkOverviewDdosDetection.scss
+++ b/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;
--- a/src/assets/css/components/views/charts2/networkOverviewTabs.scss
+++ b/src/assets/css/components/views/charts2/networkOverviewTabs.scss
@@ -4,7 +4,7 @@
  height:calc(100% - 64px);
  font-size:12px;
  .tab-hide{
-    margin-top:40px;
+    margin-top:42px;
  }
  .cn-chart__tabs {
    height:100%;
@@ -32,13 +32,11 @@
          .div-yellow {
            height: 12px;
            background: #e5a219;
            border: 1px solid #e5a219;
            border-left: none;
          }
          .div-green {
            height: 12px;
            background: #749f4d;
            border: 1px solid #749f4d;
            border-right: none;
          }
        }
@@ -115,6 +113,41 @@
      .el-table thead {
        color: $grey;
      }
      .el-table__empty-text{
        line-height:20px !important;
      }
      .el-table__header th .cell {
        display:flex;
        flex-direction:row;
        justify-content: center;
        align-items: center;
      }
      .el-table__header tr th:nth-of-type(1) .cell {
        justify-content: start;
      }
      .score-cell {
        display: flex !important;
        justify-content: center;
        .data-score {
          border-radius: 10px;
          font-size: 12px;
          color: #FFFFFF;
          font-weight: 500;
          height: 20px;
          width: 34px;
          line-height: 20px;
          text-align: center;
        }
        .data-score-red {
          background: #E26154;
        }
        .data-score-yellow {
          background: #E5A219;
        }
        .data-score-green {
          background: #749F4D;
        }
      }
    }
    .el-tabs__header {
      margin-bottom: 10px;
--- a/src/assets/css/components/views/charts2/npmAppCategoryScore.scss
+++ b/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;
@@ -179,3 +183,6 @@
    color: $grey;
  }
 }
 .npm-app-border {
  border: 1px solid #E2E5EC;
 }
--- a/src/assets/css/components/views/charts2/npmAppEventTable.scss
+++ b/src/assets/css/components/views/charts2/npmAppEventTable.scss
@@ -110,4 +110,10 @@
  .el-table--group::after,.el-table--border::after,.el-table::before {
    height: 0px;
  }
  .table-error {
    position: absolute;
    width: 100%;
    left: 0;
    top: 68px;
  }
 }
--- a/src/assets/css/components/views/charts2/npmEventsByType.scss
+++ b/src/assets/css/components/views/charts2/npmEventsByType.scss
@@ -3,6 +3,7 @@
  width: 100%;
  height: 100%;
  .npm-event-title {
    display: flex;
    font-size: 14px;
    color: #353636;
    font-weight: 600;
--- a/src/assets/css/components/views/charts2/npmLine.scss
+++ b/src/assets/css/components/views/charts2/npmLine.scss
@@ -4,6 +4,7 @@
  width: 100%;
  border: 1px solid #f0f0f0;
  .npm-line-title {
    display: flex;
    font-size: 14px;
    color: #353636;
    font-weight: 500;
@@ -14,6 +15,7 @@
    margin: 20px 20px 0 20px;
    justify-content: space-between;
    .npm-line-header-title {
      display: flex;
      font-size: 14px;
      color: #353636;
      font-weight: 500;
--- a/src/assets/css/components/views/charts2/npmMap.scss
+++ b/src/assets/css/components/views/charts2/npmMap.scss
@@ -1,4 +1,5 @@
 .cn-chart__map-title {
  display: flex;
  font-size: 14px;
  color: #353636;
  font-weight: 600;
--- a/src/assets/css/components/views/charts2/npmRecentEvents.scss
+++ b/src/assets/css/components/views/charts2/npmRecentEvents.scss
@@ -2,6 +2,7 @@
  height: 100%;
  width: 100%;
  .npm-recent-title {
    display: flex;
    font-size: 14px;
    color: #353636;
    font-weight: 600;
@@ -85,6 +86,9 @@
      color: #046ECA;
      font-weight: 400
    }
    .click-active {
      cursor: pointer;
    }
    .data-recent-table-eventType {
      font-size: 12px;
      color: #046ECA;
--- a/src/assets/css/components/views/charts2/npmRelatedSessions.scss
+++ b/src/assets/css/components/views/charts2/npmRelatedSessions.scss
@@ -2,6 +2,7 @@
  height: 100%;
  width: 100%;
  .npm-sessions-title {
    display: flex;
    font-size: 14px;
    color: #353636;
    font-weight: 500;
@@ -27,6 +28,14 @@
      border-bottom-left-radius: 4px;
      border-right: none;
    }
    .npm-sessions-div-gray {
      height: 100%;
      background: rgba(113,113,113,0.30);
      border: 1px solid rgba(113,113,113,0.30);
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
      border-right: none;
    }
  }
  .npm-sessions-body {
@@ -45,15 +54,10 @@
          display: flex;
          align-items: center;
          .npm-sessions-as-client-i18n {
-            ont-size: 12px;
+            font-size: 12px;
            color: #717171;
            font-weight: 400;
          }
          .npm-sessions-as-client-percent {
            font-size: 18px;
            color: #353636;
            font-weight: 700;
          }
          .npm-sessions-as-client-green,.npm-sessions-as-client-red {
            width: 8px;
            height: 8px;
@@ -66,6 +70,11 @@
            background: red;
          }
        }
        .npm-sessions-as-client-percent {
          font-size: 18px;
          color: #353636;
          font-weight: 700;
        }
      }
    }
    .npm-sessions-body-right {
--- a/src/assets/css/components/views/charts2/npmTrafficLine.scss
+++ b/src/assets/css/components/views/charts2/npmTrafficLine.scss
@@ -53,6 +53,9 @@
    border-radius: 4px;
    height: calc(100% - 32px);
    width: 100%;
    .panel-chart__no-data {
      height: calc(100% - 32px);
    }
    .chart-drawing {
      height: 100%;
      width: 100%;
--- a/src/assets/css/components/views/charts2/panel.scss
+++ b/src/assets/css/components/views/charts2/panel.scss
@@ -31,7 +31,6 @@
          background: #749F4D;
        }
        height:24px;
        font-family: NotoSansHans-Medium;
        font-size: 12px;
        color: #353636;
        font-weight: 500;
@@ -46,8 +45,30 @@
        justify-content: center;
      }
    }
-    .panel__time {
+    .panel__tools {
      display: flex;
      &>.el-select {
        width: 162px;
        margin-right: 10px;
        .select-prefix {
          font-size: 14px;
          color: #999;
          padding: 0 6px 0 3px;
        }
        .el-input__inner {
          font-size: 14px;
          color: #353636;
          background-color: #F5F8FA;
        }
        .common-select {
          top: 32px !important;
        }
      }
      .panel__time {
        display: flex;
      }
    }
  }
  .chart-list {
--- a/src/assets/css/components/views/detections/detection-filter.scss
+++ b/src/assets/css/components/views/detections/detection-filter.scss
@@ -18,7 +18,7 @@
      align-items: center;
      padding-left: 10px;
      color: #666;
-      background-color: #F3F7FA;
+      //background-color: #F3F7FA;
      cursor: pointer;
      span {
@@ -33,7 +33,18 @@
      i.arrow-rotate {
        transform: rotate(90deg) translate(2px, 3px);
      }
      .new-detection-filter-header-title {
        font-size: 14px;
        color: #353636;
        font-weight: 600;
      }
      .new-detection-filter-icon {
        margin-left: 8px;
        margin-bottom: 2px;
        font-weight: bold !important;
      }
    }
    .filter__body {
      padding: 5px 0 0 15px;
@@ -69,4 +80,17 @@
      }
    }
  }
  .new-detection-filter-title {
    display: flex;
    flex: 0 0 32px;
    align-items: center;
    padding-left: 27px;
    background-color: #EFF2F5;
    cursor: pointer;
    font-size: 14px;
    color: #353636;
    font-weight: 600;
    margin: -10px;
    margin-bottom: 10px;
  }
 }
--- a/src/assets/css/components/views/detections/detection-list/detection-list.scss
+++ b/src/assets/css/components/views/detections/detection-list/detection-list.scss
@@ -40,7 +40,7 @@
      height: 100%;
      overflow: auto;
-      .cn-detection__shadow {
+      .cn-detection__shadow, .new-cn-detection__shadow {
        position: fixed;
        height: 100vh;
        width:100vw;
@@ -49,6 +49,10 @@
        z-index: 1;
        background-color: rgba(0, 0, 0, .2);
      }
      .new-cn-detection__shadow {
        z-index: 4;
      }
    }
  }
--- a/src/assets/css/components/views/detections/detection-list/row.scss
+++ b/src/assets/css/components/views/detections/detection-list/row.scss
@@ -2,13 +2,22 @@
  display: flex;
  .cn-detection__collapse {
    margin-bottom: 1px;
    padding-top: 18px;
    width: 24px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
-    background-color: #F3F7FA;
+    margin-bottom: 1px;
    //padding-top: 18px;
    background-color: #EFF2F5;
    .cn-detection__collapse-block {
      min-height: 66px;
      height: 100%;
      max-height: 88px;
      display: flex;
      align-items: center;
      cursor: pointer;
    }
    span {
      transform: rotate(0);
@@ -99,6 +108,24 @@
          line-height: 14px;
          margin-left: 5px;
        }
        .detection-event-severity-color-block {
          width: 5px;
          height: 20px;
          border-radius: 2.5px;
          margin-left: -16px;
          margin-right: 12px;
        }
        .detection-event-severity-block {
          font-size: 12px;
          color: #046EC9;
          font-weight: 500;
          padding: 2px 10px;
          background: rgba(56,172,210,0.10);
          border: 1px solid #ADC7DB;
          box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
          border-radius: 3px;
          margin-right: 10px;
        }
      }
      .cn-detection__body {
--- a/src/assets/css/components/views/detections/detection-overview.scss
+++ b/src/assets/css/components/views/detections/detection-overview.scss
@@ -62,8 +62,11 @@
      .row__content {
        display: flex;
-        color: #3976CB;
+        //color: #3976CB;
-        
+        color: #046ECA;
        font-weight: 500;
        font-size: 14px;
        &.row__content--link {
          font-style: italic;
          text-decoration: underline;
@@ -77,6 +80,10 @@
          cursor: pointer;
        }
        span{
          font-style: italic;
          color: #046ECA;
        }
        .row__content--span {
          font-style: italic;
          color: #1890FF;
        }
@@ -169,13 +176,16 @@
          span {
            padding-left: 5px;
            font-size: 14px;
-            color: #3976CB;
+            //color: #3976CB;
            color: #046ECA;
            font-weight: 600 !important;
          }
        }
        .timeline__security-type {
          font-size: 12px;
-          color: #3976CB;
+          color: #046ECA;
          margin-bottom: 10px;
          font-weight: 500;
        }
        .timeline__start-time {
          font-size: 12px;
@@ -210,5 +220,6 @@
  justify-content: center;
  align-items: center;
  padding: 0 4px;
-  color: white;
+  //todo 此处文字显示白色，暂时取消
  //color: white;
 }
--- a/src/assets/css/components/views/entityExplorer/entity-explorer.scss
+++ b/src/assets/css/components/views/entityExplorer/entity-explorer.scss
@@ -26,7 +26,7 @@
    justify-content: flex-start;
  }
-  .explorer-top-tools {
+  .explorer-top-tools, .explorer-detection-top-tools {
    display: flex;
    justify-content: flex-end;
    align-items: center;
@@ -46,6 +46,37 @@
      }
    }
  }
  .explorer-detection-top-tools {
    display: flex;
    justify-content: space-between;
  }
  .explorer-top-tools-title {
    font-size: 24px;
    line-height: 24px;
    font-weight: 900;
    color: #353636;
  }
  .explorer-top-tools-block {
    height: 28px;
    line-height: 28px;
    background: #F5F8FA;
    font-size: 14px;
    color: #353636;
    font-weight: 500;
    padding: 0 10px;
    margin-right: 10px;
    border: 1px solid #E2E5EC;
    border-radius: 2px;
    cursor: pointer;
  }
  .detection-icon-setting {
    margin-right: 10px;
    font-size: 14px;
  }
  .detection-border {
    border: 1px solid #E2E5EC;
    border-radius: 4px;
  }
  .explorer-container {
    display: flex;
    overflow: visible; /*overflow: hidden;*/
--- a/src/assets/css/components/views/report/builtinReport.scss
+++ b/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;
--- a/src/assets/css/font/iconfont.css
+++ b/src/assets/css/font/iconfont.css
@@ -1,8 +1,8 @@
@font-face {
  font-family: "cn-icon"; /* Project id 2614877 */
-  src: url('iconfont.woff2?t=1663570533591') format('woff2'),
+  src: url('iconfont.woff2?t=1670817031037') format('woff2'),
-       url('iconfont.woff?t=1663570533591') format('woff'),
+       url('iconfont.woff?t=1670817031037') format('woff'),
-       url('iconfont.ttf?t=1663570533591') format('truetype');
+       url('iconfont.ttf?t=1670817031037') format('truetype');
 }
 .cn-icon {
@@ -13,6 +13,74 @@
  -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";
 }
 .cn-icon-a-SecurityEvent:before {
  content: "\e7ae";
 }
 .cn-icon-bianji1:before {
  content: "\e7af";
 }
 .cn-icon-a-PerformanceEvent:before {
  content: "\e7b0";
 }
 .cn-icon-xinjian:before {
  content: "\e7b1";
 }
 .cn-icon-a-RegulatoryRiskEvent:before {
  content: "\e7b2";
 }
 .cn-icon-Delete1:before {
  content: "\e7b3";
 }
 .cn-icon-a-EvaluatedTarget:before {
  content: "\e7b4";
 }
 .cn-icon-a-GeneralSettings:before {
  content: "\e7b5";
 }
 .cn-icon-Thresholds:before {
  content: "\e7b6";
 }
 .cn-icon-good:before {
  content: "\e7ad";
 }
--- a/src/assets/css/font/iconfont.js
+++ b/src/assets/css/font/iconfont.js
--- a/src/assets/css/font/iconfont.ttf
+++ b/src/assets/css/font/iconfont.ttf
--- a/src/assets/css/font/iconfont.woff
+++ b/src/assets/css/font/iconfont.woff
--- a/src/assets/css/font/iconfont.woff2
+++ b/src/assets/css/font/iconfont.woff2
--- a/src/components/advancedSearch/Index.vue
+++ b/src/components/advancedSearch/Index.vue
@@ -60,6 +60,7 @@ export default {
    // 连接符列表
    connectionList: Array
  },
  emits: ['search'],
  methods: {
    search (parseData) {
      this.$emit('search', parseData)
--- a/src/components/advancedSearch/TagMode.vue
+++ b/src/components/advancedSearch/TagMode.vue
@@ -104,6 +104,7 @@ export default {
      metaList: []
    }
  },
  emits: ['changeMode', 'search'],
  methods: {
    // 新增条件
    addCondition (meta) {
--- a/src/components/advancedSearch/TextMode.vue
+++ b/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, {
--- a/src/components/advancedSearch/meta/parser.js
+++ b/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)
--- a/src/components/advancedSearch/meta/sql-parser.js
+++ b/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
--- a/src/components/common/ChartTabs.vue
+++ b/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>
--- a/src/components/common/Error.vue
+++ b/src/components/common/Error.vue
@@ -0,0 +1,149 @@
 <template>
  <div v-if="showDefault" class="error-component">
    <div class="error-block" :style="{'max-width': localMaxWidth, 'width': localWidth}">
      <svg class="icon error-icon-default" aria-hidden="true">
        <use xlink:href="#cn-icon-baocuo"></use>
      </svg>
      {{ content }}
    </div>
  </div>
  <div id="error-com">
    <div v-if="tooltip !== undefined">
      <el-popover
          :width="localPopoverWidth"
          placement="top-start"
          trigger="hover"
          :visible-arrow="false"
          popper-class="error-popover"
          :content="content">
        <template #reference>
          <span>
            <svg class="icon error-icon-tooltip" aria-hidden="true">
              <use xlink:href="#cn-icon-baocuo"></use>
            </svg>
 <!--            为后续自定义icon插槽做预备-->
 <!--            <i v-if="icon" :class="`icon cn-icon-${icon}`"></i>-->
          </span>
        </template>
      </el-popover>
 <!--      不使用popover实现hover，后续考虑替换为该方案-->
 <!--      <span class="new-error-icon" @mouseenter="hoverError">-->
 <!--        <svg class="icon item-popover-up" aria-hidden="true">-->
 <!--          <use xlink:href="#cn-icon-baocuo"></use>-->
 <!--        </svg>-->
 <!--        <div id="error-content" class="error-content">-->
 <!--          rview/appCompanyCyclrview/appCompanyCycleTrafficTotal?startTime=getSecond(this.timeFilter.startTime)&endTime=getSecond(this.timeFilter.endTime)&appCompanies=%27Tencent%27,%27Jingdong%27,%27Akamai%27,%27Bytedance%27,%27Baidu%27,%27Huawei%27,%27Beike%27,%27Aiqiyi%27,%27Ctrip%27,%27Meituan%27-->
 <!--        </div>-->
 <!--      </span>-->
    </div>
    <div class="error-block-info" v-if="info !== undefined">
      <div>
        <svg class="icon error-icon-default" aria-hidden="true">
          <use xlink:href="#cn-icon-baocuo"></use>
        </svg>
        {{ content }}
      </div>
    </div>
  </div>
 </template>
 <!--  start----------------调用方式----------------start  -->
 <!--
   组件在全局注册了，调用时: <chart-error :content="content"></chart-error>
 -->
 <!--
   目前有三种形式，分别是default、tooltip、info
   默认，即红框展示：<chart-error :content="content" />
   在标题之后显示，需要鼠标移动到图标上显示弹窗：<chart-error tooltip :content="content" />
   文字提示：<chart-error info :content="content" />
 -->
 <!--
  自定义宽度：<chart-error width="300" :content="content" />
  自定义弹窗宽度：<chart-error tooltip width="300" :content="content" />
  注意：info模式不支持宽度设置
 -->
 <!--
  自定义icon图标：<chart-error tooltip icon="baocuo" :content="content" />，此时icon全称为'cn-icon-baocuo'
 -->
 <!--  end----------------调用方式----------------end  -->
 <script>
 export default {
  name: 'Error',
  props: {
    // 工具栏提示类型
    tooltip: {
      type: String
    },
    // 文字提示类型
    info: {
      type: String
    },
    // 报错信息内容，如果不传，默认为"Error"
    content: {
      type: String,
      default: 'Error！'
    },
    // 报错信息模块宽度，如果类型选择tooltip，则为弹窗宽度，info模式没有宽度设置
    width: {
      type: String
    },
    // 报错信息模块最大宽度
    maxWidth: {
      type: String
      // default: '350'
    },
    // 自定义icon图标
    icon: {
      type: String
    },
    // 自定义svg图标
    svg: {
      type: String
    }
  },
  data () {
    return {
      showDefault: false, // 是否显示default，分别是default、tooltip、info
      showSmall: false, // 显示错误的类型，true为图表模块内显示报错，false为标题后显示报错
      localWidth: '',
      localMaxWidth: '',
      localPopoverWidth: ''
    }
  },
  mounted () {
    this.initData()
  },
  methods: {
    initData () {
      if (this.tooltip !== undefined) {
        this.showDefault = false
        this.localPopoverWidth = this.width !== undefined
      }
      // 默认default模式
      this.showDefault = this.tooltip === undefined && this.info === undefined
      if (this.width) {
        // 避免宽度出现负数的情况
        this.localWidth = Math.abs(parseFloat(this.width)) + 'px'
      }
      if (this.maxWidth) {
        // 避免宽度出现负数的情况
        this.localMaxWidth = Math.abs(parseFloat(this.maxWidth)) + 'px'
      }
    },
    /**
     * 鼠标移入事件，用于获取弹窗dom，修改距离父元素的top
     */
    hoverError (e) {
      // const dom = document.getElementById('error-content')
      // if (dom) {
      //   console.log('---', dom.clientHeight)
      // }
    }
  }
 }
 </script>
--- a/src/components/common/MyDatePicker/index.d.ts
+++ b/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;
--- a/src/components/common/MyDatePicker/index.js
+++ b/src/components/common/MyDatePicker/index.js
--- a/src/components/common/MyDatePicker/src/date-picker-com/basic-date-table.vue.d.ts
+++ b/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;
--- a/src/components/common/MyDatePicker/src/date-picker-com/basic-month-table.vue.d.ts
+++ b/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;
--- a/src/components/common/MyDatePicker/src/date-picker-com/basic-year-table.vue.d.ts
+++ b/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;
--- a/src/components/common/MyDatePicker/src/date-picker-com/panel-date-pick.vue.d.ts
+++ b/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;
--- a/src/components/common/MyDatePicker/src/date-picker-com/panel-date-range.vue.d.ts
+++ b/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;
--- a/src/components/common/MyDatePicker/src/date-picker-com/panel-month-range.vue.d.ts
+++ b/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;
--- a/src/components/common/MyDatePicker/src/date-picker.d.ts
+++ b/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;
--- a/src/components/common/MytTimePicker/index.d.ts
+++ b/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;
--- a/src/components/common/MytTimePicker/index.js
+++ b/src/components/common/MytTimePicker/index.js
--- a/src/components/common/MytTimePicker/src/common/constant.d.ts
+++ b/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;
 };
--- a/src/components/common/MytTimePicker/src/common/date-utils.d.ts
+++ b/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;
--- a/src/components/common/MytTimePicker/src/common/picker.vue.d.ts
+++ b/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;
--- a/src/components/common/MytTimePicker/src/common/props.d.ts
+++ b/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;
 };
--- a/src/components/common/MytTimePicker/src/time-picker-com/basic-time-spinner.vue.d.ts
+++ b/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;
--- a/src/components/common/MytTimePicker/src/time-picker-com/panel-time-pick.vue.d.ts
+++ b/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;
--- a/src/components/common/MytTimePicker/src/time-picker-com/panel-time-range.vue.d.ts
+++ b/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;
--- a/src/components/common/MytTimePicker/src/time-picker-com/useTimePicker.d.ts
+++ b/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;
 }[]>;
--- a/src/components/common/MytTimePicker/src/time-picker.d.ts
+++ b/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;
--- a/src/components/common/Pagination.vue
+++ b/src/components/common/Pagination.vue
@@ -23,8 +23,8 @@
 </template>
 <script>
-import { defaultPageSize } from '@/utils/constants'
+import { defaultPageSize, storageKey } from '@/utils/constants'
-import { 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)
  },
--- a/src/components/common/TimeRange/DateTimeRange.vue
+++ b/src/components/common/TimeRange/DateTimeRange.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-ele-click-outside="changeDropdown" style="position: relative" 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">
@@ -10,25 +10,22 @@
      <div class="calendar-popover-text" v-else>
        {{ showDetail }}
      </div>
-      <div class="calendar-popover-text calendar-popover__small"><i class="cn-icon cn-icon-dropdown"
+      <div class="calendar-popover-text calendar-popover__small">
-                                            :class="dropdownFlag ? 'cn-icon-up' : ''"></i></div>
+        <i class="cn-icon cn-icon-dropdown" :class="dropdownFlag ? 'cn-icon-up' : ''"></i>
      </div>
    </div>
    <transition name="el-zoom-in-top">
      <div v-if="dropdownFlag" class="date-range-panel">
        <el-row class="date-range-panel-top" style="position: relative">
          <el-col :span="16" class="date-range-panel-content date-range-panel-content-left">
            <div class="date-range-title" style="padding-left: 0">Absolute time range</div>
-            <MyDatePicker
+            <el-date-picker
-                :clearable='false'
+                v-model="newDateValue"
-                :editable='false'
+                ref="newDatePicker"
-                v-model="timeArr"
+                class="date_style"
                style="position: absolute;top: -53px;left: -536px;"
                :clearable="false"
                type="datetimerange"
                ref="myDatePicker"
                :popper-class="'myDatePicker'"
                class="panel-time-picker-hidden"
                :size="'small'"
                placement="left-start"
                style="position: absolute"
                @change="timeArrChange"
            />
            <div class="content-title">From</div>
@@ -39,9 +36,7 @@
            <div @click="myDatePickerShow" tabindex="2" class="content-input">
              {{ dateFormatByAppearance(getMillisecond(myEndTime)) }}
            </div>
-            <div>
+
              <el-button @click="timeRange" type="primary" size="mini">Apply time range</el-button>
            </div>
            <div class="date-range-title" style="padding-left: 0">Recently used absolute ranges</div>
            <div class="date-range-history">
              <div v-for="(item, index) in rangeHistoryArr" :key="index" class="date-range-history-item"
@@ -52,23 +47,26 @@
              </div>
            </div>
          </el-col>
-          <el-col :span="8" class="date-range-panel-content date-range-panel-content-right"
+          <el-col
-                  style="border-left: 1px solid rgba(0,0,0,0.09);">
+              :span="8"
              class="date-range-panel-content date-range-panel-content-right"
              style="border-left: 1px solid rgba(0,0,0,0.09);">
            <div class="date-range-title">Relatime time ranges</div>
            <ul class="date-range-item">
-              <li v-for="item in dateRangeArr" @click="quickChange(item.value)"
+              <li v-for="item in dateRangeArr"
-                  :class="(item.value==dateRangeValue.value || item.value==dateRangeValue)?'active':''"
+                  @click="quickChange(item.value)"
                  :class="(item.value===dateRangeValue.value || item.value===dateRangeValue)?'active':''"
                  :key="item.value">
                <span style="position: relative">
                    {{ item.name }}
-                    <i v-if="(item.value==dateRangeValue.value || item.value==dateRangeValue)"
+                    <i v-if="(item.value===dateRangeValue.value || item.value===dateRangeValue)"
                       class="cn-icon cn-icon-check"></i>
                </span>
              </li>
            </ul>
          </el-col>
        </el-row>
-        <el-row class="date-range-panel-bottom" style="">
+        <el-row class="date-range-panel-bottom">
          <el-col :span="12">{{ address }}</el-col>
          <el-col :span="12" class="utc-str">{{ utcStr }}</el-col>
        </el-row>
@@ -78,17 +76,17 @@
 </template>
 <script>
-import { ref, computed } from 'vue'
+import { ref, computed, watch, reactive } from 'vue'
 import MyDatePicker from '../MyDatePicker'
 import { storageKey } from '@/utils/constants'
-import { getMillisecond } from '@/utils/date-util'
+import { getMillisecond, timestampToList } from '@/utils/date-util'
 import { useStore } from 'vuex'
 export default {
  name: 'DateTimeRange',
  props: {
    startTime: {
      type: Number,
-      default: window.$dayJs.tz().valueOf() - 1 * 60 * 60 * 1000
+      default: window.$dayJs.tz().valueOf() - 60 * 60 * 1000
    },
    endTime: {
      type: Number,
@@ -97,68 +95,39 @@ export default {
    dateRange: {
      type: Number
    }
    /* useRefresh: {
      type: Boolean,
      default: true
    },
    useDateRange: {
      type: Boolean,
      default: true
    } */
  },
  emits: ['change'],
  components: {
    MyDatePicker
  },
  setup (props, ctx) {
    // data
    const store = useStore()
    const myStartTime = ref(props.startTime)
    const myEndTime = ref(props.endTime)
-    const timeArr = ref([myStartTime.value, myEndTime.value])
+    // 时间选择器绑定的值
    const newDateValue = ref([
      new Date(...timestampToList(myStartTime.value)),
      new Date(...timestampToList(myEndTime.value))
    ])
    // 时区地址
    const address = localStorage.getItem(storageKey.sysTimezone)
    // 当前所在时区
    const utc = localStorage.getItem(storageKey.timezoneOffset)
    // 历史选择时间
    const rangeHistory = ref(localStorage.getItem(storageKey.dataRangeHistory) ? JSON.parse(localStorage.getItem(storageKey.dataRangeHistory)) : [])
    const dateRangeValue = props.dateRange ? ref(props.dateRange) : ref(60)
    const isCustom = ref(dateRangeValue.value === -1)
    const dateRangeArr = [
-      {
+      { value: 5, name: 'last 5 Min' },
-        value: 5,
+      { value: 15, name: 'last 15 Min' },
-        name: 'last 5 Min'
+      { value: 30, name: 'last 30 Min' },
-      },
+      { value: 60, name: 'last 1 hour' },
-      {
+      { value: 180, name: 'last 3 hour' },
-        value: 15,
+      { value: 360, name: 'last 6 hour' },
-        name: 'last 15 Min'
+      { value: 720, name: 'last 12 hour' },
-      },
+      { value: 1440, name: 'last 1 days' },
-      {
+      { value: 2880, name: 'last 2 days' }
        value: 30,
        name: 'last 30 Min'
      },
      {
        value: 60,
        name: 'last 1 hour'
      },
      {
        value: 180,
        name: 'last 3 hour'
      },
      {
        value: 360,
        name: 'last 6 hour'
      },
      {
        value: 720,
        name: 'last 12 hour'
      },
      {
        value: 1440,
        name: 'last 1 days'
      },
      {
        value: 2880,
        name: 'last 2 days'
      }
    ]
    const dropdownFlag = ref(false)
    // computed
    const utcStr = computed(() => {
      let str = 'UTC '
@@ -183,20 +152,40 @@ export default {
      }
      return str
    })
-    const rangeHistoryArr = computed(() => {
+    const rangeHistoryArr = rangeHistory
-      return rangeHistory.value.slice(0, 4)
+
    })
    // refs
-    const myDatePicker = ref(null)
+    const newDatePicker = ref(null)
    // echarts框选时间范围
    const rangeEchartsData = reactive({
      value: computed(() => store.state.panel.rangeEchartsData)
    })
    watch(() => rangeEchartsData.value, (newVal, oldVal) => {
      if (newVal) {
        myStartTime.value = getMillisecond(newVal.startTime)
        myEndTime.value = getMillisecond(newVal.endTime)
        isCustom.value = true
        dateRangeValue.value = -1
        returnValue()
      }
    })
    // methods
    /**
     * 打开/关闭时间面板
     */
    const showDropdown = () => {
      dropdownFlag.value = !dropdownFlag.value
      if (dropdownFlag.value) {
        myStartTime.value = props.startTime
        myEndTime.value = props.endTime
        timeArr.value = [getMillisecond(myStartTime.value), getMillisecond(myEndTime.value)]
      }
    }
    /**
     * 点击空白处隐藏时间面板
     */
    const changeDropdown = () => {
      if (dropdownFlag.value) {
        dropdownFlag.value = false
@@ -205,19 +194,36 @@ export default {
        dropdownFlag.value = false
      }
    }
    /**
     * 打开时间选择器，从时间面板的“开始时间”、“结束时间”调用
     */
    const myDatePickerShow = () => {
-      myDatePicker.value.focus()
+      newDateValue.value = [
-      myDatePicker.value.pickerVisible = true
+        new Date(...timestampToList(myStartTime.value)),
        new Date(...timestampToList(myEndTime.value))
      ]
      newDatePicker.value.focus()
      // todo 此处为弹窗打开的方向标识，控制css的position修改其left与top属性未生效，只好隐藏，后续有更好的处理办法再修改
      const dom = document.getElementsByClassName('el-picker__popper el-popper is-light is-pure')
      const dom1 = dom[0].getElementsByClassName('el-popper__arrow')
      dom1[0].style.display = 'none'
    }
    /**
     * 时间选择器，选择时间，点击OK后的回调
     * @param val，开始/结束时间数组
     */
    const timeArrChange = (val) => {
      myStartTime.value = getMillisecond(val[0])
      myEndTime.value = getMillisecond(val[1])
    }
    const timeRange = () => {
      isCustom.value = true
      dateRangeValue.value = -1
      returnValue()
    }
    /**
     * 历史时间列表中点击一项，对时间进行赋值
     * @param item
     */
    const historyChange = (item) => {
      myStartTime.value = item.start
      myEndTime.value = item.end
@@ -232,37 +238,56 @@ export default {
      myStartTime.value = myEndTime.value - value * 60 * 1000
      returnValue()
    }
    /**
     * 重置时间，将时间存入缓存，并触发方法请求接口刷新界面
     */
    const returnValue = () => {
      cancelHttp()
      rangeHistory.value.unshift({
        start: myStartTime.value,
        end: myEndTime.value
      })
      if (rangeHistory.value.length > 4) {
        rangeHistory.value.splice(4, rangeHistory.value.length - 1)
      }
      localStorage.setItem(storageKey.dataRangeHistory, JSON.stringify(rangeHistory.value))
      ctx.emit('change', myStartTime.value, myEndTime.value, dateRangeValue)
      dropdownFlag.value = false
    }
    /**
     * 终止http请求
     */
    const cancelHttp = () => {
      const cancelList = store.state.panel.httpCancel
      if (cancelList.length > 0) {
        cancelList.forEach((cancel, index) => {
          cancel()
          delete cancelList[index]
        })
      }
    }
    return {
      myStartTime,
      myEndTime,
      getMillisecond,
      dropdownFlag,
      utcStr,
      rangeEchartsData,
      address,
      dateRangeArr,
      dateRangeValue,
      isCustom,
-      timeArr,
+      newDateValue,
-      myDatePicker,
+      newDatePicker,
      showDetail,
      rangeHistory,
      rangeHistoryArr,
      getMillisecond,
      myDatePickerShow,
      showDropdown,
      changeDropdown,
      timeArrChange,
      returnValue,
      quickChange,
      timeRange,
      historyChange
    }
  }
--- a/src/components/common/TimeRange/TimeRefresh.vue
+++ b/src/components/common/TimeRange/TimeRefresh.vue
@@ -12,8 +12,8 @@
        <transition name="el-zoom-in-top">
            <div v-if="dropdownShow" class="refresh-list">
                <div v-for="(item, index) in refreshArr" :key="index" @click="setRefresh(item)" class="refresh-list-item" :class="item.value==interval ? 'active' : ''">
-                  {{item.label}}
+                  {{ item.label }}
-                  <i v-if="item.value==interval" class="cn-icon cn-icon-check"></i>
+                  <i v-if="item.value===interval" class="cn-icon cn-icon-check"></i>
                </div>
            </div>
        </transition>
@@ -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,16 +92,26 @@ 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) {
+      if (val && val.value !== -1) {
        // 切换轮询请求时间频率时，发现有未结束的请求，终止请求
        const cancelList = this.$store.state.panel.httpCancel
        // console.log('timeRefresh.vue------setRefresh------查看终止数量', cancelList, cancelList.length)
        if (cancelList.length > 0) {
          cancelList.forEach((cancel, index) => {
            cancel()
            delete cancelList[index]
          })
        }
        // 向地址栏添加自动刷新频率
        const dateParam = {
          refreshTime: val.value
        }
        this.reloadUrl(dateParam)
        this.$store.commit('setRefreshTime', val.value)
        this.$store.commit('setRefreshFlag', true)
        // 设置定时器
        this.intervalTimer = setInterval(() => {
@@ -121,7 +123,7 @@ export default {
        }
        return
      }
-      if (val && val.value == -1) {
+      if (val && val.value === -1) {
        // 清除定时器
        clearInterval(this.intervalTimer)
--- a/src/components/layout/Container.vue
+++ b/src/components/layout/Container.vue
@@ -20,7 +20,8 @@ export default {
    entityDetectionStyle () {
      const route = this.$route.name !== undefined ? this.$route.name : this.$route
      if (listScrollPath.indexOf(route.path) > -1) {
-        return 'overflow:auto;background-color: #EFF2F5;'
+        const style = route.path === listScrollPath[0] ? 'overflow:auto;background-color: #EFF2F5;' : 'overflow:auto;'
        return style
      } else {
        return ''
      }
--- a/src/components/layout/Header.vue
+++ b/src/components/layout/Header.vue
@@ -2,8 +2,9 @@
  <div class="cn-header">
    <div class="cn-header__banner">
      <div class="banner__left">
-        <span @click="shrink" class="shrink-button" :class="{'shrink-button--collapse': showMenu}"><i class="cn-icon cn-icon-navigation"></i></span>
+        <span @click="shrink" class="shrink-button" :class="{'shrink-button--collapse': showMenu}"><i
-        <img alt="loading..." height="26" :src="logo?logo:require('../../assets/img/logo-header.svg')"/>
+            class="cn-icon cn-icon-navigation"></i></span>
        <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">
@@ -12,23 +13,27 @@
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>
-                <div id="header-to-english" :style="language === 'en'?'color:#0091ff':''" @click="changeLocal('en')">English</div>
+                <div id="header-to-english" :style="language === 'en'?'color:#0091ff':''" @click="changeLocal('en')">
                  English
                </div>
              </el-dropdown-item>
              <el-dropdown-item>
-                <div id="header-to-chinese" :style="language === 'cn'?'color:#0091ff':''" @click="changeLocal('cn')">中文</div>
+                <div id="header-to-chinese" :style="language === 'cn'?'color:#0091ff':''" @click="changeLocal('cn')">
                  中文
                </div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-dropdown>
-          <div class='login-user header-menu--item'>{{username}}&nbsp;<i class="cn-icon cn-icon-arrow-down"></i></div>
+          <div class='login-user header-menu--item'>{{ username }}&nbsp;<i class="cn-icon cn-icon-arrow-down"></i></div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>
-                <div id="header-to-changepin" @click="showPinDialog">{{$t('overall.changePassword')}}</div>
+                <div id="header-to-changepin" @click="showPinDialog">{{ $t('overall.changePassword') }}</div>
              </el-dropdown-item>
              <el-dropdown-item>
-                <div id="header-to-logout" @click="logout">{{$t('overall.logout')}}</div>
+                <div id="header-to-logout" @click="logout">{{ $t('overall.logout') }}</div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
@@ -37,8 +42,9 @@
    </div>
    <div class="cn-header__nav">
      <i class="cn-icon cn-icon-a-NetworkAnalytics"></i>
-      <el-breadcrumb class="header__left-breadcrumb" separator=">">
+      <el-breadcrumb class="header__left-breadcrumb" :separator="route.indexOf('detection') === -1 && route.indexOf('administration') === -1 ? '>' : ''">
-        <el-breadcrumb-item class="header__left-breadcrumb-item" :id="`breadcrumb${item}`" :title="item" v-for="(item,index) in breadcrumb" :key="item">
+        <el-breadcrumb-item class="header__left-breadcrumb-item" :id="`breadcrumb${item}`" :title="item"
                            v-for="(item,index) in breadcrumb" :key="item">
          <template v-if="index===3">
            <div class="header__left-breadcrumb-item-select">
              <el-popover placement="bottom-start"
@@ -52,8 +58,19 @@
                          @hide="hideBreadcrumbPopover()"
                          trigger="click">
                <template #reference>
-                  <div class="breadcrumb-button"  id="breadcrumbButton" :class="showBackground?'breadcrumb-button__active':''"  >
+                  <div class="breadcrumb-button" id="breadcrumbButton"
-                     <span  id="breadcrumbValue"> {{item}}</span><i class="cn-icon-xiala cn-icon"></i>
+                       :class="showBackground?'breadcrumb-button__active':''">
                    <span id="breadcrumbValue">
                      <template v-if="curTabProp === 'qtype'">
                        <span>{{ dnsQtypeMapData.get(item)}}</span>
                      </template>
                      <template v-else-if="curTabProp === 'rcode'">
                        <span>{{ dnsRcodeMapData.get(item)}}</span>
                      </template>
                      <template v-else>
                        <span>{{ item }}</span>
                      </template>
                    </span><i class="cn-icon-xiala cn-icon"></i>
                  </div>
                </template>
                <el-row type="flex" justify="center" style="width: fit-content;flex-direction: column;">
@@ -63,9 +80,18 @@
                              v-model="dropDownValue"
                              @input="dropDownSearch"></el-input>
                  </div>
-                  <ul class="select-dropdown" id="breadcrumbSelectDropdown"  @scroll="scrollList()">
+                  <ul class="select-dropdown" id="breadcrumbSelectDropdown" @scroll="scrollList()">
-                    <li v-for="item in breadcrumbColumnValueListShow" title='' :key="item" :id="item" class="select-dropdown__item" @click="changeValue(item)" :class="selected?'':''">
+                    <li v-for="item in breadcrumbColumnValueListShow" title='' :key="item" :id="item"
-                      <span>{{item}}</span>
+                        class="select-dropdown__item" @click="changeValue(item)" :class="selected?'':''">
                      <template v-if="curTabProp === 'qtype'">
                        <span>{{ dnsQtypeMapData.get(item) }}</span>
                      </template>
                      <template v-else-if="curTabProp === 'rcode'">
                        <span>{{ dnsRcodeMapData.get(item) }}</span>
                      </template>
                      <template v-else>
                        <span>{{ item }}</span>
                      </template>
                    </li>
                  </ul>
                </el-row>
@@ -73,38 +99,39 @@
            </div>
          </template>
          <template v-else-if="index===2">
-            <span v-if="route===wholeScreenRouterMapping.dns" >{{$t(item)}}</span>
+            <span v-if="route===wholeScreenRouterMapping.dns">{{ $t(item) }}</span>
-            <span v-else class="route-menu" @click="jump(route,item,'',3)">{{$t(item)}}</span>
+            <span v-else class="route-menu" @click="jump(route,item,'',3)">{{ $t(item) }}</span>
          </template>
          <template v-else-if="index===1">
-            <span class="route-menu" @click="jump(route,'','',2)" v-if="route.indexOf('detection') === -1">{{item}}</span>
+            <span class="route-menu" @click="jump(route,'','',2)"
-            <div class="header__left-breadcrumb-item-select" v-if="route.indexOf('detection') > -1">
+                  v-if="route.indexOf('detection') === -1 && route.indexOf('administration') === -1">{{ item }}</span>
-              <el-popover placement="bottom-start"
+            <!--            <div class="header__left-breadcrumb-item-select" v-if="route.indexOf('detection') > -1">-->
-                          v-if="route.indexOf('detection') > -1"
+            <!--              <el-popover placement="bottom-start"-->
-                          ref="breadcrumbPopover"
+            <!--                          v-if="route.indexOf('detection') > -1"-->
-                          :show-arrow="false"
+            <!--                          ref="breadcrumbPopover"-->
-                          :append-to-body="false"
+            <!--                          :show-arrow="false"-->
-                          :hide-after="0"
+            <!--                          :append-to-body="false"-->
-                          :show-after="0"
+            <!--                          :hide-after="0"-->
-                          popper-class="breadcrumb__popper"
+            <!--                          :show-after="0"-->
-                          trigger="click">
+            <!--                          popper-class="breadcrumb__popper"-->
-                <template #reference>
+            <!--                          trigger="click">-->
-                  <div class="breadcrumb-button"  id="breadcrumbButton2" :class="showBackground?'breadcrumb-button__active':''"  v-if="route.indexOf('detection') > -1">
+            <!--                <template #reference>-->
-                    <span id="breadcrumbValue2"> {{item}}</span><i class="cn-icon-xiala cn-icon"></i>
+            <!--                  <div class="breadcrumb-button"  id="breadcrumbButton2" :class="showBackground?'breadcrumb-button__active':''"  v-if="route.indexOf('detection') > -1">-->
-                  </div>
+            <!--                    <span id="breadcrumbValue2"> {{item}}</span><i class="cn-icon-xiala cn-icon"></i>-->
-                </template>
+            <!--                  </div>-->
-                <el-row type="flex" justify="center" style="width: fit-content;flex-direction: column;">
+            <!--                </template>-->
-                  <ul class="select-dropdown" id="breadcrumbSelectDropdown2">
+            <!--                <el-row type="flex" justify="center" style="width: fit-content;flex-direction: column;">-->
-                    <li v-for="item in detectionMenuList" title='' :key="item.name" :id="item.name" class="select-dropdown__item" @click="jump(item.path,'','',2)">
+            <!--                  <ul class="select-dropdown" id="breadcrumbSelectDropdown2">-->
-                      <span>{{$t(item.i18n)}}</span>
+            <!--                    <li v-for="item in detectionMenuList" title='' :key="item.name" :id="item.name" class="select-dropdown__item" @click="jump(item.path,'','',2)">-->
-                    </li>
+            <!--                      <span>{{$t(item.i18n)}}</span>-->
-                  </ul>
+            <!--                    </li>-->
-                </el-row>
+            <!--                  </ul>-->
-              </el-popover>
+            <!--                </el-row>-->
-            </div>
+            <!--              </el-popover>-->
            <!--            </div>-->
          </template>
          <template v-else>
-            <span>{{item}}</span>
+            <span>{{ item }}</span>
          </template>
        </el-breadcrumb-item>
      </el-breadcrumb>
@@ -122,22 +149,26 @@
      <div class="cn-menu__left">
        <div class="left-menu" v-for="menu in otherMenu" :key="menu.id" @click="jump(menu.route,'','',0)">
          <i :class="menu.icon"></i>
-          <span>{{$t(menu.i18n || menu.name)}}</span>
+          <span>{{ $t(menu.i18n || menu.name) }}</span>
          <i class="cn-icon cn-icon-right"></i>
        </div>
      </div>
      <div class="cn-menu__middle">
        <div class="middle-menus middle-menus--network-analytics">
-          <div class="middle-menus__header">{{$t('overall.networkAnalytics')}}</div>
+          <div class="middle-menus__header">{{ $t('overall.networkAnalytics') }}</div>
          <div class="middle-menus__body">
            <div style="width: 260px;">
              <template v-for="(menu, index) in networkAnalyticsMenu.children" :key="index">
-                <div class="middle-menu" v-if="index < 5" @click="jump(menu.route,'','',2)">{{$t(menu.i18n || menu.name)}}</div>
+                <div class="middle-menu" v-if="index < 5" @click="jump(menu.route,'','',2)">
                  {{ $t(menu.i18n || menu.name) }}
                </div>
              </template>
            </div>
            <div>
              <template v-for="(menu, index) in networkAnalyticsMenu.children" :key="index">
-                <div class="middle-menu" v-if="index >= 5 && index < 10" @click="jump(menu.route,'','',2)">{{$t(menu.i18n || menu.name)}}</div>
+                <div class="middle-menu" v-if="index >= 5 && index < 10" @click="jump(menu.route,'','',2)">
                  {{ $t(menu.i18n || menu.name) }}
                </div>
              </template>
            </div>
          </div>
@@ -149,12 +180,12 @@
    <el-dialog v-model="showChangePin"
               width="30%"
               :before-close="handleClose">
-      <el-form  :rules="changePassFormRules" :model="changePassForm" ref="changePassForm">
+      <el-form :rules="changePassFormRules" :model="changePassForm" ref="changePassForm">
        <el-row :gutter="20">
-            <el-col :span="24">
+          <el-col :span="24">
-              <el-form-item :label="$t('overall.currentPassword')" prop="oldPwd">
+            <el-form-item :label="$t('overall.currentPassword')" prop="oldPwd">
-                <el-input v-model="changePassForm.oldPwd" type="password"></el-input>
+              <el-input v-model="changePassForm.oldPwd" type="password"></el-input>
-              </el-form-item>
+            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('overall.newPassword')" prop="newPwd">
@@ -170,8 +201,8 @@
      </el-form>
      <template #footer>
        <span class="dialog-footer">
-          <el-button @click="showChangePin = false">{{$t('overall.cancel')}}</el-button>
+          <el-button @click="showChangePin = false">{{ $t('overall.cancel') }}</el-button>
-          <el-button type="primary" @click="submit">{{$t('overall.update')}}</el-button>
+          <el-button type="primary" @click="submit">{{ $t('overall.update') }}</el-button>
        </span>
      </template>
    </el-dialog>
@@ -179,24 +210,29 @@
 </template>
 <script>
 import { useRoute } from 'vue-router'
 import { get, put } from '@/utils/http'
 import {
  curTabState,
  dbDrilldownTableConfig,
  entityType,
  networkOverviewSearchUrl,
  networkOverviewTabList,
  networkTable,
  operationType,
  storageKey,
-  wholeScreenRouterMapping
+  wholeScreenRouterMapping,
  fromRoute
 } from '@/utils/constants'
 import { api } from '@/utils/api'
 import { ref } from 'vue'
-import { combineTabList, getDefaultCurTab, getTabList, overwriteUrl, urlParamsHandler } from '@/utils/tools'
+import {
  combineTabList,
  getDefaultCurTab,
  getTabList,
  overwriteUrl,
  urlParamsHandler,
  combineDrilldownTableWithUserConfig,
  getDnsMapData,
  handleSpecialValue
 } from '@/utils/tools'
 import { getNowTime, getSecond } from '@/utils/date-util'
 import { db } from '@/indexedDB'
 export default {
  name: 'Header',
@@ -219,17 +255,37 @@ export default {
        newPwd2: ''
      },
      changePassFormRules: {
-        oldPwd: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
+        oldPwd: [{
-        newPwd: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
+          required: true,
-        newPwd2: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }, { validator: passwordComparison, trigger: 'blur' }]
+          message: this.$t('validate.required'),
          trigger: 'blur'
        }],
        newPwd: [{
          required: true,
          message: this.$t('validate.required'),
          trigger: 'blur'
        }],
        newPwd2: [{
          required: true,
          message: this.$t('validate.required'),
          trigger: 'blur'
        }, {
          validator: passwordComparison,
          trigger: 'blur'
        }]
      },
      showMenu: false,
      dropDownValue: '',
      breadcrumbColumnValueListShow: [],
      curTabProp: '',
      dnsRcodeMapData: new Map(),
      dnsQtypeMapData: new Map(),
      isDnsMapType: false,
      valueMeta: [],
      showBackground: false,
      selected: false,
      valueMenuId: '',
      fromRoute: fromRoute,
      detectionMenuList: [
        {
          name: 'securityEvents',
@@ -245,7 +301,8 @@ export default {
      curPageNum: 1,
      curTabState: curTabState,
      urlChangeParams: {},
-      wholeScreenRouterMapping
+      wholeScreenRouterMapping,
      logo: '' // 此处logo的url未被初始化，可能后续会改动
    }
  },
  computed: {
@@ -270,12 +327,24 @@ export default {
    },
    breadcrumb () {
      const breadcrumbMap = []
      this.curTabProp = this.$route.query.dimensionType ? this.$route.query.dimensionType : null
      this.$store.getters.menuList.forEach(menu => {
        if (this.$_.isEmpty(menu.children) && menu.route) {
-          breadcrumbMap.push({ name: this.$t(menu.i18n), path: menu.route, columnName: menu.columnName, columnValue: menu.columnValue })
+          breadcrumbMap.push({
            name: this.$t(menu.i18n),
            path: menu.route,
            columnName: menu.columnName,
            columnValue: menu.columnValue
          })
        } else if (!this.$_.isEmpty(menu.children)) {
          menu.children.forEach(child => {
-            breadcrumbMap.push({ name: child.i18n ? this.$t(child.i18n) : child.name, parentName: menu.i18n ? this.$t(menu.i18n) : menu.name, path: child.route, columnName: child.columnName, columnValue: child.columnValue })
+            breadcrumbMap.push({
              name: child.i18n ? this.$t(child.i18n) : child.name,
              parentName: menu.i18n ? this.$t(menu.i18n) : menu.name,
              path: child.route,
              columnName: child.columnName,
              columnValue: child.columnValue
            })
          })
        }
      })
@@ -310,16 +379,42 @@ 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')
        }
      }
    }
  },
-  mounted () {
+  async mounted () {
    this.from = Object.keys(this.entityType)[0]
    // 是否需要dns的qtype和rcode的数据字典
    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()
  },
  setup () {
    const dateRangeValue = 60
-    const { startTime, endTime } = getNowTime(dateRangeValue)
+    const {
-    const chartTimeFilter = ref({ startTime, endTime, dateRangeValue })
+      startTime,
      endTime
    } = getNowTime(dateRangeValue)
    const chartTimeFilter = ref({
      startTime,
      endTime,
      dateRangeValue
    })
    return {
      chartTimeFilter,
      entityType // 所有entity类型，用于header下拉框选择
@@ -350,14 +445,25 @@ export default {
        window.location.reload()
      })
    },
-    initDropdownList () {
+    getCurTabByLabel (label) {
      let curTab = null
      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)
      }
      return curTab
    },
    async initDropdownList () {
      // 是否需要dns的qtype和rcode的数据字典
      this.curTabProp = this.$route.query.dimensionType ? this.$route.query.dimensionType : null
      const currentValue = document.getElementById('breadcrumbValue') ? document.getElementById('breadcrumbValue').innerText : ''
      const columnName = this.getUrlParam(this.curTabState.thirdMenu, '')
      let type = 'ip'
      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
        }
@@ -369,14 +475,32 @@ export default {
        type: type,
        name: this.dropDownValue ? this.dropDownValue : ''
      }
-      get(curTableInCode.url.drilldownList, params).then(response => {
+      // 有的界面刷新时没有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.$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 => {
              const selectedDom = document.getElementById(item)
              if (selectedDom) {
-                if (item === currentValue) {
+                let itemName = item
                if (this.curTabProp === 'qtype') {
                  itemName = this.dnsQtypeMapData.get(item)
                } else if (this.curTabProp === 'rcode') {
                  itemName = this.dnsRcodeMapData.get(item)
                }
                if (itemName === currentValue) {
                  selectedDom.style.cssText = 'color:#0091ff;font-weight: bold;'
                } else {
                  selectedDom.style.cssText = ''
@@ -407,32 +531,34 @@ export default {
    },
    changeValue (value) {
      // 设置面包屑显示的内容及hover时的title
      let valName = value
      if (this.tab === 'qtype') {
        valName = this.dnsQtypeMapData.get(value)
      } else if (this.tab === 'rcode') {
        valName = this.dnsRcodeMapData.get(value)
      }
      this.curTabProp = this.$route.query.dimensionType ? this.$route.query.dimensionType : null
      document.getElementById('breadcrumbValue').innerText = value
-      document.getElementById('breadcrumbButton').setAttribute('title', value)
+      document.getElementById(this.valueMenuId).setAttribute('title', valName)
      document.getElementById(this.valueMenuId).setAttribute('title', value)
      document.getElementById('breadcrumbButton').click()
      // const columnName = this.$store.getters.getBreadcrumbColumnName
      const columnName = this.getUrlParam(this.curTabState.thirdMenu, '')
-      const tabObjGroup = networkOverviewTabList.filter(item => item.label == columnName)
+      const curTab = this.getCurTabByLabel(columnName)
-      if (tabObjGroup && tabObjGroup.length > 0) {
+      if (curTab) {
-        const curTab = tabObjGroup[0]
+        const queryCondition = []
-        if (curTab) {
+        const searchProps = curTab.dillDownProp
-          const queryCondition = []
+        if (curTab.prop === 'protocolPort') {
-          const searchProps = curTab.dillDownProp
+          const valueGroup = value.split(':')
-          if (curTab.prop === 'protocolPort') {
+          if (valueGroup) {
-            const valueGroup = value.split(':')
+            queryCondition.push('common_l7_protocol=\'' + valueGroup[0] + '\'')
-            if (valueGroup) {
+            queryCondition.push('common_server_port=' + valueGroup[1])
              queryCondition.push("common_l7_protocol='" + valueGroup[0] + "'")
              queryCondition.push('common_server_port=' + valueGroup[1])
            }
            console.log(queryCondition.join(' AND '))
            this.urlChangeParams[this.curTabState.queryCondition] = queryCondition.join(' AND ')
          } else {
            searchProps.forEach(item => {
              queryCondition.push(item + "='" + value + "'")
            })
            this.urlChangeParams[this.curTabState.queryCondition] = queryCondition.join(' OR ')
          }
          console.log(queryCondition.join(' AND '))
          this.urlChangeParams[this.curTabState.queryCondition] = queryCondition.join(' AND ')
        } else {
          searchProps.forEach(item => {
            queryCondition.push(item + '=\'' + handleSpecialValue(value) + '\'')
          })
          this.urlChangeParams[this.curTabState.queryCondition] = queryCondition.join(' OR ')
        }
      }
      this.changeUrlTabState()
@@ -444,7 +570,10 @@ export default {
    submit () {
      this.$refs.changePassForm.validate((valid) => {
        if (valid) {
-          put(api.pin, { oldPin: this.changePassForm.oldPwd, newPin: this.changePassForm.newPwd }).then(res => {
+          put(api.pin, {
            oldPin: this.changePassForm.oldPwd,
            newPin: this.changePassForm.newPwd
          }).then(res => {
            if (res.code === 200) {
              this.$message.success('Success')
              this.showChangePin = false
@@ -465,29 +594,17 @@ export default {
      }
      this.urlChangeParams = {}
    },
-    async handleCurDrilldownTableConfig (thirdMenu, fourthMenu) {
+    async handleCurDrilldownTableConfig (thirdMenu) {
-      const userId = localStorage.getItem(storageKey.userId)
+      // const userId = localStorage.getItem(storageKey.userId)
      const tableType = this.$route.params ? this.$route.params.typeName : 'networkOverview'
-
+      const metric = this.getUrlParam(this.curTabState.tableMetric, 'Bits/s')
-      // 先从localStorage中获取用户定制的自定义配置，如果没有，则使用默认的自定义配置
+      const drillDownTableConfigs = await combineDrilldownTableWithUserConfig()
      const userLocalConfig = await db[dbDrilldownTableConfig].get({ id: userId })
      let drillDownTableConfigs = []
      if (userLocalConfig) {
        drillDownTableConfigs = userLocalConfig.config
      }
      if (!drillDownTableConfigs || drillDownTableConfigs.length === 0) { // 未找到当前用户的配置，使用默认配置
        const defaultConfig = await db[dbDrilldownTableConfig].get({ id: 'default' })
        if (defaultConfig) {
          drillDownTableConfigs = defaultConfig.config
        }
      }
      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)
@@ -499,19 +616,20 @@ export default {
          }
        }
      }
      await db[dbDrilldownTableConfig].put({
        id: userId,
        config: this.$_.cloneDeep(drillDownTableConfigs)
      })
    },
    jump (route, columnName, columnValue, opeType) {
      if (route === '/panel/linkMonitor' && opeType === 3) {
        return true
      }
      this.showMenu = false
      const menus = this.breadcrumb
      if (opeType) {
        this.urlChangeParams[this.curTabState.tabOperationBeforeType] = this.getUrlParam(this.curTabState.tabOperationType, '', true)
        this.urlChangeParams[this.curTabState.tabOperationType] = opeType
        if (opeType === 3) {
-          this.urlChangeParams.queryCondition = ''
+          if (route !== '/panel/networkOverview') {
            this.urlChangeParams.queryCondition = ''
          }
        }
      } else {
        this.urlChangeParams[this.curTabState.tabOperationType] = operationType.mainMenu
@@ -519,7 +637,6 @@ export default {
      if (!columnName) { // 点击第二级菜单
        this.$store.commit('setNetworkOverviewTabList', [])
      }
      // 清空网络概况的特殊面包屑
      this.$store.getters.menuList.forEach(menu => {
        if (!this.$_.isEmpty(menu.children)) {
@@ -530,9 +647,11 @@ export default {
                child.columnName = columnName
                this.urlChangeParams[this.curTabState.thirdMenu] = columnName
                this.urlChangeParams[this.curTabState.fourthMenu] = columnValue
-                const tabObjGroup = networkOverviewTabList.filter(item => item.label == columnName)
+                // const tabObjGroup = networkOverviewTabList.filter(item => item.label == columnName)
-                const type = tabObjGroup && tabObjGroup[0] ? tabObjGroup[0].prop : ''
+                // let curTab = this.getCurTabByLabel()
-                this.urlChangeParams[this.curTabState.dimensionType] = type
+                // const type = curTab ? curTab.prop : ''
                // this.curTabProp = this.$route.query.dimensionType ? this.$route.query.dimensionType : null
                // this.urlChangeParams[this.curTabState.dimensionType] = type
                this.urlChangeParams[this.curTabState.panelName] = columnValue
              } else if (columnName) { // 点击的为列名
                child.columnValue = ''
@@ -569,11 +688,20 @@ export default {
        })
      } else if (opeType === 3) {
        this.$router.push({
-          query: { ...this.$route.query, fourthPanel: '', t: +new Date() }
+          query: {
            ...this.$route.query,
            fourthPanel: '',
            t: +new Date()
          }
        })
-      } else if (opeType != 4) {
+      } else if (opeType !== 4) {
        this.$router.push({
-          query: { ...this.$route.query, fourthPanel: '', thirdPanel: '', t: +new Date() }
+          query: {
            ...this.$route.query,
            fourthPanel: '',
            thirdPanel: '',
            t: +new Date()
          }
        })
      }
      if (route === this.route) {
--- a/src/components/rightBox/report/ReportBox.vue
+++ b/src/components/rightBox/report/ReportBox.vue
@@ -74,6 +74,9 @@
                    size="small"
                    :format="dateFormat"
                    :disabled="!!editObject.id"
                    :disabled-date="startDisabledDate"
                    @change="startTimeChang"
                    @focus="startFocus"
                    prefix-icon="cn-icon cn-icon-shijian"
                    type="datetime"
                    placeholder=" "
@@ -91,6 +94,9 @@
                    size="small"
                    :format="dateFormat"
                    :disabled="!!editObject.id"
                    :disabled-date="endDisabledDate"
                    @change="endTimeChange"
                    @focus="endFocus"
                    prefix-icon="cn-icon cn-icon-shijian"
                    type="datetime"
                    placeholder=" "
@@ -277,6 +283,7 @@ import { api } from '@/utils/api'
 import _ from 'lodash'
 import { get, post, put } from '@/utils/http'
 import { dateFormat, getMillisecond } from '@/utils/date-util'
 import { ref } from 'vue'
 const paramValidator = (rule, value, callback) => {
  let validate = true
  if (value && value.length > 0) {
@@ -305,6 +312,58 @@ export default {
    categoryList: Array,
    currentCategoryId: Number
  },
  setup () {
    const startTime = ref('')
    const endTime = ref('')
    const focus = ref('')
    const focusDate = ref('')
    function endTimeChange (val) {
      endTime.value = val
    }
    function startTimeChang (val) {
      startTime.value = val
    }
    function startFocus (val) {
      focus.value = val.target.value
    }
    function endFocus (val) {
      focusDate.value = val.target.value
    }
    const endDisabledDate = (time) => {
      if (time.getTime() > new Date()) {
        return true
      }
      if (startTime.value != '' && startTime.value > time) {
        return true
      }
      if (focusDate.value != '' && endTime.value > time) {
        return false
      } else if (endTime.value != '' && endTime.value < time) {
        return true
      }
    }
    const startDisabledDate = (time) => {
      if (time.getTime() > new Date()) {
        return true
      }
      if (focus.value != '' && startTime.value > time) {
        return false
      } else if (startTime.value != '' && startTime.value > time) {
        return true
      }
      if (endTime.value != '' && endTime.value < time) {
        return true
      }
    }
    return {
      endDisabledDate,
      startDisabledDate,
      startTimeChang,
      endTimeChange,
      startFocus,
      endFocus
    }
  },
  data () {
    return {
      url: api.reportTemp,
--- a/src/components/table/report/builtinReportTable.vue
+++ b/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>
--- a/src/components/table/report/reportTestTable.vue
+++ b/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 }"
@@ -19,7 +19,6 @@
      <el-table-column type="expand" width="30">
        <template #default="props">
          <div class="down">
            <loading :loading="loadingDown"></loading>
            <div class="block drop-down-time">
              <el-date-picker
                  v-model="timeRange"
@@ -34,6 +33,7 @@
              />
            </div>
            <div class="expand">
              <loading :loading="loadingDown"></loading>
              <chart-no-data v-if="downDataList.length === 0 && !loadingDown"></chart-no-data>
              <div class="expand-cell" v-for="(item, index) in downDataList" :key="index">
                <div class="expand-right">
--- a/src/i18n/index.js
+++ b/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'
--- a/src/jest.config.js
+++ b/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>']
 }
--- a/src/main.js
+++ b/src/main.js
@@ -9,7 +9,7 @@ import commonMixin from '@/mixins/common'
 import { cancelWithChange, noData } from '@/utils/tools'
 import { ClickOutside } from 'element-plus/lib/directives'
 import i18n from '@/i18n'
-import '@/mock/index.js'
+// import '@/mock/index.js'
 import hljsVuePlugin from '@highlightjs/vue-plugin'
 import 'highlight.js/styles/color-brewer.css'
 import '@/assets/css/main.scss' // 样式入口
@@ -20,18 +20,13 @@ import bus from 'tiny-emitter'
 import DateTimeRange from '@/components/common/TimeRange/DateTimeRange'
 import TimeRefresh from '@/components/common/TimeRange/TimeRefresh'
 import PanelChartList from '@/views/charts/PanelChartList'
 import Error from '@/components/common/Error'
 import 'lib-flexible'
 const emitter = new bus()
 const _ = require('lodash') // lodash工具
 /* dayjs.extend(utc)
 dayjs.extend(timezone)
 dayjs.extend(advancedFormat)
 dayjs.extend(weekday)
 window.$dayJs = dayjs */
 const app = createApp(App)
 app.use(router)
@@ -52,6 +47,7 @@ app.mixin(commonMixin)
 app.component('date-time-range', DateTimeRange)
 app.component('time-refresh', TimeRefresh)
 app.component('panel-chart-list', PanelChartList)
 app.component('chart-error', Error)
 app.mount('#app')
--- a/src/mixins/data-list.js
+++ b/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()
  }
 }
--- a/src/mock/npm.js
+++ b/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",
+      msg: 'success',
-      "code": 200,
+      code: 200,
-      "data": {
+      data: {
-        "total": 1,
+        total: 1,
-        "pageSize": 10,
+        pageSize: 10,
-        "pages": 1,
+        pages: 1,
-        "pageNo": 1,
+        pageNo: 1,
-        "list": [
+        list: [
          {
-            "id": 2,
+            id: 2,
-            "name": "Network & App",
+            name: 'Network & App',
-            "i18n": "npm.npm",
+            i18n: 'npm.npm',
-            "type": 2,
+            type: 2,
-            "params": "",
+            params: '',
-            "cby": 1,
+            cby: 1,
-            "ctime": "2021-06-03 08:27:32",
+            ctime: '2021-06-03 08:27:32',
-            "uby": 1,
+            uby: 1,
-            "utime": "2021-06-03 08:28:10",
+            utime: '2021-06-03 08:28:10',
-            "remark": "",
+            remark: '',
-            "state": 1,
+            state: 1,
-            "buildIn": 1
+            buildIn: 1
          }
        ]
      }
--- a/src/router/index.js
+++ b/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')
          }
        ]
      }
    ]
  }
--- a/src/store/modules/panel.js
+++ b/src/store/modules/panel.js
@@ -51,7 +51,15 @@ const panel = {
    npmLocationCountry: '', // npm location的查询条件--国家
    npmLocationSide: 'server', // npm location的查询条件--方向
    refreshTime: null, // 自动刷新时间的秒数
-    refreshFlag: true // 关闭自动刷新标志，true为off，false即开启自动刷新
+    refreshFlag: true, // 关闭自动刷新标志，true为off，false即开启自动刷新
    timeRangeArray: [], // 时间范围列表：开始/结束时间
    timeRangeFlag: null, // 时间范围标志，默认60即一小时，-1为手动选择的时间范围
    routerPath: '', // 当前路由路径
    httpCancel: null, // 终止http请求
    rangeEchartsData: {}, // 框选echarts图表
    routerHistoryList: [], // 路由跳转记录列表
    dnsQtypeMapData: [],
    dnsRcodeMapData: []
  },
  mutations: {
    setShowRightBox (state, flag) {
@@ -102,36 +110,15 @@ const panel = {
    setCurrentMap (state, currentMap) {
      state.currentMap = currentMap
    },
-    // setPanelName (state, panelName) {
+    setDnsQtypeMapData (state, dnsQtypeMapData) {
-    // state.panelName = panelName
+      state.dnsQtypeMapData = dnsQtypeMapData
-    // },
+    },
-    // setBreadcrumbColumnName (state, breadcrumbColumnName) {
+    setDnsRcodeMapData (state, dnsRcodeMapData) {
-    // state.breadcrumbColumnName = breadcrumbColumnName
+      state.dnsRcodeMapData = dnsRcodeMapData
-    // },
+    },
    // setDimensionType (state, dimensionType) {
    // state.dimensionType = dimensionType
    // },
    // setBreadcrumbColumnValue (state, breadcrumbColumnValue) {
    // state.breadcrumbColumnValue = breadcrumbColumnValue
    // },
    // setNetworkOverviewCurrentTab (state, networkOverviewCurrentTab) {
    // state.networkOverviewCurrentTab = networkOverviewCurrentTab
    // },
    // setQueryCondition (state, queryCondition) {
    // state.queryCondition = queryCondition
    // },
    setNetworkOverviewTabList (state, networkOverviewTabList) {
      state.networkOverviewTabList = networkOverviewTabList
    },
    // setTabOperationType (state, tabOperationType) {
    // state.tabOperationType = tabOperationType
    // },
    // setNetworkOverviewBeforeTab (state, networkOverviewBeforeTab) {
    // state.networkOverviewBeforeTab = networkOverviewBeforeTab
    // },
    // setTabOperationBeforeType (state, tabOperationBeforeType) {
    // state.tabOperationBeforeType = tabOperationBeforeType
    // },
    setNpmLocationCountry (state, country) {
      state.npmLocationCountry = country
    },
@@ -146,6 +133,24 @@ const panel = {
    },
    setRefreshFlag (state, flag) {
      state.refreshFlag = flag
    },
    setTimeRangeArray (state, array) {
      state.timeRangeArray = array
    },
    setTimeRangeFlag (state, flag) {
      state.timeRangeFlag = flag
    },
    setRouterPath (state, path) {
      state.routerPath = path
    },
    setHttpCancel (state, cancel) {
      state.httpCancel = cancel
    },
    setRangeEchartsData (state, data) {
      state.rangeEchartsData = data
    },
    setRouterHistoryList (state, list) {
      state.routerHistoryList = list
    }
  },
  getters: {
@@ -191,36 +196,15 @@ const panel = {
    getCurrentMap (state) {
      return state.currentMap
    },
-    // getPanelName (state) {
+    getDnsQtypeMapData (state) {
-    // return state.panelName
+      return state.dnsQtypeMapData
-    // },
+    },
-    // getBreadcrumbColumnName (state) {
+    getDnsRcodeMapData (state) {
-    // return state.breadcrumbColumnName
+      return state.dnsRcodeMapData
-    // },
+    },
    // getDimensionType (state) {
    // return state.dimensionType
    // },
    // getBreadcrumbColumnValue (state) {
    // return state.breadcrumbColumnValue
    // },
    // getNetworkOverviewCurrentTab (state) {
    // return state.networkOverviewCurrentTab
    // },
    // getQueryCondition (state) {
    // return state.queryCondition
    // },
    getNetworkOverviewTabList (state) {
      return state.networkOverviewTabList
    },
    // getTabOperationType (state) {
    // return state.tabOperationType
    // },
    // getNetworkOverviewBeforeTab (state) {
    // return state.networkOverviewBeforeTab
    // },
    // getTabOperationBeforeType (state) {
    // return state.tabOperationBeforeType
    // },
    getNpmLocationCountry (state) {
      return state.npmLocationCountry
    },
@@ -229,6 +213,18 @@ const panel = {
    },
    getNpmThirdLevelMenuScore (state) {
      return state.npmThirdLevelMenuScore
    },
    getTimeRangeArray (state) {
      return state.timeRangeArray
    },
    getTimeRangeFlag (state) {
      return state.timeRangeFlag
    },
    getRouterPath (state) {
      return state.routerPath
    },
    getRouterHistoryList (state) {
      return state.routerHistoryList
    }
  },
  actions: {
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -3,6 +3,7 @@ import router from '@/router'
 import { sortByOrderNum, getWelcomeMenu } from '@/permission'
 import { ElMessage } from 'element-plus' // dependent on utc plugin
 import { storageKey, dbDrilldownTableConfig } from '@/utils/constants'
 import { getConfigVersion } from '@/utils/tools'
 import { api } from '@/utils/api'
 import { db } from '@/indexedDB'
@@ -11,7 +12,8 @@ const user = {
    return {
      menuList: [],
      buttonList: [],
-      roleList: []
+      roleList: [],
      drilldownTableConfigList: []
    }
  },
  mutations: {
@@ -24,6 +26,9 @@ const user = {
    setRoleList (state, roleList) {
      state.roleList = [...roleList]
    },
    setDrilldownTableList (state, drilldownTableConfigList) {
      state.drilldownTableConfigList = [...drilldownTableConfigList]
    },
    clean (state) {
      state.menuList = []
      state.buttonList = []
@@ -39,6 +44,9 @@ const user = {
    },
    roleList (state) {
      return state.roleList
    },
    drilldownTableConfigList (state) {
      return state.drilldownTableConfigList
    }
  },
  actions: {
@@ -56,9 +64,9 @@ const user = {
          if (tempArr[1]) {
            tempArr = tempArr[1].split('&')
            tempArr.forEach(t => {
-              let firstEqualIndex = t.indexOf('=')
+              const firstEqualIndex = t.indexOf('=')
-              let key = t.substring(0, firstEqualIndex)
+              const key = t.substring(0, firstEqualIndex)
-              let value = t.substring(firstEqualIndex + 1)
+              const value = t.substring(firstEqualIndex + 1)
              query[key] = value
            })
          }
@@ -82,13 +90,18 @@ const user = {
      })
      get(api.config, { ckey: 'drill_down_table_config' }).then(async res => {
        if (res.code === 200 && res.page.list && res.page.list.length > 0) {
          // 从接口返回整体配置，再读取用户缓存，将对应条目覆盖，作为使用的配置
          const defaultConfigs = JSON.parse(res.page.list[0].cvalue)
          await db[dbDrilldownTableConfig].put({
            id: 'default',
-            config: JSON.parse(res.page.list[0].cvalue)
+            version: defaultConfigs.version,
            config: defaultConfigs.config
          })
-          // const a = await db[dbDrilldownTableConfig].get({ id: 'default' })
+          const userId = localStorage.getItem(storageKey.userId)
-          // console.info(a)
+          const oldVersion = await getConfigVersion(userId)
-          // localStorage.setItem(storageKey.drillDownTableConfig, res.page.list[0].cvalue)
+          if (oldVersion !== defaultConfigs.version) {
            db[dbDrilldownTableConfig].delete(userId)
          }
        }
      })
      get(api.config, { ckey: 'link_info' }).then(res => {
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -161,12 +161,19 @@ export const api = {
      appSslConDelay: '/interface/application/performance/overview/appSslConDelay',
      appTcpLostlenPercent: '/interface/application/performance/overview/appTcpLostlenPercent',
      appPacketRetransPercent: '/interface/application/performance/overview/appPacketRetransPercent',
      // 整体流量折线图
      totalTrafficAnalysis: '/interface/application/performance/overview/totalTrafficAnalysis',
      totalNetworkAnalysis: '/interface/application/performance/overview/totalNetworkAnalysis',
      totalHttpResponseDelay: '/interface/application/performance/overview/totalHttpResponseDelay',
      totalSslConDelay: '/interface/application/performance/overview/totalSslConDelay',
      // 各维度下钻会话统计
      relatedSessions: '/interface/application/performance/relatedSessions',
      // 各维度下钻流量曲线图
      trafficGraph: '/interface/application/performance/overview/drilldown/drilldown/dimension/trafficGraph',
      // 各维度下钻网络性能
      networkAnalysis: '/interface/application/performance/overview/drilldown/dimension/networkAnalysis',
      // 各维度下钻网络性能 三级菜单
      allNetworkAnalysis: '/interface/application/performance/overview/drilldown/dimension/allNetworkAnalysis',
      // 下钻地图
      map: '/interface/application/performance/overview/drilldown/dimension/clientLocations/world/trafficAnalysis',
      mapTcp: '/interface/application/performance/overview/drilldown/dimension/clientLocations/world/tcpSessionDelay',
@@ -220,7 +227,8 @@ export const api = {
    recentEvents: '/interface/dnsInsight/recentEvents',
    activeMaliciousDomain: '/interface/dnsInsight/activeMaliciousDomain',
    totalTrafficAnalysis: '/interface/dns/overview/totalTrafficAnalysis',
-    eventChart: '/interface/dnsInsight/eventChart'
+    eventChart: '/interface/dnsInsight/eventChart',
    drilldownTrafficAnalysis: '/interface/dns/overview/drilldown/trafficAnalysis'
  }
 }
--- a/src/utils/constants.js
+++ b/src/utils/constants.js
@@ -31,7 +31,7 @@ export const storageKey = {
  echartLegendFontSize: 'echartLegendFontSize',
  echartLabelFontSize: 'echartLabelFontSize',
  tokenExpireCurrentPath: 'token-expire-current-path',
-  drillDownTableConfig: 'cn-drill-down-table-config',
+  drillDownTableConfig: 'drilldownTableConfig',
  userCustomizationConfig: 'userCustomizationConfig',
  linkInfo: 'cn-link-info',
  history: 'cn-history'
@@ -186,6 +186,21 @@ export const networkOverviewTabs = [
  'network.protocolPorts'
 ] */
 export const metricOptions = [
  {
    value: 'Bits/s',
    label: 'Bits/s'
  },
  {
    value: 'Packets/s',
    label: 'Packets/s'
  },
  {
    value: 'Sessions/s',
    label: 'Sessions/s'
  }
 ]
 export const operationType = {
  mainMenu: 0, // 菜单
  secondMenu: 2, // 二级菜单
@@ -276,7 +291,8 @@ export const curTabState = {
  fourthPanel: 'fourthPanel',
  networkOverviewBeforeTab: 'networkOverviewBeforeTab',
  tabOperationType: 'tabOperationType',
-  tabOperationBeforeType: 'tabOperationBeforeType'
+  tabOperationBeforeType: 'tabOperationBeforeType',
  tabIndex: 'tabIndex'
 }
 export const scoreUrl = [
@@ -287,11 +303,11 @@ export const scoreUrl = [
 // AppPerformance类型表格的列：有属性cycleDataUrl的，代表此数据的来源为对应接口返回的数据，无cycleDataUrl的属性代表数据来源于主url：npmSearchUrl.curUrl、npmSearchUrl.cycleUrl、npmSearchUrl.drilldownCurUrl、npmSearchUrl.drilldownCycleUrl
 export const customTableTitlesForAppPerformance = [
-  { label: 'network.ips', prop: 'tab', checked: true, tabColumn: true, columnType: tableColumnType.dillDown },
+  { label: 'IP', prop: 'tab', checked: true, tabColumn: true, columnType: tableColumnType.dillDown },
  { label: 'network.score', prop: 'score', checked: true, tabColumn: false, columnType: tableColumnType.normal },
  {
    label: 'networkAppPerformance.throughput',
-    prop: 'through',
+    prop: 'totalBytes',
    checked: true,
    tabColumn: false,
    columnType: tableColumnType.chainRatio,
@@ -375,11 +391,11 @@ export const customTableTitlesForAppPerformance = [
  }
 ]
 export const customTableTitlesForLinkMonitor = [
-  { label: 'network.ips', prop: 'tab', checked: true, tabColumn: true, columnType: tableColumnType.dillDown },
+  { label: 'IP', prop: 'tab', checked: true, tabColumn: true, columnType: tableColumnType.dillDown },
  { label: 'network.score', prop: 'score', checked: true, tabColumn: false, columnType: tableColumnType.normal },
  {
    label: 'networkAppPerformance.throughput',
-    prop: 'through',
+    prop: 'totalBytes',
    checked: true,
    tabColumn: false,
    columnType: tableColumnType.chainRatio,
@@ -479,7 +495,7 @@ export const customTableTitlesForDns = [
 ]
 // NetworkOverview类型表格的列:prop 为接口响应数据中的属性名
 export const customTableTitlesForNetworkOverview = [
-  { label: 'network.ips', prop: 'tab', checked: true, tabColumn: true, columnType: tableColumnType.dillDown },
+  { label: 'IP', prop: 'tab', checked: true, tabColumn: true, columnType: tableColumnType.dillDown },
  {
    label: 'network.total',
    prop: 'total',
@@ -637,6 +653,118 @@ export const networkOverviewTabList = [
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.networkOverview
  }, {
    label: 'network.clientIps',
    prop: 'clientIp',
    queryCycleTotalProp: 'clientIps',
    dillDownProp: ['common_client_ip'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.networkOverview
  }, {
    label: 'network.serverIps',
    prop: 'serverIp',
    queryCycleTotalProp: 'serverIps',
    dillDownProp: ['common_server_ip'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.networkOverview
  }, {
    label: 'network.clientCountries',
    prop: 'clientCountry',
    queryCycleTotalProp: 'clientCountries',
    dillDownProp: ['client_country'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.networkOverview
  }, {
    label: 'network.serverCountries',
    prop: 'serverCountry',
    queryCycleTotalProp: 'serverCountries',
    dillDownProp: ['server_country'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.networkOverview
  }, {
    label: 'network.clientProvinces',
    prop: 'clientProvince',
    queryCycleTotalProp: 'clientProvinces',
    dillDownProp: ['client_province'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.networkOverview
  }, {
    label: 'network.serverProvinces',
    prop: 'serverProvince',
    queryCycleTotalProp: 'serverProvinces',
    dillDownProp: ['server_province'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.networkOverview
  }, {
    label: 'network.clientCities',
    prop: 'clientCity',
    queryCycleTotalProp: 'clientCities',
    dillDownProp: ['client_region'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.networkOverview
  }, {
    label: 'network.serverCities',
    prop: 'serverCity',
    queryCycleTotalProp: 'serverCities',
    dillDownProp: ['server_region'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.networkOverview
  }, {
    label: 'network.clientIsps',
    prop: 'clientIsp',
    queryCycleTotalProp: 'clientIsps',
    dillDownProp: ['client_isp'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.networkOverview
  }, {
    label: 'network.serverIsps',
    prop: 'serverIsp',
    queryCycleTotalProp: 'serverIsps',
    dillDownProp: ['server_isp'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.networkOverview
  }, {
    label: 'network.clientIdcRenters',
    prop: 'clientIdcRenter',
    queryCycleTotalProp: 'clientIdcRenters',
    dillDownProp: ['client_idc_renter'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.networkOverview
  }, {
    label: 'network.serverIdcRenters',
    prop: 'serverIdcRenter',
    queryCycleTotalProp: 'serverIdcRenters',
    dillDownProp: ['server_idc_renter'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.networkOverview
  }, {
    label: 'network.clientAsns',
    prop: 'clientAsn',
    queryCycleTotalProp: 'clientAsns',
    dillDownProp: ['client_asn'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.networkOverview
  }, {
    label: 'network.serverAsns',
    prop: 'serverAsn',
    queryCycleTotalProp: 'serverAsns',
    dillDownProp: ['server_asn'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.networkOverview
  }
 ]
@@ -769,6 +897,118 @@ export const networkAppPerformanceTabList = [
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.npmOverviewCommon
  }, {
    label: 'network.clientIps',
    prop: 'clientIp',
    queryCycleTotalProp: 'clientIps',
    dillDownProp: ['common_client_ip'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.npmOverviewCommon
  }, {
    label: 'network.serverIps',
    prop: 'serverIp',
    queryCycleTotalProp: 'serverIps',
    dillDownProp: ['common_server_ip'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.npmOverviewCommon
  }, {
    label: 'network.clientCountries',
    prop: 'clientCountry',
    queryCycleTotalProp: 'clientCountries',
    dillDownProp: ['client_country'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.npmOverviewCommon
  }, {
    label: 'network.serverCountries',
    prop: 'serverCountry',
    queryCycleTotalProp: 'serverCountries',
    dillDownProp: ['server_country'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.npmOverviewCommon
  }, {
    label: 'network.clientProvinces',
    prop: 'clientProvince',
    queryCycleTotalProp: 'clientProvinces',
    dillDownProp: ['client_province'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.npmOverviewCommon
  }, {
    label: 'network.serverProvinces',
    prop: 'serverProvince',
    queryCycleTotalProp: 'serverProvinces',
    dillDownProp: ['server_province'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.npmOverviewCommon
  }, {
    label: 'network.clientCities',
    prop: 'clientCity',
    queryCycleTotalProp: 'clientCities',
    dillDownProp: ['client_region'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.npmOverviewCommon
  }, {
    label: 'network.serverCities',
    prop: 'serverCity',
    queryCycleTotalProp: 'serverCities',
    dillDownProp: ['server_region'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.npmOverviewCommon
  }, {
    label: 'network.clientIsps',
    prop: 'clientIsp',
    queryCycleTotalProp: 'clientIsps',
    dillDownProp: ['client_isp'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.npmOverviewCommon
  }, {
    label: 'network.serverIsps',
    prop: 'serverIsp',
    queryCycleTotalProp: 'serverIsps',
    dillDownProp: ['server_isp'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.npmOverviewCommon
  }, {
    label: 'network.clientIdcRenters',
    prop: 'clientIdcRenter',
    queryCycleTotalProp: 'clientIdcRenters',
    dillDownProp: ['client_idc_renter'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.npmOverviewCommon
  }, {
    label: 'network.serverIdcRenters',
    prop: 'serverIdcRenter',
    queryCycleTotalProp: 'serverIdcRenters',
    dillDownProp: ['server_idc_renter'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.npmOverviewCommon
  }, {
    label: 'network.clientAsns',
    prop: 'clientAsn',
    queryCycleTotalProp: 'clientAsns',
    dillDownProp: ['client_asn'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.npmOverviewCommon
  }, {
    label: 'network.serverAsns',
    prop: 'serverAsn',
    queryCycleTotalProp: 'serverAsns',
    dillDownProp: ['server_asn'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.npmOverviewCommon
  }
 ]
 export const linkMonitorTabList = [
@@ -900,6 +1140,118 @@ export const linkMonitorTabList = [
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.linkMonitor
  }, {
    label: 'network.clientIps',
    prop: 'clientIp',
    queryCycleTotalProp: 'clientIps',
    dillDownProp: ['common_client_ip'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.linkMonitor
  }, {
    label: 'network.serverIps',
    prop: 'serverIp',
    queryCycleTotalProp: 'serverIps',
    dillDownProp: ['common_server_ip'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.linkMonitor
  }, {
    label: 'network.clientCountries',
    prop: 'clientCountry',
    queryCycleTotalProp: 'clientCountries',
    dillDownProp: ['client_country'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.linkMonitor
  }, {
    label: 'network.serverCountries',
    prop: 'serverCountry',
    queryCycleTotalProp: 'serverCountries',
    dillDownProp: ['server_country'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.linkMonitor
  }, {
    label: 'network.clientProvinces',
    prop: 'clientProvince',
    queryCycleTotalProp: 'clientProvinces',
    dillDownProp: ['client_province'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.linkMonitor
  }, {
    label: 'network.serverProvinces',
    prop: 'serverProvince',
    queryCycleTotalProp: 'serverProvinces',
    dillDownProp: ['server_province'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.linkMonitor
  }, {
    label: 'network.clientCities',
    prop: 'clientCity',
    queryCycleTotalProp: 'clientCities',
    dillDownProp: ['client_region'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.linkMonitor
  }, {
    label: 'network.serverCities',
    prop: 'serverCity',
    queryCycleTotalProp: 'serverCities',
    dillDownProp: ['server_region'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.linkMonitor
  }, {
    label: 'network.clientIsps',
    prop: 'clientIsp',
    queryCycleTotalProp: 'clientIsps',
    dillDownProp: ['client_isp'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.linkMonitor
  }, {
    label: 'network.serverIsps',
    prop: 'serverIsp',
    queryCycleTotalProp: 'serverIsps',
    dillDownProp: ['server_isp'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.linkMonitor
  }, {
    label: 'network.clientIdcRenters',
    prop: 'clientIdcRenter',
    queryCycleTotalProp: 'clientIdcRenters',
    dillDownProp: ['client_idc_renter'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.linkMonitor
  }, {
    label: 'network.serverIdcRenters',
    prop: 'serverIdcRenter',
    queryCycleTotalProp: 'serverIdcRenters',
    dillDownProp: ['server_idc_renter'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.linkMonitor
  }, {
    label: 'network.clientAsns',
    prop: 'clientAsn',
    queryCycleTotalProp: 'clientAsns',
    dillDownProp: ['client_asn'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.linkMonitor
  }, {
    label: 'network.serverAsns',
    prop: 'serverAsn',
    queryCycleTotalProp: 'serverAsns',
    dillDownProp: ['server_asn'],
    checked: false,
    disabled: false,
    panelId: drillDownPanelTypeMapping.linkMonitor
  }
 ]
 export const dnsServiceInsightsTabList = [
@@ -953,6 +1305,7 @@ export const dnsServiceInsightsTabList = [
    prop: 'dnsServerRole',
    queryCycleTotalProp: 'roles',
    dillDownProp: ['dns_server_role'],
    queryCondition: ['has(dns_server_role,\'$param\')'],
    checked: true,
    disabled: false,
    panelId: drillDownPanelTypeMapping.dnsFourthMenu
@@ -971,6 +1324,7 @@ export const dnsServiceInsightsTabList = [
    prop: 'sld',
    queryCycleTotalProp: 'slds',
    dillDownProp: ['dns_qname'],
    queryCondition: ['cutToFirstSignificantSubdomain(dns_qname) = \'$param\''],
    checked: true,
    disabled: false,
    panelId: drillDownPanelTypeMapping.dnsFourthMenu
@@ -980,6 +1334,7 @@ export const dnsServiceInsightsTabList = [
    prop: 'tld',
    queryCycleTotalProp: 'tlds',
    dillDownProp: ['dns_qname'],
    queryCondition: [' topLevelDomain(dns_qname) = \'$param\''],
    checked: true,
    disabled: false,
    panelId: drillDownPanelTypeMapping.dnsFourthMenu
@@ -989,6 +1344,7 @@ export const dnsServiceInsightsTabList = [
    prop: 'qtype',
    queryCycleTotalProp: 'qtypes',
    dillDownProp: ['dns_qtype'],
    queryCondition: ['dns_qtype = $param'],
    checked: true,
    disabled: false,
    panelId: drillDownPanelTypeMapping.dnsFourthMenu
@@ -998,6 +1354,7 @@ export const dnsServiceInsightsTabList = [
    prop: 'rcode',
    queryCycleTotalProp: 'rcodes',
    dillDownProp: ['dns_rcode'],
    queryCondition: ['dns_rcode = $param'],
    checked: true,
    disabled: false,
    panelId: drillDownPanelTypeMapping.dnsFourthMenu
@@ -1007,6 +1364,7 @@ export const dnsServiceInsightsTabList = [
    prop: 'a',
    queryCycleTotalProp: 'a',
    dillDownProp: ['rr_a'],
    queryCondition: ['notEmpty(dns_rr) AND has(JSONExtractArrayRaw(JSON_QUERY(\'$.rr[*].type\', dns_rr) ), \'1\') AND arrayJoin(tupleElement(tupleElement(JSONExtract(dns_rr,\'Tuple(rr Nested(name String, type UInt32, a String))\'), \'rr\'), \'a\')) = \'$param\''],
    checked: true,
    disabled: false,
    panelId: drillDownPanelTypeMapping.dnsFourthMenu
@@ -1016,6 +1374,7 @@ export const dnsServiceInsightsTabList = [
    prop: 'aaaa',
    queryCycleTotalProp: 'aaaa',
    dillDownProp: ['rr_aaaa'],
    queryCondition: ['notEmpty(dns_rr) and has(JSONExtractArrayRaw(JSON_QUERY(\'$.rr[*].type\', dns_rr) ), \'28\') AND arrayJoin(tupleElement(tupleElement(JSONExtract(dns_rr,\'Tuple(rr Nested(name String, type UInt32, aaaa String))\'), \'rr\'), \'aaaa\')) = \'$param\''],
    checked: true,
    disabled: false,
    panelId: drillDownPanelTypeMapping.dnsFourthMenu
@@ -1025,6 +1384,7 @@ export const dnsServiceInsightsTabList = [
    prop: 'cname',
    queryCycleTotalProp: 'cnames',
    dillDownProp: ['rr_cname'],
    queryCondition: ['notEmpty(dns_rr) and has(JSONExtractArrayRaw(JSON_QUERY(\'$.rr[*].type\', dns_rr) ), \'5\') AND arrayJoin(tupleElement(tupleElement(JSONExtract(dns_rr,\'Tuple(rr Nested(name String, type UInt32, cname String))\'), \'rr\'), \'cname\')) = \'$param\''],
    checked: true,
    disabled: false,
    panelId: drillDownPanelTypeMapping.dnsFourthMenu
@@ -1033,7 +1393,7 @@ export const dnsServiceInsightsTabList = [
 // 用于组织数据时的名称，对应的属性名称
 export const bytesColumnNameGroupForNpm = {
-  through: 'throughBitsRate',
+  totalBytes: 'totalBytes',
  tcpConEstLatency: 'establishLatencyMs',
  packetLoss: 'tcpLostlenPercent',
  packetRetrans: 'pktRetransPercent',
@@ -1041,8 +1401,8 @@ export const bytesColumnNameGroupForNpm = {
  httpResponseLatency: 'httpResponseLatency'
 }
-export const bytesCycleColumnNameGroupForNmp = {
+export const bytesCycleColumnNameGroupForNpm = {
-  through: 'throughBitsRate'
+  totalBytes: 'totalBytes'
 }
 // 用于组织数据时的名称，对应的属性名称
@@ -1059,14 +1419,14 @@ export const bytesCycleColumnNameGroupForDns = {
 // networkOverview 当前周期返回数据对应的属性名称（与上一周期中的属性名称不一致,total）,之所以写在这里是因为有byte，packets，sessions3种，如果只有一种，可以直接写在customTableTitlesForAppPerformance
 export const bytesColumnNameGroup = {
-  total: 'bytesTotalRate',
+  total: 'totalBitsRate',
  inbound: 'inboundBitsRate',
  outbound: 'outboundBitsRate',
  internal: 'internalBitsRate',
  through: 'throughBitsRate'
 }
 export const packetsColumnNameGroup = {
-  total: 'packetsTotalRate',
+  total: 'totalPacketsRate',
  inbound: 'inboundPacketsRate',
  outbound: 'outboundPacketsRate',
  internal: 'internalPacketsRate',
@@ -1077,7 +1437,7 @@ export const sessionsColumnNameGroup = {
 }
 export const bytesCycleColumnNameGroup = {
-  total: 'bytesRate'
+  total: 'bitsRate'
 }
 export const packetsCycleColumnNameGroup = {
  total: 'packetsRate'
@@ -1110,7 +1470,7 @@ export const networkTable = {
    bytesColumnNameGroup: bytesColumnNameGroupForNpm,
    packetsColumnNameGroup: {}, // 无metric下拉列表条件，用不到此属性
    sessionsColumnNameGroup: {}, // 无metric下拉列表条件，用不到此属性
-    bytesCycleColumnNameGroup: bytesCycleColumnNameGroupForNmp,
+    bytesCycleColumnNameGroup: bytesCycleColumnNameGroupForNpm,
    packetsCycleColumnNameGroup: {},
    sessionsCycleColumnNameGroup: {}
  },
@@ -1131,7 +1491,7 @@ export const networkTable = {
    hasMetricSearch: false, // 是否有metric下拉列表
    panelIdOfThirdMenu: drillDownPanelTypeMapping.linkMonitor,
    bytesColumnNameGroup: bytesColumnNameGroupForNpm,
-    bytesCycleColumnNameGroup: bytesCycleColumnNameGroupForNmp
+    bytesCycleColumnNameGroup: bytesCycleColumnNameGroupForNpm
  }
 }
--- a/src/utils/date-util.js
+++ b/src/utils/date-util.js
@@ -69,3 +69,26 @@ export function dateFormatToUTC (date, format = 'YYYY-MM-DD HH:mm:ss') {
  d = window.$dayJs(d).tz().format(format)
  return d
 }
 /**
 * 时间戳转年月日时分秒，置于数组中，配合el-date-picker使用
 * @param time
 * @returns {number[]}
 */
 export function timestampToList (time) {
  // 根据地址获取当前时区
  const newTimezone = window.$dayJs.tz().utcOffset() / 60
  // 缓存的本地时区
  const localTimezone = parseInt(localStorage.getItem(storageKey.timezoneLocalOffset))
  const date = new Date(getMillisecond(time + (newTimezone - localTimezone) * 3600))
  const Y = date.getFullYear()
  const M = date.getMonth()
  const D = date.getDate()
  const H = date.getHours()
  const m = date.getMinutes()
  const s = date.getSeconds()
  const arr = [Y, M, D, H, m, s]
  return arr
 }
--- a/src/utils/http.js
+++ b/src/utils/http.js
@@ -1,8 +1,20 @@
 import axios from 'axios'
 import { storageKey } from '@/utils/constants'
 import store from '@/store'
 const CancelToken = axios.CancelToken
 axios.interceptors.request.use(config => {
  const token = localStorage.getItem(storageKey.token)
  // 添加http请求终止方法
  const arr = []
  const cancelToken = new CancelToken(function executor (c) {
    arr.push(c)
    store.commit('setHttpCancel', arr)
  })
  config.cancelToken = cancelToken
  if (token) {
    config.headers['Cn-Authorization'] = token // 请求头token
  }
--- a/src/utils/tools.js
+++ b/src/utils/tools.js
@@ -2,10 +2,11 @@ import { ElMessageBox, ElMessage } from 'element-plus'
 import i18n from '@/i18n'
 import _ from 'lodash'
 import { storageKey, iso36112, topDomain, echartsFontSize, dbGeoDataTableName, networkTable, dbDrilldownTableConfig } from '@/utils/constants'
-import { getIso36112JsonData } from '@/utils/api'
+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')
@@ -780,66 +780,55 @@ export function getChainRatio (current, prev) {
  }
 }
-export function computeScore (data, index) {
+export function computeScore (data) {
  let score = 0
  let k = 0
-  if (index === 0) {
+  let totalScore = 0
-    k = 0.3
+  const scoreArr = []
-    if (!data.establishLatencyMs && data.establishLatencyMs !== 0) {
+  let num = 0
-      score = 0
+  Object.keys(data).forEach(t => {
-    } else if (data.establishLatencyMs <= 50) {
+    if (!data[t]) {
-      score = 1
+      num += 1
    } else if (data.establishLatencyMs > 500) {
      score = 0
    } else {
      score = (data.establishLatencyMs - 500) / (50 - 500)
    }
-  } else if (index === 1) {
+    if (t === 'establishLatencyMs' || t === 'tcpLostlenPercent' || t === 'pktRetransPercent') {
-    k = 0.05
+      k = 0.3
-    if (!data.httpResponseLatency && data.httpResponseLatency !== 0) {
+    } else if (t === 'httpResponseLatency' || t === 'sslConLatency') {
-      score = 1
+      k = 0.05
    } else if (data.httpResponseLatency <= 50) {
      score = 1
    } else if (data.httpResponseLatency > 500) {
      score = 0
    } else {
      score = (data.httpResponseLatency - 500) / (50 - 500)
    }
-  } else if (index === 2) {
+    if (t === 'establishLatencyMs' || t === 'httpResponseLatency' || t === 'sslConLatency') {
-    k = 0.05
+      if (!data[t] && data[t] !== 0) {
-    if (!data.sslConLatency && data.sslConLatency !== 0) {
+        score = 1
-      score = 1
+      } else if (data[t] <= 50) {
-    } else if (data.sslConLatency <= 50) {
+        score = 1
-      score = 1
+      } else if (data[t] > 200) {
-    } else if (data.sslConLatency > 500) {
+        score = 0
-      score = 0
+      } else {
-    } else {
+        score = (data[t] - 200) / (50 - 200)
-      score = (data.sslConLatency - 500) / (50 - 500)
+      }
-    }
+    } else if (t === 'tcpLostlenPercent' || t === 'pktRetransPercent') {
-  } else if (index === 3) {
+      if (!data[t] && data[t] !== 0) {
-    k = 0.3
+        score = 1
-    if (!data.tcpLostlenPercent && data.tcpLostlenPercent !== 0) {
+      } else if (data[t] <= 0.01) {
-      score = 0
+        score = 1
-    } else if (data.tcpLostlenPercent <= 0.01) {
+      } else if (data[t] > 0.05) {
-      score = 1
+        score = 0
-    } else if (data.tcpLostlenPercent > 0.5) {
+      } else {
-      score = 0
+        score = (data[t] - 0.05) / (0.01 - 0.05)
-    } else {
+      }
      score = (data.tcpLostlenPercent - 0.5) / (0.01 - 0.5)
    }
  } else if (index === 4) {
    k = 0.3
    if (!data.pktRetransPercent && data.pktRetransPercent !== 0) {
      score = 0
    } else if (data.pktRetransPercent <= 0.01) {
      score = 1
    } else if (data.pktRetransPercent > 0.5) {
      score = 0
    } else {
      score = (data.pktRetransPercent - 0.5) / (0.01 - 0.5)
    }
    scoreArr.push(score * k)
  })
  scoreArr.forEach(t => {
    totalScore += t
  })
  totalScore = Math.ceil(totalScore * 6)
  if (totalScore > 6) {
    totalScore = 6
  }
-  return score * k
+  if (num === 5) {
    return '-'
  }
  return totalScore
 }
 // 改变tab状态(url中)：当前tab，
@@ -851,7 +840,6 @@ export function changeTabState (param, value) {
  })
 }
 export function getTabList (curTable, curMetric) {
  console.log('getTabList--------------')
  let tabs = []
  if (curTable.hasMetricSearch) { // 有metric
    const metricsList = curTable ? curTable.metrics : []
@@ -866,35 +854,63 @@ export function getTabList (curTable, curMetric) {
  }
  return tabs
 }
 export async function getDnsMapData (type) {
  const codeValueMap = new Map()
  const dnsData = await getDictList({ type: type, pageSize: -1 })
  if (dnsData && dnsData.length > 0) {
    dnsData.forEach(mapData => {
      const code = mapData.code
      if (code.indexOf('-') > -1) {
        const range = mapData.code.split('-')
        if (range && range.length >= 2) {
          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)
          }
        }
      } else {
        codeValueMap.set(code, mapData.value)
      }
    })
  }
  return codeValueMap
 }
 export function handleSpecialValue (value) {
  if (value) {
    value = value.replaceAll("'", "\\\\'")
      .replaceAll('"', '\\"')
      .replaceAll('&', '%26')
  }
  return value
 }
 export function combineTabList (tableType, list, commonTabList) {
  const curTableInCode = networkTable[tableType] ? networkTable[tableType] : networkTable.networkOverview
  const listInCode = curTableInCode ? curTableInCode.tabList : []
  list.forEach(tab => {
    // 配置的内容
    const tabName = tab ? (tab.name ? tab.name : tab) : ''
    // 配置的内容
    const commonTab = commonTabList.find(item => item.name === tabName)
    tab.label = commonTab ? commonTab.i18n : ''
    tab.prop = commonTab ? commonTab.prop : ''
    if (!tab.hasOwnProperty('checked')) {
-      const tabName = tab ? (tab.name ? tab.name : tab) : ''
+      tab.checked = tab ? tab.show : true
      // 配置的内容
      tab = {}
      const commonTab = commonTabList.find(item => item.name === tabName)
      tab.label = commonTab ? commonTab.i18n : ''
      tab.prop = commonTab ? commonTab.prop : ''
      if (!tab.hasOwnProperty('checked')) {
        tab.checked = tab ? tab.show : true
      }
      if (!tab.hasOwnProperty('disabled')) {
        tab.disabled = tab ? !tab.enable : false
      }
      if (!tab.hasOwnProperty('panelId')) {
        tab.panelId = tab ? tab.panelIdOfFourthMenu : null
      }
      // 代码里写死的
      const tabInCode = listInCode ? listInCode.find(item => item.label === tab.label) : {}
      tab.queryCycleTotalProp = tabInCode ? tabInCode.queryCycleTotalProp : null
      tab.dillDownProp = tabInCode ? tabInCode.dillDownProp : []
    }
    if (!tab.hasOwnProperty('disabled')) {
      tab.disabled = tab ? !tab.enable : false
    }
    if (!tab.hasOwnProperty('panelId')) {
      tab.panelId = tab ? tab.panelIdOfFourthMenu : null
    }
    // 代码里写死的
    const tabInCode = listInCode ? listInCode.find(item => item.label === tab.label) : {}
    tab.queryCycleTotalProp = tabInCode ? tabInCode.queryCycleTotalProp : null
    tab.dillDownProp = tabInCode ? tabInCode.dillDownProp : []
  })
 }
-
+/*
 export function setUserConfig () {
  const userTableConfig = this.getUserLocalConfig()
  if (userTableConfig) {
@@ -911,45 +927,110 @@ export function setUserConfig () {
    this.list = newTabConfigs
  }
 }
-
+*/
 export async function getDefaultCurTab (tableType, metric, columnName) {
  const tabList = await getUserDrilldownTableConfig(tableType, metric)
  const curTab = tabList.filter(item => item.label === columnName)[0]
  return curTab
 }
 export async function readDrilldownTableConfigByUser () {
  // 获取用户定制的自定义配置
  const userId = localStorage.getItem(storageKey.userId)
  const userLocalConfig = await db[dbDrilldownTableConfig].get({ id: userId })
  let defaultDrillDownTableConfigs = []
  if (userLocalConfig) {
    defaultDrillDownTableConfigs = userLocalConfig.config
  }
  return defaultDrillDownTableConfigs
 }
 export async function getConfigVersion (id) {
  let defaultConfigInDb = await db[dbDrilldownTableConfig].get({ id: id })
  if (!defaultConfigInDb) {
    defaultConfigInDb = await db[dbDrilldownTableConfig].get({ id: 'default' })
  }
  return defaultConfigInDb.version || ''
 }
 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 defaultConfigGroup
 }
 export async function getUserDrilldownTableConfig (tableType, curMetric) {
  let list = []
-  // 先从localStorage中获取用户定制的自定义配置，如果没有，则使用默认的自定义配置
+  // 获取用户定制的自定义配置，如果没有，则使用默认的自定义配置
-  const userId = localStorage.getItem(storageKey.userId)
+  const drillDownTableConfigs = await combineDrilldownTableWithUserConfig()
-  const userLocalCongfig = await db[dbDrilldownTableConfig].get({ id: userId })
+  const currentTableConfig = drillDownTableConfigs.find(config => config.route === tableType)
  let defaultDrillDownTableConfigs = []
  if (userLocalCongfig) {
    defaultDrillDownTableConfigs = userLocalCongfig.config
  }
  if (!defaultDrillDownTableConfigs || defaultDrillDownTableConfigs.length === 0) { // 未找到当前用户的配置，使用默认配置
    console.log('default..............')
    const defaultCongfig = await db[dbDrilldownTableConfig].get({ id: 'default' })
    if (defaultCongfig) {
      defaultDrillDownTableConfigs = defaultCongfig.config
    }
  }
  const currentTableConfig = defaultDrillDownTableConfigs.find(config => config.route === tableType)
  const commonTabList = currentTableConfig ? currentTableConfig.tabs : []
  const tables = currentTableConfig ? currentTableConfig.tables : []
  if (tables && tables.length > 0) {
    const curTableOldConfig = tables.find(table => table.id === tableType)
    const curTable = curTableOldConfig || null
    if (curTable) {
-      if (curTable.hasMetricSearch) { // 有metric
+      list = curTable ? curTable.tabs : []
        const metricsList = curTable ? curTable.metrics : []
        if (metricsList && metricsList.length > 0) {
          const metricTab = metricsList.find(metric => metric.name === curMetric)
          list = metricTab ? metricTab.tabs : []
        }
      } else { // 无metric
        list = curTable ? curTable.tabs : []
      }
      combineTabList(tableType, list, commonTabList)
    }
  }
@@ -976,7 +1057,7 @@ export function urlParamsHandler (url, oldParams, newParams, cleanOldParams) {
 }
 export function overwriteUrl (url) {
-  window.history.replaceState('', '', url)
+  window.history.replaceState({}, '', url)
 }
 /*
--- a/src/utils/unit-convert.js
+++ b/src/utils/unit-convert.js
@@ -162,6 +162,12 @@ export function valueToRangeValue (value, unitType) {
        }
        break
      }
      case unitTypes.qps: {
        if (values[0] < 0.01) {
          return ['<0.01', 'qps']
        }
        break
      }
      default: break
    }
  }
--- a/src/views/Temp.vue
+++ b/src/views/Temp.vue
@@ -1,9 +0,0 @@
 <template>
  <div>Temp</div>
 </template>
 <script>
 export default {
  name: 'Temp'
 }
 </script>
--- a/src/views/administration/Chart.vue
+++ b/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>
--- a/src/views/administration/GalaxyProxy.vue
+++ b/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>
--- a/src/views/administration/I18n.vue
+++ b/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>
--- a/Show More
+++ b/Show More