小瓶判断isUsed

src/pages/Index/Regular/Consumables.vue

@@ -87,6 +87,7 @@
           gridWidth="240px"
           gridHeight="240px"
           :activeColor="item.color"
+          :inUse="item.isUsed"
         />
       </div>
     </div>
@@ -181,6 +182,7 @@ interface BufferLittle {
   type?: string
   projId?: number
   projName?: string
+  isUsed?: boolean
 }
 const bufferLittles = ref<BufferLittle[]>([
   {
@@ -221,7 +223,9 @@ const bufferLittles = ref<BufferLittle[]>([
   },
 ])
 //管理大缓冲液的状态
-const bufferBig = ref<BottleGroup[]>([])
+const bufferBig = ref<BottleGroup[]>(
+  Array.from({ length: 6 }, () => ({}) as BottleGroup),
+)
 //急诊区状态
 const emergencyInfo = ref(emergencyStore.$state.emergencyInfo || {})
 //是否处理扫描结果
@@ -426,7 +430,7 @@ const handleIsUnload = () => {
       color: '#4caf50',
     },
   ]
-  bufferBig.value = Array.from({ length: 6 }, () => ({ num: 0, isUse: false}))
+  bufferBig.value = Array.from({ length: 6 }, () => ({ num: 0, isUse: false }))
 }
 
 const isDragging = ref(false)
@@ -444,7 +448,7 @@ const updateTipNum = async ({
     tempTipNum.value[index] = tipNum
     //调用接口
     if (sync) {
-      console.log(`🚀 ~ updateTipNum ~ order ${index + 1}, num ${tipNum}`, )
+      console.log(`🚀 ~ updateTipNum ~ order ${index + 1}, num ${tipNum}`)
       isDragging.value = false
       try {
         await updateTipsNum({ group: `TipG${index + 1}`, num: tipNum })
@@ -569,7 +573,7 @@ const updateTipNum = async ({
       flex-wrap: wrap;
       column-gap: 20px;
       row-gap: 12px;
-      padding: 0 24px ;
+      padding: 0 24px;
       .ball-grid {
         overflow: hidden;
       }

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

@@ -8,6 +8,7 @@
         :style="ballStyle(index)"
       >
         <div class="inner-circle" :style="innerCircleStyle(index)"></div>
+        <img class="no-use-img" v-if="!inUse" src="@/assets/Index/stop.svg" alt="no-use" />
       </div>
     </div>
     <!-- 拖动区 -->
@@ -65,6 +66,10 @@ const props = defineProps({
     type: String,
     default: 'lightgray', // 未激活时内部小球的颜色
   },
+  inUse: {
+    type: Boolean,
+    default: true
+  },
   canUpdate: {
     type: Boolean,
     default: false,
@@ -123,7 +128,7 @@ const innerCircleStyle = (index) => {
   return {
     width: '80%',
     height: '80%',
-    backgroundColor: isActive ? props.activeColor : props.innerColor,
+    backgroundColor: isActive && props.inUse ? props.activeColor : props.innerColor,
     borderRadius: '50%',
     transition: 'background-color 0.3s ease',
   }
@@ -173,6 +178,13 @@ watch(
   justify-content: center;
   align-items: center;
   transition: background-color 0.3s ease;
+  position: relative;
+  .no-use-img {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translateX(-50%) translateY(-50%);
+  }
 }
 
 .inner-circle {

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

@@ -2,7 +2,7 @@
   <div class="combined-container">
     <!-- 小球组件 -->
     <BallGrid2 :total="totalBalls" :activated="activatedBalls" :columns="columns" :width="gridWidth" :height="gridHeight"
-      :activeColor="activeColor" />
+      :activeColor="activeColor" :inUse="inUse"/>
 
     <!-- 项目信息组件 -->
     <InfoBar :projectName="projectName" :currentCount="currentCount" :maxCount="maxCount" />
@@ -51,6 +51,10 @@ const props = defineProps({
     type: String,
     default: '#4caf50', // 激活小球的颜色
   },
+  inUse: {
+    type: Boolean,
+    default: true
+  },
 })
 </script>