From ef57bb43bb9a71c53c32d757ac4ac87b3436df7d Mon Sep 17 00:00:00 2001
From: guoapeng <GuoAnPeng@163.com>
Date: Tue, 22 Apr 2025 10:20:08 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=80=97=E6=9D=90=E6=93=8D=E4=BD=9C?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Index/components/Consumables/DragAreaEx.vue    | 40 +++++++---------------
 1 file changed, 12 insertions(+), 28 deletions(-)

diff --git a/src/pages/Index/components/Consumables/DragAreaEx.vue b/src/pages/Index/components/Consumables/DragAreaEx.vue
index f5588e8..d0a5a16 100644
--- a/src/pages/Index/components/Consumables/DragAreaEx.vue
+++ b/src/pages/Index/components/Consumables/DragAreaEx.vue
@@ -5,22 +5,12 @@
     @touchstart.prevent="handleStart"
   >
     <div class="slider-track" ref="sliderTrack">
-      <!-- <div
-        class="slider-fill"
-        :style="{ width: `${(hValue / hTotalVal) * 100}%`, height: `${(vValue / vTotalVal) * 100}%` }"
-      ></div>
-      <span
-        :style="{ visibility: `${isDragging ? 'visible' : 'hidden'}` }"
-        class="slider-thumb"
-      >
-        {{ `${hValue.toFixed()}; ${vValue.toFixed()}` }}
-      </span> -->
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted, watch, useTemplateRef } from 'vue'
+import { ref, watch, useTemplateRef } from 'vue'
 
 const props = defineProps({
   hVal: {
@@ -49,10 +39,7 @@ const vValue = ref(props.vVal)
 const vTotalVal = ref(props.vTotal)
 
 const isDragging = ref(false)
-const startX = ref(0)
-const startY = ref(0)
-const startXValue = ref(0)
-const startYValue = ref(0)
+
 const sliderTrack = useTemplateRef('sliderTrack')
 
 watch(
@@ -67,11 +54,17 @@ watch(
 
 function handleStart(event) {
   const touchEvent = event.touches ? event.touches[0] : event
-  startX.value = touchEvent.clientX
-  startY.value = touchEvent.clientY
   const rect = sliderTrack.value.getBoundingClientRect()
-  startXValue.value = (hValue.value / hTotalVal.value) * rect.width
-  startYValue.value = (vValue.value / vTotalVal.value) * rect.height
+  const clientX = touchEvent.clientX
+  const clientY = touchEvent.clientY
+  const relativeX = clientX - rect.left
+  const relativeY = clientY - rect.top
+
+  const row = Math.ceil(relativeY / (rect.height / vTotalVal.value) )
+  const col = Math.ceil(relativeX / (rect.width /hTotalVal.value) )
+
+  const empty = (row - 1)* hTotalVal.value + col - 1
+  emit('update:sliderValue', empty)
 
   isDragging.value = true
   document.addEventListener('mousemove', handleDrag)
@@ -95,15 +88,6 @@ function handleDrag(event) {
 
   const empty = (row - 1)* hTotalVal.value + col
   emit('update:sliderValue', empty)
-
-  //
-  // let percentX = (deltaX + startXValue.value) / rect.width
-  // let percentY = (deltaY + startYValue.value) / rect.height
-  //
-  // hValue.value = Math.min(1, Math.max(0, percentX)) * hTotalVal.value
-  // vValue.value = Math.min(1, Math.max(0, percentY)) * vTotalVal.value
-  //
-  // emit('update:sliderValue', +hValue.value.toFixed(), +vValue.value.toFixed())
 }
 
 function handleEnd() {