调整反应板数目一种实现

7 months ago · 20d48496d9
5 changed files with 106 additions and 44 deletions
--- a/src/eventBus.ts
+++ b/src/eventBus.ts
@ -14,9 +14,10 @@ export type ErrorModalData = {
  stackInfo?: null
 }

+export type ConsumeType = 'Plate' | 'LittleBuf' | 'BigBuf' | 'Tip'
 type Events = {
  initDevice: void
-  confirm: { value: number; index: number }
+  confirm: { type: ConsumeType; value: number; index: number }
  'show-error-modal': ErrorModalData
  'show-stack-modal': ErrorModalData['stackInfo'] | null | undefined
  // 其他事件类型
--- a/src/pages/Index/Regular/Consumables.vue
+++ b/src/pages/Index/Regular/Consumables.vue
@ -95,8 +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 SliderAreaEx  from '../components/Consumables/SliderAreaEx.vue';
+// import DragAreaEx  from '../components/Consumables/DragAreaEx.vue';
 import { ref, onMounted, onActivated, onBeforeUnmount, watch } from 'vue'
 import {
  getInitState,
@ -105,7 +105,7 @@ import {
 } from '../../../services/Index/index'
 import { useConsumablesStore, useEmergencyStore } from '../../../store'
 import { useDeviceStore } from '../../../store/index'
-import { eventBus } from '../../../eventBus'
+import { ConsumeType, eventBus } from '../../../eventBus'
 import { ReactionPlate, BottleGroup, LiquidState } from '../../../types/Index'
 import { createWebSocket } from '../../../websocket/socket'
 import type {
@ -119,13 +119,13 @@ 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 sliderValue = ref(25); // 初始值
+// const totalVal = ref(50)

-const hVal = ref(10)
-const hTotal = ref(60)
-const vVal = ref(10)
-const vTotal = ref(60)
+// const hVal = ref(10)
+// const hTotal = ref(60)
+// const vVal = ref(10)
+// const vTotal = ref(60)

 const consumableStore = useConsumablesStore()
 const emergencyStore = useEmergencyStore()
@ -267,19 +267,21 @@ const handleConsumablesState = (data: ConsumablesStateMessage['data']) => {
 }
 // 使用事件总线更新状态
 const updatePlatesAndBuffers = ({
+  type,
  value,
  index,
 }: {
+  type: ConsumeType
  value: number
  index: number
 }) => {
-  if (plates.value && plates.value[index]) {
+  if (type === 'Plate' && plates.value && plates.value[index]) {
    plates.value[index].num = value
  }
-  if (bufferLittles.value && bufferLittles.value[index]) {
+  if (type === 'LittleBuf' && bufferLittles.value && bufferLittles.value[index]) {
    bufferLittles.value[index].num = value
  }
-  if (bufferBig.value && bufferBig.value[index]) {
+  if (type === 'BigBuf' && bufferBig.value && bufferBig.value[index]) {
    bufferBig.value[index].isUse = value > 0
  }
 }
--- a/src/pages/Index/components/Consumables/ChangeNum.vue
+++ b/src/pages/Index/components/Consumables/ChangeNum.vue
@ -108,6 +108,7 @@ const handleConfirm = async () => {
      const res = await updateConsumables(query.value)
      if (res.success) {
        eventBus.emit('confirm', {
+          type: 'Plate',
          value: Number(value.value),
          index: plateIndex.value,
        })
--- a/src/pages/Index/components/Consumables/SliderAreaEx.vue
+++ b/src/pages/Index/components/Consumables/SliderAreaEx.vue
@ -7,7 +7,10 @@
    <div class="slider-track" ref="sliderTrack">
      <div
        class="slider-fill"
-        :style="{ width: `${(sliderValue / totalVal) * 100}%` }"
+        :style="{
+          width: `${(sliderValue / totalVal) * 100}%`,
+          visibility: `${isDragging ? 'visible' : 'hidden'}`,
+        }"
      ></div>
      <div
        :style="{ visibility: `${isDragging ? 'visible' : 'hidden'}` }"
@ -23,27 +26,31 @@
 import { ref, onMounted, onUnmounted, watch, useTemplateRef } from 'vue'

 const props = defineProps({
-  modelValue: {
+  currValue: {
    type: Number,
    default: 25,
  },
  totalValue: {
    type: Number,
-    default: 50,
+    default: 25,
  },
+  order: {
+    type: Number,
+    default: 0
+  }
 })

-const emit = defineEmits(['update:modelValue'])
-
-const sliderValue = ref(props.modelValue)
+const sliderValue = ref(props.currValue)
 const totalVal = ref(props.totalValue)
 const isDragging = ref(false)
 const startX = ref(0)
 const startValue = ref(0)
 const sliderTrack = useTemplateRef('sliderTrack')

+const emit = defineEmits(['update:sliderValue'])
+
 watch(
-  () => props.modelValue,
+  () => props.currValue,
  (newValue) => {
    if (!isDragging.value) {
      sliderValue.value = newValue
@ -75,10 +82,12 @@ function handleDrag(event) {

  sliderValue.value = Math.min(1, Math.max(0, percent)) * totalVal.value
  // console.log(percent, sliderValue.value)
-  emit('update:modelValue', sliderValue.value)
+  // emit('update:modelValue', sliderValue.value)
+
 }

 function handleEnd() {
+  emit('update:sliderValue', sliderValue.value, props.order)
  isDragging.value = false
  document.removeEventListener('mousemove', handleDrag)
  document.removeEventListener('touchmove', handleDrag)
@ -89,21 +98,20 @@ function handleEnd() {

 <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;
+  height: 100%;
+  /* background-color: #ddd; */
  cursor: pointer;
 }

 .slider-fill {
  position: absolute;
  height: 100%;
-  background-color: #4caf50;
+  background-color: rgba(255, 255, 255, 0.2);
 }

 .slider-thumb {
@ -111,8 +119,9 @@ function handleEnd() {
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
-  font-size: 32px;
-  color: gray;
+  font-size: 40px;
+  font-weight: 600;
+  color: #FFF;
 }

 .slider-thumb:active {
--- a/src/pages/Index/components/Consumables/SpttingPlates.vue
+++ b/src/pages/Index/components/Consumables/SpttingPlates.vue
@ -7,20 +7,32 @@
        <div class="area-text">反应板夹区</div>
      </div>
      <div class="real-time-temperature">
-        <div :class="['status-ball', { 'overheat': temperature > 40 }]"></div>
+        <div :class="['status-ball', { overheat: temperature > 40 }]"></div>
        <div class="number">温度: {{ temperature }}°</div>
      </div>
    </div>
    <!--反应板显示区域-->
    <div class="sptting-plates">
-      <div class="card" v-for="i in 6" :key="i" @click="changeNumber(plates[i - 1], i - 1)">
+      <div class="card" v-for="i in 6" :key="i">
        <div class="plate-area">
          <!-- 当 plates 数组长度不为 0 时，渲染 Plate 组件，否则显示默认的图片 -->
          <div v-if="plates.length > 0" class="plate">
            <Plate :value="plates[i - 1].num" :color="plates[i - 1].color" />
+            <SliderAreaEx
+              v-if="plates[i - 1].num > 0"
+              class="slider-area"
+              :currValue="plates[i - 1].num"
+              :totalValue="totalVal"
+              :order="i"
+              @update:sliderValue="updateSliderVal"
+            />
          </div>
          <div v-else class="close-circle">
-            <img src="@/assets/Index/stop.svg" alt="" style="width: 40px;height: 40px; margin-bottom: 20px;" />
+            <img
+              src="@/assets/Index/stop.svg"
+              alt=""
+              style="width: 40px; height: 40px; margin-bottom: 20px"
+            />
          </div>
        </div>
        <div class="plate-bottom" v-if="plates.length > 0">
@ -36,34 +48,63 @@
      </div>
    </div>
    <!-- 修改数字弹框 -->
-    <ChangeNum ref="changeNumRef"></ChangeNum>
+    <!-- <ChangeNum ref="changeNumRef"></ChangeNum> -->
  </div>
 </template>

 <script setup>
-import Plate from './Plate.vue';
-import { ref, onMounted, onBeforeUnmount } from 'vue';
-import ChangeNum from './ChangeNum.vue';
+import Plate from './Plate.vue'
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import SliderAreaEx from './SliderAreaEx.vue'
+import { eventBus } from '../../../../eventBus'
+// import ChangeNum from './ChangeNum.vue';
+import { useDeviceStore } from '../../../../store/index'
+import { updateConsumables } from '../../../../services'
+import { pl } from 'element-plus/es/locale/index.mjs'

 const props = defineProps({
  plates: {
    type: Array,
-    default: () => []
+    default: () => [],
  },
  temperature: {
    type: Number,
-    default: 40
-  }
+    default: 40,
+  },
 })

-const changeNumRef = ref()
-const changeNumber = (plate, index) => {
-  if (props.plates.length > 0) {
-    changeNumRef.value.openDialog(plate, index)
+const totalVal = ref(25)
+const deviceStore = useDeviceStore()
+
+const updateSliderVal = async (plate, order) => {
+  // eventBus.emit('confirm', { type: 'Plate', value: plate, index })
+  if (deviceStore.status === 'IDLE') {
+    try {
+      const newVal = plate.toFixed()
+      const res = await updateConsumables({group: `CG${order}`, num: newVal})
+      if (res.success) {
+        // eventBus.emit('confirm', {
+        //   type: 'Plate',
+        //   value: newVal,
+        //   index: order - 1,
+        // })
+        // isOpen.value = false
+      }
+    } catch (error) {
+      console.error('更新失败:', error)
+    }
+  } else {
+    ElMessage.error('设备正在工作，无法修改数值')
  }
-  console.log('plate', plate)
 }

+// const changeNumRef = ref()
+// const changeNumber = (plate, index) => {
+//   if (props.plates.length > 0) {
+//     changeNumRef.value.openDialog(plate, index)
+//   }
+//   console.log('plate', plate)
+// }
 </script>

 <style lang="less" scoped>
@ -150,7 +191,15 @@ const changeNumber = (plate, index) => {
        display: flex;
        justify-content: space-between;
        align-items: center;
-
+        position: relative;
+
+        .slider-area {
+          position: absolute;
+          left: 0;
+          top: 0;
+          right: 0;
+          bottom: 30px;
+        }
        .plate {
          width: 100%;
          height: 76px;
@ -180,4 +229,4 @@ const changeNumber = (plate, index) => {
    }
  }
 }
-</style>
+</style>