diff --git a/package-lock.json b/package-lock.json
index 237f102..5b36661 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,14 +9,13 @@
       "version": "0.0.0",
       "dependencies": {
         "@newpanjing/datav-vue3": "^0.0.0-alpha.0",
+        "axios": "^1.7.9",
         "echarts": "^5.5.1",
+        "element-plus": "^2.9.0",
         "pinia": "^2.2.6",
         "vue": "^3.5.13",
-<<<<<<< HEAD
-        "vue-echarts": "^7.0.3",
-=======
         "vue-countup-v3": "^1.4.2",
->>>>>>> c263e68dd9f06fa54de5add6bfa1b7bdb129383d
+        "vue-echarts": "^7.0.3",
         "vue-router": "^4.4.5"
       },
       "devDependencies": {
@@ -25,6 +24,7 @@
         "sass": "^1.82.0",
         "sass-loader": "^8.0.2",
         "unplugin-auto-import": "^0.18.6",
+        "unplugin-vue-components": "^0.27.5",
         "vite": "^6.0.1",
         "vite-plugin-vue-devtools": "^7.6.5"
       }
@@ -467,372 +467,20 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@esbuild/aix-ppc64": {
-      "version": "0.24.0",
-      "resolved": "https://registry.npmmirror.com/@esbuild/aix-ppc64/-/aix-ppc64-0.24.0.tgz",
-      "integrity": "sha512-WtKdFM7ls47zkKHFVzMz8opM7LkcsIp9amDUBIAWirg70RM71WRSjdILPsY5Uv1D42ZpUfaPILDlfactHgsRkw==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "aix"
-      ],
+    "node_modules/@ctrl/tinycolor": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz",
+      "integrity": "sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==",
       "engines": {
-        "node": ">=18"
+        "node": ">=10"
       }
     },
