添加初步滑块组件

7 months ago · e319ce87a5
4 changed files with 388 additions and 0 deletions
--- a/src/pages/Index/Regular/Consumables.vue
+++ b/src/pages/Index/Regular/Consumables.vue
@ -49,6 +49,9 @@
    <div class="main-top">
      <div class="plate-area">
        <SpttingPlates :plates="plates" :temperature="currentTemperature" />
+
+        <!-- <SliderAreaEx v-model="sliderValue" v-model:totalValue="totalVal"/>
+        <DragAreaEx v-model:hVal="hVal" v-model:hTotal="hTotal" v-model:vVal="vVal" v-model:vTotal="vTotal"/> -->
      </div>
      <div class="move-liquid-area">
        <MoveLiquidArea
@ -92,6 +95,8 @@

 <script setup lang="ts">
 import { MoveLiquidArea, SpttingPlates, MainComponent } from '../components'
+import SliderAreaEx  from '../components/Consumables/SliderAreaEx.vue';
+import DragAreaEx  from '../components/Consumables/DragAreaEx.vue';
 import { ref, onMounted, onActivated, onBeforeUnmount, watch } from 'vue'
 import {
  getInitState,
@ -114,6 +119,14 @@ import { ElMessage } from 'element-plus'
 const { wsUrl } = getServerInfo('/api/v1/app/ws/state')
 const socket = createWebSocket(wsUrl)

+const sliderValue = ref(25); // 初始值
+const totalVal = ref(50)
+
+const hVal = ref(10)
+const hTotal = ref(60)
+const vVal = ref(10)
+const vTotal = ref(60)
+
 const consumableStore = useConsumablesStore()
 const emergencyStore = useEmergencyStore()
 const deviceStore = useDeviceStore()
--- a/src/pages/Index/components/Consumables/DragAreaEx.vue
+++ b/src/pages/Index/components/Consumables/DragAreaEx.vue
@ -0,0 +1,141 @@
+<template>
+  <div
+    class="slider-container"
+    @mousedown="handleStart"
+    @touchstart.prevent="handleStart"
+  >
+    <div class="slider-track" ref="sliderTrack">
+      <div
+        class="slider-fill"
+        :style="{ width: `${(hValue / hTotal) * 100}%`, height: `${(vValue / vTotal) * 100}%` }"
+      ></div>
+      <div
+        :style="{ visibility: `${isDragging ? 'visible' : 'hidden'}` }"
+        class="slider-thumb"
+      >
+        {{ `${hValue.toFixed()}, ${vValue.toFixed()}` }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, watch, useTemplateRef } from 'vue'
+
+const props = defineProps({
+  hVal: {
+    type: Number,
+    default: 25,
+  },
+  hTotal: {
+    type: Number,
+    default: 50,
+  },
+  vVal: {
+    type: Number,
+    default: 25,
+  },
+  vTotal: {
+    type: Number,
+    default: 50,
+  },
+})
+
+const emit = defineEmits(['update:hVal','update:vVal'])
+
+const hValue = ref(props.hVal)
+const hTotalVal = ref(props.hTotal)
+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(
+  [() => props.hVal, () => props.vVal],
+  (newX, newY) => {
+    if (!isDragging.value) {
+      hValue.value = newX
+      vValue.value = newY
+    }
+  },
+)
+
+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
+  
+  isDragging.value = true
+  document.addEventListener('mousemove', handleDrag)
+  document.addEventListener('touchmove', handleDrag, { passive: false })
+  document.addEventListener('mouseup', handleEnd)
+  document.addEventListener('touchend', handleEnd)
+}
+
+function handleDrag(event) {
+  if (!isDragging.value) return
+
+  const touchEvent = event.touches ? event.touches[0] : event
+  const deltaX = touchEvent.clientX - startX.value
+  const deltaY = touchEvent.clientY - startY.value
+  const rect = sliderTrack.value.getBoundingClientRect()
+  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
+  // console.log(percent, sliderValue.value)
+  emit('update:hVal', hValue.value)
+  emit('update:vVal', vValue.value)
+}
+
+function handleEnd() {
+  isDragging.value = false
+  document.removeEventListener('mousemove', handleDrag)
+  document.removeEventListener('touchmove', handleDrag)
+  document.removeEventListener('mouseup', handleEnd)
+  document.removeEventListener('touchend', handleEnd)
+}
+</script>
+
+<style scoped>
+.slider-container {
+  width: 300px;
+  height: 300px;
+  touch-action: none; /* Prevents the browser's default panning behavior */
+}
+
+.slider-track {
+  position: relative;
+  height: 100%;
+  background-color: #ddd;
+  cursor: pointer;
+}
+
+.slider-fill {
+  position: absolute;
+  /* height: 100%; */
+  background-color: #4caf50;
+}
+
+.slider-thumb {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  font-size: 32px;
+  color: gray;
+}
+
+.slider-thumb:active {
+  cursor: grabbing;
+}
+</style>
--- a/src/pages/Index/components/Consumables/SliderArea.vue
+++ b/src/pages/Index/components/Consumables/SliderArea.vue
@ -0,0 +1,113 @@
+<template>
+  <div
+    class="slider-container"
+    @mousedown="handleStart"
+    @touchstart.prevent="handleStart"
+  >
+    <div class="slider-track" ref="sliderTrack">
+      <div class="slider-fill" :style="{ width: `${sliderValue}%` }"></div>
+      <div
+        :style="{ visibility: `${isDragging ? 'visible' : 'hidden'}` }"
+        class="slider-thumb"
+      >
+        {{ sliderValue.toFixed() }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, watch, useTemplateRef } from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: Number,
+    default: 50,
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const sliderValue = ref(props.modelValue)
+const isDragging = ref(false)
+const startX = ref(0)
+const startValue = ref(0)
+//   const sliderThumb = ref(null);
+const sliderTrack = useTemplateRef('sliderTrack')
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (!isDragging.value) {
+      sliderValue.value = newValue
+    }
+  },
+)
+
+function handleStart(event) {
+  const touchEvent = event.touches ? event.touches[0] : event
+  startX.value = touchEvent.clientX
+  const rect = sliderTrack.value.getBoundingClientRect()
+  startValue.value = (sliderValue.value * rect.width) / 100
+
+  isDragging.value = true
+  document.addEventListener('mousemove', handleDrag)
+  document.addEventListener('touchmove', handleDrag, { passive: false })
+  document.addEventListener('mouseup', handleEnd)
+  document.addEventListener('touchend', handleEnd)
+}
+
+function handleDrag(event) {
+  if (!isDragging.value) return
+
+  const touchEvent = event.touches ? event.touches[0] : event
+  const deltaX = touchEvent.clientX - startX.value
+  const rect = sliderTrack.value.getBoundingClientRect()
+  let percent = ((deltaX + startValue.value) / rect.width) * 100
+
+  // Limit the value between 0 and 100
+  sliderValue.value = Math.min(100, Math.max(0, percent))
+  emit('update:modelValue', sliderValue.value)
+}
+
+function handleEnd() {
+  isDragging.value = false
+  document.removeEventListener('mousemove', handleDrag)
+  document.removeEventListener('touchmove', handleDrag)
+  document.removeEventListener('mouseup', handleEnd)
+  document.removeEventListener('touchend', handleEnd)
+}
+</script>
+
+<style scoped>
+.slider-container {
+  width: 300px;
+  touch-action: none; /* Prevents the browser's default panning behavior */
+}
+
+.slider-track {
+  position: relative;
+  height: 4rem;
+  background-color: #ddd;
+  cursor: pointer;
+}
+
+.slider-fill {
+  position: absolute;
+  height: 100%;
+  background-color: #4caf50;
+}
+
+.slider-thumb {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  font-size: 32px;
+  color: gray;
+}
+
+.slider-thumb:active {
+  cursor: grabbing;
+}
+</style>
--- a/src/pages/Index/components/Consumables/SliderAreaEx.vue
+++ b/src/pages/Index/components/Consumables/SliderAreaEx.vue
@ -0,0 +1,121 @@
+<template>
+  <div
+    class="slider-container"
+    @mousedown="handleStart"
+    @touchstart.prevent="handleStart"
+  >
+    <div class="slider-track" ref="sliderTrack">
+      <div
+        class="slider-fill"
+        :style="{ width: `${(sliderValue / totalVal) * 100}%` }"
+      ></div>
+      <div
+        :style="{ visibility: `${isDragging ? 'visible' : 'hidden'}` }"
+        class="slider-thumb"
+      >
+        {{ sliderValue.toFixed() }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, watch, useTemplateRef } from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: Number,
+    default: 25,
+  },
+  totalValue: {
+    type: Number,
+    default: 50,
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const sliderValue = ref(props.modelValue)
+const totalVal = ref(props.totalValue)
+const isDragging = ref(false)
+const startX = ref(0)
+const startValue = ref(0)
+const sliderTrack = useTemplateRef('sliderTrack')
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (!isDragging.value) {
+      sliderValue.value = newValue
+    }
+  },
+)
+
+function handleStart(event) {
+  const touchEvent = event.touches ? event.touches[0] : event
+  startX.value = touchEvent.clientX
+  const rect = sliderTrack.value.getBoundingClientRect()
+  startValue.value = (sliderValue.value / totalVal.value) * rect.width
+  // console.log(sliderValue.value, totalVal.value)
+  // console.log(startValue.value, rect.width)
+  isDragging.value = true
+  document.addEventListener('mousemove', handleDrag)
+  document.addEventListener('touchmove', handleDrag, { passive: false })
+  document.addEventListener('mouseup', handleEnd)
+  document.addEventListener('touchend', handleEnd)
+}
+
+function handleDrag(event) {
+  if (!isDragging.value) return
+
+  const touchEvent = event.touches ? event.touches[0] : event
+  const deltaX = touchEvent.clientX - startX.value
+  const rect = sliderTrack.value.getBoundingClientRect()
+  let percent = (deltaX + startValue.value) / rect.width
+
+  sliderValue.value = Math.min(1, Math.max(0, percent)) * totalVal.value
+  // console.log(percent, sliderValue.value)
+  emit('update:modelValue', sliderValue.value)
+}
+
+function handleEnd() {
+  isDragging.value = false
+  document.removeEventListener('mousemove', handleDrag)
+  document.removeEventListener('touchmove', handleDrag)
+  document.removeEventListener('mouseup', handleEnd)
+  document.removeEventListener('touchend', handleEnd)
+}
+</script>
+
+<style scoped>
+.slider-container {
+  width: 300px;
+  touch-action: none; /* Prevents the browser's default panning behavior */
+}
+
+.slider-track {
+  position: relative;
+  height: 4rem;
+  background-color: #ddd;
+  cursor: pointer;
+}
+
+.slider-fill {
+  position: absolute;
+  height: 100%;
+  background-color: #4caf50;
+}
+
+.slider-thumb {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  font-size: 32px;
+  color: gray;
+}
+
+.slider-thumb:active {
+  cursor: grabbing;
+}
+</style>