fix: 还原实体界面修改

fix: 1、实体列表左侧filter对应接口字段修改；2、精简实体首页实体展示代码
fix: 实体部分接口版本修改
2024-11-28 17:14:49 +08:00 · 2024-11-28 17:00:18 +08:00 · 2024-11-28 15:33:16 +08:00 · 2024-11-27 17:38:30 +08:00 · 2024-11-26 18:34:22 +08:00 · 2024-11-21 18:06:56 +08:00
157 changed files with 16107 additions and 7023 deletions
--- a/2
+++ b/2
@@ -1,4 +1,4 @@
-FROM nginx:latest
+FROM 192.168.40.153:9080/common/nginx-cn:1.0.0

 MAINTAINER shizhendong shizhendong@zdjizhi.com

--- a/package-lock.json
+++ b/package-lock.json
@@ -2761,6 +2761,21 @@
          "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
          "dev": true
        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
        "emoji-regex": {
          "version": "9.2.2",
          "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-9.2.2.tgz",
@@ -2778,6 +2793,40 @@
            "strip-ansi": "^7.0.1"
          }
        },
+        "string-width-cjs": {
+          "version": "npm:string-width@4.2.3",
+          "resolved": "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz",
+          "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+          "dev": true,
+          "requires": {
+            "emoji-regex": "^8.0.0",
+            "is-fullwidth-code-point": "^3.0.0",
+            "strip-ansi": "^6.0.1"
+          },
+          "dependencies": {
+            "ansi-regex": {
+              "version": "5.0.1",
+              "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",
+              "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+              "dev": true
+            },
+            "emoji-regex": {
+              "version": "8.0.0",
+              "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz",
+              "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+              "dev": true
+            },
+            "strip-ansi": {
+              "version": "6.0.1",
+              "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz",
+              "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+              "dev": true,
+              "requires": {
+                "ansi-regex": "^5.0.1"
+              }
+            }
+          }
+        },
        "strip-ansi": {
          "version": "7.1.0",
          "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-7.1.0.tgz",
@@ -2787,6 +2836,23 @@
            "ansi-regex": "^6.0.1"
          }
        },
+        "strip-ansi-cjs": {
+          "version": "npm:strip-ansi@6.0.1",
+          "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz",
+          "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^5.0.1"
+          },
+          "dependencies": {
+            "ansi-regex": {
+              "version": "5.0.1",
+              "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",
+              "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+              "dev": true
+            }
+          }
+        },
        "wrap-ansi": {
          "version": "8.1.0",
          "resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
@@ -2797,6 +2863,60 @@
            "string-width": "^5.0.1",
            "strip-ansi": "^7.0.1"
          }
+        },
+        "wrap-ansi-cjs": {
+          "version": "npm:wrap-ansi@7.0.0",
+          "resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+          "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.0.0",
+            "string-width": "^4.1.0",
+            "strip-ansi": "^6.0.0"
+          },
+          "dependencies": {
+            "ansi-regex": {
+              "version": "5.0.1",
+              "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",
+              "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+              "dev": true
+            },
+            "ansi-styles": {
+              "version": "4.3.0",
+              "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
+              "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+              "dev": true,
+              "requires": {
+                "color-convert": "^2.0.1"
+              }
+            },
+            "emoji-regex": {
+              "version": "8.0.0",
+              "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz",
+              "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+              "dev": true
+            },
+            "string-width": {
+              "version": "4.2.3",
+              "resolved": "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz",
+              "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+              "dev": true,
+              "requires": {
+                "emoji-regex": "^8.0.0",
+                "is-fullwidth-code-point": "^3.0.0",
+                "strip-ansi": "^6.0.1"
+              }
+            },
+            "strip-ansi": {
+              "version": "6.0.1",
+              "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz",
+              "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+              "dev": true,
+              "requires": {
+                "ansi-regex": "^5.0.1"
+              }
+            }
+          }
        }
      }
    },
@@ -3560,6 +3680,11 @@
      "dev": true,
      "optional": true
    },
+    "@popperjs/core": {
+      "version": "npm:@sxzz/popperjs-es@2.11.7",
+      "resolved": "https://registry.npmmirror.com/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
+      "integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ=="
+    },
    "@probe.gl/env": {
      "version": "3.6.0",
      "resolved": "https://registry.npmmirror.com/@probe.gl/env/-/env-3.6.0.tgz",
@@ -4028,6 +4153,11 @@
      "integrity": "sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==",
      "dev": true
    },
+    "@tweenjs/tween.js": {
+      "version": "23.1.2",
+      "resolved": "https://registry.npmmirror.com/@tweenjs/tween.js/-/tween.js-23.1.2.tgz",
+      "integrity": "sha512-kMCNaZCJugWI86xiEHaY338CU5JpD0B97p1j1IKNn/Zto8PgACjQx0UxbHjmOcLl/dDOBnItwD07KmCs75pxtQ=="
+    },
    "@types/aria-query": {
      "version": "5.0.4",
      "resolved": "https://registry.npmmirror.com/@types/aria-query/-/aria-query-5.0.4.tgz",
@@ -4969,17 +5099,6 @@
            "color-convert": "^2.0.1"
          }
        },
-        "chalk": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
-          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
        "cliui": {
          "version": "6.0.0",
          "resolved": "https://registry.npmmirror.com/cliui/-/cliui-6.0.0.tgz",
@@ -5023,26 +5142,12 @@
            "universalify": "^0.1.0"
          }
        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
        "is-fullwidth-code-point": {
          "version": "3.0.0",
          "resolved": "https://registry.npmmirror.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
          "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
          "dev": true
        },
-        "json5": {
-          "version": "2.2.3",
-          "resolved": "https://registry.npmmirror.com/json5/-/json5-2.2.3.tgz",
-          "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
-          "dev": true,
-          "optional": true
-        },
        "jsonfile": {
          "version": "4.0.0",
          "resolved": "https://registry.npmmirror.com/jsonfile/-/jsonfile-4.0.0.tgz",
@@ -5052,18 +5157,6 @@
            "graceful-fs": "^4.1.6"
          }
        },
-        "loader-utils": {
-          "version": "2.0.4",
-          "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-2.0.4.tgz",
-          "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
        "minipass": {
          "version": "3.3.6",
          "resolved": "https://registry.npmmirror.com/minipass/-/minipass-3.3.6.tgz",
@@ -5102,28 +5195,6 @@
            "ansi-regex": "^5.0.1"
          }
        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        },
-        "vue-loader-v16": {
-          "version": "npm:vue-loader@16.8.3",
-          "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-16.8.3.tgz",
-          "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "chalk": "^4.1.0",
-            "hash-sum": "^2.0.0",
-            "loader-utils": "^2.0.0"
-          }
-        },
        "wrap-ansi": {
          "version": "6.2.0",
          "resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
@@ -5709,6 +5780,11 @@
        "negotiator": "0.6.3"
      }
    },
+    "accessor-fn": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmmirror.com/accessor-fn/-/accessor-fn-1.5.0.tgz",
+      "integrity": "sha512-dml7D96DY/K5lt4Ra2jMnpL9Bhw5HEGws4p1OAIxFFj9Utd/RxNfEO3T3f0QIWFNwQU7gNxH9snUfqF/zNkP/w=="
+    },
    "acorn": {
      "version": "7.4.1",
      "resolved": "https://registry.npmmirror.com/acorn/-/acorn-7.4.1.tgz",
@@ -6552,6 +6628,11 @@
        "tweetnacl": "^0.14.3"
      }
    },
+    "bezier-js": {
+      "version": "6.1.4",
+      "resolved": "https://registry.npmmirror.com/bezier-js/-/bezier-js-6.1.4.tgz",
+      "integrity": "sha512-PA0FW9ZpcHbojUCMu28z9Vg/fNkwTj5YhusSAjHHDfHDGLxJ6YUKrAN2vk1fP2MMOxVw4Oko16FMlRGVBGqLKg=="
+    },
    "bfj": {
      "version": "6.1.2",
      "resolved": "https://registry.npmmirror.com/bfj/-/bfj-6.1.2.tgz",
@@ -7093,6 +7174,14 @@
      "integrity": "sha512-J/jkFgsQ3NEl4w2lCoM9ZPxrD+FoBNJ7uJUpGVjIg/j0OwJosWM36EPDv+Yyi0V4twBk9pPmlFS+PLykgEvUmg==",
      "dev": true
    },
+    "canvas-color-tracker": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/canvas-color-tracker/-/canvas-color-tracker-1.2.1.tgz",
+      "integrity": "sha512-i5clg2pEdaWqHuEM/B74NZNLkHh5+OkXbA/T4iaBiaNDagkOCXkLNrhqUfdUugsRwuaNRU20e/OygzxWRor3yg==",
+      "requires": {
+        "tinycolor2": "^1.6.0"
+      }
+    },
    "capture-exit": {
      "version": "2.0.0",
      "resolved": "https://registry.npmmirror.com/capture-exit/-/capture-exit-2.0.0.tgz",
@@ -8779,6 +8868,43 @@
        "type": "^1.0.1"
      }
    },
+    "d3": {
+      "version": "7.9.0",
+      "resolved": "https://registry.npmmirror.com/d3/-/d3-7.9.0.tgz",
+      "integrity": "sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA==",
+      "requires": {
+        "d3-array": "3",
+        "d3-axis": "3",
+        "d3-brush": "3",
+        "d3-chord": "3",
+        "d3-color": "3",
+        "d3-contour": "4",
+        "d3-delaunay": "6",
+        "d3-dispatch": "3",
+        "d3-drag": "3",
+        "d3-dsv": "3",
+        "d3-ease": "3",
+        "d3-fetch": "3",
+        "d3-force": "3",
+        "d3-format": "3",
+        "d3-geo": "3",
+        "d3-hierarchy": "3",
+        "d3-interpolate": "3",
+        "d3-path": "3",
+        "d3-polygon": "3",
+        "d3-quadtree": "3",
+        "d3-random": "3",
+        "d3-scale": "4",
+        "d3-scale-chromatic": "3",
+        "d3-selection": "3",
+        "d3-shape": "3",
+        "d3-time": "3",
+        "d3-time-format": "4",
+        "d3-timer": "3",
+        "d3-transition": "3",
+        "d3-zoom": "3"
+      }
+    },
    "d3-array": {
      "version": "3.2.4",
      "resolved": "https://registry.npmmirror.com/d3-array/-/d3-array-3.2.4.tgz",
@@ -8787,21 +8913,94 @@
        "internmap": "1 - 2"
      }
    },
+    "d3-axis": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/d3-axis/-/d3-axis-3.0.0.tgz",
+      "integrity": "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw=="
+    },
+    "d3-binarytree": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/d3-binarytree/-/d3-binarytree-1.0.2.tgz",
+      "integrity": "sha512-cElUNH+sHu95L04m92pG73t2MEJXKu+GeKUN1TJkFsu93E5W8E9Sc3kHEGJKgenGvj19m6upSn2EunvMgMD2Yw=="
+    },
+    "d3-brush": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/d3-brush/-/d3-brush-3.0.0.tgz",
+      "integrity": "sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==",
+      "requires": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "3",
+        "d3-transition": "3"
+      }
+    },
+    "d3-chord": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/d3-chord/-/d3-chord-3.0.1.tgz",
+      "integrity": "sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==",
+      "requires": {
+        "d3-path": "1 - 3"
+      }
+    },
    "d3-color": {
      "version": "3.1.0",
      "resolved": "https://registry.npmmirror.com/d3-color/-/d3-color-3.1.0.tgz",
      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA=="
    },
+    "d3-contour": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmmirror.com/d3-contour/-/d3-contour-4.0.2.tgz",
+      "integrity": "sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==",
+      "requires": {
+        "d3-array": "^3.2.0"
+      }
+    },
+    "d3-delaunay": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmmirror.com/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
+      "integrity": "sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==",
+      "requires": {
+        "delaunator": "5"
+      }
+    },
    "d3-dispatch": {
      "version": "3.0.1",
      "resolved": "https://registry.npmmirror.com/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg=="
    },
+    "d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "requires": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      }
+    },
+    "d3-dsv": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/d3-dsv/-/d3-dsv-3.0.1.tgz",
+      "integrity": "sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==",
+      "requires": {
+        "commander": "7",
+        "iconv-lite": "0.6",
+        "rw": "1"
+      }
+    },
    "d3-ease": {
      "version": "3.0.1",
      "resolved": "https://registry.npmmirror.com/d3-ease/-/d3-ease-3.0.1.tgz",
      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w=="
    },
+    "d3-fetch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/d3-fetch/-/d3-fetch-3.0.1.tgz",
+      "integrity": "sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==",
+      "requires": {
+        "d3-dsv": "1 - 3"
+      }
+    },
    "d3-force": {
      "version": "3.0.0",
      "resolved": "https://registry.npmmirror.com/d3-force/-/d3-force-3.0.0.tgz",
@@ -8812,6 +9011,23 @@
        "d3-timer": "1 - 3"
      }
    },
+    "d3-force-3d": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmmirror.com/d3-force-3d/-/d3-force-3d-3.0.5.tgz",
+      "integrity": "sha512-tdwhAhoTYZY/a6eo9nR7HP3xSW/C6XvJTbeRpR92nlPzH6OiE+4MliN9feuSFd0tPtEUo+191qOhCTWx3NYifg==",
+      "requires": {
+        "d3-binarytree": "1",
+        "d3-dispatch": "1 - 3",
+        "d3-octree": "1",
+        "d3-quadtree": "1 - 3",
+        "d3-timer": "1 - 3"
+      }
+    },
+    "d3-format": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/d3-format/-/d3-format-3.1.0.tgz",
+      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA=="
+    },
    "d3-geo": {
      "version": "3.1.0",
      "resolved": "https://registry.npmmirror.com/d3-geo/-/d3-geo-3.1.0.tgz",
@@ -8830,6 +9046,11 @@
        "d3-geo": "1.12.0 - 3"
      }
    },
+    "d3-hierarchy": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmmirror.com/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz",
+      "integrity": "sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA=="
+    },
    "d3-interpolate": {
      "version": "3.0.1",
      "resolved": "https://registry.npmmirror.com/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
@@ -8838,16 +9059,81 @@
        "d3-color": "1 - 3"
      }
    },
+    "d3-octree": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/d3-octree/-/d3-octree-1.0.2.tgz",
+      "integrity": "sha512-Qxg4oirJrNXauiuC94uKMbgxwnhdda9xRLl9ihq45srlJ4Ga3CSgqGcAL8iW7N5CIv4Oz8x3E734ulxyvHPvwA=="
+    },
+    "d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ=="
+    },
+    "d3-polygon": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/d3-polygon/-/d3-polygon-3.0.1.tgz",
+      "integrity": "sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg=="
+    },
    "d3-quadtree": {
      "version": "3.0.1",
      "resolved": "https://registry.npmmirror.com/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
      "integrity": "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw=="
    },
+    "d3-random": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/d3-random/-/d3-random-3.0.1.tgz",
+      "integrity": "sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ=="
+    },
+    "d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmmirror.com/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "requires": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      }
+    },
+    "d3-scale-chromatic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+      "integrity": "sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==",
+      "requires": {
+        "d3-color": "1 - 3",
+        "d3-interpolate": "1 - 3"
+      }
+    },
    "d3-selection": {
      "version": "3.0.0",
      "resolved": "https://registry.npmmirror.com/d3-selection/-/d3-selection-3.0.0.tgz",
      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ=="
    },
+    "d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmmirror.com/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "requires": {
+        "d3-path": "^3.1.0"
+      }
+    },
+    "d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "requires": {
+        "d3-array": "2 - 3"
+      }
+    },
+    "d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmmirror.com/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "requires": {
+        "d3-time": "1 - 3"
+      }
+    },
    "d3-timer": {
      "version": "3.0.1",
      "resolved": "https://registry.npmmirror.com/d3-timer/-/d3-timer-3.0.1.tgz",
@@ -8865,6 +9151,18 @@
        "d3-timer": "1 - 3"
      }
    },
+    "d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "requires": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      }
+    },
    "dagre": {
      "version": "0.8.5",
      "resolved": "https://registry.npmmirror.com/dagre/-/dagre-0.8.5.tgz",
@@ -9164,6 +9462,14 @@
        }
      }
    },
+    "delaunator": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmmirror.com/delaunator/-/delaunator-5.0.1.tgz",
+      "integrity": "sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==",
+      "requires": {
+        "robust-predicates": "^3.0.2"
+      }
+    },
    "delayed-stream": {
      "version": "1.0.0",
      "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -9589,13 +9895,6 @@
        "lodash-unified": "^1.0.2",
        "memoize-one": "^6.0.0",
        "normalize-wheel-es": "^1.2.0"
-      },
-      "dependencies": {
-        "@popperjs/core": {
-          "version": "npm:@sxzz/popperjs-es@2.11.7",
-          "resolved": "https://registry.npmmirror.com/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
-          "integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ=="
-        }
      }
    },
    "element-resize-detector": {
@@ -11087,6 +11386,27 @@
      "integrity": "sha512-7EwmXrOjyL+ChxMhmG5lnW9MPt1aIeZEwKhQzoBUdTV0N3zuwWDZYVJatDvZ2OyzPUvdIAZDsCetk3coyMfcnQ==",
      "dev": true
    },
+    "force-graph": {
+      "version": "1.43.5",
+      "resolved": "https://registry.npmmirror.com/force-graph/-/force-graph-1.43.5.tgz",
+      "integrity": "sha512-HveLELh9yhZXO/QOfaFS38vlwJZ/3sKu+jarfXzRmbmihSOH/BbRWnUvmg8wLFiYy6h4HlH4lkRfZRccHYmXgA==",
+      "requires": {
+        "@tweenjs/tween.js": "18 - 23",
+        "accessor-fn": "1",
+        "bezier-js": "3 - 6",
+        "canvas-color-tracker": "1",
+        "d3-array": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-force-3d": "2 - 3",
+        "d3-scale": "1 - 4",
+        "d3-scale-chromatic": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-zoom": "2 - 3",
+        "index-array-by": "1",
+        "kapsule": "^1.14",
+        "lodash-es": "4"
+      }
+    },
    "foreground-child": {
      "version": "3.1.1",
      "resolved": "https://registry.npmmirror.com/foreground-child/-/foreground-child-3.1.1.tgz",
@@ -12378,6 +12698,11 @@
      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
      "dev": true
    },
+    "index-array-by": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmmirror.com/index-array-by/-/index-array-by-1.4.1.tgz",
+      "integrity": "sha512-Zu6THdrxQdyTuT2uA5FjUoBEsFHPzHcPIj18FszN6yXKHxSfGcR4TPLabfuT//E25q1Igyx9xta2WMvD/x9P/g=="
+    },
    "indexes-of": {
      "version": "1.0.1",
      "resolved": "https://registry.npmmirror.com/indexes-of/-/indexes-of-1.0.1.tgz",
@@ -12779,6 +13104,12 @@
      "resolved": "https://registry.npmmirror.com/is-extglob/-/is-extglob-2.1.1.tgz",
      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="
    },
+    "is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true
+    },
    "is-generator-fn": {
      "version": "2.1.0",
      "resolved": "https://registry.npmmirror.com/is-generator-fn/-/is-generator-fn-2.1.0.tgz",
@@ -15152,6 +15483,14 @@
        "verror": "1.10.0"
      }
    },
+    "kapsule": {
+      "version": "1.14.5",
+      "resolved": "https://registry.npmmirror.com/kapsule/-/kapsule-1.14.5.tgz",
+      "integrity": "sha512-H0iSpTynUzZw3tgraDmReprpFRmH5oP5GPmaNsurSwLx2H5iCpOMIkp5q+sfhB4Tz/UJd1E1IbEE9Z6ksnJ6RA==",
+      "requires": {
+        "lodash-es": "4"
+      }
+    },
    "kdbush": {
      "version": "4.0.2",
      "resolved": "https://registry.npmmirror.com/kdbush/-/kdbush-4.0.2.tgz",
@@ -19030,6 +19369,11 @@
        "inherits": "^2.0.1"
      }
    },
+    "robust-predicates": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmmirror.com/robust-predicates/-/robust-predicates-3.0.2.tgz",
+      "integrity": "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg=="
+    },
    "rsvp": {
      "version": "4.8.5",
      "resolved": "https://registry.npmmirror.com/rsvp/-/rsvp-4.8.5.tgz",
@@ -20159,46 +20503,6 @@
        }
      }
    },
-    "string-width-cjs": {
-      "version": "npm:string-width@4.2.3",
-      "resolved": "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
-      "requires": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
-      },
-      "dependencies": {
-        "ansi-regex": {
-          "version": "5.0.1",
-          "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",
-          "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-          "dev": true
-        },
-        "emoji-regex": {
-          "version": "8.0.0",
-          "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz",
-          "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-          "dev": true
-        },
-        "is-fullwidth-code-point": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmmirror.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-          "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-          "dev": true
-        },
-        "strip-ansi": {
-          "version": "6.0.1",
-          "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz",
-          "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-          "dev": true,
-          "requires": {
-            "ansi-regex": "^5.0.1"
-          }
-        }
-      }
-    },
    "string.prototype.trim": {
      "version": "1.2.8",
      "resolved": "https://registry.npmmirror.com/string.prototype.trim/-/string.prototype.trim-1.2.8.tgz",
@@ -20248,23 +20552,6 @@
        "ansi-regex": "^2.0.0"
      }
    },
-    "strip-ansi-cjs": {
-      "version": "npm:strip-ansi@6.0.1",
-      "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
-      "requires": {
-        "ansi-regex": "^5.0.1"
-      },
-      "dependencies": {
-        "ansi-regex": {
-          "version": "5.0.1",
-          "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",
-          "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-          "dev": true
-        }
-      }
-    },
    "strip-eof": {
      "version": "1.0.0",
      "resolved": "https://registry.npmmirror.com/strip-eof/-/strip-eof-1.0.0.tgz",
@@ -22115,6 +22402,94 @@
        }
      }
    },
+    "vue-loader-v16": {
+      "version": "npm:vue-loader@16.8.3",
+      "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-16.8.3.tgz",
+      "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "chalk": "^4.1.0",
+        "hash-sum": "^2.0.0",
+        "loader-utils": "^2.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "json5": {
+          "version": "2.2.3",
+          "resolved": "https://registry.npmmirror.com/json5/-/json5-2.2.3.tgz",
+          "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-2.0.4.tgz",
+          "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
    "vue-router": {
      "version": "4.2.5",
      "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.2.5.tgz",
@@ -23012,81 +23387,6 @@
        }
      }
    },
-    "wrap-ansi-cjs": {
-      "version": "npm:wrap-ansi@7.0.0",
-      "resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
-      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-      "dev": true,
-      "requires": {
-        "ansi-styles": "^4.0.0",
-        "string-width": "^4.1.0",
-        "strip-ansi": "^6.0.0"
-      },
-      "dependencies": {
-        "ansi-regex": {
-          "version": "5.0.1",
-          "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",
-          "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-          "dev": true
-        },
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true
-        },
-        "emoji-regex": {
-          "version": "8.0.0",
-          "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz",
-          "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-          "dev": true
-        },
-        "is-fullwidth-code-point": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmmirror.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-          "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-          "dev": true
-        },
-        "string-width": {
-          "version": "4.2.3",
-          "resolved": "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz",
-          "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-          "dev": true,
-          "requires": {
-            "emoji-regex": "^8.0.0",
-            "is-fullwidth-code-point": "^3.0.0",
-            "strip-ansi": "^6.0.1"
-          }
-        },
-        "strip-ansi": {
-          "version": "6.0.1",
-          "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz",
-          "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-          "dev": true,
-          "requires": {
-            "ansi-regex": "^5.0.1"
-          }
-        }
-      }
-    },
    "wrappy": {
      "version": "1.0.2",
      "resolved": "https://registry.npmmirror.com/wrappy/-/wrappy-1.0.2.tgz",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "cn",
-  "version": "0.1.0",
+  "version": "24.8.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
@@ -14,14 +14,17 @@
    "@amcharts/amcharts4-geodata": "^4.1.20",
    "@antv/g6": "^4.8.17",
    "@element-plus/icons-vue": "^2.3.1",
+    "@turf/turf": "^7.1.0",
    "axios": "^0.21.1",
    "babel-plugin-lodash": "~3.3.0",
    "codemirror": "^5.65.1",
    "core-js": "~3.31.0",
+    "d3": "^7.9.0",
    "dayjs": "^1.10.5",
    "dexie": "~3.2.0",
-    "echarts": "^5.1.1",
-    "element-plus": "^2.5.1",
+    "echarts": "^5.5.1",
+    "element-plus": "^2.8.5",
+    "force-graph": "^1.43.5",
    "h3-js": "~3.7.2",
    "lib-flexible": "^0.3.2",
    "lodash": "^4.17.21",
@@ -30,7 +33,6 @@
    "moment-timezone": "^0.5.33",
    "postcss-plugin-px2rem": "~0.8.1",
    "postcss-px2rem-exclude": "0.0.6",
-    "sass": "^1.72.0",
    "sass-loader": "~8.0.2",
    "tiny-emitter": "^2.1.0",
    "vue": "~3.3.0",
@@ -81,6 +83,7 @@
    "eslint-plugin-promise": "^4.3.1",
    "eslint-plugin-vue": "^7.7.0",
    "jest": "~26.6.0",
+    "sass": "^1.80.3",
    "ts-jest": "~26.5.0",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "unplugin-auto-import": "^0.17.5",
--- a/public/assets/tagTemplate.csv
+++ b/public/assets/tagTemplate.csv
@@ -4,3 +4,4 @@ IP,192.168.1.1-192.168.1.2
 IP,103.3.138.0
 Domain,$www.baidu.com
 Domain,*.email.baidu.com
+Subscriber,41582263
--- a/public/config.js
+++ b/public/config.js
@@ -1,7 +1,8 @@
 const BASE_CONFIG = {
  baseUrl: 'http://192.168.44.54:8090/',
  version: '24.04',
-  apiVersion: 'v1'
+  apiVersion: 'v1',
+  apiVersion2: 'v2'
 }
 // 默认时间过滤条件，单位分钟. 0表示请求接口时不传时间参数
 const DEFAULT_TIME_FILTER_RANGE = {
--- a/public/images/entity-symbol/app-colored.svg
+++ b/public/images/entity-symbol/app-colored.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1687771200531" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7765" width="36" height="36" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M723.84487531 71.54166698c60.46291698 0 110.11458302 49.45145802 110.11458302 110.11458302v12.21270802h10.05045802c27.58870802 0 49.77179198 22.30320802 49.77179198 49.73175v256.78720896c0 27.42854198-22.34325 49.73175-49.77179198 49.73175h-10.05045802v292.22408302c0 60.50295802-49.4915 110.11458302-110.11458302 110.11458302H310.89516635a110.394875 110.394875 0 0 1-110.11458302-110.11458302v-292.22408302h-10.0905A49.81183302 49.81183302 0 0 1 140.95833333 500.38791698V243.60070802c0-27.42854198 22.30320802-49.73175 49.73175-49.73175h10.0905V181.65625C200.78058333 121.15329198 250.23204135 71.54166698 310.89516635 71.54166698z m54.97720802 688.31625H255.75779135v82.48583302a55.2575 55.2575 0 0 0 55.137375 55.137375h412.94970896a55.2575 55.2575 0 0 0 55.09733302-55.137375l-0.120125-82.48583302z m-261.47208302 27.508625c22.02291698 0 41.24291698 19.22 41.24291604 41.28295802 0 22.02291698-19.22 41.24291698-41.24291604 41.24291698-21.90279198 0-41.24291698-19.22-41.24291698-41.24291698s19.22-41.24291698 41.24291698-41.24291698z m261.59220802-237.246875H255.87791635v154.56083302h523.06429198v-154.56083302z m61.06354198-302.47475H194.73429135v248.65875h645.27145896v-248.65875z m-518.53958396 23.78475c12.41291698 0 23.5445 7.52783302 28.10925 18.97975l60.903375 150.55666604a24.865875 24.865875 0 0 1-23.10404104 34.27566698 25.106125 25.106125 0 0 1-23.26420896-15.8565l-6.56683302-16.697375H284.78800031l-6.32658396 16.53720802a25.14616698 25.14616698 0 1 1-46.76866604-18.41916604l61.70420802-150.55666698a30.43166698 30.43166698 0 0 1 28.10925-18.81958302z m217.82666698 0c40.722375 0 71.63454198 31.47275 71.63454198 69.6725 0 38.15970802-31.19245802 69.071875-74.4775 69.071875h-20.70154198v40.32195802a24.66566698 24.66566698 0 0 1-24.74575 24.74575 24.82583302 24.82583302 0 0 1-24.74575-24.74575V296.17541698a24.66566698 24.66566698 0 0 1 24.74575-24.74575z m190.878625 0c40.722375 0 71.67458302 31.47275 71.67458302 69.6725 0 38.15970802-31.2325 69.071875-74.4775 69.071875h-20.74158302v40.32195802a24.66566698 24.66566698 0 0 1-24.74575 24.74575 24.66566698 24.66566698 0 0 1-24.70570802-24.74575V296.17541698a24.66566698 24.66566698 0 0 1 24.70570802-24.74575zM321.10579135 348.30966698l-20.181 52.05416604H341.16666635l-20.02083302-52.05416604z m215.46420896-27.3885h-20.70154198v47.16908302h18.17891698c18.65941698 0 27.3885-11.57204198 27.3885-25.14616698 0-11.01145802-6.68695802-22.02291698-24.82583396-22.02291604z m190.7585 0h-20.70154198v47.16908302h18.138875c18.69945802 0 27.42854198-11.57204198 27.42854198-25.14616698 0-11.01145802-6.727-22.02291698-24.82583396-22.02291604z m-3.3635-194.40229198H311.01529135A55.2575 55.2575 0 0 0 255.87791635 181.65625v12.21270802h523.22445896V181.65625a55.2575 55.2575 0 0 0-55.137375-55.137375z" p-id="7766" fill="#E5A219"></path></svg>
--- a/public/images/entity-symbol/app.svg
+++ b/public/images/entity-symbol/app.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1688290120782" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7911" xmlns:xlink="http://www.w3.org/1999/xlink" width="36" height="36"><path d="M723.84487531 71.54166698c60.46291698 0 110.11458302 49.45145802 110.11458302 110.11458302v12.21270802h10.05045802c27.58870802 0 49.77179198 22.30320802 49.77179198 49.73175v256.78720896c0 27.42854198-22.34325 49.73175-49.77179198 49.73175h-10.05045802v292.22408302c0 60.50295802-49.4915 110.11458302-110.11458302 110.11458302H310.89516635a110.394875 110.394875 0 0 1-110.11458302-110.11458302v-292.22408302h-10.0905A49.81183302 49.81183302 0 0 1 140.95833333 500.38791698V243.60070802c0-27.42854198 22.30320802-49.73175 49.73175-49.73175h10.0905V181.65625C200.78058333 121.15329198 250.23204135 71.54166698 310.89516635 71.54166698z m54.97720802 688.31625H255.75779135v82.48583302a55.2575 55.2575 0 0 0 55.137375 55.137375h412.94970896a55.2575 55.2575 0 0 0 55.09733302-55.137375l-0.120125-82.48583302z m-261.47208302 27.508625c22.02291698 0 41.24291698 19.22 41.24291604 41.28295802 0 22.02291698-19.22 41.24291698-41.24291604 41.24291698-21.90279198 0-41.24291698-19.22-41.24291698-41.24291698s19.22-41.24291698 41.24291698-41.24291698z m261.59220802-237.246875H255.87791635v154.56083302h523.06429198v-154.56083302z m61.06354198-302.47475H194.73429135v248.65875h645.27145896v-248.65875z m-518.53958396 23.78475c12.41291698 0 23.5445 7.52783302 28.10925 18.97975l60.903375 150.55666604a24.865875 24.865875 0 0 1-23.10404104 34.27566698 25.106125 25.106125 0 0 1-23.26420896-15.8565l-6.56683302-16.697375H284.78800031l-6.32658396 16.53720802a25.14616698 25.14616698 0 1 1-46.76866604-18.41916604l61.70420802-150.55666698a30.43166698 30.43166698 0 0 1 28.10925-18.81958302z m217.82666698 0c40.722375 0 71.63454198 31.47275 71.63454198 69.6725 0 38.15970802-31.19245802 69.071875-74.4775 69.071875h-20.70154198v40.32195802a24.66566698 24.66566698 0 0 1-24.74575 24.74575 24.82583302 24.82583302 0 0 1-24.74575-24.74575V296.17541698a24.66566698 24.66566698 0 0 1 24.74575-24.74575z m190.878625 0c40.722375 0 71.67458302 31.47275 71.67458302 69.6725 0 38.15970802-31.2325 69.071875-74.4775 69.071875h-20.74158302v40.32195802a24.66566698 24.66566698 0 0 1-24.74575 24.74575 24.66566698 24.66566698 0 0 1-24.70570802-24.74575V296.17541698a24.66566698 24.66566698 0 0 1 24.70570802-24.74575zM321.10579135 348.30966698l-20.181 52.05416604H341.16666635l-20.02083302-52.05416604z m215.46420896-27.3885h-20.70154198v47.16908302h18.17891698c18.65941698 0 27.3885-11.57204198 27.3885-25.14616698 0-11.01145802-6.68695802-22.02291698-24.82583396-22.02291604z m190.7585 0h-20.70154198v47.16908302h18.138875c18.69945802 0 27.42854198-11.57204198 27.42854198-25.14616698 0-11.01145802-6.727-22.02291698-24.82583396-22.02291604z m-3.3635-194.40229198H311.01529135A55.2575 55.2575 0 0 0 255.87791635 181.65625v12.21270802h523.22445896V181.65625a55.2575 55.2575 0 0 0-55.137375-55.137375z" p-id="7912" fill="#778391"></path></svg>
--- a/public/images/entity-symbol/domain-colored.svg
+++ b/public/images/entity-symbol/domain-colored.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1688298522321" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7364" xmlns:xlink="http://www.w3.org/1999/xlink" width="36" height="36"><path d="M512 61.06201172a450.93798828 450.93798828 0 1 1 0 901.87597656 450.93798828 450.93798828 0 0 1 0-901.87597656z m0 45.09379883a405.84418945 405.84418945 0 1 0 0 811.6883789 405.84418945 405.84418945 0 0 0 0-811.6883789z" p-id="7365" fill="#38ACD2"></path><path d="M229.64344446 586.23133044l15.95626722-52.586307c4.64812962-15.19314186 8.18625866-30.6637832 10.54501134-46.41192491h0.69375048c3.1912538 18.3150199 6.17438209 31.77378466 10.12876124 46.48129978l15.05439124 52.51693213h46.82817591l49.11755284-149.36453686h-48.77067761l-13.73626514 59.24631408c-3.60750391 17.06626868-6.93750745 33.855037-9.22688438 50.99068056h-0.69375136a864.41343565 864.41343565 0 0 0-11.79376257-50.64380531l-15.95626721-59.59318933h-39.33566772l-17.06626869 61.39694129c-3.88500427 14.63814112-8.46375903 31.70440892-11.79376256 48.84005335h-0.69375049A890.56783897 890.56783897 0 0 0 199.81216237 497.84748474l-12.7650143-61.05006603h-50.78255506l46.55067554 149.36453685h46.82817591zM570.27506324 496.04373279c-3.53812904 17.20501843-6.86813258 33.99378674-9.1575104 51.06005543h-0.69375047c-3.1912538-17.13564355-7.49250818-33.855037-11.79376257-50.64380531l-15.95626721-59.59318933H493.26872999l-17.06626869 61.39694129c-3.88500427 14.63814112-8.46375903 31.77378466-11.79376256 48.84005335h-0.69375137a904.30410413 904.30410413 0 0 0-9.08813463-49.18692861l-12.83438917-61.05006603h-50.78255417l46.48129978 149.29516199h46.89755078l16.09501783-52.51693213c4.57875475-15.26251673 8.11688379-30.73315807 10.40626074-46.48130068h0.69375136c3.33000354 18.38439477 6.24375697 31.84315955 10.19813611 46.48130068l15.05439124 52.51693212h46.82817502l49.11755373-149.29516198H584.15007813l-13.73626514 59.24631408zM825.22846423 496.04373279c-3.60750391 17.20501843-6.93750745 33.99378674-9.15751039 51.06005543h-0.69375048c-3.26062867-17.13564355-7.56188305-33.855037-11.79376256-50.64380531l-16.02564208-59.59318933h-39.33566773l-16.99689381 61.39694129a710.40076917 710.40076917 0 0 0-11.79376257 48.84005335h-0.69375049a893.96721827 893.96721827 0 0 0-9.15751038-49.18692861l-12.76501342-61.05006603H645.89389464l46.55067554 149.29516199h46.82817591l16.09501784-52.51693213a328.14410573 328.14410573 0 0 0 10.47563559-46.48130068h0.69375136c3.26062867 18.38439477 6.24375697 31.84315955 10.12876036 46.48130068l15.05439124 52.51693212h46.82817591l49.1869286-149.29516198h-48.84005337l-13.73626426 59.24631408z" p-id="7366" fill="#38ACD2"></path><path d="M320.17791736 643.11889184c28.65190576 164.34955323 107.87824195 274.72529762 191.82208264 274.72529761 81.30758763 0 158.24454601-103.7157373 189.04707984-259.80965612l2.42812756-12.83438916 44.40004835 7.90875828C715.4077206 835.28784972 623.34699522 962.93798828 512 962.93798828c-109.26574291 0-200.07771705-123.00200805-233.93275317-299.56157396l-2.28937782-12.48751393 44.40004835-7.70063368zM512 61.06201172c109.40449353 0 200.14709193 123.14075868 234.00212804 299.83907432l2.28937782 12.48751393-44.40004834 7.70063369C675.10080202 216.67030556 595.94384069 106.15581055 512 106.15581055c-82.07071387 0-159.56267298 105.58886413-189.81020519 263.62528552l-2.28937782 12.69563854-44.40004834-7.63125792C307.06602784 190.65465198 399.7511288 61.06201172 512 61.06201172z" p-id="7367" fill="#38ACD2"></path><path d="M549.60129065 647.28139648V962.93798828h-60.14819006V647.28139648h60.14819006z m0-586.21938476v315.6565918h-60.14819006V61.06201172h60.14819006z" p-id="7368" fill="#38ACD2"></path><path d="M151.24960938 241.43720703h721.50078124v45.09379883H151.24960938V241.43720703z m0 496.03178711h721.50078124v45.09379883H151.24960938v-45.09379883z" p-id="7369" fill="#38ACD2"></path></svg>
--- a/public/images/entity-symbol/domain-colored2.svg
+++ b/public/images/entity-symbol/domain-colored2.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1687771150463" class="icon" viewBox="0 0 1228 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7479" width="35.9765625" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M1099.86729167 250.4559668V115.17457031H125.84123698v135.28139649h974.02605469z m0 54.11255859H125.84123698v595.23814453h974.02605469V304.56852539zM71.72867839 61.06201172h1082.25117187v892.8572168H71.72867839V61.06201172z m324.31460117 504.74992185v44.34223492c0.1803752 10.31144837 2.1344401 18.12770712 5.89225608 23.50890074 3.72775374 5.38119362 11.15319987 8.05675843 22.27633663 8.05675844h99.65729541v44.34223581h-119.73906657c-20.14189651 0-34.15103728-4.65969284-41.99735827-13.9490154-7.81625876-9.28932256-11.7243877-23.32852556-11.72438769-42.14767035v-82.61183945c0-18.81914567 3.90812893-32.85834779 11.72438769-42.14767034 7.81625876-9.31938479 21.82539863-13.9490154 41.99735827-13.9490154h119.73906657v44.34223581h-99.65729541c-11.12313675 0-18.54858288 2.70562793-22.27633663 8.05675842-3.75781686 5.38119362-5.71188089 12.7465135-5.89225608 22.1560868z m327.98223044 64.15344416c0 18.12770712-3.72775374 32.01659717-11.21332523 41.66667012-7.4855706 9.62001071-21.40452288 14.43001562-41.7267946 14.43001563h-66.76888539c-20.17195963 0-34.18109951-4.65969284-41.99735738-13.9490154-7.81625876-9.28932256-11.7243877-23.32852556-11.7243877-42.14767035v-82.61183945c0-18.81914567 3.90812893-32.85834779 11.7243877-42.14767034 7.81625876-9.31938479 21.82539863-13.9490154 41.99735738-13.9490154h66.73882227c20.35233483 0 34.27128711 4.81000491 41.75685772 14.43001562 7.4855706 9.62001071 11.21332435 23.53896299 11.21332523 41.66667012v82.61183945zM678.39058559 611.20635742v-44.67292307c0-10.76238636-1.74362659-18.60870736-5.23088067-23.50890076-3.48725407-4.93025564-11.21332435-7.39538301-23.20827572-7.395383h-25.55315237c-11.12313675 0-18.57864512 2.70562793-22.30639886 8.05675842-3.72775374 5.38119362-5.6216933 12.98701406-5.62169418 22.84752534v44.31217268c0 9.86051038 1.89393956 17.4663317 5.62169418 22.84752444 3.72775374 5.38119362 11.18326211 8.05675843 22.30639886 8.05675932h25.55315237c11.99495049 0 19.63083405-2.46512737 22.93771293-7.39538301 3.30687888-4.90019251 5.14069306-12.62626367 5.50144346-23.14815036z m241.37207356-119.91944264c20.32227171 0 34.27128711 4.81000491 41.72679548 14.43001562 7.4855706 9.62001071 11.21332435 23.53896299 11.21332434 41.66667012v138.7085252h-45.63492441v-119.55869137c0-10.76238636-1.74362659-18.60870736-5.23088066-23.50890076-3.48725407-4.93025564-11.21332435-7.39538301-23.20827484-7.395383h-14.61039082v150.46297513h-46.17605l-0.24050055-150.46297513h-13.04713943c-11.12313675 0-18.54858288 2.70562793-22.30639886 8.05675842-3.72775374 5.38119362-5.59163105 12.98701406-5.59163105 22.84752534v119.55869137h-45.90548721v-138.7085252c0-18.81914567 3.90812893-32.85834779 11.72438769-42.14767035 7.81625876-9.31938479 21.82539863-13.9490154 41.99735828-13.94901539h115.28981204zM244.88886589 637.36076074h48.70130273v48.70130274H244.88886589v-48.70130274z" p-id="7480" fill="#38ACD2"></path></svg>
--- a/public/images/entity-symbol/domain.svg
+++ b/public/images/entity-symbol/domain.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1688290376101" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8107" xmlns:xlink="http://www.w3.org/1999/xlink" width="36" height="36"><path d="M512 61.06201172a450.93798828 450.93798828 0 1 1 0 901.87597656 450.93798828 450.93798828 0 0 1 0-901.87597656z m0 45.09379883a405.84418945 405.84418945 0 1 0 0 811.6883789 405.84418945 405.84418945 0 0 0 0-811.6883789z" p-id="8108" fill="#778391"></path><path d="M229.64344446 586.23133044l15.95626722-52.586307c4.64812962-15.19314186 8.18625866-30.6637832 10.54501134-46.41192491h0.69375048c3.1912538 18.3150199 6.17438209 31.77378466 10.12876124 46.48129978l15.05439124 52.51693213h46.82817591l49.11755284-149.36453686h-48.77067761l-13.73626514 59.24631408c-3.60750391 17.06626868-6.93750745 33.855037-9.22688438 50.99068056h-0.69375136a864.41343565 864.41343565 0 0 0-11.79376257-50.64380531l-15.95626721-59.59318933h-39.33566772l-17.06626869 61.39694129c-3.88500427 14.63814112-8.46375903 31.70440892-11.79376256 48.84005335h-0.69375049A890.56783897 890.56783897 0 0 0 199.81216237 497.84748474l-12.7650143-61.05006603h-50.78255506l46.55067554 149.36453685h46.82817591zM570.27506324 496.04373279c-3.53812904 17.20501843-6.86813258 33.99378674-9.1575104 51.06005543h-0.69375047c-3.1912538-17.13564355-7.49250818-33.855037-11.79376257-50.64380531l-15.95626721-59.59318933H493.26872999l-17.06626869 61.39694129c-3.88500427 14.63814112-8.46375903 31.77378466-11.79376256 48.84005335h-0.69375137a904.30410413 904.30410413 0 0 0-9.08813463-49.18692861l-12.83438917-61.05006603h-50.78255417l46.48129978 149.29516199h46.89755078l16.09501783-52.51693213c4.57875475-15.26251673 8.11688379-30.73315807 10.40626074-46.48130068h0.69375136c3.33000354 18.38439477 6.24375697 31.84315955 10.19813611 46.48130068l15.05439124 52.51693212h46.82817502l49.11755373-149.29516198H584.15007813l-13.73626514 59.24631408zM825.22846423 496.04373279c-3.60750391 17.20501843-6.93750745 33.99378674-9.15751039 51.06005543h-0.69375048c-3.26062867-17.13564355-7.56188305-33.855037-11.79376256-50.64380531l-16.02564208-59.59318933h-39.33566773l-16.99689381 61.39694129a710.40076917 710.40076917 0 0 0-11.79376257 48.84005335h-0.69375049a893.96721827 893.96721827 0 0 0-9.15751038-49.18692861l-12.76501342-61.05006603H645.89389464l46.55067554 149.29516199h46.82817591l16.09501784-52.51693213a328.14410573 328.14410573 0 0 0 10.47563559-46.48130068h0.69375136c3.26062867 18.38439477 6.24375697 31.84315955 10.12876036 46.48130068l15.05439124 52.51693212h46.82817591l49.1869286-149.29516198h-48.84005337l-13.73626426 59.24631408z" p-id="8109" fill="#778391"></path><path d="M320.17791736 643.11889184c28.65190576 164.34955323 107.87824195 274.72529762 191.82208264 274.72529761 81.30758763 0 158.24454601-103.7157373 189.04707984-259.80965612l2.42812756-12.83438916 44.40004835 7.90875828C715.4077206 835.28784972 623.34699522 962.93798828 512 962.93798828c-109.26574291 0-200.07771705-123.00200805-233.93275317-299.56157396l-2.28937782-12.48751393 44.40004835-7.70063368zM512 61.06201172c109.40449353 0 200.14709193 123.14075868 234.00212804 299.83907432l2.28937782 12.48751393-44.40004834 7.70063369C675.10080202 216.67030556 595.94384069 106.15581055 512 106.15581055c-82.07071387 0-159.56267298 105.58886413-189.81020519 263.62528552l-2.28937782 12.69563854-44.40004834-7.63125792C307.06602784 190.65465198 399.7511288 61.06201172 512 61.06201172z" p-id="8110" fill="#778391"></path><path d="M549.60129065 647.28139648V962.93798828h-60.14819006V647.28139648h60.14819006z m0-586.21938476v315.6565918h-60.14819006V61.06201172h60.14819006z" p-id="8111" fill="#778391"></path><path d="M151.24960938 241.43720703h721.50078124v45.09379883H151.24960938V241.43720703z m0 496.03178711h721.50078124v45.09379883H151.24960938v-45.09379883z" p-id="8112" fill="#778391"></path></svg>
--- a/public/images/entity-symbol/ip-colored.svg
+++ b/public/images/entity-symbol/ip-colored.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1687770782238" class="icon" viewBox="0 0 1109 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7446" width="35.7392578125" height="33" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M306.07165232 286.53100586h88.45900173v402.31184159H306.07165232V286.53100586z m254.70480646 258.08684225h92.9683825c25.1773713 0 46.59692575-3.68265995 64.25866333-10.97282467 17.66173758-7.36532077 32.01659717-16.9853306 43.06457788-29.01034421 11.12313675-12.02501272 19.1648645-25.85377829 24.27549445-41.48629492a152.94313406 152.94313406 0 0 0 0-95.44854056 111.6071521 111.6071521 0 0 0-24.27549445-41.18566989 120.25012991 120.25012991 0 0 0-43.06457788-29.01034333A167.59861869 167.59861869 0 0 0 653.74484128 286.53100586H472.31745703v402.31184159h88.45900175v-144.30015625z m0-189.39395508h68.7680432c10.14610474 0 19.84127148 0.75156302 29.31096924 2.25468995a68.39226126 68.39226126 0 0 1 24.80158936 8.79329077 47.72427072 47.72427072 0 0 1 17.13564355 18.33814456 64.48413233 64.48413233 0 0 1 6.46344479 30.96440824c0 12.77657663-2.1795339 23.07299344-6.46344479 30.96440911a47.6491138 47.6491138 0 0 1-17.21079959 18.33814456 68.09163623 68.09163623 0 0 1-24.80158936 8.71813474c-9.39454172 1.50312692-19.08970846 2.25468994-29.31096923 2.25468994H560.85161569V355.29904907z" p-id="7447" fill="#7E9F54"></path><path d="M997.43474439 61.06201172H101.72158671C79.2498442 61.06201172 61.06201172 80.60265817 61.06201172 104.65268362v814.69463276c0 24.05002634 18.18783249 43.5906719 40.65957499 43.5906719h895.71315768c22.47174337 0 40.65957499-19.54064646 40.65957497-43.5906719V104.65268362c0-24.05002634-18.18783249-43.5906719-40.65957497-43.5906719z m-20.36736551 835.73840524H122.0889531V126.44802001h854.97842578v770.35239695z" p-id="7448" fill="#7E9F54"></path></svg>
--- a/public/images/entity-symbol/ip.svg
+++ b/public/images/entity-symbol/ip.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1688290403407" class="icon" viewBox="0 0 1109 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8307" xmlns:xlink="http://www.w3.org/1999/xlink" width="38.98828125" height="36"><path d="M306.07165232 286.53100586h88.45900173v402.31184159H306.07165232V286.53100586z m254.70480646 258.08684225h92.9683825c25.1773713 0 46.59692575-3.68265995 64.25866333-10.97282467 17.66173758-7.36532077 32.01659717-16.9853306 43.06457788-29.01034421 11.12313675-12.02501272 19.1648645-25.85377829 24.27549445-41.48629492a152.94313406 152.94313406 0 0 0 0-95.44854056 111.6071521 111.6071521 0 0 0-24.27549445-41.18566989 120.25012991 120.25012991 0 0 0-43.06457788-29.01034333A167.59861869 167.59861869 0 0 0 653.74484128 286.53100586H472.31745703v402.31184159h88.45900175v-144.30015625z m0-189.39395508h68.7680432c10.14610474 0 19.84127148 0.75156302 29.31096924 2.25468995a68.39226126 68.39226126 0 0 1 24.80158936 8.79329077 47.72427072 47.72427072 0 0 1 17.13564355 18.33814456 64.48413233 64.48413233 0 0 1 6.46344479 30.96440824c0 12.77657663-2.1795339 23.07299344-6.46344479 30.96440911a47.6491138 47.6491138 0 0 1-17.21079959 18.33814456 68.09163623 68.09163623 0 0 1-24.80158936 8.71813474c-9.39454172 1.50312692-19.08970846 2.25468994-29.31096923 2.25468994H560.85161569V355.29904907z" p-id="8308" fill="#778391"></path><path d="M997.43474439 61.06201172H101.72158671C79.2498442 61.06201172 61.06201172 80.60265817 61.06201172 104.65268362v814.69463276c0 24.05002634 18.18783249 43.5906719 40.65957499 43.5906719h895.71315768c22.47174337 0 40.65957499-19.54064646 40.65957497-43.5906719V104.65268362c0-24.05002634-18.18783249-43.5906719-40.65957497-43.5906719z m-20.36736551 835.73840524H122.0889531V126.44802001h854.97842578v770.35239695z" p-id="8309" fill="#778391"></path></svg>
--- a/src/Login.vue
+++ b/src/Login.vue
@@ -141,7 +141,7 @@ export default {
        this.loading = false
        this.blockOperation.query = false
        if (_.get(e, 'response.data.code', 0) === 518005) {
-          this.$message.error(this.$t('Incorrect username or password'))
+          this.$message.error(this.$t('tip.incorrectUsernameOrPassword'))
        } else {
          this.$message.error(this.errorMsgHandler(e))
        }
--- a/src/assets/css/common.scss
+++ b/src/assets/css/common.scss
@@ -150,3 +150,7 @@ body {
    }
  }
 }
+
+.el-table .table-disabled-row {
+  --el-table-tr-bg-color: var(--el-fill-color-light);
+}
--- a/src/assets/css/common/right-box-common.scss
+++ b/src/assets/css/common/right-box-common.scss
@@ -145,6 +145,20 @@ $border-radius-small: 2px;
        width: calc(50% - 10px);
      }
    }
+
+    .my-progress {
+      margin-bottom: 6px;
+
+      .el-progress-bar__innerText {
+        color: rgba(0,0,0,0) !important;
+      }
+    }
+
+    .password-hint {
+      color: var(--el-color-info);
+      font-size: 12px;
+      margin-bottom: 12px;
+    }
  }

  .right-box__footer {
--- a/src/assets/css/common/table-common.scss
+++ b/src/assets/css/common/table-common.scss
@@ -53,7 +53,7 @@
      border: 1px solid var(--el-border-color-light);
    }

-    .top-tool-search {
+    .top-tool-search, .top-tool-search1 {
      .top-tool-search__display {
        display: flex;
      }
@@ -83,6 +83,13 @@
      }
    }

+    .top-tool-search1 {
+      width: 100%;
+      .el-input {
+        width: 100% !important;
+      }
+    }
+
    .top-tool-right {
      display: flex;
    }
@@ -121,6 +128,12 @@
      }
    }

+    .tool-btn-view {
+      i {
+        font-size: 13px;
+      }
+    }
+
    .btn-customize {
      color: var(--el-color-primary);
      font-size: 12px;
@@ -150,7 +163,7 @@

  .cn-table {
    padding: 0 20px;
-    height: calc(100% - 48px);
+    height: calc(100% - 52px);

    .el-table:not(.chart-table) {
      height: calc(100% - 58px);
@@ -230,6 +243,10 @@
  margin-bottom: 10px;
 }

+.margin-l-16 {
+  margin-left: 16px;
+}
+
 .padding-r-20 {
  padding-right: 20px;
 }
--- a/src/assets/css/components/components/common/time-line.scss
+++ b/src/assets/css/components/components/common/time-line.scss
@@ -41,7 +41,7 @@
  .time-line-container {
    height: 40px;
    line-height: 40px;
-    background-color: rgba(255, 255, 255, 0.50);
+    background-color: rgba(245, 245, 245, 0.50);
    display: flex;
    justify-content: space-between;
    padding: 0 6px;
--- a/src/assets/css/components/components/layout/layout.scss
+++ b/src/assets/css/components/components/layout/layout.scss
@@ -6,6 +6,9 @@
  &>div {
    height: 100%;
  }
+  &:focus-visible {
+    outline: none;
+  }
  overflow-y: auto;
 }

@@ -85,20 +88,21 @@
      }
      .cn-menu__left {
        flex: 1;
-        padding: 12px 10px 10px 20px;
+        padding: 12px 0 10px 0;
        max-width: 290px;
        border-right: 1px solid var(--el-border-color);

        .left-menu {
-          padding: 8px 0;
+          padding: 8px 0 8px 20px;
          font-size: 14px;
          color: var(--el-text-color-primary);
          cursor: pointer;

          &:hover {
-            span {
-              text-decoration: underline;
+            color: var(--el-color-primary);
          }
+          &.left-menu--setting {
+            background-color: #f0f0f0;
          }
          .cn-icon:first-of-type {
            font-size: 17px;
@@ -113,6 +117,10 @@
            padding-left: 10px;
          }
        }
+
+        .empty-menu {
+          border-top: 1px rgba(0,0,0,0) solid;
+        }
      }
      .cn-menu__middle {
        display: flex;
--- a/src/assets/css/components/index.scss
+++ b/src/assets/css/components/index.scss
@@ -89,3 +89,6 @@
@import "./components/common/simple-loading";

@import "views/location/location";
+
+@import "views/setting/sourcesForm";
+@import "views/setting/entitySettingForm";
--- a/src/assets/css/components/views/charts2/entityDetailSubscriberMap.scss
+++ b/src/assets/css/components/views/charts2/entityDetailSubscriberMap.scss
@@ -108,6 +108,10 @@ $color-highlight: #CC4444;
            height: 21px;
          }
        }
+
+        &.map-marker--hidden {
+          display: none;
+        }
      }

      .map-tracking-marker {
@@ -312,7 +316,48 @@ $color-highlight: #CC4444;
                    height: 58px;
                    display: flex;

-                    .item-circle {
+                    .item-icons {
+                      display: flex;
+                      flex-direction: column;
+
+                      .icon-circle {
+                        position: relative;
+                        padding-left: 18px;
+
+                        i {
+                          position: absolute;
+                          top: 0;
+                          left: 0;
+                          font-size: 14px;
+                          color: #FA901C;
+                        }
+
+                        .circle-circle {
+                          width: 10px;
+                          height: 10px;
+                          margin-left: 2px;
+                          margin-top: 2px;
+                          border-radius: 50%;
+                          background-color: $color-circle;
+
+                          &.circle-circle__highlight {
+                            margin-left: 0;
+                            margin-top: 0;
+                            width: 14px;
+                            height: 14px;
+                          }
+                        }
+                      }
+
+                      .item-line {
+                        border-left: 2px $color-inactive dotted;
+                        height: 34px;
+                        margin-left: 24px;
+                        margin-top: 6px;
+                        transition: all 0.2s;
+                      }
+                    }
+                    /*.item-circle {
                      display: flex;
                      flex-direction: column;

@@ -331,7 +376,7 @@ $color-highlight: #CC4444;
                        margin-top: 6px;
                        transition: all var(--el-transition-duration-fast);
                      }
-                    }
+                    }*/

                    .item-content {
                      display: flex;
@@ -422,7 +467,7 @@ $color-highlight: #CC4444;

      .hexagon-tooltip__body {
        .body__item .item__label {
-          width: 140px;
+          width: 80px;
        }
      }
    }
--- a/src/assets/css/components/views/charts2/panel.scss
+++ b/src/assets/css/components/views/charts2/panel.scss
@@ -129,5 +129,6 @@
  font-size: 12px;
  color: #353636;
  font-weight: 400;
+  line-height: 12px;
  margin-top: -2px !important;
 }
--- a/src/assets/css/components/views/detections/detection-list/row.scss
+++ b/src/assets/css/components/views/detections/detection-list/row.scss
@@ -138,6 +138,29 @@ $bg-color-page: var(--el-bg-color-page);
          border-radius: 3px;
          margin-right: 10px;
        }
+
+        .detection-event-name {
+          font-family: NotoSansSChineseRegular;
+          font-size: 16px;
+          color: var(--el-text-color-primary);
+          font-weight: 400;
+        }
+
+        .detection-event-key {
+          font-family: Roboto-Black;
+          font-style: italic;
+          font-size: 12px;
+          color: var(--el-color-info);
+          letter-spacing: 0;
+          line-height: 14px;
+          font-weight: 400;
+          margin-left: 4px;
+        }
+
+        .detection-event-line {
+          border-left: 1px var(--el-color-info) solid;
+          margin: 8px;
+        }
      }

      .cn-detection__body {
@@ -188,6 +211,35 @@ $bg-color-page: var(--el-bg-color-page);
                color: var(--el-color-success);
                font-weight: 500;
              }
+
+              .item__key {
+                font-family: NotoSansSChineseRegular;
+                font-size: 16px;
+                color: var(--el-text-color-primary) !important;
+                font-weight: 400;
+              }
+
+              .item__key__type {
+                font-family: Roboto-Black;
+                font-style: italic;
+                font-size: 12px;
+                color: var(--el-color-info);
+                letter-spacing: 0;
+                line-height: 14px;
+                font-weight: 400;
+                margin-left: 4px;
+                margin-right: 16px;
+              }
+
+              .item__key__nums {
+                background: rgba(250,144,28,0.14);
+                border-radius: 12px;
+                font-family: NotoSansSChineseRegular;
+                font-size: 12px;
+                color: #FA901C !important;
+                font-weight: 400;
+                padding: 2px 8px;
+              }
            }

            .basic-info__item1 {
@@ -197,6 +249,10 @@ $bg-color-page: var(--el-bg-color-page);
            }
          }

+          .new__basic-info {
+            padding: 0 16px;
+          }
+
          .show-detail {
            flex-shrink: 0;
            padding: 0 30px;
--- a/src/assets/css/components/views/detections/detection-overview.scss
+++ b/src/assets/css/components/views/detections/detection-overview.scss
@@ -35,6 +35,11 @@ $color-regular: var(--el-text-color-regular);
      }
    }

+    .overview__title__margin {
+      margin: 10px 0;
+    }
+
+
    .overview__row {
      display: flex;
      flex-direction: row;
@@ -52,12 +57,20 @@ $color-regular: var(--el-text-color-regular);
        line-height: 14px;
        word-break: normal;
      }
+      .row__label__capitalize {
+        text-transform: capitalize;
+      }

      .row__charts {
        height: 20px;
        width: 80px;
      }

+      .row__content__charts {
+        width: 600px;
+        height: 220px;
+      }
+
      .row__content--metric {
        display: flex;
        flex-wrap: nowrap;
@@ -106,6 +119,24 @@ $color-regular: var(--el-text-color-regular);
          font-size: 14px;
          margin-right: 7px;
        }
+
+        .row__mark__line {
+          display: flex;
+          flex-wrap: wrap;
+
+          .mark__line__text {
+            font-size: 12px;
+            color: var(--el-text-color-regular);
+          }
+
+          .mark__line__block {
+            width: 12px;
+            height: 12px;
+            margin-left: 6px;
+            margin-right: 6px;
+            cursor: pointer;
+          }
+        }
      }
      .row__content {
        width: calc(100% - 176px);
@@ -114,9 +145,45 @@ $color-regular: var(--el-text-color-regular);
      .row__content1 {
        display: block;
        padding-right: 50px;
+
+        .charts__visual__map {
+          width: 523px;
+          height: 32px;
+          margin: 12px 0 10px 58px;
+          display: flex;
+
+          div {
+            width: 100%;
+            height: 32px;
          }
        }
      }
+
+      .row__display {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 600px;
+        padding-right: 0;
+      }
+    }
+
+    .overview__row__display {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+  .overview__left-new {
+    flex: 0 0 100%;
+
+    .data-expired {
+      width: 100%;
+      height: 300px;
+      line-height: 300px;
+      color: var(--el-text-color-disabled);
+      text-align: center;
+    }
+  }
 }
 .overview__row-timeline {
  display: flex;
@@ -265,3 +332,13 @@ $color-regular: var(--el-text-color-regular);
  color: var(--el-text-color-primary);
  font-weight: 400;
 }
+
+.detection-detail__loading {
+  width: 100%;
+  position: relative;
+
+  .detail__loading {
+    position: absolute;
+    width: 100%;
+  }
+}
--- a/src/assets/css/components/views/detections/detections.scss
+++ b/src/assets/css/components/views/detections/detections.scss
@@ -12,6 +12,38 @@
    width: 100%;
  }

+  .detections__search {
+    display: flex;
+
+    .detections__search__btns {
+      width: 80px;
+      height: 40px;
+      border: 1px solid var(--el-border-color-light);
+      margin-right: 10px;
+      border-radius: 2px;
+      display: flex;
+
+      div {
+        width: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: var(--el-fill-color);
+        cursor: pointer;
+
+        i {
+          color: var(--el-text-color-primary);
+        }
+      }
+      .active__btn {
+        i {
+          color: var(--el-color-primary) !important;
+        }
+        background-color: var(--el-bg-color) !important;
+      }
+    }
+  }
+
  .detections__container {
    display: flex;
    flex-direction: column;
--- a/src/assets/css/components/views/entityExplorer/entity-explorer.scss
+++ b/src/assets/css/components/views/entityExplorer/entity-explorer.scss
@@ -254,6 +254,7 @@
              font-size: 12px;
              color: var(--el-text-color-regular);
              font-weight: 400;
+              white-space: nowrap;
            }
          }

--- a/src/assets/css/components/views/entityExplorer/entity-graph.scss
+++ b/src/assets/css/components/views/entityExplorer/entity-graph.scss
@@ -1,6 +1,3 @@
-$color-business: var(--el-color-business);
-$color-primary: var(--el-text-color-primary);
-$color-regular: var(--el-text-color-regular);
 .graph-toolbar {
  position: fixed;
  top: 100px;
@@ -18,13 +15,12 @@ $color-regular: var(--el-text-color-regular);
      cursor: pointer;

      i {
-        color: $color-regular;
+        color: #575757;
        font-size: 18px;
      }

      &.toolbar--unactivated {
-        cursor: default;
-
+        cursor: not-allowed;
        i {
          opacity: .4;
        }
@@ -32,24 +28,137 @@ $color-regular: var(--el-text-color-regular);
    }
  }
 }
-
 .entity-graph {
  display: flex;
-
+  background-color:'orange';
+  border: 'solid 5px red';
  .entity-graph__chart {
    width: 100%;
+    height:100%;
+    overflow: hidden;
+    .force-graph-container .graph-tooltip {
+      padding: 8px 10px;
+      //border-radius: 10px;
+      background-color: white;
+      box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85);
+
+      .primary-node-tooltip {
+        padding: 5px;
+
+        .tooltip__header {
+          display: flex;
+          align-items: center;
+
+          i {
+            color: #717171;
+            font-size: 14px;
+          }
+          .tooltip__title {
+            padding-left: 6px;
+            font-size: 15px;
+            line-height: 15px;
+            color: #111;
+          }
+        }
+        .tooltip__content {
+          padding-top: 10px;
+          color: #222;
+          font-size: 12px;
+
+          span:first-of-type {
+            padding-right: 20px;
+          }
+        }
+      }
+      .entity-node-tooltip {
+        width: 300px;
+        padding: 5px;
+
+        .tooltip__header {
+          display: flex;
+          align-items: center;
+          margin-bottom: 20px;
+
+          .tooltip__title {
+            font-size: 15px;
+            line-height: 15px;
+            color: #111;
+          }
+        }
+
+        .tooltip__content {
+          display: flex;
+          flex-direction: column;
+
+          .content-header {
+            display: flex;
+            align-items: center;
+
+            .header-icon {
+              width: 3px !important;
+              height: 12px !important;
+              background: #38ACD2;
+              border-radius: 1px;
+              margin-right: 6px;
+            }
+          }
+          .content-tag-list {
+            display: flex;
+            align-items: flex-start;
+            flex-wrap: wrap;
+
+            .entity-tag {
+              margin: 10px 9px 10px 0;
+              padding: 0 8px;
+              height: 20px;
+              font-size: 12px;
+              border: 1px solid;
+              border-radius: 2px;
+
+              $normal-color: #778391;
+              $normal-light-color: #F7F8F9;
+              $negative-color: #E26154;
+              $negative-light-color: #FEF6F5;
+              $positive-color: #749F4D;
+              $positive-light-color: #F7FAF5;
+              &.entity-tag--level-two-normal {
+                border-color: $normal-color;
+                color: $normal-color;
+                background-color: $normal-light-color;
+              }
+              &.entity-tag--level-two-negative {
+                border-color: $negative-color;
+                color: $negative-color;
+                background-color: $negative-light-color;
+              }
+              &.entity-tag--level-two-positive {
+                border-color: $positive-color;
+                color: $positive-color;
+                background-color: $positive-light-color;
+              }
+            }
+          }
+        }
+      }
+    }
+    .force-graph-container {
+      //height:100% !important;
+      canvas {
+        //height:100% !important;
+      }
+    }

    .graph-node {
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: transparent !important;
-      transition: linear all var(--el-transition-duration-fast);
+      transition: linear all .2s;

      .graph-node__text {
        width: 120px;
        font-size: 12px;
-        color: $color-primary;
+        color: #353636;
      }

      &.graph-node--root {
@@ -62,38 +171,30 @@ $color-regular: var(--el-text-color-regular);
          box-shadow: none;
          animation: none;
        }
-
        &.graph-node--ip {
-          border-color: var(--el-color-success-light-5) !important;
+          border-color: #CBD9BB !important;
          box-shadow: 0 0 0 8px rgba(126,159,84,0.14);
-
          i {
-            color: var(--el-color-success);
+            color: #7E9F54;
          }
        }
-
        &.graph-node--domain {
-          border-color: var(--el-color-primary-light-7) !important;
+          border-color: #AFDEED !important;
          box-shadow: 0 0 0 8px rgba(56,172,210,0.14);
-
          i {
-            color: $color-business;
+            color: #38ACD2;
          }
        }
-
        &.graph-node--app {
-          border-color: var(--el-color-warning-light-5) !important;
+          border-color: #F5DAA3 !important;
          box-shadow: 0 0 0 8px rgba(229,162,25,0.14);
-
          i {
-            color: var(--el-color-warning);
+            color: #E5A219;
          }
        }
-
        i {
          font-size: 36px;
        }
-
        .graph-node__text {
          padding-top: 30px;
        }
@@ -103,21 +204,19 @@ $color-regular: var(--el-text-color-regular);
        padding-top: 20px;
        width: 66px;
        height: 66px;
-        border: 1px solid #A7B0B9 !important; // 该class并未使用到
+        border: 1px solid #A7B0B9 !important;
        box-shadow: none;

        // 覆盖自带的node点击效果
        &.rel-node-checked {
          box-shadow: 0 0 0 5px rgba(151,151,151,0.21);
          animation: none;
-          border-color: $color-regular !important;
+          border-color: #778391 !important;
        }
-
        i {
          font-size: 24px;
-          color: $color-regular;
+          color: #778391;
        }
-
        .graph-node__text {
          padding-top: 24px;
        }
@@ -131,22 +230,19 @@ $color-regular: var(--el-text-color-regular);

        &.graph-node--ip {
          i {
-            color: var(--el-color-success);
+            color: #7E9F54;
          }
        }
-
        &.graph-node--domain {
          i {
-            color: $color-business;
+            color: #38ACD2;
          }
        }
-
        &.graph-node--app {
          i {
-            color: var(--el-color-warning);
+            color: #E5A219;
          }
        }
-
        i {
          font-size: 21px;
        }
@@ -159,7 +255,6 @@ $color-regular: var(--el-text-color-regular);
      left: unset !important;
      right: 0 !important;
    }
-
    .entity-graph__detail {
      height: calc(100% - 100px) !important;
      top: 100px !important;
@@ -180,21 +275,19 @@ $color-regular: var(--el-text-color-regular);
        align-items: center;

        i {
-          color: $color-regular;
+          color: #717171;
          font-size: 14px;
        }
-
        .tooltip__title {
          padding-left: 6px;
          font-size: 15px;
          line-height: 15px;
-          color: $color-primary;
+          color: #111;
        }
      }
-
      .tooltip__content {
        padding-top: 10px;
-        color: $color-primary;
+        color: #222;
        font-size: 12px;

        span:first-of-type {
@@ -202,7 +295,6 @@ $color-regular: var(--el-text-color-regular);
        }
      }
    }
-
    .entity-node-tooltip {
      width: 300px;
      padding: 5px;
@@ -215,7 +307,7 @@ $color-regular: var(--el-text-color-regular);
        .tooltip__title {
          font-size: 15px;
          line-height: 15px;
-          color: $color-primary;
+          color: #111;
        }
      }

@@ -230,12 +322,11 @@ $color-regular: var(--el-text-color-regular);
          .header-icon {
            width: 3px !important;
            height: 12px !important;
-            background: $color-business;
+            background: #38ACD2;
            border-radius: 1px;
            margin-right: 6px;
          }
        }
-
        .content-tag-list {
          display: flex;
          align-items: flex-start;
@@ -249,25 +340,22 @@ $color-regular: var(--el-text-color-regular);
            border: 1px solid;
            border-radius: 2px;

-            $normal-color: $color-regular;
-            $normal-light-color: var(--el-fill-color-light);
-            $negative-color: var(--el-color-danger);
-            $negative-light-color: var(--el-color-danger-light-9);
-            $positive-color: var(--el-color-success);
-            $positive-light-color: var(--el-color-success-light-9);
-
+            $normal-color: #778391;
+            $normal-light-color: #F7F8F9;
+            $negative-color: #E26154;
+            $negative-light-color: #FEF6F5;
+            $positive-color: #749F4D;
+            $positive-light-color: #F7FAF5;
            &.entity-tag--level-two-normal {
              border-color: $normal-color;
              color: $normal-color;
              background-color: $normal-light-color;
            }
-
            &.entity-tag--level-two-negative {
              border-color: $negative-color;
              color: $negative-color;
              background-color: $negative-light-color;
            }
-
            &.entity-tag--level-two-positive {
              border-color: $positive-color;
              color: $positive-color;
--- a/src/assets/css/components/views/entityExplorer/graphRightListBlock.scss
+++ b/src/assets/css/components/views/entityExplorer/graphRightListBlock.scss
@@ -19,7 +19,7 @@ $color-regular: var(--el-text-color-regular);

    .graph-list-header-icon {
      font-size: 21px;
-      color: $color-regular;
+      color: #778391;
      margin-right: 9px;
    }
  }
@@ -50,13 +50,10 @@ $color-regular: var(--el-text-color-regular);
    border-radius: 3px;
    font-size: 12px;
    color: var(--el-color-white);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-weight: 500;
-    padding: 14px 10px;
+    padding: 8px 10px;
    cursor: pointer;
-    border: 1px solid rgba(46, 136, 166, 0.85);
+    border: 1px solid var(--el-color-business);
+    text-align: center;

    i {
      font-size: 16px;
--- a/src/assets/css/components/views/entityExplorer/search/explorer-search.scss
+++ b/src/assets/css/components/views/entityExplorer/search/explorer-search.scss
@@ -11,7 +11,6 @@
  $color-primary: var(--el-color-primary);

  &.explorer-search--show-list {
-    flex: 0 0 40px;
    background-image: none;
  }

--- a/src/assets/css/components/views/location/location.scss
+++ b/src/assets/css/components/views/location/location.scss
@@ -7,6 +7,7 @@ $color-primary: var(--el-color-primary);
 $color-human: #233447; // 以下是颜色暂无替代的
 $color-circle: #DE3434;
 $color-base-station: #585B5F;
+$color-cell: #586A7F;
 $color-search-follow: #6f6f6e;
 $color-highlight: #CC4444;

@@ -16,10 +17,28 @@ $color-highlight: #CC4444;
  padding: 0 20px 20px;
  position: relative;

+  .subscriber-tags {
+    display: flex;
+    flex-wrap: wrap;
+    padding-left: 18px;
+
+    .subscriber-tag {
+      display: flex;
+      justify-content: center;
+      margin: 0 6px 6px 0;
+      height: 20px;
+      line-height: 20px;
+      padding: 0 6px;
+      font-size: 12px;
+      border: 1px solid;
+      border-radius: 2px;
+    }
+  }
+
  .location-tabs {
    .traceTracking-tabs_label {
      display: flex;
-      flex-display: row;
+

      .traceTracking-num {
        margin-top: 5px;
@@ -37,6 +56,10 @@ $color-highlight: #CC4444;
    }
  }

+  .follow-cursor {
+    cursor: pointer;
+  }
+
  svg {
    fill: $color-white;
  }
@@ -81,6 +104,19 @@ $color-highlight: #CC4444;

    .panel__time {
      display: flex;
+      .follow {
+        padding-left:6px;
+        padding-right:6px;
+      }
+      .divider {
+        display: flex;
+        align-items: center;
+        .el-divider--vertical {
+          height: 20px;
+          margin-left: 10px;
+          margin-right: 10px;
+        }
+      }
    }
  }

@@ -131,6 +167,7 @@ $color-highlight: #CC4444;
        left: 0;
        bottom: unset;
        right: unset;
+        z-index: 0;
      }

      .map-marker {
@@ -140,7 +177,7 @@ $color-highlight: #CC4444;
        width: 20px;
        height: 20px;
        border-radius: 50%;
-        cursor: default;
+        cursor: pointer;
        padding: 0;
        transition: height .1s linear, width .1s linear;

@@ -151,7 +188,6 @@ $color-highlight: #CC4444;

        &.map-marker--human {
          background-color: $color-human;
-          cursor: pointer;

          svg {
            width: 14px;
@@ -168,34 +204,60 @@ $color-highlight: #CC4444;
          }
        }

+        &.map-marker--cell {
+          border: 1px solid $color-white;
+          background-color: $color-cell;
+
+          svg {
+            width: 12px;
+            height: 12px;
+          }
+        }
+
        &.map-marker--hover {
          width: 30px;
          height: 30px;
          border: 2px solid $color-white;
-          z-index: 2;
+          z-index: 1;
+          display: flex !important;

          &.map-marker--human svg {
            width: 21px;
            height: 21px;
          }

-          &.map-marker--base-station svg {
+          &.map-marker--base-station, &.map-marker--cell {
+            svg {
              width: 18px;
              height: 18px;
            }
          }
+        }

        &.map-marker--highlight {
          width: 30px;
          height: 30px;
          border: 2px solid $color-white;
          background-color: $color-highlight;
-          z-index: 3;
+          z-index: 2;
+          display: flex !important;

          svg {
            width: 21px;
            height: 21px;
          }
+          &.map-marker--base-station {
+            background-color: $color-base-station;
+
+            svg {
+              width: 18px;
+              height: 18px;
+            }
+          }
+        }
+
+        &.map-marker--hidden, &.map-marker--unfollowed {
+          display: none;
        }
      }

@@ -229,81 +291,109 @@ $color-highlight: #CC4444;
    .map-time-line {
      position: absolute;
      bottom: 0;
-      left: -6px;
-      width: calc(100% - 318px);
+      width: 100%;
+      z-index: 10;
    }

+    .analysis-statistics-arrow {
+      position: fixed;
+      top: calc(50vh + 60px);
+      height: 30px;
+      background-color: #FFFFFF;
+      border-radius: 7px;
+      transform: translateY(-50%);
+      color: var(--el-text-color-secondary);
+      z-index: 1;
+      font-size: 12px;
+      cursor: pointer;
+      transition: all .3s;
+
+      &:hover {
+        color: var(--el-text-color-primary);
+      }
+
+      &.analysis-statistics-arrow--left {
+        left: 25px;
+
+        &.analysis-statistics-arrow--left-expanded {
+          left: 355px;
+        }
+      }
+      &.analysis-statistics-arrow--right {
+        right: 25px;
+
+        &.analysis-statistics-arrow--right-expanded {
+          right: 355px;
+        }
+      }
+    }
    .analysis-statistics {
      width: 330px;
-      overflow-y: scroll;
-      padding-right: 5px;
-      .analysis-statistics__search {
+      overflow: hidden;
+      transition: transform .3s;
+      z-index: 3;
+
+      &.analysis-statistics--expanded {
+        transform: scaleX(1);
+      }
+      &.analysis-statistics--collapsed {
+        transform: scaleX(0);
+        overflow-y: hidden;
+
+        & > div {
+          visibility: hidden;
+        }
+      }
+      &.analysis-statistics--left-drawer, &.analysis-statistics--right-drawer {
+        position: fixed;
+        top: 149px;
+        height: calc(100vh - 170px);
+        background-color: #FFFFFF;
+      }
+      &.analysis-statistics--left-drawer {
+        left: 20px;
+        transform-origin: left;
+        padding-right: 10px;
+      }
+      &.analysis-statistics--right-drawer {
+        right: 20px;
+        transform-origin: right;
+      }
+      .analysis-statistics__search-list {
+        padding-left: 10px;
        margin-bottom: 10px;
-        padding-left: 20px;
-        .el-select {
-          .search-active {
-            float: left;
-            border-radius: 3px;
-            width: 6px;
-            height: 6px;
-            margin-right: 10px;
-            position: relative;
-            top: 50%;
-            transform: translateY(-50%);
-            text-align: center;
+
+        .el-input {
+          margin-bottom: 10px;
+          width: 306px;
+
+          .el-input-group__prepend {
+            background-color: #FFF;
+            padding: 0 8px;
          }
-
-          .search-value {
-            font-size: 14px;
-            margin-right: 20px;
        }
-
-          .search-id {
-            color: var(--el-color-info);
-          }
-
-          .search-follow__icon {
-            position: absolute;
-            top: 50%;
-            right: 10px;
-            transform: translateY(-50%);
-            color: $color-search-follow;
-            margin-right: 10px;
-            text-align: center;
-
-            i {
+        .business-button {
+          display: flex;
+          height: 24px;
+          justify-content: center;
+          align-items: center;
          font-size: 12px;
        }
+        .input-to-select {
+          .el-input__wrapper {
+            display: none;
          }

-          .search-content {
-            display: flex;
-            flex-direction: column;
-            height: 100%;
-            justify-content: center;
-          }
+          .el-input-group__append {
+            width: 100%;
+            padding: 0;

-          .active-icon {
-            background: $color-business;
+            .el-select {
+              .el-select__wrapper {
+                background-color: #FFFFFF;
+                box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset;
              }
-
-          .inactive-icon {
-            background: $color-inactive;
            }
-
-          .search-select {
-            max-height: 250px;
-          }
-
-          .search-select .el-scrollbar__wrap {
-            max-height: 250px;
-            overflow-y: auto;
-          }
-
-          .el-select-dropdown .el-scrollbar .el-select-dropdown__wrap .el-scrollbar__view.el-select-dropdown__list .el-select-dropdown__item {
-            position: relative;
-            height: 48px;
-            line-height: 16px;
          }
        }
      }
@@ -311,7 +401,7 @@ $color-highlight: #CC4444;
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
-        padding-left: 20px;
+        padding-left: 10px;
        font-size: 16px;
        color: $color-text-primary;
        .el-checkbox__label {
@@ -320,7 +410,7 @@ $color-highlight: #CC4444;
        }
      }
      .analysis-statistics__chart {
-        margin: 0 0 10px 20px;
+        margin-bottom: 10px;
        height: 148px;
        background: rgba(113, 113, 113, 0.06);
        border: 1px solid var(--el-border-color-light);
@@ -362,7 +452,7 @@ $color-highlight: #CC4444;
              }

              .legend-range {
-                margin-right: 40px;
+                margin-right: 30px;
                width: 54px;
                font-family: Helvetica;
                font-size: 12px;
@@ -384,8 +474,9 @@ $color-highlight: #CC4444;

        .chart__statistics {
          display: flex;
-          height: 20px;
+          height: 30px;
          padding-left: 10px;
+          padding-bottom: 8px;

          .statistics-number {
            margin-right: 8px;
@@ -401,6 +492,7 @@ $color-highlight: #CC4444;
            text-align: center;
            font-size: 12px;
            color: $color-white;
+            line-height: 20px;
          }
        }

@@ -411,22 +503,28 @@ $color-highlight: #CC4444;
        }

        .chart-line__drawing {
-          height: calc(100% - 32px);
+          height: calc(100% - 60px);
        }

-        #activeSubscribersChart {
-          height: calc(100% - 52px);
+        .chart__value {
+          font-size: 32px;
+          height: calc(100% - 32px);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          transform: translateY(-8px);
        }
      }

      .analysis-statistics__title {
        position: relative;
-        margin-bottom: 10px;
-        padding-left: 20px;
+        margin-bottom: 8px;
+        padding-left: 10px;
        font-size: 16px;
        color: $color-text-primary;
        display: flex;
        justify-content: space-between;
+
        .el-checkbox__label {
          font-size: 14px;
          color: $color-text-primary !important;
@@ -441,7 +539,8 @@ $color-highlight: #CC4444;
      }

      .analysis-statistics__subscribers {
-        padding-left: 20px;
+        padding: 0 5px 0 10px;
+        overflow-y: scroll;

        .analysis-statistics__subscriber {
          margin-bottom: 10px;
@@ -501,6 +600,12 @@ $color-highlight: #CC4444;

                .header__title {
                  font-size: 16px;
+
+                  i {
+                    margin-left: 10px;
+                    font-size: 12px;
+                    cursor: pointer;
+                  }
                }

                .header__content {
@@ -544,10 +649,11 @@ $color-highlight: #CC4444;
          }

          .subscriber__body {
-            padding: 10px 18px;
+            padding: 10px 18px 10px 0;

            .body__item {
              display: flex;
+              padding-left: 18px;

              .item__label {
                padding-right: 10px;
@@ -569,9 +675,9 @@ $color-highlight: #CC4444;

              .item-record__header {
                font-family: Helvetica;
+                padding-left: 18px;
                font-size: 16px;
                color: $color-text-primary;
-                font-weight: 400;
                height: 38px;
                line-height: 38px;
              }
@@ -616,11 +722,24 @@ $color-highlight: #CC4444;
                  display: flex;
                  padding-bottom: 10px;

-                  .timeline__info--circle {
+                  .info-icons {
                    display: flex;
                    flex-direction: column;
+                    position: relative;

-                    .info__circle {
+                    .icon-circle {
+                      position: relative;
+                      padding-left: 18px;
+
+                      i {
+                        position: absolute;
+                        top: 4px;
+                        left: -3px;
+                        font-size: 14px;
+                        color: #FA901C;
+                      }
+
+                      .circle-circle {
                        width: 17px;
                        height: 17px;
                        margin-left: -2px;
@@ -629,11 +748,12 @@ $color-highlight: #CC4444;
                        outline: rgba(222, 52, 52, 0.30) solid 4px;
                        margin-top: 2px;
                      }
+                    }

-                    .info__line {
+                    .info-line {
                      border-left: 2px $color-inactive dotted;
                      height: 34px;
-                      margin-left: 6px;
+                      margin-left: 24px;
                      transition: all 0.2s;
                    }
                  }
@@ -668,6 +788,7 @@ $color-highlight: #CC4444;

                .item-record__btn, .item-record__btn-disabled {
                  padding-right: 6px;
+                  margin-left: 18px;
                  cursor: pointer;
                  text-align: center;
                }
@@ -687,22 +808,43 @@ $color-highlight: #CC4444;
                    height: 58px;
                    display: flex;

-                    .item-circle {
+                    .item-icons {
                      display: flex;
                      flex-direction: column;

+                      .icon-circle {
+                        position: relative;
+                        padding-left: 18px;
+
+                        i {
+                          position: absolute;
+                          top: 0;
+                          left: 0;
+                          font-size: 14px;
+                          color: #FA901C;
+                        }
+
                        .circle-circle {
                          width: 10px;
                          height: 10px;
                          margin-left: 2px;
+                          margin-top: 2px;
                          border-radius: 50%;
                          background-color: $color-circle;
+
+                          &.circle-circle__highlight {
+                            margin-left: 0;
+                            margin-top: 0;
+                            width: 14px;
+                            height: 14px;
+                          }
+                        }
                      }

-                      .circle-line {
+                      .item-line {
                        border-left: 2px $color-inactive dotted;
                        height: 34px;
-                        margin-left: 6px;
+                        margin-left: 24px;
                        margin-top: 6px;
                        transition: all 0.2s;
                      }
@@ -744,7 +886,7 @@ $color-highlight: #CC4444;
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.5);
    border-radius: 2px;
    min-width: 185px;
-    z-index: 3;
+    z-index: 5;

    /*&.geo-analysis__hexagon-tooltip--hexagon {
    }*/
@@ -761,7 +903,18 @@ $color-highlight: #CC4444;

      .hexagon-tooltip__body {
        .body__item .item__label {
-          width: 140px;
+          width: 80px;
+        }
+      }
+    }
+    &.geo-analysis__hexagon-tooltip--cell {
+      .icon__box {
+        background-color: $color-cell;
+      }
+
+      .hexagon-tooltip__body {
+        .body__item .item__label {
+          width: 100px;
        }
      }
    }
@@ -770,7 +923,7 @@ $color-highlight: #CC4444;
      position: relative;
      display: flex;
      flex-direction: column;
-      padding: 10px 0 10px 63px;
+      padding: 10px 10px 10px 63px;
      color: $color-white;

      .header__icon {
--- a/src/assets/css/components/views/setting/entitySettingForm.scss
+++ b/src/assets/css/components/views/setting/entitySettingForm.scss
@@ -0,0 +1,352 @@
+$text-color-primary: var(--el-text-color-primary);
+$bg-color-page: var(--el-bg-color-page);
+$border-color-light: var(--el-border-color-light);
+
+// es为entity setting简写
+.es-form {
+  padding: 20px;
+
+  .el-input {
+    height: 24px;
+    line-height: 24px;
+  }
+
+  .el-select__wrapper {
+    min-height: 24px;
+    //padding: 2px 8px;
+  }
+
+  .es-form-header {
+    font-size: 24px;
+    color: $text-color-primary;
+    font-weight: bold;
+    margin-top: 10px;
+  }
+
+  .es-form-content {
+    height: calc(100% - 92px);
+    overflow: scroll;
+    padding-bottom: 20px;
+
+    .es-form-collapse {
+      margin-top: 20px;
+      width: 1200px;
+      border: 1px $border-color-light solid;
+
+      .rule-definition {
+        position: relative;
+      }
+
+      .el-collapse-item__header {
+        width: 1200px !important;
+        height: 56px !important;
+        background: var(--el-fill-color-blank) !important;
+        border-left: 1px solid $bg-color-page;
+        border-right: 1px solid $border-color-light;
+        border-radius: 4px !important;
+        display: flex;
+        justify-content: space-between;
+        flex-direction: inherit;
+        position: relative;
+        padding: 0 20px;
+
+        i {
+          position: absolute;
+          left: 20px;
+        }
+      }
+
+      .el-collapse-item__wrap {
+        //border: 1px solid $bg-color-page;
+        border-top: none;
+      }
+
+      .form-collapse-header {
+        margin-left: 26px;
+        display: flex;
+        align-items: center;
+
+        .form-collapse-header-no, .form-collapse-header-no-active {
+          width: 24px;
+          height: 24px;
+          line-height: 24px;
+          text-align: center;
+          font-size: 16px;
+          border-radius: 50%;
+          margin-right: 10px;
+          transition: 0.5s all;
+        }
+
+        .form-collapse-header-no {
+          background: $border-color-light;
+          color: $text-color-primary;
+        }
+
+        .form-collapse-header-no-active {
+          background: var(--el-color-business);
+          color: var(--el-color-white);
+        }
+
+        .form-collapse-header-title {
+          font-size: 16px;
+          color: $text-color-primary;
+        }
+      }
+
+      .form-collapse-content {
+        padding: 0 20px 0 46px;
+
+        .form-setting__block {
+          width: 620px;
+          margin-top: 0;
+
+          .form-setting__select {
+            width: 620px !important;
+          }
+        }
+
+        .form-content__title {
+          line-height: 16px;
+          font-size: 16px;
+          color: var(--el-text-color-primary);
+          font-weight: 500;
+          margin-bottom: 15px;
+        }
+
+        .form-content__block {
+          width: 620px;
+          padding: 15px 12px 5px 12px;
+          border: 1px $border-color-light solid;
+          margin-bottom: 10px;
+
+          .block-header {
+            width: 596px;
+            line-height: 12px;
+            display: flex;
+            flex-direction: column;
+            font-size: 12px;
+            color: var(--el-text-color-primary);
+            margin-bottom: 10px;
+
+            .block-header__title {
+              display: flex;
+              justify-content: space-between;
+
+              div:nth-child(1) {
+                font-weight: bold;
+              }
+
+              i {
+                color: var(--el-text-color-regular);
+                font-size: 10px;
+                cursor: pointer;
+              }
+            }
+
+            .block-header__menu {
+              display: flex;
+              padding: 10px 10px 0 10px;
+              font-weight: bold;
+
+              div:nth-child(1) {
+                width: 278px;
+              }
+            }
+          }
+
+          .el-form {
+            display: flex;
+            flex-direction: column;
+          }
+
+          .block-body, .block-body1 {
+            width: 576px;
+            display: flex;
+
+            .el-form-item {
+              margin-bottom: 10px;
+            }
+
+            .block-body__select {
+              width: 255px;
+            }
+
+            .block-body-equal {
+              margin: 0 10px;
+              color: var(--el-text-color-disabled);
+            }
+
+            .mapping-item-add {
+              color: var(--el-text-color-regular);
+              font-size: 10px;
+              line-height: 24px;
+              margin: 0 10px;
+              cursor: pointer;
+            }
+
+            .mapping-item-close {
+              height: 24px;
+              line-height: 24px;
+              color: var(--el-color-error);
+              font-size: 10px;
+              cursor: pointer;
+            }
+
+            .relation-field__select {
+              width: 112px;
+            }
+
+            .relation-field__select-disabled {
+              width: 112px;
+
+              .el-select__selected-item {
+                color: var(--el-text-color-primary);
+              }
+
+              .el-select__suffix {
+                display: none;
+              }
+            }
+
+            .relation-type__select {
+              width: 302px;
+              margin: 0 10px;
+            }
+          }
+
+          .block-body {
+            padding-left: 10px;
+          }
+
+          .block-body1 {
+            width: 596px;
+          }
+        }
+
+        .form-setting-type {
+          width: 620px;
+          border: 1px solid $border-color-light;
+          padding: 15px 12px;
+          margin-bottom: 10px;
+
+          .setting-type__header {
+            font-size: 14px;
+            margin-bottom: 10px;
+            display: flex;
+            justify-content: space-between;
+
+            i {
+              height: 24px;
+              line-height: 24px;
+              color: var(--el-text-color-regular);
+              font-size: 10px;
+              cursor: pointer;
+            }
+          }
+        }
+
+        .block__footer {
+          cursor: pointer;
+
+          .addFieldBtn {
+            height: 24px;
+            min-height: 24px;
+            font-size: 12px;
+            color: var(--el-text-color-primary);
+            font-weight: 500;
+            width: 620px;
+            background: var(--el-color-business-light-9);
+            border: 1px $border-color-light solid;
+            padding: 0;
+            box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02);
+            border-radius: 2px;
+
+            .add-field-btn {
+              color: var(--el-text-color-regular) !important;
+              font-size: 9px !important;
+              margin: 0 8px 2px 8px;
+            }
+
+            &:hover {
+              i {
+                color: var(--el-color-business) !important;
+              }
+            }
+          }
+        }
+      }
+
+      .margin-20 {
+        margin: 20px 0;
+      }
+
+      .el-collapse-item__content {
+        padding-bottom: 20px;
+      }
+      .es-form-trigger {
+
+        .el-input__wrapper, .el-select__wrapper {
+          width: 112px;
+        }
+
+        .el-input__inner {
+          padding: 0 15px !important;
+        }
+      }
+    }
+
+    .el-input--small, .el-input--small .el-input__inner {
+      border-radius: 2px !important;
+    }
+
+    .switch__block {
+      margin: 20px 0;
+
+      .block-title {
+        font-size: 14px;
+        line-height: 14px;
+        color: $text-color-primary;
+        margin-bottom: 12px;
+      }
+    }
+  }
+
+  .es-form__footer {
+    width: 100%;
+    height: 60px;
+    box-shadow: 0 -1px 4px 0 rgba(0, 0, 0, 0.10);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .el-form-item__label {
+      color: var(--el-text-color-primary);
+    }
+
+    .tag__btn {
+      margin: 0 10px;
+      height: 30px;
+      min-width: 74px;
+    }
+  }
+
+  .el-overlay-message-box, .el-message-box {
+    padding: 0 !important;
+  }
+
+  .el-overlay-message-box {
+    text-align: center !important;
+  }
+
+  .is-message-box .el-overlay-message-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .from-dot {
+    font-size: 14px;
+    color: var(--el-color-danger);
+    margin-right: 4px;
+  }
+}
--- a/src/assets/css/components/views/setting/sourcesForm.scss
+++ b/src/assets/css/components/views/setting/sourcesForm.scss
@@ -0,0 +1,195 @@
+$color-text-primary: var(--el-text-color-primary);
+
+.sources-form {
+  height: 100%;
+
+  .el-input {
+    height: 24px;
+    line-height: 24px;
+  }
+
+  .el-select__wrapper {
+    min-height: 24px;
+    padding: 2px 8px;
+  }
+
+  .el-input__wrapper {
+    padding: 1px 6px;
+  }
+
+  .sources-form__header {
+    padding: 30px 0 30px 20px;
+    font-size: 24px;
+    line-height: 24px;
+    font-weight: bold;
+    color: $color-text-primary;
+  }
+
+  .sources-form__body {
+    display: flex;
+    flex-direction: column;
+    height: calc(100% - 147px);
+    padding-left: 40px;
+    overflow: auto;
+
+    .el-form-item__label {
+      color: var(--el-text-color-primary);
+    }
+
+    .form__body__label {
+      font-family: NotoSansHans-Medium;
+      font-size: 14px;
+      color: var(--el-text-color-primary);
+      font-weight: 500;
+    }
+
+    .form-fields__block {
+      padding: 10px;
+      width: 620px;
+      border: 1px solid var(--el-border-color-light);
+      border-radius: 2px;
+      margin-top: 10px;
+      margin-bottom: 20px;
+
+      .block__header {
+        display: flex;
+        font-family: NotoSansHans-Medium;
+        font-size: 12px;
+        color: var(--el-text-color-primary);
+        font-weight: bold;
+        margin-bottom: 10px;
+
+        .block__header-name {
+          width: 262px;
+          margin-right: 10px;
+        }
+
+        .block__header-type {
+          width: 162px;
+          margin-right: 10px;
+        }
+      }
+
+      .block__body {
+        display: flex;
+        flex-direction: column;
+
+        .block__body-container {
+          //height: 24px;
+          //line-height: 24px;
+          display: flex;
+          //margin-bottom: 8px;
+
+          .block__body-name, .block__body-type, .block__body-default, .block__body-function, .block__body-field, .block__body-field-name {
+            width: 262px;
+            height: 24px;
+            margin-right: 10px;
+          }
+
+          .block__body-type {
+            width: 162px;
+          }
+
+          .block__body-default {
+            width: 132px;
+          }
+
+          .block__body-function {
+            width: 160px;
+          }
+
+          .block__body-field {
+            width: 124px;
+          }
+
+          .block__body-field-name {
+            width: 138px;
+          }
+
+          .remove-btn {
+            height: 24px;
+            line-height: 24px;
+            color: var(--el-text-color-primary);
+            font-size: 9px;
+            cursor: pointer;
+          }
+
+          .el-form-item {
+            margin-bottom: 12px;
+
+            .el-form-item__content {
+              line-height: 24px;
+            }
+          }
+        }
+      }
+
+      .block__footer {
+        margin-top: 8px;
+        cursor: pointer;
+
+        .addFieldBtn {
+          height: 24px;
+          min-height: 24px;
+          font-size: 12px;
+          color: $color-text-primary;
+          font-weight: 500;
+          width: 598px;
+          background: var(--el-color-business-light-9);
+          border: 1px var(--el-border-color-light) solid;
+          padding: 0;
+          box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02);
+          border-radius: 2px;
+          font-family: NotoSansHans-Medium !important;
+
+          .add-field-btn {
+            color: var(--el-text-color-regular) !important;
+            font-size: 9px !important;
+            margin: 0 8px 2px 8px;
+          }
+
+          &:hover {
+            i {
+              color: var(--el-color-business) !important;
+            }
+          }
+
+          span {
+            font-family: NotoSansHans-Medium !important;
+          }
+        }
+      }
+    }
+  }
+
+  .form-description {
+    width: 620px;
+    margin-top: 12px;
+    margin-bottom: 20px;
+  }
+
+  .sources-form__footer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 60px;
+    margin-top: 3px;
+    box-shadow: 0 -1px 4px 0 rgba(0, 0, 0, 0.10);
+
+    .el-form-item__label {
+      color: var(--el-text-color-primary);
+    }
+
+    .tag__btn {
+      margin: 0 10px;
+      height: 30px;
+      min-width: 74px;
+    }
+  }
+
+  .from-dot {
+    font-size: 14px;
+    color: var(--el-color-danger);
+    margin-right: 4px;
+  }
+}
--- a/src/assets/css/components/views/tag/tag.scss
+++ b/src/assets/css/components/views/tag/tag.scss
@@ -199,6 +199,114 @@
      }
    }
  }
+
+  .sources-dialog {
+    .el-dialog__header {
+      background-color: var(--cn-bg-color-lighter);
+      box-shadow: 0 1px 0 0 rgba(53,54,54,0.08);
+      padding: 0;
+      height: 42px;
+      line-height: 42px;
+
+      .sources-dialog__header {
+        font-family: NotoSansSChineseRegular;
+        font-size: 14px;
+        color: var(--el-text-color-primary);
+        letter-spacing: 0;
+        font-weight: 400;
+        padding-left: 10px;
+      }
+
+      .el-dialog__headerbtn {
+        width: 42px;
+        height: 42px;
+
+        .el-dialog__close {
+          color: var(--el-text-color-primary);
+        }
+      }
+    }
+
+
+    .sources-dialog__body {
+      padding: 20px 30px 10px 30px;
+      display: flex;
+      flex-direction: column;
+
+      .dialog__body-upload {
+        width: 420px;
+        height: 124px;
+        background: var(--cn-bg-color-lighter);
+        border: 1px solid var(--el-border-color-light);
+        border-radius: 4px;
+        margin-bottom: 10px;
+
+        .el-upload-dragger {
+          height: 124px;
+          border: 1px solid var(--el-border-color-light);
+        }
+
+        .upload-icon {
+          font-size: 24px;
+          color: var(--el-text-color-primary);
+        }
+
+        .el-upload__text {
+          color: var(--el-text-color-primary);
+        }
+      }
+
+      .dialog__body-tip {
+        width: 420px;
+        height: 142px;
+        background: var(--el-color-business-light-9);
+        border-radius: 4px;
+        padding: 10px;
+
+        .tip__text {
+          font-family: NotoSansSChineseRegular;
+          font-size: 12px;
+          color: var(--el-text-color-regular);
+          letter-spacing: 0;
+          font-weight: 400;
+        }
+      }
+    }
+
+    .el-dialog__footer {
+      padding: 0;
+
+      .sources-dialog__footer {
+        height: 52px;
+        line-height: 52px;
+        border-top: 1px solid var(--el-border-color-light);
+
+        .cancel-btn {
+          width: 80px;
+          height: 28px;
+          margin-right: 20px;
+          color: var(--el-text-color-primary);
+          background: var(--el-fill-color-light);
+          border: 1px solid var(--el-border-color-dark);
+          border-radius: 2px;
+          cursor: pointer;
+        }
+
+        .upload-btn {
+          width: 80px;
+          height: 28px;
+          margin-right: 20px;
+          color: var(--el-color-white);
+          margin-left: 0 !important;
+          background-color: var(--el-color-business);
+          border: none;
+          outline: none;
+          border-radius: 2px;
+          cursor: pointer;
+        }
+      }
+    }
+  }
 }
 .type-tag {
  display: inline-block;
--- 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=1711625913930') format('woff2'),
-       url('iconfont.woff?t=1711625913930') format('woff'),
-       url('iconfont.ttf?t=1711625913930') format('truetype');
+  src: url('iconfont.woff2?t=1731894091336') format('woff2'),
+       url('iconfont.woff?t=1731894091336') format('woff'),
+       url('iconfont.ttf?t=1731894091336') format('truetype');
 }

 .cn-icon {
@@ -13,6 +13,38 @@
  -moz-osx-font-smoothing: grayscale;
 }

+.cn-icon-System:before {
+  content: "\e830";
+}
+
+.cn-icon-mutual:before {
+  content: "\ec8d";
+}
+
+.cn-icon-breached-human-black:before {
+  content: "\e824";
+}
+
+.cn-icon-breached-human-white:before {
+  content: "\e822";
+}
+
+.cn-icon-base-station2:before {
+  content: "\e820";
+}
+
+.cn-icon-signal:before {
+  content: "\e823";
+}
+
+.cn-icon-fuhe:before {
+  content: "\e815";
+}
+
+.cn-icon-danfenxi:before {
+  content: "\e816";
+}
+
 .cn-icon-tag-fill:before {
  content: "\e775";
 }
--- 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/TagMode.vue
+++ b/src/components/advancedSearch/TagMode.vue
@@ -26,8 +26,8 @@
                @change="(value) => selectColumn(value, meta)"
            >
              <el-option
-                  v-for="(column, index) in columnList"
-                  :key="index"
+                  v-for="column in columnList"
+                  :key="column.label"
                  :label="column.label"
                  :value="column.label"
              ></el-option>
@@ -57,8 +57,8 @@
                @change="(value) => selectValue(value, meta)"
            >
              <el-option
-                  v-for="(code, i) in meta.doc.data"
-                  :key="i"
+                  v-for="code in meta.doc.data"
+                  :key="code.code"
                  :label="code.code"
                  :value="code.code"
              ></el-option>
@@ -116,8 +116,8 @@
        <div class="condition__operation-select" v-if="meta.operator.show && meta.operator.isEditing">
          <div
              class="condition__operation"
-              v-for="(operator, index) in operatorList"
-              :key="index"
+              v-for="operator in operatorList"
+              :key="operator"
              @click.stop="selectOperator(operator, meta)"
          >{{operator}}</div>
        </div>
--- a/src/components/advancedSearch/meta/parser.js
+++ b/src/components/advancedSearch/meta/parser.js
@@ -13,7 +13,7 @@ const strReg = {
  value: /^[\da-zA-Z\u4E00-\u9FA5\u3040-\u309F\u0800-\u4e00\u0400-\u04FF\u2000-\u206F\s.'-_%]$/
 }
 const operatorList = ['=', ' in ', ' IN ', ' like ', ' LIKE ', 'HAS(', 'has(']
-const enumList = ['status', 'eventType', 'severity']
+const enumList = ['status', 'eventType', 'severity', 'ruleType']

 // ipv4校验
 const regexIPv4 = /^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/
@@ -1573,9 +1573,10 @@ export default class Parser {
            for (let i = 0; i < obj.doc.data.length; i++) {
              const item1 = obj.doc.data[i]
              if (item.indexOf(item1.code) > -1) {
+                if (item.indexOf('unordered_sequence') > -1) {
+                  searchList[index] = searchList[index].replace(new RegExp('unordered_sequence', 'g'), 4)
+                }
                searchList[index] = searchList[index].replace(new RegExp(item1.code, 'g'), item1.value)
-                // 匹配到code，终止匹配
-                break
              } else {
                // 该操作是避免中文参数切换到英文环境时，code经i18n转为英文，匹配不到中文参数的情况
                Object.keys(store.state.i18nObj).forEach(lang => {
--- a/src/components/advancedSearch/showhint/Hint/HintInfo.vue
+++ b/src/components/advancedSearch/showhint/Hint/HintInfo.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="HintInfo" id="myHint" @mouseenter="onMouseenter">
    <ul style="padding-left: 0;margin: -10px 0 0 0;min-width: calc(100% - 12px)">
-      <template v-for="(item,index) in hintList" :key="index">
+      <template v-for="(item,index) in hintList" :key="item.displayText">
        <li :ref="'hint_'+index" class="relative-item CodeMirror-hint"
            style="margin-bottom: 2px"
            @click="handleSelect(item,index,hintList)"
--- a/src/components/advancedSearch/showhint/TextSearch/createHint.js
+++ b/src/components/advancedSearch/showhint/TextSearch/createHint.js
@@ -12,7 +12,9 @@ export default function createHint (hitType = 'default', CodeMirror, {
  keyboardDown,
  keyboardEnter
 }) {
-  hitType === 'default' ? showHint(CodeMirror) : manualShowHint(CodeMirror, {
+  hitType === 'default'
+    ? showHint(CodeMirror)
+    : manualShowHint(CodeMirror, {
      cb: callback,
      keyboardUp,
      keyboardDown,
--- a/src/components/advancedSearch/showhint/TextSearch/manual-show-hint.js
+++ b/src/components/advancedSearch/showhint/TextSearch/manual-show-hint.js
@@ -4,22 +4,22 @@ export default function (CodeMirror,{
  keyboardDown,
  keyboardEnter
 }) {
-  var HINT_ELEMENT_CLASS = 'CodeMirror-hint'
-  var ACTIVE_HINT_ELEMENT_CLASS = 'CodeMirror-hint-active'
+  const HINT_ELEMENT_CLASS = 'CodeMirror-hint'
+  const ACTIVE_HINT_ELEMENT_CLASS = 'CodeMirror-hint-active'

  // This is the old interface, kept around for now to stay
  // backwards-compatible.
  CodeMirror.showHint = function (cm, getHints, options) {
    if (!getHints) return cm.showHint(options)
    if (options && options.async) getHints.async = true
-    var newOpts = { hint: getHints }
-    if (options) for (var prop in options) newOpts[prop] = options[prop]
+    const newOpts = { hint: getHints }
+    if (options) for (const prop in options) newOpts[prop] = options[prop]
    return cm.showHint(newOpts)
  }

  CodeMirror.defineExtension('showHint', function (options) {
    options = parseOptions(this, this.getCursor('start'), options)
-    var selections = this.listSelections()
+    const selections = this.listSelections()
    if (selections.length > 1) return
    // By default, don't allow completion when something is selected.
    // A hint function can have a `supportsSelection` property to
@@ -27,7 +27,7 @@ export default function (CodeMirror,{
    if (this.somethingSelected()) {
      if (!options.hint.supportsSelection) return
      // Don't try with cross-line selections
-      for (var i = 0; i < selections.length; i++) {
+      for (let i = 0; i < selections.length; i++) {
        if (selections[i].head.line != selections[i].anchor.line) return
      }
    }
@@ -55,17 +55,17 @@ export default function (CodeMirror,{
    this.startLen = this.cm.getLine(this.startPos.line).length - this.cm.getSelection().length

    if (this.options.updateOnCursorActivity) {
-      var self = this
+      const self = this
      cm.on('cursorActivity', this.activityFunc = function () {
        self.cursorActivity()
      })
    }
  }

-  var requestAnimationFrame = window.requestAnimationFrame || function (fn) {
+  const requestAnimationFrame = window.requestAnimationFrame || function (fn) {
    return setTimeout(fn, 1000 / 60)
  }
-  var cancelAnimationFrame = window.cancelAnimationFrame || clearTimeout
+  const cancelAnimationFrame = window.cancelAnimationFrame || clearTimeout

  Completion.prototype = {
    close: function () {
@@ -116,7 +116,7 @@ export default function (CodeMirror,{
        this.debounce = 0
      }

-      var identStart = this.startPos
+      let identStart = this.startPos
      if (this.data) {
        identStart = this.data.from
      }
@@ -127,7 +127,7 @@ export default function (CodeMirror,{
        (!pos.ch || this.options.closeCharacters.test(line.charAt(pos.ch - 1)))) {
        this.close()
      } else {
-        var self = this
+        const self = this
        this.debounce = requestAnimationFrame(function () {
          self.update()
        })
@@ -137,7 +137,7 @@ export default function (CodeMirror,{

    update: function (first) {
      if (this.tick == null) return
-      var self = this, myTick = ++this.tick
+      const self = this; const myTick = ++this.tick
      fetchHints(this.options.hint, this.cm, this.options, function (data) {
        if (self.tick == myTick) self.finishUpdate(data, first)
      })
@@ -189,7 +189,7 @@ export default function (CodeMirror,{
  }

  function buildKeyMap (completion, handle) {
-    var baseMap = {
+    const baseMap = {
      Up: function () {
        handle.moveFocus(-1)
      },
@@ -215,7 +215,7 @@ export default function (CodeMirror,{
      Esc: handle.close
    }

-    var mac = /Mac/.test(navigator.platform)
+    const mac = /Mac/.test(navigator.platform)

    if (mac) {
      baseMap['Ctrl-P'] = function () {
@@ -226,11 +226,11 @@ export default function (CodeMirror,{
      }
    }

-    var custom = completion.options.customKeys
-    var ourMap = custom ? {} : baseMap
+    const custom = completion.options.customKeys
+    const ourMap = custom ? {} : baseMap

    function addBinding (key, val) {
-      var bound
+      let bound
      if (typeof val != 'string') {
        bound = function (cm) {
          return val(cm, handle)
@@ -251,7 +251,7 @@ export default function (CodeMirror,{
        }
      }
    }
-    var extra = completion.options.extraKeys
+    const extra = completion.options.extraKeys
    if (extra) {
      for (var key in extra) {
        if (extra.hasOwnProperty(key)) {
@@ -274,25 +274,25 @@ export default function (CodeMirror,{
    this.completion = completion
    this.data = data
    this.picked = false
-    var widget = this, cm = completion.cm
-    var ownerDocument = cm.getInputField().ownerDocument
-    var parentWindow = ownerDocument.defaultView || ownerDocument.parentWindow
+    const widget = this; const cm = completion.cm
+    const ownerDocument = cm.getInputField().ownerDocument
+    const parentWindow = ownerDocument.defaultView || ownerDocument.parentWindow

-    var hints = this.hints = ownerDocument.createElement('ul')
+    const hints = this.hints = ownerDocument.createElement('ul')
    // $(hints).append(`
    //   <h1>lalallalla</h1>
    // `)
    hints.setAttribute('role', 'listbox')
    hints.setAttribute('aria-expanded', 'true')
    hints.id = this.id
-    var theme = completion.cm.options.theme
+    const theme = completion.cm.options.theme
    hints.className = 'CodeMirror-hints ' + theme
    this.selectedHint = data.selectedHint || 0

-    var completions = data.list
-    for (var i = 0; i < completions.length; ++i) {
-      var elt = hints.appendChild(ownerDocument.createElement('li')), cur = completions[i]
-      var className = HINT_ELEMENT_CLASS + (i != this.selectedHint ? '' : ' ' + ACTIVE_HINT_ELEMENT_CLASS)
+    const completions = data.list
+    for (let i = 0; i < completions.length; ++i) {
+      const elt = hints.appendChild(ownerDocument.createElement('li')); const cur = completions[i]
+      let className = HINT_ELEMENT_CLASS + (i != this.selectedHint ? '' : ' ' + ACTIVE_HINT_ELEMENT_CLASS)
      if (cur.className != null) className = cur.className + ' ' + className
      elt.className = className
      if (i == this.selectedHint) elt.setAttribute('aria-selected', 'true')
@@ -306,16 +306,16 @@ export default function (CodeMirror,{
      elt.hintId = i
    }

-    var container = completion.options.container || ownerDocument.body
-    var pos = cm.cursorCoords(completion.options.alignWithWord ? data.from : null)
-    var left = pos.left, top = pos.bottom, below = true
-    var offsetLeft = 0, offsetTop = 0
+    const container = completion.options.container || ownerDocument.body
+    let pos = cm.cursorCoords(completion.options.alignWithWord ? data.from : null)
+    let left = pos.left; let top = pos.bottom; let below = true
+    let offsetLeft = 0; let offsetTop = 0
    if (container !== ownerDocument.body) {
      // We offset the cursor position because left and top are relative to the offsetParent's top left corner.
-      var isContainerPositioned = ['absolute', 'relative', 'fixed'].indexOf(parentWindow.getComputedStyle(container).position) !== -1
-      var offsetParent = isContainerPositioned ? container : container.offsetParent
-      var offsetParentPosition = offsetParent.getBoundingClientRect()
-      var bodyPosition = ownerDocument.body.getBoundingClientRect()
+      const isContainerPositioned = ['absolute', 'relative', 'fixed'].indexOf(parentWindow.getComputedStyle(container).position) !== -1
+      const offsetParent = isContainerPositioned ? container : container.offsetParent
+      const offsetParentPosition = offsetParent.getBoundingClientRect()
+      const bodyPosition = ownerDocument.body.getBoundingClientRect()
      offsetLeft = (offsetParentPosition.left - bodyPosition.left - offsetParent.scrollLeft)
      offsetTop = (offsetParentPosition.top - bodyPosition.top - offsetParent.scrollTop)
    }
@@ -325,8 +325,8 @@ export default function (CodeMirror,{
    hints.style.display = 'none'

    // If we're at the edge of the screen, then we want the menu to appear on the left of the cursor.
-    var winW = parentWindow.innerWidth || Math.max(ownerDocument.body.offsetWidth, ownerDocument.documentElement.offsetWidth)
-    var winH = parentWindow.innerHeight || Math.max(ownerDocument.body.offsetHeight, ownerDocument.documentElement.offsetHeight)
+    const winW = parentWindow.innerWidth || Math.max(ownerDocument.body.offsetWidth, ownerDocument.documentElement.offsetWidth)
+    const winH = parentWindow.innerHeight || Math.max(ownerDocument.body.offsetHeight, ownerDocument.documentElement.offsetHeight)

    // 不用默认的DOM 下拉提示
    // container.appendChild(hints);
@@ -336,25 +336,25 @@ export default function (CodeMirror,{
    cm.getInputField().setAttribute('aria-owns', this.id)
    cm.getInputField().setAttribute('aria-activedescendant', this.id + '-' + this.selectedHint)

-    var box = completion.options.moveOnOverlap ? hints.getBoundingClientRect() : new DOMRect()
-    var scrolls = completion.options.paddingForScrollbar ? hints.scrollHeight > hints.clientHeight + 1 : false
+    let box = completion.options.moveOnOverlap ? hints.getBoundingClientRect() : new DOMRect()
+    const scrolls = completion.options.paddingForScrollbar ? hints.scrollHeight > hints.clientHeight + 1 : false

    // Compute in the timeout to avoid reflow on init
-    var startScroll
+    let startScroll
    setTimeout(function () {
      startScroll = cm.getScrollInfo()
    })

-    var overlapY = box.bottom - winH
+    const overlapY = box.bottom - winH
    if (overlapY > 0) {
-      var height = box.bottom - box.top, curTop = pos.top - (pos.bottom - box.top)
+      const height = box.bottom - box.top; const curTop = pos.top - (pos.bottom - box.top)
      if (curTop - height > 0) { // Fits above cursor
        hints.style.top = (top = pos.top - height - offsetTop) + 'px'
        below = false
      } else if (height > winH) {
        hints.style.height = (winH - 5) + 'px'
        hints.style.top = (top = pos.bottom - box.top - offsetTop) + 'px'
-        var cursor = cm.getCursor()
+        const cursor = cm.getCursor()
        if (data.from.ch != cursor.ch) {
          pos = cm.cursorCoords(cursor)
          hints.style.left = (left = pos.left - offsetLeft) + 'px'
@@ -362,7 +362,7 @@ export default function (CodeMirror,{
        }
      }
    }
-    var overlapX = box.right - winW
+    let overlapX = box.right - winW
    if (scrolls) overlapX += cm.display.nativeBarWidth
    if (overlapX > 0) {
      if (box.right - box.left > winW) {
@@ -372,7 +372,7 @@ export default function (CodeMirror,{
      hints.style.left = (left = Math.max(pos.left - overlapX - offsetLeft, 0)) + 'px'
    }
    if (scrolls) {
-      for (var node = hints.firstChild; node; node = node.nextSibling) {
+      for (let node = hints.firstChild; node; node = node.nextSibling) {
        node.style.paddingRight = cm.display.nativeBarWidth + 'px'
      }
    }
@@ -400,7 +400,7 @@ export default function (CodeMirror,{
    }))

    if (completion.options.closeOnUnfocus) {
-      var closingOnBlur
+      let closingOnBlur
      cm.on('blur', this.onBlur = function () {
        closingOnBlur = setTimeout(function () {
          completion.close()
@@ -412,10 +412,10 @@ export default function (CodeMirror,{
    }

    cm.on('scroll', this.onScroll = function () {
-      var curScroll = cm.getScrollInfo(), editor = cm.getWrapperElement().getBoundingClientRect()
+      const curScroll = cm.getScrollInfo(); const editor = cm.getWrapperElement().getBoundingClientRect()
      if (!startScroll) startScroll = cm.getScrollInfo()
-      var newTop = top + startScroll.top - curScroll.top
-      var point = newTop - (parentWindow.pageYOffset || (ownerDocument.documentElement || ownerDocument.body).scrollTop)
+      const newTop = top + startScroll.top - curScroll.top
+      let point = newTop - (parentWindow.pageYOffset || (ownerDocument.documentElement || ownerDocument.body).scrollTop)
      if (!below) point += hints.offsetHeight
      if (point <= editor.top || point >= editor.bottom) return completion.close()
      hints.style.top = newTop + 'px'
@@ -423,7 +423,7 @@ export default function (CodeMirror,{
    })

    CodeMirror.on(hints, 'dblclick', function (e) {
-      var t = getHintElement(hints, e.target || e.srcElement)
+      const t = getHintElement(hints, e.target || e.srcElement)
      if (t && t.hintId != null) {
        widget.changeActive(t.hintId)
        widget.pick()
@@ -431,7 +431,7 @@ export default function (CodeMirror,{
    })

    CodeMirror.on(hints, 'click', function (e) {
-      var t = getHintElement(hints, e.target || e.srcElement)
+      const t = getHintElement(hints, e.target || e.srcElement)
      if (t && t.hintId != null) {
        widget.changeActive(t.hintId)
        if (completion.options.completeOnSingleClick) widget.pick()
@@ -445,7 +445,7 @@ export default function (CodeMirror,{
    })

    // The first hint doesn't need to be scrolled to on init
-    var selectedHintRange = this.getSelectedHintRange()
+    const selectedHintRange = this.getSelectedHintRange()
    if (selectedHintRange.from !== 0 || selectedHintRange.to !== 0) {
      this.scrollToActive()
    }
@@ -460,11 +460,11 @@ export default function (CodeMirror,{
      this.completion.widget = null
      if (this.hints.parentNode) this.hints.parentNode.removeChild(this.hints)
      this.completion.cm.removeKeyMap(this.keyMap)
-      var input = this.completion.cm.getInputField()
+      const input = this.completion.cm.getInputField()
      input.removeAttribute('aria-activedescendant')
      input.removeAttribute('aria-owns')

-      var cm = this.completion.cm
+      const cm = this.completion.cm
      if (this.completion.options.closeOnUnfocus) {
        cm.off('blur', this.onBlur)
        cm.off('focus', this.onFocus)
@@ -474,7 +474,7 @@ export default function (CodeMirror,{

    disable: function () {
      this.completion.cm.removeKeyMap(this.keyMap)
-      var widget = this
+      const widget = this
      this.keyMap = {
        Enter: function () {
          widget.picked = true
@@ -494,7 +494,7 @@ export default function (CodeMirror,{
        i = avoidWrap ? 0 : this.data.list.length - 1
      }
      if (this.selectedHint == i) return
-      var node = this.hints.childNodes[this.selectedHint]
+      let node = this.hints.childNodes[this.selectedHint]
      if (node) {
        node.className = node.className.replace(' ' + ACTIVE_HINT_ELEMENT_CLASS, '')
        node.removeAttribute('aria-selected')
@@ -508,10 +508,10 @@ export default function (CodeMirror,{
    },

    scrollToActive: function () {
-      var selectedHintRange = this.getSelectedHintRange()
-      var node1 = this.hints.childNodes[selectedHintRange.from]
-      var node2 = this.hints.childNodes[selectedHintRange.to]
-      var firstNode = this.hints.firstChild
+      const selectedHintRange = this.getSelectedHintRange()
+      const node1 = this.hints.childNodes[selectedHintRange.from]
+      const node2 = this.hints.childNodes[selectedHintRange.to]
+      const firstNode = this.hints.firstChild
      if (node1.offsetTop < this.hints.scrollTop) {
        this.hints.scrollTop = node1.offsetTop - firstNode.offsetTop
      } else if (node2.offsetTop + node2.offsetHeight > this.hints.scrollTop + this.hints.clientHeight) {
@@ -524,18 +524,18 @@ export default function (CodeMirror,{
    },

    getSelectedHintRange: function () {
-      var margin = this.completion.options.scrollMargin || 0
+      const margin = this.completion.options.scrollMargin || 0
      return {
        from: Math.max(0, this.selectedHint - margin),
-        to: Math.min(this.data.list.length - 1, this.selectedHint + margin),
+        to: Math.min(this.data.list.length - 1, this.selectedHint + margin)
      }
    }
  }

  function applicableHelpers (cm, helpers) {
    if (!cm.somethingSelected()) return helpers
-    var result = []
-    for (var i = 0; i < helpers.length; i++) {
+    const result = []
+    for (let i = 0; i < helpers.length; i++) {
      if (helpers[i].supportsSelection) result.push(helpers[i])
    }
    return result
@@ -545,7 +545,7 @@ export default function (CodeMirror,{
    if (hint.async) {
      hint(cm, callback, options)
    } else {
-      var result = hint(cm, options)
+      const result = hint(cm, options)
      if (result && result.then) {
        result.then(callback)
      } else {
@@ -555,10 +555,10 @@ export default function (CodeMirror,{
  }

  function resolveAutoHints (cm, pos) {
-    var helpers = cm.getHelpers(pos, 'hint'), words
+    const helpers = cm.getHelpers(pos, 'hint'); let words
    if (helpers.length) {
-      var resolved = function (cm, callback, options) {
-        var app = applicableHelpers(cm, helpers)
+      const resolved = function (cm, callback, options) {
+        const app = applicableHelpers(cm, helpers)

        function run (i) {
          if (i == app.length) return callback(null)
@@ -595,17 +595,17 @@ export default function (CodeMirror,{
  })

  CodeMirror.registerHelper('hint', 'fromList', function (cm, options) {
-    var cur = cm.getCursor(), token = cm.getTokenAt(cur)
-    var term, from = CodeMirror.Pos(cur.line, token.start), to = cur
+    const cur = cm.getCursor(); const token = cm.getTokenAt(cur)
+    let term; let from = CodeMirror.Pos(cur.line, token.start); const to = cur
    if (token.start < cur.ch && /\w/.test(token.string.charAt(cur.ch - token.start - 1))) {
      term = token.string.substr(0, cur.ch - token.start)
    } else {
      term = ''
      from = cur
    }
-    var found = []
-    for (var i = 0; i < options.words.length; i++) {
-      var word = options.words[i]
+    const found = []
+    for (let i = 0; i < options.words.length; i++) {
+      const word = options.words[i]
      if (word.slice(0, term.length) == term) {
        found.push(word)
      }
@@ -620,7 +620,7 @@ export default function (CodeMirror,{
    }
  })

-  CodeMirror.commands.autocomplete = CodeMirror.showHint;
+  CodeMirror.commands.autocomplete = CodeMirror.showHint

  var defaultOptions = {
    hint: CodeMirror.hint.auto,
@@ -638,8 +638,7 @@ export default function (CodeMirror,{
    customKeys: null,
    extraKeys: null,
    paddingForScrollbar: true,
-    moveOnOverlap: true,
-  };
-  CodeMirror.defineOption("hintOptions", null);
-
+    moveOnOverlap: true
+  }
+  CodeMirror.defineOption('hintOptions', null)
 }
--- a/src/components/advancedSearch/showhint/TextSearch/matchRelatedInfo.js
+++ b/src/components/advancedSearch/showhint/TextSearch/matchRelatedInfo.js
@@ -1,38 +1,37 @@
 // 正则 向前去找关键字
 /* 用于匹配关系数据  */
 function matchOperator (CodeMirror, hintParams = {}) {
-  var editor = hintParams.editor;
-  var Pos = CodeMirror.Pos
-  var cur = hintParams.cur;
-  var token = hintParams.token;
+  const editor = hintParams.editor
+  const Pos = CodeMirror.Pos
+  const cur = hintParams.cur
+  let token = hintParams.token
  if (!editor) {
    return
  }

-
-  var start = token.start;
-  var cont = true;
-  var leftTokenGroup = [];
+  let start = token.start
+  let cont = true
+  const leftTokenGroup = []
  while (cont) {
-    start = token.start;
-    leftTokenGroup.unshift(token);
-    token = editor.getTokenAt(Pos(cur.line, token.start));
-    cont = !(token.string.match(/^[ ]*$/) || start === 0);  //只用空格做终止条件
+    start = token.start
+    leftTokenGroup.unshift(token)
+    token = editor.getTokenAt(Pos(cur.line, token.start))
+    cont = !(token.string.match(/^[ ]*$/) || start === 0) // 只用空格做终止条件
  }

-  var cursorLeftString = editor.getRange(Pos(cur.line, leftTokenGroup[0].start), Pos(cur.line, leftTokenGroup[leftTokenGroup.length - 1].end))
+  const cursorLeftString = editor.getRange(Pos(cur.line, leftTokenGroup[0].start), Pos(cur.line, leftTokenGroup[leftTokenGroup.length - 1].end))

  // 判断是不是满足 运算符 表达式的正则
  // test 如果是ig 会改变正则指针:  https://my.oschina.net/jamesview/blog/5460753
-  var reg = /^(.*?)(=|!=|>|<|>=|<=)([^ ]*?)$/;
+  const reg = /^(.*?)(=|!=|>|<|>=|<=)([^ ]*?)$/
  if (reg.test(cursorLeftString)) {
-    var execArr = reg.exec(cursorLeftString) || []
+    const execArr = reg.exec(cursorLeftString) || []
    return {
      leftTokenGroup,
      cursorLeftString,
      label: execArr[1],
      sign: execArr[2],
-      value: execArr[3],
+      value: execArr[3]
    }
  }
  return null
@@ -40,42 +39,41 @@ function matchOperator(CodeMirror, hintParams = {}) {

 function matchCommon (CodeMirror, hintParams = {}) {
  // 通用情况   QUANTILE(expr,level)  左括号右侧第一个就是  关键字
-  var editor = hintParams.editor;
-  var Pos = CodeMirror.Pos
-  var cur = hintParams.cur;
-  var token = hintParams.token;
+  const editor = hintParams.editor
+  const Pos = CodeMirror.Pos
+  const cur = hintParams.cur
+  let token = hintParams.token
  if (!editor) {
    return
  }

-
-  var start = token.start;
-  var cont = true;
-  var leftTokenGroup = [];
+  let start = token.start
+  let cont = true
+  const leftTokenGroup = []
  while (cont) {
-    start = token.start;
-    leftTokenGroup.unshift(token);
-    token = editor.getTokenAt(Pos(cur.line, token.start));
-    cont = !(token.string.match(/^[ (]*$/) || start === 0);  //括号或者空格为终止条件
+    start = token.start
+    leftTokenGroup.unshift(token)
+    token = editor.getTokenAt(Pos(cur.line, token.start))
+    cont = !(token.string.match(/^[ (]*$/) || start === 0) // 括号或者空格为终止条件

    // 括号补上
    if (token.string === '(') {
-      leftTokenGroup.unshift(token);
+      leftTokenGroup.unshift(token)
    }
  }

-  var cursorLeftString = editor.getRange(Pos(cur.line, leftTokenGroup[0].start), Pos(cur.line, leftTokenGroup[leftTokenGroup.length - 1].end))
+  const cursorLeftString = editor.getRange(Pos(cur.line, leftTokenGroup[0].start), Pos(cur.line, leftTokenGroup[leftTokenGroup.length - 1].end))

  // 判断是不是满足 运算符 表达式的正则
-  var reg = /^\((.*?),([^ ]*)$/;
+  const reg = /^\((.*?),([^ ]*)$/
  if (reg.test(cursorLeftString)) {
-    var execArr = reg.exec(cursorLeftString) || []
+    const execArr = reg.exec(cursorLeftString) || []
    return {
      leftTokenGroup,
      cursorLeftString,
      label: execArr[1],
      sign: 'unknown', // 没必要判断
-      value: execArr[2],
+      value: execArr[2]
    }
  }
  return null
@@ -84,56 +82,55 @@ function matchCommon(CodeMirror, hintParams = {}) {
 function matchIn (CodeMirror, hintParams = {}) {
  // in 的情况比较特殊
  // 通用情况  expr not in (values)   expr in (values)
-  var editor = hintParams.editor;
-  var Pos = CodeMirror.Pos
-  var cur = hintParams.cur;
-  var token = hintParams.token;
+  const editor = hintParams.editor
+  const Pos = CodeMirror.Pos
+  const cur = hintParams.cur
+  let token = hintParams.token
  if (!editor) {
    return
  }

-
-  var start = token.start;
-  var cont = true;
-  var leftTokenGroup = [];
+  let start = token.start
+  let cont = true
+  const leftTokenGroup = []

  // 找到左括号
  while (cont) {
-    start = token.start;
-    leftTokenGroup.unshift(token);
-    token = editor.getTokenAt(Pos(cur.line, token.start));
-    cont = !(token.string.match(/^[ (]*$/) || start === 0);  //括号或者空格为终止条件
+    start = token.start
+    leftTokenGroup.unshift(token)
+    token = editor.getTokenAt(Pos(cur.line, token.start))
+    cont = !(token.string.match(/^[ (]*$/) || start === 0) // 括号或者空格为终止条件
    // 左括号补上
    if (token.string === '(') {
-      leftTokenGroup.unshift(token);
+      leftTokenGroup.unshift(token)
    }
  }

  // 左括号继续向右找
  cont = true
  while (cont) {
-    start = token.start;
-    leftTokenGroup.unshift(token);
-    token = editor.getTokenAt(Pos(cur.line, token.start));
-    cont = !(!token.string.match(/^(in|not| )/g) || start === 0);  //括号或者空格为终止条件
+    start = token.start
+    leftTokenGroup.unshift(token)
+    token = editor.getTokenAt(Pos(cur.line, token.start))
+    cont = !(!token.string.match(/^(in|not| )/g) || start === 0) // 括号或者空格为终止条件

    // string-2
    if (token.type === 'string-2') {
-      leftTokenGroup.unshift(token);
+      leftTokenGroup.unshift(token)
    }
  }
-  var cursorLeftString = editor.getRange(Pos(cur.line, leftTokenGroup[0].start), Pos(cur.line, leftTokenGroup[leftTokenGroup.length - 1].end))
+  const cursorLeftString = editor.getRange(Pos(cur.line, leftTokenGroup[0].start), Pos(cur.line, leftTokenGroup[leftTokenGroup.length - 1].end))

  // 判断是不是满足 运算符 表达式的正则
-  var reg = /^(.*?)[ ]+((?:not[ ]+)?in)[ ]*\(([^ ]*?)$/i;
+  const reg = /^(.*?)[ ]+((?:not[ ]+)?in)[ ]*\(([^ ]*?)$/i
  if (reg.test(cursorLeftString)) {
-    var execArr = reg.exec(cursorLeftString) || []
+    const execArr = reg.exec(cursorLeftString) || []
    return {
      leftTokenGroup,
      cursorLeftString,
      label: execArr[1],
      sign: execArr[2],
-      value: execArr[3],
+      value: execArr[3]
    }
  }
  return null
@@ -141,60 +138,58 @@ function matchIn(CodeMirror, hintParams = {}) {

 function matchLike (CodeMirror, hintParams = {}) {
  // like 的情况比较特殊  expr like value , expr not like value
-  var editor = hintParams.editor;
-  var Pos = CodeMirror.Pos
-  var cur = hintParams.cur;
-  var token = hintParams.token;
+  const editor = hintParams.editor
+  const Pos = CodeMirror.Pos
+  const cur = hintParams.cur
+  let token = hintParams.token
  if (!editor) {
    return
  }

-
-  var start = token.start;
-  var cont = true;
-  var leftTokenGroup = [];
+  let start = token.start
+  let cont = true
+  const leftTokenGroup = []

  // 找到左括号
  while (cont) {
-    start = token.start;
-    leftTokenGroup.unshift(token);
-    token = editor.getTokenAt(Pos(cur.line, token.start));
-    cont = !(token.string.match(/^[ ]*$/) || start === 0);  //括号或者空格为终止条件
+    start = token.start
+    leftTokenGroup.unshift(token)
+    token = editor.getTokenAt(Pos(cur.line, token.start))
+    cont = !(token.string.match(/^[ ]*$/) || start === 0) // 括号或者空格为终止条件
  }

  // 左括号继续向右找
  cont = true
  while (cont) {
-    start = token.start;
-    leftTokenGroup.unshift(token);
-    token = editor.getTokenAt(Pos(cur.line, token.start));
-    cont = !(!token.string.match(/^(like|not| )/g) || start === 0);  //括号或者空格为终止条件
+    start = token.start
+    leftTokenGroup.unshift(token)
+    token = editor.getTokenAt(Pos(cur.line, token.start))
+    cont = !(!token.string.match(/^(like|not| )/g) || start === 0) // 括号或者空格为终止条件

    // string-2
    if (token.type === 'string-2') {
-      leftTokenGroup.unshift(token);
+      leftTokenGroup.unshift(token)
    }
  }
-  var cursorLeftString = editor.getRange(Pos(cur.line, leftTokenGroup[0].start), Pos(cur.line, leftTokenGroup[leftTokenGroup.length - 1].end))
+  const cursorLeftString = editor.getRange(Pos(cur.line, leftTokenGroup[0].start), Pos(cur.line, leftTokenGroup[leftTokenGroup.length - 1].end))

  // 判断是不是满足 运算符 表达式的正则
-  var reg = /^(.*?)[ ]+((?:not[ ]+)?like)[ ]*([^ ]*?)$/i;
+  const reg = /^(.*?)[ ]+((?:not[ ]+)?like)[ ]*([^ ]*?)$/i
  if (reg.test(cursorLeftString)) {
-    var execArr = reg.exec(cursorLeftString) || []
+    const execArr = reg.exec(cursorLeftString) || []
    return {
      leftTokenGroup,
      cursorLeftString,
      label: execArr[1],
      sign: execArr[2],
-      value: execArr[3],
+      value: execArr[3]
    }
  }
  return null
-
 }

 export const matchMain = (CodeMirror, params, manualParams = {}) => {
-  var matchRes = null
+  let matchRes = null
  // 匹配 运算符表达式
  matchRes = matchOperator(CodeMirror, manualParams)
  if (matchRes) {
@@ -215,7 +210,6 @@ export const matchMain = (CodeMirror, params, manualParams = {}) => {

  // 这里缺少一个对 count(distinct expr) 模式的匹配, 感觉大数据涉及存在缺陷, 先暂时不写

-
  // 匹配 其他表达式  (expr,value1,value2....) 模式的匹配
  matchRes = matchCommon(CodeMirror, manualParams)
  if (matchRes) {
--- a/src/components/advancedSearch/showhint/TextSearch/show-hint.js
+++ b/src/components/advancedSearch/showhint/TextSearch/show-hint.js
@@ -1,297 +1,299 @@
 export default function showHint (CodeMirror) {
-  "use strict";
+  'use strict'

-  var HINT_ELEMENT_CLASS = "CodeMirror-hint";
-  var ACTIVE_HINT_ELEMENT_CLASS = "CodeMirror-hint-active";
+  const HINT_ELEMENT_CLASS = 'CodeMirror-hint'
+  const ACTIVE_HINT_ELEMENT_CLASS = 'CodeMirror-hint-active'

  // This is the old interface, kept around for now to stay
  // backwards-compatible.
  CodeMirror.showHint = function (cm, getHints, options) {
-    if (!getHints) return cm.showHint(options);
-    if (options && options.async) getHints.async = true;
-    var newOpts = {hint: getHints};
-    if (options) for (var prop in options) newOpts[prop] = options[prop];
-    return cm.showHint(newOpts);
-  };
+    if (!getHints) return cm.showHint(options)
+    if (options && options.async) getHints.async = true
+    const newOpts = { hint: getHints }
+    if (options) for (const prop in options) newOpts[prop] = options[prop]
+    return cm.showHint(newOpts)
+  }

-  CodeMirror.defineExtension("showHint", function (options) {
-    options = parseOptions(this, this.getCursor("start"), options);
-    var selections = this.listSelections()
-    if (selections.length > 1) return;
+  CodeMirror.defineExtension('showHint', function (options) {
+    options = parseOptions(this, this.getCursor('start'), options)
+    const selections = this.listSelections()
+    if (selections.length > 1) return
    // By default, don't allow completion when something is selected.
    // A hint function can have a `supportsSelection` property to
    // indicate that it can handle selections.
    if (this.somethingSelected()) {
-      if (!options.hint.supportsSelection) return;
+      if (!options.hint.supportsSelection) return
      // Don't try with cross-line selections
-      for (var i = 0; i < selections.length; i++)
-        if (selections[i].head.line != selections[i].anchor.line) return;
+      for (let i = 0; i < selections.length; i++) { if (selections[i].head.line != selections[i].anchor.line) return }
    }

-    if (this.state.completionActive) this.state.completionActive.close();
-    var completion = this.state.completionActive = new Completion(this, options);
-    if (!completion.options.hint) return;
+    if (this.state.completionActive) this.state.completionActive.close()
+    const completion = this.state.completionActive = new Completion(this, options)
+    if (!completion.options.hint) return

-    CodeMirror.signal(this, "startCompletion", this);
-    completion.update(true);
-  });
+    CodeMirror.signal(this, 'startCompletion', this)
+    completion.update(true)
+  })

-  CodeMirror.defineExtension("closeHint", function () {
+  CodeMirror.defineExtension('closeHint', function () {
    if (this.state.completionActive) this.state.completionActive.close()
  })

  function Completion (cm, options) {
-    this.cm = cm;
-    this.options = options;
-    this.widget = null;
-    this.debounce = 0;
-    this.tick = 0;
-    this.startPos = this.cm.getCursor("start");
-    this.startLen = this.cm.getLine(this.startPos.line).length - this.cm.getSelection().length;
+    this.cm = cm
+    this.options = options
+    this.widget = null
+    this.debounce = 0
+    this.tick = 0
+    this.startPos = this.cm.getCursor('start')
+    this.startLen = this.cm.getLine(this.startPos.line).length - this.cm.getSelection().length

    if (this.options.updateOnCursorActivity) {
-      var self = this;
-      cm.on("cursorActivity", this.activityFunc = function () {
-        self.cursorActivity();
-      });
+      const self = this
+      cm.on('cursorActivity', this.activityFunc = function () {
+        self.cursorActivity()
+      })
    }
  }

-  var requestAnimationFrame = window.requestAnimationFrame || function (fn) {
-    return setTimeout(fn, 1000 / 60);
-  };
-  var cancelAnimationFrame = window.cancelAnimationFrame || clearTimeout;
+  const requestAnimationFrame = window.requestAnimationFrame || function (fn) {
+    return setTimeout(fn, 1000 / 60)
+  }
+  const cancelAnimationFrame = window.cancelAnimationFrame || clearTimeout

  Completion.prototype = {
    close: function () {
-      if (!this.active()) return;
-      this.cm.state.completionActive = null;
-      this.tick = null;
+      if (!this.active()) return
+      this.cm.state.completionActive = null
+      this.tick = null
      if (this.options.updateOnCursorActivity) {
-        this.cm.off("cursorActivity", this.activityFunc);
+        this.cm.off('cursorActivity', this.activityFunc)
      }

-      if (this.widget && this.data) CodeMirror.signal(this.data, "close");
-      if (this.widget) this.widget.close();
-      CodeMirror.signal(this.cm, "endCompletion", this.cm);
+      if (this.widget && this.data) CodeMirror.signal(this.data, 'close')
+      if (this.widget) this.widget.close()
+      CodeMirror.signal(this.cm, 'endCompletion', this.cm)
    },

    active: function () {
-      return this.cm.state.completionActive == this;
+      return this.cm.state.completionActive == this
    },

    pick: function (data, i) {
-      var completion = data.list[i], self = this;
+      const completion = data.list[i]; const self = this
      this.cm.operation(function () {
-        if (completion.hint)
-          completion.hint(self.cm, data, completion);
-        else
+        if (completion.hint) { completion.hint(self.cm, data, completion) } else {
          self.cm.replaceRange(getText(completion), completion.from || data.from,
-            completion.to || data.to, "complete");
-        CodeMirror.signal(data, "pick", completion);
-        self.cm.scrollIntoView();
-      });
+            completion.to || data.to, 'complete') 
+        }
+        CodeMirror.signal(data, 'pick', completion)
+        self.cm.scrollIntoView()
+      })
      if (this.options.closeOnPick) {
-        this.close();
+        this.close()
      }
    },

    cursorActivity: function () {
      if (this.debounce) {
-        cancelAnimationFrame(this.debounce);
-        this.debounce = 0;
+        cancelAnimationFrame(this.debounce)
+        this.debounce = 0
      }

-      var identStart = this.startPos;
+      let identStart = this.startPos
      if (this.data) {
-        identStart = this.data.from;
+        identStart = this.data.from
      }

-      var pos = this.cm.getCursor(), line = this.cm.getLine(pos.line);
+      const pos = this.cm.getCursor(); const line = this.cm.getLine(pos.line)
      if (pos.line != this.startPos.line || line.length - pos.ch != this.startLen - this.startPos.ch ||
        pos.ch < identStart.ch || this.cm.somethingSelected() ||
        (!pos.ch || this.options.closeCharacters.test(line.charAt(pos.ch - 1)))) {
-        this.close();
+        this.close()
      } else {
-        var self = this;
+        const self = this
        this.debounce = requestAnimationFrame(function () {
-          self.update();
-        });
-        if (this.widget) this.widget.disable();
+          self.update()
+        })
+        if (this.widget) this.widget.disable()
      }
    },

    update: function (first) {
      if (this.tick == null) return
-      var self = this, myTick = ++this.tick
+      const self = this; const myTick = ++this.tick
      fetchHints(this.options.hint, this.cm, this.options, function (data) {
        if (self.tick == myTick) self.finishUpdate(data, first)
      })
    },

    finishUpdate: function (data, first) {
-      if (this.data) CodeMirror.signal(this.data, "update");
+      if (this.data) CodeMirror.signal(this.data, 'update')

-      var picked = (this.widget && this.widget.picked) || (first && this.options.completeSingle);
-      if (this.widget) this.widget.close();
+      const picked = (this.widget && this.widget.picked) || (first && this.options.completeSingle)
+      if (this.widget) this.widget.close()

-      this.data = data;
+      this.data = data

      if (data && data.list.length) {
        if (picked && data.list.length == 1) {
-          this.pick(data, 0);
+          this.pick(data, 0)
        } else {
-          this.widget = new Widget(this, data);
-          CodeMirror.signal(data, "shown");
+          this.widget = new Widget(this, data)
+          CodeMirror.signal(data, 'shown')
+        }
      }
    }
  }
-  };

  function parseOptions (cm, pos, options) {
-    var editor = cm.options.hintOptions;
-    var out = {};
-    for (var prop in defaultOptions) out[prop] = defaultOptions[prop];
-    if (editor) for (var prop in editor)
-      if (editor[prop] !== undefined) out[prop] = editor[prop];
-    if (options) for (var prop in options)
-      if (options[prop] !== undefined) out[prop] = options[prop];
+    const editor = cm.options.hintOptions
+    const out = {}
+    for (var prop in defaultOptions) out[prop] = defaultOptions[prop]
+    if (editor) {
+      for (var prop in editor) { if (editor[prop] !== undefined) out[prop] = editor[prop] } 
+    }
+    if (options) {
+      for (var prop in options) { if (options[prop] !== undefined) out[prop] = options[prop] } 
+    }
    if (out.hint.resolve) out.hint = out.hint.resolve(cm, pos)
-    return out;
+    return out
  }

  function getText (completion) {
-    if (typeof completion == "string") return completion;
-    else return completion.text;
+    if (typeof completion == 'string') return completion
+    else return completion.text
  }

  function buildKeyMap (completion, handle) {
-    var baseMap = {
+    const baseMap = {
      Up: function () {
-        handle.moveFocus(-1);
+        handle.moveFocus(-1)
      },
      Down: function () {
-        handle.moveFocus(1);
+        handle.moveFocus(1)
      },
      PageUp: function () {
-        handle.moveFocus(-handle.menuSize() + 1, true);
+        handle.moveFocus(-handle.menuSize() + 1, true)
      },
      PageDown: function () {
-        handle.moveFocus(handle.menuSize() - 1, true);
+        handle.moveFocus(handle.menuSize() - 1, true)
      },
      Home: function () {
-        handle.setFocus(0);
+        handle.setFocus(0)
      },
      End: function () {
-        handle.setFocus(handle.length - 1);
+        handle.setFocus(handle.length - 1)
      },
      Enter: handle.pick,
      Tab: handle.pick,
      Esc: handle.close
-    };
+    }

-    var mac = /Mac/.test(navigator.platform);
+    const mac = /Mac/.test(navigator.platform)

    if (mac) {
-      baseMap["Ctrl-P"] = function () {
-        handle.moveFocus(-1);
-      };
-      baseMap["Ctrl-N"] = function () {
-        handle.moveFocus(1);
-      };
+      baseMap['Ctrl-P'] = function () {
+        handle.moveFocus(-1)
+      }
+      baseMap['Ctrl-N'] = function () {
+        handle.moveFocus(1)
+      }
    }

-    var custom = completion.options.customKeys;
-    var ourMap = custom ? {} : baseMap;
+    const custom = completion.options.customKeys
+    const ourMap = custom ? {} : baseMap

    function addBinding (key, val) {
-      var bound;
-      if (typeof val != "string")
+      let bound
+      if (typeof val != 'string') {
        bound = function (cm) {
-          return val(cm, handle);
-        };
+          return val(cm, handle)
+        } 
+      }
      // This mechanism is deprecated
-      else if (baseMap.hasOwnProperty(val))
-        bound = baseMap[val];
-      else
-        bound = val;
-      ourMap[key] = bound;
+      else if (baseMap.hasOwnProperty(val)) { bound = baseMap[val] } else { bound = val }
+      ourMap[key] = bound
    }

-    if (custom)
-      for (var key in custom) if (custom.hasOwnProperty(key))
-        addBinding(key, custom[key]);
-    var extra = completion.options.extraKeys;
-    if (extra)
-      for (var key in extra) if (extra.hasOwnProperty(key))
-        addBinding(key, extra[key]);
-    return ourMap;
+    if (custom) {
+      for (var key in custom) {
+        if (custom.hasOwnProperty(key)) { addBinding(key, custom[key]) } 
+      } 
+    }
+    const extra = completion.options.extraKeys
+    if (extra) {
+      for (var key in extra) {
+        if (extra.hasOwnProperty(key)) { addBinding(key, extra[key]) } 
+      } 
+    }
+    return ourMap
  }

  function getHintElement (hintsElement, el) {
    while (el && el != hintsElement) {
-      if (el.nodeName.toUpperCase() === "LI" && el.parentNode == hintsElement) return el;
-      el = el.parentNode;
+      if (el.nodeName.toUpperCase() === 'LI' && el.parentNode == hintsElement) return el
+      el = el.parentNode
    }
  }

  function Widget (completion, data) {
-    this.id = "cm-complete-" + Math.floor(Math.random(1e6))
-    this.completion = completion;
-    this.data = data;
-    this.picked = false;
-    var widget = this, cm = completion.cm;
-    var ownerDocument = cm.getInputField().ownerDocument;
-    var parentWindow = ownerDocument.defaultView || ownerDocument.parentWindow;
+    this.id = 'cm-complete-' + Math.floor(Math.random(1e6))
+    this.completion = completion
+    this.data = data
+    this.picked = false
+    const widget = this; const cm = completion.cm
+    const ownerDocument = cm.getInputField().ownerDocument
+    const parentWindow = ownerDocument.defaultView || ownerDocument.parentWindow

-    var hints = this.hints = ownerDocument.createElement("ul");
+    const hints = this.hints = ownerDocument.createElement('ul')
    // $(hints).append(`
    //   <h1>lalallalla</h1>
    // `)
-    hints.setAttribute("role", "listbox")
-    hints.setAttribute("aria-expanded", "true")
+    hints.setAttribute('role', 'listbox')
+    hints.setAttribute('aria-expanded', 'true')
    hints.id = this.id
-    var theme = completion.cm.options.theme;
-    hints.className = "CodeMirror-hints " + theme;
-    this.selectedHint = data.selectedHint || 0;
+    const theme = completion.cm.options.theme
+    hints.className = 'CodeMirror-hints ' + theme
+    this.selectedHint = data.selectedHint || 0

-    var completions = data.list;
-    for (var i = 0; i < completions.length; ++i) {
-      var elt = hints.appendChild(ownerDocument.createElement("li")), cur = completions[i];
-      var className = HINT_ELEMENT_CLASS + (i != this.selectedHint ? "" : " " + ACTIVE_HINT_ELEMENT_CLASS);
-      if (cur.className != null) className = cur.className + " " + className;
-      elt.className = className;
-      if (i == this.selectedHint) elt.setAttribute("aria-selected", "true")
-      elt.id = this.id + "-" + i
-      elt.setAttribute("role", "option")
-      if (cur.render) cur.render(elt, data, cur);
-      else elt.appendChild(ownerDocument.createTextNode(cur.displayText || getText(cur)));
-      elt.hintId = i;
+    const completions = data.list
+    for (let i = 0; i < completions.length; ++i) {
+      const elt = hints.appendChild(ownerDocument.createElement('li')); const cur = completions[i]
+      let className = HINT_ELEMENT_CLASS + (i != this.selectedHint ? '' : ' ' + ACTIVE_HINT_ELEMENT_CLASS)
+      if (cur.className != null) className = cur.className + ' ' + className
+      elt.className = className
+      if (i == this.selectedHint) elt.setAttribute('aria-selected', 'true')
+      elt.id = this.id + '-' + i
+      elt.setAttribute('role', 'option')
+      if (cur.render) cur.render(elt, data, cur)
+      else elt.appendChild(ownerDocument.createTextNode(cur.displayText || getText(cur)))
+      elt.hintId = i
    }

-    var container = completion.options.container || ownerDocument.body;
-    var pos = cm.cursorCoords(completion.options.alignWithWord ? data.from : null);
-    var left = pos.left, top = pos.bottom, below = true;
-    var offsetLeft = 0, offsetTop = 0;
+    const container = completion.options.container || ownerDocument.body
+    let pos = cm.cursorCoords(completion.options.alignWithWord ? data.from : null)
+    let left = pos.left; let top = pos.bottom; let below = true
+    let offsetLeft = 0; let offsetTop = 0
    if (container !== ownerDocument.body) {
      // We offset the cursor position because left and top are relative to the offsetParent's top left corner.
-      var isContainerPositioned = ['absolute', 'relative', 'fixed'].indexOf(parentWindow.getComputedStyle(container).position) !== -1;
-      var offsetParent = isContainerPositioned ? container : container.offsetParent;
-      var offsetParentPosition = offsetParent.getBoundingClientRect();
-      var bodyPosition = ownerDocument.body.getBoundingClientRect();
-      offsetLeft = (offsetParentPosition.left - bodyPosition.left - offsetParent.scrollLeft);
-      offsetTop = (offsetParentPosition.top - bodyPosition.top - offsetParent.scrollTop);
+      const isContainerPositioned = ['absolute', 'relative', 'fixed'].indexOf(parentWindow.getComputedStyle(container).position) !== -1
+      const offsetParent = isContainerPositioned ? container : container.offsetParent
+      const offsetParentPosition = offsetParent.getBoundingClientRect()
+      const bodyPosition = ownerDocument.body.getBoundingClientRect()
+      offsetLeft = (offsetParentPosition.left - bodyPosition.left - offsetParent.scrollLeft)
+      offsetTop = (offsetParentPosition.top - bodyPosition.top - offsetParent.scrollTop)
    }
-    hints.style.left = (left - offsetLeft) + "px";
-    hints.style.top = (top - offsetTop) + "px";
+    hints.style.left = (left - offsetLeft) + 'px'
+    hints.style.top = (top - offsetTop) + 'px'
    // todo 隐藏codemirror自带的提示
    hints.style.display = 'none'

    // If we're at the edge of the screen, then we want the menu to appear on the left of the cursor.
-    var winW = parentWindow.innerWidth || Math.max(ownerDocument.body.offsetWidth, ownerDocument.documentElement.offsetWidth);
-    var winH = parentWindow.innerHeight || Math.max(ownerDocument.body.offsetHeight, ownerDocument.documentElement.offsetHeight);
+    const winW = parentWindow.innerWidth || Math.max(ownerDocument.body.offsetWidth, ownerDocument.documentElement.offsetWidth)
+    const winH = parentWindow.innerHeight || Math.max(ownerDocument.body.offsetHeight, ownerDocument.documentElement.offsetHeight)
    // 在这里  添加的DOM 元素  -- 该方案 实现复杂算了吧
-    container.appendChild(hints);
+    container.appendChild(hints)
    // debugger
    //     $(container).append(
    //       `
@@ -301,205 +303,199 @@ export default function showHint(CodeMirror) {
    // </div>
    //       `
    //     )
-    cm.getInputField().setAttribute("aria-autocomplete", "list")
-    cm.getInputField().setAttribute("aria-owns", this.id)
-    cm.getInputField().setAttribute("aria-activedescendant", this.id + "-" + this.selectedHint)
+    cm.getInputField().setAttribute('aria-autocomplete', 'list')
+    cm.getInputField().setAttribute('aria-owns', this.id)
+    cm.getInputField().setAttribute('aria-activedescendant', this.id + '-' + this.selectedHint)

-    var box = completion.options.moveOnOverlap ? hints.getBoundingClientRect() : new DOMRect();
-    var scrolls = completion.options.paddingForScrollbar ? hints.scrollHeight > hints.clientHeight + 1 : false;
+    let box = completion.options.moveOnOverlap ? hints.getBoundingClientRect() : new DOMRect()
+    const scrolls = completion.options.paddingForScrollbar ? hints.scrollHeight > hints.clientHeight + 1 : false

    // Compute in the timeout to avoid reflow on init
-    var startScroll;
+    let startScroll
    setTimeout(function () {
-      startScroll = cm.getScrollInfo();
-    });
+      startScroll = cm.getScrollInfo()
+    })

-    var overlapY = box.bottom - winH;
+    const overlapY = box.bottom - winH
    if (overlapY > 0) {
-      var height = box.bottom - box.top, curTop = pos.top - (pos.bottom - box.top);
+      const height = box.bottom - box.top; const curTop = pos.top - (pos.bottom - box.top)
      if (curTop - height > 0) { // Fits above cursor
-        hints.style.top = (top = pos.top - height - offsetTop) + "px";
-        below = false;
+        hints.style.top = (top = pos.top - height - offsetTop) + 'px'
+        below = false
      } else if (height > winH) {
-        hints.style.height = (winH - 5) + "px";
-        hints.style.top = (top = pos.bottom - box.top - offsetTop) + "px";
-        var cursor = cm.getCursor();
+        hints.style.height = (winH - 5) + 'px'
+        hints.style.top = (top = pos.bottom - box.top - offsetTop) + 'px'
+        const cursor = cm.getCursor()
        if (data.from.ch != cursor.ch) {
-          pos = cm.cursorCoords(cursor);
-          hints.style.left = (left = pos.left - offsetLeft) + "px";
-          box = hints.getBoundingClientRect();
+          pos = cm.cursorCoords(cursor)
+          hints.style.left = (left = pos.left - offsetLeft) + 'px'
+          box = hints.getBoundingClientRect()
        }
      }
    }
-    var overlapX = box.right - winW;
-    if (scrolls) overlapX += cm.display.nativeBarWidth;
+    let overlapX = box.right - winW
+    if (scrolls) overlapX += cm.display.nativeBarWidth
    if (overlapX > 0) {
      if (box.right - box.left > winW) {
-        hints.style.width = (winW - 5) + "px";
-        overlapX -= (box.right - box.left) - winW;
+        hints.style.width = (winW - 5) + 'px'
+        overlapX -= (box.right - box.left) - winW
      }
-      hints.style.left = (left = Math.max(pos.left - overlapX - offsetLeft, 0)) + "px";
+      hints.style.left = (left = Math.max(pos.left - overlapX - offsetLeft, 0)) + 'px'
+    }
+    if (scrolls) {
+      for (let node = hints.firstChild; node; node = node.nextSibling) { node.style.paddingRight = cm.display.nativeBarWidth + 'px' } 
    }
-    if (scrolls) for (var node = hints.firstChild; node; node = node.nextSibling)
-      node.style.paddingRight = cm.display.nativeBarWidth + "px"

    // debugger
    cm.addKeyMap(this.keyMap = buildKeyMap(completion, {
      moveFocus: function (n, avoidWrap) {
-        widget.changeActive(widget.selectedHint + n, avoidWrap);
+        widget.changeActive(widget.selectedHint + n, avoidWrap)
      },
      setFocus: function (n) {
-        widget.changeActive(n);
+        widget.changeActive(n)
      },
      menuSize: function () {
-        return widget.screenAmount();
+        return widget.screenAmount()
      },
      length: completions.length,
      close: function () {
-        completion.close();
+        completion.close()
      },
      pick: function () {
-        widget.pick();
+        widget.pick()
      },
      data: data
-    }));
+    }))

    if (completion.options.closeOnUnfocus) {
-      var closingOnBlur;
-      cm.on("blur", this.onBlur = function () {
+      let closingOnBlur
+      cm.on('blur', this.onBlur = function () {
        closingOnBlur = setTimeout(function () {
-          completion.close();
-        }, 100);
-      });
-      cm.on("focus", this.onFocus = function () {
-        clearTimeout(closingOnBlur);
-      });
+          completion.close()
+        }, 100)
+      })
+      cm.on('focus', this.onFocus = function () {
+        clearTimeout(closingOnBlur)
+      })
    }

-    cm.on("scroll", this.onScroll = function () {
-      var curScroll = cm.getScrollInfo(), editor = cm.getWrapperElement().getBoundingClientRect();
-      if (!startScroll) startScroll = cm.getScrollInfo();
-      var newTop = top + startScroll.top - curScroll.top;
-      var point = newTop - (parentWindow.pageYOffset || (ownerDocument.documentElement || ownerDocument.body).scrollTop);
-      if (!below) point += hints.offsetHeight;
-      if (point <= editor.top || point >= editor.bottom) return completion.close();
-      hints.style.top = newTop + "px";
-      hints.style.left = (left + startScroll.left - curScroll.left) + "px";
-    });
+    cm.on('scroll', this.onScroll = function () {
+      const curScroll = cm.getScrollInfo(); const editor = cm.getWrapperElement().getBoundingClientRect()
+      if (!startScroll) startScroll = cm.getScrollInfo()
+      const newTop = top + startScroll.top - curScroll.top
+      let point = newTop - (parentWindow.pageYOffset || (ownerDocument.documentElement || ownerDocument.body).scrollTop)
+      if (!below) point += hints.offsetHeight
+      if (point <= editor.top || point >= editor.bottom) return completion.close()
+      hints.style.top = newTop + 'px'
+      hints.style.left = (left + startScroll.left - curScroll.left) + 'px'
+    })

-    CodeMirror.on(hints, "dblclick", function (e) {
-      var t = getHintElement(hints, e.target || e.srcElement);
+    CodeMirror.on(hints, 'dblclick', function (e) {
+      const t = getHintElement(hints, e.target || e.srcElement)
      if (t && t.hintId != null) {
-        widget.changeActive(t.hintId);
-        widget.pick();
+        widget.changeActive(t.hintId)
+        widget.pick()
      }
-    });
+    })

-    CodeMirror.on(hints, "click", function (e) {
-      var t = getHintElement(hints, e.target || e.srcElement);
+    CodeMirror.on(hints, 'click', function (e) {
+      const t = getHintElement(hints, e.target || e.srcElement)
      if (t && t.hintId != null) {
-        widget.changeActive(t.hintId);
-        if (completion.options.completeOnSingleClick) widget.pick();
+        widget.changeActive(t.hintId)
+        if (completion.options.completeOnSingleClick) widget.pick()
      }
-    });
+    })

-    CodeMirror.on(hints, "mousedown", function () {
+    CodeMirror.on(hints, 'mousedown', function () {
      setTimeout(function () {
-        cm.focus();
-      }, 20);
-    });
+        cm.focus()
+      }, 20)
+    })

    // The first hint doesn't need to be scrolled to on init
-    var selectedHintRange = this.getSelectedHintRange();
+    const selectedHintRange = this.getSelectedHintRange()
    if (selectedHintRange.from !== 0 || selectedHintRange.to !== 0) {
-      this.scrollToActive();
+      this.scrollToActive()
    }

-    CodeMirror.signal(data, "select", completions[this.selectedHint], hints.childNodes[this.selectedHint]);
-    return true;
+    CodeMirror.signal(data, 'select', completions[this.selectedHint], hints.childNodes[this.selectedHint])
+    return true
  }

  Widget.prototype = {
    close: function () {
-      if (this.completion.widget != this) return;
-      this.completion.widget = null;
-      if (this.hints.parentNode) this.hints.parentNode.removeChild(this.hints);
-      this.completion.cm.removeKeyMap(this.keyMap);
-      var input = this.completion.cm.getInputField()
-      input.removeAttribute("aria-activedescendant")
-      input.removeAttribute("aria-owns")
+      if (this.completion.widget != this) return
+      this.completion.widget = null
+      if (this.hints.parentNode) this.hints.parentNode.removeChild(this.hints)
+      this.completion.cm.removeKeyMap(this.keyMap)
+      const input = this.completion.cm.getInputField()
+      input.removeAttribute('aria-activedescendant')
+      input.removeAttribute('aria-owns')

-      var cm = this.completion.cm;
+      const cm = this.completion.cm
      if (this.completion.options.closeOnUnfocus) {
-        cm.off("blur", this.onBlur);
-        cm.off("focus", this.onFocus);
+        cm.off('blur', this.onBlur)
+        cm.off('focus', this.onFocus)
      }
-      cm.off("scroll", this.onScroll);
+      cm.off('scroll', this.onScroll)
    },

    disable: function () {
-      this.completion.cm.removeKeyMap(this.keyMap);
-      var widget = this;
+      this.completion.cm.removeKeyMap(this.keyMap)
+      const widget = this
      this.keyMap = {
        Enter: function () {
-          widget.picked = true;
+          widget.picked = true
        }
-      };
-      this.completion.cm.addKeyMap(this.keyMap);
+      }
+      this.completion.cm.addKeyMap(this.keyMap)
    },

    pick: function () {
-      this.completion.pick(this.data, this.selectedHint);
+      this.completion.pick(this.data, this.selectedHint)
    },

    changeActive: function (i, avoidWrap) {
-      if (i >= this.data.list.length)
-        i = avoidWrap ? this.data.list.length - 1 : 0;
-      else if (i < 0)
-        i = avoidWrap ? 0 : this.data.list.length - 1;
-      if (this.selectedHint == i) return;
-      var node = this.hints.childNodes[this.selectedHint];
+      if (i >= this.data.list.length) { i = avoidWrap ? this.data.list.length - 1 : 0 } else if (i < 0) { i = avoidWrap ? 0 : this.data.list.length - 1 }
+      if (this.selectedHint == i) return
+      let node = this.hints.childNodes[this.selectedHint]
      if (node) {
-        node.className = node.className.replace(" " + ACTIVE_HINT_ELEMENT_CLASS, "");
-        node.removeAttribute("aria-selected")
+        node.className = node.className.replace(' ' + ACTIVE_HINT_ELEMENT_CLASS, '')
+        node.removeAttribute('aria-selected')
      }
-      node = this.hints.childNodes[this.selectedHint = i];
-      node.className += " " + ACTIVE_HINT_ELEMENT_CLASS;
-      node.setAttribute("aria-selected", "true")
-      this.completion.cm.getInputField().setAttribute("aria-activedescendant", node.id)
+      node = this.hints.childNodes[this.selectedHint = i]
+      node.className += ' ' + ACTIVE_HINT_ELEMENT_CLASS
+      node.setAttribute('aria-selected', 'true')
+      this.completion.cm.getInputField().setAttribute('aria-activedescendant', node.id)
      this.scrollToActive()
-      CodeMirror.signal(this.data, "select", this.data.list[this.selectedHint], node);
+      CodeMirror.signal(this.data, 'select', this.data.list[this.selectedHint], node)
    },

    scrollToActive: function () {
-      var selectedHintRange = this.getSelectedHintRange();
-      var node1 = this.hints.childNodes[selectedHintRange.from];
-      var node2 = this.hints.childNodes[selectedHintRange.to];
-      var firstNode = this.hints.firstChild;
-      if (node1.offsetTop < this.hints.scrollTop)
-        this.hints.scrollTop = node1.offsetTop - firstNode.offsetTop;
-      else if (node2.offsetTop + node2.offsetHeight > this.hints.scrollTop + this.hints.clientHeight)
-        this.hints.scrollTop = node2.offsetTop + node2.offsetHeight - this.hints.clientHeight + firstNode.offsetTop;
+      const selectedHintRange = this.getSelectedHintRange()
+      const node1 = this.hints.childNodes[selectedHintRange.from]
+      const node2 = this.hints.childNodes[selectedHintRange.to]
+      const firstNode = this.hints.firstChild
+      if (node1.offsetTop < this.hints.scrollTop) { this.hints.scrollTop = node1.offsetTop - firstNode.offsetTop } else if (node2.offsetTop + node2.offsetHeight > this.hints.scrollTop + this.hints.clientHeight) { this.hints.scrollTop = node2.offsetTop + node2.offsetHeight - this.hints.clientHeight + firstNode.offsetTop }
    },

    screenAmount: function () {
-      return Math.floor(this.hints.clientHeight / this.hints.firstChild.offsetHeight) || 1;
+      return Math.floor(this.hints.clientHeight / this.hints.firstChild.offsetHeight) || 1
    },

    getSelectedHintRange: function () {
-      var margin = this.completion.options.scrollMargin || 0;
+      const margin = this.completion.options.scrollMargin || 0
      return {
        from: Math.max(0, this.selectedHint - margin),
-        to: Math.min(this.data.list.length - 1, this.selectedHint + margin),
-      };
+        to: Math.min(this.data.list.length - 1, this.selectedHint + margin)
+      }
+    }
  }
-  };

  function applicableHelpers (cm, helpers) {
    if (!cm.somethingSelected()) return helpers
-    var result = []
-    for (var i = 0; i < helpers.length; i++)
-      if (helpers[i].supportsSelection) result.push(helpers[i])
+    const result = []
+    for (let i = 0; i < helpers.length; i++) { if (helpers[i].supportsSelection) result.push(helpers[i]) }
    return result
  }

@@ -507,17 +503,17 @@ export default function showHint(CodeMirror) {
    if (hint.async) {
      hint(cm, callback, options)
    } else {
-      var result = hint(cm, options)
+      const result = hint(cm, options)
      if (result && result.then) result.then(callback)
      else callback(result)
    }
  }

  function resolveAutoHints (cm, pos) {
-    var helpers = cm.getHelpers(pos, "hint"), words
+    const helpers = cm.getHelpers(pos, 'hint'); let words
    if (helpers.length) {
-      var resolved = function (cm, callback, options) {
-        var app = applicableHelpers(cm, helpers);
+      const resolved = function (cm, callback, options) {
+        const app = applicableHelpers(cm, helpers)

        function run (i) {
          if (i == app.length) return callback(null)
@@ -532,7 +528,7 @@ export default function showHint(CodeMirror) {
      resolved.async = true
      resolved.supportsSelection = true
      return resolved
-    } else if (words = cm.getHelper(cm.getCursor(), "hintWords")) {
+    } else if (words = cm.getHelper(cm.getCursor(), 'hintWords')) {
      return function (cm) {
        return CodeMirror.hint.fromList(cm, { words: words })
      }
@@ -546,30 +542,29 @@ export default function showHint(CodeMirror) {
    }
  }

-  CodeMirror.registerHelper("hint", "auto", {
+  CodeMirror.registerHelper('hint', 'auto', {
    resolve: resolveAutoHints
-  });
+  })

-  CodeMirror.registerHelper("hint", "fromList", function (cm, options) {
-    var cur = cm.getCursor(), token = cm.getTokenAt(cur)
-    var term, from = CodeMirror.Pos(cur.line, token.start), to = cur
+  CodeMirror.registerHelper('hint', 'fromList', function (cm, options) {
+    const cur = cm.getCursor(); const token = cm.getTokenAt(cur)
+    let term; let from = CodeMirror.Pos(cur.line, token.start); const to = cur
    if (token.start < cur.ch && /\w/.test(token.string.charAt(cur.ch - token.start - 1))) {
      term = token.string.substr(0, cur.ch - token.start)
    } else {
-      term = ""
+      term = ''
      from = cur
    }
-    var found = [];
-    for (var i = 0; i < options.words.length; i++) {
-      var word = options.words[i];
-      if (word.slice(0, term.length) == term)
-        found.push(word);
+    const found = []
+    for (let i = 0; i < options.words.length; i++) {
+      const word = options.words[i]
+      if (word.slice(0, term.length) == term) { found.push(word) }
    }

-    if (found.length) return {list: found, from: from, to: to};
-  });
+    if (found.length) return { list: found, from: from, to: to }
+  })

-  CodeMirror.commands.autocomplete = CodeMirror.showHint;
+  CodeMirror.commands.autocomplete = CodeMirror.showHint

  var defaultOptions = {
    hint: CodeMirror.hint.auto,
@@ -584,8 +579,8 @@ export default function showHint(CodeMirror) {
    customKeys: null,
    extraKeys: null,
    paddingForScrollbar: true,
-    moveOnOverlap: true,
-  };
-
-  CodeMirror.defineOption("hintOptions", null);
+    moveOnOverlap: true
+  }
+
+  CodeMirror.defineOption('hintOptions', null)
 }
--- a/src/components/advancedSearch/showhint/TextSearch/sql-hint.js
+++ b/src/components/advancedSearch/showhint/TextSearch/sql-hint.js
@@ -10,24 +10,24 @@ export default function (CodeMirror,
 ) {
  // "use strict";

-  var tables;
-  var defaultTable;
-  var keywords;
-  var identifierQuote;
-  var CONS = {
-    QUERY_DIV: ";",
-    ALIAS_KEYWORD: "AS"
-  };
-  var Pos = CodeMirror.Pos, cmpPos = CodeMirror.cmpPos;
+  let tables
+  let defaultTable
+  let keywords
+  let identifierQuote
+  const CONS = {
+    QUERY_DIV: ';',
+    ALIAS_KEYWORD: 'AS'
+  }
+  const Pos = CodeMirror.Pos; const cmpPos = CodeMirror.cmpPos

  function isArray (val) {
-    return Object.prototype.toString.call(val) == "[object Array]"
+    return Object.prototype.toString.call(val) == '[object Array]'
  }

  function getKeywords (editor) {
-    var mode = editor.doc.modeOption;
-    if (mode === "sql") mode = "text/x-sql";
-    keywords = CodeMirror.resolveMode(mode).keywords;
+    let mode = editor.doc.modeOption
+    if (mode === 'sql') mode = 'text/x-sql'
+    keywords = CodeMirror.resolveMode(mode).keywords
    if (keywordshook) {
      keywords = keywordshook(keywords, CodeMirror.resolveMode(mode)) || keywords
    }
@@ -35,13 +35,13 @@ export default function (CodeMirror,
  }

  function getIdentifierQuote (editor) {
-    var mode = editor.doc.modeOption;
-    if (mode === "sql") mode = "text/x-sql";
-    return CodeMirror.resolveMode(mode).identifierQuote || "`";
+    let mode = editor.doc.modeOption
+    if (mode === 'sql') mode = 'text/x-sql'
+    return CodeMirror.resolveMode(mode).identifierQuote || '`'
  }

  function getText (item) {
-    return typeof item == "string" ? item : item.text;
+    return typeof item == 'string' ? item : item.text
  }

  function wrapTable (name, value) {
@@ -52,15 +52,14 @@ export default function (CodeMirror,

  function parseTables (input) {
    // table 名称变大写 统一变成对象格式 columns text
-    var result = {}
+    const result = {}
    if (isArray(input)) {
-      for (var i = input.length - 1; i >= 0; i--) {
-        var item = input[i]
+      for (let i = input.length - 1; i >= 0; i--) {
+        const item = input[i]
        result[getText(item).toUpperCase()] = wrapTable(getText(item), item)
      }
    } else if (input) {
-      for (var name in input)
-        result[name.toUpperCase()] = wrapTable(name, input[name])
+      for (const name in input) { result[name.toUpperCase()] = wrapTable(name, input[name]) }
    }
    return result
  }
@@ -70,74 +69,73 @@ export default function (CodeMirror,
  }

  function shallowClone (object) {
-    var result = {};
-    for (var key in object) if (object.hasOwnProperty(key))
-      result[key] = object[key];
-    return result;
+    const result = {}
+    for (const key in object) {
+      if (object.hasOwnProperty(key)) { result[key] = object[key] } 
+    }
+    return result
  }

  function match (string, word) {
-    var len = string.length;
-    var sub = getText(word).substr(0, len);
-    return string.toUpperCase() === sub.toUpperCase();
+    const len = string.length
+    const sub = getText(word).substr(0, len)
+    return string.toUpperCase() === sub.toUpperCase()
  }

  function addMatches (result, search, wordlist, formatter) {
    if (isArray(wordlist)) {
-      for (var i = 0; i < wordlist.length; i++)
-        if (match(search, wordlist[i])) result.push(formatter(wordlist[i]))
+      for (let i = 0; i < wordlist.length; i++) { if (match(search, wordlist[i])) result.push(formatter(wordlist[i])) }
    } else {
-      for (var word in wordlist) if (wordlist.hasOwnProperty(word)) {
-        var val = wordlist[word]
-        if (!val || val === true)
-          val = word
-        else
-          val = val.displayText ? {text: val.text, displayText: val.displayText} : val.text
+      for (const word in wordlist) {
+        if (wordlist.hasOwnProperty(word)) {
+          let val = wordlist[word]
+          if (!val || val === true) { val = word } else { val = val.displayText ? { text: val.text, displayText: val.displayText } : val.text }
          if (match(search, val)) result.push(formatter(val))
        } 
      }
    }
+  }

  function cleanName (name) {
    // Get rid name from identifierQuote and preceding dot(.)
-    if (name.charAt(0) == ".") {
-      name = name.substr(1);
+    if (name.charAt(0) == '.') {
+      name = name.substr(1)
    }
    // replace duplicated identifierQuotes with single identifierQuotes
    // and remove single identifierQuotes
-    var nameParts = name.split(identifierQuote + identifierQuote);
-    for (var i = 0; i < nameParts.length; i++)
-      nameParts[i] = nameParts[i].replace(new RegExp(identifierQuote, "g"), "");
-    return nameParts.join(identifierQuote);
+    const nameParts = name.split(identifierQuote + identifierQuote)
+    for (let i = 0; i < nameParts.length; i++) { nameParts[i] = nameParts[i].replace(new RegExp(identifierQuote, 'g'), '') }
+    return nameParts.join(identifierQuote)
  }

  function insertIdentifierQuotes (name) {
-    var nameParts = getText(name).split(".");
-    for (var i = 0; i < nameParts.length; i++)
+    const nameParts = getText(name).split('.')
+    for (let i = 0; i < nameParts.length; i++) {
      nameParts[i] = identifierQuote +
        // duplicate identifierQuotes
-        nameParts[i].replace(new RegExp(identifierQuote, "g"), identifierQuote + identifierQuote) +
-        identifierQuote;
-    var escaped = nameParts.join(".");
-    if (typeof name == "string") return escaped;
-    name = shallowClone(name);
-    name.text = escaped;
-    return name;
+        nameParts[i].replace(new RegExp(identifierQuote, 'g'), identifierQuote + identifierQuote) +
+        identifierQuote 
+    }
+    const escaped = nameParts.join('.')
+    if (typeof name == 'string') return escaped
+    name = shallowClone(name)
+    name.text = escaped
+    return name
  }

  function getLeftpart (cur, token, result, editor) {
-    var nameParts = [];
-    var start = token.start;
-    var cont = true;
+    const nameParts = []
+    let start = token.start
+    let cont = true
    while (cont) {
      // 全是空格  或者  是操作符 就接着往前找
-      cont = ((token.type === 'operator' || token.string.match(/^[ ]*$/)) && start !== 0);
-      start = token.start;
-      nameParts.unshift(token.string);
-      token = editor.getTokenAt(Pos(cur.line, token.start));
+      cont = ((token.type === 'operator' || token.string.match(/^[ ]*$/)) && start !== 0)
+      start = token.start
+      nameParts.unshift(token.string)
+      token = editor.getTokenAt(Pos(cur.line, token.start))
      if (token.type === 'operator') {
-        cont = true;
-        token = editor.getTokenAt(Pos(cur.line, token.start));
+        cont = true
+        token = editor.getTokenAt(Pos(cur.line, token.start))
      }
    }

@@ -145,199 +143,194 @@ export default function (CodeMirror,
  }

  function isRightpart (cur, token, result, editor) {
-    token = editor.getTokenAt(Pos(cur.line, token.start));
+    token = editor.getTokenAt(Pos(cur.line, token.start))
    return token.type === 'operator'
  }

  function nameCompletion (cur, token, result, editor) {
    // Try to complete table, column names and return start position of completion
-    var useIdentifierQuotes = false;
-    var nameParts = [];
-    var start = token.start;
-    var cont = true;
+    let useIdentifierQuotes = false
+    const nameParts = []
+    let start = token.start
+    let cont = true
    while (cont) {
-      cont = (token.string.charAt(0) == ".");
-      useIdentifierQuotes = useIdentifierQuotes || (token.string.charAt(0) == identifierQuote);
+      cont = (token.string.charAt(0) == '.')
+      useIdentifierQuotes = useIdentifierQuotes || (token.string.charAt(0) == identifierQuote)

-      start = token.start;
-      nameParts.unshift(cleanName(token.string));
+      start = token.start
+      nameParts.unshift(cleanName(token.string))

-      token = editor.getTokenAt(Pos(cur.line, token.start));
-      if (token.string == ".") {
-        cont = true;
-        token = editor.getTokenAt(Pos(cur.line, token.start));
+      token = editor.getTokenAt(Pos(cur.line, token.start))
+      if (token.string == '.') {
+        cont = true
+        token = editor.getTokenAt(Pos(cur.line, token.start))
      }
    }

    // Try to complete table names
-    var string = nameParts.join(".");
+    let string = nameParts.join('.')
    addMatches(result, string, tables, function (w) {
-      return useIdentifierQuotes ? insertIdentifierQuotes(w) : w;
-    });
+      return useIdentifierQuotes ? insertIdentifierQuotes(w) : w
+    })

    // Try to complete columns from defaultTable
    addMatches(result, string, defaultTable, function (w) {
-      return useIdentifierQuotes ? insertIdentifierQuotes(w) : w;
-    });
+      return useIdentifierQuotes ? insertIdentifierQuotes(w) : w
+    })

    // Try to complete columns
-    string = nameParts.pop();
-    var table = nameParts.join(".");
+    string = nameParts.pop()
+    let table = nameParts.join('.')

-    var alias = false;
-    var aliasTable = table;
+    let alias = false
+    const aliasTable = table
    // Check if table is available. If not, find table by Alias
    if (!getTable(table)) {
-      var oldTable = table;
-      table = findTableByAlias(table, editor);
-      if (table !== oldTable) alias = true;
+      const oldTable = table
+      table = findTableByAlias(table, editor)
+      if (table !== oldTable) alias = true
    }

-    var columns = getTable(table);
-    if (columns && columns.columns)
-      columns = columns.columns;
+    let columns = getTable(table)
+    if (columns && columns.columns) { columns = columns.columns }

    if (columns) {
      addMatches(result, string, columns, function (w) {
-        var tableInsert = table;
-        if (alias == true) tableInsert = aliasTable;
-        if (typeof w == "string") {
-          w = tableInsert + "." + w;
+        let tableInsert = table
+        if (alias == true) tableInsert = aliasTable
+        if (typeof w == 'string') {
+          w = tableInsert + '.' + w
        } else {
-          w = shallowClone(w);
-          w.text = tableInsert + "." + w.text;
+          w = shallowClone(w)
+          w.text = tableInsert + '.' + w.text
        }
-        return useIdentifierQuotes ? insertIdentifierQuotes(w) : w;
-      });
+        return useIdentifierQuotes ? insertIdentifierQuotes(w) : w
+      })
    }
-    return start;
+    return start
  }

  function eachWord (lineText, f) {
-    var words = lineText.split(/\s+/)
-    for (var i = 0; i < words.length; i++)
-      if (words[i]) f(words[i].replace(/[`,;]/g, ''))
+    const words = lineText.split(/\s+/)
+    for (let i = 0; i < words.length; i++) { if (words[i]) f(words[i].replace(/[`,;]/g, '')) }
  }

  function findTableByAlias (alias, editor) {
-    var doc = editor.doc;
-    var fullQuery = doc.getValue();
-    var aliasUpperCase = alias.toUpperCase();
-    var previousWord = "";
-    var table = "";
-    var separator = [];
-    var validRange = {
+    const doc = editor.doc
+    const fullQuery = doc.getValue()
+    const aliasUpperCase = alias.toUpperCase()
+    let previousWord = ''
+    let table = ''
+    const separator = []
+    let validRange = {
      start: Pos(0, 0),
      end: Pos(editor.lastLine(), editor.getLineHandle(editor.lastLine()).length)
-    };
+    }

    // add separator
-    var indexOfSeparator = fullQuery.indexOf(CONS.QUERY_DIV);
+    let indexOfSeparator = fullQuery.indexOf(CONS.QUERY_DIV)
    while (indexOfSeparator != -1) {
-      separator.push(doc.posFromIndex(indexOfSeparator));
-      indexOfSeparator = fullQuery.indexOf(CONS.QUERY_DIV, indexOfSeparator + 1);
+      separator.push(doc.posFromIndex(indexOfSeparator))
+      indexOfSeparator = fullQuery.indexOf(CONS.QUERY_DIV, indexOfSeparator + 1)
    }
-    separator.unshift(Pos(0, 0));
-    separator.push(Pos(editor.lastLine(), editor.getLineHandle(editor.lastLine()).text.length));
+    separator.unshift(Pos(0, 0))
+    separator.push(Pos(editor.lastLine(), editor.getLineHandle(editor.lastLine()).text.length))

    // find valid range
-    var prevItem = null;
-    var current = editor.getCursor()
+    let prevItem = null
+    const current = editor.getCursor()
    for (var i = 0; i < separator.length; i++) {
      if ((prevItem == null || cmpPos(current, prevItem) > 0) && cmpPos(current, separator[i]) <= 0) {
-        validRange = {start: prevItem, end: separator[i]};
-        break;
+        validRange = { start: prevItem, end: separator[i] }
+        break
      }
-      prevItem = separator[i];
+      prevItem = separator[i]
    }

    if (validRange.start) {
-      var query = doc.getRange(validRange.start, validRange.end, false);
+      const query = doc.getRange(validRange.start, validRange.end, false)

      for (var i = 0; i < query.length; i++) {
-        var lineText = query[i];
+        const lineText = query[i]
        eachWord(lineText, function (word) {
-          var wordUpperCase = word.toUpperCase();
-          if (wordUpperCase === aliasUpperCase && getTable(previousWord))
-            table = previousWord;
-          if (wordUpperCase !== CONS.ALIAS_KEYWORD)
-            previousWord = word;
-        });
-        if (table) break;
+          const wordUpperCase = word.toUpperCase()
+          if (wordUpperCase === aliasUpperCase && getTable(previousWord)) { table = previousWord }
+          if (wordUpperCase !== CONS.ALIAS_KEYWORD) { previousWord = word }
+        })
+        if (table) break
      }
    }
-    return table;
+    return table
  }

-  CodeMirror.registerHelper("hint", "sql", function (editor, options) {
-    tables = parseTables(options && options.tables);
-    var defaultTableName = options && options.defaultTable;   //默认table 名称
-    var disableKeywords = options && options.disableKeywords;  //禁用的keyword
-    defaultTable = defaultTableName && getTable(defaultTableName);
-    keywords = getKeywords(editor);           //获取 定义defineMIME 时候的关键字参数
-    identifierQuote = getIdentifierQuote(editor);   //获取 引用标识符
+  CodeMirror.registerHelper('hint', 'sql', function (editor, options) {
+    tables = parseTables(options && options.tables)
+    const defaultTableName = options && options.defaultTable // 默认table 名称
+    const disableKeywords = options && options.disableKeywords // 禁用的keyword
+    defaultTable = defaultTableName && getTable(defaultTableName)
+    keywords = getKeywords(editor) // 获取 定义defineMIME 时候的关键字参数
+    identifierQuote = getIdentifierQuote(editor) // 获取 引用标识符

-    if (defaultTableName && !defaultTable)
-      defaultTable = findTableByAlias(defaultTableName, editor);
+    if (defaultTableName && !defaultTable) { defaultTable = findTableByAlias(defaultTableName, editor) }

-    defaultTable = defaultTable || [];
+    defaultTable = defaultTable || []

-    if (defaultTable.columns)
-      defaultTable = defaultTable.columns;
+    if (defaultTable.columns) { defaultTable = defaultTable.columns }

-    var cur = editor.getCursor(); //line  当前行 ch 索引 sticky ??
-    var result = [];
-    var token = editor.getTokenAt(cur), start, end, search;
+    const cur = editor.getCursor() // line  当前行 ch 索引 sticky ??
+    let result = []
+    const token = editor.getTokenAt(cur); let start; let end; let search
    if (token.end > cur.ch) {
-      token.end = cur.ch;
-      token.string = token.string.slice(0, cur.ch - token.start);
+      token.end = cur.ch
+      token.string = token.string.slice(0, cur.ch - token.start)
    }

    // start end search 赋值
    // todo 此处允许字符串包含 .
    // if (token.string.match(/^[.`"'\w@][\w$#]*/g)) {
    if (token.string.match(/^[.`"'\w@][\w#]*/g)) {
-      search = token.string;
-      start = token.start;
-      end = token.end;
+      search = token.string
+      start = token.start
+      end = token.end
    } else {
-      start = end = cur.ch;
-      search = "";
+      start = end = cur.ch
+      search = ''
    }

    // 对引用标识符 . 的使用,关联table 列
-    if (search.charAt(0) == "." || search.charAt(0) == identifierQuote) {
-      start = nameCompletion(cur, token, result, editor);
+    if (search.charAt(0) == '.' || search.charAt(0) == identifierQuote) {
+      start = nameCompletion(cur, token, result, editor)
    } else {
-      var objectOrClass = function (w, className) {
-        if (typeof w === "object") {
-          w.className = className;
+      const objectOrClass = function (w, className) {
+        if (typeof w === 'object') {
+          w.className = className
        } else {
-          w = {text: w, className: className};
+          w = { text: w, className: className }
+        }
+        return w
      }
-        return w;
-      };
      addMatches(result, search, defaultTable, function (w) {
-        return objectOrClass(w, "CodeMirror-hint-table CodeMirror-hint-default-table");
-      });
+        return objectOrClass(w, 'CodeMirror-hint-table CodeMirror-hint-default-table')
+      })
      addMatches(
        result,
        search,
        tables, function (w) {
-          return objectOrClass(w, "CodeMirror-hint-table");
+          return objectOrClass(w, 'CodeMirror-hint-table')
        }
-      );
-      if (!disableKeywords)
+      )
+      if (!disableKeywords) {
        addMatches(result, search, keywords, function (w) {
-          return objectOrClass(w.toUpperCase(), "CodeMirror-hint-keyword");
-        });
+          return objectOrClass(w.toUpperCase(), 'CodeMirror-hint-keyword')
+        }) 
+      }
    }
    // 写入一个 钩子,在这里决定提示的内容
    if (hinthook) {
-      var params = {
+      const params = {
        search, // 搜索 关键字
-        keywords, //关键字列表
-      };
+        keywords // 关键字列表
+      }
      if (token.type === 'operator') {
        params.leftpart = getLeftpart(cur, token, result, editor) || ''
      }
@@ -347,7 +340,7 @@ export default function (CodeMirror,

      /* 之后的参数 是为manualHinthook 预备的 */

-      var manualParams = {
+      const manualParams = {
        search, // 搜索 关键字
        // keywords, //关键字列表  没啥用
        from: Pos(cur.line, start),
@@ -360,13 +353,13 @@ export default function (CodeMirror,
        cur
      }

-      var refField = matchMain(CodeMirror, params, manualParams);
+      const refField = matchMain(CodeMirror, params, manualParams)
      manualParams.refField = refField
-      manualParams.leftpart = refField?.label || manualParams.leftpart;
-      params.leftpart = refField?.label || params.leftpart;
+      manualParams.leftpart = refField?.label || manualParams.leftpart
+      params.leftpart = refField?.label || params.leftpart

      result = hinthook(result, params, manualParams) || result
    }
-    return {list: result, from: Pos(cur.line, start), to: Pos(cur.line, end)};
-  });
+    return { list: result, from: Pos(cur.line, start), to: Pos(cur.line, end) }
+  })
 }
--- a/src/components/advancedSearch/showhint/TextSearch/sql.js
+++ b/src/components/advancedSearch/showhint/TextSearch/sql.js
--- a/src/components/advancedSearch/showhint/const/functionTips.js
+++ b/src/components/advancedSearch/showhint/const/functionTips.js
@@ -1,4 +1,4 @@
-var renderData = [
+const renderData = [
  {
    name: 'COUNT',
    syntax: 'count(expr)',
@@ -34,7 +34,7 @@ var renderData = [
        code: 'count(distinct client_ip)'
      },
      {
-        purpose: `Counts  the number of different "Server IP" and "Server port" :`,
+        purpose: 'Counts  the number of different "Server IP" and "Server port" :',
        code: 'count(distinct server_ip, server_port)'
      }
    ],
@@ -50,11 +50,11 @@ var renderData = [
    description: 'Aggregate function is used to calculate the arithmetic mean in the specified field. EXPR must be Integer,Float or Decimal and returned value as Float.',
    example: [
      {
-        purpose: `Calculates the average(mean) "Byte sent (sent_bytes)" field:`,
+        purpose: 'Calculates the average(mean) "Byte sent (sent_bytes)" field:',
        code: 'avg(sent_bytes)'
      },
      {
-        purpose: `Calculates the average(mean) "Bytes" , rounded to 2 decimal points:`,
+        purpose: 'Calculates the average(mean) "Bytes" , rounded to 2 decimal points:',
        code: 'round(avg(sent_bytes+received_bytes),2)'
      }
    ],
@@ -70,11 +70,11 @@ var renderData = [
    description: 'Aggregate function is used to sum of the values of the specified field. EXPR must be Integer,Float or Decimal.',
    example: [
      {
-        purpose: `The sum of the "Byte sent (sent_bytes)" field:`,
+        purpose: 'The sum of the "Byte sent (sent_bytes)" field:',
        code: 'sum(sent_bytes)'
      },
      {
-        purpose: `The sum of the "sent_bytes" and "received_bytes" fields , and rename as "Bytes ":`,
+        purpose: 'The sum of the "sent_bytes" and "received_bytes" fields , and rename as "Bytes ":',
        code: 'sum(sent_bytes+received_bytes) as Bytes'
      }
    ],
@@ -89,7 +89,7 @@ var renderData = [
    description: 'Aggregate function is used to return the maximum value of the specified field.',
    example: [
      {
-        purpose: `Returns the maximum value of  the  "Byte sent (sent_bytes)" field:`,
+        purpose: 'Returns the maximum value of  the  "Byte sent (sent_bytes)" field:',
        code: 'max(sent_bytes)'
      }
    ],
@@ -105,7 +105,7 @@ var renderData = [
    description: 'Aggregate function is used to return the minimum value of the specified field.',
    example: [
      {
-        purpose: `Returns the minimum value of  the  "Byte sent (sent_bytes)" field:`,
+        purpose: 'Returns the minimum value of  the  "Byte sent (sent_bytes)" field:',
        code: 'min(sent_bytes)'
      }
    ],
@@ -121,7 +121,7 @@ var renderData = [
    description: 'Rounds down a timestamp, returning it as a new timestamp,optionally from some reference fill, and fills time gaps and impute missing values.',
    example: [
      {
-        purpose: `Round the recv_time  down to a 5 minutes increment and fill time gaps and impute zero value.`,
+        purpose: 'Round the recv_time  down to a 5 minutes increment and fill time gaps and impute zero value.',
        code: 'TIME_FLOOR_WITH_FILL(recv_time,\'PT5M\',\'zero\')'
      }
    ],
@@ -148,21 +148,21 @@ var renderData = [
  },
  {
    name: 'UNIX_TIMESTAMP',
-    syntax: `UNIX_TIMESTAMP(date)`,
-    description: `Returns a Unix timestamp the value of the argument as seconds since '1970-01-01 00:00:00' UTC.`,
+    syntax: 'UNIX_TIMESTAMP(date)',
+    description: 'Returns a Unix timestamp the value of the argument as seconds since \'1970-01-01 00:00:00\' UTC.',
    example: [
      {
-        purpose: `Specify a datetime string "2019-06-06 19:11:12",  calculate the Unix timestamp:`,
+        purpose: 'Specify a datetime string "2019-06-06 19:11:12",  calculate the Unix timestamp:',
        code: 'UNIX_TIMESTAMP(\'2019-06-06 19:11:12\')'
      },
      {
-        purpose: `Specify a ISO8601 datetime string with time zone information  "2019-10-12T14:20:50+08:00",  calculate the Unix timestamp:`,
+        purpose: 'Specify a ISO8601 datetime string with time zone information  "2019-10-12T14:20:50+08:00",  calculate the Unix timestamp:',
        code: 'UNIX_TIMESTAMP(\'2019-10-12T14:20:50+08:00\')'
      },
      {
-        purpose: `Specify a ISO8601 datetime string with UTC+0 time zone information  "2019-10-12T14:20:50Z",  calculate the Unix timestamp:`,
+        purpose: 'Specify a ISO8601 datetime string with UTC+0 time zone information  "2019-10-12T14:20:50Z",  calculate the Unix timestamp:',
        code: 'UNIX_TIMESTAMP(\'2019-10-12T14:20:50Z\')'
-      },
+      }
    ],
    details () {
      // 支持jsx 嵌套写法,万一测试要关键字加重呢
@@ -181,13 +181,13 @@ var renderData = [
  },
  {
    name: 'FROM_UNIXTIME',
-    syntax: `FROM_UNIXTIME(unix_timestamp)`,
-    description: `Returns a representation of unix_timestamp as a datetime or character string value. The value returned is expressed using the UTC+0 time zone.`,
+    syntax: 'FROM_UNIXTIME(unix_timestamp)',
+    description: 'Returns a representation of unix_timestamp as a datetime or character string value. The value returned is expressed using the UTC+0 time zone.',
    example: [
      {
-        purpose: `Specify a Unix Timestamp  "1570881546",  calculate the datetime string:`,
+        purpose: 'Specify a Unix Timestamp  "1570881546",  calculate the datetime string:',
        code: 'FROM_UNIXTIME(1570881546)'
-      },
+      }
    ],
    details () {
      // 支持jsx 嵌套写法,万一测试要关键字加重呢
@@ -198,10 +198,10 @@ var renderData = [
  {
    name: 'DATE_FORMAT',
    syntax: 'DATE_FORMAT(date, format)',
-    description: `Formats the date value according to the format string.`,
+    description: 'Formats the date value according to the format string.',
    example: [
      {
-        purpose: `Specify a Unix Timestamp  "1570881546", calculate the datetime string with format "%Y-%m-%d %H:%i:%s":`,
+        purpose: 'Specify a Unix Timestamp  "1570881546", calculate the datetime string with format "%Y-%m-%d %H:%i:%s":',
        code: 'DATE_FORMAT(FROM_UNIXTIME(1570881546), \'%Y-%m-%d %H:%i:%s\')'
      }
    ],
@@ -233,21 +233,21 @@ var renderData = [
  },
  {
    name: 'CONVERT_TZ',
-    syntax: `CONVERT_TZ(dt, from_tz, to_tz)`,
-    description: `Converts a datetime value dt from the time zone given by from_tz to the time zone given by to_tz and returns the resulting value.`,
+    syntax: 'CONVERT_TZ(dt, from_tz, to_tz)',
+    description: 'Converts a datetime value dt from the time zone given by from_tz to the time zone given by to_tz and returns the resulting value.',
    example: [
      {
-        purpose: `Specify a datetime string "2021-11-11 00:00:00", converted from  GMT(Greenwich Mean Time) to Asia/Shanghai time zone:`,
+        purpose: 'Specify a datetime string "2021-11-11 00:00:00", converted from  GMT(Greenwich Mean Time) to Asia/Shanghai time zone:',
        code: 'CONVERT_TZ(\'2021-11-11 00:00:00\',\'GMT\',\'Asia/Shanghai\')'
      },
      {
-        purpose: `Specify a Unix timestamp "1636588800", converted from  GMT(Greenwich Mean Time) to Asia/Shanghai time zone:`,
+        purpose: 'Specify a Unix timestamp "1636588800", converted from  GMT(Greenwich Mean Time) to Asia/Shanghai time zone:',
        code: 'CONVERT_TZ(FROM_UNIXTIME(1636588800),\'GMT\',\'Asia/Shanghai\')'
      },
      {
-        purpose: `Specify a Unix timestamp "1636588800", converted from  Europe/London to America/New_York time zone:`,
+        purpose: 'Specify a Unix timestamp "1636588800", converted from  Europe/London to America/New_York time zone:',
        code: 'CONVERT_TZ(DATE_FORMAT(FROM_UNIXTIME(1636588800), \'%Y-%m-%d %H:%i:%s\'),\'Europe/London\',\'America/New_York\')'
-      },
+      }
    ],
    details () {
      // 支持jsx 嵌套写法,万一测试要关键字加重呢
@@ -263,11 +263,11 @@ var renderData = [
  },
  {
    name: 'MEDIAN',
-    syntax: `MEDIAN(<expr>)`,
-    description: `Aggregate function is used to calculate median value. expr must be Integer, Float or Decimal.`,
+    syntax: 'MEDIAN(<expr>)',
+    description: 'Aggregate function is used to calculate median value. expr must be Integer, Float or Decimal.',
    example: [
      {
-        purpose: `Calculates the median "TCP Handshake Latency (tcp_handshake_latency_ms)" field:`,
+        purpose: 'Calculates the median "TCP Handshake Latency (tcp_handshake_latency_ms)" field:',
        code: 'MEDIAN(tcp_handshake_latency_ms)'
      }
    ],
@@ -279,11 +279,11 @@ var renderData = [
  },
  {
    name: 'QUANTILE',
-    syntax: `QUANTILE(<expr>[, <level>])`,
-    description: `Aggregate function is used to calculate an approximate quantile of a numeric data sequence.`,
+    syntax: 'QUANTILE(<expr>[, <level>])',
+    description: 'Aggregate function is used to calculate an approximate quantile of a numeric data sequence.',
    example: [
      {
-        purpose: `Calculates the  90th percentile  "TCP Handshake Latency (tcp_handshake_latency_ms)" field:`,
+        purpose: 'Calculates the  90th percentile  "TCP Handshake Latency (tcp_handshake_latency_ms)" field:',
        code: 'QUANTILE(tcp_handshake_latency_ms, 0.9)'
      }
    ],
@@ -300,13 +300,13 @@ var renderData = [
        </ul>
      </div>
    }
-  },
+  }
 ]

 function main () {
-  var functionTips = {}
+  const functionTips = {}
  renderData.forEach((item, index) => {
-    var data = item // 这是个闭包
+    const data = item // 这是个闭包
    functionTips[item.name] = {
      name: item.name,
      syntax: item.syntax,
@@ -327,8 +327,9 @@ function main () {
            })}
          </ul>
          <h3> Details: </h3>
-          {Object.prototype.toString.call(data.details) === '[object Function]' ?
-            <renderer renderFun={data.details}></renderer> : <p>{data.details} </p>}
+          {Object.prototype.toString.call(data.details) === '[object Function]'
+            ? <renderer renderFun={data.details}></renderer>
+            : <p>{data.details} </p>}
        </div>)
      }
    }
@@ -337,5 +338,5 @@ function main () {
 }

 export const functionList = renderData
-var functionTips = main()
+const functionTips = main()
 export default functionTips
--- a/src/components/advancedSearch/showhint/const/sqlTips.js
+++ b/src/components/advancedSearch/showhint/const/sqlTips.js
@@ -1,37 +1,37 @@
-var renderData = [
+const renderData = [
  {
    name: 'FROM',
-    syntax: `FROM [db.]table |$log_type`,
+    syntax: 'FROM [db.]table |$log_type',
    description: {
-      title: `The table name of logs. If you type $log_type, the variable value is the current table name of logs.`
+      title: 'The table name of logs. If you type $log_type, the variable value is the current table name of logs.'
    }
  },
  {
    name: 'SELECT',
-    syntax: `Optional. The selected columns(also known as dimensions and metrics).`,
+    syntax: 'Optional. The selected columns(also known as dimensions and metrics).',
    description: {
      title: '可选，获取列',
      list: [
-        `aggregate_function(field) - Aggregate functions, default is count.`,
-        `as field - Use as to specify a aliases for a field or expression.`
+        'aggregate_function(field) - Aggregate functions, default is count.',
+        'as field - Use as to specify a aliases for a field or expression.'
      ]
    }
  },
  {
    name: 'GROUP BY',
-    syntax: `GROUP BY <field-list>`,
+    syntax: 'GROUP BY <field-list>',
    description: {
      title: 'Aggregate data. GROUP BY clause switches the SELECT query into an aggregation mode：',
      list: [
-        `The list of fields known as "grouping key", while each individual expression be referred to as a "key expression".`,
-        `All the expressions in the SELECT, HAVING and ORDER BY , must be "key expression" or on aggregate functions.`,
-        `The result of aggregating SELECT query will return unique values of  "grouping key" in log type.`
+        'The list of fields known as "grouping key", while each individual expression be referred to as a "key expression".',
+        'All the expressions in the SELECT, HAVING and ORDER BY , must be "key expression" or on aggregate functions.',
+        'The result of aggregating SELECT query will return unique values of  "grouping key" in log type.'
      ]
    }
  },
  {
    name: 'HAVING',
-    syntax: `HAVING <expression-list>`,
+    syntax: 'HAVING <expression-list>',
    description: {
      title: `Optional. HAVING clause filtering the aggregation results retrieved by GROUP BY. It is difference is that WHERE is performed before aggregation, while HAVING is performed after it.
      Note: HAVING can't be performed if GROUP BY is not performed.`
@@ -39,26 +39,26 @@ var renderData = [
  },
  {
    name: 'LIMIT',
-    syntax: `LIMIT [n, ]m`,
+    syntax: 'LIMIT [n, ]m',
    description: {
-      title: `Select the m rows from the aggregate results after skipping the first n rows. Default is 10 rows.`
+      title: 'Select the m rows from the aggregate results after skipping the first n rows. Default is 10 rows.'
    }
  },
  {
    name: 'ORDER BY',
-    syntax: `ORDER BY <sort-field> [ASC|DESC]`,
+    syntax: 'ORDER BY <sort-field> [ASC|DESC]',
    description: {
-      title: `Sort all of the results by the specified fields.`
+      title: 'Sort all of the results by the specified fields.'
    }
  },
  {
    name: 'WHERE',
-    syntax: `where  $filter [and <expression-list>]`,
+    syntax: 'where  $filter [and <expression-list>]',
    description: {
-      title: `Filter the data.`,
+      title: 'Filter the data.',
      list: [
-        `$filter - Default global filter clause. Include Time period, Vsys ID, and other expressions, etc`,
-        `and <expression-list> - filter clauses`
+        '$filter - Default global filter clause. Include Time period, Vsys ID, and other expressions, etc',
+        'and <expression-list> - filter clauses'
      ]
    }
  }
@@ -66,9 +66,9 @@ var renderData = [
 export const sqlList = renderData

 function main () {
-  var sqlTips = {}
+  const sqlTips = {}
  renderData.forEach((item, index) => {
-    var data = item // 这是个闭包
+    const data = item // 这是个闭包
    sqlTips[item.name] = {
      name: item.name,
      syntax: item.syntax,
@@ -93,5 +93,5 @@ function main () {
  return sqlTips
 }

-var sqlTips = main()
+const sqlTips = main()
 export default sqlTips
--- a/src/components/advancedSearch/showhint/const/varTips.js
+++ b/src/components/advancedSearch/showhint/const/varTips.js
@@ -1,4 +1,4 @@
-var renderData = [
+const renderData = [
  {
    name: '$LOG_TYPE',
    description: 'A variable is a symbolic representation of data that enables you to access a value without having to enter it manually wherever you need it. You can use $ to reference variables throughout Advanced Search. ',
@@ -34,8 +34,9 @@ function main () {
          <h3> Description: </h3>
          <p> {data.description}</p>
          <h3> Details: </h3>
-          {Object.prototype.toString.call(data.details) === '[object Function]' ?
-            <renderer renderFun={data.details}></renderer> : <p>{data.details} </p>}
+          {Object.prototype.toString.call(data.details) === '[object Function]'
+            ? <renderer renderFun={data.details}></renderer>
+            : <p>{data.details} </p>}
        </div>)
      }
    }
--- a/src/components/advancedSearch/showhint/packages/service/DeviceTag.js
+++ b/src/components/advancedSearch/showhint/packages/service/DeviceTag.js
@@ -14,9 +14,9 @@ export class DeviceTag {
  getDataFromRemote () {
    // 从 远程,也就是请求接口获取数据
    return this.context.$get('/deviceTag', this.queryparams).then((res) => {
-      this.context.initDataReadyCb && this.context.initDataReadyCb(res.data || null); //组件 请求 文件成功回调
+      this.context.initDataReadyCb && this.context.initDataReadyCb(res.data || null) // 组件 请求 文件成功回调
      if (res.code === 200) {
-        var data = res.data && res.data.list;
+        const data = res.data && res.data.list
        return data
      } else {
        // this.context.$message({
@@ -36,10 +36,10 @@ export class DeviceTag {
    const resultData = {
      operatesList: [
        {
-          "name": "AND",
-          "function": "A AND B",
-          type: "abstract",
-          label: "AND"
+          name: 'AND',
+          function: 'A AND B',
+          type: 'abstract',
+          label: 'AND'
        }
      ],
      filtersList: data ? this.filterQueryData(data.fields || []) : [],
@@ -52,15 +52,15 @@ export class DeviceTag {
  }

  organizeData (data = []) {
-    var fields = []
-    var res = JSON.parse(JSON.stringify(dataTemplate));
+    const fields = []
+    const res = JSON.parse(JSON.stringify(dataTemplate))
    if (!data) {
      return
    }
    data.forEach((item, index) => {
-      var fieldItem = JSON.parse(JSON.stringify(fieldTemplate));
+      const fieldItem = JSON.parse(JSON.stringify(fieldTemplate))
      fieldItem.name = item.tagValue
-      fieldItem.type = "Array"
+      fieldItem.type = 'Array'
      fieldItem.label = item.tagName
      fieldItem.doc.data = (item.subTags || []).map(tagItem => {
        return {
@@ -78,7 +78,7 @@ export class DeviceTag {
  getFormatedData (callback) {
    this.getDataFromRemote().then(data => {
      // 组织数据 模拟scama
-      var organizedData = this.organizeData(data);
+      const organizedData = this.organizeData(data)
      // 格式化数据
      this.data = this.formatData(organizedData)
      // 获取scameData的时候 查询映射字段
--- a/src/components/advancedSearch/showhint/packages/service/oldMockData.js
+++ b/src/components/advancedSearch/showhint/packages/service/oldMockData.js
--- a/src/components/advancedSearch/showhint/packages/service/template.js
+++ b/src/components/advancedSearch/showhint/packages/service/template.js
@@ -1,156 +1,156 @@
 export const dataTemplate = {
-  "doc": {
-    "functions": {
-      "aggregation": [
+  doc: {
+    functions: {
+      aggregation: [
        {
-          "name": "COUNT",
-          "function": "count(expr)",
-          "label": "COUNT"
+          name: 'COUNT',
+          function: 'count(expr)',
+          label: 'COUNT'
        }, {
-          "name": "COUNT_DISTINCT",
-          "function": "count(distinct expr)",
-          "label": "COUNT_DISTINCT"
+          name: 'COUNT_DISTINCT',
+          function: 'count(distinct expr)',
+          label: 'COUNT_DISTINCT'
        }, {
-          "name": "AVG",
-          "function": "avg(expr)",
-          "label": "AVG"
+          name: 'AVG',
+          function: 'avg(expr)',
+          label: 'AVG'
        }, {
-          "name": "SUM",
-          "function": "sum(expr)",
-          "label": "SUM"
+          name: 'SUM',
+          function: 'sum(expr)',
+          label: 'SUM'
        }, {
-          "name": "MAX",
-          "function": "max(expr)",
-          "label": "MAX"
+          name: 'MAX',
+          function: 'max(expr)',
+          label: 'MAX'
        }, {
-          "name": "MIN",
-          "function": "min(expr)",
-          "label": "MIN"
+          name: 'MIN',
+          function: 'min(expr)',
+          label: 'MIN'
        }],
-      "operator": [
+      operator: [
        {
-          "name": "=",
-          "function": "expr = value",
-          "label": "="
+          name: '=',
+          function: 'expr = value',
+          label: '='
        }, {
-          "name": "!=",
-          "function": "expr != value",
-          "label": "!="
+          name: '!=',
+          function: 'expr != value',
+          label: '!='
        }, {
-          "name": ">",
-          "function": "expr > value",
-          "label": ">"
+          name: '>',
+          function: 'expr > value',
+          label: '>'
        }, {
-          "name": "<",
-          "function": "expr < value",
-          "label": "<"
+          name: '<',
+          function: 'expr < value',
+          label: '<'
        }, {
-          "name": ">=",
-          "function": "expr >= value",
-          "label": ">="
+          name: '>=',
+          function: 'expr >= value',
+          label: '>='
        }, {
-          "name": "<=",
-          "function": "expr <= value",
-          "label": "<="
+          name: '<=',
+          function: 'expr <= value',
+          label: '<='
        }, {
-          "name": "has",
-          "function": "has(expr, value)",
-          "label": "HAS"
+          name: 'has',
+          function: 'has(expr, value)',
+          label: 'HAS'
        }, {
-          "name": "in",
-          "function": "expr in (values)",
-          "label": "IN"
+          name: 'in',
+          function: 'expr in (values)',
+          label: 'IN'
        }, {
-          "name": "not in",
-          "function": "expr not in (values)",
-          "label": "NOT IN"
+          name: 'not in',
+          function: 'expr not in (values)',
+          label: 'NOT IN'
        }, {
-          "name": "like",
-          "function": "expr like value",
-          "label": "LIKE"
+          name: 'like',
+          function: 'expr like value',
+          label: 'LIKE'
        }, {
-          "name": "not like",
-          "function": "expr not like value",
-          "label": "NOT LIKE"
+          name: 'not like',
+          function: 'expr not like value',
+          label: 'NOT LIKE'
        }, {
-          "name": "notEmpty",
-          "function": "notEmpty(expr)",
-          "label": "NOT EMPTY"
+          name: 'notEmpty',
+          function: 'notEmpty(expr)',
+          label: 'NOT EMPTY'
        }, {
-          "name": "empty",
-          "function": "empty(expr)",
-          "label": "EMPTY"
+          name: 'empty',
+          function: 'empty(expr)',
+          label: 'EMPTY'
        }]
    },
-    "schema_query": {
-      "references": {
-        "aggregation": [
+    schema_query: {
+      references: {
+        aggregation: [
          {
-            "type": "int",
-            "functions": "COUNT,COUNT_DISTINCT,AVG,SUM,MAX,MIN"
+            type: 'int',
+            functions: 'COUNT,COUNT_DISTINCT,AVG,SUM,MAX,MIN'
          }, {
-            "type": "long",
-            "functions": "COUNT,COUNT_DISTINCT,AVG,SUM,MAX,MIN"
+            type: 'long',
+            functions: 'COUNT,COUNT_DISTINCT,AVG,SUM,MAX,MIN'
          }, {
-            "type": "float",
-            "functions": "COUNT,COUNT_DISTINCT,AVG,SUM,MAX,MIN"
+            type: 'float',
+            functions: 'COUNT,COUNT_DISTINCT,AVG,SUM,MAX,MIN'
          }, {
-            "type": "double",
-            "functions": "COUNT,COUNT_DISTINCT,AVG,SUM,MAX,MIN"
+            type: 'double',
+            functions: 'COUNT,COUNT_DISTINCT,AVG,SUM,MAX,MIN'
          }, {
-            "type": "string",
-            "functions": "COUNT,COUNT_DISTINCT"
+            type: 'string',
+            functions: 'COUNT,COUNT_DISTINCT'
          }, {
-            "type": "date",
-            "functions": "COUNT,COUNT_DISTINCT,MAX,MIN"
+            type: 'date',
+            functions: 'COUNT,COUNT_DISTINCT,MAX,MIN'
          }, {
-            "type": "timestamp",
-            "functions": "COUNT,COUNT_DISTINCT,MAX,MIN"
+            type: 'timestamp',
+            functions: 'COUNT,COUNT_DISTINCT,MAX,MIN'
          }
        ],
-        "operator": [
+        operator: [
          {
-            "type": "int",
-            "functions": "=,!=,>,<,>=,<=,in,not in"
+            type: 'int',
+            functions: '=,!=,>,<,>=,<=,in,not in'
          }, {
-            "type": "long",
-            "functions": "=,!=,>,<,>=,<=,in,not in"
+            type: 'long',
+            functions: '=,!=,>,<,>=,<=,in,not in'
          }, {
-            "type": "float",
-            "functions": "=,!=,>,<,>=,<="
+            type: 'float',
+            functions: '=,!=,>,<,>=,<='
          }, {
-            "type": "double",
-            "functions": "=,!=,>,<,>=,<="
+            type: 'double',
+            functions: '=,!=,>,<,>=,<='
          }, {
-            "type": "string",
-            "functions": "=,!=,in,not in,like,not like,notEmpty,empty"
+            type: 'string',
+            functions: '=,!=,in,not in,like,not like,notEmpty,empty'
          }, {
-            "type": "date",
-            "functions": "=,!=,>,<,>=,<="
+            type: 'date',
+            functions: '=,!=,>,<,>=,<='
          }, {
-            "type": "timestamp",
-            "functions": "=,!=,>,<,>=,<="
+            type: 'timestamp',
+            functions: '=,!=,>,<,>=,<='
          }, {
-            "type": "array",
-            "functions": "has"
+            type: 'array',
+            functions: 'has'
          }]
      }
    }
  },
-  "fields": []
+  fields: []
 }

 export const fieldTemplate = {
-  "name": "",
-  "label": "",
-  "doc": {
-    "allow_query": "true",
-    "visibility": null,
-    "constraints": {
-      "type": "tag",
-      "operator_functions": "in,not in"
+  name: '',
+  label: '',
+  doc: {
+    allow_query: 'true',
+    visibility: null,
+    constraints: {
+      type: 'tag',
+      operator_functions: 'in,not in'
    },
-    "data": []
+    data: []
  },
-  "type": "Array"
+  type: 'Array'
 }
--- a/src/components/common/Pagination.vue
+++ b/src/components/common/Pagination.vue
@@ -17,7 +17,7 @@
        <el-select v-model="pageSize" :placeholder="pageSize+$t('pageSize')" size="small"
                   :teleported="appendToBody" class="pagination-size-select" @change="size"
                   :popper-class="popClass" @visible-change="popperVisible">
-          <el-option v-for="(item, index) in pageSizes" :key="index" :label="item.label" :value="item.value"></el-option>
+          <el-option v-for="item in pageSizes" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>

      </el-pagination>
--- a/src/components/common/SimpleLoading.vue
+++ b/src/components/common/SimpleLoading.vue
@@ -1,6 +1,6 @@
 <template>
  <Transition name="fade">
-    <div class="simple-loading" :class="placementClass" v-show="loading">
+    <div class="simple-loading" :class="placementClass" v-show="loading" :style="style">
      <div class="simple-loading__box" :class="sizeClass">
        <div class="simple-loading__inner">
          <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
@@ -22,6 +22,10 @@ export default {
    placement: {
      type: String,
      default: 'center' // top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end/center
+    },
+    style: {
+      type: String,
+      default: ''
    }
  },
  data () {
--- a/src/components/common/TimeLine.vue
+++ b/src/components/common/TimeLine.vue
@@ -4,7 +4,7 @@
      <el-slider v-model="currentTime" @change="onChange" :step="1" :max="timeLine.length>0?timeLine.length-1:99" :format-tooltip="formatTooltip"/>
    </div>
    <div class="time-line-container">
-      <div v-for="(item, index) in timeLine" :key="index">
+      <div v-for="item in timeLine" :key="item.stamp">
        <div v-if="item.showFlag" style="color: #666;">{{ item.time }}</div>
      </div>
    </div>
@@ -111,7 +111,8 @@ export default {
        const month = date.getMonth() + 1
        const day = date.getDate()
        const obj = {
-          time: `${date.getFullYear()}-${month < 10 ? ('0' + month) : month}-${day < 10 ? ('0' + day) : day}`,
+          // time: `${date.getFullYear()}-${month < 10 ? ('0' + month) : month}-${day < 10 ? ('0' + day) : day}`,
+          time: `${month < 10 ? ('0' + month) : month}-${day < 10 ? ('0' + day) : day}`,
          time1: changeTimestampToTime(timestamp).substring(0, changeTimestampToTime(timestamp).length - 3),
          showFlag: false
        }
--- a/src/components/common/TimeRange/TimeRefresh.vue
+++ b/src/components/common/TimeRange/TimeRefresh.vue
@@ -11,7 +11,7 @@
    </span>
    <transition name="el-zoom-in-top">
      <div v-if="dropdownShow" class="refresh-list">
-        <div v-for="(item, index) in refreshArr" :key="index" @click="setRefresh(item)" class="refresh-list-item" :class="item.value==interval ? 'active' : ''">
+        <div v-for="item in refreshArr" :key="item.label" @click="setRefresh(item)" class="refresh-list-item" :class="item.value==interval ? 'active' : ''">
          {{ item.label }}
          <i v-if="item.value===interval" class="cn-icon cn-icon-check"></i>
        </div>
--- a/src/components/layout/Header.vue
+++ b/src/components/layout/Header.vue
@@ -138,27 +138,35 @@
        class="cn-menu"
        :with-header="false"
        :show-close="false"
+        @close="closeDrawer"
    >
-      <div class="cn-menu__left" v-if="otherMenu">
-        <div class="left-menu" v-for="menu in otherMenu" :key="menu.id" @click="jumpOther(menu.route,'','',0)">
+      <div class="cn-menu__left" v-if="otherMenu" @mouseleave="mouseleaveLeftMenu">
+        <div
+            class="left-menu"
+            :class="isShowSetting && menu.code==='setting' ? 'left-menu--setting' : ''"
+            v-for="menu in otherMenu"
+            :key="menu.id"
+            @click="jumpOther(menu.route,'','',0)"
+            @mouseenter="mouseleaveItemMenu(menu.code)">
          <i :class="menu.icon"></i>
          <span>{{ $t(menu.i18n || menu.name) }}</span>
-          <i class="cn-icon cn-icon-right"></i>
+          <i class="cn-icon cn-icon-right" v-show="menu.code==='setting'"></i>
        </div>
+        <div class="empty-menu" @mouseleave="mouseleaveItemMenu(null)"></div>
      </div>
-      <div class="cn-menu__middle" >
+      <div class="cn-menu__middle" v-if="!isShowSetting">
        <div class="middle-menus middle-menus--network-analytics">
          <div class="middle-menus__header">{{ $t('overall.networkAnalytics') }}</div>
          <div class="middle-menus__body" v-if="networkAnalyticsMenu && networkAnalyticsMenu.children">
            <div style="width: 260px;">
-              <template v-for="(menu, index) in networkAnalyticsMenu.children" :key="index">
+              <template v-for="(menu, index) in networkAnalyticsMenu.children" :key="menu.name">
                <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">
+              <template v-for="(menu, index) in networkAnalyticsMenu.children" :key="menu.name">
                <div class="middle-menu" v-if="index >= 5 && index < 10" @click="jump(menu.route,'','',2)">
                  {{ $t(menu.i18n || menu.name) }}
                </div>
@@ -170,14 +178,35 @@
          <div class="middle-menus__header">{{ $t('overall.locationIntelligence') }}</div>
          <div class="middle-menus__body" v-if="locationIntelligenceMenu && locationIntelligenceMenu.children">
            <div style="width: 260px;">
-              <template v-for="(menu, index) in locationIntelligenceMenu.children" :key="index">
+              <template v-for="(menu, index) in locationIntelligenceMenu.children" :key="menu.name">
                <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 locationIntelligenceMenu.children" :key="index">
+              <template v-for="(menu, index) in locationIntelligenceMenu.children" :key="menu.name">
+                <div class="middle-menu" v-if="index >= 5 && index < 10" @click="jump(menu.route,'','',2)">
+                  {{ $t(menu.i18n || menu.name) }}
+                </div>
+              </template>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="cn-menu__middle" v-else @mouseenter="mouseleaveItemMenu('setting')">
+        <div class="middle-menus middle-menus--network-analytics">
+          <div class="middle-menus__header">{{ $t('overall.setting') }}</div>
+          <div class="middle-menus__body" v-if="settingMenu && settingMenu.children">
+            <div style="width: 260px;">
+              <template v-for="(menu, index) in settingMenu.children" :key="menu.name">
+                <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 settingMenu.children" :key="menu.name">
                <div class="middle-menu" v-if="index >= 5 && index < 10" @click="jump(menu.route,'','',2)">
                  {{ $t(menu.i18n || menu.name) }}
                </div>
@@ -250,7 +279,7 @@ import {
 import { getNowTime, getSecond } from '@/utils/date-util'
 import _ from 'lodash'
 import { useRoute } from 'vue-router'
-import { useDark, useToggle } from '@vueuse/core'
+import { useToggle } from '@vueuse/core'

 export default {
  name: 'Header',
@@ -337,7 +366,7 @@ export default {
      logo: 'images/logo-header.svg',
      ZH,
      EN,
-      // isDark: useDark()
+      isShowSetting: false
    }
  },
  computed: {
@@ -347,6 +376,9 @@ export default {
    locationIntelligenceMenu () {
      return this.$store.getters.menuList.find(menu => menu.code === 'locationIntelligence')
    },
+    settingMenu () {
+      return this.$store.getters.menuList.find(menu => menu.code === 'setting')
+    },
    otherMenu () {
      return this.$store.getters.menuList.filter(menu => ['locationIntelligence', 'networkAnalytics', 'I18N', 'entityDetail', 'entityGraph', 'detectionPolicy'].indexOf(menu.code) === -1)

@@ -466,6 +498,17 @@ export default {
  },
  setup () {
    const { query } = useRoute()
+    const newQuery = query
+    // 重刷界面后url里参数带空格的部分会被转为+，此处将+再转为空格。后续观察是否存在原本参数带+被误转的
+    Object.keys(newQuery).forEach(item => {
+      if (newQuery[item] && _.isString(newQuery[item])) {
+        if (newQuery[item].indexOf('+') > -1) {
+          newQuery[item] = newQuery[item].replaceAll('+', ' ')
+        }
+      }
+    })
+    const newUrl = urlParamsHandler(window.location.href, query, newQuery)
+    overwriteUrl(newUrl)
    // 获取url携带的range、startTime、endTime
    const rangeParam = query.range
    const startTimeParam = query.startTime
@@ -492,12 +535,15 @@ export default {
    generateBreadcrumb (breadcrumb, menus, tab) {
      const menu = menus.find(m => m.route === this.route)
      if (menu) {
+        if (menu.code !== 'securityEvents') {
          breadcrumb.unshift({
            code: menu.code,
            value: menu.i18n ? this.$t(menu.i18n) : menu.name,
            route: menu.route,
            type: menu.type
          })
+        }
+
        return true
      } else {
        for (let i = 0; i < menus.length; i++) {
@@ -744,6 +790,10 @@ export default {
    },
    // 仅处理除panel外的相关路径的导航
    async jumpOther (route, index) {
+      if (route === '/setting') {
+        this.isShowSetting = true
+        return true
+      }
      route = route.replace('redirect:', '')
      this.showMenu = false
      if (route === this.route && index > 0) { // 当前只有一级菜单时，点击不进行刷新，重新跳转
@@ -882,6 +932,18 @@ export default {
      if (obj.scrollTop + obj.clientHeight === obj.scrollHeight) {
        this.initDropdownList()
      }
+    },
+    closeDrawer () {
+      const timer = setTimeout(() => {
+        this.isShowSetting = false
+        clearTimeout(timer)
+      }, 400)
+    },
+    mouseleaveLeftMenu () {
+      this.isShowSetting = false
+    },
+    mouseleaveItemMenu (code) {
+      this.isShowSetting = code === 'setting'
    }
  }
 }
--- a/src/components/rightBox/location/MyFollowBox.vue
+++ b/src/components/rightBox/location/MyFollowBox.vue
@@ -0,0 +1,149 @@
+<template>
+  <div class="right-box">
+    <div class="right-box__header">
+      <div class="header__title">{{ $t('location.myFollow')}}</div>
+      <div class="header__operation">
+        <span @click="esc"><i class="cn-icon cn-icon-close"></i></span>
+      </div>
+    </div>
+    <cn-data-list
+            ref="dataList"
+            :tableId="tableId"
+            v-model:custom-table-title="tools.customTableTitle"
+            :api="url"
+            style="height: calc(100% - 60px)"
+    >
+      <template #top-tool-left>
+        <button id="cancelFollows" class="business-button business-button--light margin-r-10"
+                :disabled="disableCancel" @click="cancelFollowBatch">
+          <span>{{ $t('location.cancelFollow') }}</span>
+        </button>
+      </template>
+      <template #default>
+        <loading :loading="loading"></loading>
+        <my-follow-table
+                ref="dataTable"
+                :api="url"
+                :isNoData="isNoData"
+                :custom-table-title="tools.customTableTitle"
+                :table-data="tableData"
+                @reload="getTableData"
+                @selectionChange="selectionChange"
+                @handleFollow="handleFollow"
+        />
+      </template>
+      <template #pagination>
+        <pagination ref="pagination" :page-obj="pageObj" :table-id="tableId" @pageNo='pageNo' @pageSize='pageSize'></pagination>
+      </template>
+    </cn-data-list>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+import { api } from '@/utils/api'
+import cnDataList from '@/components/table/CnDataList'
+import myFollowTable from '@/components/table/location/MyFollowTable'
+import dataListMixin from '@/mixins/data-list'
+
+export default {
+  name: 'MyFollowBox',
+  mixins: [dataListMixin],
+  props: {
+    timeFilter: {
+      type: Object
+    },
+    level: {
+      type: Number
+    }
+  },
+  components: {
+    cnDataList,
+    myFollowTable
+  },
+  data () {
+    return {
+      url: api.location.followedSubscriber,
+      tableId: 'myFollowTable',
+      disableCancel: true
+    }
+  },
+  mounted () {
+  },
+  methods: {
+    handleFollow(item) {
+      this.$emit('handleFollow', item)
+    },
+    getTableData () {
+      this.searchLabel = {
+        startTime: this.timeFilter.startTime,
+        endTime: this.timeFilter.endTime,
+        level: this.level,
+        ...this.pageObj
+      }
+      this.isNoData = false
+      this.toggleLoading(true)
+      delete this.searchLabel.total
+
+      axios.get(this.url, { params: this.searchLabel }).then(response => {
+        if (response.status === 200) {
+          for (let i = 0; i < response.data.data.list.length; i++) {
+            response.data.data.list[i].isFollowed = 1
+          }
+          this.tableData = response.data.data.list
+          this.pageObj.total = response.data.data.total
+        } else {
+          console.error(response.data)
+          this.isNoData = true
+          if (response.data.message) {
+            this.$message.error(response.data.message)
+          } else {
+            this.$message.error(this.$t('tip.somethingWentWrong'))
+          }
+        }
+      }).finally(() => {
+        this.toggleLoading(false)
+        this.isNoData = !this.tableData || this.tableData.length === 0
+      })
+    },
+    selectionChange (objs) {
+      this.batchDeleteObjs = []
+      objs.forEach(obj => {
+        const delObj = this.batchDeleteObjs.find(item => item.subscriberId === obj.subscriberId)
+        if (delObj === undefined) {// && obj.isFollowed === 1
+          this.batchDeleteObjs.push(obj)
+        }
+      })
+      this.disableCancel = this.batchDeleteObjs.length < 1
+    },
+    cancelFollowBatch() {
+      const ids = []
+      if (this.batchDeleteObjs && this.batchDeleteObjs.length > 0) {
+        this.batchDeleteObjs.forEach(item => {
+          ids.push(item.subscriberId)
+        })
+      }
+      this.toggleLoading(true)
+      axios.delete(api.location.follow + '?subscriberIds=' + ids.join(',')).then(response => {
+        if (response.status === 200) {
+          this.$message({ duration: 2000, type: 'success', message: this.$t('location.cancelFollow.success') })
+          this.batchDeleteObjs.forEach(item => {
+            item.isFollowed = 0
+          })
+        } else {
+          this.$message.error(response.data.message)
+        }
+      }).catch(e => {
+        this.$message.error(e.response.data.message)
+      }).finally(() => {
+        this.toggleLoading(false)
+        this.$emit('handleCancelFollowBatch', this.batchDeleteObjs)
+      })
+    },
+    /* 关闭弹框 */
+    esc () {
+      this.$emit('close')
+    }
+  }
+}
+</script>
--- a/src/components/rightBox/report/ReportBox.vue
+++ b/src/components/rightBox/report/ReportBox.vue
@@ -110,7 +110,7 @@
                <template #append>{{$t('report.week')}}</template>
              </el-input>-->
              <el-checkbox-group v-model="editObject.config.schedulerConfig.weekDates">
-                <el-checkbox v-for="(item, index) in weekdayList" :key="index" :label="item.value">{{$t(item.name)}}</el-checkbox>
+                <el-checkbox v-for="item in weekdayList" :key="item.value" :label="item.value">{{$t(item.name)}}</el-checkbox>
              </el-checkbox-group>
            </div>
            <!-- 月 -->
@@ -134,7 +134,7 @@
                  <div class="enable-month-all">
                    <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 v-for="item in monthList" :key="item.value" :label="item.value">{{$t(item.name)}}</el-checkbox>
                    </el-checkbox-group>
                  </div>
                </template>
@@ -163,7 +163,7 @@
                  <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"/>
                    <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 v-for="item in weekdayList" :key="item.value" :label="item.value">{{$t(item.name)}}</el-checkbox>
                    </el-checkbox-group>
                  </div>
                </template>
@@ -219,7 +219,7 @@
 <!--            <el-input v-model="param.value" placeholder=" " v-for="(param, index) in editObject.categoryParams" :key="index" size="small" style="vertical-align: unset;" :disabled="!!editObject.id">
              <template #prepend>{{param.key}}</template>
            </el-input-number>-->
-            <template v-for="(param, index) in editObject.categoryParams" :key="index">
+            <template v-for="param in editObject.categoryParams" :key="param.key">
              <el-input-number v-if="param.labelType === 'input'" v-model="param.value" placeholder=" " class="report__params-vertical" :disabled="!!editObject.id">
                <template #prepend>{{param.key}}</template>
              </el-input-number>
--- a/src/components/rightBox/settings/UserBox.vue
+++ b/src/components/rightBox/settings/UserBox.vue
@@ -13,7 +13,7 @@
          <el-form-item :label="$t('config.user.name')" prop="name">
            <el-input id="account-input-name" v-model="editObject.name"
                      :disabled="editObject.username==='admin' && editObject.id === 1"
-                      maxlength="64" placeholder="" show-word-limit type="text"></el-input>
+                      maxlength="32" placeholder="" show-word-limit type="text"></el-input>
          </el-form-item>
          <!--username-->
          <el-form-item :label="$t('config.user.username')" prop="username">
@@ -23,13 +23,21 @@
          </el-form-item>
          <!--password-->
          <el-form-item :label="$t('config.user.pin')" prop="pin">
-            <el-input id="account-input-password" v-model="editObject.pin"  maxlength="64" placeholder=""
-                      show-word-limit type="password" @blur="pinBlur" autocomplete="new-password"></el-input>
+            <el-input id="account-input-password" v-model="editObject.pin"  maxlength="16" placeholder=""
+                      show-word-limit type="password" show-password @blur="pinBlur" @input="pinInput" autocomplete="new-password"></el-input>
          </el-form-item>
+          <!--密码强度-->
+          <el-progress
+              :text-inside="true"
+              class="my-progress"
+              :percentage="percentage"
+              :color="customColors" />
+          <!--密码提示-->
+          <div class="password-hint">{{ handleSpecialCode($t('validate.passwordHint')) }}</div>
          <!--pinChange-->
          <el-form-item :label="$t('config.user.confirmPin')" label-width="200px" prop="pinChange">
-            <el-input id="account-input-pinChange" v-model="editObject.pinChange"  maxlength="64" placeholder=""
-                      show-word-limit type="password"></el-input>
+            <el-input id="account-input-pinChange" v-model="editObject.pinChange"  maxlength="16" placeholder=""
+                      show-word-limit show-password type="password"></el-input>
          </el-form-item>
          <!--email-->
          <el-form-item label="E-mail" prop="email">
@@ -104,38 +112,38 @@ import axios from 'axios'
 import _ from 'lodash'
 import { themeData, langData, storageKey } from '@/utils/constants'
 import { api } from '@/utils/api'
+import { handleSpecialCode } from '@/utils/tools'

 export default {
  name: 'UserBox',
  mixins: [rightBoxMixin],
  data () {
    const validatePin = (rule, value, callback) => { // 确认密码
-      if (value && value.length < 5) {
-        callback(new Error(this.$t('validate.atLeastFive')))
+      if (value) {
+        const reg = /^[-\d\w/~!@#$%^&*_.?]+$/g
+        const isValid = value.match(reg) // 返回匹配到的值
+        if (value && value.length < 8) {
+          callback(new Error(this.$t('validate.atLeastEight')))
+        } else if (!isValid) {
+          callback(new Error(handleSpecialCode(this.$t('validate.passwordError'))))
+        } else if (this.passwordLevel(this.editObject.pin) === 1) {
+          callback(new Error(this.$t('validate.passwordTwoTypes')))
        } else {
          callback()
        }
+      } else if (this.editObject.id) { // 编辑时不输入密码则不做校验
+        callback()
+      }
    }
    const validateConfirmPin = (rule, value, callback) => { // 确认密码的二次校验
-      if (_.isEmpty(value) && !_.isEmpty(this.editObject.pin)) { // 密码有内容，确认密码没内容
-        callback(new Error(this.$t('config.user.confirmPin')))
-      } else if (!_.isEmpty(value) && value !== this.editObject.pin) { // 密码有内容，确认密码也有内容，内容不一致
-        callback(new Error(this.$t('config.user.confirmPinErr')))
-      } else {
+      if (this.editObject.id && _.isEmpty(value) && _.isEmpty(this.editObject.pin)) { // 编辑时，密码和确认密码均没内容则不做校验
        callback()
-      }
-    }
-    const validateName = (rule, value, callback) => {
-      let validate = true
-      // const reg = /^[a-zA-Z0-9\u4e00-\u9fa5\u30a1-\u30f6\u3041-\u3093\uFF00-\uFFFF\u4e00-\u9fa5\u0400-\u04FF\s]{2,64}$/
-      const reg = /^[\u4E00-\u9FA5\a-zA-Z0-9\u3040-\u309F\u0800-\u4e00\u0400-\u04FF\u2000-\u206F\s]{2,64}$/
-      const emptyFlag = value[0] === ' ' || value[value.length - 1] === ' '
-      validate = reg.test(value)
-      if (value.length < 2) {
-        callback(new Error(this.$t('validate.atLeastTwo')))
-      } else if (!validate || value.trim() === '' || emptyFlag) {
-        // 除满足中英日俄、数字空格外，不能全为空格，前后也不可为空格
-        callback(new Error(this.$t('validate.name')))
+      } else if (_.isEmpty(value) && !_.isEmpty(this.editObject.pin)) { // 密码有内容，确认密码没内容
+        callback(new Error(this.$t('config.user.confirmPin')))
+      } else if (!_.isEmpty(value) && !_.isEmpty(this.editObject.pin) && value !== this.editObject.pin) { // 密码有内容，确认密码也有内容，内容不一致
+        callback(new Error(this.$t('config.user.confirmPinErr')))
+      } else if (!_.isEmpty(value) && _.isEmpty(this.editObject.pin)) { // 确认密码有内容，密码没内容
+        callback(new Error(this.$t('config.user.confirmNoPin')))
      } else {
        callback()
      }
@@ -143,13 +151,11 @@ export default {
    const validateUserName = (rule, value, callback) => {
      let validate = true
      // const reg = /^[a-zA-Z0-9_\u4e00-\u9fa5\u30a1-\u30f6\u3041-\u3093\uFF00-\uFFFF\u4e00-\u9fa5\u0400-\u04FF\s]{2,64}$/
-      // 校验，只允许中、英、数字和下划线
-      const reg = /^[\u4e00-\u9fa5_a-zA-Z0-9]{2,64}$/
+      // 校验，只允许英文、数字和标点符号
+      const reg = /^[A-Za-z0-9~!@#$%^&*_.?]+$/
      validate = reg.test(value)
-      if (value.length < 2) {
-        callback(new Error(this.$t('validate.atLeastTwo')))
-      } else if (!validate) {
-        callback(new Error(this.$t('validate.userName')))
+      if (!validate) {
+        callback(new Error(this.$t('validate.userName1')))
      } else {
        callback()
      }
@@ -159,11 +165,10 @@ export default {
      loginName: localStorage.getItem(storageKey.username),
      rules: { // 表单校验规则
        name: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
-          { validator: validateName, trigger: 'blur' }
+          { required: true, message: this.$t('validate.nameLength'), trigger: 'blur' }
        ],
        username: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          { required: true, message: this.$t('validate.userNameLength'), trigger: 'blur' },
          { validator: validateUserName, trigger: 'blur' }
        ],
        pin: [
@@ -172,7 +177,7 @@ export default {
        ],
        pinChange: [
          { required: true, message: this.$t('validate.required') },
-          { validator: validatePin, trigger: 'blur' },
+          // { validator: validatePin, trigger: 'blur' },
          { validator: validateConfirmPin, trigger: 'blur' }
        ],
        roleIds: [
@@ -188,17 +193,19 @@ export default {
      },
      rules2: { // 表单校验规则
        name: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
-          { validator: validateName, trigger: 'blur' }
+          { required: true, message: this.$t('validate.nameLength'), trigger: 'blur' }
        ],
        username: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          { required: true, message: this.$t('validate.userNameLength'), trigger: 'blur' },
          { validator: validateUserName, trigger: 'blur' }
        ],
-        pinChange: [
-          { validator: validateConfirmPin, trigger: 'blur' },
+        pin: [
          { validator: validatePin, trigger: 'blur' }
        ],
+        pinChange: [
+          { validator: validateConfirmPin, trigger: 'blur' }
+          // { validator: validatePin, trigger: 'blur' }
+        ],
        roleIds: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
@@ -212,7 +219,14 @@ export default {
      },
      roleData: [],
      themeData,
-      langData
+      langData,
+      percentage: 0, // 密码强度
+      customColors: [ // 密码强度颜色指标
+        { color: '#d32423', percentage: 26 },
+        { color: '#fdbf12', percentage: 51 },
+        { color: '#99c708', percentage: 76 },
+        { color: '#099407', percentage: 100 }
+      ]
    }
  },
  setup () {
@@ -221,13 +235,14 @@ export default {
    this.getRoleData()
  },
  methods: {
+    handleSpecialCode,
    isCurrentUser (username) {
      return localStorage.getItem(storageKey.username) === username
    },
    /* 密码失去焦点 检验确认密码 */
    pinBlur () {
      if (this.editObject.pin && this.editObject.pinChange) {
-        this.$refs.userForm.validateField('pinChange')
+        this.$refs.userForm.validateField('pinChange', () => null) // 没有null，则会报错
      }
    },
    save () {
@@ -299,6 +314,49 @@ export default {
          this.roleData = _.get(response, 'data.data.list', [])
        }
      })
+    },
+    pinInput () {
+      if (this.editObject?.pin.length < 8 && this.editObject?.pin.length !== 0) {
+        this.percentage = 25
+      } else if (this.editObject?.pin.length === 0) {
+        this.percentage = 0
+      } else if (this.editObject?.pin.length < 10) {
+        this.percentage = this.passwordLevel(this.editObject.pin) > 1 ? 2 * 25 : this.passwordLevel(this.editObject.pin) * 25
+      } else if (this.editObject?.pin.length < 12) {
+        this.percentage = this.passwordLevel(this.editObject.pin) === 4 ? 3 * 25 : this.passwordLevel(this.editObject.pin) * 25
+      } else {
+        this.percentage = this.passwordLevel(this.editObject.pin) * 25
+      }
+    },
+    passwordLevel (I) {
+      let H = 0
+      for (let a = 0; a < I.length; a++) {
+        H |= this.CharMode(I.charCodeAt(a))
+      }
+      return this.bitTotal(H)
+    },
+    CharMode (H) {
+      if (H >= 48 && H <= 57) { // 数字
+        return 1
+      }
+      if (H >= 65 && H <= 90) { // 大写
+        return 2
+      }
+      if (H >= 97 && H <= 122) { // 小写
+        return 4
+      } else {
+        return 8
+      }
+    },
+    bitTotal (H) {
+      let I = 0
+      for (let j = 0; j < 4; j++) {
+        if (H & 1) {
+          I++
+        }
+        H >>>= 1
+      }
+      return I
    }
  },
  watch: {
--- a/src/components/table/CnDataList.vue
+++ b/src/components/table/CnDataList.vue
@@ -5,9 +5,9 @@
      <div class="main-container">
        <!-- 顶部工具栏 -->
        <div class="top-tools">
-          <div class="top-tool-left">
+          <div class="top-tool-left" :style="{width: showInputWidth ? showInputWidth : 'auto'}">
            <slot name="top-tool-left"></slot>
-            <div v-if="showLayout.indexOf('search') > -1" class="top-tool-search margin-r-20">
+            <div v-if="showLayout.indexOf('search') > -1" :class="showInputWidth ? 'top-tool-search1' : 'top-tool-search margin-r-20'">
              <div class="top-tool-search__display">
                <el-input v-model="keyWord" @keyup.enter="onSearch"></el-input>
                <button class="business-button business-button--light top-tool-btn--search" @click="onSearch">
@@ -72,6 +72,10 @@ export default {
    layout: {
      type: Array,
      default () { return [] }
+    },
+    inputWidth: {
+      type: String,
+      default () { return '' }
    }
  },
  data () {
@@ -82,6 +86,7 @@ export default {
        showCustomTableTitle: false // 自定义列弹框是否显示
      },
      showLayout: [],
+      showInputWidth: '',
      loading: true
    }
  },
@@ -103,6 +108,13 @@ export default {
      handler (n) {
        this.showLayout = [...n]
      }
+    },
+    inputWidth: {
+      immediate: true,
+      deep: true,
+      handler (n) {
+        this.showInputWidth = n
+      }
    }
  }
 }
--- a/src/components/table/ColumnCustomize.vue
+++ b/src/components/table/ColumnCustomize.vue
@@ -168,7 +168,7 @@ export default {
        fullVersion = BASE_CONFIG.version + '.1'
      }
 */
-      let curTableConfig = dbTableColumnCustomizeConfig.find(item => item.tableName === tableName)
+      const curTableConfig = dbTableColumnCustomizeConfig.find(item => item.tableName === tableName)
      if (curTableConfig) {
        await indexedDBUtils.selectTable(tableName).put({
          id: userId,
--- a/src/components/table/administration/I18nTable.vue
+++ b/src/components/table/administration/I18nTable.vue
@@ -32,7 +32,8 @@
        <div class="col-resize-area"></div>
      </template>
      <template #default="scope" :column="item">
-        <span>{{scope.row[item.prop] || '-'}}</span>
+        <span v-if="item.prop === 'value'">{{handleSpecialCode(scope.row[item.prop]) || '-'}}</span>
+        <span v-else>{{scope.row[item.prop] || '-'}}</span>
      </template>
    </el-table-column><template v-slot:empty >
    <div class="table-no-data" v-if="isNoData">
@@ -45,6 +46,7 @@
 <script>
 import table from '@/mixins/table'
 import { api } from '@/utils/api'
+import { handleSpecialCode } from '@/utils/tools'

 export default {
  name: 'I18nTable',
@@ -91,6 +93,9 @@ export default {
        }
      ]
    }
+  },
+  methods: {
+    handleSpecialCode
  }
 }
 </script>
--- a/src/components/table/detection/RuleDefinition.vue
+++ b/src/components/table/detection/RuleDefinition.vue
@@ -20,7 +20,7 @@
        <div class="form-setting__block margin-b-20">
          <div class="block-title">{{ $t('detection.create.dimensions') }}</div>
          <div class="block-dimension">
-            <div class="block-dimension-tag" v-for="(ite, ind) in dimensionList" :key="ind">{{ ite.label }}</div>
+            <div class="block-dimension-tag" v-for="ite in dimensionList" :key="ite.label">{{ ite.label }}</div>
          </div>
        </div>

@@ -37,7 +37,7 @@
        <div class="form-setting__block margin-b-20">
          <div class="block-title1">{{ $t('detections.filters') }}</div>
          <div class="definition-filter-block" v-if="showFilter">
-            <div class="definition-filter-item" v-for="(item, index) in thresholdRuleObj.filterList" :key="index">
+            <div class="definition-filter-item" v-for="(item, index) in thresholdRuleObj.filterList" :key="item.filter">
              <el-select class="filter-item__select margin-r-8" v-model="item.filter" placeholder=" ">
                <el-option
                    v-for="item in selectList"
@@ -68,7 +68,7 @@
          <div class="block-title">{{ $t('detection.create.condition') }}</div>

          <el-form ref="form2" :model="thresholdRuleObj" label-position="top">
-          <div class="definition-condition-block" v-for="(item, index) in thresholdRuleObj.conditionData" :key="index">
+          <div class="definition-condition-block" v-for="(item, index) in thresholdRuleObj.conditionData" :key="item.level">
            <el-form-item :label="$t('detection.level')" :prop="`conditionData.${index}.level`" :rules="rules.level">
              <el-select class="condition__select margin-b-20" v-model="item.level" placeholder=" ">
                <template #prefix>
--- a/src/components/table/location/MyFollowTable.vue
+++ b/src/components/table/location/MyFollowTable.vue
@@ -0,0 +1,147 @@
+<template>
+  <el-table
+    id="myFollowTable"
+    ref="dataTable"
+    :data="tableData"
+    tooltip-effect="light"
+    empty-text=" "
+    @selection-change="selectionChange"
+  >
+    <el-table-column
+      :resizable="false"
+      align="center"
+      type="selection"
+      :selectable="(row) => { return row.isFollowed === 1 }"
+      width="55">
+    </el-table-column>
+    <el-table-column
+      v-for="(item, index) in customTableTitles"
+      :key="item.prop+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">
+        <template v-if="item.prop === 'active'">
+          <template v-if="scope.row[item.prop] === 1">
+            {{$t('location.active')}}
+          </template>
+          <template v-else>
+            <span>{{$t('location.inactive')}}</span>
+          </template>
+        </template>
+        <template v-else-if="item.prop === 'ctime'">
+          <template v-if="scope.row[item.prop]">
+            {{dateFormatByAppearance(scope.row[item.prop]) || '-'}}
+          </template>
+          <template v-else>
+            <span>-</span>
+          </template>
+        </template>
+        <template v-else-if="item.prop === 'subscriberDto.phoneNumber'">
+          {{scope.row.subscriberDto ? scope.row.subscriberDto.phoneNumber : '-'}}
+        </template>
+        <template v-else-if="item.prop === 'isFollowed'" >
+          <span class="follow-cursor" v-if="scope.row[item.prop] === 1" @click="cancelFollow(scope.row)"><i class="cn-icon cn-icon-follow-fill"></i></span>
+          <span class="follow-cursor" v-else @click="follow(scope.row)"><i class="cn-icon cn-icon-follow"></i></span>
+        </template>
+        <span v-else>{{scope.row[item.prop] || '-'}}</span>
+      </template>
+    </el-table-column>
+    <template v-slot:empty >
+      <div class="table-no-data" v-if="isNoData">
+        <div class="table-no-data__title">{{ $t('npm.noData') }}</div>
+      </div>
+    </template>
+  </el-table>
+</template>
+
+<script>
+import table from '@/mixins/table'
+import axios from 'axios'
+import { api } from '@/utils/api'
+
+export default {
+  name: 'myFollowTable',
+  props: {
+    isNoData: {
+      type: Boolean,
+      default: false
+    }
+  },
+  mixins: [table],
+  data () {
+    return {
+      tableTitle: [ // 原始table列
+        {
+          label: 'ID',
+          prop: 'subscriberId',
+          show: true,
+          minWidth: 100
+        }, {
+          label: 'MSISDN',
+          prop: 'subscriberDto.phoneNumber',
+          show: true,
+          minWidth: 150
+        }, {
+          label: this.$t('overall.status'),
+          prop: 'active',
+          show: true,
+          minWidth: 80
+        }, {
+          label: this.$t('location.followTime'),
+          prop: 'ctime',
+          show: true,
+          minWidth: 150
+        }, {
+          label: this.$t('overall.option'),
+          prop: 'isFollowed',
+          show: true,
+          minWidth: 100
+        }
+      ]
+    }
+  },
+  methods: {
+    cancelFollow(item) {
+      axios.delete(api.location.follow + '?subscriberIds=' + item.subscriberId).then(res => {
+        if (res.status === 200) {
+          this.$message({ duration: 2000, type: 'success', message: this.$t('location.cancelFollow.success') })
+          /* 刷新列表 */
+          item.isFollowed = 0
+          this.$refs.dataTable.toggleRowSelection(item, false)
+          this.$emit('handleFollow', item)
+        } else {
+          this.$message.error(res.data.message)
+        }
+      }).catch(e => {
+        this.$message.error(this.errorMsgHandler(e))
+      })
+
+    },
+    follow(item) {
+      axios.post(api.location.follow, { subscriberIds: item.subscriberId }).then(async res => {
+        if (res.status === 200) {
+          this.$message({ duration: 2000, type: 'success', message: this.$t('location.follow.success') })
+          /* 刷新列表 */
+          item.isFollowed = 1
+          this.$emit('handleFollow', item)
+        } else {
+          this.$message.error(res.data.message)
+        }
+      }).catch(e => {
+        this.$message.error(this.errorMsgHandler(e))
+      })
+    }
+  }
+}
+</script>
--- a/src/components/table/report/ReportTable.vue
+++ b/src/components/table/report/ReportTable.vue
@@ -33,7 +33,7 @@
            <div class="expand">
              <loading :loading="loadingDown"></loading>
              <chart-no-data v-if="downDataList.length === 0 && !loadingDown"></chart-no-data>
-              <div class="expand-cell" v-for="(item, index) in downDataList" :key="index">
+              <div class="expand-cell" v-for="item in downDataList" :key="item.id">
                <div class="expand-right">
                  <div class="demo-progress">
                    <el-progress :stroke-width="10" type="circle" :percentage="computePercent(item)"
--- a/src/components/table/setting/ProfilesTable.vue
+++ b/src/components/table/setting/ProfilesTable.vue
@@ -0,0 +1,145 @@
+<template>
+  <el-table
+      id="userTable"
+      ref="dataTable"
+      :data="tableData"
+      tooltip-effect="light"
+      empty-text=" "
+      @header-dragend="dragend"
+      @sort-change="tableDataSort"
+      @selection-change="selectionChange"
+      :row-class-name="tableRowClassName"
+  >
+    <el-table-column
+        :resizable="false"
+        align="center"
+        type="selection"
+        width="55">
+    </el-table-column>
+    <el-table-column
+        v-for="(item, index) in customTableTitles"
+        :key="item.prop+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">
+        <template v-if="item.prop === 'ctime' || item.prop === 'utime'">
+          <template v-if="scope.row[item.prop]">
+            {{ dateFormatByAppearance(scope.row[item.prop]) || '-' }}
+          </template>
+          <template v-else><span>-</span></template>
+        </template>
+        <template v-if="item.prop === 'entitySource'">
+          {{ scope.row[item.prop]?.name || '-' }}
+        </template>
+        <template v-if="item.prop === 'entities' || item.prop === 'relations'">
+          {{ handleListTypes(scope.row[item.prop]) }}
+        </template>
+      </template>
+    </el-table-column>
+    <template v-slot:empty>
+      <div class="table-no-data" v-if="isNoData">
+        <div class="table-no-data__title">{{ $t('npm.noData') }}</div>
+      </div>
+    </template>
+  </el-table>
+</template>
+
+<script>
+import table from '@/mixins/table'
+import { dateFormatByAppearance } from '@/utils/date-util'
+
+export default {
+  name: 'SourcesTable',
+  props: {
+    isNoData: {
+      type: Boolean,
+      default: false
+    }
+  },
+  mixins: [table],
+  data () {
+    return {
+      tableTitle: [ // 原始table列
+        {
+          label: 'ID',
+          prop: 'id',
+          show: true,
+          minWidth: 50,
+          sortable: 'custom'
+        },
+        {
+          label: this.$t('setting.source'),
+          prop: 'entitySource',
+          show: true,
+          sortable: 'custom',
+          minWidth: 100
+        },
+        {
+          label: this.$t('setting.entityTypes'),
+          prop: 'entities',
+          show: true,
+          minWidth: 150
+        },
+        {
+          label: this.$t('setting.relationTypes'),
+          prop: 'relations',
+          show: true,
+          minWidth: 200
+        },
+        {
+          label: this.$t('config.user.createTime'),
+          prop: 'ctime',
+          show: true,
+          minWidth: 150
+        },
+        {
+          label: this.$t('overall.updateTime'),
+          prop: 'utime',
+          show: true,
+          minWidth: 150
+        }
+      ]
+    }
+  },
+  methods: {
+    dateFormatByAppearance,
+    // 禁止勾选buildIn为1的项，即禁止修改、删除admin的账号
+    checkSelectable (row) {
+      return row.isBuiltIn !== 1
+    },
+    handleListTypes (data) {
+      let str = ''
+      if (data && typeof data === 'string') {
+        data = JSON.parse(data)
+        data.forEach(item => {
+          if (!str) {
+            str = item.type + ','
+          } else if (str.indexOf(item.type) < 0) {
+            str += item.type + ','
+          }
+        })
+        str = str.slice(0, -1) || '-'
+      } else {
+        str = '-'
+      }
+      return str
+    },
+    tableRowClassName (row) {
+      if (row.row.isBuiltIn === 1) {
+        return 'table-disabled-row'
+      }
+    }
+  }
+}
+</script>
--- a/src/components/table/setting/SourcesTable.vue
+++ b/src/components/table/setting/SourcesTable.vue
@@ -0,0 +1,282 @@
+<template>
+  <el-table
+      id="userTable"
+      ref="dataTable"
+      :data="tableData"
+      tooltip-effect="light"
+      empty-text=" "
+      @header-dragend="dragend"
+      @sort-change="tableDataSort"
+      @selection-change="selectionChange"
+      :row-class-name="tableRowClassName"
+  >
+    <el-table-column
+        :resizable="false"
+        align="center"
+        type="selection"
+        width="55">
+    </el-table-column>
+    <el-table-column
+        v-for="(item, index) in customTableTitles"
+        :key="item.prop+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">
+        <template v-if="item.prop === 'ctime'">
+          <template v-if="scope.row[item.prop]">
+            {{ dateFormatByAppearance(scope.row[item.prop]) || '-' }}
+          </template>
+          <template v-else><span>-</span></template>
+        </template>
+        <template v-else-if="item.prop === 'option'">
+          <i class="cn-icon cn-icon-upload" style="cursor: pointer;" @click="clickOption(scope.row)"></i>
+        </template>
+        <span v-else>{{ scope.row[item.prop] || '-' }}</span>
+      </template>
+    </el-table-column>
+    <template v-slot:empty>
+      <div class="table-no-data" v-if="isNoData">
+        <div class="table-no-data__title">{{ $t('npm.noData') }}</div>
+      </div>
+    </template>
+  </el-table>
+
+  <el-dialog class="sources-dialog" v-model="dialogVisible" width="480">
+    <template #header>
+      <div class="sources-dialog__header">{{ $t('overall.upload') }}</div>
+    </template>
+    <div class="sources-dialog__body">
+      <div class="dialog__body-upload">
+        <loading :loading="uploadLoading"></loading>
+        <el-upload :action="uploadUrl"
+                   :headers="uploadHeaders"
+                   :data="uploadParams"
+                   :multiple="false"
+                   :file-list="fileList"
+                   :on-change="fileChange"
+                   :on-success="uploadSuccess"
+                   :before-upload="beforeUpload"
+                   :on-progress="onUpload"
+                   :on-error="uploadError"
+                   :class="uploadErrorTip ? 'el-upload--error' : ''"
+                   drag
+                   :accept="fileTypeLimit"
+                   ref="upload"
+        >
+          <i class="cn-icon cn-icon-upload2 upload-icon"></i>
+          <div class="el-upload__text">
+            <div ref="uploadButton">{{ $t('sources.dragFile') }}</div>
+          </div>
+        </el-upload>
+      </div>
+      <div class="dialog__body-tip">
+        <div class="tip__text"
+             v-for="(item, index) in tipsInfo[language]"
+             :key="item.value"
+             :style="{color: index===0 || index===3 ? 'var(--el-color-business)' : 'var(--el-text-color-regular)'}">
+          {{ item.label }}
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="sources-dialog__footer">
+        <button class="cancel-btn" @click="dialogVisible=false">{{ $t('overall.cancel') }}</button>
+        <button class="upload-btn">{{ $t('overall.upload') }}</button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import table from '@/mixins/table'
+import { dateFormatByAppearance } from '@/utils/date-util'
+import { storageKey, unitTypes, EN } from '@/utils/constants'
+import _ from 'lodash'
+import unitConvert from '@/utils/unit-convert'
+import { ElMessageBox } from 'element-plus'
+import { ref } from 'vue'
+import { api } from '@/utils/api'
+import Loading from '@/components/common/Loading'
+
+export default {
+  name: 'SourcesTable',
+  props: {
+    isNoData: {
+      type: Boolean,
+      default: false
+    }
+  },
+  mixins: [table],
+  data () {
+    return {
+      sourceId: '',
+      tableTitle: [ // 原始table列
+        {
+          label: 'ID',
+          prop: 'id',
+          show: true,
+          minWidth: 50,
+          sortable: 'custom'
+        },
+        {
+          label: this.$t('config.user.name'),
+          prop: 'name',
+          show: true,
+          sortable: 'custom',
+          minWidth: 150
+        },
+        {
+          label: this.$t('overall.remark'),
+          prop: 'description',
+          show: true,
+          minWidth: 350
+        },
+        {
+          label: this.$t('config.user.createTime'),
+          prop: 'ctime',
+          show: true,
+          minWidth: 150
+        },
+        {
+          label: this.$t('overall.option'),
+          prop: 'option',
+          show: true
+        }
+      ],
+      dialogVisible: false,
+      uploadUrl: BASE_CONFIG.baseUrl + api.setting.source.sourceUpload,
+      uploadHeaders: {
+        'Cn-Authorization': localStorage.getItem(storageKey.token)
+      },
+      fileList: [],
+      fileTypeLimit: '.csv',
+      language: localStorage.getItem(storageKey.language) || EN,
+      uploadLoading: false,
+      tipsInfo: {
+        en: [
+          { value: 0, label: 'You can now integrate data to our platform using two methods:' },
+          { value: 1, label: '1. File Upload: Access the upload feature on our website to submit your files directly.' },
+          { value: 2, label: '2. Kafka Direct Transmission: Send your data to a specific Kafka topic on our servers, ensuring each message includes a header with the source_id.' },
+          { value: 3, label: 'For Kafka server information, please contact your administrator.' }
+        ],
+        zh: [
+          { value: 0, label: '您现在可以使用两种方法将数据集成到我们的平台：' },
+          { value: 1, label: '1. 文件上传：访问我们网站的上传功能直接提交您的文件。' },
+          { value: 2, label: '2. Kafka 直接传输：将您的数据发送到我们服务器上的特定 Kafka 主题，确保每条消息都包含带有 source_id 的标头。' },
+          { value: 3, label: '有关 Kafka 服务器的信息，请联系您的管理员。' }
+        ]
+      },
+      uploadFileSizeLimit: 1024 * 1024 * 1024,
+      isClick: true
+    }
+  },
+  components: {
+    Loading
+  },
+  computed: {
+    uploadParams () {
+      return {
+        sourceId: this.sourceId
+      }
+    }
+  },
+  methods: {
+    dateFormatByAppearance,
+    clickOption (item) {
+      this.sourceId = item.id
+      this.dialogVisible = true
+      this.fileTypeLimit = `.${item.dataFormat}`
+    },
+    // 禁止勾选buildIn为1的项，即禁止修改、删除admin的账号
+    checkSelectable (row) {
+      return row.isBuiltIn !== 1
+    },
+    fileChange (files, fileList) {
+      if (this.fileList.length > 0 && this.fileList[0].status === 'success') {
+        this.fileListBack = this.fileList[0]
+      }
+      this.fileList = fileList.slice(-1)
+    },
+    uploadSuccess () {
+      this.uploaded = false
+      this.dialogVisible = false
+      this.$message.success(this.$t('tip.success'))
+    },
+    beforeUpload (file) {
+      return new Promise((resolve, reject) => {
+        // 判断后缀，仅支持.csv
+        if (!_.endsWith(file.name, this.fileTypeLimit)) {
+          this.$message.error(this.$t('validate.fileTypeLimit', { types: this.fileTypeLimit }))
+          this.fileList = []
+          reject(new Error(this.$t('validate.fileTypeLimit', { types: this.fileTypeLimit })))
+        } else if (file.size > this.uploadFileSizeLimit) { // 判断文件大小
+          this.$message.error(this.$t('validate.fileSizeLimit', { size: unitConvert(this.uploadFileSizeLimit, unitTypes.byte).join('') }))
+          this.fileList = []
+          reject(new Error(this.$t('validate.fileSizeLimit', { size: unitConvert(this.uploadFileSizeLimit, unitTypes.byte).join('') })))
+        } else {
+          if (!this.isClick) {
+            if (this.importedData.length > 0) {
+              ElMessageBox.confirm(this.$t('tip.uploadFile'), {
+                confirmButtonText: this.$t('tip.confirm'),
+                cancelButtonText: this.$t('overall.cancel'),
+                message: this.$t('tip.uploadFileTips'),
+                title: this.$t('tip.uploadFile'),
+                // type: 'warning',
+                iconClass: 'width:0px;height:0px;',
+                customClass: 'del-model'
+              }).then(() => {
+                resolve()
+              }).catch(e => {
+                reject(e)
+              })
+            } else {
+              resolve()
+            }
+          } else {
+            resolve()
+          }
+        }
+      })
+    },
+    onUpload () {
+      this.uploadLoading = true
+      this.typeSelectDisable = true
+      this.isClick = false
+    },
+    uploadError (error) {
+      let errorMsg
+      if (error.message) {
+        errorMsg = JSON.parse(error.message).message
+      } else {
+        errorMsg = 'error'
+      }
+      this.uploadLoading = false
+      this.$message.error(this.$t('tip.uploadFailed', { msg: errorMsg }))
+    },
+    tableRowClassName (row) {
+      if (row.row.isBuiltIn === 1) {
+        return 'table-disabled-row'
+      }
+    }
+  },
+  setup () {
+    // 没上传过文件的提示
+    const uploadErrorTip = ref('')
+
+    return {
+      uploadErrorTip
+    }
+  }
+}
+</script>
--- a/src/components/table/setting/knowledgeBaseTableForCard.vue
+++ b/src/components/table/setting/knowledgeBaseTableForCard.vue
@@ -137,7 +137,7 @@
              <div class="bar-header-left">
                <div class="bar-value-active"></div>
                <div class="bar-value">
-                  <template v-for="(item, index) in tabs" :key="index">
+                  <template v-for="(item, index) in tabs" :key="item.name">
                    <div class="bar-value-tabs"
                         :class=" {'is-active': tabType === item.class, 'mousemove-cursor': mousemoveCursor === item.class}"
                         @mouseenter="mouseenterTab(item)"
@@ -220,7 +220,7 @@
          </el-form>
        </div>
        <div class="dialog-footer">
-          <button @click="cancle" class="business-button business-button--light">{{ $t('overall.cancel') }}</button>
+          <button @click="cancel" class="business-button business-button--light">{{ $t('overall.cancel') }}</button>
          <button @click="submitConfirm" class="business-button">{{ $t('tip.confirm') }}</button>
        </div>
      </template>
@@ -590,7 +590,7 @@ export default {
    submit () {
      this.$refs.knowledgeUpload.submit()
    },
-      cancle () {
+    cancel () {
      this.showAddUpdateDialog = false
    },
    clickCard (data, event) {
--- a/src/components/table/setting/knowledgeBaseTableForCard2.vue
+++ b/src/components/table/setting/knowledgeBaseTableForCard2.vue
@@ -138,7 +138,7 @@
              <div class="bar-header-left">
                <div class="bar-value-active" ></div>
                <div class="bar-value">
-                  <template v-for="(item, index) in tabs" :key="index">
+                  <template v-for="item in tabs" :key="item.name">
                    <div class="bar-value-tabs"
                         :class=" {'is-active': tabType === item.class, 'mousemove-cursor': mousemoveCursor === item.class}"
                         @mouseenter="mouseenterTab(item)"
@@ -221,7 +221,7 @@
          </el-form>
        </div>
        <div class="dialog-footer">
-          <el-button @click="cancle">{{ $t('overall.cancel') }}</el-button>
+          <el-button @click="cancel">{{ $t('overall.cancel') }}</el-button>
          <el-button type="primary" @click="submitConfirm">{{ $t('tip.confirm') }}</el-button>
        </div>
      </template>
@@ -550,7 +550,7 @@ export default {
    submit () {
      this.$refs.knowledgeUpload.submit()
    },
-    cancle () {
+    cancel () {
      this.showAddUpdateDialog = false
    },
    clickCard (data, event) {
@@ -698,7 +698,7 @@ export default {
      this.switchKnowledgeId = id
      return false
    },
-    cancleSwitch () {
+    cancelSwitch () {
      this.showConfirmSwitch = false
    },
    switchLearning () {
--- a/src/components/table/system/PluginTable.vue
+++ b/src/components/table/system/PluginTable.vue
@@ -111,7 +111,7 @@ export default {
  },
  methods: {
    statusChange (plugin) {
-      let triggerStatus = plugin.triggerStatus
+      const triggerStatus = plugin.triggerStatus
      let statusUrl = triggerStatus === '1' ? api.pluginStatusEnable : api.pluginStatusDisable
      statusUrl = statusUrl.replace('{{id}}', plugin.id)
      axios.post(statusUrl).then(response => {
--- a/src/components/table/tag/TagTable.vue
+++ b/src/components/table/tag/TagTable.vue
@@ -135,10 +135,10 @@ import table from '@/mixins/table'
 import Loading from '@/components/common/Loading'
 import axios from 'axios'
 import { api } from '@/utils/api'
-import { storageKey, tagIntent, chartColor3 } from '@/utils/constants'
-import { urlParamsHandler, overwriteUrl, headerCellClass } from '@/utils/tools'
+import { storageKey, tagIntent } from '@/utils/constants'
+import { urlParamsHandler, overwriteUrl, headerCellClass, getYAxisBeginValue } from '@/utils/tools'
 import { ref, shallowRef } from 'vue'
-import { dateFormatToUTC, getNowTime, getSecond } from '@/utils/date-util'
+import { getNowTime, getSecond } from '@/utils/date-util'
 import chartDetectionPagination from '@/views/charts/charts/chartDetectionPagination'
 import ChartNoData from '@/views/charts/charts/ChartNoData'
 import { useRoute } from 'vue-router'
@@ -377,9 +377,15 @@ export default {
    echartsInit (data, item, type) {
      const dom = document.getElementById(`chart${item.id}`)
      if (dom && item) {
-        // if (!this.myChart) {
+        // 判断所有曲线的第一个值和最后一个值，若均为0，则删除该点
+        // 判断total曲线的第一个值和最后一个值，若是0，则删除
+        if (data.length > 1 && data[data.length - 1].ipCount === 0 && data[data.length - 1].domainCount === 0) {
+          data.splice(data.length - 1, 1)
+        }
+        if (data.length > 1 && data[0].ipCount === 0 && data[0].domainCount === 0) {
+          data.splice(0, 1)
+        }
        this.myChart = echarts.init(dom)
-        // }
        this.chartOption = tagLineChartOption
        const series = []
        if (item.indicatorType && item.indicatorType.indexOf('IP') > -1) {
@@ -394,7 +400,6 @@ export default {
              }
            },
            name: 'IP',
-            stack: 'Total',
            lineStyle: {
              color: '#35ADDA',
              width: 1
@@ -421,7 +426,6 @@ export default {
              }
            },
            name: this.$t('overall.domain'),
-            stack: 'Total',
            lineStyle: {
              color: '#E48F3E',
              width: 1
@@ -437,12 +441,25 @@ export default {
          })
        }
        this.chartOption.series = series
-
+        this.chartOption.yAxis[0].startValue = getYAxisBeginValue(series)
        this.chartOption.yAxis[0].axisLabel.formatter = (value) => {
          return unitConvert(value, 'number').join('')
        }
        this.myChartArray.push(this.myChart)
        this.myChart.setOption(this.chartOption)
+        const _this = this
+        this.myChart.on('legendselectchanged', function (params) {
+          const newSeries = []
+          if (params.selected.IP) {
+            newSeries.push(series[0])
+          }
+          if (params.selected.Domain) {
+            newSeries.push(series[1])
+          }
+          const _option = _this.myChart.getOption()
+          _option.yAxis[0].startValue = getYAxisBeginValue(newSeries)
+          _this.myChart.setOption(_option)
+        })
        this.$nextTick(() => {
          this.myChart.resize()
        })
--- a/src/mixins/data-list.js
+++ b/src/mixins/data-list.js
@@ -1,4 +1,4 @@
-import { tableSort } from '@/utils/tools'
+import { handleSpecialCode, tableSort } from '@/utils/tools'
 import { defaultPageSize, fromRoute, position, storageKey, dbTableColumnCustomizeConfigPre, dbTableColumnCustomizeConfig } from '@/utils/constants'
 import _ from 'lodash'
 import { ref } from 'vue'
@@ -42,6 +42,7 @@ export default {
      delFlag: false,
      disableEdit: true, // 编辑按钮是否不可用，当选择多条记录的时候，编辑按钮不可用
      disableDelete: true,
+      disableView: true,
      operationWidth: '165', // 操作列宽
      loading: true,
      isNoData: false
@@ -91,7 +92,18 @@ export default {
        }
      })
      this.disableEdit = this.batchDeleteObjs.length !== 1
+      this.disableView = this.batchDeleteObjs.length !== 1
      this.disableDelete = this.batchDeleteObjs.length < 1
+      const obj = objs.find(d => d.usage > 0)
+      if (obj) {
+        this.disableDelete = true
+        this.disableEdit = true
+      }
+      const obj1 = objs.find(d => d.isBuiltIn > 0)
+      if (obj1) {
+        this.disableDelete = true
+        this.disableEdit = true
+      }
    },
    getTableData (params, isAll, isClearType) {
      if (isAll) {
@@ -242,6 +254,9 @@ export default {
        axios.get(`${this.url}/${this.batchDeleteObjs[0].id}`).then(response => {
          if (response.status === 200) {
            this.object = response.data.data
+            if (this.url === '/sys/i18n') {
+              this.object.value = handleSpecialCode(this.object.value)
+            }
            this.rightBox.show = true
          }
        })
@@ -428,8 +443,8 @@ export default {
      localStorageTableTitle = await indexedDBUtils.selectTable(tableName).get({ id: userId })
    }

-    let curTableTitles = this.$refs.dataTable && this.$refs.dataTable.tableTitle ? this.$refs.dataTable.tableTitle : []
-    let curTableConfig = dbTableColumnCustomizeConfig.find(item => item.tableName === tableName)
+    const curTableTitles = this.$refs.dataTable && this.$refs.dataTable.tableTitle ? this.$refs.dataTable.tableTitle : []
+    const curTableConfig = dbTableColumnCustomizeConfig.find(item => item.tableName === tableName)
    if (localStorageTableTitle && curTableConfig &&
          localStorageTableTitle.version !== curTableConfig.version && curTableTitles) {
      if (this.$refs.dataList) {
--- a/src/mock/detection.js
+++ b/src/mock/detection.js
@@ -141,6 +141,272 @@ if (openMock) {
      data.status = 1
    }

+    return {
+      msg: 'success',
+      code: 200,
+      data: data
+    }
+  })
+  Mock.mock(new RegExp(urlAndVersion + '/detection/event/keyFields/statistics.*'), 'get', function (requestObj) {
+    const data = {
+      resultType: 'table',
+      result: [
+        { key: '192.168.1.1, test.com', count: 25 },
+        { key: 'baidu.com,app', count: 23 },
+        { key: '192.168.2.33, app', count: 15 },
+        { key: '192.168.8.8, test.com', count: 12 },
+        { key: 'baidu.com, test.com', count: 8 },
+        { key: '192.168.1.101, test.cn', count: 5 },
+        { key: 'jd.com, app', count: 25 }
+      ]
+    }
+
+    return {
+      msg: 'success',
+      code: 200,
+      data: data
+    }
+  })
+  Mock.mock(new RegExp(urlAndVersion + '/detection/event/list.*'), 'get', function (requestObj) {
+    const data = {
+      resultType: 'table',
+      result: [
+        {
+          eventId: 1212,
+          eventType: 'Anonymity',
+          eventName: 'Tor',
+          matchIds: '1, 2',
+          keyFields: 'ip, domain',
+          keyValues: '192.168.1.1, test.com',
+          ruleId: 2,
+          ruleVersion: '1',
+          ruleType: 'indicator_match',
+          isBuiltin: 1,
+          status: 1,
+          startTime: 1697092617,
+          endTime: 1697092777,
+          durationS: 30
+        },
+        {
+          eventId: 1213,
+          eventType: 'Anonymity',
+          eventName: 'Tor',
+          matchIds: '3, 4',
+          keyFields: 'ip, domain',
+          keyValues: '192.168.1.1, test.com',
+          ruleId: 3,
+          ruleVersion: '1',
+          ruleType: 'threshold',
+          isBuiltin: 1,
+          status: 1,
+          startTime: 1697092617,
+          endTime: 1697092777,
+          durationS: 30
+        },
+        {
+          eventId: 1214,
+          eventType: 'Anonymity',
+          eventName: 'Tor',
+          matchIds: '5, 6',
+          keyFields: 'ip, domain',
+          keyValues: '192.168.1.1, test.com',
+          ruleId: 3,
+          ruleVersion: '1',
+          ruleType: 'sequence/unordered_sequence',
+          isBuiltin: 1,
+          status: 0,
+          startTime: 1697092617,
+          endTime: 1697092777,
+          durationS: 30
+        }
+      ]
+    }
+
+    return {
+      msg: 'success',
+      code: 200,
+      data: data
+    }
+  })
+  Mock.mock(new RegExp(urlAndVersion + '/detection/event/name/statistics.*'), 'get', function (requestObj) {
+    const data = {
+      resultType: 'table',
+      result: [
+        {
+          eventName: 'event1',
+          count: 25
+        },
+        {
+          eventName: 'event2',
+          count: 23
+        },
+        {
+          eventName: 'event3',
+          count: 15
+        },
+        {
+          eventName: 'event4',
+          count: 12
+        }
+      ]
+    }
+
+    return {
+      msg: 'success',
+      code: 200,
+      data: data
+    }
+  })
+  Mock.mock(new RegExp(urlAndVersion + '/detection/event/count.*'), 'get', function (requestObj) {
+    const data = {
+      resultType: 'single',
+      result: 3
+    }
+
+    return {
+      msg: 'success',
+      code: 200,
+      data: data
+    }
+  })
+  Mock.mock(new RegExp(urlAndVersion + '/detection/security/event/timedistribution.*'), 'get', function (requestObj) {
+    const data = {
+      resultType: 'table',
+      result: [
+        {
+          statTime: 1722565322,
+          severity: 'critical',
+          count: 25
+        },
+        {
+          statTime: 1722565502,
+          severity: 'info',
+          count: 25
+        },
+        {
+          statTime: 1722566702,
+          severity: 'critical',
+          count: 25
+        },
+        {
+          statTime: 1722568322,
+          severity: 'critical',
+          count: 25
+        }
+      ]
+    }
+
+    return {
+      msg: 'success',
+      code: 200,
+      data: data
+    }
+  })
+  Mock.mock(new RegExp(urlAndVersion + '/detection/security/event/detail.*'), 'get', function (requestObj) {
+    const data = {
+      eventIds: [1, 2, 3, 4, 5],
+      indicatorMatchs: [],
+      thresholdMatchs: [
+        {
+          matchId: 2,
+          ruleId: 2,
+          ruleType: 'threshold',
+          eventType: 'Command and Control',
+          eventName: 'event2',
+          severity: 'high',
+          keyFields: 'domain',
+          keyValues: 'test.com',
+          thresholdValue: 3,
+          metricValue: 5,
+          reset: 60,
+          startTime: 169780543432,
+          endTime: 169790486213
+        }
+      ],
+      sequenceMatchs: [
+        {
+          matchId: 3,
+          ruleId: 3,
+          ruleType: 'sequence/unordered_sequence',
+          eventType: 'Command and Control',
+          eventName: 'event3',
+          severity: 'low',
+          eventInfo: '[{"stage_id":"A","recv_time":10000000,"client_ip":"192.168.1.1"},{"stage_id":"B","recv_time":10000001,"client_ip":"192.168.1.2",...}]'
+        }
+      ]
+    }
+    const indicatorMatchObj = {
+      matchId: 1,
+      ruleId: 1,
+      ruleType: 'indicator_match',
+      eventType: 'Anonymity',
+      eventName: 'event1',
+      severity: 'critical',
+      matchNum: 20,
+      indicatorFields: 'ip,domain',
+      indicatorValues: '192.168.1.1,test.com',
+      reset: 60,
+      clientIp: '192.168.1.1',
+      client_country_region: 'china',
+      client_super_admin_area: 'beijing',
+      client_admin_area: 'beijing',
+      client_longitude: '116.30',
+      client_latitude: '40.50',
+      serverIp: '192.168.1.2',
+      server_country_region: 'china',
+      server_super_admin_area: 'beijing',
+      server_admin_area: 'beijing',
+      server_longitude: '116.30',
+      server_latitude: '40.50',
+      domain: 'test.com',
+      app: 'test',
+      matchTime: 1722503700000
+    }
+
+    for (let i = 0; i < 10; i++) {
+      data.indicatorMatchs.push(JSON.parse(JSON.stringify(indicatorMatchObj)))
+      indicatorMatchObj.matchId += 1
+      indicatorMatchObj.ruleId += 2
+      indicatorMatchObj.matchTime += 900000
+      indicatorMatchObj.matchNum = Math.floor((Math.random() * 100) + 1)
+    }
+
+    return {
+      msg: 'success',
+      code: 200,
+      data: data
+    }
+  })
+  Mock.mock(new RegExp(urlAndVersion + '/detection/event/status/statistics.*'), 'get', function (requestObj) {
+    const data = {
+      resultType: 'table',
+      result: [
+        {
+          status: 1,
+          count: 25
+        },
+        {
+          status: 0,
+          count: 23
+        }
+      ]
+    }
+
+    return {
+      msg: 'success',
+      code: 200,
+      data: data
+    }
+  })
+  Mock.mock(new RegExp(urlAndVersion + '/detection/event/type/statistics.*'), 'get', function (requestObj) {
+    const data = {
+      resultType: 'table',
+      result: [
+        { eventType: 'Anonymity', count: 25 },
+        { eventType: 'Command and Control', count: 13 }
+      ]
+    }
+
    return {
      msg: 'success',
      code: 200,
--- a/src/mock/entity.js
+++ b/src/mock/entity.js
@@ -472,7 +472,7 @@ if (openMock) {
      pageSize: 10,
      total: 4,
      list: [
-        { entityValue: 'test123987', entityType: 'subscriber_id' },
+        { entityValue: 'test123987', entityType: 'subscriber' },
        { entityValue: '172.217.24.66', entityType: 'ip' },
        { entityValue: 'gdbzkz.com', entityType: 'domain' },
        { entityValue: 'qqvideo', entityType: 'app' }
@@ -544,7 +544,7 @@ if (openMock) {
        }
        break
      }
-      case ('subscriber_id'): {
+      case ('subscriber'): {
        result = {
          phone_number: '1568912455',
          imei: 'r45ty5454fh',
@@ -850,7 +850,7 @@ const getEntityType = (url) => {
    entityType = 'app'
  }
  if (url.indexOf('/subscriber?') > -1) {
-    entityType = 'subscriber_id'
+    entityType = 'subscriber'
  }
  return entityType
 }
@@ -866,8 +866,8 @@ const getRelateType = (url) => {
  if (url.indexOf('/apps?') > -1) {
    entityType = 'app'
  }
-  if (url.indexOf('/subscriber_id?') > -1) {
-    entityType = 'subscriber_id'
+  if (url.indexOf('/subscriber?') > -1) {
+    entityType = 'subscriber'
  }
  return entityType
 }
--- a/src/mock/location.js
+++ b/src/mock/location.js
@@ -337,43 +337,43 @@ if (openMock) {
      data: {
        list: [
          {
-            "subscriberId":111,
-            "group": "terrorist",
-            "info": "terrorist leader",
-            "location": "china",
-            "active": 1
+            subscriberId: 111,
+            group: 'terrorist',
+            info: 'terrorist leader',
+            location: 'china',
+            active: 1
          },
          {
-            "subscriberId":444,
-            "group": "terrorist",
-            "info": "terrorist leader",
-            "location": "china",
-            "active": 1
+            subscriberId: 444,
+            group: 'terrorist',
+            info: 'terrorist leader',
+            location: 'china',
+            active: 1
          },
          {
-            "subscriberId":555,
-            "group": "terrorist",
-            "info": "terrorist leader",
-            "location": "china",
-            "active": 0
+            subscriberId: 555,
+            group: 'terrorist',
+            info: 'terrorist leader',
+            location: 'china',
+            active: 0
          }, {
-            "subscriberId":666,
-            "group": "terrorist",
-            "info": "terrorist leader",
-            "location": "china",
-            "active": 1
+            subscriberId: 666,
+            group: 'terrorist',
+            info: 'terrorist leader',
+            location: 'china',
+            active: 1
          }, {
-            "subscriberId":777,
-            "group": "terrorist",
-            "info": "terrorist leader",
-            "location": "china",
-            "active": 0
+            subscriberId: 777,
+            group: 'terrorist',
+            info: 'terrorist leader',
+            location: 'china',
+            active: 0
          }, {
-            "subscriberId":888,
-            "group": "terrorist",
-            "info": "terrorist leader",
-            "location": "china",
-            "active": 1
+            subscriberId: 888,
+            group: 'terrorist',
+            info: 'terrorist leader',
+            location: 'china',
+            active: 1
          }
        ]
      }
@@ -390,47 +390,47 @@ if (openMock) {
        pages: 1,
        list: [
          {
-            "subscriberId":111,
-            "active": 1,
-            "phone_number": 18601680302,
-            "follow": 1
+            subscriberId: 111,
+            active: 1,
+            phone_number: 18601680302,
+            follow: 1
          },
          {
-            "subscriberId":222,
-            "active": 1,
-            "phone_number": 18601680303,
-            "follow": 0
+            subscriberId: 222,
+            active: 1,
+            phone_number: 18601680303,
+            follow: 0
          },
          {
-            "subscriberId":333,
-            "active": 0,
-            "phone_number": 18601680304,
-            "follow": 0
+            subscriberId: 333,
+            active: 0,
+            phone_number: 18601680304,
+            follow: 0
          }, {
-            "subscriberId":444,
-            "active": 1,
-            "phone_number": 18601680305,
-            "follow": 1
+            subscriberId: 444,
+            active: 1,
+            phone_number: 18601680305,
+            follow: 1
          }, {
-            "subscriberId":555,
-            "active": 0,
-            "phone_number": 18601680306,
-            "follow": 1
+            subscriberId: 555,
+            active: 0,
+            phone_number: 18601680306,
+            follow: 1
          }, {
-            "subscriberId":666,
-            "active": 1,
-            "phone_number": 18601680307,
-            "follow": 1
+            subscriberId: 666,
+            active: 1,
+            phone_number: 18601680307,
+            follow: 1
          }, {
-            "subscriberId":777,
-            "active": 1,
-            "phone_number": 18601680308,
-            "follow": 1
+            subscriberId: 777,
+            active: 1,
+            phone_number: 18601680308,
+            follow: 1
          }, {
-            "subscriberId":888,
-            "active": 1,
-            "phone_number": 18601680300,
-            "follow": 1
+            subscriberId: 888,
+            active: 1,
+            phone_number: 18601680300,
+            follow: 1
          }
        ]
      }
--- a/src/permission.js
+++ b/src/permission.js
@@ -197,6 +197,18 @@ export function handleComponent (code) {
    case 'locationMap':
    case 'traceTracking':
      return () => import('@/views/location/Index')
+    case 'dataSource':
+      return () => import('@/views/setting/sources/Sources')
+    case 'createDataSource':
+    case 'editDataSource':
+    case 'viewDataSource':
+      return () => import('@/views/setting/sources/SourcesForm')
+    case 'entityIntegration':
+      return () => import('@/views/setting/entitySetting/EntitySetting')
+    case 'createEntityIntegration':
+    case 'editEntityIntegration':
+    case 'viewEntityIntegration':
+      return () => import('@/views/setting/entitySetting/EntitySettingForm')
    default:
      return null
  }
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -176,6 +176,17 @@ export const api = {
    create: {
      topKeys: apiVersion + '/detection/topKeys', // topKeys列表
      create: apiVersion + '/rule/detection'
+    },
+    event: {
+      keyStatistics: apiVersion + '/detection/event/keyFields/statistics', // 事件key统计
+      nameStatistics: apiVersion + '/detection/event/name/statistics', // 事件名称统计
+      statusStatistics: apiVersion + '/detection/event/status/statistics', // 状态统计
+      typeStatistics: apiVersion + '/detection/event/type/statistics', // 事件类型统计
+      list: apiVersion + '/detection/event/list', // 事件列表
+      count: apiVersion + '/detection/event/count', // 事件总数
+      timeDistribution: apiVersion + '/detection/event/timedistribution', // 事件等级分布
+      detail: apiVersion + '/detection/event/detail', // 事件详情
+      detailTimeDistribution: apiVersion + '/detection/event/detail/timedistribution' // 事件详情分布统计
    }
  },
  // Dashboard
@@ -323,6 +334,7 @@ export const api = {
      subscriberBasicInfo: apiVersion + '/entity/explorer/detail/basic/subscriber', // subscriber实体响应
      domainTags: apiVersion + '/entity/explorer/detail/kb/intelligence/tag/domain', // Domain实体标签响应结果
      ipTags: apiVersion + '/entity/explorer/detail/kb/intelligence/tag/ip', // ip实体标签响应结果
+      subscriberTags: apiVersion + '/entity/explorer/detail/kb/intelligence/tag/subscriber', // ip实体标签响应结果
      domainThroughput: apiVersion + '/entity/explorer/detail/traffic/throughput/domain', // 实体流量信息
      ipThroughput: apiVersion + '/entity/explorer/detail/traffic/throughput/ip', // 实体流量信息
      appThroughput: apiVersion + '/entity/explorer/detail/traffic/throughput/app', // 实体流量信息
@@ -367,12 +379,22 @@ export const api = {
    density: apiVersion + '/locationIntelligence/population/density',
    trend: apiVersion + '/locationIntelligence/active/trend',
    count: apiVersion + '/locationIntelligence/active/count',
-    baseStation: apiVersion + '/locationIntelligence/baseStation',
+    baseStation: apiVersion + '/cell/list',
    list: apiVersion + '/locationIntelligence/list',
+    totalCount: apiVersion + '/locationIntelligence/list/count',
    followedSubscriber: apiVersion + '/locationIntelligence/followed/subscribers',
    tracking: apiVersion + '/locationIntelligence/trace/tracking',
    follow: apiVersion + '/locationIntelligence/follow',
    geoLocation: apiVersion + 'locationIntelligence/geolocation'
+  },
+  setting: {
+    source: {
+      source: apiVersion + '/entity/sources', // get列表查询，delete删除，post新增，put修改
+      sourceUpload: apiVersion + '/entity/sources/upload' // 文件上传，post
+    },
+    profiles: {
+      profiles: apiVersion + '/entity/integrations' // get列表查询，delete删除，post新增，put修改
+    }
  }
 }

--- a/src/utils/constants.js
+++ b/src/utils/constants.js
--- a/src/utils/date-util.js
+++ b/src/utils/date-util.js
@@ -106,7 +106,9 @@ export function timestampToList (time) {
 * @returns {number}
 */
 export function millTimestampDiffFromTz () {
-  return parseInt(localStorage.getItem(storageKey.timezoneLocalOffset)) * 3600 * 1000 - window.$dayJs.tz().utcOffset() * 60 * 1000
+  const localOffset = Number(localStorage.getItem(storageKey.timezoneLocalOffset)) * 3600 * 1000
+  const serverOffset = window.$dayJs.tz().utcOffset() * 60 * 1000
+  return localOffset - serverOffset
 }
 /**
 * echarts时间类型横坐标formatter
@@ -209,3 +211,15 @@ export function getDurationsTimeByType (number, type) {
  }
  return `P${T}${number}${switchValueByDateType(type)}`
 }
+
+export function getNowDate (timeFilter) {
+  if (timeFilter?.dateRangeValue > -1) {
+    return {
+      startTime: (new Date()).getTime() - (timeFilter.dateRangeValue * 60 * 1000),
+      endTime: (new Date()).getTime(),
+      dateRangeValue: { value: timeFilter.dateRangeValue }
+    }
+  } else {
+    return { ...timeFilter, dateRangeValue: { value: timeFilter.dateRangeValue } }
+  }
+}
--- a/src/utils/geo-utils.js
+++ b/src/utils/geo-utils.js
@@ -0,0 +1,13 @@
+import * as turf from '@turf/turf'
+
+export function generateRectanglePolygon (minLongitude, minLatitude, maxLongitude, maxLatitude) {
+  return turf.polygon([
+    [
+      [minLongitude, minLatitude],
+      [minLongitude, maxLatitude],
+      [maxLongitude, maxLatitude],
+      [maxLongitude, minLatitude],
+      [minLongitude, minLatitude]
+    ]
+  ])
+}
--- a/src/utils/static-data.js
+++ b/src/utils/static-data.js
@@ -452,6 +452,15 @@ export const enumerateData = [
      { code: _this.$t('overall.low'), code1: 'overall.low', value: 'low' },
      { code: _this.$t('overall.info'), code1: 'overall.info', value: 'info' }
    ]
+  },
+  {
+    name: 'ruleType',
+    data: [
+      { code: 'indicator_match', value: 1 },
+      { code: 'threshold', value: 2 },
+      { code: 'sequence', value: 3 },
+      { code: 'unordered_sequence', value: 4 }
+    ]
  }
 ]

--- a/src/utils/timeQueryApi.js
+++ b/src/utils/timeQueryApi.js
@@ -4,15 +4,15 @@ import vue from '@/main.js'

 // 默认Schema 延时15s ,时间粒度 1s
 const defaultSchema = {
-  "doc": {
-    "measurements": {
-      "granularity": 1,
-      "ingestion_delay": 15
+  doc: {
+    measurements: {
+      granularity: 1,
+      ingestion_delay: 15
    }
  }
 }

-let schemaDict=null;
+let schemaDict = null
 function getSchemaFromLocal (schemaType) {
  let schemaData = null
  // if(schemaDict?.[schemaType]){
@@ -21,15 +21,15 @@ function getSchemaFromLocal(schemaType) {
  schemaData = localStorage.getItem('TSGSchema')
  // }
  if (!schemaData) {
-    return null;
+    return null
  }
-  const storeData = JSON.parse(schemaData)[schemaType];
+  const storeData = JSON.parse(schemaData)[schemaType]
  // 如果根据key没有找到数据，直接返回空
  if (!storeData) {
-    return null;
+    return null
  }
-  const parsedData = storeData;
-  const currentTimestamp = new Date().getTime();
+  const parsedData = storeData
+  const currentTimestamp = new Date().getTime()

  // 将当前的时间戳和保存在storage中的timestamp进行比较
  // 如果时间差小于等于过期时间说明没有过期，直接返回数据
@@ -39,7 +39,7 @@ function getSchemaFromLocal(schemaType) {
  } else {
    setDashboardSchema(schemaType, '')
  }
-  return null;
+  return null
 }

 /**
@@ -49,36 +49,35 @@ function getSchemaFromLocal(schemaType) {
 * @param {*} expire 过期时间，默认为1分钟
 */
 function setDashboardSchema (schemaType, value, expire = 60000) {
-  let schemaData = localStorage.getItem('TSGSchema');
+  const schemaData = localStorage.getItem('TSGSchema')
  if (!schemaData) {
    localStorage.setItem('TSGSchema', '{}')
  }
-  let TSGSchema = JSON.parse(localStorage.getItem('TSGSchema'))
+  const TSGSchema = JSON.parse(localStorage.getItem('TSGSchema'))
  TSGSchema[schemaType] = {
    value: value,
    expire: expire,
    timestamp: new Date().getTime()
  }
-  const stringfiedData = JSON.stringify(TSGSchema);
-  localStorage.setItem('TSGSchema', stringfiedData);
-  schemaDict=TSGSchema;
+  const stringfiedData = JSON.stringify(TSGSchema)
+  localStorage.setItem('TSGSchema', stringfiedData)
+  schemaDict = TSGSchema
 }

 // 获取过期时间毫秒数
 function getExpireTime (data) {
-  let expireDate=data.expireDate
+  const expireDate = data.expireDate
  if (!expireDate) {
    return 24 * 60 * 60 * 1000
  }
-  let expireTime=new Date().getTime()-expireDate
+  const expireTime = new Date().getTime() - expireDate
  return expireTime
 }

-
 function getSchemaFromRemote (schemaType) {
  return vue.$get(`/interface/gateway/api/galaxy/v1/metadata/schema/${schemaType}`).then(res => {
    if (res.status === 200) {
-      let expireTime=getExpireTime(res.data)
+      const expireTime = getExpireTime(res.data)
      setDashboardSchema(schemaType, JSON.stringify(res.data), expireTime)
      return res.data
    }
@@ -89,14 +88,13 @@ function getSchemaFromRemote(schemaType) {
  })
 }

-
 // async  延时时间
 // 转换时间  start  end   schmaType 相对时间  绝对时间
 // 时间粒度

 // 获取Schema数据,存在于local 直接取,不存在 直接请求,存本地
 async function getSchemaInfo (schemaType = '') {
-  var schemaInfo = getSchemaFromLocal(schemaType)
+  let schemaInfo = getSchemaFromLocal(schemaType)
  if (!schemaInfo) {
    schemaInfo = await getSchemaFromRemote(schemaType)
  }
@@ -111,23 +109,23 @@ async function getSchemaInfo(schemaType = '') {
 * granularity 单位必须是S 秒
 * */
 async function getTimeQueryParams ({ start, end, schemaType = '', granularity = 1, toUtc = false, delay = false }) {
-  let schemaData = await getSchemaInfo(schemaType);
+  const schemaData = await getSchemaInfo(schemaType)

-  const schema_ingestion_delay = schemaData?.doc?.measurements?.ingestion_delay || 0;
-  const schema_granularity = schemaData?.doc?.measurements?.granularity || 1;
+  const schema_ingestion_delay = schemaData?.doc?.measurements?.ingestion_delay || 0
+  const schema_granularity = schemaData?.doc?.measurements?.granularity || 1

  // 这里需要考虑  传入的是UTC 时间,Moment 可以正常处理吗
-  var delayTime = delay ? schema_ingestion_delay : 0;
+  const delayTime = delay ? schema_ingestion_delay : 0
  // let startDate = Moment(start).subtract(delayTime, 'seconds')
  // let endDate = Moment(end).subtract(delayTime, 'seconds')
-  let startDate = '1'
-  let endDate = '2'
+  const startDate = '1'
+  const endDate = '2'

-  var startStr = startDate.format('YYYY-MM-DD HH:mm:ss')
-  var endStr = endDate.format('YYYY-MM-DD HH:mm:ss')
+  let startStr = startDate.format('YYYY-MM-DD HH:mm:ss')
+  let endStr = endDate.format('YYYY-MM-DD HH:mm:ss')

  // 前端计算时间粒度,不能比Schema 支持的最小时间粒度 小
-  var alignmentPeriod = schema_granularity > granularity ? schema_granularity : granularity
+  const alignmentPeriod = schema_granularity > granularity ? schema_granularity : granularity

  // UTC 转换
  if (toUtc) {
@@ -140,7 +138,7 @@ async function getTimeQueryParams({start, end, schemaType = '', granularity = 1,
    start: startStr,
    end: endStr,
    granularity: 'PT' + schema_granularity + 'S',
-    alignmentPeriod: 'PT'+alignmentPeriod+'S',
+    alignmentPeriod: 'PT' + alignmentPeriod + 'S'
  }
 }

@@ -148,4 +146,4 @@ export default {
  getTimeQueryParams,
  getSchemaInfo
 }
-export {getSchemaFromLocal, getSchemaInfo, setDashboardSchema, getSchemaFromRemote, getTimeQueryParams};
+export { getSchemaFromLocal, getSchemaInfo, setDashboardSchema, getSchemaFromRemote, getTimeQueryParams }
--- a/src/utils/tools.js
+++ b/src/utils/tools.js
@@ -1268,24 +1268,6 @@ export function getIndexByEventSeverity (type) {
  }
 }

-export function getQueryByFlag2 (type, condition) {
-  switch (type) {
-    case 'country':
-    case 'asn':
-    case 'province':
-    case 'city':
-    case 'isp': {
-      return `${type}='${condition[1]}'`
-    }
-    case 'idcRenter': {
-      return `idc_renter='${condition[1]}'`
-    }
-    default: {
-      return `${condition[0]}'${condition[1]}'`
-    }
-  }
-}
-
 /**
 根据语言环境获取字符所占像素px
 */
@@ -1581,6 +1563,64 @@ const tagValueHandler = (value) => {
  return find ? find.name : value
 }

-export const headerCellClass = (row) => {
-  return 'my-header-cell-class'
+export const headerCellClass = 'my-header-cell-class'
+
+/**
+ * & 被转译为&amp; 将转义后的值转为 &
+ */
+export const handleSpecialCode = (str) => {
+  return str.indexOf('&amp;') > -1 ? str.replaceAll('&amp;', '&') : str
+}
+
+/**
+ * 严重程度code和字符转换
+ * @param code
+ * @returns {string}
+ */
+export const getSeverityByCode = (code) => {
+  switch (code) {
+    case 5:
+    case '5': {
+      return 'Critical'
+    }
+    case 4:
+    case '4': {
+      return 'High'
+    }
+    case 3:
+    case '3': {
+      return 'Medium'
+    }
+    case 2:
+    case '2': {
+      return 'Low'
+    }
+    case 1:
+    case '1': {
+      return 'Info'
+    }
+  }
+}
+
+export function getYAxisBeginValue (data) {
+  let max
+  let min
+  data.forEach(line => {
+    line.data && line.data.forEach(value => {
+      if (max === undefined || max < value[1]) {
+        max = value[1]
+      }
+      if (min === undefined || min > value[1]) {
+        min = value[1]
+      }
+    })
+  })
+  if (_.isNumber(min) && min >= 100) {
+    const diff = max - min
+    if (diff / min < 0.5) {
+      const minMDiff = min - diff > 0.8 * min ? min - diff : 0.8 * min
+      return Math.floor(minMDiff / Math.pow(10, `${Math.floor(minMDiff)}`.length - 2)) * Math.pow(10, `${Math.floor(minMDiff)}`.length - 2)
+    }
+  }
+  return 0
 }
--- a/src/views/charts/charts/ChartMap.vue
+++ b/src/views/charts/charts/ChartMap.vue
@@ -7,7 +7,7 @@
          class="map-chart__legend"
          :class="`${currentLegendIndex === index ? 'map-chart__legend--active' : ''}`"
          v-for="(legend, index) in legends"
-          :key="index"
+          :key="item.name"
          @click="changeLegend(index)"
      >
        <div
--- a/src/views/charts2/Panel.vue
+++ b/src/views/charts2/Panel.vue
@@ -528,7 +528,10 @@ export default {
        path: '/entity/detail',
        query: {
          entityType: this.entityType,
-          entityName: this.entityValue
+          entityName: this.entityValue,
+          startTime: this.timeFilter.startTime,
+          endTime: this.timeFilter.endTime,
+          range: this.timeFilter.dateRangeValue
        }
      })
      window.open(href, '_blank')
--- a/src/views/charts2/charts/dnsInsight/DnsTrafficLine.vue
+++ b/src/views/charts2/charts/dnsInsight/DnsTrafficLine.vue
@@ -9,7 +9,7 @@
               v-show="item.show"
               :class=" {'is-active': lineTab === item.class, 'mousemove-cursor': mousemoveCursor === item.class}"
               v-for="(item, index) in tabs"
-               :key="index"
+               :key="item.name"
               @mouseenter="mouseenter(item)"
               @mouseleave="mouseleave(item)"
               @click="activeChange(item, index,true)">
@@ -83,7 +83,7 @@ import { getSecond } from '@/utils/date-util'
 import ChartNoData from '@/views/charts/charts/ChartNoData'
 import chartMixin from '@/views/charts2/chart-mixin'
 import { useRoute } from 'vue-router'
-import { getLineType, getMarkLineByLineRefer, overwriteUrl, urlParamsHandler } from '@/utils/tools'
+import {getLineType, getMarkLineByLineRefer, getYAxisBeginValue, overwriteUrl, urlParamsHandler} from '@/utils/tools'
 import { dataForDnsTrafficLine } from '@/utils/static-data'
 export default {
  name: 'DnsTrafficLine',
@@ -292,6 +292,7 @@ export default {
              }
            }
          })
+          this.chartOption.yAxis[0].startValue = getYAxisBeginValue(this.chartOption.series)
          if (!show) {
            this.chartOption.series.forEach((t) => {
              t.markLine.label.show = false
@@ -378,6 +379,13 @@ export default {
            this.dispatchSelectAction('legendUnSelect', t.name)
          }
        })
+        const series = this.tabs.filter(tab => tab.show)
+        const yAxisStartValue = getYAxisBeginValue(series)
+        if (this.myChart) {
+          const _option = this.myChart.getOption()
+          _option.yAxis[0].startValue = yAxisStartValue
+          this.myChart.setOption(_option)
+        }
      }
      if (val === 'active') {
        this.tabs.forEach(t => {
@@ -466,6 +474,19 @@ export default {
        })
      }
      lineData.splice(0, 1)
+      const totalData = lineData[0]
+      // 判断total曲线的第一个值和最后一个值，若是0，则删除
+      if (totalData.values.length > 1 && Number(totalData.values[totalData.values.length - 1][1]) === 0) {
+        lineData.forEach(r => {
+          r.values.splice(r.values.length - 1, 1)
+        })
+      }
+      if (totalData.values[0].length > 1 && Number(totalData.values[0][1]) === 0) {
+        lineData.forEach(l => {
+          l.values.splice(0, 1)
+        })
+      }
+
      const tabs = _.cloneDeep(this.tabs)
      if (val === 'Queries/s') {
        lineData.forEach((d, i) => {
--- a/src/views/charts2/charts/entityDetail/EntityDetailBasicInfo.vue
+++ b/src/views/charts2/charts/entityDetail/EntityDetailBasicInfo.vue
@@ -130,13 +130,8 @@ export default {
      this.showError = false
      this.levelTwoTags = []
      const basicInfoRequest = axios.get(`${api.entity.basicInfo}/${this.entity.entityType}?resource=${this.entity.entityName}`)
-      let requestArray = []
-      if (this.entity.entityType === entityType.subscriber) {
-        requestArray = [null, basicInfoRequest]
-      } else {
      const tagRequest = axios.get(`${api.entity.tags}/${this.entity.entityType}?resource=${this.entity.entityName}`)
-        requestArray = [tagRequest, basicInfoRequest]
-      }
+      const requestArray = [tagRequest, basicInfoRequest]
      Promise.all(requestArray).then(response => {
        const tagData = response[0]
        let tagError = ''
@@ -204,7 +199,7 @@ export default {
                break
              }
              case 'subscriber': {
-                this.detailCards.find(c => c.name === 'iphoneNumber').value = res.data.phone_number
+                this.detailCards.find(c => c.name === 'phoneNumber').value = res.data.phone_number
                this.detailCards.find(c => c.name === 'imei').value = res.data.imei
                this.detailCards.find(c => c.name === 'imsi').value = res.data.imsi
                this.detailCards.find(c => c.name === 'apn').value = res.data.apn
@@ -483,10 +478,10 @@ export default {
      }
      case 'subscriber': {
        detailCards.value = _.concat(detailCards.value,
-          { icon: 'cn-icon cn-icon-shoujihaoma', name: 'iphoneNumber', label: i18n.global.t('entities.iphoneNumber'), value: '' },
-          { icon: 'cn-icon cn-icon-IMEI', name: 'imei', label: i18n.global.t('entities.imei'), value: '' },
-          { icon: 'cn-icon cn-icon-IMSI', name: 'imsi', label: i18n.global.t('entities.imsi'), value: '' },
-          { icon: 'cn-icon cn-icon-APN', name: 'apn', label: i18n.global.t('entities.apn'), value: '' }
+          { icon: 'cn-icon cn-icon-shoujihaoma', name: 'phoneNumber', label: 'MSISDN', value: '' },
+          { icon: 'cn-icon cn-icon-IMEI', name: 'imei', label: 'IMEI', value: '' },
+          { icon: 'cn-icon cn-icon-IMSI', name: 'imsi', label: 'IMSI', value: '' },
+          { icon: 'cn-icon cn-icon-APN', name: 'apn', label: 'APN', value: '' }
        )
      }
    }
--- a/src/views/charts2/charts/entityDetail/EntityDetailLine.vue
+++ b/src/views/charts2/charts/entityDetail/EntityDetailLine.vue
@@ -10,7 +10,7 @@
              <div class="line-value-tabs"
                   :class=" {'is-active': lineTab === item.class, 'mousemove-cursor': mousemoveCursor === item.class}"
                   v-if="item.show"
-                   :key="index"
+                   :key="item.name"
                   @mouseenter="mouseenter(item)"
                   @mouseleave="mouseleave(item)"
                   @click="activeChange(item, index,true)"
--- a/src/views/charts2/charts/entityDetail/EntityDetailMap.vue
+++ b/src/views/charts2/charts/entityDetail/EntityDetailMap.vue
--- a/src/views/charts2/charts/entityDetail/EntityDetailSubscriberKpi.vue
+++ b/src/views/charts2/charts/entityDetail/EntityDetailSubscriberKpi.vue
@@ -140,9 +140,12 @@ export default {
    const queryCondition = ref(query.queryCondition || '')

    // 获取url携带的range、startTime、endTime
-    const rangeParam = query.kpiRange
+    /*const rangeParam = query.kpiRange
    const startTimeParam = query.kpiStartTime
-    const endTimeParam = query.kpiEndTime
+    const endTimeParam = query.kpiEndTime*/
+    const rangeParam = query.range
+    const startTimeParam = query.startTime
+    const endTimeParam = query.endTime

    // 优先级：url > config.js > 默认值。
    const dateRangeValue = rangeParam ? parseInt(rangeParam) : (DEFAULT_TIME_FILTER_RANGE.entity.subscriberKpi || 60)
--- a/src/views/charts2/charts/entityDetail/EntityDetailSubscriberTopApp.vue
+++ b/src/views/charts2/charts/entityDetail/EntityDetailSubscriberTopApp.vue
@@ -67,9 +67,12 @@ export default {
    const queryCondition = ref(query.queryCondition || '')

    // 获取url携带的range、startTime、endTime
-    const rangeParam = query.topAppRange
+    /*const rangeParam = query.topAppRange
    const startTimeParam = query.topAppStartTime
-    const endTimeParam = query.topAppEndTime
+    const endTimeParam = query.topAppEndTime*/
+    const rangeParam = query.range
+    const startTimeParam = query.startTime
+    const endTimeParam = query.endTime

    // 优先级：url > config.js > 默认值。
    const dateRangeValue = rangeParam ? parseInt(rangeParam) : (DEFAULT_TIME_FILTER_RANGE.entity.subscriberTopApp || 60)
--- a/src/views/charts2/charts/entityDetail/EntityDetailTabs.vue
+++ b/src/views/charts2/charts/entityDetail/EntityDetailTabs.vue
@@ -186,10 +186,10 @@ export default {

        switch (this.entity.entityType) {
          case entityType.ip: {
-            const len1 = res[0].status === 200 ? res0.data.result.length : 0
-            const len2 = res[1].status === 200 ? res1.data.result.length : 0
+            const len1 = res[0].status === 200 ? res0.data.result && res0.data.result.length : 0
+            const len2 = res[1].status === 200 ? res1.data.result && res1.data.result.length : 0
            this.initSetTag(entityDetailTabsName.relatedEntity, len1 + len2)
-            const behaviorPatternData = res[2].status === 200 ? res[2].data.data.result : 0
+            const behaviorPatternData = res[2].status === 200 ? res[2].data.data.result && res[2].data.data.result : 0
            let behaviorPatternLen = 0
            if (behaviorPatternData && behaviorPatternData[0]) {
              const dataObject = behaviorPatternData[0]
@@ -205,20 +205,20 @@ export default {
          }
          case entityType.domain: {
            const res2 = res[2].data
-            const len1 = res[0].status === 200 ? res0.data.result.length : 0
-            const len2 = res[1].status === 200 ? res1.data.result.length : 0
-            const len3 = res[2].status === 200 ? res2.data.result.length : 0
+            const len1 = res[0].status === 200 ? res0.data.result && res0.data.result.length : 0
+            const len2 = res[1].status === 200 ? res1.data.result && res1.data.result.length : 0
+            const len3 = res[2].status === 200 ? res2.data.result && res2.data.result.length : 0
            this.initSetTag(entityDetailTabsName.relatedEntity, len1 + len2 + len3)
            break
          }
          case entityType.app: {
-            const len1 = res[0].status === 200 ? res0.data.result.length : 0
-            const len2 = res[1].status === 200 ? res1.data.result.length : 0
+            const len1 = res[0].status === 200 ? res0.data.result && res0.data.result.length : 0
+            const len2 = res[1].status === 200 ? res1.data.result && res1.data.result.length : 0
            this.initSetTag(entityDetailTabsName.relatedEntity, len1 + len2)
            break
          }
          case entityType.subscriber: {
-            const len1 = res[0].status === 200 ? res0.data.result.length : 0
+            const len1 = res[0].status === 200 ? res0.data.result && res0.data.result.length : 0
            // const len2 = res[1].status === 200 ? res1.data.result.length : 0
            this.initSetTag(entityDetailTabsName.relatedEntity, len1)
            break
--- a/src/views/charts2/charts/entityDetail/lines/App.vue
+++ b/src/views/charts2/charts/entityDetail/lines/App.vue
@@ -9,7 +9,7 @@
            <div class="line-value-tabs"
                 :class=" {'is-active': lineTab === item.class, 'mousemove-cursor': mousemoveCursor === item.class}"
                 v-if="item.show"
-                 :key="index"
+                 :key="item.name"
                 @mouseenter="mouseenter(item)"
                 @mouseleave="mouseleave(item)"
                 @click="activeChange(item, index,true)"
--- a/src/views/charts2/charts/entityDetail/lines/ServiceName.vue
+++ b/src/views/charts2/charts/entityDetail/lines/ServiceName.vue
@@ -9,7 +9,7 @@
            <div class="line-value-tabs"
                 :class=" {'is-active': lineTab === item.class, 'mousemove-cursor': mousemoveCursor === item.class}"
                 v-if="item.show"
-                 :key="index"
+                 :key="item.name"
                 @mouseenter="mouseenter(item)"
                 @mouseleave="mouseleave(item)"
                 @click="activeChange(item, index,true)"
--- a/src/views/charts2/charts/entityDetail/tabs/AccountInformation.vue
+++ b/src/views/charts2/charts/entityDetail/tabs/AccountInformation.vue
@@ -10,7 +10,7 @@
          <span class="type-title-word">{{ $t('entities.tab.email') }}</span>({{ mailList.length }})
        </div>
        <div class="type-content">
-          <div v-for="(mail, index) in mailList.slice(0,showMailListInfo.num)" :key="index" class="data-item">
+          <div v-for="mail in mailList.slice(0,showMailListInfo.num)" :key="mail" class="data-item">
            {{ mail }}
          </div>
        </div>
@@ -27,7 +27,7 @@
          <span class="type-title-word">{{ $t('entities.tab.wetchat') }}</span>({{ wetchatList.length }})
        </div>
        <div class="type-content">
-          <div v-for="(wetchat, index) in wetchatList.slice(0,showWetchatListInfo.num)" :key="index" class="data-item">
+          <div v-for="(wetchat, index) in wetchatList.slice(0,showWetchatListInfo.num)" :key="wetchat" class="data-item">
            {{ wetchat }}
          </div>
        </div>
--- a/src/views/charts2/charts/entityDetail/tabs/BehaviorPattern.vue
+++ b/src/views/charts2/charts/entityDetail/tabs/BehaviorPattern.vue
@@ -5,7 +5,7 @@
  <div v-if="!isNoData && !showError" class="entity-detail-event-block" style="height: 100%;width: 100%;position: relative;">
    <div class="behavior-pattern" >
      <div class="behavior-pattern-legend" >
-          <div class="behavior-pattern-legend__item" v-for="(data, index) in tableData" :key="index">
+          <div class="behavior-pattern-legend__item" v-for="(data, index) in tableData" :key="data.name">
            <div class="legend-icon" :style="`background:${chartColorForBehaviorPattern[index%10]};`"></div>
            <div class="legend-name">{{data.name}}</div>
            <div class="legend-value" >{{ valueToRangeValue(data.value, unitTypes.number).join('')}}</div>
--- a/src/views/charts2/charts/entityDetail/tabs/DeviceInformation.vue
+++ b/src/views/charts2/charts/entityDetail/tabs/DeviceInformation.vue
@@ -10,7 +10,7 @@
          <span class="type-title-word">{{ $t('entities.tab.device') }}</span>({{ deviceList.length }})
        </div>
        <div class="type-content">
-          <div v-for="(device, index) in deviceList.slice(0,showDeviceListInfo.num)" :key="index" class="data-item">
+          <div v-for="(device, index) in deviceList.slice(0,showDeviceListInfo.num)" :key="device" class="data-item">
            {{ device }}
          </div>
        </div>
--- a/src/views/charts2/charts/entityDetail/tabs/DigitalCertificate.vue
+++ b/src/views/charts2/charts/entityDetail/tabs/DigitalCertificate.vue
@@ -12,7 +12,7 @@
        </div>
      </div>

-      <div v-for="(item, index) in infoList" :key="index" class="margin-t-20">
+      <div v-for="item in infoList" :key="item.name" class="margin-t-20">
        <div class="digital-certificate-body">
          <div class="digital-certificate-body-tags">
            <div :class="item.flag === '0' ? 'entity-tag entity-tag--level-two-negative-no-background' : 'entity-tag entity-tag--level-two-positive-no-background'">{{ this.$t(getTrusted(item.flag)) }}</div>
@@ -20,7 +20,7 @@

          <div class="digital-certificate-body-content">
            <div class="certificate-list-list">
-              <div v-for="(item1, index1) in item.data" :key="index1" class="certificate-list-item">
+              <div v-for="item1 in item.data" :key="item1.label" class="certificate-list-item">
                <div class="certificate-list-item__label">{{ item1.label }}</div>
                <div v-if="item1.type" :class="'entity-tag entity-tag--small entity-tag--level-one-' + item1.type">{{ item1.value }}</div>
                <div v-else class="certificate-list-item__value">
--- a/src/views/charts2/charts/linkMonitor/LinkBlock.vue
+++ b/src/views/charts2/charts/linkMonitor/LinkBlock.vue
@@ -64,6 +64,7 @@
      <div class="block-list__list" v-show="!nextHopNoData" v-else>
        <el-popover
            placement="bottom"
+            effect="dark"
            trigger="hover"
            popper-class="link-block__popper"
            v-for="(item, index) in nextHopData"
@@ -236,12 +237,26 @@ export default {
                }
              })
              this.linkNoData = data.length === 0
+              if (!isTwoWay) {
                data.forEach(item => {
                  item.totalBitsRate = item.outBitsRate + item.inBitsRate
                  linkConfig.filter(info => info.interfaceName === item.interfaceName).forEach(info => {
                    item.linkId = info.linkId
                  })
                })
+              } else {
+                data.forEach(item => {
+                  item.totalBitsRate = item.outBitsRate + item.inBitsRate
+                  item.isTwoWay = true
+                  linkConfig.filter(info => info.interfaceName === item.interfaceName).forEach(info => {
+                    if (info.direction === 0) {
+                      item.outLinkId = info.linkId
+                    } else if (info.direction === 1) {
+                      item.inLinkId = info.linkId
+                    }
+                  })
+                })
+              }

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