-    "node_modules/@esbuild/android-arm": {
-      "version": "0.24.0",
-      "resolved": "https://registry.npmmirror.com/@esbuild/android-arm/-/android-arm-0.24.0.tgz",
-      "integrity": "sha512-arAtTPo76fJ/ICkXWetLCc9EwEHKaeya4vMrReVlEIUCAUncH7M4bhMQ+M9Vf+FFOZJdTNMXNBrWwW+OXWpSew==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/android-arm64": {
-      "version": "0.24.0",
-      "resolved": "https://registry.npmmirror.com/@esbuild/android-arm64/-/android-arm64-0.24.0.tgz",
-      "integrity": "sha512-Vsm497xFM7tTIPYK9bNTYJyF/lsP590Qc1WxJdlB6ljCbdZKU9SY8i7+Iin4kyhV/KV5J2rOKsBQbB77Ab7L/w==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/android-x64": {
-      "version": "0.24.0",
-      "resolved": "https://registry.npmmirror.com/@esbuild/android-x64/-/android-x64-0.24.0.tgz",
-      "integrity": "sha512-t8GrvnFkiIY7pa7mMgJd7p8p8qqYIz1NYiAoKc75Zyv73L3DZW++oYMSHPRarcotTKuSs6m3hTOa5CKHaS02TQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.24.0",
-      "resolved": "https://registry.npmmirror.com/@esbuild/darwin-arm64/-/darwin-arm64-0.24.0.tgz",
-      "integrity": "sha512-CKyDpRbK1hXwv79soeTJNHb5EiG6ct3efd/FTPdzOWdbZZfGhpbcqIpiD0+vwmpu0wTIL97ZRPZu8vUt46nBSw==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/darwin-x64": {
-      "version": "0.24.0",
-      "resolved": "https://registry.npmmirror.com/@esbuild/darwin-x64/-/darwin-x64-0.24.0.tgz",
-      "integrity": "sha512-rgtz6flkVkh58od4PwTRqxbKH9cOjaXCMZgWD905JOzjFKW+7EiUObfd/Kav+A6Gyud6WZk9w+xu6QLytdi2OA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.24.0",
-      "resolved": "https://registry.npmmirror.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.24.0.tgz",
-      "integrity": "sha512-6Mtdq5nHggwfDNLAHkPlyLBpE5L6hwsuXZX8XNmHno9JuL2+bg2BX5tRkwjyfn6sKbxZTq68suOjgWqCicvPXA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.24.0",
-      "resolved": "https://registry.npmmirror.com/@esbuild/freebsd-x64/-/freebsd-x64-0.24.0.tgz",
-      "integrity": "sha512-D3H+xh3/zphoX8ck4S2RxKR6gHlHDXXzOf6f/9dbFt/NRBDIE33+cVa49Kil4WUjxMGW0ZIYBYtaGCa2+OsQwQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/linux-arm": {
-      "version": "0.24.0",
-      "resolved": "https://registry.npmmirror.com/@esbuild/linux-arm/-/linux-arm-0.24.0.tgz",
-      "integrity": "sha512-gJKIi2IjRo5G6Glxb8d3DzYXlxdEj2NlkixPsqePSZMhLudqPhtZ4BUrpIuTjJYXxvF9njql+vRjB2oaC9XpBw==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/linux-arm64": {
-      "version": "0.24.0",
-      "resolved": "https://registry.npmmirror.com/@esbuild/linux-arm64/-/linux-arm64-0.24.0.tgz",
-      "integrity": "sha512-TDijPXTOeE3eaMkRYpcy3LarIg13dS9wWHRdwYRnzlwlA370rNdZqbcp0WTyyV/k2zSxfko52+C7jU5F9Tfj1g==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/linux-ia32": {
-      "version": "0.24.0",
-      "resolved": "https://registry.npmmirror.com/@esbuild/linux-ia32/-/linux-ia32-0.24.0.tgz",
-      "integrity": "sha512-K40ip1LAcA0byL05TbCQ4yJ4swvnbzHscRmUilrmP9Am7//0UjPreh4lpYzvThT2Quw66MhjG//20mrufm40mA==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/linux-loong64": {
-      "version": "0.24.0",
-      "resolved": "https://registry.npmmirror.com/@esbuild/linux-loong64/-/linux-loong64-0.24.0.tgz",
-      "integrity": "sha512-0mswrYP/9ai+CU0BzBfPMZ8RVm3RGAN/lmOMgW4aFUSOQBjA31UP8Mr6DDhWSuMwj7jaWOT0p0WoZ6jeHhrD7g==",
-      "cpu": [
-        "loong64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.24.0",
-      "resolved": "https://registry.npmmirror.com/@esbuild/linux-mips64el/-/linux-mips64el-0.24.0.tgz",
-      "integrity": "sha512-hIKvXm0/3w/5+RDtCJeXqMZGkI2s4oMUGj3/jM0QzhgIASWrGO5/RlzAzm5nNh/awHE0A19h/CvHQe6FaBNrRA==",
-      "cpu": [
-        "mips64el"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.24.0",
-      "resolved": "https://registry.npmmirror.com/@esbuild/linux-ppc64/-/linux-ppc64-0.24.0.tgz",
-      "integrity": "sha512-HcZh5BNq0aC52UoocJxaKORfFODWXZxtBaaZNuN3PUX3MoDsChsZqopzi5UupRhPHSEHotoiptqikjN/B77mYQ==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.24.0",
-      "resolved": "https://registry.npmmirror.com/@esbuild/linux-riscv64/-/linux-riscv64-0.24.0.tgz",
-      "integrity": "sha512-bEh7dMn/h3QxeR2KTy1DUszQjUrIHPZKyO6aN1X4BCnhfYhuQqedHaa5MxSQA/06j3GpiIlFGSsy1c7Gf9padw==",
-      "cpu": [
-        "riscv64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/linux-s390x": {
-      "version": "0.24.0",
-      "resolved": "https://registry.npmmirror.com/@esbuild/linux-s390x/-/linux-s390x-0.24.0.tgz",
-      "integrity": "sha512-ZcQ6+qRkw1UcZGPyrCiHHkmBaj9SiCD8Oqd556HldP+QlpUIe2Wgn3ehQGVoPOvZvtHm8HPx+bH20c9pvbkX3g==",
-      "cpu": [
-        "s390x"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/linux-x64": {
-      "version": "0.24.0",
-      "resolved": "https://registry.npmmirror.com/@esbuild/linux-x64/-/linux-x64-0.24.0.tgz",
-      "integrity": "sha512-vbutsFqQ+foy3wSSbmjBXXIJ6PL3scghJoM8zCL142cGaZKAdCZHyf+Bpu/MmX9zT9Q0zFBVKb36Ma5Fzfa8xA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.24.0",
-      "resolved": "https://registry.npmmirror.com/@esbuild/netbsd-x64/-/netbsd-x64-0.24.0.tgz",
-      "integrity": "sha512-hjQ0R/ulkO8fCYFsG0FZoH+pWgTTDreqpqY7UnQntnaKv95uP5iW3+dChxnx7C3trQQU40S+OgWhUVwCjVFLvg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "netbsd"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/openbsd-arm64": {
-      "version": "0.24.0",
-      "resolved": "https://registry.npmmirror.com/@esbuild/openbsd-arm64/-/openbsd-arm64-0.24.0.tgz",
-      "integrity": "sha512-MD9uzzkPQbYehwcN583yx3Tu5M8EIoTD+tUgKF982WYL9Pf5rKy9ltgD0eUgs8pvKnmizxjXZyLt0z6DC3rRXg==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "openbsd"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.24.0",
-      "resolved": "https://registry.npmmirror.com/@esbuild/openbsd-x64/-/openbsd-x64-0.24.0.tgz",
-      "integrity": "sha512-4ir0aY1NGUhIC1hdoCzr1+5b43mw99uNwVzhIq1OY3QcEwPDO3B7WNXBzaKY5Nsf1+N11i1eOfFcq+D/gOS15Q==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "openbsd"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/sunos-x64": {
-      "version": "0.24.0",
-      "resolved": "https://registry.npmmirror.com/@esbuild/sunos-x64/-/sunos-x64-0.24.0.tgz",
-      "integrity": "sha512-jVzdzsbM5xrotH+W5f1s+JtUy1UWgjU0Cf4wMvffTB8m6wP5/kx0KiaLHlbJO+dMgtxKV8RQ/JvtlFcdZ1zCPA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "sunos"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/win32-arm64": {
-      "version": "0.24.0",
-      "resolved": "https://registry.npmmirror.com/@esbuild/win32-arm64/-/win32-arm64-0.24.0.tgz",
-      "integrity": "sha512-iKc8GAslzRpBytO2/aN3d2yb2z8XTVfNV0PjGlCxKo5SgWmNXx82I/Q3aG1tFfS+A2igVCY97TJ8tnYwpUWLCA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/win32-ia32": {
-      "version": "0.24.0",
-      "resolved": "https://registry.npmmirror.com/@esbuild/win32-ia32/-/win32-ia32-0.24.0.tgz",
-      "integrity": "sha512-vQW36KZolfIudCcTnaTpmLQ24Ha1RjygBo39/aLkM2kmjkWmZGEJ5Gn9l5/7tzXA42QGIoWbICfg6KLLkIw6yw==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=18"
+    "node_modules/@element-plus/icons-vue": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.3.1.tgz",
+      "integrity": "sha512-XxVUZv48RZAd87ucGS48jPf6pKu0yV5UCg9f4FFwtrYxXOwWuVJo6wOvSLKEoMQKjv8GsX/mhP6UsC1lRwbUWg==",
+      "peerDependencies": {
+        "vue": "^3.2.0"
       }
     },
     "node_modules/@esbuild/win32-x64": {
@@ -851,6 +499,28 @@
         "node": ">=18"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.8",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/core/-/core-1.6.8.tgz",
+      "integrity": "sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.8"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.12",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/dom/-/dom-1.6.12.tgz",
+      "integrity": "sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==",
+      "dependencies": {
+        "@floating-ui/core": "^1.6.0",
+        "@floating-ui/utils": "^0.2.8"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.8",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/utils/-/utils-0.2.8.tgz",
+      "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig=="
+    },
     "node_modules/@jiaminghi/color": {
       "version": "1.1.3",
       "resolved": "https://registry.npmmirror.com/@jiaminghi/color/-/color-1.1.3.tgz",
@@ -998,246 +668,6 @@
         "@parcel/watcher-win32-x64": "2.5.0"
       }
     },
-    "node_modules/@parcel/watcher-android-arm64": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmmirror.com/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.0.tgz",
-      "integrity": "sha512-qlX4eS28bUcQCdribHkg/herLe+0A9RyYC+mm2PXpncit8z5b3nSqGVzMNR3CmtAOgRutiZ02eIJJgP/b1iEFQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-darwin-arm64": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmmirror.com/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.0.tgz",
-      "integrity": "sha512-hyZ3TANnzGfLpRA2s/4U1kbw2ZI4qGxaRJbBH2DCSREFfubMswheh8TeiC1sGZ3z2jUf3s37P0BBlrD3sjVTUw==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-darwin-x64": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmmirror.com/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.0.tgz",
-      "integrity": "sha512-9rhlwd78saKf18fT869/poydQK8YqlU26TMiNg7AIu7eBp9adqbJZqmdFOsbZ5cnLp5XvRo9wcFmNHgHdWaGYA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-freebsd-x64": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmmirror.com/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.0.tgz",
-      "integrity": "sha512-syvfhZzyM8kErg3VF0xpV8dixJ+RzbUaaGaeb7uDuz0D3FK97/mZ5AJQ3XNnDsXX7KkFNtyQyFrXZzQIcN49Tw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-linux-arm-glibc": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmmirror.com/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.0.tgz",
-      "integrity": "sha512-0VQY1K35DQET3dVYWpOaPFecqOT9dbuCfzjxoQyif1Wc574t3kOSkKevULddcR9znz1TcklCE7Ht6NIxjvTqLA==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-linux-arm-musl": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmmirror.com/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.0.tgz",
-      "integrity": "sha512-6uHywSIzz8+vi2lAzFeltnYbdHsDm3iIB57d4g5oaB9vKwjb6N6dRIgZMujw4nm5r6v9/BQH0noq6DzHrqr2pA==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-linux-arm64-glibc": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmmirror.com/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.0.tgz",
-      "integrity": "sha512-BfNjXwZKxBy4WibDb/LDCriWSKLz+jJRL3cM/DllnHH5QUyoiUNEp3GmL80ZqxeumoADfCCP19+qiYiC8gUBjA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-linux-arm64-musl": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmmirror.com/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.0.tgz",
-      "integrity": "sha512-S1qARKOphxfiBEkwLUbHjCY9BWPdWnW9j7f7Hb2jPplu8UZ3nes7zpPOW9bkLbHRvWM0WDTsjdOTUgW0xLBN1Q==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-linux-x64-glibc": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmmirror.com/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.0.tgz",
-      "integrity": "sha512-d9AOkusyXARkFD66S6zlGXyzx5RvY+chTP9Jp0ypSTC9d4lzyRs9ovGf/80VCxjKddcUvnsGwCHWuF2EoPgWjw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-linux-x64-musl": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmmirror.com/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.0.tgz",
-      "integrity": "sha512-iqOC+GoTDoFyk/VYSFHwjHhYrk8bljW6zOhPuhi5t9ulqiYq1togGJB5e3PwYVFFfeVgc6pbz3JdQyDoBszVaA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-win32-arm64": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmmirror.com/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.0.tgz",
-      "integrity": "sha512-twtft1d+JRNkM5YbmexfcH/N4znDtjgysFaV9zvZmmJezQsKpkfLYJ+JFV3uygugK6AtIM2oADPkB2AdhBrNig==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-win32-ia32": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmmirror.com/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.0.tgz",
-      "integrity": "sha512-+rgpsNRKwo8A53elqbbHXdOMtY/tAtTzManTWShB5Kk54N8Q9mzNWV7tV+IbGueCbcj826MfWGU3mprWtuf1TA==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
     "node_modules/@parcel/watcher-win32-x64": {
       "version": "2.5.0",
       "resolved": "https://registry.npmmirror.com/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.0.tgz",
@@ -1264,6 +694,16 @@
       "integrity": "sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw==",
       "dev": true
     },
+    "node_modules/@popperjs/core": {
+      "name": "@sxzz/popperjs-es",
+      "version": "2.11.7",
+      "resolved": "https://registry.npmmirror.com/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
+      "integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@rollup/pluginutils": {
       "version": "5.1.3",
       "resolved": "https://registry.npmmirror.com/@rollup/pluginutils/-/pluginutils-5.1.3.tgz",
@@ -1286,227 +726,6 @@
         }
       }
     },
-    "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.28.0",
-      "resolved": "https://registry.npmmirror.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.28.0.tgz",
-      "integrity": "sha512-wLJuPLT6grGZsy34g4N1yRfYeouklTgPhH1gWXCYspenKYD0s3cR99ZevOGw5BexMNywkbV3UkjADisozBmpPQ==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "android"
-      ]
-    },
-    "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.28.0",
-      "resolved": "https://registry.npmmirror.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.28.0.tgz",
-      "integrity": "sha512-eiNkznlo0dLmVG/6wf+Ifi/v78G4d4QxRhuUl+s8EWZpDewgk7PX3ZyECUXU0Zq/Ca+8nU8cQpNC4Xgn2gFNDA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "android"
-      ]
-    },
-    "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.28.0",
-      "resolved": "https://registry.npmmirror.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.28.0.tgz",
-      "integrity": "sha512-lmKx9yHsppblnLQZOGxdO66gT77bvdBtr/0P+TPOseowE7D9AJoBw8ZDULRasXRWf1Z86/gcOdpBrV6VDUY36Q==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ]
-    },
-    "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.28.0",
-      "resolved": "https://registry.npmmirror.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.28.0.tgz",
-      "integrity": "sha512-8hxgfReVs7k9Js1uAIhS6zq3I+wKQETInnWQtgzt8JfGx51R1N6DRVy3F4o0lQwumbErRz52YqwjfvuwRxGv1w==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ]
-    },
-    "node_modules/@rollup/rollup-freebsd-arm64": {
-      "version": "4.28.0",
-      "resolved": "https://registry.npmmirror.com/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.28.0.tgz",
-      "integrity": "sha512-lA1zZB3bFx5oxu9fYud4+g1mt+lYXCoch0M0V/xhqLoGatbzVse0wlSQ1UYOWKpuSu3gyN4qEc0Dxf/DII1bhQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "freebsd"
-      ]
-    },
-    "node_modules/@rollup/rollup-freebsd-x64": {
-      "version": "4.28.0",
-      "resolved": "https://registry.npmmirror.com/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.28.0.tgz",
-      "integrity": "sha512-aI2plavbUDjCQB/sRbeUZWX9qp12GfYkYSJOrdYTL/C5D53bsE2/nBPuoiJKoWp5SN78v2Vr8ZPnB+/VbQ2pFA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "freebsd"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.28.0",
-      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.28.0.tgz",
-      "integrity": "sha512-WXveUPKtfqtaNvpf0iOb0M6xC64GzUX/OowbqfiCSXTdi/jLlOmH0Ba94/OkiY2yTGTwteo4/dsHRfh5bDCZ+w==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.28.0",
-      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.28.0.tgz",
-      "integrity": "sha512-yLc3O2NtOQR67lI79zsSc7lk31xjwcaocvdD1twL64PK1yNaIqCeWI9L5B4MFPAVGEVjH5k1oWSGuYX1Wutxpg==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.28.0",
-      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.28.0.tgz",
-      "integrity": "sha512-+P9G9hjEpHucHRXqesY+3X9hD2wh0iNnJXX/QhS/J5vTdG6VhNYMxJ2rJkQOxRUd17u5mbMLHM7yWGZdAASfcg==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.28.0",
-      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.28.0.tgz",
-      "integrity": "sha512-1xsm2rCKSTpKzi5/ypT5wfc+4bOGa/9yI/eaOLW0oMs7qpC542APWhl4A37AENGZ6St6GBMWhCCMM6tXgTIplw==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
-      "version": "4.28.0",
-      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.28.0.tgz",
-      "integrity": "sha512-zgWxMq8neVQeXL+ouSf6S7DoNeo6EPgi1eeqHXVKQxqPy1B2NvTbaOUWPn/7CfMKL7xvhV0/+fq/Z/J69g1WAQ==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.28.0",
-      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.28.0.tgz",
-      "integrity": "sha512-VEdVYacLniRxbRJLNtzwGt5vwS0ycYshofI7cWAfj7Vg5asqj+pt+Q6x4n+AONSZW/kVm+5nklde0qs2EUwU2g==",
-      "cpu": [
-        "riscv64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.28.0",
-      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.28.0.tgz",
-      "integrity": "sha512-LQlP5t2hcDJh8HV8RELD9/xlYtEzJkm/aWGsauvdO2ulfl3QYRjqrKW+mGAIWP5kdNCBheqqqYIGElSRCaXfpw==",
-      "cpu": [
-        "s390x"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.28.0",
-      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.28.0.tgz",
-      "integrity": "sha512-Nl4KIzteVEKE9BdAvYoTkW19pa7LR/RBrT6F1dJCV/3pbjwDcaOq+edkP0LXuJ9kflW/xOK414X78r+K84+msw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.28.0",
-      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.28.0.tgz",
-      "integrity": "sha512-eKpJr4vBDOi4goT75MvW+0dXcNUqisK4jvibY9vDdlgLx+yekxSm55StsHbxUsRxSTt3JEQvlr3cGDkzcSP8bw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.28.0",
-      "resolved": "https://registry.npmmirror.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.28.0.tgz",
-      "integrity": "sha512-Vi+WR62xWGsE/Oj+mD0FNAPY2MEox3cfyG0zLpotZdehPFXwz6lypkGs5y38Jd/NVSbOD02aVad6q6QYF7i8Bg==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ]
-    },
-    "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.28.0",
-      "resolved": "https://registry.npmmirror.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.28.0.tgz",
-      "integrity": "sha512-kN/Vpip8emMLn/eOza+4JwqDZBL6MPNpkdaEsgUtW1NYN3DZvZqSQrbKzJcTL6hd8YNmFTn7XGWMwccOcJBL0A==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ]
-    },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
       "version": "4.28.0",
       "resolved": "https://registry.npmmirror.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.28.0.tgz",
@@ -1572,6 +791,19 @@
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
       "dev": true
     },
+    "node_modules/@types/lodash": {
+      "version": "4.17.13",
+      "resolved": "https://registry.npmmirror.com/@types/lodash/-/lodash-4.17.13.tgz",
+      "integrity": "sha512-lfx+dftrEZcdBPczf9d0Qv0x+j/rfNCMuC6OcfXmO8gkfeNAY88PgKUbvG56whcN23gc27yenwF6oJZXGFpYxg=="
+    },
+    "node_modules/@types/lodash-es": {
+      "version": "4.17.12",
+      "resolved": "https://registry.npmmirror.com/@types/lodash-es/-/lodash-es-4.17.12.tgz",
+      "integrity": "sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==",
+      "dependencies": {
+        "@types/lodash": "*"
+      }
+    },
     "node_modules/@types/node": {
       "version": "22.10.1",
       "resolved": "https://registry.npmmirror.com/@types/node/-/node-22.10.1.tgz",
@@ -1582,6 +814,11 @@
         "undici-types": "~6.20.0"
       }
     },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.16",
+      "resolved": "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
+      "integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ=="
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "5.2.1",
       "resolved": "https://registry.npmmirror.com/@vitejs/plugin-vue/-/plugin-vue-5.2.1.tgz",
@@ -1816,6 +1053,39 @@
       "resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.5.13.tgz",
       "integrity": "sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ=="
     },
+    "node_modules/@vueuse/core": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-9.13.0.tgz",
+      "integrity": "sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.16",
+        "@vueuse/metadata": "9.13.0",
+        "@vueuse/shared": "9.13.0",
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-9.13.0.tgz",
+      "integrity": "sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-9.13.0.tgz",
+      "integrity": "sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==",
+      "dependencies": {
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.14.1",
       "resolved": "https://registry.npmmirror.com/@webassemblyjs/ast/-/ast-1.14.1.tgz",
@@ -2028,6 +1298,51 @@
         "ajv": "^6.9.1"
       }
     },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmmirror.com/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/anymatch/node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmmirror.com/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/async-validator": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-4.2.5.tgz",
+      "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg=="
+    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
+    "node_modules/axios": {
+      "version": "1.7.9",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-1.7.9.tgz",
+      "integrity": "sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -2043,6 +1358,18 @@
         "node": "*"
       }
     },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/birpc": {
       "version": "0.2.19",
       "resolved": "https://registry.npmmirror.com/birpc/-/birpc-0.2.19.tgz",
@@ -2191,6 +1518,17 @@
         "node": ">=6"
       }
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/commander": {
       "version": "2.20.3",
       "resolved": "https://registry.npmmirror.com/commander/-/commander-2.20.3.tgz",
@@ -2249,6 +1587,11 @@
       "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
+    "node_modules/dayjs": {
+      "version": "1.11.13",
+      "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.13.tgz",
+      "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg=="
+    },
     "node_modules/debug": {
       "version": "4.3.7",
       "resolved": "https://registry.npmmirror.com/debug/-/debug-4.3.7.tgz",
@@ -2306,6 +1649,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/detect-libc": {
       "version": "1.0.3",
       "resolved": "https://registry.npmmirror.com/detect-libc/-/detect-libc-1.0.3.tgz",
@@ -2323,7 +1674,6 @@
       "version": "5.5.1",
       "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.5.1.tgz",
       "integrity": "sha512-Fce8upazaAXUVUVsjgV6mBnGuqgO+JNDlcgF79Dksy4+wgGpQB2lmYoO4TSweFg/mZITdpGHomw/cNBJZj1icA==",
-      "license": "Apache-2.0",
       "dependencies": {
         "tslib": "2.3.0",
         "zrender": "5.6.0"
@@ -2335,6 +1685,31 @@
       "integrity": "sha512-FgMdJlma0OzUYlbrtZ4AeXjKxKPk6KT8WOP8BjcqxWtlg8qyJQjRzPJzUtUn5GBg1oQ26hFs7HOOHJMYiJRnvQ==",
       "dev": true
     },
+    "node_modules/element-plus": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.9.0.tgz",
+      "integrity": "sha512-ccOFXKsauo2dtokAr4OX7gZsb7TuAoVxA2zGRZo5o2yyDDBLBaZxOoFQPoxITSLcHbBfQuNDGK5Iag5hnyKkZA==",
+      "dependencies": {
+        "@ctrl/tinycolor": "^3.4.1",
+        "@element-plus/icons-vue": "^2.3.1",
+        "@floating-ui/dom": "^1.0.1",
+        "@popperjs/core": "npm:@sxzz/popperjs-es@^2.11.7",
+        "@types/lodash": "^4.14.182",
+        "@types/lodash-es": "^4.17.6",
+        "@vueuse/core": "^9.1.0",
+        "async-validator": "^4.2.5",
+        "dayjs": "^1.11.13",
+        "escape-html": "^1.0.3",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "lodash-unified": "^1.0.2",
+        "memoize-one": "^6.0.0",
+        "normalize-wheel-es": "^1.2.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/emojis-list": {
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/emojis-list/-/emojis-list-3.0.0.tgz",
@@ -2433,6 +1808,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
+    },
     "node_modules/escape-string-regexp": {
       "version": "5.0.0",
       "resolved": "https://registry.npmmirror.com/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
@@ -2611,6 +1991,38 @@
         "node": ">=8"
       }
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.9",
+      "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.9.tgz",
+      "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.1.tgz",
+      "integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fs-extra": {
       "version": "11.2.0",
       "resolved": "https://registry.npmmirror.com/fs-extra/-/fs-extra-11.2.0.tgz",
@@ -2741,6 +2153,18 @@
       "integrity": "sha512-P8IdPQHq3lA1xVeBRi5VPqUm5HDgKnx0Ru51wZz5mjxHr5n3RWhjIpOFU7ybkUxfB+5IToy+OLaHYDBIWsv+uw==",
       "dev": true
     },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-docker": {
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/is-docker/-/is-docker-3.0.0.tgz",
@@ -3031,11 +2455,26 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
     "node_modules/lodash-es": {
       "version": "4.17.21",
       "resolved": "https://registry.npmmirror.com/lodash-es/-/lodash-es-4.17.21.tgz",
       "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
     },
+    "node_modules/lodash-unified": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/lodash-unified/-/lodash-unified-1.0.3.tgz",
+      "integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==",
+      "peerDependencies": {
+        "@types/lodash-es": "*",
+        "lodash": "*",
+        "lodash-es": "*"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -3053,6 +2492,11 @@
         "@jridgewell/sourcemap-codec": "^1.5.0"
       }
     },
+    "node_modules/memoize-one": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
+    },
     "node_modules/merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -3098,8 +2542,6 @@
       "version": "1.52.0",
       "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true,
-      "peer": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -3108,8 +2550,6 @@
       "version": "2.1.35",
       "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
-      "peer": true,
       "dependencies": {
         "mime-db": "1.52.0"
       },
@@ -3210,6 +2650,20 @@
       "integrity": "sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==",
       "dev": true
     },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/normalize-wheel-es": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz",
+      "integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw=="
+    },
     "node_modules/npm-run-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmmirror.com/npm-run-path/-/npm-run-path-6.0.0.tgz",
@@ -3409,6 +2863,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmmirror.com/punycode/-/punycode-2.3.1.tgz",
@@ -4065,6 +3524,91 @@
         }
       }
     },
