diff --git a/package-lock.json b/package-lock.json index 73fcc81..d90c3ca 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,7 @@ "vue-countup-v3": "^1.4.2", "vue-echarts": "^7.0.3", "vue-router": "^4.4.5", + "vue-video-player": "^6.0.0", "vue3-video-play": "^1.3.2" }, "devDependencies": { @@ -425,6 +426,18 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/@babel/runtime": { + "version": "7.26.0", + "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.26.0.tgz", + "integrity": "sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==", + "peer": true, + "dependencies": { + "regenerator-runtime": "^0.14.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, "node_modules/@babel/template": { "version": "7.25.9", "resolved": "https://registry.npmmirror.com/@babel/template/-/template-7.25.9.tgz", @@ -816,11 +829,76 @@ "undici-types": "~6.20.0" } }, + "node_modules/@types/video.js": { + "version": "7.3.58", + "resolved": "https://registry.npmmirror.com/@types/video.js/-/video.js-7.3.58.tgz", + "integrity": "sha512-1CQjuSrgbv1/dhmcfQ83eVyYbvGyqhTvb2Opxr0QCV+iJ4J6/J+XWQ3Om59WiwCd1MN3rDUHasx5XRrpUtewYQ==", + "peer": true + }, "node_modules/@types/web-bluetooth": { "version": "0.0.16", "resolved": "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz", "integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==" }, + "node_modules/@videojs-player/vue": { + "version": "1.0.0", + "resolved": "https://registry.npmmirror.com/@videojs-player/vue/-/vue-1.0.0.tgz", + "integrity": "sha512-WonTezRfKu3fYdQLt/ta+nuKH6gMZUv8l40Jke/j4Lae7IqeO/+lLAmBnh3ni88bwR+vkFXIlZ2Ci7VKInIYJg==", + "peerDependencies": { + "@types/video.js": "7.x", + "video.js": "7.x", + "vue": "3.x" + } + }, + "node_modules/@videojs/http-streaming": { + "version": "2.16.3", + "resolved": "https://registry.npmmirror.com/@videojs/http-streaming/-/http-streaming-2.16.3.tgz", + "integrity": "sha512-91CJv5PnFBzNBvyEjt+9cPzTK/xoVixARj2g7ZAvItA+5bx8VKdk5RxCz/PP2kdzz9W+NiDUMPkdmTsosmy69Q==", + "peer": true, + "dependencies": { + "@babel/runtime": "^7.12.5", + "@videojs/vhs-utils": "3.0.5", + "aes-decrypter": "3.1.3", + "global": "^4.4.0", + "m3u8-parser": "4.8.0", + "mpd-parser": "^0.22.1", + "mux.js": "6.0.1", + "video.js": "^6 || ^7" + }, + "engines": { + "node": ">=8", + "npm": ">=5" + }, + "peerDependencies": { + "video.js": "^6 || ^7" + } + }, + "node_modules/@videojs/vhs-utils": { + "version": "3.0.5", + "resolved": "https://registry.npmmirror.com/@videojs/vhs-utils/-/vhs-utils-3.0.5.tgz", + "integrity": "sha512-PKVgdo8/GReqdx512F+ombhS+Bzogiofy1LgAj4tN8PfdBx3HSS7V5WfJotKTqtOWGwVfSWsrYN/t09/DSryrw==", + "peer": true, + "dependencies": { + "@babel/runtime": "^7.12.5", + "global": "^4.4.0", + "url-toolkit": "^2.2.1" + }, + "engines": { + "node": ">=8", + "npm": ">=5" + } + }, + "node_modules/@videojs/xhr": { + "version": "2.6.0", + "resolved": "https://registry.npmmirror.com/@videojs/xhr/-/xhr-2.6.0.tgz", + "integrity": "sha512-7J361GiN1tXpm+gd0xz2QWr3xNWBE+rytvo8J3KuggFaLg+U37gZQ2BuPLcnkfGffy2e+ozY70RHC8jt7zjA6Q==", + "peer": true, + "dependencies": { + "@babel/runtime": "^7.5.5", + "global": "~4.4.0", + "is-function": "^1.0.1" + } + }, "node_modules/@vitejs/plugin-vue": { "version": "5.2.1", "resolved": "https://registry.npmmirror.com/@vitejs/plugin-vue/-/plugin-vue-5.2.1.tgz", @@ -1249,6 +1327,15 @@ "@xtuc/long": "4.2.2" } }, + "node_modules/@xmldom/xmldom": { + "version": "0.8.10", + "resolved": "https://registry.npmmirror.com/@xmldom/xmldom/-/xmldom-0.8.10.tgz", + "integrity": "sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw==", + "peer": true, + "engines": { + "node": ">=10.0.0" + } + }, "node_modules/@xtuc/ieee754": { "version": "1.2.0", "resolved": "https://registry.npmmirror.com/@xtuc/ieee754/-/ieee754-1.2.0.tgz", @@ -1275,6 +1362,18 @@ "node": ">=0.4.0" } }, + "node_modules/aes-decrypter": { + "version": "3.1.3", + "resolved": "https://registry.npmmirror.com/aes-decrypter/-/aes-decrypter-3.1.3.tgz", + "integrity": "sha512-VkG9g4BbhMBy+N5/XodDeV6F02chEk9IpgRTq/0bS80y4dzy79VH2Gtms02VXomf3HmyRe3yyJYkJ990ns+d6A==", + "peer": true, + "dependencies": { + "@babel/runtime": "^7.12.5", + "@videojs/vhs-utils": "^3.0.5", + "global": "^4.4.0", + "pkcs7": "^1.0.4" + } + }, "node_modules/ajv": { "version": "6.12.6", "resolved": "https://registry.npmmirror.com/ajv/-/ajv-6.12.6.tgz", @@ -1673,6 +1772,12 @@ "node": ">=0.10" } }, + "node_modules/dom-walk": { + "version": "0.1.2", + "resolved": "https://registry.npmmirror.com/dom-walk/-/dom-walk-0.1.2.tgz", + "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==", + "peer": true + }, "node_modules/echarts": { "version": "5.5.1", "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.5.1.tgz", @@ -2100,6 +2205,16 @@ "dev": true, "peer": true }, + "node_modules/global": { + "version": "4.4.0", + "resolved": "https://registry.npmmirror.com/global/-/global-4.4.0.tgz", + "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==", + "peer": true, + "dependencies": { + "min-document": "^2.19.0", + "process": "^0.11.10" + } + }, "node_modules/globals": { "version": "11.12.0", "resolved": "https://registry.npmmirror.com/globals/-/globals-11.12.0.tgz", @@ -2164,6 +2279,12 @@ "integrity": "sha512-P8IdPQHq3lA1xVeBRi5VPqUm5HDgKnx0Ru51wZz5mjxHr5n3RWhjIpOFU7ybkUxfB+5IToy+OLaHYDBIWsv+uw==", "dev": true }, + "node_modules/individual": { + "version": "2.0.0", + "resolved": "https://registry.npmmirror.com/individual/-/individual-2.0.0.tgz", + "integrity": "sha512-pWt8hBCqJsUWI/HtcfWod7+N9SgAqyPEaF7JQjwzjn5vGrpg6aQ5qeAFQ7dx//UH4J1O+7xqew+gCeeFt6xN/g==", + "peer": true + }, "node_modules/is-binary-path": { "version": "2.1.0", "resolved": "https://registry.npmmirror.com/is-binary-path/-/is-binary-path-2.1.0.tgz", @@ -2200,6 +2321,12 @@ "node": ">=0.10.0" } }, + "node_modules/is-function": { + "version": "1.0.2", + "resolved": "https://registry.npmmirror.com/is-function/-/is-function-1.0.2.tgz", + "integrity": "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ==", + "peer": true + }, "node_modules/is-glob": { "version": "4.0.3", "resolved": "https://registry.npmmirror.com/is-glob/-/is-glob-4.0.3.tgz", @@ -2399,6 +2526,12 @@ "graceful-fs": "^4.1.6" } }, + "node_modules/keycode": { + "version": "2.2.1", + "resolved": "https://registry.npmmirror.com/keycode/-/keycode-2.2.1.tgz", + "integrity": "sha512-Rdgz9Hl9Iv4QKi8b0OlCRQEzp4AgVxyCtz5S/+VIHezDmrDhkp2N2TqBWOLz0/gbeREXOOiI9/4b8BY9uw2vFg==", + "peer": true + }, "node_modules/kind-of": { "version": "6.0.3", "resolved": "https://registry.npmmirror.com/kind-of/-/kind-of-6.0.3.tgz", @@ -2495,6 +2628,17 @@ "yallist": "^3.0.2" } }, + "node_modules/m3u8-parser": { + "version": "4.8.0", + "resolved": "https://registry.npmmirror.com/m3u8-parser/-/m3u8-parser-4.8.0.tgz", + "integrity": "sha512-UqA2a/Pw3liR6Df3gwxrqghCP17OpPlQj6RBPLYygf/ZSQ4MoSgvdvhvt35qV+3NaaA0FSZx93Ix+2brT1U7cA==", + "peer": true, + "dependencies": { + "@babel/runtime": "^7.12.5", + "@videojs/vhs-utils": "^3.0.5", + "global": "^4.4.0" + } + }, "node_modules/magic-string": { "version": "0.30.14", "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.14.tgz", @@ -2568,6 +2712,15 @@ "node": ">= 0.6" } }, + "node_modules/min-document": { + "version": "2.19.0", + "resolved": "https://registry.npmmirror.com/min-document/-/min-document-2.19.0.tgz", + "integrity": "sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==", + "peer": true, + "dependencies": { + "dom-walk": "^0.1.0" + } + }, "node_modules/minimatch": { "version": "9.0.5", "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-9.0.5.tgz", @@ -2610,6 +2763,21 @@ "ufo": "^1.5.4" } }, + "node_modules/mpd-parser": { + "version": "0.22.1", + "resolved": "https://registry.npmmirror.com/mpd-parser/-/mpd-parser-0.22.1.tgz", + "integrity": "sha512-fwBebvpyPUU8bOzvhX0VQZgSohncbgYwUyJJoTSNpmy7ccD2ryiCvM7oRkn/xQH5cv73/xU7rJSNCLjdGFor0Q==", + "peer": true, + "dependencies": { + "@babel/runtime": "^7.12.5", + "@videojs/vhs-utils": "^3.0.5", + "@xmldom/xmldom": "^0.8.3", + "global": "^4.4.0" + }, + "bin": { + "mpd-to-m3u8-json": "bin/parse.js" + } + }, "node_modules/mrmime": { "version": "2.0.0", "resolved": "https://registry.npmmirror.com/mrmime/-/mrmime-2.0.0.tgz", @@ -2625,6 +2793,23 @@ "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", "dev": true }, + "node_modules/mux.js": { + "version": "6.0.1", + "resolved": "https://registry.npmmirror.com/mux.js/-/mux.js-6.0.1.tgz", + "integrity": "sha512-22CHb59rH8pWGcPGW5Og7JngJ9s+z4XuSlYvnxhLuc58cA1WqGDQPzuG8I+sPm1/p0CdgpzVTaKW408k5DNn8w==", + "peer": true, + "dependencies": { + "@babel/runtime": "^7.11.2", + "global": "^4.4.0" + }, + "bin": { + "muxjs-transmux": "bin/transmux.js" + }, + "engines": { + "node": ">=8", + "npm": ">=5" + } + }, "node_modules/nanoid": { "version": "3.3.8", "resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.8.tgz", @@ -2821,6 +3006,18 @@ } } }, + "node_modules/pkcs7": { + "version": "1.0.4", + "resolved": "https://registry.npmmirror.com/pkcs7/-/pkcs7-1.0.4.tgz", + "integrity": "sha512-afRERtHn54AlwaF2/+LFszyAANTCggGilmcmILUzEjvs3XgFZT+xE6+QWQcAGmu4xajy+Xtj7acLOPdx5/eXWQ==", + "peer": true, + "dependencies": { + "@babel/runtime": "^7.5.5" + }, + "bin": { + "pkcs7": "bin/cli.js" + } + }, "node_modules/pkg-types": { "version": "1.2.1", "resolved": "https://registry.npmmirror.com/pkg-types/-/pkg-types-1.2.1.tgz", @@ -2874,6 +3071,15 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/process": { + "version": "0.11.10", + "resolved": "https://registry.npmmirror.com/process/-/process-0.11.10.tgz", + "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==", + "peer": true, + "engines": { + "node": ">= 0.6.0" + } + }, "node_modules/proxy-from-env": { "version": "1.1.0", "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz", @@ -2931,6 +3137,12 @@ "url": "https://paulmillr.com/funding/" } }, + "node_modules/regenerator-runtime": { + "version": "0.14.1", + "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz", + "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==", + "peer": true + }, "node_modules/reusify": { "version": "1.0.4", "resolved": "https://registry.npmmirror.com/reusify/-/reusify-1.0.4.tgz", @@ -3019,6 +3231,15 @@ "queue-microtask": "^1.2.2" } }, + "node_modules/rust-result": { + "version": "1.0.0", + "resolved": "https://registry.npmmirror.com/rust-result/-/rust-result-1.0.0.tgz", + "integrity": "sha512-6cJzSBU+J/RJCF063onnQf0cDUOHs9uZI1oroSGnHOph+CQTIJ5Pp2hK5kEQq1+7yE/EEWfulSNXAQ2jikPthA==", + "peer": true, + "dependencies": { + "individual": "^2.0.0" + } + }, "node_modules/safe-buffer": { "version": "5.2.1", "resolved": "https://registry.npmmirror.com/safe-buffer/-/safe-buffer-5.2.1.tgz", @@ -3040,6 +3261,15 @@ ], "peer": true }, + "node_modules/safe-json-parse": { + "version": "4.0.0", + "resolved": "https://registry.npmmirror.com/safe-json-parse/-/safe-json-parse-4.0.0.tgz", + "integrity": "sha512-RjZPPHugjK0TOzFrLZ8inw44s9bKox99/0AZW9o/BEQVrJfhI+fIHMErnPyRa89/yRXUUr93q+tiN6zhoVV4wQ==", + "peer": true, + "dependencies": { + "rust-result": "^1.0.0" + } + }, "node_modules/sass": { "version": "1.82.0", "resolved": "https://registry.npmmirror.com/sass/-/sass-1.82.0.tgz", @@ -3668,6 +3898,48 @@ "punycode": "^2.1.0" } }, + "node_modules/url-toolkit": { + "version": "2.2.5", + "resolved": "https://registry.npmmirror.com/url-toolkit/-/url-toolkit-2.2.5.tgz", + "integrity": "sha512-mtN6xk+Nac+oyJ/PrI7tzfmomRVNFIWKUbG8jdYFt52hxbiReFAXIjYskvu64/dvuW71IcB7lV8l0HvZMac6Jg==", + "peer": true + }, + "node_modules/video.js": { + "version": "7.21.6", + "resolved": "https://registry.npmmirror.com/video.js/-/video.js-7.21.6.tgz", + "integrity": "sha512-m41TbODrUCToVfK1aljVd296CwDQnCRewpIm5tTXMuV87YYSGw1H+VDOaV45HlpcWSsTWWLF++InDgGJfthfUw==", + "peer": true, + "dependencies": { + "@babel/runtime": "^7.12.5", + "@videojs/http-streaming": "2.16.3", + "@videojs/vhs-utils": "^3.0.4", + "@videojs/xhr": "2.6.0", + "aes-decrypter": "3.1.3", + "global": "^4.4.0", + "keycode": "^2.2.0", + "m3u8-parser": "4.8.0", + "mpd-parser": "0.22.1", + "mux.js": "6.0.1", + "safe-json-parse": "4.0.0", + "videojs-font": "3.2.0", + "videojs-vtt.js": "^0.15.5" + } + }, + "node_modules/videojs-font": { + "version": "3.2.0", + "resolved": "https://registry.npmmirror.com/videojs-font/-/videojs-font-3.2.0.tgz", + "integrity": "sha512-g8vHMKK2/JGorSfqAZQUmYYNnXmfec4MLhwtEFS+mMs2IDY398GLysy6BH6K+aS1KMNu/xWZ8Sue/X/mdQPliA==", + "peer": true + }, + "node_modules/videojs-vtt.js": { + "version": "0.15.5", + "resolved": "https://registry.npmmirror.com/videojs-vtt.js/-/videojs-vtt.js-0.15.5.tgz", + "integrity": "sha512-yZbBxvA7QMYn15Lr/ZfhhLPrNpI/RmCSCqgIff57GC2gIrV5YfyzLfLyZMj0NnZSAz8syB4N0nHXpZg9MyrMOQ==", + "peer": true, + "dependencies": { + "global": "^4.3.1" + } + }, "node_modules/vite": { "version": "6.0.2", "resolved": "https://registry.npmmirror.com/vite/-/vite-6.0.2.tgz", @@ -3912,11 +4184,23 @@ "vue": "^3.2.0" } }, + "node_modules/vue-video-player": { + "version": "6.0.0", + "resolved": "https://registry.npmmirror.com/vue-video-player/-/vue-video-player-6.0.0.tgz", + "integrity": "sha512-WP47OtefsjMEReRCIKIL3tRRgH/PyNm8ELjsbYgr/WWrYAj5Ih9Adzkzp+ylYOI/v57jJ4O7O4XkbXBCmsTqNw==", + "dependencies": { + "@videojs-player/vue": "1.x" + }, + "peerDependencies": { + "@types/video.js": "7.x", + "video.js": "7.x", + "vue": "3.x" + } + }, "node_modules/vue3-video-play": { "version": "1.3.2", "resolved": "https://registry.npmmirror.com/vue3-video-play/-/vue3-video-play-1.3.2.tgz", "integrity": "sha512-eEwCJ0NIkfVQgTj0I3Kf9b1E/04Qne8mQQiE8r77BocblHsZ2T6af3q8l8Zzs/OvjlpQAQvkN/ACVUOJC3RSXg==", - "license": "ISC", "dependencies": { "hls.js": "^1.0.10", "throttle-debounce": "^3.0.1", diff --git a/package.json b/package.json index 0884a16..8d61d51 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "vue-countup-v3": "^1.4.2", "vue-echarts": "^7.0.3", "vue-router": "^4.4.5", + "vue-video-player": "^6.0.0", "vue3-video-play": "^1.3.2" }, "devDependencies": { diff --git a/src/assets/images/Mask group@2x.png b/src/assets/images/Mask group@2x.png deleted file mode 100644 index 2e16195..0000000 Binary files a/src/assets/images/Mask group@2x.png and /dev/null differ diff --git a/src/assets/images/car.png b/src/assets/images/car.png new file mode 100644 index 0000000..231aa1a Binary files /dev/null and b/src/assets/images/car.png differ diff --git a/src/assets/images/close.png b/src/assets/images/close.png new file mode 100644 index 0000000..1a08d4d Binary files /dev/null and b/src/assets/images/close.png differ diff --git a/src/assets/images/full.png b/src/assets/images/full.png new file mode 100644 index 0000000..eeb9bda Binary files /dev/null and b/src/assets/images/full.png differ diff --git a/src/assets/images/mask-error.png b/src/assets/images/mask-error.png new file mode 100644 index 0000000..52f5efd Binary files /dev/null and b/src/assets/images/mask-error.png differ diff --git a/src/assets/images/mask-success.png b/src/assets/images/mask-success.png new file mode 100644 index 0000000..369a485 Binary files /dev/null and b/src/assets/images/mask-success.png differ diff --git a/src/assets/images/ship.png b/src/assets/images/ship.png new file mode 100644 index 0000000..4f86900 Binary files /dev/null and b/src/assets/images/ship.png differ diff --git a/src/views/scenic/components/count-item.vue b/src/components/CountItem/index.vue similarity index 91% rename from src/views/scenic/components/count-item.vue rename to src/components/CountItem/index.vue index 192f0d5..cc1dad7 100644 --- a/src/views/scenic/components/count-item.vue +++ b/src/components/CountItem/index.vue @@ -5,7 +5,7 @@ {{ label }}
- +
{{ suffix }} @@ -16,6 +16,7 @@ + + diff --git a/src/components/Pie/index.vue b/src/components/PieRow/index.vue similarity index 63% rename from src/components/Pie/index.vue rename to src/components/PieRow/index.vue index 769dec0..ae194e8 100644 --- a/src/components/Pie/index.vue +++ b/src/components/PieRow/index.vue @@ -13,6 +13,7 @@ import styleUtil from '@/utils/styleUtil' import { fitChartSize } from '@/utils/dataUtil' import { guid } from '@/utils/util' + const props = defineProps({ width: { type: Number, @@ -21,6 +22,12 @@ height: { type: Number, default: () => 0 + }, + config: { + type: Object, + default: () => { + return {} + } } }) @@ -38,57 +45,55 @@ var defaultCofig = { color: colorList, - title: { - show: true, - text: '100%', - itemGap: 10, - x: 'center', - y: '30%', - subtext: '脱岗率', - textStyle: { - fontSize: fitChartSize(24), - fontWeight: 'bold', - color: '#ffffff' + legend: { + orient: 'vertical', + bottom: 'center', + left: '70%', + data: dataList, + itemWidth: fitChartSize(16), + itemHeight: fitChartSize(16), + itemGap: fitChartSize(10), + formatter: (name) => { + return name + '\u3000' + '19%' }, - subtextStyle: { - fontSize: fitChartSize(12), - fontWeight: 'bold', - color: '#7894A8' + textStyle: { + color: '#ffffff', + fontSize: fitChartSize(12) } }, - legend: { - top: 'bottom', - left: 'center', - orient: 'horizontal', - data: dataList, - itemWidth: 16, - itemHeight: 16, - itemGap: 10 - }, + series: [ - // 展示层 { type: 'pie', - center: ['50%', '30%'], + center: ['30%', '50%'], radius: ['40%', '55%'], itemStyle: { - borderWidth: fitChartSize(2), //描边线宽 + borderWidth: fitChartSize(4), borderColor: '#093672' }, label: { - show: false - }, - labelLine: { show: true, - normal: { - length: 20, - length2: 40, - align: 'center', - lineStyle: { - width: 1 + position: 'center', + fontWeight: 'bold', + formatter: function (o) { + return `{value|123456}` + '\n' + `{name|整改率}` + }, + rich: { + value: { + color: '#fff', + fontSize: fitChartSize(24), + fontWeight: 'bold', + padding: [0, 0, 5, 0] + }, + name: { + color: '#7894A8', + fontSize: fitChartSize(12) } } }, + labelLine: { + show: false + }, data: dataList } ] @@ -105,7 +110,8 @@ const dom = document.getElementById(id.value) pieChart = echarts.init(dom) pieChart.setOption({ - ...defaultCofig + ...defaultCofig, + ...props.config }) // 监听窗口大小变化 window.addEventListener('resize', resize) diff --git a/src/hooks/map.js b/src/hooks/map.js new file mode 100644 index 0000000..e2eec70 --- /dev/null +++ b/src/hooks/map.js @@ -0,0 +1,30 @@ +import { ref } from 'vue' +export function useMap() { + let map = ref(null) + // 初始化地图 + const initMap = (id, lat, lng, scale = 15) => { + map.value = new BMapGL.Map(id) + map.value.centerAndZoom(new BMapGL.Point(lat, lng), scale) + map.value.enableScrollWheelZoom(true) + } + + // 添加图标 + const addMarker = (icon, position = [0, 0], size = [20, 20], offset = [0, 0]) => { + var iconPath = new BMapGL.Icon(icon, new BMapGL.Size(...size), { + // 指定定位位置。 + // 当标注显示在地图上时，其所指向的地理位置距离图标左上 + // 角各偏移10像素和25像素。您可以看到在本例中该位置即是 + // 图标中央下端的尖角位置。 + // 设置图片偏移。 + // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您 + // 需要指定大图的偏移位置，此做法与css sprites技术类似。 + // imageOffset: new BMapGL.Size(...offset) // 设置图片偏移 + }) + var point = new BMapGL.Point(...position) + // 创建标注对象并添加到地图 + var marker = new BMapGL.Marker(point, { icon: iconPath }) + map.value.addOverlay(marker) + } + + return { map, initMap, addMarker } +} diff --git a/src/main.js b/src/main.js index a7209f1..27cb0f2 100644 --- a/src/main.js +++ b/src/main.js @@ -4,11 +4,11 @@ import App from './App.vue' import router from './router' import '@/styles/reset.css' import '@/styles/common.scss' -import vue3videoPlay from 'vue3-video-play' // 引入组件 -import 'vue3-video-play/dist/style.css' // 引入css +// import vue3videoPlay from 'vue3-video-play' // 引入组件 +// import 'vue3-video-play/dist/style.css' // 引入css const app = createApp(App) -app.use(vue3videoPlay) +// app.use(vue3videoPlay) app.use(createPinia()) app.use(router) diff --git a/src/router/index.js b/src/router/index.js index d358c44..873309c 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -1,5 +1,4 @@ import { createRouter, createWebHistory } from 'vue-router' - const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ @@ -8,16 +7,16 @@ const router = createRouter({ name: 'home', component: () => import('@/views/home/index.vue') }, - { - path: '/monitor', - name: 'monitor', - component: () => import('../views/monitor/index.vue') - }, - { - path: '/testing', - name: 'testing', - component: () => import('../views/testing/index.vue') - }, + { + path: '/monitor', + name: 'monitor', + component: () => import('../views/monitor/index.vue') + }, + { + path: '/testing', + name: 'testing', + component: () => import('../views/testing/index.vue') + }, { path: '/scenic', name: 'scenic', diff --git a/src/styles/common.scss b/src/styles/common.scss index 57c280f..d3758ad 100644 --- a/src/styles/common.scss +++ b/src/styles/common.scss @@ -20,22 +20,22 @@ justify-content: space-evenly; } .mb-6 { - margin-bottom: vh(6); + margin-bottom: vh(6) !important; } .pt-10 { - padding-top: vh(10); + padding-top: vh(10) !important; } .pb-10 { - padding-bottom: vh(10); + padding-bottom: vh(10) !important; } .mb-10 { - margin-bottom: vh(10); + margin-bottom: vh(10) !important; } .mt-10 { margin-top: vh(10) !important; } .mr-10 { - margin-right: vh(10); + margin-right: vh(10) !important; } .mt-20 { margin-top: vh(20) !important; @@ -44,8 +44,8 @@ margin-left: vh(20) !important; } .pt-20 { - padding-top: vh(20); + padding-top: vh(20) !important; } -.pt-20 { - padding-top: vh(20); +.pr-20 { + padding-right: vh(20) !important; } diff --git a/src/views/scenic/components/big-car-ship-map.vue b/src/views/scenic/components/big-car-ship-map.vue new file mode 100644 index 0000000..49806ea --- /dev/null +++ b/src/views/scenic/components/big-car-ship-map.vue @@ -0,0 +1,63 @@ + + + + + diff --git a/src/views/scenic/components/box-2.vue b/src/views/scenic/components/box-2.vue index f67a43e..2ab06fc 100644 --- a/src/views/scenic/components/box-2.vue +++ b/src/views/scenic/components/box-2.vue @@ -19,7 +19,7 @@
- +
@@ -36,9 +36,9 @@
- - - + + +
@@ -47,28 +47,178 @@
- - +
+ +
+
- - +
+ +
+
+
+ + + +
+
+
+ +
+ +
+
+
+
+
+ +
+ + + + +
+
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
1
+
2
+
3
+
+
+
+ +
+
+ +
+
+
车总数
+
130辆
+
+
+
今日累计运营(班次)
+
130次
+
+
+
+ 运营130辆 +
+ +
+ 空余100辆 +
+
+
+ +
+
+
车总数
+
130辆
+
+
+
今日累计运营(班次)
+
130次
+
+
+
+ 运营130辆 +
+ +
+ 空余100辆 +
+
+
+
+
+ +
+ diff --git a/vite.config.js b/vite.config.js index ce7ceeb..96bd84b 100644 --- a/vite.config.js +++ b/vite.config.js @@ -23,6 +23,7 @@ export default defineConfig({ }) // vueDevTools(), ], + base: '/largeScreen/', server: { hmr: true, host: '0.0.0.0'