feat 监控大屏
This commit is contained in:
duanliang
875
package-lock.json
generated
875
package-lock.json
generated
@@ -12,11 +12,8 @@
|
|||||||
"echarts": "^5.5.1",
|
"echarts": "^5.5.1",
|
||||||
"pinia": "^2.2.6",
|
"pinia": "^2.2.6",
|
||||||
"vue": "^3.5.13",
|
"vue": "^3.5.13",
|
||||||
<<<<<<< HEAD
|
|
||||||
"vue-echarts": "^7.0.3",
|
|
||||||
=======
|
|
||||||
"vue-countup-v3": "^1.4.2",
|
"vue-countup-v3": "^1.4.2",
|
||||||
>>>>>>> c263e68dd9f06fa54de5add6bfa1b7bdb129383d
|
"vue-echarts": "^7.0.3",
|
||||||
"vue-router": "^4.4.5"
|
"vue-router": "^4.4.5"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
@@ -467,374 +464,6 @@
|
|||||||
"node": ">=6.9.0"
|
"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"
|
|
||||||
],
|
|
||||||
"engines": {
|
|
||||||
"node": ">=18"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"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/@esbuild/win32-x64": {
|
"node_modules/@esbuild/win32-x64": {
|
||||||
"version": "0.24.0",
|
"version": "0.24.0",
|
||||||
"resolved": "https://registry.npmmirror.com/@esbuild/win32-x64/-/win32-x64-0.24.0.tgz",
|
"resolved": "https://registry.npmmirror.com/@esbuild/win32-x64/-/win32-x64-0.24.0.tgz",
|
||||||
@@ -998,246 +627,6 @@
|
|||||||
"@parcel/watcher-win32-x64": "2.5.0"
|
"@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": {
|
"node_modules/@parcel/watcher-win32-x64": {
|
||||||
"version": "2.5.0",
|
"version": "2.5.0",
|
||||||
"resolved": "https://registry.npmmirror.com/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.0.tgz",
|
"resolved": "https://registry.npmmirror.com/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.0.tgz",
|
||||||
@@ -1286,227 +675,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": {
|
"node_modules/@rollup/rollup-win32-x64-msvc": {
|
||||||
"version": "4.28.0",
|
"version": "4.28.0",
|
||||||
"resolved": "https://registry.npmmirror.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.28.0.tgz",
|
"resolved": "https://registry.npmmirror.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.28.0.tgz",
|
||||||
@@ -2228,7 +1396,8 @@
|
|||||||
"node_modules/countup.js": {
|
"node_modules/countup.js": {
|
||||||
"version": "2.8.0",
|
"version": "2.8.0",
|
||||||
"resolved": "https://registry.npmmirror.com/countup.js/-/countup.js-2.8.0.tgz",
|
"resolved": "https://registry.npmmirror.com/countup.js/-/countup.js-2.8.0.tgz",
|
||||||
"integrity": "sha512-f7xEhX0awl4NOElHulrl4XRfKoNH3rB+qfNSZZyjSZhaAoUk6elvhH+MNxMmlmuUJ2/QNTWPSA7U4mNtIAKljQ=="
|
"integrity": "sha512-f7xEhX0awl4NOElHulrl4XRfKoNH3rB+qfNSZZyjSZhaAoUk6elvhH+MNxMmlmuUJ2/QNTWPSA7U4mNtIAKljQ==",
|
||||||
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
"node_modules/cross-spawn": {
|
"node_modules/cross-spawn": {
|
||||||
"version": "7.0.6",
|
"version": "7.0.6",
|
||||||
@@ -2625,20 +1794,6 @@
|
|||||||
"node": ">=14.14"
|
"node": ">=14.14"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/fsevents": {
|
|
||||||
"version": "2.3.3",
|
|
||||||
"resolved": "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.3.tgz",
|
|
||||||
"integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
|
|
||||||
"dev": true,
|
|
||||||
"hasInstallScript": true,
|
|
||||||
"optional": true,
|
|
||||||
"os": [
|
|
||||||
"darwin"
|
|
||||||
],
|
|
||||||
"engines": {
|
|
||||||
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/gensync": {
|
"node_modules/gensync": {
|
||||||
"version": "1.0.0-beta.2",
|
"version": "1.0.0-beta.2",
|
||||||
"resolved": "https://registry.npmmirror.com/gensync/-/gensync-1.0.0-beta.2.tgz",
|
"resolved": "https://registry.npmmirror.com/gensync/-/gensync-1.0.0-beta.2.tgz",
|
||||||
@@ -4279,7 +3434,18 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
<<<<<<< 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==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"countup.js": "^2.6.2"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"vue": "^3.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/vue-demi": {
|
"node_modules/vue-demi": {
|
||||||
"version": "0.13.11",
|
"version": "0.13.11",
|
||||||
"resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.11.tgz",
|
"resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.11.tgz",
|
||||||
@@ -4323,17 +3489,6 @@
|
|||||||
"@vue/runtime-core": {
|
"@vue/runtime-core": {
|
||||||
"optional": true
|
"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": {
|
"node_modules/vue-router": {
|
||||||
|
|||||||
BIN
src/assets/images/four-t-1.png
Normal file
BIN
src/assets/images/four-t-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
src/assets/images/four-t-2.png
Normal file
BIN
src/assets/images/four-t-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
src/assets/images/four-t-3.png
Normal file
BIN
src/assets/images/four-t-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
src/assets/images/four-t-4.png
Normal file
BIN
src/assets/images/four-t-4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
src/assets/images/header-top-bg.png
Normal file
BIN
src/assets/images/header-top-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
BIN
src/assets/images/i-data-bg-1.png
Normal file
BIN
src/assets/images/i-data-bg-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
src/assets/images/m-nav-bg-1.png
Normal file
BIN
src/assets/images/m-nav-bg-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
src/assets/images/m-nav-bg-2.png
Normal file
BIN
src/assets/images/m-nav-bg-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
src/assets/images/m-t-1.png
Normal file
BIN
src/assets/images/m-t-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
src/assets/images/m-t-2.png
Normal file
BIN
src/assets/images/m-t-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
src/assets/images/m-t-3.png
Normal file
BIN
src/assets/images/m-t-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
src/assets/images/monotir-bg-1.png
Normal file
BIN
src/assets/images/monotir-bg-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 116 KiB |
BIN
src/assets/images/monotir-bg.png
Normal file
BIN
src/assets/images/monotir-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
BIN
src/assets/images/nav-l-t-bg.png
Normal file
BIN
src/assets/images/nav-l-t-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
BIN
src/assets/images/nav-t-1.png
Normal file
BIN
src/assets/images/nav-t-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
BIN
src/assets/images/nav-t-2.png
Normal file
BIN
src/assets/images/nav-t-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
BIN
src/assets/images/r-icon-1.png
Normal file
BIN
src/assets/images/r-icon-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
src/assets/images/r-icon-2.png
Normal file
BIN
src/assets/images/r-icon-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
src/assets/images/r-icon-3.png
Normal file
BIN
src/assets/images/r-icon-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
src/assets/images/r-icon-4.png
Normal file
BIN
src/assets/images/r-icon-4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
src/assets/images/r-icon-5.png
Normal file
BIN
src/assets/images/r-icon-5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
src/assets/images/r-icon-6.png
Normal file
BIN
src/assets/images/r-icon-6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
src/assets/images/rk-1.png
Normal file
BIN
src/assets/images/rk-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
src/assets/images/rk-2.png
Normal file
BIN
src/assets/images/rk-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
src/assets/images/rk-3.png
Normal file
BIN
src/assets/images/rk-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
src/assets/images/rk-4.png
Normal file
BIN
src/assets/images/rk-4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
src/assets/images/rt-bg.png
Normal file
BIN
src/assets/images/rt-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 283 KiB |
BIN
src/assets/images/v-item-bg.png
Normal file
BIN
src/assets/images/v-item-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
@@ -7,6 +7,11 @@ const router = createRouter({
|
|||||||
path: '/',
|
path: '/',
|
||||||
name: 'home',
|
name: 'home',
|
||||||
component: () => import('../views/home/index.vue')
|
component: () => import('../views/home/index.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/monitor',
|
||||||
|
name: 'monitor',
|
||||||
|
component: () => import('../views/monitor/index.vue')
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -0,0 +1,128 @@
|
|||||||
|
<template>
|
||||||
|
<!-- 内容 -->
|
||||||
|
<div class="box-3-content">
|
||||||
|
<!-- header -->
|
||||||
|
<div class="header">
|
||||||
|
<div class="li-1">
|
||||||
|
今年总游客数
|
||||||
|
<div class="li-num">
|
||||||
|
<span>6</span>
|
||||||
|
<span>6</span>
|
||||||
|
<span>6</span>
|
||||||
|
<span>6</span>
|
||||||
|
<span>6</span>
|
||||||
|
<span>6</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="li-1">
|
||||||
|
全县区总游客人数
|
||||||
|
<div class="li-num">
|
||||||
|
<span>6</span>
|
||||||
|
<span>6</span>
|
||||||
|
<span>6</span>
|
||||||
|
<span>6</span>
|
||||||
|
<span>6</span>
|
||||||
|
<span>6</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="li-1">
|
||||||
|
全在园人数
|
||||||
|
<div class="li-num">
|
||||||
|
<span>6</span>
|
||||||
|
<span>6</span>
|
||||||
|
<span>6</span>
|
||||||
|
<span>6</span>
|
||||||
|
<span>6</span>
|
||||||
|
<span>6</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="li-1 li-2">
|
||||||
|
景区安全度 <span class="color1">安全</span>
|
||||||
|
</div>
|
||||||
|
<div class="li-1 li-2">
|
||||||
|
景区游玩舒适度 <span class="color1">舒适</span>
|
||||||
|
</div>
|
||||||
|
<div class="li-1 li-2">
|
||||||
|
景区接待情况 <span class="color2">排队</span>
|
||||||
|
</div>
|
||||||
|
<div class="li-1 li-2">
|
||||||
|
交通拥挤度 <span class="color1">舒适</span>
|
||||||
|
</div>
|
||||||
|
<div class="li-1 li-2">
|
||||||
|
停车场负荷度 <span class="color1">超负荷</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- section -->
|
||||||
|
<div class="section">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- footer -->
|
||||||
|
<div class="footer">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.box-3-content{
|
||||||
|
// margin-top:200px;
|
||||||
|
.header{
|
||||||
|
margin:0 auto;
|
||||||
|
width:vw(1618);
|
||||||
|
height:vh(128);
|
||||||
|
background-image: url('/src/assets/images/header-top-bg.png');
|
||||||
|
background-size: contain;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
.li-2{
|
||||||
|
text-align: center;
|
||||||
|
span{
|
||||||
|
display: block;
|
||||||
|
font-size:vw(28);
|
||||||
|
font-weight: bold;
|
||||||
|
margin-top:vw(10);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.color1{
|
||||||
|
color:#02F9FA;
|
||||||
|
}
|
||||||
|
.color2{
|
||||||
|
color:#FF4400;
|
||||||
|
}
|
||||||
|
.color3{
|
||||||
|
color:#E21B1B;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.li-1{
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: vw(16);
|
||||||
|
color: rgba(255,255,255,0.9);
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
margin-right:vw(10);
|
||||||
|
.li-num{
|
||||||
|
margin-top:vh(10);
|
||||||
|
span{
|
||||||
|
display: inline-block;
|
||||||
|
margin:vw(2);
|
||||||
|
width: vw(40);
|
||||||
|
height: vh(40);
|
||||||
|
line-height: vh(40);
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size:vw(28);
|
||||||
|
background: linear-gradient( 180deg, #00B7FF 0%, #0033FF 100%);
|
||||||
|
border-radius: vw(4);
|
||||||
|
border: 1px solid;
|
||||||
|
border-image: linear-gradient(180deg, rgba(55, 216, 252, 0), rgba(131, 226, 255, 1)) 1 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<main class="wrapper">
|
<main class="wrapper">
|
||||||
<box1 />
|
<!-- <box1 /> -->
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<ul class="nav-left">
|
<ul class="nav-left">
|
||||||
<li class="nav-left-item">安全</li>
|
<li class="nav-left-item">安全</li>
|
||||||
@@ -14,15 +14,16 @@
|
|||||||
<li class="nav-right-item">舆情</li>
|
<li class="nav-right-item">舆情</li>
|
||||||
<li class="nav-right-item">酒店</li>
|
<li class="nav-right-item">酒店</li>
|
||||||
</ul>
|
</ul>
|
||||||
<box4 />
|
<box3 />
|
||||||
</div>
|
</div>
|
||||||
<box2 />
|
<!-- <box2 /> -->
|
||||||
</main>
|
</main>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import box1 from './components/box-1.vue'
|
import box1 from './components/box-1.vue'
|
||||||
import box4 from './components/box-4.vue'
|
import box4 from './components/box-4.vue'
|
||||||
|
import box3 from './components/box-3.vue'
|
||||||
import box2 from './components/box-2.vue'
|
import box2 from './components/box-2.vue'
|
||||||
|
|
||||||
onMounted(() => {})
|
onMounted(() => {})
|
||||||
|
|||||||
94
src/views/monitor/components/box-1.vue
Normal file
94
src/views/monitor/components/box-1.vue
Normal file
@@ -0,0 +1,94 @@
|
|||||||
|
<template>
|
||||||
|
<div class="box-1">
|
||||||
|
<div class="title">核心景区视频</div>
|
||||||
|
<ul class="list">
|
||||||
|
<li
|
||||||
|
class="item"
|
||||||
|
:style="{ backgroundImage: `url(${index == 0 ? item1 : item2})` }"
|
||||||
|
v-for="(item, index) in 10"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<p class="item-title">三峡之巅-最新异常名称</p>
|
||||||
|
<img class="item-img" src="@/assets/images/img-1.png" alt="" />
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
.box-1 {
|
||||||
|
margin: vh(10);
|
||||||
|
width: vw(326);
|
||||||
|
border-radius: vw(2);
|
||||||
|
background-image: url('@/assets/images/bg-1.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
width: vw(260);
|
||||||
|
height: vh(26);
|
||||||
|
text-align: center;
|
||||||
|
line-height: vh(26);
|
||||||
|
margin-left: vw(32.5);
|
||||||
|
font-size: vw(16);
|
||||||
|
font-weight: 800;
|
||||||
|
color: #fff;
|
||||||
|
background-image: url('@/assets/images/title-1.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list {
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
|
height: vh(1026);
|
||||||
|
padding: vw(8);
|
||||||
|
/* 滚动条整体样式 */
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
width: vw(0); /* 滚动条的宽度 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 滚动条轨道 */
|
||||||
|
&::-webkit-scrollbar-track {
|
||||||
|
background: #f1f1f1; /* 轨道的背景色 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 滚动条滑块 */
|
||||||
|
&::-webkit-scrollbar-thumb {
|
||||||
|
background: #888; /* 滑块的背景色 */
|
||||||
|
border-radius: 5px; /* 滑块的圆角 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 当鼠标悬停在滚动条上时滑块的样式 */
|
||||||
|
&::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: #555; /* 滑块的背景色 */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
margin-bottom: vh(13);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
&-title {
|
||||||
|
margin-bottom: vh(6);
|
||||||
|
margin-left: vw(45);
|
||||||
|
color: #fff;
|
||||||
|
font-size: vw(16);
|
||||||
|
height: vh(24);
|
||||||
|
line-height: vh(24);
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
&-img {
|
||||||
|
width: 100%;
|
||||||
|
height: vh(164);
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
625
src/views/monitor/components/box-2.vue
Normal file
625
src/views/monitor/components/box-2.vue
Normal file
@@ -0,0 +1,625 @@
|
|||||||
|
<template>
|
||||||
|
<div class="box-2">
|
||||||
|
<div class="header">
|
||||||
|
<div class="title"> 交通信息 </div>
|
||||||
|
</div>
|
||||||
|
<div class="flex pt-20 p-box">
|
||||||
|
<div class="item core">
|
||||||
|
<span class="title-1">全县景区数</span>
|
||||||
|
<div class="flex align-end color1"> <countup endVal="895" /><span class="unit"></span></div>
|
||||||
|
</div>
|
||||||
|
<div class="item queue">
|
||||||
|
<span class="title-1">核心景区数</span>
|
||||||
|
<div class="flex align-end color2"> <countup endVal="895" /><span class="unit"></span></div>
|
||||||
|
</div>
|
||||||
|
<div class="item congestion">
|
||||||
|
<span class="title-1">低感景区总数</span>
|
||||||
|
<div class="flex align-end color3"> <countup endVal="895" /><span class="unit"></span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="header">
|
||||||
|
<div class="title"> 景区信息 </div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-four">
|
||||||
|
<div class="item item1">
|
||||||
|
<div class="box1">
|
||||||
|
核心路段监控点位
|
||||||
|
<div class="item-num color1"> <countup endVal="895" /><span class="unit"></span></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="item item2">
|
||||||
|
<div class="box1">
|
||||||
|
核心景区分析点位
|
||||||
|
<div class="item-num color1"> <countup endVal="895" /><span class="unit"></span></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="item item3">
|
||||||
|
<div class="box1">
|
||||||
|
异常点位
|
||||||
|
<div class="item-num color2"> <countup endVal="895" /><span class="unit"></span></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="item item4">
|
||||||
|
<div class="box1">
|
||||||
|
异常告警
|
||||||
|
<div class="item-num color3"> <countup endVal="895" /><span class="unit"></span></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="item item5">
|
||||||
|
<div class="box1">
|
||||||
|
已处理
|
||||||
|
<div class="item-num color4"> <countup endVal="895" /><span class="unit"></span></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex pt-20 p-box">
|
||||||
|
<div class="box">
|
||||||
|
<div class="title-3"><span>异常告警</span></div>
|
||||||
|
<div class="pt-20">
|
||||||
|
<!-- <Line :width="370" :height="180" id="line" /> -->
|
||||||
|
<v-chart class="line-chart" :option="optionLine" autoresize />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="box">
|
||||||
|
<div class="title-3"><span>异常告警占比</span></div>
|
||||||
|
<div class="pt-20 h-flex">
|
||||||
|
<div class="left">
|
||||||
|
<v-chart class="chart" :option="option1" autoresize />
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<div class="li li-1"><span class="rk-img" >1</span> 核心监控1</div>
|
||||||
|
<div class="li li-2"><span class="rk-img" >1</span>核心监控1</div>
|
||||||
|
<div class="li li-3"><span class="rk-img" >1</span>核心监控1</div>
|
||||||
|
<div class="li"><span class="rk-img" >1</span>核心监控1</div>
|
||||||
|
<div class="li"><span class="rk-img" >1</span>核心监控1</div>
|
||||||
|
<div class="li"><span class="rk-img" >1</span>核心监控</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="header">
|
||||||
|
<div class="title"> 景区信息 </div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-four">
|
||||||
|
<div class="item item1">
|
||||||
|
<div class="box1">
|
||||||
|
核心路段监控点位
|
||||||
|
<div class="item-num color1"> <countup endVal="895" /><span class="unit"></span></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="item item2">
|
||||||
|
<div class="box1">
|
||||||
|
核心景区分析点位
|
||||||
|
<div class="item-num color1"> <countup endVal="895" /><span class="unit"></span></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="item item3">
|
||||||
|
<div class="box1">
|
||||||
|
异常点位
|
||||||
|
<div class="item-num color2"> <countup endVal="895" /><span class="unit"></span></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="item item4">
|
||||||
|
<div class="box1">
|
||||||
|
异常告警
|
||||||
|
<div class="item-num color3"> <countup endVal="895" /><span class="unit"></span></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="item item5">
|
||||||
|
<div class="box1">
|
||||||
|
已处理
|
||||||
|
<div class="item-num color4"> <countup endVal="895" /><span class="unit"></span></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex pt-20 p-box">
|
||||||
|
<div class="box">
|
||||||
|
<div class="title-3"><span>异常告警</span></div>
|
||||||
|
<div class="pt-20">
|
||||||
|
<!-- <Line :width="370" :height="180" id="line" /> -->
|
||||||
|
<v-chart class="line-chart" :option="optionLine" autoresize />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="box">
|
||||||
|
<div class="title-3"><span>异常告警占比</span></div>
|
||||||
|
<div class="pt-20 h-flex">
|
||||||
|
<div class="left">
|
||||||
|
<v-chart class="chart" :option="option1" autoresize />
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<div class="li li-1"><span class="rk-img" >1</span> 核心监控1</div>
|
||||||
|
<div class="li li-2"><span class="rk-img" >1</span>核心监控1</div>
|
||||||
|
<div class="li li-3"><span class="rk-img" >1</span>核心监控1</div>
|
||||||
|
<div class="li"><span class="rk-img" >1</span>核心监控1</div>
|
||||||
|
<div class="li"><span class="rk-img" >1</span>核心监控1</div>
|
||||||
|
<div class="li"><span class="rk-img" >1</span>核心监控</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import * as echarts from 'echarts/core';
|
||||||
|
import countup from 'vue-countup-v3'
|
||||||
|
import gauge from './gauge.vue'
|
||||||
|
import { use } from 'echarts/core';
|
||||||
|
import { CanvasRenderer } from 'echarts/renderers';
|
||||||
|
import { GaugeChart } from 'echarts/charts';
|
||||||
|
import { PieChart } from 'echarts/charts';
|
||||||
|
import { LineChart } from 'echarts/charts';
|
||||||
|
import {
|
||||||
|
TitleComponent,
|
||||||
|
TooltipComponent,
|
||||||
|
LegendComponent,
|
||||||
|
} from 'echarts/components';
|
||||||
|
import VChart, { THEME_KEY } from 'vue-echarts';
|
||||||
|
import { ref, provide } from 'vue';
|
||||||
|
|
||||||
|
use([
|
||||||
|
LineChart,
|
||||||
|
GaugeChart,
|
||||||
|
CanvasRenderer,
|
||||||
|
PieChart,
|
||||||
|
TitleComponent,
|
||||||
|
TooltipComponent,
|
||||||
|
LegendComponent,
|
||||||
|
]);
|
||||||
|
|
||||||
|
provide(THEME_KEY, 'dark');
|
||||||
|
const option1 = ref({
|
||||||
|
backgroundColor:'transparent',
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
type: 'scroll',
|
||||||
|
orient: 'vertical',
|
||||||
|
right: 0,
|
||||||
|
top: 0,
|
||||||
|
bottom: 20,
|
||||||
|
itemWidth:5,
|
||||||
|
itemHeight:5,
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: 'Access From',
|
||||||
|
type: 'pie',
|
||||||
|
left:-70,
|
||||||
|
top:-30,
|
||||||
|
// width:200,
|
||||||
|
// height:200,
|
||||||
|
radius: ['40%', '50%'],
|
||||||
|
avoidLabelOverlap: false,
|
||||||
|
padAngle: 5,
|
||||||
|
itemStyle: {
|
||||||
|
borderRadius: 2
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
position: 'center'
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
fontSize: 10,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
color:'#fff'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{ value: 200, name: '异常状况1' },
|
||||||
|
{ value: 500, name: '异常状况2' },
|
||||||
|
{ value: 234, name: '异常状况3' },
|
||||||
|
{ value: 135, name: '异常状况4' },
|
||||||
|
{ value: 100, name: '异常状况5' },
|
||||||
|
{ value: 777, name: '异常状况6' },
|
||||||
|
{ value: 777, name: '其他' },
|
||||||
|
]
|
||||||
|
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
const optionLine = ref({
|
||||||
|
backgroundColor:'transparent',
|
||||||
|
grid:{
|
||||||
|
top:'50',
|
||||||
|
bottom:'20',
|
||||||
|
left:'4%',
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
nameLocation: 'middle',
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
axisLabel: {
|
||||||
|
fontSize:10,
|
||||||
|
interval: 0, // 显示所有标签
|
||||||
|
rotate: 0, // 旋转标签45度
|
||||||
|
},
|
||||||
|
data: ['10:00', '10:00', '10:00', '10:00', '10:00', '10:00', '10:00', '10:00'],
|
||||||
|
axisTisk:{
|
||||||
|
show: true,
|
||||||
|
// 设置刻度长度
|
||||||
|
length: 1,
|
||||||
|
lineStyle: {
|
||||||
|
type: 'dashed' ,// 设置为虚线
|
||||||
|
width:0,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#0096FF' // 设置横线颜色
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
min:0,
|
||||||
|
max:45,
|
||||||
|
interval:15,
|
||||||
|
axisLabel: {
|
||||||
|
fontSize: 12 ,// 设置Y轴刻度字体大小
|
||||||
|
color: 'rgba(255,255,255,0.9)',
|
||||||
|
},
|
||||||
|
splitLine:{
|
||||||
|
show:true,
|
||||||
|
lineStyle:{
|
||||||
|
type:'dashed',
|
||||||
|
color:'#00D0FF'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
data: [0, 23, 30, 24, 40, 30, 45,26],
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
label:{
|
||||||
|
show:false,//隐藏坐标点
|
||||||
|
},
|
||||||
|
itemStyle:{
|
||||||
|
color:'transparent'
|
||||||
|
},
|
||||||
|
markLine:{
|
||||||
|
symbol:['none','none'],
|
||||||
|
label:{show:false}
|
||||||
|
},
|
||||||
|
|
||||||
|
lineStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#7DE7FF'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 0.5,
|
||||||
|
color: '#02F9FA'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#009DFF'
|
||||||
|
},
|
||||||
|
]),
|
||||||
|
width:3,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
})
|
||||||
|
onMounted(() => {})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.line-chart{
|
||||||
|
width:100%;
|
||||||
|
height:vh(200);
|
||||||
|
}
|
||||||
|
.box-2 {
|
||||||
|
margin-top: vh(120);
|
||||||
|
width: vw(800);
|
||||||
|
height: vh(950);
|
||||||
|
padding: vw(8);
|
||||||
|
box-sizing: border-box;
|
||||||
|
// background-image: url('@/assets/images/bg-2.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
.p-box{
|
||||||
|
padding-top:vh(10);
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.h-flex{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
.left{
|
||||||
|
flex:1;
|
||||||
|
width:vw(260);
|
||||||
|
}
|
||||||
|
.right{
|
||||||
|
margin-left:vw(20);
|
||||||
|
width:vw(120);
|
||||||
|
.li{
|
||||||
|
position: relative;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: vw(14);
|
||||||
|
color: #FFFFFF;
|
||||||
|
line-height: 16px;
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
position: relative;
|
||||||
|
padding-left:vw(30);
|
||||||
|
padding:0 vw(10);
|
||||||
|
padding-left:vw(15);
|
||||||
|
background: linear-gradient( 90deg, #1B5EC7 0%, rgba(27,94,199,0) 100%);
|
||||||
|
border-radius: 0px 0px 0px 0px;
|
||||||
|
height:vh(24);
|
||||||
|
line-height:vh(24);
|
||||||
|
margin-bottom:vh(8);
|
||||||
|
// opacity: 0.4;
|
||||||
|
.rk-img{
|
||||||
|
position: absolute;
|
||||||
|
width:vw(24);
|
||||||
|
height:vh(24);
|
||||||
|
line-height:vh(24);
|
||||||
|
left:vw(-12);
|
||||||
|
top:50%;
|
||||||
|
display: block;
|
||||||
|
background-image: url('/src/assets/images/rk-4.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.li-1{
|
||||||
|
background: linear-gradient( 90deg, #FFC10B 0%, rgba(255,209,44,0) 100%);
|
||||||
|
.rk-img{
|
||||||
|
background-image: url('/src/assets/images/rk-1.png');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.li-2{
|
||||||
|
background: linear-gradient( 90deg, #919191 0%, rgba(175,175,175,0) 100%);
|
||||||
|
.rk-img{
|
||||||
|
background-image: url('/src/assets/images/rk-2.png');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.li-3{
|
||||||
|
background: linear-gradient( 90deg, #919191 0%, rgba(175,175,175,0) 100%);
|
||||||
|
.rk-img{
|
||||||
|
background-image: url('/src/assets/images/rk-3.png');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.flex-four{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
.item{
|
||||||
|
|
||||||
|
margin:vw(10);
|
||||||
|
width:vw(142);
|
||||||
|
height:vh(106);
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: vw(14);
|
||||||
|
color: rgba(255,255,255,0.9);
|
||||||
|
line-height: 16px;
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding:0;
|
||||||
|
margin-top:0;
|
||||||
|
.box1{
|
||||||
|
width:vw(142);
|
||||||
|
}
|
||||||
|
.item-num{
|
||||||
|
margin-top:vh(10);
|
||||||
|
}
|
||||||
|
.color1{
|
||||||
|
color: #02F9FA;
|
||||||
|
}
|
||||||
|
.color2{
|
||||||
|
color: #F15A25;
|
||||||
|
}
|
||||||
|
.color3{
|
||||||
|
color: #E21B1B;
|
||||||
|
}
|
||||||
|
.color4{
|
||||||
|
color: #12B5FD;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.item1,.item2{
|
||||||
|
background-image: url('/src/assets/images/four-t-1.png');
|
||||||
|
}
|
||||||
|
.item3{
|
||||||
|
background-image: url('/src/assets/images/four-t-2.png');
|
||||||
|
}
|
||||||
|
.item4{
|
||||||
|
background-image: url('/src/assets/images/four-t-3.png');
|
||||||
|
}
|
||||||
|
.item5{
|
||||||
|
background-image: url('/src/assets/images/four-t-4.png');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.header {
|
||||||
|
position: relative;
|
||||||
|
.title {
|
||||||
|
margin: vh(5) 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%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
position: relative;
|
||||||
|
flex: 1;
|
||||||
|
padding-left: vw(100);
|
||||||
|
width:vw(230);
|
||||||
|
height: vh(70);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
.align-end{
|
||||||
|
margin-top:vh(10);
|
||||||
|
}
|
||||||
|
.color1{
|
||||||
|
color: #12B5FD;
|
||||||
|
}
|
||||||
|
.color2{
|
||||||
|
color: #02F9FA;
|
||||||
|
}
|
||||||
|
.color3{
|
||||||
|
color: #F15A25;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.title-1 {
|
||||||
|
position: absolute;
|
||||||
|
top: vh(10);
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: vw(14);
|
||||||
|
color: rgba(255, 255, 255, 0.7);
|
||||||
|
}
|
||||||
|
.countup-wrap {
|
||||||
|
|
||||||
|
font-size: vw(28);
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.unit {
|
||||||
|
color: #02f9fa;
|
||||||
|
font-size: vw(14);
|
||||||
|
margin-bottom: vh(4);
|
||||||
|
}
|
||||||
|
.core {
|
||||||
|
background-image: url('@/assets/images/m-t-1.png');
|
||||||
|
background-size: contain;
|
||||||
|
}
|
||||||
|
.queue {
|
||||||
|
background-image: url('@/assets/images/m-t-2.png');
|
||||||
|
background-size: contain;
|
||||||
|
}
|
||||||
|
.congestion {
|
||||||
|
background-image: url('@/assets/images/m-t-2.png');
|
||||||
|
background-size: contain;
|
||||||
|
}
|
||||||
|
.box {
|
||||||
|
width: vw(384);
|
||||||
|
// height: vh(360);
|
||||||
|
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);
|
||||||
|
width: 100%;
|
||||||
|
height: vh(88);
|
||||||
|
background-image: url('@/assets/images/bg-4.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
&-item {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
&-title {
|
||||||
|
font-size: vw(14);
|
||||||
|
color: rgba(255, 255, 255, 0.9);
|
||||||
|
}
|
||||||
|
&-value {
|
||||||
|
margin-top: vh(10);
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: vw(24);
|
||||||
|
color: #02f9fa;
|
||||||
|
}
|
||||||
|
.count {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: vw(28);
|
||||||
|
color: #ff4400 !important;
|
||||||
|
}
|
||||||
|
.prefix,
|
||||||
|
.suffix {
|
||||||
|
color: #ff4400;
|
||||||
|
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');
|
||||||
|
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>
|
||||||
124
src/views/monitor/components/box-3.vue
Normal file
124
src/views/monitor/components/box-3.vue
Normal file
@@ -0,0 +1,124 @@
|
|||||||
|
<template>
|
||||||
|
<!-- 视频 -->
|
||||||
|
<div class="box-3-content">
|
||||||
|
|
||||||
|
<div class="left-nav">
|
||||||
|
<div class="top-box">
|
||||||
|
<!-- <div class="title">监控切换</div> -->
|
||||||
|
<div class="ul">
|
||||||
|
<div class="li active">异常告警</div>
|
||||||
|
<div class="li">景区入口</div>
|
||||||
|
<div class="li">核心路段</div>
|
||||||
|
<div class="li">公共交通</div>
|
||||||
|
<div class="li">广场</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bom-box">
|
||||||
|
<div class="title">
|
||||||
|
<span>检索</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 视频 -->
|
||||||
|
<div class="video-box">
|
||||||
|
<div class="v-item" v-for="item in 15"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.box-3-content{
|
||||||
|
width:vw(2353);
|
||||||
|
height:vh(964);
|
||||||
|
// background-image: url('/src/assets/images/monotir-bg-1.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin-top: vh(120);
|
||||||
|
display: flex;
|
||||||
|
.video-box{
|
||||||
|
flex:1;
|
||||||
|
// padding:vh(40) vw(20);
|
||||||
|
display:flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding-top:0;
|
||||||
|
margin-left:vw(20);
|
||||||
|
.v-item{
|
||||||
|
width:vw(400);
|
||||||
|
height:vh(300);
|
||||||
|
background-image: url('/src/assets/images/v-item-bg.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
padding:vw(20);
|
||||||
|
margin-right:vw(4);
|
||||||
|
margin-bottom:vh(4);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.left-nav{
|
||||||
|
margin-left:vw(20);
|
||||||
|
// margin-top:vh(35);
|
||||||
|
width:vw(250);
|
||||||
|
.bom-box{
|
||||||
|
margin-top:vh(20);
|
||||||
|
.title{
|
||||||
|
background-image: url('/src/assets/images/nav-l-t-bg.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
|
||||||
|
span{
|
||||||
|
margin-left:vw(30);
|
||||||
|
font-weight: 800;
|
||||||
|
font-size: vw(15);
|
||||||
|
line-height: vh(26);
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
|
||||||
|
background: linear-gradient(90deg, #FFFFFF 0%, #5CB5FF 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.top-box{
|
||||||
|
text-align: left;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: vw(18);
|
||||||
|
color: rgba(255,255,255,0.7);
|
||||||
|
line-height: 21px;
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
.title{
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: vw(15);
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
height:vh(35);
|
||||||
|
line-height: vh(34);
|
||||||
|
padding-left:vw(20);
|
||||||
|
// background: linear-gradient(90deg, #FFFFFF 0%, #75C1FF 100%);
|
||||||
|
}
|
||||||
|
.ul{
|
||||||
|
.li{
|
||||||
|
background: url('/src/assets/images/m-nav-bg-1.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
width:vw(250);
|
||||||
|
height:vh(58);
|
||||||
|
line-height:vh(58);
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom:vh(15);
|
||||||
|
}
|
||||||
|
.active{
|
||||||
|
background: url('/src/assets/images/m-nav-bg-2.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
// width:vw(178);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
174
src/views/monitor/components/box-4.vue
Normal file
174
src/views/monitor/components/box-4.vue
Normal file
@@ -0,0 +1,174 @@
|
|||||||
|
<template>
|
||||||
|
<div class="box-4-content">
|
||||||
|
<div class="top-box">
|
||||||
|
<div class="title">融合通信</div>
|
||||||
|
<div class="icon-box flex">
|
||||||
|
<div class="icon">
|
||||||
|
<img src="/src/assets/images/r-icon-1.png" alt="" />
|
||||||
|
白帝城
|
||||||
|
</div>
|
||||||
|
<div class="icon"><img src="/src/assets/images/r-icon-2.png" alt="" />三峡之颠</div>
|
||||||
|
<div class="icon"><img src="/src/assets/images/r-icon-3.png" alt="" />龙桥河</div>
|
||||||
|
<div class="icon"><img src="/src/assets/images/r-icon-4.png" alt="" />消防队</div>
|
||||||
|
<div class="icon"><img src="/src/assets/images/r-icon-5.png" alt="" />文旅城</div>
|
||||||
|
<div class="icon"><img src="/src/assets/images/r-icon-6.png" alt="" />交通城</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bom-box">
|
||||||
|
<div class="title">
|
||||||
|
<span>最近联系</span>
|
||||||
|
</div>
|
||||||
|
<table class="table">
|
||||||
|
<tr class="tr-th">
|
||||||
|
<th>人员姓名</th>
|
||||||
|
<th>部门</th>
|
||||||
|
<th>职位</th>
|
||||||
|
<th>时间</th>
|
||||||
|
</tr>
|
||||||
|
<tr class="tr-td">
|
||||||
|
<td>January</td>
|
||||||
|
<td>$100</td>
|
||||||
|
<td>January</td>
|
||||||
|
<td>$100</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="tr-td">
|
||||||
|
<td>February</td>
|
||||||
|
<td>$80</td>
|
||||||
|
<td>February</td>
|
||||||
|
<td>$80</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="tr-td">
|
||||||
|
<td>February</td>
|
||||||
|
<td>$80</td>
|
||||||
|
<td>February</td>
|
||||||
|
<td>$80</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="tr-td">
|
||||||
|
<td>February</td>
|
||||||
|
<td>$80</td>
|
||||||
|
<td>February</td>
|
||||||
|
<td>$80</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.box-4-content{
|
||||||
|
width:vw(317);
|
||||||
|
height:vh(1062);
|
||||||
|
background-image: url('/src/assets/images/rt-bg.png');
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin-top:vh(10);
|
||||||
|
margin-left:vw(10);
|
||||||
|
position: relative;
|
||||||
|
z-index: 999;
|
||||||
|
.bom-box{
|
||||||
|
.table{
|
||||||
|
width:100%;
|
||||||
|
margin-top:vh(5);
|
||||||
|
.tr-th{
|
||||||
|
background: linear-gradient( 180deg, rgba(0,99,255,0) 0%, #0063FF 100%);
|
||||||
|
border-radius: 0px 0px 0px 0px;
|
||||||
|
// border: 1px solid;
|
||||||
|
border-image: linear-gradient(180deg, rgba(0, 150, 255, 0), rgba(0, 150, 255, 1)) 1 1;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: vw(12);
|
||||||
|
color: #0096FF;
|
||||||
|
line-height: vh(14);
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
|
||||||
|
th{
|
||||||
|
padding:vw(5);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.tr-td{
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: vw(14);
|
||||||
|
color: #F1F7FF;
|
||||||
|
line-height: vh(16);
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
|
||||||
|
td{
|
||||||
|
padding:vh(5) vw(10)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tr-td:nth-child(odd){
|
||||||
|
background: linear-gradient( 90deg, rgba(0,150,255,0) 0%, rgba(0,150,255,0.22) 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
background-image: url('/src/assets/images/nav-l-t-bg.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
|
||||||
|
span{
|
||||||
|
margin-left:vw(30);
|
||||||
|
font-weight: 800;
|
||||||
|
font-size: vw(15);
|
||||||
|
line-height: vh(26);
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
|
||||||
|
background: linear-gradient(90deg, #FFFFFF 0%, #5CB5FF 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.top-box{
|
||||||
|
width:100%;
|
||||||
|
height:vh(500);
|
||||||
|
.icon-box{
|
||||||
|
justify-content: center;
|
||||||
|
font-family: Inter, Inter;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: vw(14);
|
||||||
|
color: #FFFFFF;
|
||||||
|
line-height: vh(16);
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
.icon{
|
||||||
|
|
||||||
|
display: block;
|
||||||
|
margin:vh(20) auto;
|
||||||
|
width:vw(86);
|
||||||
|
height:vh(104);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
font-weight: 800;
|
||||||
|
font-size: vw(16);
|
||||||
|
line-height: vh(26);
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
|
||||||
|
background: linear-gradient(90deg, #FFFFFF 0%, #5CB5FF 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
color: transparent;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
516
src/views/monitor/components/box-5.vue
Normal file
516
src/views/monitor/components/box-5.vue
Normal file
@@ -0,0 +1,516 @@
|
|||||||
|
<template>
|
||||||
|
<!-- 安全检测 -->
|
||||||
|
<div class="box-detection">
|
||||||
|
<!-- 地图 -->
|
||||||
|
<!-- <div class="detection-top"></div> -->
|
||||||
|
<div class="detection-bom flex">
|
||||||
|
<!-- 数据 -->
|
||||||
|
<div class="d-left">
|
||||||
|
<div class="t-title">
|
||||||
|
<span>监控点位统计</span>
|
||||||
|
</div>
|
||||||
|
<div class="t-census flex">
|
||||||
|
<img class="t-icon" src="@/assets/images/t-ico-1.png" alt="" />
|
||||||
|
<div class="item">
|
||||||
|
监控点位 <div class="color1"><countup endVal="895" /></div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
核心点位 <div class="color1"><countup endVal="895" /></div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
拥堵次数 <div class="color2"><countup endVal="895" /></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="box">
|
||||||
|
<div class="title-3"><span>异常告警占比</span></div>
|
||||||
|
<div class="pt-20 h-flex">
|
||||||
|
<div class="left">
|
||||||
|
<v-chart class="chart" :option="optionBar" autoresize />
|
||||||
|
<!-- <v-chart class="chart" :option="option1" autoresize /> -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-right">
|
||||||
|
<div class="t-title">
|
||||||
|
<span>交通信息</span>
|
||||||
|
</div>
|
||||||
|
<div class="t-census flex">
|
||||||
|
<img class="t-icon" src="@/assets/images/t-ico-1.png" alt="" />
|
||||||
|
<div class="item">
|
||||||
|
监控点位 <div class="color1"><countup endVal="895" /></div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
核心点位 <div class="color1"><countup endVal="895" /></div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
拥堵次数 <div class="color2"><countup endVal="895" /></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="box">
|
||||||
|
<div class="title-3"><span>异常告警占比</span></div>
|
||||||
|
<div class="pt-20 h-flex">
|
||||||
|
<div class="left">
|
||||||
|
<v-chart class="line-chart" :option="optionLine" autoresize />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import * as echarts from 'echarts/core';
|
||||||
|
import countup from 'vue-countup-v3'
|
||||||
|
import gauge from './gauge.vue'
|
||||||
|
import { use } from 'echarts/core';
|
||||||
|
import { CanvasRenderer } from 'echarts/renderers';
|
||||||
|
import { GaugeChart } from 'echarts/charts';
|
||||||
|
import { PieChart } from 'echarts/charts';
|
||||||
|
import { LineChart } from 'echarts/charts';
|
||||||
|
import { BarChart } from 'echarts/charts';
|
||||||
|
import {
|
||||||
|
TitleComponent,
|
||||||
|
TooltipComponent,
|
||||||
|
LegendComponent,
|
||||||
|
} from 'echarts/components';
|
||||||
|
import VChart, { THEME_KEY } from 'vue-echarts';
|
||||||
|
import { ref, provide } from 'vue';
|
||||||
|
|
||||||
|
use([
|
||||||
|
LineChart,
|
||||||
|
GaugeChart,
|
||||||
|
CanvasRenderer,
|
||||||
|
PieChart,
|
||||||
|
BarChart,
|
||||||
|
TitleComponent,
|
||||||
|
TooltipComponent,
|
||||||
|
LegendComponent,
|
||||||
|
]);
|
||||||
|
|
||||||
|
provide(THEME_KEY, 'dark');
|
||||||
|
const option1 = ref({
|
||||||
|
backgroundColor:'transparent',
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
type: 'scroll',
|
||||||
|
orient: 'vertical',
|
||||||
|
right: 30,
|
||||||
|
top: 30,
|
||||||
|
bottom: 20,
|
||||||
|
itemWidth:5,
|
||||||
|
itemHeight:5,
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: 'Access From',
|
||||||
|
type: 'pie',
|
||||||
|
left:-100,
|
||||||
|
top:-30,
|
||||||
|
// width:200,
|
||||||
|
// height:200,
|
||||||
|
radius: ['40%', '50%'],
|
||||||
|
avoidLabelOverlap: false,
|
||||||
|
padAngle: 5,
|
||||||
|
itemStyle: {
|
||||||
|
borderRadius: 2
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
position: 'center'
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
fontSize: 10,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
color:'#fff'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{ value: 200, name: '异常状况1' },
|
||||||
|
{ value: 500, name: '异常状况2' },
|
||||||
|
{ value: 234, name: '异常状况3' },
|
||||||
|
{ value: 135, name: '异常状况4' },
|
||||||
|
{ value: 100, name: '异常状况5' },
|
||||||
|
{ value: 777, name: '异常状况6' },
|
||||||
|
{ value: 777, name: '其他' },
|
||||||
|
]
|
||||||
|
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
const optionLine = ref({
|
||||||
|
backgroundColor:'transparent',
|
||||||
|
grid:{
|
||||||
|
top:'50',
|
||||||
|
bottom:'50',
|
||||||
|
left:'4%',
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
nameLocation: 'middle',
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
axisLabel: {
|
||||||
|
fontSize:10,
|
||||||
|
interval: 0, // 显示所有标签
|
||||||
|
rotate: 0, // 旋转标签45度
|
||||||
|
},
|
||||||
|
data: ['10:00', '10:00', '10:00', '10:00', '10:00', '10:00', '10:00', '10:00'],
|
||||||
|
axisTisk:{
|
||||||
|
show: true,
|
||||||
|
// 设置刻度长度
|
||||||
|
length: 1,
|
||||||
|
lineStyle: {
|
||||||
|
type: 'dashed' ,// 设置为虚线
|
||||||
|
width:0,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#0096FF' // 设置横线颜色
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
min:0,
|
||||||
|
max:45,
|
||||||
|
interval:15,
|
||||||
|
axisLabel: {
|
||||||
|
fontSize: 12 ,// 设置Y轴刻度字体大小
|
||||||
|
color: 'rgba(255,255,255,0.9)',
|
||||||
|
},
|
||||||
|
splitLine:{
|
||||||
|
show:true,
|
||||||
|
lineStyle:{
|
||||||
|
type:'dashed',
|
||||||
|
color:'#00D0FF'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
data: [0, 23, 30, 24, 40, 30, 45,26],
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
label:{
|
||||||
|
show:false,//隐藏坐标点
|
||||||
|
},
|
||||||
|
itemStyle:{
|
||||||
|
color:'transparent'
|
||||||
|
},
|
||||||
|
markLine:{
|
||||||
|
symbol:['none','none'],
|
||||||
|
label:{show:false}
|
||||||
|
},
|
||||||
|
|
||||||
|
lineStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#7DE7FF'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 0.5,
|
||||||
|
color: '#02F9FA'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#009DFF'
|
||||||
|
},
|
||||||
|
]),
|
||||||
|
width:3,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
})
|
||||||
|
const optionBar = ref({
|
||||||
|
backgroundColor:'transparent',
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
// type: 'scroll',
|
||||||
|
// orient: 'vertical',
|
||||||
|
right: 0,
|
||||||
|
top: 0,
|
||||||
|
bottom: 20,
|
||||||
|
itemWidth:5,
|
||||||
|
itemHeight:5,
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '20%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
nameLocation: 'middle',
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
axisLabel: {
|
||||||
|
fontSize:10,
|
||||||
|
interval: 0, // 显示所有标签
|
||||||
|
rotate: 0, // 旋转标签45度
|
||||||
|
},
|
||||||
|
|
||||||
|
data: ['10:00', '10:00', '10:00', '10:00', '10:00', '10:00', '10:00', '10:00'],
|
||||||
|
axisTisk:{
|
||||||
|
alignWithLabel: true,
|
||||||
|
show: false,
|
||||||
|
// 设置刻度长度
|
||||||
|
length: 0,
|
||||||
|
lineStyle: {
|
||||||
|
type: 'dashed' ,// 设置为虚线
|
||||||
|
width:0,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
min:0,
|
||||||
|
max:45,
|
||||||
|
interval:15,
|
||||||
|
axisLabel: {
|
||||||
|
fontSize: 12 ,// 设置Y轴刻度字体大小
|
||||||
|
color: 'rgba(255,255,255,0.9)',
|
||||||
|
offset:10,
|
||||||
|
},
|
||||||
|
splitLine:{
|
||||||
|
show:false,
|
||||||
|
lineStyle:{
|
||||||
|
type:'dashed',
|
||||||
|
color:'#00D0FF'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: '#999'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
|
||||||
|
{
|
||||||
|
name: '三峡之巅',
|
||||||
|
type: 'bar',
|
||||||
|
stack: 'Ad',
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [10, 0, 16, 10, 22, 11, 9,30],
|
||||||
|
barWidth: '45%', // 设置柱体粗细，可以是百分比或者像素值
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '白帝城',
|
||||||
|
type: 'bar',
|
||||||
|
stack: 'Ad',
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [20, 5, 14, 14, 0, 20, 11,2]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '龙河桥',
|
||||||
|
type: 'bar',
|
||||||
|
stack: 'Ad',
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [15, 20, 8, 19, 20, 5, 22,13]
|
||||||
|
},
|
||||||
|
|
||||||
|
]
|
||||||
|
})
|
||||||
|
onMounted(() => {})
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.line-chart{
|
||||||
|
width:100%;
|
||||||
|
height:vh(240);
|
||||||
|
}
|
||||||
|
.box-detection{
|
||||||
|
margin-top: vh(120);
|
||||||
|
width:vw(820);
|
||||||
|
height:vh(950);
|
||||||
|
background: linear-gradient( 321deg, #0B2F64 0%, #062B57 91%, rgba(5,40,79,0) 100%);
|
||||||
|
border-radius: 0px 0px 0px 0px;
|
||||||
|
.detection-top{
|
||||||
|
width:100%;
|
||||||
|
height:vh(580);
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
.detection-bom{
|
||||||
|
justify-content: space-between;
|
||||||
|
.d-left{
|
||||||
|
width:vw(405);
|
||||||
|
.left{
|
||||||
|
width:100%;
|
||||||
|
height:vh(240);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.d-right{
|
||||||
|
width:vw(405);
|
||||||
|
}
|
||||||
|
.box {
|
||||||
|
width:100%;
|
||||||
|
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);
|
||||||
|
width: 100%;
|
||||||
|
height: vh(88);
|
||||||
|
background-image: url('@/assets/images/bg-4.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
&-item {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
&-title {
|
||||||
|
font-size: vw(14);
|
||||||
|
color: rgba(255, 255, 255, 0.9);
|
||||||
|
}
|
||||||
|
&-value {
|
||||||
|
margin-top: vh(10);
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: vw(24);
|
||||||
|
color: #02f9fa;
|
||||||
|
}
|
||||||
|
.count {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: vw(28);
|
||||||
|
color: #ff4400 !important;
|
||||||
|
}
|
||||||
|
.prefix,
|
||||||
|
.suffix {
|
||||||
|
color: #ff4400;
|
||||||
|
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');
|
||||||
|
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; /* 兼容其他浏览器 */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.t-title {
|
||||||
|
margin: vh(10) auto;
|
||||||
|
width: 100%;
|
||||||
|
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%;
|
||||||
|
}
|
||||||
|
.t-census{
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background-image: url('@/assets/images/i-data-bg-1.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
padding:vw(10);
|
||||||
|
.t-icon{
|
||||||
|
width:vw(45);
|
||||||
|
height:vh(48);
|
||||||
|
}
|
||||||
|
.item{
|
||||||
|
flex:1;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: vw(14);
|
||||||
|
color: rgba(255,255,255,0.9);
|
||||||
|
line-height: vh(16);
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
.color1{
|
||||||
|
display: block;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: vw(24);
|
||||||
|
color: #FFFFFF;
|
||||||
|
line-height: 28px;
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
.color2{
|
||||||
|
display: block;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: vw(24);
|
||||||
|
color: #F15A25;
|
||||||
|
line-height: 28px;
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
109
src/views/monitor/components/gauge.vue
Normal file
109
src/views/monitor/components/gauge.vue
Normal file
@@ -0,0 +1,109 @@
|
|||||||
|
<template>
|
||||||
|
<div class="gauge" :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({
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'gauge',
|
||||||
|
startAngle: 180,
|
||||||
|
endAngle: 0,
|
||||||
|
min: 0,
|
||||||
|
max: 100,
|
||||||
|
radius: '100%',
|
||||||
|
splitNumber: 10,
|
||||||
|
center: ['50%', '60%'],
|
||||||
|
itemStyle: {
|
||||||
|
color: '#58D9F9',
|
||||||
|
shadowColor: 'rgba(0,138,255,0.45)',
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowOffsetX: 2,
|
||||||
|
shadowOffsetY: 2
|
||||||
|
},
|
||||||
|
progress: {
|
||||||
|
show: true,
|
||||||
|
roundCap: true,
|
||||||
|
width: fitChartSize(6)
|
||||||
|
},
|
||||||
|
pointer: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
roundCap: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: fitChartSize(6)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
detail: {
|
||||||
|
width: '100%',
|
||||||
|
lineHeight: 20,
|
||||||
|
height: 20,
|
||||||
|
offsetCenter: [0, '20%'],
|
||||||
|
valueAnimation: true,
|
||||||
|
formatter: function (value) {
|
||||||
|
return '{value|' + value.toFixed(0) + '}{unit|%}'
|
||||||
|
},
|
||||||
|
rich: {
|
||||||
|
value: {
|
||||||
|
fontSize: fitChartSize(12),
|
||||||
|
fontWeight: 'bolder',
|
||||||
|
color: '#02F9FA'
|
||||||
|
},
|
||||||
|
unit: {
|
||||||
|
fontSize: fitChartSize(12),
|
||||||
|
color: '#02F9FA'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: 80
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
window.addEventListener('resize', resize)
|
||||||
|
}
|
||||||
|
const resize = () => {
|
||||||
|
if (gaugeChart) {
|
||||||
|
gaugeChart.dispose()
|
||||||
|
init()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.gauge {
|
||||||
|
width: vw(70);
|
||||||
|
height: vh(50);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
100
src/views/monitor/index.vue
Normal file
100
src/views/monitor/index.vue
Normal file
@@ -0,0 +1,100 @@
|
|||||||
|
<template>
|
||||||
|
<main class="wrapper">
|
||||||
|
<box1 />
|
||||||
|
<box5/>
|
||||||
|
<!-- <box2 /> -->
|
||||||
|
<box3 />
|
||||||
|
<div class="header">
|
||||||
|
<ul class="nav-left">
|
||||||
|
<li class="nav-left-item">奉节县</li>
|
||||||
|
<li class="nav-left-item">三峡之巅</li>
|
||||||
|
<li class="nav-left-item">白帝城</li>
|
||||||
|
<li class="nav-left-item">龙河桥</li>
|
||||||
|
</ul>
|
||||||
|
<div class="title">监控大屏</div>
|
||||||
|
<ul class="nav-right">
|
||||||
|
<li class="nav-right-item">停车</li>
|
||||||
|
<li class="nav-right-item">工单</li>
|
||||||
|
<li class="nav-right-item">舆情</li>
|
||||||
|
<li class="nav-right-item">酒店</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<box4 />
|
||||||
|
</main>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import box1 from './components/box-1.vue'
|
||||||
|
import box4 from './components/box-4.vue'
|
||||||
|
import box3 from './components/box-3.vue'
|
||||||
|
import box2 from './components/box-2.vue'
|
||||||
|
import box5 from './components/box-5.vue'
|
||||||
|
|
||||||
|
onMounted(() => {})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.wrapper {
|
||||||
|
display: flex;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: #0a254b;
|
||||||
|
.header {
|
||||||
|
position: absolute;
|
||||||
|
left: vw(326);
|
||||||
|
.title {
|
||||||
|
width: vw(3133);
|
||||||
|
height: vh(120);
|
||||||
|
font-size: vw(48);
|
||||||
|
font-weight: 800;
|
||||||
|
text-align: center;
|
||||||
|
padding-top: vh(20);
|
||||||
|
color: #fff;
|
||||||
|
letter-spacing: vw(10);
|
||||||
|
box-sizing: border-box;
|
||||||
|
text-shadow: 0px 4px 7px rgba(0, 150, 255, 0.75);
|
||||||
|
background-image: url('@/assets/images/title.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
.nav-left {
|
||||||
|
position: absolute;
|
||||||
|
left: vw(380);
|
||||||
|
top: vh(34);
|
||||||
|
display: flex;
|
||||||
|
&-item {
|
||||||
|
cursor: pointer;
|
||||||
|
margin-left: vh(-10);
|
||||||
|
width: vw(210);
|
||||||
|
height: vh(56);
|
||||||
|
padding-top: vh(10);
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: vw(28);
|
||||||
|
text-align: center;
|
||||||
|
color: rgba(208, 236, 255, 0.9);
|
||||||
|
background-image: url('@/assets/images/title-2.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.nav-right {
|
||||||
|
position: absolute;
|
||||||
|
right: vw(424);
|
||||||
|
top: vh(34);
|
||||||
|
display: flex;
|
||||||
|
&-item {
|
||||||
|
cursor: pointer;
|
||||||
|
margin-right: vh(-10);
|
||||||
|
width: vw(210);
|
||||||
|
height: vh(56);
|
||||||
|
padding-top: vh(10);
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: vw(28);
|
||||||
|
text-align: center;
|
||||||
|
color: rgba(208, 236, 255, 0.9);
|
||||||
|
background-image: url('@/assets/images/title-3.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user