From ecd70d66e9a3e1f905395c0c13c2db54e80dd2e2 Mon Sep 17 00:00:00 2001 From: fanluyan <754122931@qq.com> Date: Mon, 12 Aug 2024 14:21:45 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=89=8B=E5=8A=BF=E6=BB=91?= =?UTF-8?q?=E5=8A=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 157 ++++++++++++++++-- package.json | 1 + .../components/carouselChart.vue | 25 ++- 3 files changed, 167 insertions(+), 16 deletions(-) diff --git a/package-lock.json b/package-lock.json index 22e8795..4225529 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2702,8 +2702,7 @@ "balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz", - "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", - "dev": true + "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==" }, "base64-js": { "version": "1.5.1", @@ -2811,7 +2810,6 @@ "version": "1.1.11", "resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-1.1.11.tgz", "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", - "dev": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -2826,6 +2824,21 @@ "fill-range": "^7.0.1" } }, + "browser-resolve": { + "version": "1.11.3", + "resolved": "https://registry.npmmirror.com/browser-resolve/-/browser-resolve-1.11.3.tgz", + "integrity": "sha512-exDi1BYWB/6raKHmDTCicQfTkqwN5fioMFV4j8BsfMU4R2DK/QfZfK7kOVkmWCNANf0snkBzqGqAJBao9gZMdQ==", + "requires": { + "resolve": "1.1.7" + }, + "dependencies": { + "resolve": { + "version": "1.1.7", + "resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.1.7.tgz", + "integrity": "sha512-9znBF0vBcaSN3W2j7wKvdERPwqTxSpCq+if5C0WoTCyV9n24rua28jeuQ2pL/HOf+yUe/Mef+H/5p60K0Id3bg==" + } + } + }, "browserslist": { "version": "4.21.10", "resolved": "https://registry.npmmirror.com/browserslist/-/browserslist-4.21.10.tgz", @@ -2854,6 +2867,11 @@ "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==", "dev": true }, + "builtin-modules": { + "version": "1.1.1", + "resolved": "https://registry.npmmirror.com/builtin-modules/-/builtin-modules-1.1.1.tgz", + "integrity": "sha512-wxXCdllwGhI2kCC0MnvTGYTMvnVZTvqgypkiTI8Pa5tcz2i6VqsqwYGgqwXji+4RgCzms6EajE4IxiUH6HH8nQ==" + }, "bytes": { "version": "3.0.0", "resolved": "https://registry.npmmirror.com/bytes/-/bytes-3.0.0.tgz", @@ -3190,8 +3208,7 @@ "concat-map": { "version": "0.0.1", "resolved": "https://registry.npmmirror.com/concat-map/-/concat-map-0.0.1.tgz", - "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==", - "dev": true + "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==" }, "connect-history-api-fallback": { "version": "2.0.0", @@ -4422,6 +4439,11 @@ "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==", "dev": true }, + "estree-walker": { + "version": "0.2.1", + "resolved": "https://registry.npmmirror.com/estree-walker/-/estree-walker-0.2.1.tgz", + "integrity": "sha512-6/I1dwNKk0N9iGOU3ydzAAurz4NPo/ttxZNCqgIVbWFvWyzWBSNonRrJ5CpjDuyBfmM7ENN7WCzUi9aT/UPXXQ==" + }, "esutils": { "version": "2.0.3", "resolved": "https://registry.npmmirror.com/esutils/-/esutils-2.0.3.tgz", @@ -4747,8 +4769,7 @@ "function-bind": { "version": "1.1.1", "resolved": "https://registry.npmmirror.com/function-bind/-/function-bind-1.1.1.tgz", - "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==", - "dev": true + "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==" }, "functional-red-black-tree": { "version": "1.0.1", @@ -4861,6 +4882,11 @@ "duplexer": "^0.1.2" } }, + "hammerjs": { + "version": "2.0.8", + "resolved": "https://registry.npmmirror.com/hammerjs/-/hammerjs-2.0.8.tgz", + "integrity": "sha512-tSQXBXS/MWQOn/RKckawJ61vvsDpCom87JgxiYdGwHdOa0ht0vzUWDlfioofFCRU0L+6NGDt6XzbgoJvZkMeRQ==" + }, "handle-thing": { "version": "2.0.1", "resolved": "https://registry.npmmirror.com/handle-thing/-/handle-thing-2.0.1.tgz", @@ -4871,7 +4897,6 @@ "version": "1.0.3", "resolved": "https://registry.npmmirror.com/has/-/has-1.0.3.tgz", "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==", - "dev": true, "requires": { "function-bind": "^1.1.1" } @@ -5186,7 +5211,6 @@ "version": "2.13.0", "resolved": "https://registry.npmmirror.com/is-core-module/-/is-core-module-2.13.0.tgz", "integrity": "sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ==", - "dev": true, "requires": { "has": "^1.0.3" } @@ -5761,6 +5785,14 @@ "yallist": "^3.0.2" } }, + "magic-string": { + "version": "0.16.0", + "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.16.0.tgz", + "integrity": "sha512-c4BEos3y6G2qO0B9X7K0FVLOPT9uGrjYwYRLFmDqyl5YMboUviyecnXWp94fJTSMwPw2/sf+CEYt5AGpmklkkQ==", + "requires": { + "vlq": "^0.2.1" + } + }, "make-dir": { "version": "3.1.0", "resolved": "https://registry.npmmirror.com/make-dir/-/make-dir-3.1.0.tgz", @@ -5919,7 +5951,6 @@ "version": "3.1.2", "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-3.1.2.tgz", "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", - "dev": true, "requires": { "brace-expansion": "^1.1.7" } @@ -6460,8 +6491,7 @@ "path-parse": { "version": "1.0.7", "resolved": "https://registry.npmmirror.com/path-parse/-/path-parse-1.0.7.tgz", - "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==", - "dev": true + "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==" }, "path-to-regexp": { "version": "0.1.7", @@ -7193,7 +7223,6 @@ "version": "1.22.4", "resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.4.tgz", "integrity": "sha512-PXNdCiPqDqeUou+w1C2eTQbNfxKSuMxqTCuvlmmMsk1NWHL5fRrhY6Pl0qEYYc6+QqGClco1Qj8XnjPego4wfg==", - "dev": true, "requires": { "is-core-module": "^2.13.0", "path-parse": "^1.0.7", @@ -7237,6 +7266,89 @@ "glob": "^7.1.3" } }, + "rollup-plugin-cleanup": { + "version": "0.1.4", + "resolved": "https://registry.npmmirror.com/rollup-plugin-cleanup/-/rollup-plugin-cleanup-0.1.4.tgz", + "integrity": "sha512-5TmT816PwinFF2w9RsgJ+5YaWFcXXtEThez9J+WBwmIAkndKEUngHjJxQr5gcBfGzOyK2U8iLTF1yEYdgJMwIw==", + "requires": { + "acorn": "^3.3.0", + "magic-string": "^0.16.0", + "rollup-pluginutils": "^1.5.2" + }, + "dependencies": { + "acorn": { + "version": "3.3.0", + "resolved": "https://registry.npmmirror.com/acorn/-/acorn-3.3.0.tgz", + "integrity": "sha512-OLUyIIZ7mF5oaAUT1w0TFqQS81q3saT46x8t7ukpPjMNk+nbs4ZHhs7ToV8EWnLYLepjETXd4XaCE4uxkMeqUw==" + } + } + }, + "rollup-plugin-commonjs": { + "version": "7.1.0", + "resolved": "https://registry.npmmirror.com/rollup-plugin-commonjs/-/rollup-plugin-commonjs-7.1.0.tgz", + "integrity": "sha512-L+kW1RrHmQxapen8cZqBIHo78LXz+ASoyR4uRhzlwWL17UzhDMKtRXZpY4tt2PYm2Q7f1lkvxnEvnPU66Sc7dw==", + "requires": { + "acorn": "^4.0.1", + "estree-walker": "^0.3.0", + "magic-string": "^0.19.0", + "resolve": "^1.1.7", + "rollup-pluginutils": "^2.0.1" + }, + "dependencies": { + "acorn": { + "version": "4.0.13", + "resolved": "https://registry.npmmirror.com/acorn/-/acorn-4.0.13.tgz", + "integrity": "sha512-fu2ygVGuMmlzG8ZeRJ0bvR41nsAkxxhbyk8bZ1SS521Z7vmgJFTQQlfz/Mp/nJexGBz+v8sC9bM6+lNgskt4Ug==" + }, + "estree-walker": { + "version": "0.3.1", + "resolved": "https://registry.npmmirror.com/estree-walker/-/estree-walker-0.3.1.tgz", + "integrity": "sha512-a0V2EAQrmcBKl/RLr5Cu3qZBHC9tuWifbAXezwNLUCuHndgoEAakTenYcESK84nF123BOjKXi33kFc3z4F+Lkw==" + }, + "magic-string": { + "version": "0.19.1", + "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.19.1.tgz", + "integrity": "sha512-AJRZGyg/F3QJUsgz/0Kh7HR09VZ1Mu/Nfyou9WtlXAYyMErN4BvtAOqwsYpHwT+UWbP2QlGPPmHTCvZjk0zcAw==", + "requires": { + "vlq": "^0.2.1" + } + }, + "rollup-pluginutils": { + "version": "2.8.2", + "resolved": "https://registry.npmmirror.com/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz", + "integrity": "sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==", + "requires": { + "estree-walker": "^0.6.1" + }, + "dependencies": { + "estree-walker": { + "version": "0.6.1", + "resolved": "https://registry.npmmirror.com/estree-walker/-/estree-walker-0.6.1.tgz", + "integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==" + } + } + } + } + }, + "rollup-plugin-node-resolve": { + "version": "2.1.1", + "resolved": "https://registry.npmmirror.com/rollup-plugin-node-resolve/-/rollup-plugin-node-resolve-2.1.1.tgz", + "integrity": "sha512-UDDWQc9CzqzEhyoxSp6m0ZU29GhEJw+6HCqMfwoREwGlpKK7K68/4B3n/ysdU0tWz5YHwDKDpHF0MeH7fJIgaw==", + "requires": { + "browser-resolve": "^1.11.0", + "builtin-modules": "^1.1.0", + "resolve": "^1.1.6" + } + }, + "rollup-pluginutils": { + "version": "1.5.2", + "resolved": "https://registry.npmmirror.com/rollup-pluginutils/-/rollup-pluginutils-1.5.2.tgz", + "integrity": "sha512-SjdWWWO/CUoMpDy8RUbZ/pSpG68YHmhk5ROKNIoi2En9bJ8bTt3IhYi254RWiTclQmL7Awmrq+rZFOhZkJAHmQ==", + "requires": { + "estree-walker": "^0.2.1", + "minimatch": "^3.0.2" + } + }, "run-parallel": { "version": "1.2.0", "resolved": "https://registry.npmmirror.com/run-parallel/-/run-parallel-1.2.0.tgz", @@ -7742,8 +7854,7 @@ "supports-preserve-symlinks-flag": { "version": "1.0.0", "resolved": "https://registry.npmmirror.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", - "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", - "dev": true + "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==" }, "svg-tags": { "version": "1.0.0", @@ -8091,6 +8202,11 @@ "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==", "dev": true }, + "vlq": { + "version": "0.2.3", + "resolved": "https://registry.npmmirror.com/vlq/-/vlq-0.2.3.tgz", + "integrity": "sha512-DRibZL6DsNhIgYQ+wNdWDL2SL3bKPlVrRiBqV5yuMm++op8W4kGFtaQfCs4KEJn0wBZcHVHJ3eoywX8983k1ow==" + }, "vue": { "version": "2.7.14", "resolved": "https://registry.npmmirror.com/vue/-/vue-2.7.14.tgz", @@ -8319,6 +8435,17 @@ "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==", "dev": true }, + "vue-touch": { + "version": "2.0.0-beta.4", + "resolved": "https://registry.npmmirror.com/vue-touch/-/vue-touch-2.0.0-beta.4.tgz", + "integrity": "sha512-UvbKsqf7HHwtXzuEodtzeDEX/lkq6ul1QcdHhl8VUKlDTYne5ey15RjNVTkDvigJaKvtVU0UB0x5NURNyRC37A==", + "requires": { + "hammerjs": "^2.0.8", + "rollup-plugin-cleanup": "^0.1.4", + "rollup-plugin-commonjs": "^7.0.0", + "rollup-plugin-node-resolve": "^2.0.0" + } + }, "vuex": { "version": "3.6.2", "resolved": "https://registry.npmmirror.com/vuex/-/vuex-3.6.2.tgz", diff --git a/package.json b/package.json index 8723b6d..f3210aa 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "vue-clipboard2": "^0.3.3", "vue-lazyload": "^1.3.3", "vue-router": "^3.5.1", + "vue-touch": "^2.0.0-beta.4", "vuex": "^3.6.2" }, "devDependencies": { diff --git a/src/views/realTimeMonitor/components/carouselChart.vue b/src/views/realTimeMonitor/components/carouselChart.vue index f680e65..d48fac5 100644 --- a/src/views/realTimeMonitor/components/carouselChart.vue +++ b/src/views/realTimeMonitor/components/carouselChart.vue @@ -221,6 +221,18 @@ export default { }, data() { return { + items: [ + "Item 1", + "Item 2", + "Item 3", + "Item 4", + "Item 5", + "Item 6", + "Item 7", + "Item 8", + "Item 9", + "Item 10", + ], picLoading: true, currentPicPath: "", //大图 mediaType: "", //判断图片类型是视频还是图片 @@ -463,6 +475,16 @@ export default { (this.$refs.scrollBox.offsetWidth / this.photoNum) * 2; } }, + handleSwipeLeft() { + // 处理向左滑动 + this.$refs.scrollBox.scrollLeft -= + (this.$refs.scrollBox.offsetWidth / this.photoNum) * 2; + }, + handleSwipeRight() { + // 处理向右滑动 + this.$refs.scrollBox.scrollLeft += + (this.$refs.scrollBox.offsetWidth / this.photoNum) * 2; + }, //缩略图的左右箭头 smallLeftClick() { this.$refs.scrollBox.scrollLeft -= this.$refs.scrollBox.offsetWidth; @@ -820,9 +842,10 @@ export default { width: 100%; height: 100%; display: flex; - overflow-x: hidden; + overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; + scrollbar-width: none; .smallPic { width: 19.2%; border: 3px solid transparent;