小瓶缓冲液支持滑动修改

src/pages/Index/Regular/Consumables.vue

@@ -83,6 +83,7 @@
         <MainComponent
           v-for="(item, idx) in consumableStore.consumableData?.littBottleGroup"
           :key="idx"
+          :order="idx + 1"
           class="ball-grid"
           :projectName="item.projName || ''"
           :currentCount="item.num"
@@ -93,6 +94,7 @@
           gridHeight="240px"
           :activeColor="consumableStore.projIdColorMap[item.projId!]"
           :inUse="item.isInstall"
+          @updateBottleNum="updateLittleBottomNum"
         />
       </div>
     </div>
@@ -243,6 +245,41 @@ const handleUnloadConsumable = async (index: number) => {
   }
 }
 
+const updateLittleBottomNum = async ({
+  index,
+  bottleNum,
+  sync,
+}: {
+  index: number
+  bottleNum: number
+  sync: boolean
+}) => {
+  if (bottleNum < 0) {
+    return
+  }
+  if (deviceStore.deviceState.workState !== 'WORKING') {
+    consumableStore.setDisableUpdateConsumableData(true)
+    consumableStore.updateLittleBottomNum(index, bottleNum)
+    if (sync) {
+      console.log(`🚀 ~ updatePlateNum ~ order ${index + 1}, num ${bottleNum}`)
+      try {
+        const res = await updateConsumables({
+          group: `CG${index + 1}`,
+          num: bottleNum,
+        })
+        if (!res.success) {
+          errMsg$.next(res.data.info || '修改耗材数量失败')
+        }
+      } catch (error) {
+        console.error('修改耗材数量失败:', error)
+      }
+      consumableStore.setDisableUpdateConsumableData(false)
+    }
+  } else {
+    errMsg$.next('设备正在工作，无法修改数值')
+  }
+}
+
 const updateReactionPlateNum = async ({
   index,
   plateNum,
@@ -261,7 +298,10 @@ const updateReactionPlateNum = async ({
     if (sync) {
       console.log(`🚀 ~ updatePlateNum ~ order ${index + 1}, num ${plateNum}`)
       try {
-        const res = await updateConsumables({ group: `CG${index + 1}`, num: plateNum })
+        const res = await updateConsumables({
+          group: `CG${index + 1}`,
+          num: plateNum,
+        })
         if (!res.success) {
           errMsg$.next(res.data.info || '修改耗材数量失败')
         }
@@ -293,7 +333,10 @@ const updateTipNum = async ({
     if (sync) {
       console.log(`🚀 ~ updateTipNum ~ order ${index + 1}, num ${tipNum}`)
       try {
-        const res = await updateTipsNum({ group: `TipG${index + 1}`, num: tipNum })
+        const res = await updateTipsNum({
+          group: `TipG${index + 1}`,
+          num: tipNum,
+        })
         if (!res.success) {
           errMsg$.next(res.data.info || '修改耗材数量失败')
         }
@@ -301,7 +344,7 @@ const updateTipNum = async ({
         console.error('修改耗材数量失败:', error)
       }
       consumableStore.setDisableUpdateConsumableData(false)
-    } 
+    }
   } else {
     errMsg$.next('设备正在工作，无法修改数值')
   }

src/pages/Index/components/Consumables/MainComponent.vue

@@ -1,11 +1,26 @@
 <template>
   <div class="combined-container">
     <!-- 小球组件 -->
-    <BallGrid2 :total="totalBalls" :activated="activatedBalls" :columns="columns" :width="gridWidth" :height="gridHeight"
-      :activeColor="activeColor" :inUse="inUse"/>
+    <BallGrid2
+      :order="order"
+      :total="totalBalls"
+      :activated="activatedBalls"
+      :columns="columns"
+      :width="gridWidth"
+      :height="gridHeight"
+      :activeColor="activeColor"
+      :inUse="inUse"
+      :canUpdate="true"
+      @update:TipNum="handleUpdateBottleNum"
+    />
 
     <!-- 项目信息组件 -->
-    <InfoBar :projectName="projectName" :currentCount="currentCount" :maxCount="maxCount" :width="gridWidth"/>
+    <InfoBar
+      :projectName="projectName"
+      :currentCount="currentCount"
+      :maxCount="maxCount"
+      :width="gridWidth"
+    />
   </div>
 </template>
 
@@ -15,6 +30,9 @@ import InfoBar from './InfoBar.vue' // 引入项目信息组件
 
 // Props 定义
 const props = defineProps({
+  order: {
+    type: Number,
+  },
   projectName: {
     type: String,
     // required: true,
@@ -53,9 +71,18 @@ const props = defineProps({
   },
   inUse: {
     type: Boolean,
-    default: true
+    default: true,
   },
 })
+const emit = defineEmits(['updateBottleNum'])
+
+const handleUpdateBottleNum = (
+  remainingCount,
+  order,
+  sync,
+) => {
+  emit('updateBottleNum', { index: order - 1, bottleNum: remainingCount, sync })
+}
 </script>
 
 <style scoped>

src/store/modules/consumables.ts

@@ -95,6 +95,11 @@ export const useConsumablesStore = defineStore(
         consumableData.value.reactionPlateGroup[index].num = num
       }
     }
+    function updateLittleBottomNum(index: number, num: number) {
+      if (index < consumableData.value.littBottleGroup.length && num >= 0) {
+        consumableData.value.littBottleGroup[index].num = num
+      }
+    }
 
     function setIdCardInserted(status: boolean) {
       isIdCardInserted.value = status
@@ -178,6 +183,7 @@ export const useConsumablesStore = defineStore(
       setConsumablesData,
       updateReactionPlateNum,
       updateTipNum,
+      updateLittleBottomNum,
       setDisableUpdateConsumableData,
 
       tipCount,