+    "node_modules/unplugin-vue-components": {
+      "version": "0.27.5",
+      "resolved": "https://registry.npmmirror.com/unplugin-vue-components/-/unplugin-vue-components-0.27.5.tgz",
+      "integrity": "sha512-m9j4goBeNwXyNN8oZHHxvIIYiG8FQ9UfmKWeNllpDvhU7btKNNELGPt+o3mckQKuPwrE7e0PvCsx+IWuDSD9Vg==",
+      "dev": true,
+      "dependencies": {
+        "@antfu/utils": "^0.7.10",
+        "@rollup/pluginutils": "^5.1.3",
+        "chokidar": "^3.6.0",
+        "debug": "^4.3.7",
+        "fast-glob": "^3.3.2",
+        "local-pkg": "^0.5.1",
+        "magic-string": "^0.30.14",
+        "minimatch": "^9.0.5",
+        "mlly": "^1.7.3",
+        "unplugin": "^1.16.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@babel/parser": "^7.15.8",
+        "@nuxt/kit": "^3.2.2",
+        "vue": "2 || 3"
+      },
+      "peerDependenciesMeta": {
+        "@babel/parser": {
+          "optional": true
+        },
+        "@nuxt/kit": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/unplugin-vue-components/node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmmirror.com/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/unplugin-vue-components/node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmmirror.com/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/unplugin-vue-components/node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmmirror.com/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/update-browserslist-db/-/update-browserslist-db-1.1.1.tgz",
@@ -4279,13 +3823,22 @@
         }
       }
     },
