From e6a5f3f38c223b07c457c0ce789334b281696d18 Mon Sep 17 00:00:00 2001
From: xhf <1424913779@qq.com>
Date: Thu, 20 Mar 2025 09:38:30 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=AE=9E=E6=97=B6=E5=9C=B0?=
 =?UTF-8?q?=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../realTimeMap/components/indexPage.vue      | 37 +++++++++++++++++--
 src/views/mapPage/realTimeMap/index.vue       |  2 +-
 2 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/src/views/mapPage/realTimeMap/components/indexPage.vue b/src/views/mapPage/realTimeMap/components/indexPage.vue
index a9102e43..dff8f934 100644
--- a/src/views/mapPage/realTimeMap/components/indexPage.vue
+++ b/src/views/mapPage/realTimeMap/components/indexPage.vue
@@ -6,8 +6,10 @@
       height: heightVal + 'px',
       cursor: isDrag ? 'pointer' : 'default',
       scale: isSizeRadio,
-      transformOrigin: '0 0'
+      transformOrigin: '0 0',
+      width: widthVal + 'px'
     }"
+    @wheel="handleWheel"
   >
     <div
       :class="isDrag ? 'indexpage-container-active' : 'indexpage-container'"
@@ -731,7 +733,9 @@ const emitParent = () => {
 }
 //获取扫描图
 const getMapData = async (item) => {
-  // console.log('============', JSON.parse(item.yamlJson))
+  console.log('===22=========', JSON.parse(item.yamlJson))
+  widthVal.value = JSON.parse(item.yamlJson).width
+  heightVal.value = JSON.parse(item.yamlJson).height
   testCarList.value = []
   nowObject.value = JSON.parse(JSON.stringify(item))
   nowObject.value.showYamlJson = JSON.parse(item.yamlJson)
@@ -811,7 +815,32 @@ const getMapLineList = () => {
     lineList.value = res
   })
 }
+//鼠标滚轮
+const handleWheel = (event) => {
+  // 判断 Ctrl 键是否被按下
+  if (event.ctrlKey) {
+    // 阻止默认的滚动行为
+    event.preventDefault()
 
+    // 根据滚轮滚动方向调整缩放比例
+    if (event.deltaY < 0) {
+      // 向上滚动，放大
+      //放大
+      if (isSizeRadio.value < 4) {
+        isSizeRadio.value += 0.2
+      } else {
+        message.warning('不能在放大了')
+      }
+    } else {
+      //缩小
+      if (isSizeRadio.value > 0.2) {
+        isSizeRadio.value -= 0.2
+      } else {
+        message.warning('不能在缩小了')
+      }
+    }
+  }
+}
 // 获取图片尺寸
 const getImageSize = (url) => {
   return new Promise((resolve, reject) => {
@@ -935,8 +964,8 @@ onUnmounted(() => {
 .affix-container {
   width: 100%;
   position: relative;
-  overflow: hidden;
-  background: rgba(0, 0, 0, 0.8);
+  // overflow: hidden;
+  // background: rgba(0, 0, 0, 0.8);
 }
 .indexpage-container {
   width: 100%;
diff --git a/src/views/mapPage/realTimeMap/index.vue b/src/views/mapPage/realTimeMap/index.vue
index 130461b7..e78f6d86 100644
--- a/src/views/mapPage/realTimeMap/index.vue
+++ b/src/views/mapPage/realTimeMap/index.vue
@@ -189,6 +189,6 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .main-content {
-  background-color: #fff;
+  // background-color: #fff;
 }
 </style>