fix: 修复npm-event单测id根据时间命名可能会导致报错的问题

fix: 修复linkMonitor下一跳网格图排序错乱问题
Update .gitlab-ci.yml
2023-02-23 10:51:56 +08:00 · 2023-02-23 10:23:24 +08:00 · 2023-02-21 08:07:38 +00:00 · 2023-02-21 07:59:43 +00:00 · 2023-02-21 07:55:38 +00:00 · 2023-02-21 07:35:45 +00:00
184 changed files with 8596 additions and 8889 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,7 +1,8 @@
 module.exports = {
  env: {
    browser: true,
-    es2021: true
+    es2021: true,
+    jest: true
  },
  extends: [
    'plugin:vue/vue3-essential',
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -2,6 +2,7 @@
 stages:
  - gen_git-log
  - build_project
+  - test
  - build_image

 cache:
@@ -10,7 +11,7 @@ cache:
      - package.json
  paths:
    - node_modules
-    - dist/
+#    - dist/

 before_script:
  - export CNUI_TAG=$(date +%Y%m%d%H%M%S)
@@ -18,7 +19,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 +30,7 @@ generate_git-log:
      - public/index.html
      - public/git-log.html
  only:
-    - dev
+    - dev-test
  tags:
    - galaxy

@@ -41,29 +42,48 @@ 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-test
    - tags
  tags:
    - galaxy

+test:
+  stage: test
+  script:
+    - cnpm run test
+  when: on_success
+  only:
+    - dev-test
+  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-test
  tags:
    - galaxy


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

+      if (currentPath === '/' || currentPath === '/login') {
+        if (localStorage.getItem(storageKey.token) !== null) {
+          // 刚进入会请求失败，故采用延时，请求成功清除延时器，避免内存泄漏
+          const timer = setTimeout(() => {
+            post(api.permissions, { token: localStorage.getItem(storageKey.token) }).then(res => {
+              if (res.code === 200) {
+                router.push({
+                  path: '/panel/networkOverview'
+                })
+                clearTimeout(timer)
+              }
+            })
+          }, 10)
+        }
+      }
+    }
+  }
 }
 </script>
--- 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>
- .logins{
+<style scoped>
+.logins {
  background-color: #000C18;
  background-size: auto;
  background-repeat: round;
  background-image: url('../public/images/bg.png');
  display: flex;
-   height: 100%;
+  height: 100%;
  justify-content: center;
  align-items: center;
-   margin: auto;
 }

+>>>.el-input__inner {
+  background-color: #0B325C !important;
+  border: none;
+  border-radius: 0px;
+  border-bottom: 1px solid #295688;
+  font-size: 14px;
+  line-height: 14px;
+}
+>>>.el-input__inner:hover {
+  border-color: #295688;
+}
+>>>.el-input__inner:focus {
+  border-color: #295688;
+}
+.el-button--primary:hover, .el-button--primary:focus, .el-button--primary:active {
+  background: #21B4ED;
+  border-color: #21B4ED;
+  color: #FFFFFF;
+}
+>>>.el-loading-mask {
+  background-color: transparent;
+}
+>>>input {
+  -webkit-text-fill-color: rgba(231,234,237, .8) !important;
+  transition: background-color 500000000000000000s ease-in-out 0s !important;
+  caret-color: #fff ;
+}
 .inside {
-  opacity: 0.78;
-  background: #051a37;
-  border-radius: 6px;
-  width: 368px;
-  height: 400px;
-  /* margin-top:340px; */
+  width: 414px;
+  height: 524px;
+  background: #0B325C;
+  border: 1px solid rgba(103,179,245,0.65);
+  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.38);
+  border-radius: 4px;
+}
+.inside {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }
 .inside > div {
  display: block;
 }

 .title {
-  margin-top: 70px;
+  margin-top: 65px;
  text-align: center;
-
 }
 .title > img {
-  height: 43px;
-  width: 248px;
+  height: 135px;
 }
-.login--input{
-  width: 300px;
-  height: 40px;
+.login__box {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+}
+>>>.el-form-item {
+  width: 334px;
+  margin-bottom: 25px;
+}
+>>>.el-input__prefix {
+  color: #6DBBFF;
+}
+>>>.el-input__prefix i {
+  width: 17px;
+  font-size: 17px;
+}
+.login__box .el-form-item:nth-of-type(3) {
+  margin-top: 25px;
+  margin-bottom: 65px;
 }
- .login__input:first-of-type{
-   margin-top: 45.57px;
- }
- .login__box{
-   width: 300px;
-   height: 250px;
-   margin: auto;
- }
 .login--button {
-  background: #0091ff;
-  color: #fff;
+  background: #21B4ED;
  border-radius: 4px;
  border: 0;
  font-weight: 400;
-  text-align: center;
+  font-size: 16px;
+  color: #FFFFFF;
+  line-height: 22px;
+  width: 334px;
+  height: 52px;
 }
 </style>
--- a/src/Test.vue
+++ b/src/Test.vue
@@ -0,0 +1,121 @@
+<template>
+  <span test-id="count">{{count}}</span>
+  <span test-id="id">{{obj.id}}</span>
+  <span test-id="title">{{obj.title}}</span>
+  <button test-id="button" @click="click">click</button>
+  <span test-id="tab">{{lineTab}}</span>
+  <el-table
+      :data="tableData"
+      class="test-table"
+      height="100%"
+      empty-text=" "
+  >
+    <template v-for="(item, index) in tableTitles" :key="index">
+      <el-table-column>
+        <template #default="scope" :column="item">
+          <span :test-id="`${item.prop}${scope.$index}`">{{scope.row[item.prop]}}</span>
+        </template>
+      </el-table-column>
+    </template>
+  </el-table>
+</template>
+
+<script>
+/* vue-jest的测试示例 */
+import { useRoute, useRouter } from 'vue-router'
+import axios from 'axios'
+import { ref } from 'vue'
+import indexedDBUtils from '@/indexedDB'
+export default {
+  name: 'Test',
+  data () {
+    return {
+      count: 0,
+      obj: { id: 1, title: 'title' },
+      differentParamData0: null,
+      differentParamData1: null,
+      indexedDBValue: null,
+      tableData: [
+        {
+          name: 'a',
+          age: 10
+        },
+        {
+          name: 'b',
+          age: 11
+        }
+      ],
+      tableTitles: [
+        { label: 'Name', prop: 'name' },
+        { label: 'Age', prop: 'age' }
+      ],
+      mergeRequestData0: null,
+      mergeRequestData1: null,
+      mergeRequestChildData0: null,
+      mergeRequestChildData1: null
+    }
+  },
+  methods: {
+    click () {
+      this.count++
+    },
+    async getObj () {
+      axios.get('/api/getObjId').then(response => {
+        this.obj.id = response.data
+      })
+      axios.get('/api/getObjTitle').then(response => {
+        this.obj.title = response.data
+      })
+    },
+    async getCount () {
+      axios.get('/api/getCount').then(response => {
+        this.count = response.data
+      })
+    },
+    async differentRequestParam () {
+      axios.get('/api/differentParam', { params: { name: 0 } }).then(response => {
+        this.differentParamData0 = response.data
+      })
+      axios.get('/api/differentParam', { params: { name: 1 } }).then(response => {
+        this.differentParamData1 = response.data
+      })
+    },
+    /**
+     * 同一url，不同入参的axios请求内包含多个不同url请求的demo
+     * @returns {Promise<void>}
+     */
+    async mergeRequest () {
+      axios.get('/api/differentParam', { params: { name: 0 } }).then(response => {
+        this.mergeRequestData0 = response.data
+      })
+      axios.get('/api/differentParam', { params: { name: 1 } }).then(response => {
+        this.mergeRequestData1 = response.data
+        axios.get('/api/getChildId').then(response1 => {
+          this.mergeRequestChildData0 = response1.data
+        })
+        axios.get('/api/getChildTitle').then(response2 => {
+          this.mergeRequestChildData1 = response2.data
+        })
+      })
+    },
+    async setIndexedDBValue () {
+      await indexedDBUtils.selectTable('test').put({ id: 1, name: 'test' })
+    },
+    async getIndexedDBValue () {
+      this.indexedDBValue = await indexedDBUtils.selectTable('test').get(1)
+    }
+  },
+  setup () {
+    const { query } = useRoute()
+    const { currentRoute } = useRouter()
+    const localstorageValue = localStorage.getItem('key')
+    const lineTab = ref(query.lineTab || '')
+    const path = currentRoute.value.path
+    return {
+      lineTab,
+      path,
+      localstorageValue
+    }
+  }
+}
+</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
@@ -199,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
@@ -11,7 +11,9 @@
  z-index: 999999;
  box-shadow: 0 0 10px #CCC;
  box-sizing: border-box;
-
+  .pop-title {
+    margin: 10px 0;
+  }
  .el-button--mini{
    padding: 5px 7px;
  }
@@ -23,7 +25,6 @@
  top: 33px;
 }
 .custom-labels {
-  margin-top: 12px;
  width: 100%;
  height: 300px;
 }
