fix: 耗材操作优化

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() {