添加手势滑动

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==",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
-      "dev": true
     },
     "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==",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
-      "dev": true
     },
     "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==",
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
-      "dev": true
     },
     "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==",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
-      "dev": true
     },
     "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==",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="
-      "dev": true
     },
     "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",

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": {

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;