@@ -41,8 +42,7 @@
  font-size: 14px;
 }
 .custom-label:hover{
-  color: #cccccc;
-  background-color: #DCDFE6;
+  background-color: rgba(220, 223, 230, .5)
 }
 .custom-title{
  padding: 2px 0 2px 2px;
@@ -57,6 +57,14 @@
  display: flex;
  justify-content: space-between;
  align-items: center;
+  .custom-bottom-btns-right {
+    .el-button:nth-of-type(1) {
+      margin-right: 3px;
+    }
+    .el-button .top-tool-btn-save {
+      color: #fff;
+    }
+  }
 }
 .unshow {
  display: none;
@@ -74,7 +82,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
@@ -3,7 +3,7 @@

  .network-overview-apps-header {
    display: flex;
-    justify-content: space-between;
+    //justify-content: space-between;

    .network-overview-apps-title {
      font-size: 14px;
--- 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/networkOverviewLine.scss
+++ b/src/assets/css/components/views/charts2/networkOverviewLine.scss
@@ -98,11 +98,11 @@
        //top: 0;
        //left: 0;
        display: flex;
-        .line-value-mpackets.mousemove-cursor {
+        .line-value-tabs.mousemove-cursor {
          border-top: 4px solid #D3D0D8;
          z-index: 0;
        }
-        .line-value-mpackets {
+        .line-value-tabs {
          cursor: pointer;
          padding: 16px 0 0 20px;
          border-top: 4px solid transparent;
@@ -122,10 +122,10 @@
              }
            }
          }
-          .line-value-mpackets-name {
+          .line-value-tabs-name {
            position: relative;
            display: flex;
-            .mpackets-name {
+            .tabs-name {
              flex: 1;
              padding-left: 19px;
            }
--- 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,18 @@
      .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;
--- 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/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/entityExplorer/entityList/detail-overview.scss
+++ b/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss
@@ -87,7 +87,7 @@
          padding-right: 20px;

          &.row__label--width130 {
-            flex-basis: 130px;
+            flex-basis: 140px;
            padding-right: unset;
          }
          &.row__label--width160 {
--- 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'),
-       url('iconfont.woff?t=1663570533591') format('woff'),
-       url('iconfont.ttf?t=1663570533591') format('truetype');
+  src: url('iconfont.woff2?t=1670817031037') format('woff2'),
+       url('iconfont.woff?t=1670817031037') format('woff'),
+       url('iconfont.ttf?t=1670817031037') format('truetype');
 }

 .cn-icon {
@@ -13,6 +13,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,258 @@
+<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'
+import { useStore } from 'vuex'
+
+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 store = useStore()
+    const routerPath = router.currentRoute.value.path
+    const tabList = store.getters.getChartTabList
+    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)
+        store.dispatch('dispatchChartTabList', [{ 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
+          // 场景：从遮罩面板进入界面时，重置状态，默认选中第一个tab
+          if (routerPath === tabList[0].path) {
+            currentTab = tabList[0].index
+            store.dispatch('dispatchChartTabList', [{ path: tabsData.value[0].path, index: '0' }])
+          }
+        } else if (obj0) {
+          currentTab = tabList[0].index
+        } else {
+          store.dispatch('dispatchChartTabList', [{ 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;'
+          }
+        }
+      })
+      const tabList = this.$store.getters.getChartTabList
+
+      if (tabList && this.router !== 'noRouter') {
+        tabList.forEach((item) => {
+          this.$nextTick(() => {
+            this.handleActiveBar(parseFloat(item.index))
+          })
+        })
+      } else {
+        this.$nextTick(() => {
+          this.handleActiveBar(this.currentTab)
+        })
+        this.$store.dispatch('dispatchChartTabList', 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 (this.$store.getters.getChartTabList.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)
+      const tabList = this.$store.getters.getChartTabList
+
+      if (this.router === 'noRouter') {
+        const { query } = this.$route
+        const newUrl = urlParamsHandler(window.location.href, query, {
+          t: +new Date(),
+          tabIndex: item.index
+        })
+        overwriteUrl(newUrl)
+      } else {
+        tabList.push({
+          path: this.tabsData[item.index].path,
+          index: item.index
+        })
+
+        if (tabList.length > 2) {
+          tabList.splice(0, 1)
+        }
+        this.$store.dispatch('dispatchChartTabList', tabList)
+
+        this.$router.push({
+          path: this.tabsData[item.index].path,
+          query: {
+            t: +new Date()
+          }
+        })
+      }
+    }
+  },
+  beforeUnmount () {
+    clearTimeout(this.timer)
+    const path = this.$router.currentRoute.value.path
+    const list = this.$store.getters.getChartTabList
+    if (list && this.router !== 'noRouter') {
+      if (list[1]) {
+        // 去其他界面，清除状态
+        if (path !== list[0].path && path !== list[1].path) {
+          this.$store.dispatch('dispatchChartTabList', null)
+        }
+      } else if (path !== list[0].path) {
+        // 避免刷新页面之后又点击菜单栏进入该界面，还保留上次点击状态
+        this.$store.dispatch('dispatchChartTabList', null)
+      }
+    }
+  }
+}
+</script>
--- a/src/components/common/Error.vue
+++ b/src/components/common/Error.vue
@@ -0,0 +1,148 @@
+<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) {
+      // }
+    }
+  }
+}
+</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 { storageKey } from '@/utils/constants'
+import { defaultPageSize, storageKey } from '@/utils/constants'
+
 import { urlParamsHandler, overwriteUrl } from '@/utils/tools'
 import { ref } from 'vue'
 import { useRoute } from 'vue-router'
@@ -186,7 +186,6 @@ export default {
      }
    }

-    this.size(this.pageSize)
    this.currentPageNo = parseInt(this.currentPageNo)
    this.current(this.currentPageNo)
  },
--- 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;z-index: 99" 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">
@@ -25,6 +25,7 @@
                class="date_style"
                style="position: absolute;top: -53px;left: -536px;"
                :clearable="false"
+                :default-time="defaultTime"
                type="datetimerange"
                @change="timeArrChange"
            />
@@ -76,7 +77,7 @@
 </template>

 <script>
-import { ref, computed } from 'vue'
+import { ref, computed, watch, reactive } from 'vue'
 import { storageKey } from '@/utils/constants'
 import { getMillisecond, timestampToList } from '@/utils/date-util'
 import { useStore } from 'vuex'
@@ -86,7 +87,7 @@ export default {
  props: {
    startTime: {
      type: Number,
-      default: window.$dayJs.tz().valueOf() - 1 * 60 * 60 * 1000
+      default: window.$dayJs.tz().valueOf() - 60 * 60 * 1000
    },
    endTime: {
      type: Number,
@@ -127,6 +128,11 @@ export default {
      { value: 2880, name: 'last 2 days' }
    ]
    const dropdownFlag = ref(false)
+    // 默认日历选择时间，即开始时间YYYY-MM-DD 00:00:00,结束时间YYYY-MM-DD 59:59:59
+    const defaultTime = ref([
+      new Date(2023, 1, 1, 0, 0, 0),
+      new Date(2023, 1, 2, 23, 59, 59)
+    ])

    // computed
    const utcStr = computed(() => {
@@ -157,6 +163,21 @@ export default {
    // refs
    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
    /**
     * 打开/关闭时间面板
@@ -256,8 +277,10 @@ export default {
      myEndTime,
      dropdownFlag,
      utcStr,
+      rangeEchartsData,
      address,
      dateRangeArr,
+      defaultTime,
      dateRangeValue,
      isCustom,
      newDateValue,
@@ -277,9 +300,3 @@ export default {
  }
 }
 </script>
-
-<style scoped>
-/deep/.el-input__inner {
-  visibility: hidden !important;
-}
-</style>
--- a/src/components/common/TimeRange/TimeRefresh.vue
+++ b/src/components/common/TimeRange/TimeRefresh.vue
@@ -42,17 +42,9 @@ export default {
      unit: 2,
      dropdownShow: false,
      interLabel: ''
-      // refreshArr: [
-      //   { value: -1, label: 'off' },
-      //   { value: 30, label: '30s' },
-      //   { value: 60, label: '1m' },
-      //   { value: 300, label: '5m' },
-      //   { value: 900, label: '15m' },
-      //   { value: 1800, label: '30m' }
-      // ]
    }
  },
-  setup (props, ctx) {
+  setup () {
    const { query } = useRoute()
    const store = useStore()
    const refreshArr = [
@@ -100,13 +92,12 @@ 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) {
        // 切换轮询请求时间频率时，发现有未结束的请求，终止请求
        const cancelList = this.$store.state.panel.httpCancel
-        // console.log('timeRefresh.vue------setRefresh------查看终止数量', cancelList, cancelList.length)
        if (cancelList.length > 0) {
          cancelList.forEach((cancel, index) => {
            cancel()
@@ -119,6 +110,7 @@ export default {
        }
        this.reloadUrl(dateParam)
        this.$store.commit('setRefreshTime', val.value)
+        this.$store.commit('setRefreshFlag', true)

        // 设置定时器
        this.intervalTimer = setInterval(() => {
--- 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>
-        <img alt="loading..." height="26" :src="logo?logo:require('../../assets/img/logo-header.svg')"/>
+        <span @click="shrink" class="shrink-button" :class="{'shrink-button--collapse': showMenu}"><i
+            class="cn-icon cn-icon-navigation"></i></span>
+        <img alt="loading..." height="26" :src="logo?logo:require('../../assets/img/logo-header.svg')" @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-item class="header__left-breadcrumb-item" :id="`breadcrumb${item}`" :title="item" v-for="(item,index) in breadcrumb" :key="item">
+      <el-breadcrumb class="header__left-breadcrumb" :separator="route.indexOf('detection') === -1 && route.indexOf('administration') === -1 ? '>' : ''">
+        <el-breadcrumb-item class="header__left-breadcrumb-item" :id="`breadcrumb${item}`" :title="item"
+                            v-for="(item,index) in breadcrumb" :key="item">
          <template v-if="index===3">
            <div class="header__left-breadcrumb-item-select">
              <el-popover placement="bottom-start"
@@ -52,16 +58,17 @@
                          @hide="hideBreadcrumbPopover()"
                          trigger="click">
                <template #reference>
-                  <div class="breadcrumb-button"  id="breadcrumbButton" :class="showBackground?'breadcrumb-button__active':''"  >
-                    <span  id="breadcrumbValue">
+                  <div class="breadcrumb-button" id="breadcrumbButton"
+                       :class="showBackground?'breadcrumb-button__active':''">
+                    <span id="breadcrumbValue">
                      <template v-if="curTabProp === 'qtype'">
-                        <span>{{dnsQtypeMapData.get(item) ? dnsQtypeMapData.get(item):item}}</span>
+                        <span>{{ dnsQtypeMapData.get(item)}}</span>
                      </template>
                      <template v-else-if="curTabProp === 'rcode'">
-                        <span>{{dnsRcodeMapData.get(item) ? dnsRcodeMapData.get(item):item}}</span>
+                        <span>{{ dnsRcodeMapData.get(item)}}</span>
                      </template>
                      <template v-else>
-                        <span>{{item}}</span>
+                        <span>{{ item }}</span>
                      </template>
                    </span><i class="cn-icon-xiala cn-icon"></i>
                  </div>
@@ -73,16 +80,17 @@
                              v-model="dropDownValue"
                              @input="dropDownSearch"></el-input>
                  </div>
-                  <ul class="select-dropdown" id="breadcrumbSelectDropdown"  @scroll="scrollList()">
-                    <li v-for="item in breadcrumbColumnValueListShow" title='' :key="item" :id="item" class="select-dropdown__item" @click="changeValue(item)" :class="selected?'':''">
+                  <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?'':''">
                      <template v-if="curTabProp === 'qtype'">
-                        <span>{{dnsQtypeMapData.get(item) ? dnsQtypeMapData.get(item):item}}</span>
+                        <span>{{ dnsQtypeMapData.get(item) }}</span>
                      </template>
                      <template v-else-if="curTabProp === 'rcode'">
-                        <span>{{dnsRcodeMapData.get(item) ? dnsRcodeMapData.get(item):item}}</span>
+                        <span>{{ dnsRcodeMapData.get(item) }}</span>
                      </template>
                      <template v-else>
-                        <span>{{item}}</span>
+                        <span>{{ item }}</span>
                      </template>
                    </li>
                  </ul>
@@ -91,38 +99,14 @@
            </div>
          </template>
          <template v-else-if="index===2">
-            <span v-if="route===wholeScreenRouterMapping.dns" >{{$t(item)}}</span>
-            <span v-else class="route-menu" @click="jump(route,item,'',3)">{{$t(item)}}</span>
+            <span v-if="route===wholeScreenRouterMapping.dns">{{ $t(item) }}</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>
-            <div class="header__left-breadcrumb-item-select" v-if="route.indexOf('detection') > -1">
-              <el-popover placement="bottom-start"
-                          v-if="route.indexOf('detection') > -1"
-                          ref="breadcrumbPopover"
-                          :show-arrow="false"
-                          :append-to-body="false"
-                          :hide-after="0"
-                          :show-after="0"
-                          popper-class="breadcrumb__popper"
-                          trigger="click">
-                <template #reference>
-                  <div class="breadcrumb-button"  id="breadcrumbButton2" :class="showBackground?'breadcrumb-button__active':''"  v-if="route.indexOf('detection') > -1">
-                    <span id="breadcrumbValue2"> {{item}}</span><i class="cn-icon-xiala cn-icon"></i>
-                  </div>
-                </template>
-                <el-row type="flex" justify="center" style="width: fit-content;flex-direction: column;">
-                  <ul class="select-dropdown" id="breadcrumbSelectDropdown2">
-                    <li v-for="item in detectionMenuList" title='' :key="item.name" :id="item.name" class="select-dropdown__item" @click="jump(item.path,'','',2)">
-                      <span>{{$t(item.i18n)}}</span>
-                    </li>
-                  </ul>
-                </el-row>
-              </el-popover>
-            </div>
+            <span class="route-menu" @click="jump(route,'','',2)">{{ item }}</span>
          </template>
          <template v-else>
-            <span>{{item}}</span>
+            <span>{{ item }}</span>
          </template>
        </el-breadcrumb-item>
      </el-breadcrumb>
@@ -140,22 +124,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>
@@ -167,12 +155,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-form-item :label="$t('overall.currentPassword')" prop="oldPwd">
-                <el-input v-model="changePassForm.oldPwd" type="password"></el-input>
-              </el-form-item>
+          <el-col :span="24">
+            <el-form-item :label="$t('overall.currentPassword')" prop="oldPwd">
+              <el-input v-model="changePassForm.oldPwd" type="password"></el-input>
+            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('overall.newPassword')" prop="newPwd">
@@ -188,8 +176,8 @@
      </el-form>
      <template #footer>
        <span class="dialog-footer">
-          <el-button @click="showChangePin = false">{{$t('overall.cancel')}}</el-button>
-          <el-button type="primary" @click="submit">{{$t('overall.update')}}</el-button>
+          <el-button @click="showChangePin = false">{{ $t('overall.cancel') }}</el-button>
+          <el-button type="primary" @click="submit">{{ $t('overall.update') }}</el-button>
        </span>
      </template>
    </el-dialog>
@@ -197,14 +185,10 @@
 </template>

 <script>
-import { useRoute } from 'vue-router'
 import { get, put } from '@/utils/http'
 import {
  curTabState,
-  dbDrilldownTableConfig,
  entityType,
-  networkOverviewSearchUrl,
-  networkOverviewTabList,
  networkTable,
  operationType,
  storageKey,
@@ -213,9 +197,17 @@ import {
 } from '@/utils/constants'
 import { api } from '@/utils/api'
 import { ref } from 'vue'
-import { combineTabList, getDefaultCurTab, getTabList, overwriteUrl, urlParamsHandler, combinDrilldownTableWithUserConfig,getDnsMapData } 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',
@@ -238,17 +230,32 @@ export default {
        newPwd2: ''
      },
      changePassFormRules: {
-        oldPwd: [{ required: true, 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' }]
+        oldPwd: [{
+          required: true,
+          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:[],
-      dnsQtypeMapData:[],
-      isDnsMapType:false,
+      curTabProp: '',
+      dnsRcodeMapData: new Map(),
+      dnsQtypeMapData: new Map(),
+      isDnsMapType: false,
      valueMeta: [],
      showBackground: false,
      selected: false,
@@ -269,7 +276,8 @@ export default {
      curPageNum: 1,
      curTabState: curTabState,
      urlChangeParams: {},
-      wholeScreenRouterMapping
+      wholeScreenRouterMapping,
+      logo: '' // 此处logo的url未被初始化，可能后续会改动
    }
  },
  computed: {
@@ -297,10 +305,21 @@ export default {
      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
+            })
          })
        }
      })
@@ -335,18 +354,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')
+        }
+      }
    }
  },
  async mounted () {
    this.from = Object.keys(this.entityType)[0]
-    this.dnsQtypeMapData = await getDnsMapData('dnsQtype')
-    this.dnsRcodeMapData = await getDnsMapData('dnsRcode')
+    // 是否需要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 chartTimeFilter = ref({ startTime, endTime, dateRangeValue })
+    const {
+      startTime,
+      endTime
+    } = getNowTime(dateRangeValue)
+    const chartTimeFilter = ref({
+      startTime,
+      endTime,
+      dateRangeValue
+    })
    return {
      chartTimeFilter,
      entityType // 所有entity类型，用于header下拉框选择
@@ -377,25 +420,25 @@ export default {
        window.location.reload()
      })
    },
-    getCurTabByLabel(label){
+    getCurTabByLabel (label) {
      let curTab = null
-      let tableType = this.$route.params ? this.$route.params.typeName : 'networkOverview'
-      let curTableInCode = networkTable[tableType] ? networkTable[tableType] : networkTable.networkOverview
+      const tableType = this.$route.params ? this.$route.params.typeName : 'networkOverview'
+      const curTableInCode = networkTable[tableType] ? networkTable[tableType] : networkTable.networkOverview
      if (curTableInCode && curTableInCode.tabList) {
-        curTab = curTableInCode.tabList.find(item => item.label == label)
+        curTab = curTableInCode.tabList.find(item => item.label === label)
      }
      return curTab
    },
    async initDropdownList () {
-      //是否需要dns的qtype和rcode的数据字典
+      // 是否需要dns的qtype和rcode的数据字典
      this.curTabProp = this.$route.query.dimensionType ? this.$route.query.dimensionType : null
-      let currentValue = document.getElementById('breadcrumbValue') ? document.getElementById('breadcrumbValue').innerText : ''
-      let columnName = this.getUrlParam(this.curTabState.thirdMenu, '')
+      const currentValue = document.getElementById('breadcrumbValue') ? document.getElementById('breadcrumbValue').innerText : ''
+      const columnName = this.getUrlParam(this.curTabState.thirdMenu, '')
      let type = 'ip'
-      let tableType = this.$route.params ? this.$route.params.typeName : 'networkOverview'
-      let curTableInCode = networkTable[tableType] ? networkTable[tableType] : networkTable.networkOverview
+      const tableType = this.$route.params ? this.$route.params.typeName : 'networkOverview'
+      const curTableInCode = networkTable[tableType] ? networkTable[tableType] : networkTable.networkOverview
      if (curTableInCode && curTableInCode.tabList) {
-        let curTab = curTableInCode.tabList.find(item => item.label == columnName)
+        const curTab = curTableInCode.tabList.find(item => item.label === columnName)
        if (curTab) {
          type = curTab.prop
        }
@@ -407,19 +450,29 @@ export default {
        type: type,
        name: this.dropDownValue ? this.dropDownValue : ''
      }
+      // 有的界面刷新时没有drilldownList接口地址，会报404
+      if (!curTableInCode.url.drilldownList) {
+        return true
+      }
      get(curTableInCode.url.drilldownList, params).then(async response => {
        if (response.code === 200) {
          this.breadcrumbColumnValueListShow = response.data.result
-          this.dnsQtypeMapData = await getDnsMapData('dnsQtype')
-          this.dnsRcodeMapData = await getDnsMapData('dnsRcode')
+          if (this.$route.params.typeName === fromRoute.dnsServiceInsights) {
+            if (this.dnsQtypeMapData.size === 0) {
+              this.dnsQtypeMapData = await getDnsMapData('dnsQtype')
+            }
+            if (this.dnsRcodeMapData.size === 0) {
+              this.dnsRcodeMapData = await getDnsMapData('dnsRcode')
+            }
+          }
          this.$nextTick(() => {
            this.breadcrumbColumnValueListShow.forEach(item => {
              const selectedDom = document.getElementById(item)
              if (selectedDom) {
                let itemName = item
-                if(this.curTabProp === 'qtype'){
+                if (this.curTabProp === 'qtype') {
                  itemName = this.dnsQtypeMapData.get(item)
-                }else if(this.curTabProp === 'rcode'){
+                } else if (this.curTabProp === 'rcode') {
                  itemName = this.dnsRcodeMapData.get(item)
                }
                if (itemName === currentValue) {
@@ -454,34 +507,31 @@ 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)
+      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', valName)
      document.getElementById(this.valueMenuId).setAttribute('title', valName)
      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)
-      let curTab = this.getCurTabByLabel()
+      const curTab = this.getCurTabByLabel(columnName)
      if (curTab) {
        const queryCondition = []
        const searchProps = curTab.dillDownProp
        if (curTab.prop === 'protocolPort') {
          const valueGroup = value.split(':')
          if (valueGroup) {
-            queryCondition.push("common_l7_protocol='" + valueGroup[0] + "'")
+            queryCondition.push('common_l7_protocol=\'' + valueGroup[0] + '\'')
            queryCondition.push('common_server_port=' + valueGroup[1])
          }
-          console.log(queryCondition.join(' AND '))
+          // console.log(queryCondition.join(' AND '))
          this.urlChangeParams[this.curTabState.queryCondition] = queryCondition.join(' AND ')
        } else {
          searchProps.forEach(item => {
-            queryCondition.push(item + "='" + value.replaceAll("'", "\\\\'") + "'")
+            queryCondition.push(item + '=\'' + handleSpecialValue(value) + '\'')
          })
          this.urlChangeParams[this.curTabState.queryCondition] = queryCondition.join(' OR ')
        }
@@ -495,7 +545,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
@@ -516,17 +569,17 @@ export default {
      }
      this.urlChangeParams = {}
    },
-    async handleCurDrilldownTableConfig (thirdMenu, fourthMenu) {
-      const userId = localStorage.getItem(storageKey.userId)
+    async handleCurDrilldownTableConfig (thirdMenu) {
+      // const userId = localStorage.getItem(storageKey.userId)
      const tableType = this.$route.params ? this.$route.params.typeName : 'networkOverview'
-      const drillDownTableConfigs = await combinDrilldownTableWithUserConfig()
+      const metric = this.getUrlParam(this.curTabState.tableMetric, 'Bits/s')
+      const drillDownTableConfigs = await combineDrilldownTableWithUserConfig()
      const currentTableConfig = drillDownTableConfigs.find(config => config.route === tableType)
      const tables = currentTableConfig ? currentTableConfig.tables : []
      const commonTabList = currentTableConfig ? currentTableConfig.tabs : []
      if (tables && tables.length > 0) {
        const curTable = tables.find(table => table.id === tableType)
        if (curTable) {
-          const metric = this.getUrlParam(this.curTabState.tableMetric, 'Bits/s')
          const tabList = getTabList(curTable, metric)// 未下钻的tab列表
          if (tabList && tabList.length > 0) {
            combineTabList(tableType, tabList, commonTabList)
@@ -540,12 +593,18 @@ export default {
      }
    },
    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) {
+          /* if (route !== '/panel/networkOverview') {
+            this.urlChangeParams.queryCondition = ''
+          } */
          this.urlChangeParams.queryCondition = ''
        }
      } else {
@@ -564,18 +623,18 @@ 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)
-                //let curTab = this.getCurTabByLabel()
-                //const type = curTab ? curTab.prop : ''
-                //this.curTabProp = this.$route.query.dimensionType ? this.$route.query.dimensionType : null
-                //this.urlChangeParams[this.curTabState.dimensionType] = type
+                // const tabObjGroup = networkOverviewTabList.filter(item => item.label == columnName)
+                // let curTab = this.getCurTabByLabel()
+                // 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 = ''
                child.columnName = columnName
                this.urlChangeParams[this.curTabState.thirdMenu] = columnName
                this.urlChangeParams[this.curTabState.fourthMenu] = ''
-                this.urlChangeParams[this.curTabState.panelName] = columnValue
+                this.urlChangeParams[this.curTabState.panelName] = columnName
                const tableType = this.$route.params ? this.$route.params.typeName : 'networkOverview'
                const metric = this.getUrlParam(this.curTabState.tableMetric, 'Bits/s')
                const curTab = getDefaultCurTab(tableType, metric, columnName)
@@ -605,11 +664,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
@@ -8,7 +8,7 @@
    </div>
    <div class="right-box__container">
      <div class="container__form">
-        <el-form ref="userForm" :model="editObject" :rules="rules" label-position="top" label-width="120px">
+        <el-form ref="reportForm" :model="editObject" :rules="rules" label-position="top" label-width="120px">
          <!--name-->
          <el-form-item :label="$t('report.name')" prop="name">
            <el-input id="account-input-name" v-model="editObject.name" maxlength="64" placeholder=" " show-word-limit size="small" type="text"></el-input>
@@ -19,7 +19,6 @@
                       v-model="editObject.config.timeConfig.type"
                       class="right-box__select"
                       collapse-tags
-                       :disabled="!!editObject.id"
                       placeholder=" "
                       popper-class="right-box-select-dropdown right-box-select-report "
                       size="small"
@@ -31,7 +30,6 @@
            </el-select>
            <template v-if="editObject.config.timeConfig.type === 'this'">
              <el-select id="reportBoxTimeUnitSelect"
-                         :disabled="!!editObject.id"
                         v-model="editObject.config.timeConfig.unit"
                         class="right-box__select"
                         collapse-tags
@@ -45,7 +43,7 @@
              </el-select>
            </template>
            <div v-else-if="editObject.config.timeConfig.type === 'last' || editObject.config.timeConfig.type === 'previous'" style="display: flex;">
-              <el-input v-model.number="editObject.config.timeConfig.offset" size="small" class="el-input-single" placeholder=" " :disabled="!!editObject.id">
+              <el-input v-model.number="editObject.config.timeConfig.offset" size="small" class="el-input-single" placeholder=" ">
                <template #prepend><i @click="timeOffsetHandle('m')" class="cn-icon cn-icon-a-"></i></template>
                <template #append><i @click="timeOffsetHandle('p')" class="cn-icon cn-icon-a-1"></i></template>
              </el-input>
@@ -53,7 +51,6 @@
                         v-model="editObject.config.timeConfig.unit"
                         class="right-box__select right-box__select-single"
                         collapse-tags
-                         :disabled="!!editObject.id"
                         placeholder=" "
                         popper-class="right-box-select-dropdown  el-select-last"
                         size="small"
@@ -73,10 +70,8 @@
                    v-model="editObject.config.startTime"
                    size="small"
                    :format="dateFormat"
-                    :disabled="!!editObject.id"
                    :disabled-date="startDisabledDate"
                    @change="startTimeChang"
-                    @focus="startFocus"
                    prefix-icon="cn-icon cn-icon-shijian"
                    type="datetime"
                    placeholder=" "
@@ -93,10 +88,8 @@
                    v-model="editObject.config.endTime"
                    size="small"
                    :format="dateFormat"
-                    :disabled="!!editObject.id"
                    :disabled-date="endDisabledDate"
                    @change="endTimeChange"
-                    @focus="endFocus"
                    prefix-icon="cn-icon cn-icon-shijian"
                    type="datetime"
                    placeholder=" "
@@ -105,41 +98,41 @@
            </div>
          </el-form-item >
          <el-form-item class="el-height">
-            <el-checkbox v-model="scheduleChecked" :disabled="editObject.config.timeConfig.type === 'customize' || !!editObject.id" :label="$t('report.enableTimeSchedule')" size="large" />
+            <el-checkbox v-model="scheduleChecked" :disabled="editObject.config.timeConfig.type === 'customize'" :label="$t('report.enableTimeSchedule')" size="large" />
          </el-form-item>
          <!--Enable time schedule-->
          <el-form-item prop="enableTimeSchedule" v-if="scheduleChecked">
            <div class="enable-tab">
-              <div class="enable-tabs" @click="editObject.id ? null : (scheduleType = type.value)" v-for="type in scheduleTypeList" :key="type.value" :class="{'active': scheduleType === type.value, 'disable': editObject.id}">{{$t(type.name)}}</div>
+              <div class="enable-tabs" @click="scheduleTypeChange(type.value)" v-for="type in scheduleTypeList" :key="type.value" :class="{'active': scheduleType === type.value}">{{$t(type.name)}}</div>
            </div>
            <div class="enable-tabs-daily" v-if="scheduleType === scheduleTypeList[0].value">
              <div class="enable-tabs-custom">{{$t('report.customEvery')}}</div>
-              <el-input v-model.number="editObject.config.schedulerConfig.interval" size="small" placeholder=" " style="margin-top: 0.3125rem;" :disabled="!!editObject.id">
+              <el-input v-model.number="editObject.config.schedulerConfig.interval" size="small" placeholder=" " style="margin-top: 0.3125rem;">
                <template #append>{{$t('report.day')}}</template>
              </el-input>
            </div>
-            <div class="enable-tabs-weekly" v-else-if="scheduleType === scheduleTypeList[1].value" :disabled="!!editObject.id">
+            <div class="enable-tabs-weekly" v-else-if="scheduleType === scheduleTypeList[1].value">
              <!-- 每隔几周暂时隐藏 -->
              <!-- <div class="enable-tabs-custom">{{$t('report.customEvery')}}</div>
              <el-input v-model="editObject.config.schedulerConfig.interval" size="small" placeholder="Please input">
                <template #append>{{$t('report.week')}}</template>
              </el-input>-->
-              <el-checkbox-group v-model="editObject.config.schedulerConfig.weekDates" style="margin-top: 0.3125rem" :disabled="!!editObject.id">
+              <el-checkbox-group v-model="editObject.config.schedulerConfig.weekDates" style="margin-top: 0.3125rem">
                <el-checkbox v-for="(item, index) in weekdayList" :key="index" :label="item.value">{{$t(item.name)}}</el-checkbox>
              </el-checkbox-group>
            </div>
            <!-- 月 -->
            <div class="enable-tabs-per-month" v-else-if="scheduleType === scheduleTypeList[2].value">
              <div class="enable-month-tab">
-                <div class="enable-month-tabs" @click="editObject.id ? null : (monthScheduleType = 'daily')" :class="{'active': monthScheduleType === 'daily', 'disable': editObject.id}">{{$t('report.date')}}</div>
-                <div class="enable-month-tabs" @click="editObject.id ? null : (monthScheduleType = 'weekly')" :class="{'active': monthScheduleType === 'weekly', 'disable': editObject.id}">{{$t('report.week')}}</div>
-                <el-checkbox v-model="monthIsCycle" :label="$t('report.cycle')" size="large" :disabled="!!editObject.id"/>
+                <div class="enable-month-tabs" @click="monthScheduleType = 'daily'" :class="{'active': monthScheduleType === 'daily'}">{{$t('report.date')}}</div>
+                <div class="enable-month-tabs" @click="monthScheduleType = 'weekly'" :class="{'active': monthScheduleType === 'weekly'}">{{$t('report.week')}}</div>
+                <el-checkbox v-model="monthIsCycle" :label="$t('report.cycle')" size="large"/>
              </div>
              <div class="enable-month-data-tab">
                <!-- 自定义月，循环 -->
                <template v-if="monthIsCycle">
                  <div class="enable-tabs-custom">{{$t('report.customEvery')}}</div>
-                  <el-input v-model="editObject.config.schedulerConfig.interval" size="small" placeholder=" " style="margin-top: 0.3125rem;" :disabled="!!editObject.id">
+                  <el-input v-model="editObject.config.schedulerConfig.interval" size="small" placeholder=" " style="margin-top: 0.3125rem;">
                    <template #append>{{$t('report.month')}}</template>
                  </el-input>
                </template>
@@ -147,8 +140,8 @@
                <template v-else>
                  <div class="enable-month-moon-custom">{{$t('report.custom')}}</div>
                  <div class="enable-month-all">
-                    <el-checkbox v-model="monthCheckedAll" class="enable-month-all-months" :indeterminate="monthIsIndeterminate" @change="monthCheckAllChange" :label="$t('report.allMonths')" :disabled="!!editObject.id"/>
-                    <el-checkbox-group v-model="editObject.config.schedulerConfig.months" @change="monthCheckChange" :disabled="!!editObject.id">
+                    <el-checkbox v-model="monthCheckedAll" class="enable-month-all-months" :indeterminate="monthIsIndeterminate" @change="monthCheckAllChange" :label="$t('report.allMonths')"/>
+                    <el-checkbox-group v-model="editObject.config.schedulerConfig.months" @change="monthCheckChange">
                      <el-checkbox v-for="(item, index) in monthList" :key="index" :label="item.value">{{$t(item.name)}}</el-checkbox>
                    </el-checkbox-group>
                  </div>
@@ -156,8 +149,8 @@
                <!-- 按日期 -->
                <template v-if="monthScheduleType === 'daily'">
                  <div class="enable-month-data-tabs">
-                    <el-checkbox v-model="dateCheckedAll" :indeterminate="dateIsIndeterminate" @change="dateCheckAllChange" :label="$t('report.all')" size="large" :disabled="!!editObject.id"/>
-                    <el-checkbox-group v-model="editObject.config.schedulerConfig.monthDates" @change="dateCheckChange" :disabled="!!editObject.id">
+                    <el-checkbox v-model="dateCheckedAll" :indeterminate="dateIsIndeterminate" @change="dateCheckAllChange" :label="$t('report.all')" size="large"/>
+                    <el-checkbox-group v-model="editObject.config.schedulerConfig.monthDates" @change="dateCheckChange">
                      <el-checkbox v-for="item in dateList" :key="item" :label="item"/>
                    </el-checkbox-group>
                  </div>
@@ -170,7 +163,6 @@
                             class="right-box__select"
                             multiple
                             placeholder=" "
-                             :disabled="!!editObject.id"
                             popper-class="right-box-select-dropdown right-box-select-report"
                             size="small"
                             @change="()=>{ this.$forceUpdate() }">
@@ -179,8 +171,8 @@
                    </template>
                  </el-select>
                  <div class="enable-month-week">
-                    <el-checkbox v-model="monthWeekdayCheckedAll" class="enable-month-week-all" :label="$t('report.all')" :indeterminate="monthWeekdayIsIndeterminate" @change="monthWeekdayCheckAllChange" size="large" :disabled="!!editObject.id"/>
-                    <el-checkbox-group v-model="editObject.config.schedulerConfig.weekDates" @change="monthWeekdayCheckChange" :disabled="!!editObject.id">
+                    <el-checkbox v-model="monthWeekdayCheckedAll" class="enable-month-week-all" :label="$t('report.all')" :indeterminate="monthWeekdayIsIndeterminate" @change="monthWeekdayCheckAllChange" size="large"/>
+                    <el-checkbox-group v-model="editObject.config.schedulerConfig.weekDates" @change="monthWeekdayCheckChange">
                      <el-checkbox v-for="(item, index) in weekdayList" :key="index" :label="item.value">{{$t(item.name)}}</el-checkbox>
                    </el-checkbox-group>
                  </div>
@@ -230,7 +222,7 @@
                       :disabled="!!editObject.id"
                       popper-class="right-box-select-dropdown right-box-select-report"
                       size="small"
-                       @change="typeChange">
+            >
              <template v-for="category in categoryList" :key="category.id">
                <el-option :label="category.name" :value="category.id"></el-option>
              </template>
@@ -283,28 +275,8 @@ import { api } from '@/utils/api'
 import _ from 'lodash'
 import { get, post, put } from '@/utils/http'
 import { dateFormat, getMillisecond } from '@/utils/date-util'
-import { ref } from 'vue'
-const paramValidator = (rule, value, callback) => {
-  let validate = true
-  if (value && value.length > 0) {
-    const hasEmpty = value.some(v => {
-      return !v.value && v.value !== 0
-    })
-    validate = !hasEmpty
-  }
-  return validate
-}
-const nameValidator = (rule, value, callback) => {
-  let validate = true
-  const reg = /^[\u4e00-\u9fa5A-Za-z0-9\-\_]*$/
-  if (reg.test(value)) {
-    validate = true
-  } else {
-    validate = false
-  }
-  return validate
-}
-
+import { ref, getCurrentInstance } from 'vue'
+import i18n from '@/i18n'
 export default {
  name: 'ReportBox',
  mixins: [rightBoxMixin],
@@ -313,32 +285,21 @@ export default {
    currentCategoryId: Number
  },
  setup () {
+    const { proxy } = getCurrentInstance()
+
    const startTime = ref('')
    const endTime = ref('')
-    const focus = ref('')
-    const focusDate = ref('')
    function endTimeChange (val) {
      endTime.value = val
    }
    function startTimeChang (val) {
      startTime.value = val
    }
-    function startFocus (val) {
-      focus.value = val.target.value
-    }
-    function endFocus (val) {
-      focusDate.value = val.target.value
-    }
    const endDisabledDate = (time) => {
      if (time.getTime() > new Date()) {
        return true
      }
-      if (startTime.value != '' && startTime.value > time) {
-        return true
-      }
-      if (focusDate.value != '' && endTime.value > time) {
-        return false
-      } else if (endTime.value != '' && endTime.value < time) {
+      if (startTime.value !== '' && startTime.value > time) {
        return true
      }
    }
@@ -346,22 +307,71 @@ export default {
      if (time.getTime() > new Date()) {
        return true
      }
-      if (focus.value != '' && startTime.value > time) {
-        return false
-      } else if (startTime.value != '' && startTime.value > time) {
+      if (endTime.value !== '' && endTime.value < time) {
        return true
      }
-      if (endTime.value != '' && endTime.value < time) {
-        return true
+    }
+
+    const paramValidator = (rule, value, callback) => {
+      let validate = true
+      if (value && value.length > 0) {
+        const hasEmpty = value.some(v => {
+          return !v.value && v.value !== 0
+        })
+        validate = !hasEmpty
      }
+      return validate
+    }
+    const nameValidator = (rule, value, callback) => {
+      let validate = true
+      const reg = /^[\u4e00-\u9fa5A-Za-z0-9\-\_]*$/
+      validate = reg.test(value)
+      return validate
+    }
+    const startTimeValidator = (rule, value, callback) => {
+      const form = proxy.$refs.reportForm
+      if (form.model.config.endTime) {
+        form.validateField('config.endTime', () => null)
+      }
+      callback()
+    }
+    const endTimeValidator = (rule, value, callback) => {
+      let validate = true
+      if (startTime.value !== '' && value <= startTime.value) {
+        validate = false
+      }
+      return validate
+    }
+    const rules = { // 表单校验规则
+      name: [
+        { required: true, message: i18n.global.t('validate.required'), trigger: 'blur' },
+        { validator: nameValidator, message: i18n.global.t('validate.onlyAllowNumberLetterChinese-_'), trigger: 'blur' }
+      ],
+      categoryId: [
+        { required: true, message: i18n.global.t('validate.required'), trigger: 'change' }
+      ],
+      schedulerStart: [
+        { required: true, message: i18n.global.t('validate.required'), trigger: 'change' }
+      ],
+      'config.startTime': [
+        { required: true, message: i18n.global.t('validate.required'), trigger: 'change' },
+        { validator: startTimeValidator, trigger: 'change' }
+      ],
+      'config.endTime': [
+        { required: true, message: i18n.global.t('validate.required'), trigger: 'change' },
+        { validator: endTimeValidator, message: i18n.global.t('validate.endTimeGreaterThanStart'), trigger: 'change' }
+      ],
+      categoryParams: [
+        { required: true, message: i18n.global.t('validate.required'), trigger: 'blur' },
+        { validator: paramValidator, message: i18n.global.t('validate.required'), trigger: 'blur' }
+      ]
    }
    return {
      endDisabledDate,
      startDisabledDate,
      startTimeChang,
      endTimeChange,
-      startFocus,
-      endFocus
+      rules
    }
  },
  data () {
@@ -391,48 +401,20 @@ export default {
      monthWeekdayCheckedAll: false,
      monthWeekdayIsIndeterminate: false,

-      rules: { // 表单校验规则
-        name: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
-          { validator: nameValidator, message: this.$t('validate.onlyAllowNumberLetterChinese-_'), trigger: 'blur' }
-        ],
-        categoryId: [
-          { required: true, message: this.$t('validate.required'), trigger: 'change' }
-        ],
-        schedulerStart: [
-          { required: true, message: this.$t('validate.required'), trigger: 'change' }
-        ],
-        'config.startTime': [
-          { required: true, message: this.$t('validate.required'), trigger: 'change' }
-        ],
-        'config.endTime': [
-          { required: true, message: this.$t('validate.required'), trigger: 'change' }
-        ],
-        categoryParams: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
-          { validator: paramValidator, message: this.$t('validate.required'), trigger: 'blur' }
-        ]
-      },
      paramsOptions: []
    }
  },
  watch: {
    scheduleType (n, o) {
      this.editObject.config.schedulerConfig.type = n
-      if (!this.editObject.id) {
-        this.cleanScheduleConfig()
-      }
+      this.cleanScheduleConfig()
    },
    scheduleChecked (n) {
      this.editObject.config.isScheduler = n ? 1 : 0
-      if (!this.editObject.id) {
-        this.cleanScheduleConfig()
-      }
+      this.cleanScheduleConfig()
    },
    monthScheduleType (n) {
-      if (!this.editObject.id) {
-        this.cleanScheduleConfig()
-      }
+      this.cleanScheduleConfig()
    },
    monthIsCycle (n) {
      if (!this.editObject.id) {
@@ -566,15 +548,13 @@ export default {
          this.editObject.config.timeConfig.offset--
        }
      }
-    },
-    typeChange (id) {
-
    },
    cleanScheduleConfig () {
      this.editObject.config.schedulerConfig.monthDates = []
      this.editObject.config.schedulerConfig.weekDates = []
      this.editObject.config.schedulerConfig.months = []
      this.editObject.config.schedulerConfig.monthWeekDates = []
+      this.editObject.config.schedulerConfig.interval = 1
      this.monthIsCycle = true
      this.dateCheckedAll = false
      this.dateIsIndeterminate = false
@@ -588,11 +568,14 @@ export default {
        this.scheduleChecked = false
      }
    },
+    scheduleTypeChange (val) {
+      this.scheduleType = val
+    },
    save () {
      if (this.blockOperation.save) { return }
      this.blockOperation.save = true

-      this.$refs.userForm.validate((valid) => {
+      this.$refs.reportForm.validate((valid) => {
        if (valid) {
          let startTime = ''
          let endTime = ''
--- a/src/components/table/ColumnCustomize.vue
+++ b/src/components/table/ColumnCustomize.vue
@@ -25,12 +25,12 @@
      <el-button size="mini" v-if="!isCancel" :id="tableId+'-element-set-all'" class="cn-btn cn-btn-size-small-new cn-btn-style-light-new" type="button" @click="batchHandler(true)">
        <span class="top-tool-btn-txt">{{$t('overall.all')}}</span>
      </el-button>
-      <div>
+      <div class="custom-bottom-btns-right">
        <el-button size="mini" :id="tableId+'-element-set-esc'" class="cn-btn cn-btn-size-small-new cn-btn-style-light-new" type="button" @click="esc">
          <span class="top-tool-btn-txt">{{$t('overall.cancel')}}</span>
        </el-button>
        <el-button size="mini" :id="tableId+'-element-set-save'" class="cn-btn cn-btn-size-small-new cn-btn-style-normal-new" type="button" @click="save" style="background-color: #0091ff;color:#DCDFE6">
-          <span class="top-tool-btn-txt">{{$t('overall.save')}}</span>
+          <span class="top-tool-btn-txt top-tool-btn-save">{{$t('overall.save')}}</span>
        </el-button>
      </div>
    </div>
--- 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 }"
--- 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/indexedDB/index.js
+++ b/src/indexedDB/index.js
@@ -1,8 +1,19 @@
 import { dbName, dbGeoDataTableName, dbDrilldownTableConfig } from '@/utils/constants'
 import Dexie from 'dexie'
+/* https://dexie.org/ */

-export const db = new Dexie(dbName)
-db.version(2).stores({
+const db = new Dexie(dbName)
+db.version(3).stores({
  [dbGeoDataTableName]: '++name, geo',
-  [dbDrilldownTableConfig]: '++id, config'
+  [dbDrilldownTableConfig]: '++id, config',
+  test: '++id, name'
 })
+function selectTable (tableName) {
+  return db[tableName]
+}
+
+const indexedDBUtils = {
+  db,
+  selectTable
+}
+export default indexedDBUtils
--- 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
@@ -20,6 +20,7 @@ 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()
@@ -46,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/common.js
+++ b/src/mixins/common.js
@@ -1,6 +1,5 @@
 import { hasButton } from '@/permission'
 import { dateFormatByAppearance } from '@/utils/date-util'
-import { storageKey } from '@/utils/constants'
 export default {
  data () {
    return {
@@ -21,7 +20,9 @@ export default {
        query: false
      },
      timeout: null,
-      debounceFunc: null
+      debounceFunc: null,
+      // 是否正在单元测试
+      isUnitTesting: false
    }
  },
  methods: {
--- 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",
-      "code": 200,
-      "data": {
-        "total": 1,
-        "pageSize": 10,
-        "pages": 1,
-        "pageNo": 1,
-        "list": [
+      msg: 'success',
+      code: 200,
+      data: {
+        total: 1,
+        pageSize: 10,
+        pages: 1,
+        pageNo: 1,
+        list: [
          {
-            "id": 2,
-            "name": "Network & App",
-            "i18n": "npm.npm",
-            "type": 2,
-            "params": "",
-            "cby": 1,
-            "ctime": "2021-06-03 08:27:32",
-            "uby": 1,
-            "utime": "2021-06-03 08:28:10",
-            "remark": "",
-            "state": 1,
-            "buildIn": 1
+            id: 2,
+            name: 'Network & App',
+            i18n: 'npm.npm',
+            type: 2,
+            params: '',
+            cby: 1,
+            ctime: '2021-06-03 08:27:32',
+            uby: 1,
+            utime: '2021-06-03 08:28:10',
+            remark: '',
+            state: 1,
+            buildIn: 1
          }
        ]
      }
--- 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
@@ -55,7 +55,12 @@ const panel = {
    timeRangeArray: [], // 时间范围列表：开始/结束时间
    timeRangeFlag: null, // 时间范围标志，默认60即一小时，-1为手动选择的时间范围
    routerPath: '', // 当前路由路径
-    httpCancel: null // 终止http请求
+    httpCancel: null, // 终止http请求
+    rangeEchartsData: {}, // 框选echarts图表
+    routerHistoryList: [], // 路由跳转记录列表
+    dnsQtypeMapData: [],
+    dnsRcodeMapData: [],
+    chartTabList: null // chartTabs组件的tab状态点击列表，初始化为null方便原有逻辑计算
  },
  mutations: {
    setShowRightBox (state, flag) {
@@ -106,36 +111,15 @@ const panel = {
    setCurrentMap (state, currentMap) {
      state.currentMap = currentMap
    },
-    // setPanelName (state, panelName) {
-    // state.panelName = panelName
-    // },
-    // setBreadcrumbColumnName (state, breadcrumbColumnName) {
-    // state.breadcrumbColumnName = breadcrumbColumnName
-    // },
-    // setDimensionType (state, dimensionType) {
-    // state.dimensionType = dimensionType
-    // },
-    // setBreadcrumbColumnValue (state, breadcrumbColumnValue) {
-    // state.breadcrumbColumnValue = breadcrumbColumnValue
-    // },
-    // setNetworkOverviewCurrentTab (state, networkOverviewCurrentTab) {
-    // state.networkOverviewCurrentTab = networkOverviewCurrentTab
-    // },
-    // setQueryCondition (state, queryCondition) {
-    // state.queryCondition = queryCondition
-    // },
+    setDnsQtypeMapData (state, dnsQtypeMapData) {
+      state.dnsQtypeMapData = dnsQtypeMapData
+    },
+    setDnsRcodeMapData (state, dnsRcodeMapData) {
+      state.dnsRcodeMapData = dnsRcodeMapData
+    },
    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
    },
@@ -162,6 +146,15 @@ const panel = {
    },
    setHttpCancel (state, cancel) {
      state.httpCancel = cancel
+    },
+    setRangeEchartsData (state, data) {
+      state.rangeEchartsData = data
+    },
+    setRouterHistoryList (state, list) {
+      state.routerHistoryList = list
+    },
+    setChartTabList (state, list) {
+      state.chartTabList = list
    }
  },
  getters: {
@@ -207,36 +200,15 @@ const panel = {
    getCurrentMap (state) {
      return state.currentMap
    },
-    // getPanelName (state) {
-    // return state.panelName
-    // },
-    // getBreadcrumbColumnName (state) {
-    // return state.breadcrumbColumnName
-    // },
-    // getDimensionType (state) {
-    // return state.dimensionType
-    // },
-    // getBreadcrumbColumnValue (state) {
-    // return state.breadcrumbColumnValue
-    // },
-    // getNetworkOverviewCurrentTab (state) {
-    // return state.networkOverviewCurrentTab
-    // },
-    // getQueryCondition (state) {
-    // return state.queryCondition
-    // },
+    getDnsQtypeMapData (state) {
+      return state.dnsQtypeMapData
+    },
+    getDnsRcodeMapData (state) {
+      return state.dnsRcodeMapData
+    },
    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
    },
@@ -254,6 +226,12 @@ const panel = {
    },
    getRouterPath (state) {
      return state.routerPath
+    },
+    getRouterHistoryList (state) {
+      return state.routerHistoryList
+    },
+    getChartTabList (state) {
+      return state.chartTabList
    }
  },
  actions: {
@@ -282,6 +260,9 @@ const panel = {
    },
    clearPanel (store) {
      store.commit('cleanPanel')
+    },
+    dispatchChartTabList (store, list) {
+      store.commit('setChartTabList', list)
    }
  }
 }
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -3,9 +3,9 @@ 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 { readDrilldownTableConfigByUser } from '@/utils/tools'
+import { getConfigVersion } from '@/utils/tools'
 import { api } from '@/utils/api'
-import { db } from '@/indexedDB'
+import indexedDBUtils from '@/indexedDB'

 const user = {
  state () {
@@ -64,9 +64,9 @@ const user = {
          if (tempArr[1]) {
            tempArr = tempArr[1].split('&')
            tempArr.forEach(t => {
-              let firstEqualIndex = t.indexOf('=')
-              let key = t.substring(0, firstEqualIndex)
-              let value = t.substring(firstEqualIndex + 1)
+              const firstEqualIndex = t.indexOf('=')
+              const key = t.substring(0, firstEqualIndex)
+              const value = t.substring(firstEqualIndex + 1)
              query[key] = value
            })
          }
@@ -92,10 +92,16 @@ const user = {
        if (res.code === 200 && res.page.list && res.page.list.length > 0) {
          // 从接口返回整体配置，再读取用户缓存，将对应条目覆盖，作为使用的配置
          const defaultConfigs = JSON.parse(res.page.list[0].cvalue)
-          await db[dbDrilldownTableConfig].put({
+          await indexedDBUtils.selectTable(dbDrilldownTableConfig).put({
            id: 'default',
-            config: defaultConfigs
+            version: defaultConfigs.version,
+            config: defaultConfigs.config
          })
+          const userId = localStorage.getItem(storageKey.userId)
+          const oldVersion = await getConfigVersion(userId)
+          if (oldVersion !== defaultConfigs.version) {
+            indexedDBUtils.selectTable(dbDrilldownTableConfig).delete(userId)
+          }
        }
      })
      get(api.config, { ckey: 'link_info' }).then(res => {
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -172,6 +172,8 @@ export const api = {
      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',
@@ -316,11 +318,12 @@ export async function getI18n () {

 /* 获得原始的3611-2 json字符串数据 */
 export async function getIso36112JsonData (suffix) {
+  const url = `${window.location.protocol}//${window.location.host}/geojson/${suffix}.json`
  const request = new Promise(resolve => {
-    axios({
-      url: `${window.location.protocol}//${window.location.host}:${window.location.port}/geojson/${suffix}.json`
-    }).then(response => {
+    axios({ url }).then(response => {
      resolve(response.data || response || null)
+    }).catch(err => {
+      console.error(err)
    })
  })
  return await request
--- a/src/utils/constants.js
+++ b/src/utils/constants.js
@@ -1,6 +1,8 @@
 export const defaultPageSize = 20

+// indexedDB库名
 export const dbName = 'cn-db'
+// indexedDB表名
 export const dbGeoDataTableName = 'geodata'
 export const dbDrilldownTableConfig = 'cn-drilldown-table-config'
 export const storageKey = {
@@ -291,7 +293,8 @@ export const curTabState = {
  fourthPanel: 'fourthPanel',
  networkOverviewBeforeTab: 'networkOverviewBeforeTab',
  tabOperationType: 'tabOperationType',
-  tabOperationBeforeType: 'tabOperationBeforeType'
+  tabOperationBeforeType: 'tabOperationBeforeType',
+  tabIndex: 'tabIndex'
 }

 export const scoreUrl = [
@@ -652,6 +655,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
  }
 ]

@@ -784,6 +899,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 = [
@@ -915,6 +1142,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 = [
--- a/src/utils/tools.js
+++ b/src/utils/tools.js
@@ -2,10 +2,10 @@ 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,getDictList } from '@/utils/api'
+import { getIso36112JsonData, getDictList } from '@/utils/api'
 import { format } from 'echarts'
 import router from '@/router'
-import { db } from '@/indexedDB'
+import indexedDBUtils from '@/indexedDB'

 export const tableSort = {
  // 是否需要排序
@@ -414,7 +414,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')
@@ -488,11 +487,11 @@ export function loadGeoData () {
  keys.push(storageKey.iso36112Capital)
  keys.push(storageKey.iso36112WorldLow)
  keys.forEach(async k => {
-    const queryData = await db[dbGeoDataTableName].get({ name: k })
+    const queryData = await indexedDBUtils.selectTable(dbGeoDataTableName).get({ name: k })
    if (!queryData) {
      const data = await getIso36112JsonData(iso36112[k])
      if (data) {
-        db[dbGeoDataTableName].add({
+        indexedDBUtils.selectTable(dbGeoDataTableName).add({
          name: k,
          geo: data
        })
@@ -505,14 +504,14 @@ export function loadGeoData () {
 *  使用indexedDB缓存地图数据
 *  */
 export async function getGeoData (key) {
-  const data = await db[dbGeoDataTableName].get({ name: key })
+  const data = await indexedDBUtils.selectTable(dbGeoDataTableName).get({ name: key })
  if (data) {
    return data.geo
  } else {
    if (iso36112[key]) {
      const d = await getIso36112JsonData(iso36112[key])
      if (d) {
-        db[dbGeoDataTableName].add({
+        indexedDBUtils.selectTable(dbGeoDataTableName).add({
          name: key,
          geo: d
        })
@@ -840,7 +839,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 : []
@@ -855,29 +853,37 @@ export function getTabList (curTable, curMetric) {
  }
  return tabs
 }
-export async function getDnsMapData(type){
-  let codeValueMap = new Map()
-  const dnsData = await getDictList({ type:type,pageSize: -1 })
-  if(dnsData && dnsData.length>0) {
+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 => {
-      let code = mapData.code
-      if(code.indexOf('-')>-1){
-        let range = mapData.code.split('-')
-        if(range && range.length >= 2){
-          let start = range[0].trim()
-          let eEnd = range[1].trim()
-          mapData.value = (start <= code && code <= eEnd) ? mapData.value : code
+      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++) {
-            codeValueMap.set(i,mapData.value)
+            mapData.value = (start <= i && i <= eEnd) ? mapData.value : i
+            codeValueMap.set(i, mapData.value)
          }
        }
-      }else {
-        codeValueMap.set(code,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 : []
@@ -927,77 +933,95 @@ export async function getDefaultCurTab (tableType, metric, columnName) {
  return curTab
 }

-export async function readDrilldownTableConfigByUser (tableType, curMetric) {
+export async function readDrilldownTableConfigByUser () {
  // 获取用户定制的自定义配置
  const userId = localStorage.getItem(storageKey.userId)
-  const userLocalCongfig = await db[dbDrilldownTableConfig].get({ id: userId })
+  const userLocalConfig = await indexedDBUtils.selectTable(dbDrilldownTableConfig).get({ id: userId })
  let defaultDrillDownTableConfigs = []
-  if (userLocalCongfig) {
-    defaultDrillDownTableConfigs = userLocalCongfig.config
+  if (userLocalConfig) {
+    defaultDrillDownTableConfigs = userLocalConfig.config
  }
  return defaultDrillDownTableConfigs
 }

-export async function combinDrilldownTableWithUserConfig () {
-  const defaultCongfigInDb = await db[dbDrilldownTableConfig].get({ id: 'default' })
-  const defaultConfigs = defaultCongfigInDb ? defaultCongfigInDb.config : []
-  const curUserConfig = await readDrilldownTableConfigByUser()
-  if (defaultConfigs && curUserConfig && curUserConfig.length > 0) {
-    defaultConfigs.forEach(defaultConfig => {
-      const currentTableConfig = curUserConfig.find(config => config.route === defaultConfig.route)
-      if (currentTableConfig) {
-        const tableConfig = defaultConfig.tables.find(table => table.id === defaultConfig.route)
-        const newTableConfig = currentTableConfig.tables.find(table => table.id === defaultConfig.route)
-        tableConfig.hiddenColumns = newTableConfig.hiddenColumns
-        tableConfig.tabs.forEach(tab => {
-          const newTab = newTableConfig.tabs.find(newTab => newTab.name === tab.name)
-          tab.hiddenDrilldownTabs = newTab.hiddenDrilldownTabs
-          tab.checked = newTab.checked
+export async function getConfigVersion (id) {
+  let defaultConfigInDb = await indexedDBUtils.selectTable(dbDrilldownTableConfig).get({ id: id })
+  if (!defaultConfigInDb) {
+    defaultConfigInDb = await indexedDBUtils.selectTable(dbDrilldownTableConfig).get({ id: 'default' })
+  }
+  return defaultConfigInDb.version || ''
+}
+
+export async function combineDrilldownTableWithUserConfig () {
+  const defaultConfigInDb = await indexedDBUtils.selectTable(dbDrilldownTableConfig).get({ id: 'default' })
+  const defaultConfigGroup = defaultConfigInDb ? defaultConfigInDb.config : []
+  const currentUserConfigGroup = await readDrilldownTableConfigByUser()
+  if (defaultConfigGroup && currentUserConfigGroup && currentUserConfigGroup.length > 0) {
+    defaultConfigGroup.forEach(defaultConfig => {
+      const currentUserConfig = currentUserConfigGroup.find(config => config.route === defaultConfig.route)
+      if (currentUserConfig) {
+        const defaultTableConfig = defaultConfig.tables.find(table => table.id === defaultConfig.route)
+        const currentUserTableConfig = currentUserConfig.tables.find(table => table.id === defaultConfig.route)
+        defaultTableConfig.hiddenColumns = currentUserTableConfig.hiddenColumns
+        const sortTabs = []
+        currentUserTableConfig.tabs.forEach(currentUserTab => {
+          const defaultTab = defaultTableConfig.tabs.find(tab => tab.name === currentUserTab.name)
+          if (defaultTab) {
+            defaultTab.hiddenDrilldownTabs = currentUserTab.hiddenDrilldownTabs
+            defaultTab.checked = currentUserTab.checked
+            if (defaultTab && defaultTab.hasMetricSearch === true) {
+              defaultTab.metrics.forEach(metric => {
+                if (currentUserTableConfig.columns) {
+                  const sortColumns = []
+                  sortColumns.push(metric.columns[0])
+                  currentUserTableConfig.columns.forEach((column, index) => {
+                    const sortColumn = metric.columns.find(metricColumn => {
+                      if (metricColumn.name) {
+                        return metricColumn.name === column
+                      } else {
+                        return metricColumn === column
+                      }
+                    })
+                    if (sortColumn) {
+                      sortColumns.push(sortColumn)
+                    }
+                  })
+                  metric.columns = sortColumns
+                }
+              })
+            } else {
+              if (currentUserTableConfig.columns) {
+                const sortColumns = []
+                sortColumns.push(defaultTab.columns[0])
+                currentUserTableConfig.columns.forEach((column, index) => {
+                  const sortColumn = defaultTab.columns.find(metricColumn => {
+                    if (metricColumn.name) {
+                      return metricColumn.name === column
+                    } else {
+                      return metricColumn === column
+                    }
+                  })
+                  if (sortColumn) {
+                    sortColumns.push(sortColumn)
+                  }
+                })
+                defaultTab.columns = sortColumns
+              }
+            }
+            sortTabs.push(defaultTab)
+          }
        })
+        defaultTableConfig.tabs = sortTabs
      }
    })
  }
-  return defaultConfigs
+  return defaultConfigGroup
 }

-/*
-export async function readDrilldownTableConfigByUser2 (tableType, curMetric) {
-  let list = []
-  // 获取用户定制的自定义配置，如果没有，则使用默认的自定义配置
-  const userId = localStorage.getItem(storageKey.userId)
-  const userLocalCongfig = await db[dbDrilldownTableConfig].get({ id: userId })
-  let defaultDrillDownTableConfigs = []
-  if (userLocalCongfig) {
-    defaultDrillDownTableConfigs = userLocalCongfig.config
-    if(defaultDrillDownTableConfigs && defaultDrillDownTableConfigs.length > 0){
-      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
-            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)
-        }
-      }
-    }
-  }
-  return list
-}
-*/
 export async function getUserDrilldownTableConfig (tableType, curMetric) {
  let list = []
  // 获取用户定制的自定义配置，如果没有，则使用默认的自定义配置
-  const drillDownTableConfigs = await combinDrilldownTableWithUserConfig()
+  const drillDownTableConfigs = await combineDrilldownTableWithUserConfig()
  const currentTableConfig = drillDownTableConfigs.find(config => config.route === tableType)
  const commonTabList = currentTableConfig ? currentTableConfig.tabs : []
  const tables = currentTableConfig ? currentTableConfig.tables : []
@@ -1032,7 +1056,7 @@ export function urlParamsHandler (url, oldParams, newParams, cleanOldParams) {
 }

 export function overwriteUrl (url) {
-  window.history.replaceState('', '', url)
+  window.history.replaceState({}, '', url)
 }

 /*
@@ -1061,3 +1085,64 @@ export function colorGradientCalculation (startColor, endColor, values) {
 export function colorHexToRgbArr (hex) {
  return [1, 3, 5].map((h) => parseInt(hex.substring(h, h + 2), 16))
 }
+
+/**
+ * 通过事件类型eventType转换对应名称
+ * @param type
+ * @returns {string}
+ */
+export function getNameByEventType (type) {
+  switch (type) {
+    case 'http error': {
+      return 'http error ratio'
+    }
+    case 'dns error': {
+      return 'dns error ratio'
+    }
+    case 'high dns response time': {
+      return 'dns response time'
+    }
+  }
+}
+/**
+ 折线图通过事件类型 type 转换对应名称
+ */
+export function getLineType (type) {
+  switch (type) {
+    case 'bytes': {
+      return 'Bits/s'
+    }
+    case 'packets': {
+      return 'Packets/s'
+    }
+    case 'sessions': {
+      return 'Sessions/s'
+    }
+    case 'queries': {
+      return 'Queries/s'
+    }
+    default: return type
+  }
+}
+/**
+ npm折线图通过事件类型 type 转换对应 index 以及 unit
+ */
+export function getLineIndexUnit (type, show) {
+  switch (type) {
+    case 'establishLatencyMs': {
+      return show ? '(ms)' : 0
+    }
+    case 'tcpLostlenPercent': {
+      return show ? '(%)' : 3
+    }
+    case 'pktRetransPercent': {
+      return show ? '(%)' : 4
+    }
+    case 'httpResponseLatency': {
+      return show ? '(ms)' : 1
+    }
+    case 'sslConLatency': {
+      return show ? '(ms)' : 2
+    }
+  }
+}
--- 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/Show More
+++ b/Show More