From 20d48496d92830dd981ddabdea9111053ec7da7d Mon Sep 17 00:00:00 2001
From: zhangjiming <zhangjiming@costrip.cn>
Date: Sat, 4 Jan 2025 09:55:27 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E5=8F=8D=E5=BA=94=E6=9D=BF?=
 =?UTF-8?q?=E6=95=B0=E7=9B=AE=E4=B8=80=E7=A7=8D=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/eventBus.ts                                    |  3 +-
 src/pages/Index/Regular/Consumables.vue            | 26 +++----
 .../Index/components/Consumables/ChangeNum.vue     |  1 +
 .../Index/components/Consumables/SliderAreaEx.vue  | 37 ++++++----
 .../Index/components/Consumables/SpttingPlates.vue | 83 +++++++++++++++++-----
 5 files changed, 106 insertions(+), 44 deletions(-)

diff --git a/src/eventBus.ts b/src/eventBus.ts
index 2127bcb..04211dd 100644
--- 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
   // 其他事件类型
diff --git a/src/pages/Index/Regular/Consumables.vue b/src/pages/Index/Regular/Consumables.vue
index d8914bc..045167d 100644
--- 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
   }
 }
diff --git a/src/pages/Index/components/Consumables/ChangeNum.vue b/src/pages/Index/components/Consumables/ChangeNum.vue
index bebf852..f05a017 100644
--- 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,
         })
diff --git a/src/pages/Index/components/Consumables/SliderAreaEx.vue b/src/pages/Index/components/Consumables/SliderAreaEx.vue
index d7ea32e..fa1bca1 100644
--- 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 {
diff --git a/src/pages/Index/components/Consumables/SpttingPlates.vue b/src/pages/Index/components/Consumables/SpttingPlates.vue
index 58f51a6..3e13081 100644
--- 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>
\ No newline at end of file
+</style>