-<<<<<<< HEAD
+    "node_modules/vue-countup-v3": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmmirror.com/vue-countup-v3/-/vue-countup-v3-1.4.2.tgz",
+      "integrity": "sha512-nRC65jBcdgwybxqztgd/WaK8ZN5T9ECPyiCFGYFMewCsvqdRVo1CtpT7JREcPNF837Fgu/izTSFiuzrIGD6w0A==",
+      "dependencies": {
+        "countup.js": "^2.6.2"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vue-demi": {
       "version": "0.13.11",
       "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.11.tgz",
       "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
       "hasInstallScript": true,
-      "license": "MIT",
       "bin": {
         "vue-demi-fix": "bin/vue-demi-fix.js",
         "vue-demi-switch": "bin/vue-demi-switch.js"
@@ -4310,7 +3863,6 @@
       "version": "7.0.3",
       "resolved": "https://registry.npmmirror.com/vue-echarts/-/vue-echarts-7.0.3.tgz",
       "integrity": "sha512-/jSxNwOsw5+dYAUcwSfkLwKPuzTQ0Cepz1LxCOpj2QcHrrmUa/Ql0eQqMmc1rTPQVrh2JQ29n2dhq75ZcHvRDw==",
-      "license": "MIT",
       "dependencies": {
         "vue-demi": "^0.13.11"
       },
@@ -4323,17 +3875,6 @@
         "@vue/runtime-core": {
           "optional": true
         }
-=======
-    "node_modules/vue-countup-v3": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmmirror.com/vue-countup-v3/-/vue-countup-v3-1.4.2.tgz",
-      "integrity": "sha512-nRC65jBcdgwybxqztgd/WaK8ZN5T9ECPyiCFGYFMewCsvqdRVo1CtpT7JREcPNF837Fgu/izTSFiuzrIGD6w0A==",
-      "dependencies": {
-        "countup.js": "^2.6.2"
-      },
-      "peerDependencies": {
-        "vue": "^3.0.0"
->>>>>>> c263e68dd9f06fa54de5add6bfa1b7bdb129383d
       }
     },
     "node_modules/vue-router": {
diff --git a/package.json b/package.json
index e3624d6..33422bc 100644
--- a/package.json
+++ b/package.json
@@ -10,11 +10,13 @@
   },
   "dependencies": {
     "@newpanjing/datav-vue3": "^0.0.0-alpha.0",
+    "axios": "^1.7.9",
     "echarts": "^5.5.1",
+    "element-plus": "^2.9.0",
     "pinia": "^2.2.6",
     "vue": "^3.5.13",
-    "vue-echarts": "^7.0.3",
     "vue-countup-v3": "^1.4.2",
+    "vue-echarts": "^7.0.3",
     "vue-router": "^4.4.5"
   },
   "devDependencies": {
@@ -23,6 +25,7 @@
     "sass": "^1.82.0",
     "sass-loader": "^8.0.2",
     "unplugin-auto-import": "^0.18.6",
+    "unplugin-vue-components": "^0.27.5",
     "vite": "^6.0.1",
     "vite-plugin-vue-devtools": "^7.6.5"
   }
diff --git a/src/api/request.js b/src/api/request.js
new file mode 100644
index 0000000..ca9d1a3
--- /dev/null
+++ b/src/api/request.js
@@ -0,0 +1,146 @@
+import axios from 'axios'
+import qs from 'qs'
+import router from '@/router'
+import { Message } from 'element-ui'
+
+const CODE_MESSAGE = {
+  200: '服务器成功返回请求数据',
+  201: '新建或修改数据成功',
+  202: '一个请求已经进入后台排队(异步任务)',
+  204: '删除数据成功',
+  400: '发出信息有误',
+  401: '用户没有权限(令牌失效、用户名、密码错误、登录过期)',
+  402: '令牌过期',
+  403: '用户得到授权，但是访问是被禁止的',
+  404: '访问资源不存在',
+  406: '请求格式不可得',
+  410: '请求资源被永久删除，且不会被看到',
+  500: '服务器发生错误',
+  502: '网关错误',
+  503: '服务不可用，服务器暂时过载或维护',
+  504: '网关超时'
+}
+
+/**
+ * axios响应拦截器
+ * @param config 请求配置
+ * @param data response数据
+ * @param status HTTP status
+ * @param statusText HTTP status text
+ * @returns {Promise<*|*>}
+ */
+const handleData = async ({ data, status, statusText }) => {
+  // 若data.code存在，覆盖默认code
+  let code = data && data['code'] ? data['code'] : status
+  // 若code属于操作正常code，则status修改为200
+  const codeVerificationArray = [200, 1, '200', '1']
+  if (codeVerificationArray.indexOf(data['code']) + 1) code = 1
+  switch (code) {
+    case 1:
+      // 业务层级错误处理，以下是假定restful有一套统一输出格式(指不管成功与否都有相应的数据格式)情况下进行处理
+      // 例如响应内容：
+      // 错误内容：{ code: 0, msg: '非法参数' }
+      // 正确内容：{ code: 1, data: {  }, msg: '操作正常' }
+      // return data
+      return data
+    case 401:
+      router
+        .push({
+          path: '/',
+          replace: true
+        })
+        .then(() => {})
+      break
+    case 402:
+      router
+        .push({
+          path: '/',
+          replace: true
+        })
+        .then(() => {})
+      break
+    case 403:
+      router
+        .push({
+          path: '/'
+        })
+        .then(() => {})
+      break
+  }
+  // 异常处理
+  // 若data.msg存在，覆盖默认提醒消息
+  let errMsg = `${
+    data && data['msg'] ? data['msg'] : CODE_MESSAGE[code] ? CODE_MESSAGE[code] : statusText
+  }`
+  if (code === 401) {
+    errMsg = '您的登录信息已过期,请重新登录...'
+  } else if (code == 500 && errMsg == '房间不存在') {
+    console.log('') //大屏直播页面没有直播时做了轮询,如果没有房间，会一直报异常，这里把异常弹窗去掉
+  } else {
+    // 是否显示高亮错误(与errorHandler钩子触发逻辑一致)
+    // $baseMessage(errMsg, 'error', 'vab-hey-message-error', false)
+    Message({
+      message: errMsg,
+      type: 'error',
+      duration: 5 * 1000
+    })
+  }
+  return Promise.reject(data)
+}
+
+/**
+ * @description axios初始化
+ */
+const instance = axios.create({
+  baseURL: '/dq_api',
+  timeout: 100000,
+  headers: {
+    'Content-Type': 'application/json;charset=UTF-8'
+  }
+})
+
+/**
+ * @description axios请求拦截器
+ */
+instance.interceptors.request.use(
+  (config) => {
+    // 规范写法 不可随意自定义
+    let urlParams = {}
+    if (config.params) {
+      urlParams = {
+        ...config.params
+      }
+    }
+
+    config.url = config.url + '?' + qs.stringify(urlParams)
+    if (
+      config.data &&
+      config.headers['Content-Type'] === 'application/x-www-form-urlencoded;charset=UTF-8'
+    )
+      config.data = qs.stringify(config.data)
+    return config
+  },
+  (error) => {
+    return Promise.reject(error)
+  }
+)
+
+/**
+ * @description axios响应拦截器
+ */
+instance.interceptors.response.use(
+  (response) => handleData(response),
+  (error) => {
+    const { response } = error
+    if (response === undefined) {
+      // Message({
+      // 	message: '连接后台接口失败，可能由以下原因造成：后端不支持跨域CORS、接口地址不存在、请求超时等，请联系管理员排查后端接口问题',
+      // 	type: 'error',
+      // 	duration: 5 * 1000,
+      // })
+      return {}
+    } else return handleData(response)
+  }
+)
+
+export default instance
diff --git a/src/api/sys.js b/src/api/sys.js
new file mode 100644
index 0000000..ad5d802
--- /dev/null
+++ b/src/api/sys.js
@@ -0,0 +1,21 @@
+// qrcode/service/qrcode/getQrcodeContent
+
+import request from './request'
+
+// 根据code获取二维码信息
+export function reqQrCodeInfo(data) {
+  return request({
+    url: `/qrcode/service/qrcode/getQrcodeContent/${data.code}`,
+    method: 'get',
+    data,
+  })
+}
+
+// 获取人员信息
+export function reqUserInfo(data) {
+  return request({
+    url: `/dq/goods/screen/getUserDetail`,
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/assets/images/bg-5.png b/src/assets/images/bg-5.png
new file mode 100644
index 0000000..e29de2b
Binary files /dev/null and b/src/assets/images/bg-5.png differ
diff --git a/src/assets/images/cover.png b/src/assets/images/cover.png
new file mode 100644
index 0000000..c8fee64
Binary files /dev/null and b/src/assets/images/cover.png differ
diff --git a/src/assets/images/group.png b/src/assets/images/group.png
new file mode 100644
index 0000000..f7f4c26
Binary files /dev/null and b/src/assets/images/group.png differ
diff --git a/src/assets/images/icon-1.png b/src/assets/images/icon-1.png
new file mode 100644
index 0000000..e96ab4b
Binary files /dev/null and b/src/assets/images/icon-1.png differ
diff --git a/src/assets/images/icon-2.png b/src/assets/images/icon-2.png
new file mode 100644
index 0000000..313f262
Binary files /dev/null and b/src/assets/images/icon-2.png differ
diff --git a/src/assets/images/icon-3.png b/src/assets/images/icon-3.png
new file mode 100644
index 0000000..5148632
Binary files /dev/null and b/src/assets/images/icon-3.png differ
diff --git a/src/assets/images/icon-4.png b/src/assets/images/icon-4.png
new file mode 100644
index 0000000..bf81b48
Binary files /dev/null and b/src/assets/images/icon-4.png differ
diff --git a/src/assets/images/icon-5.png b/src/assets/images/icon-5.png
new file mode 100644
index 0000000..a13a659
Binary files /dev/null and b/src/assets/images/icon-5.png differ
diff --git a/src/assets/images/icon-6.png b/src/assets/images/icon-6.png
new file mode 100644
index 0000000..03f010b
Binary files /dev/null and b/src/assets/images/icon-6.png differ
diff --git a/src/assets/images/icon-7.png b/src/assets/images/icon-7.png
new file mode 100644
index 0000000..9dbb5d5
Binary files /dev/null and b/src/assets/images/icon-7.png differ
diff --git a/src/assets/images/img-1.png b/src/assets/images/img-1.png
deleted file mode 100644
index 89dbf47..0000000
Binary files a/src/assets/images/img-1.png and /dev/null differ
diff --git a/src/assets/images/man.png b/src/assets/images/man.png
new file mode 100644
index 0000000..9cfe871
Binary files /dev/null and b/src/assets/images/man.png differ
diff --git a/src/assets/images/ticket-item-bg.png b/src/assets/images/ticket-item-bg.png
new file mode 100644
index 0000000..028df32
Binary files /dev/null and b/src/assets/images/ticket-item-bg.png differ
diff --git a/src/assets/images/ticket.png b/src/assets/images/ticket.png
new file mode 100644
index 0000000..1228993
Binary files /dev/null and b/src/assets/images/ticket.png differ
diff --git a/src/assets/images/woman.png b/src/assets/images/woman.png
new file mode 100644
index 0000000..558f6e3
Binary files /dev/null and b/src/assets/images/woman.png differ
diff --git a/src/components/InfiniteScroll/index.vue b/src/components/InfiniteScroll/index.vue
new file mode 100644
index 0000000..0b871c2
--- /dev/null
+++ b/src/components/InfiniteScroll/index.vue
@@ -0,0 +1,212 @@
+<template>
+  <div
+    ref="scrollBox"
+    :class="`infinite-scroll-component-box-${direction}`"
+    :style="{
+      '--speed-': `${speed}s`,
+      mask: `linear-gradient(${degList[direction]}, #000 70%, transparent)`
+    }"
+  >
+    <div class="scroll-content" ref="scrollContent">
+      <template v-if="Array.isArray(content)">
+        <div v-for="(item, index) in content" :key="'arrayFirst' + index" class="loop-item">
+          <slot :item="item" :index="index"></slot>
+        </div>
+        <template v-if="loop">
+          <div v-for="(item, index) in content" class="loop-item" :key="'arrayCopy' + index">
+            <slot :item="item" :index="index"></slot>
+          </div>
+        </template>
+      </template>
+      <template v-else>
+        <slot></slot>
+        <slot v-if="loop"></slot>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  const props = defineProps({
+    direction: {
+      type: String,
+      default: 'top',
+      validate: (value) => ['left', 'top', 'right', 'bottom'].findIndex(value) !== -1
+    },
+
+    content: {
+      type: [String, Array],
+      default: ''
+    },
+
+    mask: {
+      type: Boolean,
+      default: true
+    },
+
+    // 速率倍速，越大越快，默认值20
+    speedRate: {
+      type: Number,
+      default: 20
+    }
+  })
+
+  onMounted(() => {
+    init()
+  })
+
+  let degList = {
+    left: '90deg',
+    top: '180deg',
+    right: '270deg',
+    bottom: '0deg'
+  }
+  // 滚动速度
+  let speed = ref(0)
+  // 是否需要无限滚动
+  let loop = ref(false)
+  // 容器ref
+  let scrollBox = ref()
+
+  watch(
+    () => props.content,
+    () => {
+      loop.value = false
+      init()
+    },
+    { deep: true }
+  )
+
+  // 初始化速度，以及是否需要无限滚动
+  const init = async () => {
+    await nextTick()
+    if (props.direction === 'left' || props.direction === 'right') {
+      // 可视区域的宽度
+      const boxWidth = scrollBox.value.offsetWidth
+      // 滚动内容的宽度
+      const itemWidth = scrollBox.value.getElementsByClassName('scroll-content')[0].offsetWidth
+      if (itemWidth >= boxWidth) {
+        loop.value = true
+        speed.value = itemWidth / props.speedRate
+      } else {
+        speed.value = 0
+        scrollBox.value.getElementsByClassName('scroll-content')[0].style.transform =
+          'translateX(0)'
+        loop.value = false
+      }
+    } else {
+      const boxHeight = scrollBox.value.offsetHeight
+      const itemHeight = scrollBox.value.getElementsByClassName('scroll-content')[0].offsetHeight
+      if (itemHeight >= boxHeight) {
+        loop.value = true
+        speed.value = itemHeight / props.speedRate
+      } else {
+        speed.value = 0
+        scrollBox.value.getElementsByClassName('scroll-content')[0].style.transform =
+          'translateY(0)'
+        loop.value = false
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .infinite-scroll-component-box-left,
+  .infinite-scroll-component-box-right {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    position: relative;
+
+    .scroll-content {
+      position: absolute;
+      left: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &:hover {
+        animation-play-state: paused;
+      }
+    }
+  }
+  .infinite-scroll-component-box-top,
+  .infinite-scroll-component-box-bottom {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    position: relative;
+
+    .scroll-content {
+      width: 100%;
+      position: absolute;
+      left: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &:hover {
+        animation-play-state: paused;
+      }
+
+      .loop-item {
+        width: 100%;
+      }
+    }
+  }
+  .infinite-scroll-component-box-left .scroll-content {
+    flex-direction: row;
+    animation: var(--speed-) move-left linear infinite;
+
+    @keyframes move-left {
+      0% {
+        transform: translateX(0);
+      }
+      100% {
+        transform: translateX(-50%);
+      }
+    }
+  }
+
+  .infinite-scroll-component-box-right .scroll-content {
+    flex-direction: row-reverse;
+    animation: var(--speed-) move-right linear infinite;
+
+    @keyframes move-right {
+      0% {
+        transform: translateX(-50%);
+      }
+      100% {
+        transform: translateX(0);
+      }
+    }
+  }
+
+  .infinite-scroll-component-box-top .scroll-content {
+    flex-direction: column;
+    animation: var(--speed-) move-top linear infinite;
+
+    @keyframes move-top {
+      0% {
+        transform: translateY(0);
+      }
+      100% {
+        transform: translateY(-50%);
+      }
+    }
+  }
+
+  .infinite-scroll-component-box-bottom .scroll-content {
+    flex-direction: column-reverse;
+    animation: var(--speed-) move-bottom linear infinite;
+
+    @keyframes move-bottom {
+      0% {
+        transform: translateY(-50%);
+      }
+      100% {
+        transform: translateY(0);
+      }
+    }
+  }
+</style>
diff --git a/src/components/Line/index.vue b/src/components/Line/index.vue
index 00b7ab9..8f6731d 100644
--- a/src/components/Line/index.vue
+++ b/src/components/Line/index.vue
@@ -11,7 +11,7 @@
   import * as echarts from 'echarts'
   import styleUtil from '@/utils/styleUtil'
   import { fitChartSize } from '@/utils/dataUtil'
-
+  import { guid } from '@/utils/util'
   const props = defineProps({
     width: {
       type: Number,
@@ -20,19 +20,29 @@
     height: {
       type: Number,
       default: () => 0
-    },
-    id: {
-      type: String,
-      default: () => ''
     }
   })
 
+  let id = ref(guid())
   let lineChart = null
+  let timer = null
+  let currentIndex = -1
   let defaultCofig = {
     tooltip: {
       trigger: 'axis',
-      axisPointer: {
-        type: 'cross'
+      backgroundColor: 'transparent',
+      borderWidth: 0,
+      formatter: (params) => {
+        let str = `<div style="
+              background: #07356B;
+              border: 1px solid #0096FF;
+              color: #fff;
+              font-weight: 600;
+              font-size: ${fitChartSize(16)}px;
+              border-radius: ${fitChartSize(4)}px;
+              padding: ${fitChartSize(4)}px ${fitChartSize(12)}px;">
+              ${params[0].value}</div>`
+        return str
       }
     },
     grid: {
@@ -54,7 +64,7 @@
       },
       axisLine: {
         lineStyle: {
-          color: '#0096FF'
+          color: 'rgba(5, 72, 134, 1)'
         }
       },
       axisLabel: {
@@ -101,11 +111,9 @@
     ]
   }
 
-  onMounted(() => {
-    init()
-  })
   const init = () => {
-    lineChart = echarts.init(document.getElementById(props.id))
+    const dom = document.getElementById(id.value)
+    lineChart = echarts.init(dom)
     defaultCofig.xAxis.data = [
       '10:00',
       '10:05',
@@ -120,8 +128,25 @@
     lineChart.setOption({
       ...defaultCofig
     })
+    // // 开启轮播
+    // startTooltipLoop()
+
+    // // 鼠标悬浮，停止轮播
+    // dom.addEventListener('mousemove', () => {
+    //   console.log('mouse move')
+    //   closeSwitchTooltip()
+    // })
+
+    // // 鼠标离开，继续轮播
+    // dom.addEventListener('mousedown', () => {
+    //   console.log('mouse down')
+    //   startTooltipLoop()
+    // })
+
+    // 监听窗口大小变化
     window.addEventListener('resize', resize)
   }
+
   const resize = () => {
     if (lineChart) {
       lineChart.dispose()
@@ -129,5 +154,39 @@
       init()
     }
   }
+
+  // 切换tooltip
+  const switchTooltip = () => {
+    // 取消之前高亮的图形
+    lineChart.dispatchAction({
+      type: 'downplay',
+      seriesIndex: 0,
+      dataIndex: currentIndex
+    })
+    currentIndex = (currentIndex + 1) % 8
+    // 高亮当前图形
+    lineChart.dispatchAction({
+      type: 'highlight',
+      seriesIndex: 0,
+      dataIndex: currentIndex
+    })
+    // 显示tooltip
+    lineChart.dispatchAction({
+      type: 'showTip',
+      seriesIndex: 0,
+      dataIndex: currentIndex
+    })
+  }
+  const startTooltipLoop = () => {
+    timer = setInterval(() => switchTooltip(), 3000)
+  }
+  const closeSwitchTooltip = () => {
+    clearInterval(timer)
+    timer = undefined
+  }
+
+  onMounted(() => {
+    init()
+  })
 </script>
 <style lang="scss"></style>
diff --git a/src/components/Map/index.vue b/src/components/Map/index.vue
index b9510ab..cece93b 100644
--- a/src/components/Map/index.vue
+++ b/src/components/Map/index.vue
@@ -3,17 +3,65 @@
 </template>
 
 <script setup>
-  import { onMounted } from 'vue'
+  import axios from 'axios'
+  const fetchData = async () => {
+    try {
+      const res = await axios.get(
+        'https://jiaotong.baidu.com/openapi/v2/event/alarmlist?nodeId=7162&roadType=1,2,3,4,5&eventSource=1,2,3&ak=hPEEq9eAtL3t1SXL8hqNYQkGmWT1oOWh&returnType=1'
+      )
+      console.log(res, '数据')
+    } catch (error) {
+      console.error(error)
+    }
+  }
   onMounted(() => {
+    // fetchData()
     var map = new BMapGL.Map('container')
-    map.centerAndZoom(new BMapGL.Point(106.506299, 29.613929), 18)
+    map.centerAndZoom(new BMapGL.Point(109.643452, 31.028006), 15)
     map.enableScrollWheelZoom(true)
+    map.setMapType(BMAP_SATELLITE_MAP)
+
+    // 绘制线
+    var polyline = new BMapGL.Polyline(
+      [
+        new BMapGL.Point(109.65053, 31.034752),
+        new BMapGL.Point(109.647332, 31.033104),
+        new BMapGL.Point(109.646883, 31.031797),
+        new BMapGL.Point(109.640254, 31.021136)
+      ],
+      {
+        strokeStyle: 'solid',
+        strokeColor: 'red ',
+        // strokeTexture: {
+        //   url: 'https://mapopen-pub-jsapigl.bj.bcebos.com/svgmodel/Icon_road_blue_arrow.png',
+        //   width: 16,
+        //   height: 64
+        // },
+        strokeWeight: 4,
+        strokeOpacity: 0.8
+      }
+    )
+    map.addOverlay(polyline)
   })
 </script>
 
 <style scoped lang="scss">
+  :deep(.BMap_cpyCtrl) {
+    display: none;
+  }
+  :deep(.anchorBL) {
+    display: none;
+  }
+  // ::v-deep {
+  //   .BMap_cpyCtrl {
+  //     display: none;
+  //   }
+  //   .anchorBL {
+  //     display: none;
+  //   }
+  // }
   .map {
-    width: vw(3040);
-    height: vh(1080);
+    width: 100%;
+    height: vh(700);
   }
 </style>
diff --git a/src/components/Title1/index.vue b/src/components/Title1/index.vue
new file mode 100644
index 0000000..607123e
--- /dev/null
+++ b/src/components/Title1/index.vue
@@ -0,0 +1,42 @@
+<template>
+  <div class="title-1">
+    <div class="title">
+      <span> {{ title }} </span>
+    </div>
+    <slot name="right" />
+  </div>
+</template>
+
+<script setup>
+  let props = defineProps({
+    title: {
+      type: String,
+      default: ''
+    }
+  })
+</script>
+
+<style scoped lang="scss">
+  .title-1 {
+    position: relative;
+    .title {
+      margin: vh(10) auto;
+      width: vw(468);
+      height: vh(32);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-image: url('@/assets/images/title-4.png');
+      background-size: 100% 100%;
+      & > span {
+        font-weight: 800;
+        font-size: vw(16);
+        background-image: linear-gradient(to bottom, #ffffff 0%, #75c1ff 100%);
+        -webkit-background-clip: text;
+        background-clip: text;
+        -webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */
+        color: transparent; /* 兼容其他浏览器 */
+      }
+    }
+  }
+</style>
diff --git a/src/components/Title2/index.vue b/src/components/Title2/index.vue
new file mode 100644
index 0000000..c7a6b0c
--- /dev/null
+++ b/src/components/Title2/index.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="title-2">
+    <span>{{ title }}</span>
+  </div>
+</template>
+
+<script setup>
+  let props = defineProps({
+    title: {
+      type: String,
+      default: ''
+    }
+  })
+</script>
+
+<style scoped lang="scss">
+  .title-2 {
+    width: vw(250);
+    height: vh(28);
+    display: flex;
+    align-items: center;
+    background-image: url('@/assets/images/title-5.png');
+    background-size: 100% 100%;
+    & > span {
+      padding-left: vw(22);
+      font-weight: bold;
+      font-size: vw(15);
+      background-image: linear-gradient(to bottom, #ffffff 0%, #75c1ff 100%);
+      -webkit-background-clip: text;
+      background-clip: text;
+      -webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */
+      color: transparent; /* 兼容其他浏览器 */
+    }
+  }
+</style>
diff --git a/src/components/Title3/index.vue b/src/components/Title3/index.vue
new file mode 100644
index 0000000..51a5d34
--- /dev/null
+++ b/src/components/Title3/index.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="title-3">
+    <span>{{ title }}</span>
+  </div>
+</template>
+
+<script setup>
+  let props = defineProps({
+    title: {
+      type: String,
+      default: ''
+    }
+  })
+</script>
+
+<style scoped lang="scss">
+  .title-3 {
+    position: relative;
+    width: 100%;
+    height: vh(12);
+    margin-top: vh(20);
+    background-image: url('@/assets/images/title-6.png');
+    background-size: 100% 100%;
+
+    & > span {
+      position: absolute;
+      bottom: vh(4);
+      left: vw(20);
+      font-size: vw(15);
+      font-weight: bold;
+      background-image: linear-gradient(to bottom, #ffffff 0%, #0096ff 100%);
+      -webkit-background-clip: text;
+      background-clip: text;
+      -webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */
+      color: transparent; /* 兼容其他浏览器 */
+    }
+  }
+</style>
diff --git a/src/styles/common.scss b/src/styles/common.scss
index f72ca7c..3459feb 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -1,11 +1,33 @@
 .flex {
   display: flex;
 }
-
+.flex-1 {
+  flex: 1;
+}
+.align-center {
+  align-items: center;
+}
 .align-end {
   align-items: flex-end;
 }
-
+.justify-between {
+  justify-content: space-between;
+}
+.justify-evenly {
+  justify-content: space-evenly;
+}
+.mb-6 {
+  margin-bottom: vh(6);
+}
+.pt-10 {
+  padding-top: vh(10);
+}
+.pb-10 {
+  padding-bottom: vh(10);
+}
+.mb-10 {
+  margin-bottom: vh(10);
+}
 .pt-20 {
   padding-top: vh(20);
 }
diff --git a/src/utils/util.js b/src/utils/util.js
index 5b7326d..97487b3 100644
--- a/src/utils/util.js
+++ b/src/utils/util.js
@@ -55,3 +55,11 @@ export function throttle(func, wait = 500, immediate = true) {
     }, wait)
   }
 }
+
+export function guid() {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+    var r = (Math.random() * 16) | 0,
+      v = c == 'x' ? r : (r & 0x3) | 0x8
+    return v.toString(16)
+  })
+}
diff --git a/src/views/home/components/box-1.vue b/src/views/home/components/box-1.vue
index 85f37a0..5b3f445 100644
--- a/src/views/home/components/box-1.vue
+++ b/src/views/home/components/box-1.vue
@@ -9,7 +9,7 @@
         :key="index"
       >
         <p class="item-title">三峡之巅-最新异常名称</p>
-        <img class="item-img" src="@/assets/images/img-1.png" alt="" />
+        <img class="item-img" src="@/assets/images/cover.png" />
       </li>
     </ul>
   </div>
@@ -18,8 +18,6 @@
 <script setup>
   import item1 from '@/assets/images/item-1.png'
   import item2 from '@/assets/images/item-2.png'
-
-  console.log(item1, 'item1')
 </script>
 
 <style lang="scss" scoped>
@@ -88,6 +86,7 @@
         width: 100%;
         height: vh(164);
         display: block;
+        object-fit: cover;
       }
     }
   }
diff --git a/src/views/home/components/box-2.vue b/src/views/home/components/box-2.vue
index ec5f7a4..a85412e 100644
--- a/src/views/home/components/box-2.vue
+++ b/src/views/home/components/box-2.vue
@@ -1,32 +1,33 @@
 <template>
   <div class="box-2">
-    <div class="header">
-      <div class="title"> 景区信息 </div>
-      <span class="more" />
-    </div>
+    <Title1 title="景区信息">
+      <template #right>
+        <span class="more" />
+      </template>
+    </Title1>
     <div class="flex pt-20">
       <div class="item core">
-        <span class="title-1">全县景区数</span>
+        <span class="label">全县景区数</span>
         <div class="flex align-end"> <countup endVal="895" /><span class="unit">个</span></div>
       </div>
       <div class="item queue">
-        <span class="title-1">核心景区数</span>
+        <span class="label">核心景区数</span>
         <div class="flex align-end"> <countup endVal="895" /><span class="unit">个</span></div>
       </div>
       <div class="item congestion">
-        <span class="title-1">低感景区总数</span>
+        <span class="label">低感景区总数</span>
         <div class="flex align-end"> <countup endVal="895" /><span class="unit">个</span></div>
       </div>
     </div>
     <div class="flex pt-20">
       <div class="box">
-        <div class="title-2"><span>景区排队人数</span></div>
+        <Title2 title="景区排队人数" />
         <div class="statistic">
           <div class="statistic-item">
             <span class="statistic-title">三峡之巅</span>
             <span class="statistic-value">
               <span class="prefix">排队</span>
-              <span class="count">100</span>
+              <span class="value">100</span>
               <span class="suffix">人</span>
             </span>
           </div>
@@ -43,13 +44,13 @@
             <span class="statistic-value">通畅</span>
           </div>
         </div>
-        <div class="title-3"><span>景区排队人数</span></div>
+        <Title3 title="景区排队人数" />
         <div class="pt-20">
-          <Line :width="370" :height="180" id="line" />
+          <Line :width="370" :height="140" />
         </div>
       </div>
       <div class="box">
-        <div class="title-2"><span>景区承载量</span></div>
+        <Title2 title="景区承载量" />
         <div class="statistic">
           <div class="statistic-item">
             <gauge id="gauge1" />
@@ -68,24 +69,82 @@
             <span class="statistic-title">三峡之巅</span>
           </div>
         </div>
-        <div class="title-3"><span>今日景区承载量</span></div>
+        <Title3 title="今日景区承载量" />
         <div class="pt-20">
-          <Line :width="370" :height="180" id="line1" />
+          <Line :width="370" :height="140" />
         </div>
       </div>
     </div>
+
+    <div class="ticket-box">
+      <Title2 title="景区购票数" />
+      <div class="ticket-wrap">
+        <img src="@/assets/images/ticket.png" alt="" />
+        <div> <span class="label">当日购票量：</span><countup endVal="768578" /> </div>
+        <div> <span class="label">未来3天购票量：</span><countup endVal="768578" /> </div>
+        <div> <span class="label">3天后购票量：</span><countup endVal="768578" /> </div>
+      </div>
+    </div>
+
+    <Title1 title="游客画像" />
+
+    <div class="flex">
+      <div class="box-1">
+        <Title3 title="年龄/性别占比" />
+        <pie id="pie" />
+        <div class="count">总人数：<countup endVal="124563" /></div>
+        <div class="cell pt-20">
+          <img class="icon" src="@/assets/images/man.png" />
+          <div class="bg">
+            <span class="text">男性</span>
+            <div class="progress">
+              <el-progress
+                :percentage="50"
+                :show-text="false"
+                color="linear-gradient( to right, #074D90 0%, #55E0FF 100%)"
+              />
+            </div>
+            <span class="man">50%</span>
+          </div>
+        </div>
+        <div class="cell pt-20">
+          <img class="icon" src="@/assets/images/woman.png" />
+          <div class="bg">
+            <span class="text">女性</span>
+            <div class="progress">
+              <el-progress
+                :percentage="50"
+                :show-text="false"
+                color="linear-gradient( to right,
+              #0A4482 0%, #FF7021 100%)"
+              />
+            </div>
+            <span class="woman">50%</span>
+          </div>
+        </div>
+      </div>
+      <div class="box-1">
+        <Title3 title="客源地分析TOP5" />
+        <top />
+      </div>
+      <div class="box-1">
+        <Title3 title="购票来源" />
+        <div class="count">总人数：<countup endVal="124563" /></div>
+        <ticket />
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
   import countup from 'vue-countup-v3'
+  import pie from './pie.vue'
+  import top from './top.vue'
   import gauge from './gauge.vue'
-  import Line from '@/components/Line/index.vue'
-
-  onMounted(() => {})
+  import ticket from './ticket.vue'
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
   .box-2 {
     margin-top: vh(120);
     width: vw(800);
@@ -94,33 +153,16 @@
     box-sizing: border-box;
     background-image: url('@/assets/images/bg-2.png');
     background-size: 100% 100%;
-    .header {
-      position: relative;
-      .title {
-        margin: vh(10) auto;
-        width: vw(468);
-        height: vh(32);
-        font-weight: 800;
-        font-size: vw(16);
-        color: #fff;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background-image: url('@/assets/images/title-4.png');
-        background-size: 100% 100%;
-      }
-      .more {
-        position: absolute;
-        top: vh(0);
-        right: vw(20);
-        cursor: pointer;
-        width: vw(60);
-        height: vh(24);
-        background-image: url('@/assets/images/more.png');
-        background-size: 100% 100%;
-      }
+    .more {
+      position: absolute;
+      top: vh(0);
+      right: vw(20);
+      cursor: pointer;
+      width: vw(60);
+      height: vh(24);
+      background-image: url('@/assets/images/more.png');
+      background-size: 100% 100%;
     }
-
     .item {
       position: relative;
       flex: 1;
@@ -130,18 +172,18 @@
       display: flex;
       align-items: center;
       background-size: 100% 100%;
-    }
-    .title-1 {
-      position: absolute;
-      top: vh(-10);
-      font-weight: 400;
-      font-size: vw(14);
-      color: rgba(255, 255, 255, 0.7);
-    }
-    .countup-wrap {
-      color: #02f9fa;
-      font-size: vw(28);
-      font-weight: bold;
+      .label {
+        position: absolute;
+        top: vh(-10);
+        font-weight: 400;
+        font-size: vw(14);
+        color: rgba(255, 255, 255, 0.7);
+      }
+      .countup-wrap {
+        color: #02f9fa;
+        font-size: vw(28);
+        font-weight: bold;
+      }
     }
     .unit {
       color: #02f9fa;
@@ -159,30 +201,12 @@
     }
     .box {
       width: vw(384);
-      height: vh(360);
+      height: vh(320);
       background-image: url('@/assets/images/bg-3.png');
       background-size: 100% 100%;
       &:nth-child(1) {
         margin-right: vw(10);
       }
-      .title-2 {
-        width: vw(253);
-        height: vh(28);
-        display: flex;
-        align-items: center;
-        background-image: url('@/assets/images/title-5.png');
-        background-size: 100% 100%;
-        & > span {
-          padding-left: vw(22);
-          font-weight: bold;
-          font-size: vw(15);
-          background-image: linear-gradient(to bottom, #ffffff 0%, #75c1ff 100%);
-          -webkit-background-clip: text;
-          background-clip: text;
-          -webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */
-          color: transparent; /* 兼容其他浏览器 */
-        }
-      }
       .statistic {
         display: flex;
         margin-top: vh(12);
@@ -207,10 +231,10 @@
           font-size: vw(24);
           color: #02f9fa;
         }
-        .count {
+        .value {
           font-weight: bold;
           font-size: vw(28);
-          color: #ff4400 !important;
+          color: #ff4400;
         }
         .prefix,
         .suffix {
@@ -218,21 +242,88 @@
           font-size: vw(12);
         }
       }
-      .title-3 {
-        position: relative;
-        width: vw(344);
-        height: vh(12);
-        margin-top: vh(20);
-        background-image: url('@/assets/images/title-6.png');
+    }
+    .box-1 {
+      width: vw(253);
+      height: vh(270);
+      background-image: url('@/assets/images/bg-3.png');
+      background-size: 100% 100%;
+      &:nth-child(1) {
+        margin-right: vw(10);
+      }
+      &:nth-child(2) {
+        margin-right: vw(10);
+      }
+    }
+    .count {
+      margin: vw(20) vw(20) 0 vw(20);
+      height: vh(24);
+      font-weight: bold;
+      font-size: vw(14);
+      color: #ffffff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      border-left: vw(4) solid #37d8fc;
+      border-right: vw(4) solid #37d8fc;
+      background: rgba(0, 150, 255, 0.19);
+    }
+    .cell {
+      margin-left: vw(10);
+      display: flex;
+      align-items: center;
+      .bg {
+        display: flex;
+        align-items: center;
+        height: vh(20);
+        padding-right: vw(10);
+        background: linear-gradient(to right, rgba(0, 150, 255, 0), rgba(0, 150, 255, 0.17) 100%);
+      }
+      .icon {
+        width: vw(26);
+        height: vh(28);
+        margin-right: vw(4);
+      }
+      .text {
+        font-weight: 400;
+        font-size: vw(14);
+        color: rgba(255, 255, 255, 0.9);
+      }
+      .progress {
+        width: vw(120);
+        margin-left: vw(4);
+      }
+      .man {
+        font-weight: bold;
+        font-size: vw(14);
+        color: #02f9fa;
+        margin-left: vw(10);
+      }
+      .woman {
+        font-weight: bold;
+        font-size: vw(14);
+        color: #f15a25;
+        margin-left: vw(10);
+      }
+    }
+    .ticket-box {
+      margin-top: vh(20);
+      width: 100%;
+      height: vh(106);
+      background-color: radial-gradient(to right, #0a4190 0%, rgba(0, 77, 136, 0.6) 100%);
+      .title {
+        width: vw(253);
+        height: vh(28);
+        display: flex;
+        align-items: center;
+        background-image: url('@/assets/images/title-5.png');
         background-size: 100% 100%;
-
         & > span {
-          position: absolute;
-          bottom: vh(4);
-          left: vw(20);
-          font-size: vw(15);
+          padding-left: vw(22);
           font-weight: bold;
-          background-image: linear-gradient(to bottom, #ffffff 0%, #0096ff 100%);
+          font-size: vw(15);
+          background-image: linear-gradient(to bottom, #ffffff 0%, #75c1ff 100%);
           -webkit-background-clip: text;
           background-clip: text;
           -webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */
@@ -240,5 +331,33 @@
         }
       }
     }
+    .ticket-wrap {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      & > img {
+        width: vw(74);
+        height: vh(74);
+      }
+      & > div {
+        flex: 1;
+        height: vh(58);
+        display: flex;
+        align-items: center;
+        background-image: url('@/assets/images/ticket-item-bg.png');
+        background-size: 100% 100%;
+      }
+      .label {
+        padding-left: vw(10);
+        font-weight: 400;
+        font-size: vw(14);
+        color: rgba(255, 255, 255, 0.9);
+      }
+      .countup-wrap {
+        color: #02f9fa;
+        font-size: vw(28);
+        font-weight: bold;
+      }
+    }
   }
 </style>
diff --git a/src/views/home/components/box-3.vue b/src/views/home/components/box-3.vue
index e69de29..d6f97e3 100644
--- a/src/views/home/components/box-3.vue
+++ b/src/views/home/components/box-3.vue
@@ -0,0 +1,245 @@
+<template>
+  <div class="box-3">
+    <div class="header">
+      <div class="flex">
+        <div class="left">
+          <div class="item">
+            <div class="label">今年总游客数</div>
+            <countup v-for="item in count" :endVal="item" />
+          </div>
+          <div class="item">
+            <div class="label">全县景区总游客人数</div>
+            <countup v-for="item in count" :endVal="item" />
+          </div>
+          <div class="item">
+            <div class="label">总在园人数</div>
+            <countup v-for="item in count" :endVal="item" />
+          </div>
+        </div>
+        <div class="right">
+          <div class="item">
+            <div class="label">安全度</div>
+            <div class="value">安全</div>
+          </div>
+          <div class="item">
+            <div class="label">舒适度</div>
+            <div class="value">舒适</div>
+          </div>
+          <div class="item">
+            <div class="label">接待情况</div>
+            <div class="value">排队</div>
+          </div>
+          <div class="item">
+            <div class="label">交通拥挤度</div>
+            <div class="value">舒适</div>
+          </div>
+          <div class="item">
+            <div class="label">停车场负荷度</div>
+            <div class="value">超负荷</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <Map />
+    <div class="footer">
+      <div class="left">
+        <div>
+          <div class="flex">
+            <div class="item">
+              <p class="label">今日工单总条数</p>
+              <countup :endVal="1234" />
+            </div>
+            <div class="item">
+              <p class="label">工单完成数</p>
+              <countup :endVal="1234" />
+            </div>
+          </div>
+          <p>工单完成数</p>
+        </div>
+        <div>
+          <div class="flex">
+            <div class="item">
+              <p class="label">紧急工单数</p>
+              <countup :endVal="1234" />
+            </div>
+            <div class="item">
+              <p class="label">紧急工单完成数</p>
+              <countup :endVal="1234" />
+            </div>
+          </div>
+          <p>工单完成数</p>
+        </div>
+      </div>
+      <div class="right">
+        <div class="item">
+          <span class="tag tag--success">普通</span>
+          <p class="content">
+            工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
+            工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
+          </p>
+        </div>
+        <div class="item">
+          <span class="tag tag--error">普通</span>
+          <p class="content">
+            工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
+            工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
+          </p>
+        </div>
+        <div class="item">
+          <span class="tag tag--primary">普通</span>
+          <p class="content">
+            工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
+            工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import countup from 'vue-countup-v3'
+  import Map from '@/components/Map/index.vue'
+
+  let count = ref('6945959')
+</script>
+
+<style lang="scss" scoped>
+  .box-3 {
+    width: vw(1614);
+    height: vh(950);
+    margin-top: vh(120);
+
+    .header {
+      width: vw(1614);
+      height: vh(128);
+      padding: 0 vw(90);
+      box-sizing: border-box;
+      background-image: url('@/assets/images/group.png');
+      background-size: 100% 100%;
+      .left {
+        display: flex;
+        width: vw(950);
+        margin-top: vh(20);
+      }
+      .right {
+        flex: 1;
+        display: flex;
+        margin-top: vh(20);
+      }
+      .item {
+        flex: 1;
+        .label {
+          margin-bottom: vh(10);
+          font-weight: 400;
+          font-size: vw(16);
+          color: rgba(255, 255, 255, 0.9);
+        }
+        .value {
+          font-weight: bold;
+          font-size: vw(28);
+          color: #02f9fa;
+          line-height: vh(33);
+        }
+      }
+      .countup-wrap {
+        display: inline-block;
+        width: vw(40);
+        height: vh(40);
+        margin-right: vw(4);
+        border-radius: vw(4);
+        color: #ffffff;
+        font-size: vw(28);
+        font-weight: bold;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        background: linear-gradient(180deg, #00b7ff 0%, #0033ff 100%);
+      }
+    }
+    .footer {
+      display: flex;
+      width: 100%;
+      height: vh(120);
+      background-image: url('@/assets/images/bg-3.png');
+      background-size: 100% 100%;
+      .left {
+        flex: 1;
+        display: flex;
+        & > div {
+          flex: 1;
+          height: vh(110);
+          background-image: url('@/assets/images/bg-3.png');
+          background-size: 100% 100%;
+          .item {
+            padding: vh(10) vw(24);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+          }
+          .label {
+            font-weight: 400;
+            font-size: vw(14);
+            margin-bottom: vh(10);
+            color: rgba(255, 255, 255, 0.9);
+          }
+          .countup-wrap {
+            color: #02f9fa;
+            font-size: vw(28);
+            font-weight: bold;
+          }
+        }
+      }
+      .right {
+        padding: vh(10) vw(24);
+        .item {
+          display: flex;
+          margin-bottom: vh(12);
+          &:nth-last-child(1) {
+            margin-bottom: 0;
+          }
+          .tag {
+            padding: 0 vw(16);
+            font-weight: bold;
+            font-size: vw(14);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: vw(2);
+            &--success {
+              color: #02f9fa;
+              border: 1px solid #02f9fa;
+              box-shadow: inset 0 0 vw(8) 0 #0be1ab;
+            }
+            &--error {
+              color: #ee2c2c;
+              border: 1px solid #ee2c2c;
+              box-shadow: inset 0 0 vw(8) 0 #ee2c2c;
+            }
+            &--primary {
+              color: #00aaff;
+              border: 1px solid #00aaff;
+              box-shadow: inset 0 0 vw(8) 0 #00aaff;
+            }
+          }
+          .content {
+            margin-left: vw(4);
+            padding: 0 vw(10);
+            width: vw(900);
+            height: vh(24);
+            line-height: vh(24);
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            font-weight: 400;
+            font-size: vw(14);
+            color: #ffffff;
+            border-radius: vw(2);
+            background: rgba(0, 150, 255, 0.28);
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/views/home/components/box-4.vue b/src/views/home/components/box-4.vue
index 912472d..e530809 100644
--- a/src/views/home/components/box-4.vue
+++ b/src/views/home/components/box-4.vue
@@ -1,329 +1,334 @@
 <template>
-	<div class="box-4-content">
-		<div class="content-1 content">
-			<!-- 1 -->
-			<div class="title">
-				游客画像
-			</div>
-			<!-- 2 -->
-			<div class="all-man">
-				
-			</div>
-			<ul class="ul-1">
-				<li class="li ">
-					<div class="li-title">
-						<span>年龄性别占比</span>
-					</div>
-					<div class="chart-1">
-						<v-chart class="chart" :option="option1" autoresize />
-						<span class="sky-1"></span>
-					</div>
-					<div class="li-man">总人数：123456</div>
-				</li>
-				<li class="li">
-					<div class="li-title">
-						<span>客源分析TOP5</span>
-					</div>
-					<div class="press-box" v-for="item in 5" :key="i">
-						<div class="press-title">
-							<span>河北</span>
-							<span>55%</span>
-						</div>
-						
-						<div class="bg-box">
-							<div class="bg-width"></div>
-						</div>
-					</div>
-				</li>
-				<li class="li">
-					<div class="li-title">
-						<span>购票来源</span>
-					</div>
-					<div class="round-press">
-						<div class="round-1">
-							<div class="round-width"></div>
-						</div>
-					</div>
-					<v-chart class="chart" :option="option2" autoresize />
-				</li>
-			</ul>
-		</div>
-		<div class="content-2 content">
-			<!-- 1 -->
-			<div class="title">
-				停车信息
-			</div>
-			
-			<ul class="ul-1">
-				<li class="li">
-					<div class="li-title">
-						<span>年龄性别占比</span>
-					</div>
-					<v-chart class="chart" :option="option1" autoresize />
-					<div class="li-man">总人数：123456</div>
-				</li>
-				<li class="li">
-					<div class="li-title">
-						<span>客源分析TOP5</span>
-					</div>
-					<div class="press-box" v-for="item in 5" :key="i">
-						<div class="press-title">
-							<span>河北</span>
-							<span>55%</span>
-						</div>
-						
-						<div class="bg-box">
-							<div class="bg-width"></div>
-						</div>
-					</div>
-				</li>
-				<li class="li">
-					<div class="li-title">
-						<span>购票来源</span>
-					</div>
-					<div class="round-press">
-						<div class="round-1">
-							<div class="round-width"></div>
-						</div>
-					</div>
-					<v-chart class="chart" :option="option2" autoresize />
-				</li>
-			</ul>
-		</div>
-	</div>
+  <div class="box-4">
+    <!-- <Title1 title="交通信息" />
+    <div class="flex justify-evenly pt-10">
+      <div v-for="item in list" class="cell">
+        <img class="icon" :src="item.icon" alt="" width="64" height="64" />
+        <div>
+          <countup :end-val="item.value" />
+          <div class="label">{{ item.label }}</div>
+        </div>
+      </div>
+    </div>
+    <div class="flex">
+      <div class="box">
+        <div class="pt-10">
+          <Title3 title="拥堵路段总数" />
+          <div class="pt-20">
+            <Line :width="250" :height="170" />
+          </div>
+        </div>
+      </div>
+      <div class="box">
+        <div class="pt-10">
+          <Title3 title="拥堵路段总数" />
+          <Line :width="250" :height="120" />
+        </div>
+      </div>
+      <div class="box">
+        <div class="pt-10">
+          <Title3 title="拥堵路段总数" />
+          <jam :width="250" :height="200" />
+        </div>
+      </div>
+    </div>
+    <Title1 title="停车信息" />
+    <div class="stop-box">
+      <div>
+        <img class="icon" src="@/assets/images/icon-5.png" alt="" />
+        <div>
+          <div class="label">车库总数</div>
+          <countup class="value" :end-val="500" />
+        </div>
+        <div>
+          <div class="label">车库总数</div>
+          <countup class="value" :end-val="500" />
+        </div>
+        <div>
+          <div class="label">已使用车位数</div>
+          <countup class="value" :end-val="500" />
+        </div>
+      </div>
+      <div>
+        <div>
+          <div class="label">三峡之巅</div>
+          <div class="value error">已满</div>
+        </div>
+        <div>
+          <div class="label">白帝城</div>
+          <div class="value error">已满</div>
+        </div>
+        <div>
+          <div class="label">天坑地缝</div>
+          <div class="value success">空余</div>
+        </div>
+        <div>
+          <div class="label">永安宫</div>
+          <div class="value success">空余</div>
+        </div>
+      </div>
+    </div>
+    <div class="flex pt-10">
+      <div class="box-1">
+        <div class="pt-10">
+          <Title3 title="拥堵路段总数" />
+          <div class="pt-20">
+            <Line :width="250" :height="120" />
+          </div>
+        </div>
+      </div>
+      <div class="box-1">
+        <div class="pt-10">
+          <Title3 title="拥堵路段总数" />
+          <traffic-flow />
+        </div>
+      </div>
+      <div class="box-1">
+        <div class="pt-10">
+          <Title3 title="景区停车场空位" />
+          <vacancy />
+        </div>
+      </div>
+    </div>
+    <div class="flex">
+      <div class="flex-1">
+        <Title1 title="车船信息" class="title1" />
+      </div>
+      <div class="flex-1">
+        <Title1 title="酒店信息" class="title1" />
+      </div>
+    </div> -->
+    <div class="flex">
+      <div class="car-ship">
+        <div class="mb-6">
+          <div class="car">
+            <div class="label">车总数</div>
+            <div class="flex align-center">
+              <countup class="value" :end-val="130" /> <span class="unit">辆</span>
+            </div>
+          </div>
+          <div class="table">
+            <div class="header">
+              <div>景区</div>
+              <div>调度</div>
+              <div>空余</div>
+            </div>
+            <div class="cell">
+              <div class="label">车牌号</div>
+              <div>车长</div>
+              <div>车速</div>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div class="ship">
+            <div class="label">车总数</div>
+            <div class="flex align-center">
+              <countup class="value" :end-val="130" /> <span class="unit">辆</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="hotel">
+        <div> 3 </div>
+        <div> 4 </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>
-import { use } from 'echarts/core';
-import { CanvasRenderer } from 'echarts/renderers';
-import { GaugeChart } from 'echarts/charts';
-import { PieChart } from 'echarts/charts';
-import {
-  TitleComponent,
-  TooltipComponent,
-  LegendComponent,
-} from 'echarts/components';
-import VChart, { THEME_KEY } from 'vue-echarts';
-import { ref, provide } from 'vue';
-
-use([
-  GaugeChart,
-  CanvasRenderer,
-  PieChart,
-  TitleComponent,
-  TooltipComponent,
-  LegendComponent,
-]);
-
-provide(THEME_KEY, 'dark');
-
-const option1 = ref({
-	backgroundColor:'transparent',
-	  series: [
-	    {
-	      name: 'Access From',
-		  width:300,
-		  height:100,
-		  type: 'pie',
-		  left:-50,
-		  top:10,
-		  radius: ['40%', '50%'],
-		  avoidLabelOverlap: true,
-		  padAngle: 5,
-		  itemStyle: {
-			borderRadius: 2
-		  },
-	      data: [
-	        { value: 200, name: '30-40%' },
-	        { value: 500, name: '19岁以下' },
-	        { value: 234, name: '18-30岁' },
-	        { value: 135, name: '60岁以上' },
-	        { value: 100, name: '30-40岁' },
-	      ],
-		  labelLine: {
-			show: true
-		  },
-	      emphasis: {
-	        itemStyle: {
-	          shadowBlur: 10,
-	          shadowOffsetX: 0,
-	          shadowColor: 'rgba(0, 0, 0, 0.5)',
-	        },
-	      },
-	    },
-	  ],
-});
-const option2 = ref({
-	backgroundColor:'transparent',
-	
-});
+  import jam from './jam.vue'
+  import TrafficFlow from './traffic-flow.vue'
+  import vacancy from './vacancy.vue'
+  import countup from 'vue-countup-v3'
+  import icon1 from '@/assets/images/icon-1.png'
+  import icon2 from '@/assets/images/icon-2.png'
+  import icon3 from '@/assets/images/icon-3.png'
+  import icon4 from '@/assets/images/icon-4.png'
 
+  let list = ref([
+    {
+      label: '路段总数',
+      value: '1234',
+      icon: icon1
+    },
+    {
+      label: '当前拥堵路段',
+      value: '1234',
+      icon: icon2
+    },
+    {
+      label: '总拥堵次数',
+      value: '1234',
+      icon: icon3
+    },
+    {
+      label: '最大拥堵时长',
+      value: '1234',
+      icon: icon4
+    }
+  ])
 </script>
 
 <style lang="scss" scoped>
-	.box-4-content{
-		width:vw(792);
-		height:vh(976);
-		background: linear-gradient( 180deg, rgba(10,37,75,0) 0%, rgba(10,37,75,0.87) 30%, #0A254B 50%, #0A254B 100%);
-		// background: green;
-		border-radius: 0px 0px 0px 0px;
-		.content-2{
-			.all-2-infor{
-			
-				.box-1{
-					display: flex;
-					width:vw(384);
-					height: vh(70);
-					background: linear-gradient( 90deg, #0A4190 0%, #0096FF 47%, #004D88 100%);
-					border-radius: 0px 0px 0px 0px;
-					border: 1px solid;
-					border-image: linear-gradient(180deg, rgba(0, 150, 255, 1), rgba(0, 90, 153, 0)) 1 1;
-					.info1{
-						text-align: center;
-						
-					}
-					.t-ico-1{
-						justify-content: center;
-						align-items: center;
-						.t-ico-1{
-							width:vw(45);
-							height:vh(47);
-							
-						}
-					}
-				}
-			}
-		}
-		.content{
-			.title{
-				width: vw(220);
-				height: vh(32);
-				line-height: vh(32);
-				background: linear-gradient( 180deg, #02A8F7 0%, #05AEFF 49%, #0184E1 51%, #0572C1 77%, #0085E2 100%);
-				font-size:vw(16);
-				text-align: center;
-				margin: vh(20) auto;
-			}
-			.ul-1{
-				display:flex;
-				.chart-1{
-					width:vw(253);
-					height:vh(150);
-					position: relative;
-					.sky-1{
-						position: absolute;
-						top:vw(60);
-						left:50%;
-						width:vw(30);
-						height:vw(30);
-						transform: translate(-50%);
-						background-color: #00B1FF;
-						border-radius: 50%;
-					}
-				}
-				
-				.li{
-					width:vw(253);
-					height:vh(225);
-					margin-right:vw(10);
-					background: radial-gradient( 0% 70% at 99% 50%, #0A4190 0%, rgba(0,77,136,0.6) 100%);
-					border-image: linear-gradient(180deg, rgba(0, 150, 255, 1), rgba(0, 90, 153, 0)) 1 1;
-					.li-man{
-						font-size:vw(14);
-						color:#fff;
-						margin:0 auto;
-						text-align: center;
-					}
-					.round-press{
-						
-					}
-					.press-box{
-						padding:vw(5) vw(10);
-						// margin-bottom:vh(10);
-						.press-title{
-							display: flex;
-							justify-content: space-between;
-							color:rgba(255,255,255,0.9);
-							font-size:vw(12);
-							margin-bottom:vh(10)
-						}
-						.bg-box{
-							width: 100%;
-							height: vw(10);
-							background: rgba(0,150,255,0.15);
-							border-radius: vw(5);
-						}
-						.bg-width{
-							background: linear-gradient( to left, #FF7021 0%, rgba(255,112,33,0) 100%);
-							border-radius: vw(5);
-							border-top-right-radius: 0;
-							border-bottom-right-radius: 0;
-							width:50%;
-							height:100%;
-							position: relative;
-						}
-						.bg-width::before{
-							display: block;
-							content: '';
-							width:vw(10);
-							height:vw(10);
-							// border-radius: 50%;
-							position: absolute;
-							right:0;
-							top:0;
-							width: 0;
-							height: 0;
-							border-left: vw(10) solid red;
-							// border-right-width: vw(10);
-							// border-bottom-width: vw(10);
-							// border-left-width: vw(10);
-							
-							
-						}
-					}
-					.li-title{
-						background: url(/src/assets/images/t-title-bg.png) no-repeat 100%;
-						span{
-							background: linear-gradient(90deg, #FFFFFF 0%, #0096FF 100%);
-							font-family: Microsoft YaHei, Microsoft YaHei;
-							font-weight: bold;
-							font-size: vw(15);
-							line-height: vh(18);
-							text-align: left;
-							font-style: normal;
-							text-transform: none;
-							display: inline-block;
-							margin-left:vw(20);
-							margin-bottom:vh(10);
-							
-						}
-						
-						.li-1-echat{
-							position: relative;
-							.sty-1{
-								position: absolute;
-								top:50%;
-								left:50%;
-								transform: translate(-50%,-50%);
-								width:50rpx;
-								height:50rpx;
-								
-								
-							}
-							// width: 100%;
-							// height: 300px;
-							.chart {
-							
-							}
-						}
-					}
-				}
-			}
-		}
-		.chart {
-			width: vw(253);
-			height: vh(120);
-		}
-	}
-
+  .title1 {
+    :deep(.title) {
+      width: vw(300) !important;
+    }
+  }
+  .box-4 {
+    margin-top: vh(120);
+    width: vw(790);
+    height: vh(950);
+    padding: vw(8);
+    box-sizing: border-box;
+    background-image: url('@/assets/images/bg-5.png');
+    background-size: 100% 100%;
+    .cell {
+      display: flex;
+      align-items: center;
+      .icon {
+        width: vw(64);
+        height: vh(60);
+      }
+      .countup-wrap {
+        color: #02f9fa;
+        font-size: vw(24);
+        font-weight: bold;
+      }
+      .label {
+        font-weight: 400;
+        font-size: vw(14);
+        margin-top: vh(10);
+        color: rgba(255, 255, 255, 0.9);
+      }
+    }
+    .box {
+      width: vw(250);
+      height: vh(200);
+      margin-right: vw(8);
+      background-image: url('@/assets/images/bg-3.png');
+      background-size: 100% 100%;
+    }
+    .box-1 {
+      width: vw(250);
+      height: vh(200);
+      margin-right: vw(8);
+      background-image: url('@/assets/images/bg-3.png');
+      background-size: 100% 100%;
+    }
+    .stop-box {
+      display: flex;
+      gap: vw(20);
+      .icon {
+        width: vw(45);
+        height: vh(48);
+      }
+      & > div {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: space-evenly;
+        height: vh(70);
+        background-image: url('@/assets/images/bg-4.png');
+        background-size: 100% 100%;
+        .label {
+          font-weight: 400;
+          font-size: vw(14);
+          color: rgba(255, 255, 255, 0.9);
+        }
+        .value {
+          margin-top: vh(10);
+          font-weight: bold;
+          font-size: vw(24);
+          color: #ffffff;
+        }
+        .error {
+          color: #e21b1b;
+        }
+        .success {
+          color: #02f9fa;
+        }
+      }
+    }
+    .car-ship {
+      flex: 1;
+      & > div {
+        position: relative;
+        flex: 1;
+        height: vh(110);
+        display: flex;
+        align-items: center;
+        background-image: url('@/assets/images/bg-4.png');
+        background-size: 100% 100%;
+        .icon {
+          width: vw(352);
+          height: vh(70);
+          padding-top: vh(10);
+          padding-left: vw(90);
+          background-size: 100% 100%;
+          box-sizing: border-box;
+        }
+        .car {
+          @extend .icon;
+          background-image: url('@/assets/images/icon-6.png');
+        }
+        .ship {
+          @extend .icon;
+          background-image: url('@/assets/images/icon-7.png');
+        }
+        .label {
+          font-weight: 400;
+          font-size: vw(14);
+          color: rgba(255, 255, 255, 0.9);
+          margin-bottom: vh(6);
+        }
+        .value {
+          font-weight: bold;
+          font-size: vw(24);
+          color: #02f9fa;
+        }
+        .unit {
+          font-weight: bold;
+          font-size: vw(14);
+          color: #02f9fa;
+          margin-top: vh(6);
+        }
+        .table {
+          position: absolute;
+          left: vw(160);
+          width: vw(200);
+          height: vh(100);
+          z-index: 2;
+          .header {
+            display: flex;
+            height: vh(18);
+            line-height: vh(18);
+            text-align: center;
+            background: rgba(0, 150, 255, 0.4);
+            & > div {
+              flex: 1;
+              font-weight: 400;
+              font-size: vw(12);
+              color: #52b8ff;
+            }
+          }
+          .cell {
+            display: flex;
+            height: vh(30);
+            line-height: vh(30);
+            text-align: center;
+            background: #074686;
+            & > div {
+              flex: 1;
+            }
+          }
+        }
+      }
+    }
+    .hotel {
+      flex: 1;
+    }
+  }
 </style>
diff --git a/src/views/home/components/jam.vue b/src/views/home/components/jam.vue
new file mode 100644
index 0000000..69d3834
--- /dev/null
+++ b/src/views/home/components/jam.vue
@@ -0,0 +1,190 @@
+<template>
+  <div class="top" id="jam" />
+</template>
+
+<script setup>
+  import { fitChartSize } from '@/utils/dataUtil'
+  import * as echarts from 'echarts'
+
+  let topChart = null
+  let result = [
+    { name: '路段1', value: 86 },
+    { name: '路段1', value: 83 },
+    { name: '路段1', value: 73 },
+    { name: '路段1', value: 61 },
+    { name: '路段1', value: 61 }
+  ]
+  let option = {
+    backgroundColor: 'transparent',
+    tooltip: {
+      show: false
+    },
+    legend: {
+      show: false
+    },
+    grid: {
+      left: '4%',
+      right: '4%',
+      top: '16%',
+      bottom: '-10%',
+      containLabel: true
+    },
+    xAxis: [
+      {
+        splitLine: {
+          show: false
+        },
+        type: 'value',
+        show: false
+      }
+    ],
+    yAxis: [
+      {
+        splitLine: {
+          show: false
+        },
+        axisLine: {
+          show: false
+        },
+        type: 'category',
+        axisTick: {
+          show: false
+        },
+        data: result.map((item) => item.name),
+        axisLabel: {
+          show: false
+        }
+      },
+      {
+        type: 'category',
+        inverse: true,
+        axisTick: 'none',
+        axisLine: 'none',
+        show: true,
+        axisLabel: {
+          textStyle: {
+            color: '#fff',
+            fontSize: fitChartSize(12)
+          },
+          verticalAlign: 'bottom',
+          padding: [0, 0, 6, 0],
+          inside: true,
+          formatter: function (value) {
+            return `{value|${value}}`
+          },
+          rich: {
+            name: {
+              align: 'center',
+              color: '#D3E5FF',
+              fontSize: fitChartSize(14),
+              fontFamily: 'Source Han Sans CN'
+            },
+            value: {
+              align: 'center',
+              color: '#fff',
+              fontSize: fitChartSize(14),
+              fontFamily: 'Source Han Sans CN'
+            }
+          }
+        },
+        data: result.map((item) => item.value)
+      }
+    ],
+    series: [
+      {
+        name: '',
+        type: 'bar',
+        barWidth: fitChartSize(4),
+        MaxSize: 0,
+        showBackground: true,
+        barBorderRadius: [30, 0, 0, 30],
+        backgroundStyle: {
+          color: 'rgba(0, 150, 255, 0.15)'
+        },
+        label: {
+          show: true,
+          offset: [10, -13],
+          color: '#D3E5FF',
+          fontWeight: 500,
+          position: 'left',
+          align: 'left',
+          fontSize: fitChartSize(14),
+          fontFamily: 'Source Han Sans CN',
+          formatter: function (params) {
+            return params.data.name
+          }
+        },
+        data: result.map((item, index) => {
+          return {
+            name: item.name,
+            value: item.value,
+            itemStyle: {
+              barBorderRadius: [3, 0, 0, 3],
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 1,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: 'rgba(255, 112, 33, 0)'
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(255, 112, 33, 1)'
+                  }
+                ]
+              }
+            }
+          }
+        })
+      },
+      {
+        name: '外圆',
+        type: 'scatter',
+        emphasis: {
+          scale: false
+        },
+        showSymbol: true,
+        symbol: 'circle',
+        symbolSize: fitChartSize(10),
+        z: 2,
+        data: result.map((item, index) => {
+          return {
+            name: item.name,
+            value: item.value,
+            itemStyle: {
+              color: '#fff',
+              opacity: 1
+            }
+          }
+        }),
+        animationDelay: 500
+      }
+    ]
+  }
+  const init = () => {
+    topChart = echarts.init(document.getElementById('jam'))
+    topChart.setOption(option)
+  }
+  const resize = () => {
+    if (topChart) {
+      topChart.dispose()
+      topChart = null
+      init()
+    }
+  }
+  onMounted(() => {
+    init()
+    window.addEventListener('resize', resize)
+  })
+</script>
+
+<style scoped lang="scss">
+  .top {
+    width: 100%;
+    height: vh(160);
+  }
+</style>
diff --git a/src/views/home/components/pie.vue b/src/views/home/components/pie.vue
new file mode 100644
index 0000000..d2f0f6a
--- /dev/null
+++ b/src/views/home/components/pie.vue
@@ -0,0 +1,74 @@
+<template>
+  <div class="pie" :id="id" />
+</template>
+
+<script setup>
+  import * as echarts from 'echarts'
+  import { fitChartSize } from '@/utils/dataUtil'
+
+  const props = defineProps({
+    id: {
+      type: String,
+      default: () => ''
+    }
+  })
+
+  let gaugeChart = null
+
+  onMounted(() => {
+    init()
+  })
+  const init = () => {
+    // 基于准备好的dom，初始化echarts实例
+    gaugeChart = echarts.init(document.getElementById(props.id))
+    gaugeChart.setOption({
+      tooltip: {
+        trigger: 'item'
+      },
+      series: [
+        {
+          name: 'Access From',
+          type: 'pie',
+          radius: ['30%', '40%'],
+          itemStyle: {
+            borderColor: 'transparent',
+            borderRadius: fitChartSize(2),
+            borderWidth: fitChartSize(2)
+          },
+          label: {
+            color: '#D3F0FE',
+            fontSize: fitChartSize(12)
+          },
+          labelLine: {
+            normal: {
+              lineStyle: {
+                type: 'dashed'
+              }
+            }
+          },
+          data: [
+            { value: 484, name: '19岁以下', labelLine: { length: 2 } },
+            { value: 300, name: '18-30岁', labelLine: { length: 2 } },
+            { value: 1048, name: '30-40岁', labelLine: { length: 2 } },
+            { value: 580, name: '40-60岁', labelLine: { length: 2 } },
+            { value: 735, name: '60岁以上', labelLine: { length: 2 } }
+          ]
+        }
+      ]
+    })
+    window.addEventListener('resize', resize)
+  }
+  const resize = () => {
+    if (gaugeChart) {
+      gaugeChart.dispose()
+      init()
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .pie {
+    width: vw(253);
+    height: vh(100);
+  }
+</style>
diff --git a/src/views/home/components/ticket.vue b/src/views/home/components/ticket.vue
new file mode 100644
index 0000000..ec04de9
--- /dev/null
+++ b/src/views/home/components/ticket.vue
@@ -0,0 +1,199 @@
+<template>
+  <div class="ticket" id="ticket" />
+</template>
+
+<script setup>
+  import { fitChartSize } from '@/utils/dataUtil'
+  import * as echarts from 'echarts'
+
+  let ticketChart = null
+  var qxzbData = [
+    {
+      name: '处理中',
+      value: 500,
+      full: 1000 // 最大值
+    },
+    {
+      name: '超期中',
+      value: 756,
+      full: 1000
+    },
+    {
+      name: '延期中',
+      value: 800,
+      full: 1000
+    }
+  ]
+  var returnData = function (qxzbData, name) {
+    for (var a = 0; a < qxzbData.length; a++) {
+      if (qxzbData[a].name == name) {
+        return qxzbData[a].value
+      }
+    }
+  }
+  let option = {
+    backgroundColor: 'transparent',
+    tooltip: {
+      trigger: 'item',
+      formatter: function (rsp) {
+        if (rsp.name != '') {
+          return rsp.name + '<br/>' + rsp.marker + ' ' + rsp.value + ' （' + rsp.percent + '）'
+        }
+      }
+    },
+    legend: {
+      orient: 'vertical',
+      x: 'right',
+      y: 'center',
+      //   textStyle: {
+      //     color: '#4A9AE4'
+      //   },
+      data: qxzbData,
+      itemHeight: fitChartSize(8),
+      itemWidth: fitChartSize(8),
+      itemGap: fitChartSize(20),
+      formatter: function (name) {
+        return '{title|' + name + '}  {value|' + returnData(qxzbData, name) + '}'
+      },
+      textStyle: {
+        rich: {
+          title: {
+            color: '#fff',
+            fontSize: fitChartSize(14)
+          },
+          value: {
+            color: '#00D5F6',
+            fontSize: fitChartSize(14)
+          }
+        }
+      }
+    },
+    color: ['#F15A25', '#01FEFE', '#12B5FD'],
+    series: [
+      {
+        name: qxzbData[0].name, //最里面的圈
+        type: 'pie',
+        clockWise: false, //顺时加载
+        radius: ['15%', '25%'],
+        center: ['30%', '50%'],
+        label: {
+          normal: {
+            show: false
+          }
+        },
+        labelLine: {
+          show: false
+        },
+        itemStyle: {
+          emphasis: {
+            show: false
+          }
+        },
+        data: [
+          {
+            value: qxzbData[0].value,
+            name: qxzbData[0].name
+          },
+          {
+            value: qxzbData[0].full,
+            itemStyle: {
+              normal: {
+                color: '#07439C'
+              }
+            }
+          }
+        ]
+      },
+      {
+        name: qxzbData[1].name, //第二个圈
+        type: 'pie',
+        clockWise: false, //顺时加载
+        radius: ['30%', '40%'],
+        center: ['30%', '50%'],
+        label: {
+          normal: {
+            show: false
+          }
+        },
+        labelLine: {
+          show: false
+        },
+        itemStyle: {
+          emphasis: {
+            show: false
+          }
+        },
+        data: [
+          {
+            value: qxzbData[1].value,
+            name: qxzbData[1].name
+          },
+          {
+            value: qxzbData[1].full,
+            itemStyle: {
+              normal: {
+                color: '#07439C'
+              }
+            }
+          }
+        ]
+      },
+      {
+        name: qxzbData[2].name, //最外层圈
+        type: 'pie',
+        clockWise: false, //顺时加载
+        radius: ['45%', '55%'],
+        center: ['30%', '50%'],
+        label: {
+          normal: {
+            show: false
+          }
+        },
+        labelLine: {
+          show: false
+        },
+        itemStyle: {
+          emphasis: {
+            show: false
+          }
+        },
+        data: [
+          {
+            value: qxzbData[2].value,
+            name: qxzbData[2].name
+          },
+          {
+            value: qxzbData[2].full,
+            itemStyle: {
+              normal: {
+                color: '#07439C'
+              }
+            }
+          }
+        ]
+      }
+    ]
+  }
+  const init = () => {
+    ticketChart = echarts.init(document.getElementById('ticket'))
+    ticketChart.setOption(option)
+    window.addEventListener('resize', resize)
+  }
+  const resize = () => {
+    if (ticketChart) {
+      ticketChart.dispose()
+      ticketChart = null
+      init()
+    }
+  }
+  onMounted(() => {
+    init()
+  })
+</script>
+
+<style scoped lang="scss">
+  .ticket {
+    width: 100%;
+    height: vh(200);
+  }
+</style>
diff --git a/src/views/home/components/top.vue b/src/views/home/components/top.vue
new file mode 100644
index 0000000..2349b52
--- /dev/null
+++ b/src/views/home/components/top.vue
@@ -0,0 +1,251 @@
+<template>
+  <div class="top" id="top" />
+</template>
+
+<script setup>
+  import { fitChartSize } from '@/utils/dataUtil'
+  import * as echarts from 'echarts'
+
+  let topChart = null
+  let colorList = [
+    'rgba(255, 38, 38, 1)',
+    'rgba(255, 96, 0, 1)',
+    'rgba(255, 165, 7, 1)',
+    'rgba(0, 234, 255, 1)',
+    'rgba(0, 132, 255, 1)',
+    '#2379FF'
+  ]
+  let colorListA = [
+    'rgba(255, 38, 38, 0.1)',
+    'rgba(255, 96, 0, 0.1)',
+    'rgba(255, 165, 7, 0.1)',
+    'rgba(0, 234, 255, 0.1)',
+    'rgba(0, 132, 255, 0.1)',
+    '#49B1FF'
+  ]
+  let colorListB = [
+    'rgba(249, 136, 136, 1)',
+    'rgba(255, 162, 106, 1)',
+    'rgba(255, 210, 130, 1)',
+    'rgba(142, 255, 206, 1)',
+    'rgba(165, 232, 255, 1)'
+  ]
+  let colorListC = [
+    'rgba(249, 136, 136, 0.1)',
+    'rgba(255, 162, 106, 0.1)',
+    'rgba(255, 210, 130, 0.1)',
+    'rgba(142, 255, 206, 0.1)',
+    'rgba(165, 232, 255, 0.1)'
+  ]
+  let result = [
+    { name: '河北', value: 86 },
+    { name: '山西', value: 83 },
+    { name: '河南', value: 73 },
+    { name: '内蒙', value: 61 },
+    { name: '辽宁', value: 61 }
+  ]
+  let option = {
+    color: colorList,
+    backgroundColor: 'transparent',
+    tooltip: {
+      show: false
+    },
+    legend: {
+      show: false
+    },
+    grid: {
+      left: '4%',
+      right: '4%',
+      top: '6%',
+      bottom: '-4%',
+      containLabel: true
+    },
+    xAxis: [
+      {
+        splitLine: {
+          show: false
+        },
+        type: 'value',
+        show: false
+      }
+    ],
+    yAxis: [
+      {
+        splitLine: {
+          show: false
+        },
+        axisLine: {
+          show: false
+        },
+        type: 'category',
+        axisTick: {
+          show: false
+        },
+        data: result.map((item) => item.name),
+        axisLabel: {
+          show: false
+        }
+      },
+      {
+        type: 'category',
+        inverse: true,
+        axisTick: 'none',
+        axisLine: 'none',
+        show: true,
+        axisLabel: {
+          textStyle: {
+            color: '#fff',
+            fontSize: fitChartSize(12)
+          },
+          verticalAlign: 'bottom',
+          padding: [0, 0, 10, 0],
+          inside: true,
+          formatter: function (value) {
+            return `{value|${value}}`
+          },
+          rich: {
+            name: {
+              align: 'center',
+              color: '#D3E5FF',
+              fontSize: fitChartSize(14),
+              fontFamily: 'Source Han Sans CN'
+            },
+            value: {
+              align: 'center',
+              color: '#fff',
+              fontSize: fitChartSize(14),
+              fontFamily: 'Source Han Sans CN'
+            }
+          }
+        },
+        data: result.map((item) => item.value)
+      }
+    ],
+    series: [
+      {
+        name: '',
+        type: 'bar',
+        barWidth: fitChartSize(12),
+        MaxSize: 0,
+        showBackground: true,
+        barBorderRadius: [30, 0, 0, 30],
+        backgroundStyle: {
+          color: 'rgba(0, 150, 255, 0.15)'
+        },
+        label: {
+          show: true,
+          offset: [10, -17],
+          color: '#D3E5FF',
+          fontWeight: 500,
+          position: 'left',
+          align: 'left',
+          fontSize: fitChartSize(14),
+          fontFamily: 'Source Han Sans CN',
+          formatter: function (params) {
+            return params.data.name
+          }
+        },
+        data: result.map((item, index) => {
+          return {
+            name: item.name,
+            value: item.value,
+            itemStyle: {
+              barBorderRadius: [3, 0, 0, 3],
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 1,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: colorListA[index]
+                  },
+                  {
+                    offset: 1,
+                    color: colorList[index]
+                  }
+                ]
+              }
+            }
+          }
+        })
+      }
+      // {
+      //   name: '外圆',
+      //   type: 'scatter',
+      //   emphasis: {
+      //     scale: false
+      //   },
+      //   showSymbol: true,
+      //   symbol: 'circle',
+      //   symbolSize: 8, // 进度条白点
+      //   z: 2,
+      //   data: result.map((item, index) => {
+      //     return {
+      //       name: item.name,
+      //       value: item.value,
+      //       itemStyle: {
+      //         color: colorListB[index],
+      //         borderColor: colorListC[index],
+      //         borderWidth: 12,
+      //         shadowColor: colorListC[index],
+      //         shadowBlur: 10,
+      //         opacity: 1
+      //       }
+      //     }
+      //   }),
+      //   animationDelay: 500
+      // },
+      // {
+      //   name: '外圆',
+      //   type: 'scatter',
+      //   emphasis: {
+      //     scale: false
+      //   },
+      //   showSymbol: true,
+      //   symbol: 'circle',
+      //   symbolSize: 3, // 进度条白点
+      //   z: 3,
+      //   data: result.map((item, index) => {
+      //     return {
+      //       name: item.name,
+      //       value: item.value,
+      //       itemStyle: {
+      //         color: colorListB[index],
+      //         borderColor: colorListC[index],
+      //         borderWidth: 30,
+      //         shadowColor: colorListC[index],
+      //         shadowBlur: 10,
+      //         opacity: 1
+      //       }
+      //     }
+      //   }),
+      //   animationDelay: 500
+      // }
+    ]
+  }
+  const init = () => {
+    topChart = echarts.init(document.getElementById('top'))
+    topChart.setOption(option)
+  }
+  const resize = () => {
+    if (topChart) {
+      topChart.dispose()
+      topChart = null
+      init()
+    }
+  }
+  onMounted(() => {
+    init()
+    window.addEventListener('resize', resize)
+  })
+</script>
+
+<style scoped lang="scss">
+  .top {
+    width: 100%;
+    height: vh(260);
+  }
+</style>
diff --git a/src/views/home/components/traffic-flow.vue b/src/views/home/components/traffic-flow.vue
new file mode 100644
index 0000000..b45f68d
--- /dev/null
+++ b/src/views/home/components/traffic-flow.vue
@@ -0,0 +1,102 @@
+<template>
+  <div class="traffic-flow" id="traffic-flow" />
+</template>
+
+<script setup>
+  import { fitChartSize } from '@/utils/dataUtil'
+  import * as echarts from 'echarts'
+
+  let trafficChart = null
+
+  let option = {
+    grid: {
+      left: '4%',
+      right: '4%',
+      top: '10%',
+      bottom: '10%',
+      containLabel: true
+    },
+    xAxis: {
+      boundaryGap: true,
+      type: 'category',
+      data: ['河北', '山西', '河南', '内蒙', '辽宁'],
+      axisTick: {
+        show: false
+      },
+      axisLine: {
+        lineStyle: {
+          color: 'rgba(5, 72, 134, 1)'
+        }
+      },
+      axisLabel: {
+        fontSize: fitChartSize(12),
+        color: 'rgba(255,255,255,0.9)'
+      }
+    },
+    yAxis: {
+      type: 'value',
+      axisLabel: {
+        fontSize: fitChartSize(12),
+        color: 'rgba(255,255,255,0.9)'
+      },
+      splitLine: {
+        show: false,
+        lineStyle: {
+          color: 'rgba(0, 150, 255,0.4)',
+          type: 'dashed'
+        }
+      }
+    },
+    series: [
+      {
+        data: [820, 932, 901, 934, 1290],
+        type: 'bar',
+        showBackground: true,
+        barWidth: fitChartSize(8),
+        itemStyle: {
+          barBorderRadius: [3, 3, 0, 0],
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: 'rgba(0, 208, 255, 0)'
+              },
+              {
+                offset: 1,
+                color: 'rgba(0, 208, 255, 1)'
+              }
+            ]
+          }
+        },
+        backgroundStyle: {
+          color: 'rgba(0, 150, 255, 0.15)'
+        }
+      }
+    ]
+  }
+  const init = () => {
+    trafficChart = echarts.init(document.getElementById('traffic-flow'))
+    trafficChart.setOption(option)
+    window.addEventListener('resize', resize)
+  }
+  const resize = () => {
+    if (trafficChart) {
+      trafficChart.dispose()
+      trafficChart = null
+      init()
+    }
+  }
+  onMounted(() => {
+    init()
+  })
+</script>
+
+<style scoped lang="scss">
+  .traffic-flow {
+    width: 100%;
+    height: vh(160);
+  }
+</style>
diff --git a/src/views/home/components/vacancy.vue b/src/views/home/components/vacancy.vue
new file mode 100644
index 0000000..cbaed85
--- /dev/null
+++ b/src/views/home/components/vacancy.vue
@@ -0,0 +1,189 @@
+<template>
+  <div class="vacancy" id="vacancy" />
+</template>
+
+<script setup>
+  import { fitChartSize } from '@/utils/dataUtil'
+  import * as echarts from 'echarts'
+
+  let topChart = null
+  let result = [
+    { name: '三峡之颠', value: 86 },
+    { name: '白帝城', value: 83 },
+    { name: '瞿塘峡', value: 73 },
+    { name: '天坑地缝', value: 61 }
+  ]
+  let option = {
+    backgroundColor: 'transparent',
+    tooltip: {
+      show: false
+    },
+    legend: {
+      show: false
+    },
+    grid: {
+      left: '4%',
+      right: '4%',
+      top: '20%',
+      bottom: '-4%',
+      containLabel: true
+    },
+    xAxis: [
+      {
+        splitLine: {
+          show: false
+        },
+        type: 'value',
+        show: false
+      }
+    ],
+    yAxis: [
+      {
+        splitLine: {
+          show: false
+        },
+        axisLine: {
+          show: false
+        },
+        type: 'category',
+        axisTick: {
+          show: false
+        },
+        data: result.map((item) => item.name),
+        axisLabel: {
+          show: false
+        }
+      },
+      {
+        type: 'category',
+        inverse: true,
+        axisTick: 'none',
+        axisLine: 'none',
+        show: true,
+        axisLabel: {
+          textStyle: {
+            color: '#fff',
+            fontSize: fitChartSize(12)
+          },
+          verticalAlign: 'bottom',
+          padding: [0, 0, 6, 0],
+          inside: true,
+          formatter: function (value) {
+            return `余{value|${value}}`
+          },
+          rich: {
+            name: {
+              align: 'center',
+              color: '#D3E5FF',
+              fontSize: fitChartSize(14),
+              fontFamily: 'Source Han Sans CN'
+            },
+            value: {
+              align: 'center',
+              color: '#fff',
+              fontSize: fitChartSize(14),
+              fontFamily: 'Source Han Sans CN'
+            }
+          }
+        },
+        data: result.map((item) => item.value)
+      }
+    ],
+    series: [
+      {
+        name: '',
+        type: 'bar',
+        barWidth: fitChartSize(4),
+        MaxSize: 0,
+        showBackground: true,
+        barBorderRadius: [30, 0, 0, 30],
+        backgroundStyle: {
+          color: 'rgba(0, 150, 255, 0.15)'
+        },
+        label: {
+          show: true,
+          offset: [10, -13],
+          color: '#D3E5FF',
+          fontWeight: 500,
+          position: 'left',
+          align: 'left',
+          fontSize: fitChartSize(14),
+          fontFamily: 'Source Han Sans CN',
+          formatter: function (params) {
+            return params.data.name
+          }
+        },
+        data: result.map((item, index) => {
+          return {
+            name: item.name,
+            value: item.value,
+            itemStyle: {
+              barBorderRadius: [3, 0, 0, 3],
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 1,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: 'rgba(0, 204, 255, 0)'
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(0, 204, 255, 1)'
+                  }
+                ]
+              }
+            }
+          }
+        })
+      },
+      {
+        name: '外圆',
+        type: 'scatter',
+        emphasis: {
+          scale: false
+        },
+        showSymbol: true,
+        symbol: 'circle',
+        symbolSize: fitChartSize(10),
+        z: 2,
+        data: result.map((item, index) => {
+          return {
+            name: item.name,
+            value: item.value,
+            itemStyle: {
+              color: '#fff',
+              opacity: 1
+            }
+          }
+        }),
+        animationDelay: 500
+      }
+    ]
+  }
+  const init = () => {
+    topChart = echarts.init(document.getElementById('vacancy'))
+    topChart.setOption(option)
+  }
+  const resize = () => {
+    if (topChart) {
+      topChart.dispose()
+      topChart = null
+      init()
+    }
+  }
+  onMounted(() => {
+    init()
+    window.addEventListener('resize', resize)
+  })
+</script>
+
+<style scoped lang="scss">
+  .vacancy {
+    width: 100%;
+    height: vh(170);
+  }
+</style>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 6c9d7f3..f947c3c 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -14,16 +14,18 @@
         <li class="nav-right-item">舆情</li>
         <li class="nav-right-item">酒店</li>
       </ul>
-	  <box4 />
     </div>
-    <box2 />
+    <!-- <box2 />
+    <box3 /> -->
+    <box4 />
   </main>
 </template>
 
 <script setup>
   import box1 from './components/box-1.vue'
-  import box4 from './components/box-4.vue'
   import box2 from './components/box-2.vue'
+  import box3 from './components/box-3.vue'
+  import box4 from './components/box-4.vue'
 
   onMounted(() => {})
 </script>
diff --git a/vite.config.js b/vite.config.js
index 430b617..ce7ceeb 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -4,6 +4,8 @@ import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
 import AutoImport from 'unplugin-auto-import/vite'
+import Components from 'unplugin-vue-components/vite'
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 // import vueDevTools from 'vite-plugin-vue-devtools'
 
 // https://vite.dev/config/
@@ -13,7 +15,11 @@ export default defineConfig({
     vueJsx(),
     AutoImport({
       imports: ['vue'],
-      dts: 'src/auto-import.d.ts'
+      dts: 'src/auto-import.d.ts',
+      resolvers: [ElementPlusResolver()]
+    }),
+    Components({
+      resolvers: [ElementPlusResolver()]
     })
     // vueDevTools(),
   ],