lixuefeng/fengjie-datascreen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat：完善页面样式和功能

Browse Source
This commit is contained in:
zjc
2024-12-23 16:36:32 +08:00
parent 71f22af6ac
commit 1d301b2d8f
19 changed files with 347 additions and 502 deletions
Download Patch File Download Diff File Expand all files Collapse all files

337
package-lock.json generated
View File

@@ -8,7 +8,6 @@
"name": "datascreen",
"version": "0.0.0",
"dependencies": {
"@newpanjing/datav-vue3": "^0.0.0-alpha.0",
"axios": "^1.7.9",
"echarts": "^5.5.1",
"echarts-wordcloud": "^2.0.0",
@@ -18,9 +17,7 @@
"vue": "^3.5.13",
"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"
"vue-router": "^4.4.5"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.2.1",
@@ -427,18 +424,6 @@
"@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",
@@ -537,11 +522,6 @@
"resolved": "https://registry.npmmirror.com/@floating-ui/utils/-/utils-0.2.8.tgz",
"integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig=="
},
"node_modules/@jiaminghi/color": {
"version": "1.1.3",
"resolved": "https://registry.npmmirror.com/@jiaminghi/color/-/color-1.1.3.tgz",
"integrity": "sha512-ZY3hdorgODk4OSTbxyXBPxAxHPIVf9rPlKJyK1C1db46a50J0reFKpAvfZG8zMG3lvM60IR7Qawgcu4ZDO3+Hg=="
},
"node_modules/@jridgewell/gen-mapping": {
"version": "0.3.5",
"resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
@@ -600,19 +580,6 @@
"@jridgewell/sourcemap-codec": "^1.4.14"
}
},
"node_modules/@newpanjing/datav-vue3": {
"version": "0.0.0-alpha.0",
"resolved": "https://registry.npmmirror.com/@newpanjing/datav-vue3/-/datav-vue3-0.0.0-alpha.0.tgz",
"integrity": "sha512-7otS3hY5cwuzdeVJ5LZhbWd0NBUUnJdkFJ6G/BgsUgNJ+zHX5u8ugVfKFz9da5GlLowgjPj+/f0VXQ9IS0YDVg==",
"dependencies": {
"@jiaminghi/color": "1.1.3",
"classnames": "^2.3.2",
"lodash-es": "^4.17.21"
},
"peerDependencies": {
"vue": ">=3.2.0"
}
},
"node_modules/@nodelib/fs.scandir": {
"version": "2.1.5",
"resolved": "https://registry.npmmirror.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -830,76 +797,11 @@
"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",
@@ -1328,15 +1230,6 @@
"@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",
@@ -1363,18 +1256,6 @@
"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",
@@ -1601,11 +1482,6 @@
"node": ">=6.0"
}
},
"node_modules/classnames": {
"version": "2.5.1",
"resolved": "https://registry.npmmirror.com/classnames/-/classnames-2.5.1.tgz",
"integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
},
"node_modules/clone-deep": {
"version": "4.0.1",
"resolved": "https://registry.npmmirror.com/clone-deep/-/clone-deep-4.0.1.tgz",
@@ -1773,12 +1649,6 @@
"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",
@@ -2214,16 +2084,6 @@
"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",
@@ -2249,12 +2109,6 @@
"node": ">=8"
}
},
"node_modules/hls.js": {
"version": "1.5.17",
"resolved": "https://registry.npmmirror.com/hls.js/-/hls.js-1.5.17.tgz",
"integrity": "sha512-wA66nnYFvQa1o4DO/BFgLNRKnBTVXpNeldGRBJ2Y0SvFtdwvFKCbqa9zhHoZLoxHhZ+jYsj3aIBkWQQCPNOhMw==",
"license": "Apache-2.0"
},
"node_modules/hookable": {
"version": "5.5.3",
"resolved": "https://registry.npmmirror.com/hookable/-/hookable-5.5.3.tgz",
@@ -2288,12 +2142,6 @@
"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",
@@ -2330,12 +2178,6 @@
"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",
@@ -2535,12 +2377,6 @@
"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",
@@ -2637,17 +2473,6 @@
"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",
@@ -2721,15 +2546,6 @@
"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",
@@ -2772,21 +2588,6 @@
"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",
@@ -2802,23 +2603,6 @@
"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",
@@ -3015,18 +2799,6 @@
}
}
},
"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",
@@ -3080,15 +2852,6 @@
"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",
@@ -3146,12 +2909,6 @@
"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",
@@ -3240,15 +2997,6 @@
"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",
@@ -3270,15 +3018,6 @@
],
"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",
@@ -3623,15 +3362,6 @@
"url": "https://opencollective.com/webpack"
}
},
"node_modules/throttle-debounce": {
"version": "3.0.1",
"resolved": "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-3.0.1.tgz",
"integrity": "sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==",
"license": "MIT",
"engines": {
"node": ">=10"
}
},
"node_modules/tinyglobby": {
"version": "0.2.10",
"resolved": "https://registry.npmmirror.com/tinyglobby/-/tinyglobby-0.2.10.tgz",
@@ -3907,48 +3637,6 @@
"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",
@@ -4193,29 +3881,6 @@
"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==",
"dependencies": {
"hls.js": "^1.0.10",
"throttle-debounce": "^3.0.1",
"vue": "^3.2.2"
}
},
"node_modules/watchpack": {
"version": "2.4.2",
"resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.2.tgz",

5
package.json
View File

@@ -9,7 +9,6 @@
"preview": "vite preview"
},
"dependencies": {
"@newpanjing/datav-vue3": "^0.0.0-alpha.0",
"axios": "^1.7.9",
"echarts": "^5.5.1",
"echarts-wordcloud": "^2.0.0",
@@ -19,9 +18,7 @@
"vue": "^3.5.13",
"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"
"vue-router": "^4.4.5"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.2.1",

BIN
src/assets/images/back.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 752 B

176
src/components/Correspondence/index.vue
View File

@@ -3,56 +3,37 @@
<div class="top-box">
<div class="title">融合通信</div>
<div class="icon-box flex">
<div class="item"><img src="/src/assets/images/r-icon-1.png" alt="" /> 白帝城 </div>
<div class="item"><img src="/src/assets/images/r-icon-2.png" alt="" />三峡之颠</div>
<div class="item"><img src="/src/assets/images/r-icon-3.png" alt="" />龙桥河</div>
<div class="item"><img src="/src/assets/images/r-icon-4.png" alt="" />消防队</div>
<div class="item"><img src="/src/assets/images/r-icon-5.png" alt="" />文旅城</div>
<div class="item"><img src="/src/assets/images/r-icon-6.png" alt="" />交通城</div>
<div class="item"><img src="/src/assets/images/r-icon-1.png" />白帝城</div>
<div class="item"><img src="/src/assets/images/r-icon-2.png" />三峡之颠</div>
<div class="item"><img src="/src/assets/images/r-icon-3.png" />龙桥河</div>
<div class="item"><img src="/src/assets/images/r-icon-4.png" />消防队</div>
<div class="item"><img src="/src/assets/images/r-icon-5.png" />文旅城</div>
<div class="item"><img src="/src/assets/images/r-icon-6.png" />交通城</div>
</div>
</div>
<div class="bom-box">
<div class="title">
<span>最近联系</span>
<Title2 title="最近联系" />
<div class="table">
<div class="header">
<div>人员姓名</div>
<div>部门</div>
<div>职位</div>
<div>时间</div>
</div>
<div class="list">
<div class="item" v-for="(item, index) in 10" :key="index">
<div>January</div>
<div>消防队</div>
<div>消防员</div>
<div>消防员</div>
</div>
</div>
</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>
import { fitChartSize } from '@/utils/dataUtil'
const props = defineProps({
width: {
type: Number,
@@ -67,57 +48,73 @@
<style lang="scss" scoped>
.box-4-content {
width: vw(300);
height: vh(1060);
background-image: url('/src/assets/images/rt-bg.png');
background-repeat: no-repeat;
background-size: 100% 100%;
position: relative;
margin-top: vh(10);
margin-left: vw(10);
position: relative;
z-index: 999;
width: vw(300);
height: vh(1060);
background-image: url('@/assets/images/bg-1.png');
background-size: 100% 100%;
.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;
.header {
height: vh(28);
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);
display: flex;
background: linear-gradient(180deg, rgba(0, 99, 255, 0) 0%, #0063ff 100%);
& > div {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
}
.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);
.list {
overflow-y: auto;
height: vh(490);
/* 滚动条整体样式 */
&::-webkit-scrollbar {
width: vw(4); /* 滚动条的宽度 */
}
/* 滚动条轨道 */
&::-webkit-scrollbar-track {
background: 'transparent'; /* 轨道的背景色 */
}
/* 滚动条滑块 */
&::-webkit-scrollbar-thumb {
background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
border-radius: 5px; /* 滑块的圆角 */
}
.item {
height: vh(50);
font-weight: 400;
font-size: vw(14);
color: #f1f7ff;
display: flex;
&:nth-child(2n + 1) {
background: linear-gradient(
90deg,
rgba(0, 150, 255, 0) 0%,
rgba(0, 150, 255, 0.22) 100%
);
}
& > div {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
white-space: nowrap; /* 保证文本在一行内显示 */
overflow: hidden; /* 隐藏溢出的内容 */
text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
}
}
}
.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;
@@ -143,11 +140,9 @@
color: #ffffff;
line-height: vh(16);
flex-wrap: wrap;
// margin-left: vw(20);
.item {
width:33.33%;
width: 33.33%;
margin-top: vh(40);
// margin-right: vh(20);
display: flex;
flex-direction: column;
align-items: center;
@@ -157,22 +152,21 @@
}
& > img {
width: vw(54);
height: vh(60);
height: auto;
}
}
}
.title {
font-weight: 800;
font-size: vw(16);
line-height: vh(26);
width: vw(260);
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;
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%;
}
}
}

59
src/components/Header/index.vue
View File

@@ -1,6 +1,5 @@
<template>
<div class="header">
<div v-if="isBack" class="back" @click="handleBack">返回</div>
<ul class="nav-left">
<li
class="nav-left-item"
@@ -27,6 +26,17 @@
{{ item.name }}
</li>
</ul>
<div class="weather">
<span>25˚C-晴</span>
<span class="line">|</span>
<span>风速：A2-4级</span>
<span class="line">|</span>
<span>空气质量：A2-优</span>
<span class="ml-20">{{ currentDate }}</span>
</div>
<div v-if="isBack" class="back" @click="handleBack">
<img class="icon" src="@/assets/images/back.png" alt="" /> 返回
</div>
</div>
</template>
@@ -63,6 +73,7 @@
})
const emit = defineEmits(['change'])
const router = useRouter()
let currentDate = ref('')
const name = computed(() => {
if (!props.isSkip && props.navLeft.length > 0) {
@@ -71,6 +82,22 @@
return props.title
})
const fillZero = (value) => {
return value < 10 ? `0${value}` : value
}
const getCurrentDate = () => {
var time = new Date()
var year = time.getFullYear()
var month = time.getMonth() + 1
var day = time.getDate()
var second = time.getSeconds()
var hour = time.getHours()
var minute = time.getMinutes()
var second = time.getSeconds()
currentDate.value = `${year}-${fillZero(month)}-${fillZero(day)} ${hour}:${fillZero(
minute
)}:${fillZero(second)}`
}
const handleBack = () => {
router.go(-1)
}
@@ -81,18 +108,35 @@
emit('on-change', index)
}
}
onMounted(() => {
getCurrentDate()
setInterval(() => {
getCurrentDate()
}, 1000)
})
</script>
<style scoped lang="scss">
.header {
position: absolute;
left: vw(326);
.weather {
position: absolute;
right: 0;
top: vh(10);
font-weight: 400;
font-size: vw(18);
color: #ffffff;
.line {
margin: 0 vw(10);
}
}
.back {
position: absolute;
right: vw(20);
top: vh(40);
width: vw(120);
height: vh(30);
right: 0;
top: vh(50);
width: vw(130);
height: vh(36);
font-weight: 600;
font-size: vw(20);
color: #ffffff;
@@ -103,6 +147,11 @@
border-radius: vw(60);
border: 1px solid rgba(0, 114, 220, 0.3);
background: linear-gradient(270deg, rgba(8, 41, 86, 0.16) 0%, #0b61b4 100%);
.icon {
margin-right: vw(10);
width: vw(24);
height: auto;
}
}
.title {
width: vw(3133);

121
src/components/ScrollNumber/index.vue Normal file
View File

@@ -0,0 +1,121 @@
<template>
<div class="number-digital">
<div class="box-item">
<li
:class="{ 'number-item': !isNaN(item), 'mark-item': isNaN(item) }"
v-for="(item, index) in orderNum"
:key="index"
>
<span v-if="!isNaN(item)">
<i :id="`${prefix}numberItem${index}`">0123456789</i>
</span>
</li>
</div>
</div>
</template>
<script setup>
const props = defineProps({
count: {
type: Number,
default: 0
},
prefix: {
type: String,
default: ''
}
})
const orderNum = ref([])
const toOrderNum = (num) => {
num = num.toString()
orderNum.value = num.split('') // 将其便变成数据，渲染至滚动数组
nextTick(() => {
setNumberTransform()
})
}
watch(
() => props.count,
(newVal) => {
toOrderNum(newVal)
},
{
immediate: true
}
)
function setNumberTransform() {
for (let index = 0; index < orderNum.value.length; index++) {
const ele = document.getElementById(`${props.prefix}numberItem${index}`)
if (ele) {
ele.style.transform = `translate(-50%, -${orderNum.value[index] * 10}%)`
}
}
}
</script>
<style lang="scss" scoped>
.number-digital {
.box-item {
position: relative;
height: vh(40);
list-style: none;
color: #2d7cff;
writing-mode: vertical-lr;
text-orientation: upright;
/*文字禁止编辑*/
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
user-select: none;
}
/*滚动数字设置*/
.number-item {
width: vw(40);
height: vh(40);
margin-right: vw(4);
border-radius: vw(4);
color: #ffffff;
font-size: vw(28);
font-weight: bold;
background: linear-gradient(180deg, #00b7ff 0%, #0033ff 100%);
& > span {
position: relative;
display: inline-block;
margin-right: vw(14);
width: 100%;
height: 100%;
writing-mode: vertical-rl;
text-orientation: upright;
overflow: hidden;
& > i {
position: absolute;
top: vh(10);
left: 50%;
transform: translate(-50%, 0);
transition: transform 1s ease-in-out;
letter-spacing: 10px;
}
}
}
.number-item:last-child {
margin-right: 0;
}
.num-dot {
display: inline-block;
margin-left: 8px;
height: 53px;
font-size: 47px;
font-family: MiSans, MiSans-Demibold;
font-weight: normal;
text-align: CENTER;
color: #ffffff;
line-height: 47px;
}
}
</style>

4
src/main.js
View File

@@ -4,11 +4,9 @@ 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
const app = createApp(App)
// app.use(vue3videoPlay)
app.use(createPinia())
app.use(router)

37
src/router/index.js
View File

@@ -1,4 +1,6 @@
import { createRouter, createWebHistory } from 'vue-router'
import NotFound from '@/views/404/index.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
@@ -10,38 +12,47 @@ const router = createRouter({
{
path: '/monitor',
name: 'monitor',
component: () => import('../views/monitor/index.vue')
component: () => import('@/views/monitor/index.vue')
},
{
path: '/sceneTesting',
name: 'sceneTesting',
component: () => import('../views/testing/index.vue')
component: () => import('@/views/testing/index.vue')
},
{
path: '/roadTesting',
name: 'roadTesting',
component: () => import('../views/testing/road.vue')
component: () => import('@/views/testing/road.vue')
},
{
path: '/scenic',
name: 'scenic',
component: () => import('@/views/scenic/index.vue')
},
{
path: '/traffic',
name: 'traffic',
component: () => import('@/views/traffic/index.vue')
},
{
path: '/traffic',
name: 'traffic',
component: () => import('@/views/traffic/index.vue')
},
{
path: '/sentiment',
name: 'sentiment',
component: () => import('@/views/sentiment/index.vue')
},
{
path: '/workOrder',
name: 'workOrder',
component: () => import('@/views/workOrder/index.vue')
}
{
path: '/workOrder',
name: 'workOrder',
component: () => import('@/views/workOrder/index.vue')
},
{
path: '/404',
name: 'NotFound',
component: NotFound
},
{
path: '/:pathMatch(.*)*',
redirect: '/404'
}
]
})

10
src/styles/common.scss
View File

@@ -43,18 +43,24 @@
.mt-10 {
margin-top: vh(10) !important;
}
.ml-10 {
margin-left: vw(10) !important;
}
.mr-10 {
margin-right: vh(10) !important;
margin-right: vw(10) !important;
}
.mt-20 {
margin-top: vh(20) !important;
}
.ml-20 {
margin-left: vh(20) !important;
margin-left: vw(20) !important;
}
.pt-20 {
padding-top: vh(20) !important;
}
.pb-20 {
padding-bottom: vh(20) !important;
}
.pr-20 {
padding-right: vh(20) !important;
}

14
src/views/404/index.vue Normal file
View File

@@ -0,0 +1,14 @@
<template>
<div class="not-found"> 页面走丢啦~ </div>
</template>
<script setup></script>
<style scoped lang="scss">
.not-found {
flex: 1;
text-align: center;
margin-top: vh(40);
color: #fff;
}
</style>

13
src/views/home/components/box-2.vue
View File

@@ -2,7 +2,7 @@
<div class="box-2">
<Title1 title="景区信息">
<template #right>
<span class="more" />
<img class="more" src="@/assets/images/more.png" />
</template>
</Title1>
<div class="flex pt-20">
@@ -118,7 +118,7 @@
<div class="ticket-box">
<Title2 title="景区购票数" />
<div class="ticket-wrap">
<img src="@/assets/images/ticket.png" alt="" />
<img src="@/assets/images/ticket.png" />
<div> <span class="label">当日购票量：</span><countup endVal="768578" /> </div>
<div> <span class="label">未来3天购票量：</span><countup endVal="768578" /> </div>
<div> <span class="label">3天后购票量：</span><countup endVal="768578" /> </div>
@@ -216,9 +216,7 @@
right: vw(20);
cursor: pointer;
width: vw(60);
height: vh(24);
background-image: url('@/assets/images/more.png');
background-size: 100% 100%;
height: auto;
}
.item {
position: relative;
@@ -339,7 +337,7 @@
}
.icon {
width: vw(26);
height: vh(28);
height: auto;
margin-right: vw(4);
}
.text {
@@ -389,12 +387,13 @@
}
}
.ticket-wrap {
margin-top: vh(8);
display: flex;
align-items: center;
justify-content: space-between;
& > img {
width: vw(74);
height: vh(74);
height: auto;
}
& > div {
flex: 1;

10
src/views/home/components/box-3.vue
View File

@@ -5,15 +5,15 @@
<div class="left">
<div class="item">
<div class="label">今年总游客数</div>
<countup v-for="item in count" :endVal="item" />
<ScrollNumber :count="count" prefix="1" />
</div>
<div class="item">
<div class="label">全县景区总游客人数</div>
<countup v-for="item in count" :endVal="item" />
<ScrollNumber :count="count" prefix="2" />
</div>
<div class="item">
<div class="label">总在园人数</div>
<countup v-for="item in count" :endVal="item" />
<ScrollNumber :count="count" prefix="3" />
</div>
</div>
<div class="right">
@@ -120,9 +120,8 @@
</template>
<script setup>
import ScrollNumber from '@/components/ScrollNumber/index.vue'
import countup from 'vue-countup-v3'
import Map from '@/components/Map/index.vue'
let count = ref('6945959')
</script>
@@ -288,4 +287,3 @@
}
}
</style>

9
src/views/home/components/box-4.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="box-4">
<Title1 title="交通信息" />
<div class="flex justify-evenly pt-10">
<div class="flex justify-evenly pt-10 pb-20">
<div v-for="item in list" class="cell">
<img class="icon" :src="item.icon" alt="" width="64" height="64" />
<div>
@@ -324,7 +324,7 @@
align-items: center;
.icon {
width: vw(64);
height: vh(60);
height: auto;
}
.countup-wrap {
color: #02f9fa;
@@ -357,7 +357,7 @@
gap: vw(20);
.icon {
width: vw(45);
height: vh(48);
height: auto;
}
& > div {
flex: 1;
@@ -403,16 +403,17 @@
display: flex;
flex-direction: column;
justify-content: center;
background-size: 100% 100%;
box-sizing: border-box;
}
.car {
@extend .icon;
background-image: url('@/assets/images/icon-6.png');
background-size: 100% 100%;
}
.ship {
@extend .icon;
background-image: url('@/assets/images/icon-7.png');
background-size: 100% 100%;
}
.label {
font-weight: 400;

8
src/views/home/components/vacancy.vue
View File

@@ -66,15 +66,15 @@
fontSize: fitChartSize(12)
},
verticalAlign: 'bottom',
padding: [0, 0, 6, 0],
padding: [0, 0, fitChartSize(6), 0],
inside: true,
formatter: function (value) {
return `余{value|${value}}`
return `{label|余} {value|${value}}`
},
rich: {
name: {
label: {
align: 'center',
color: '#D3E5FF',
color: '#fff',
fontSize: fitChartSize(14),
fontFamily: 'Source Han Sans CN'
},

4
src/views/home/index.vue
View File

@@ -11,6 +11,7 @@
import box2 from './components/box-2.vue'
import box3 from './components/box-3.vue'
import box4 from './components/box-4.vue'
let numm = ref(1231241)
const navLeft = [
{ name: '安全', path: '/monitor' },
{ name: '景区', path: '/scenic' },
@@ -22,5 +23,8 @@
{ name: '舆情', path: '/sentiment' },
{ name: '酒店' }
]
const handleChange = () => {
numm.value++
}
onMounted(() => {})
</script>

11
src/views/scenic/components/box-2.vue
View File

@@ -269,8 +269,7 @@
}
}
.container {
flex: 1;
margin: vh(120) vw(10) 0 vw(10);
margin: vh(120) 0 0 vw(10);
.count-box {
padding: 0 vw(10);
height: vh(70);
@@ -289,12 +288,12 @@
}
.box {
@extend .bg;
width: vw(575);
width: vw(570);
height: vh(475);
}
.box-1 {
@extend .bg;
width: vw(770);
width: vw(750);
height: vh(475);
}
.box-2 {
@@ -309,12 +308,12 @@
}
.box-4 {
@extend .bg;
width: vw(850);
width: vw(840);
height: vh(465);
}
.box-5 {
@extend .bg;
width: vw(670);
width: vw(650);
height: vh(465);
}
.car-box {

2
src/views/scenic/components/top.vue
View File

@@ -182,6 +182,6 @@
<style scoped lang="scss">
.top {
width: 100%;
height: vh(300);
height: vh(360);
}
</style>

5
src/views/sentiment/index.vue
View File

@@ -102,8 +102,7 @@
<style scoped lang="scss">
.container {
flex: 1;
margin: vh(120) vw(10) 0 vw(10);
margin-top: vh(120);
.bg {
background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
}
@@ -112,7 +111,7 @@
margin-top: vh(35);
}
.box-1 {
width: vw(770);
width: vw(780);
height: vh(470);
@extend .bg;
}

24
src/views/workOrder/index.vue
View File

@@ -1,12 +1,10 @@
<template>
<main class="wrapper">
<CoreVideo />
<box1/>
<box2/>
<box3/>
<Header title="工单消息" is-skip />
<Correspondence />
</main>
<Header title="工单消息" is-skip is-back />
<CoreVideo />
<box1 />
<box2 />
<box3 />
<Correspondence />
</template>
<script setup>
@@ -16,12 +14,4 @@
onMounted(() => {})
</script>
<style lang="scss" scoped>
.wrapper {
display: flex;
width: 100vw;
height: 100vh;
overflow: hidden;
background-color: #0a254b;
}
</style>
<style lang="scss" scoped></style>