更换检测项目的颜色

src/pages/Index/Index.vue

@@ -70,7 +70,7 @@
     <!-- 主内容区域 -->
     <main class="main-content">
       <router-view v-slot="{ Component }">
-        <keep-alive :exclude="['TubeUserId']">
+        <keep-alive :exclude="['TubeUserId','EmergencyForm']">
           <component :is="Component" />
         </keep-alive>
       </router-view>
@@ -482,11 +482,14 @@ const startTest = async () => {
     if (res && res.success) {
       await untilDeviceReady()
     } else {
-      ElMessage({
-        message: res.data.info,
-        type: 'error',
-        duration: 2000,
-      })
+      res &&
+        res.data &&
+        res.data.info &&
+        ElMessage({
+          message: res.data.info,
+          type: 'error',
+          duration: 2000,
+        })
     }
   } catch (error) {
     console.error('开始测试失败:', error)
@@ -501,11 +504,14 @@ const pauseTest = async () => {
   if (res && res.success) {
     await untilDeviceReady()
   } else {
-    ElMessage({
-      message: res.data.info,
-      type: 'error',
-      duration: 2000,
-    })
+    res &&
+      res.data &&
+      res.data.info &&
+      ElMessage({
+        message: res.data.info,
+        type: 'error',
+        duration: 2000,
+      })
   }
 }
 
@@ -517,11 +523,14 @@ const stopTest = async () => {
   if (res && res.success) {
     await untilDeviceReady()
   } else {
-    ElMessage({
-      message: res.data.info,
-      type: 'error',
-      duration: 2000,
-    })
+    res &&
+      res.data &&
+      res.data.info &&
+      ElMessage({
+        message: res.data.info,
+        type: 'error',
+        duration: 2000,
+      })
   }
 }
 //继续测试
@@ -532,11 +541,14 @@ const continueTest = async () => {
   if (res && res.success) {
     await untilDeviceReady()
   } else {
-    ElMessage({
-      message: res.data.info,
-      type: 'error',
-      duration: 2000,
-    })
+    res &&
+      res.data &&
+      res.data.info &&
+      ElMessage({
+        message: res.data.info,
+        type: 'error',
+        duration: 2000,
+      })
   }
 }
 const handleConfirm = async () => {

src/pages/Index/Regular/Consumables.vue

@@ -91,7 +91,7 @@
           :columns="5"
           gridWidth="240px"
           gridHeight="240px"
-          :activeColor="item.color"
+          :activeColor="consumableStore.projIdColorMap[item.projId!]"
           :inUse="item.isInstall"
         />
       </div>

src/pages/Index/Regular/Running.vue

@@ -43,7 +43,7 @@
           </div>
           <span
             class="scan-men"
-            :style="`background-color:${runningStore.optScanModuleState.projInfo.color}`"
+            :style="`background-color:${consumablesStore.projIdColorMap[runningStore.optScanModuleState.projId]}`"
           >
             <img
               src="@/assets/men.png"

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

@@ -16,11 +16,11 @@
 </template>
 
 <script setup>
+import { useConsumablesStore } from '@/store'
 import { computed, ref, watch, onMounted, onBeforeUnmount } from 'vue'
 
-// 移液盘复用组件
+const consumableStore = useConsumablesStore()
 
-// Props 定义
 const props = defineProps({
   total: {
     type: Number,
@@ -76,7 +76,7 @@ const innerCircleStyle = (index) => {
   const isActive = !!ball.isInstall
   return {
     height: `${ball.num/25.0*100}%`,
-    backgroundColor: isActive ? ball.color : props.innerColor,
+    backgroundColor: isActive ? consumableStore.projIdColorMap[ball.projId] : props.innerColor,
     transition: 'background-color 0.3s ease',
   }
 }

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

@@ -35,7 +35,7 @@
           >
             <Plate
               :value="parseInt(plates[i - 1].num)"
-              :color="plates[i - 1].color"
+              :color="consumableStore.projIdColorMap[[plates[i - 1].projId]]"
             />
             <SliderAreaEx
               v-if="plates[i - 1].num > 0"
@@ -71,6 +71,9 @@ import { eventBus } from '../../../../eventBus'
 // import ChangeNum from './ChangeNum.vue';
 import { updateConsumables } from '../../../../services'
 import { pl } from 'element-plus/es/locale/index.mjs'
+import { useConsumablesStore } from '@/store'
+
+const consumableStore = useConsumablesStore()
 
 const props = defineProps({
   plates: {

src/pages/Index/components/Running/BigBufferDisplay.vue

@@ -12,7 +12,7 @@
         <div class="inner-circle" v-if="ball.isInstall">
           <div
             class="value-circle"
-            :style="`background-color: ${settingTubeStore.projectIdMap[ball.projId!].color}`"
+            :style="`background-color: ${consumableStore.projIdColorMap[ball.projId!]}`"
           >
             {{ ball.num }}
           </div>
@@ -71,9 +71,10 @@
 }
 </style>
 <script setup lang="ts">
-import { useSettingTestTubeStore } from '@/store'
+import { useConsumablesStore } from '@/store'
 import { LargeBottleGroup } from '@/websocket/socket'
-const settingTubeStore = useSettingTestTubeStore()
+
+const consumableStore = useConsumablesStore()
 
 const props = defineProps<{ data: LargeBottleGroup[]; width: number }>()
 

src/pages/Index/components/Running/LittleBufferDisplay.vue

@@ -11,8 +11,9 @@
 </template>
 <script setup lang="ts">
 
+import { useConsumablesStore } from '@/store';
 import type { LittleBottleGroup } from '../../../../websocket/socket'
-
+const consumableStore = useConsumablesStore()
 // 定义组件接收的 props
 defineProps<{ bufferData: LittleBottleGroup[] }>()
 // 计算填充样式
@@ -20,7 +21,7 @@ const getFillStyle = (item: LittleBottleGroup) => {
   //@ts-ignore
   const percentage = (item.num / 25) * 100
   return {
-    background: `linear-gradient(to top, ${item.color} ${percentage}%, #d3d3d3 ${percentage}%)`,
+    background: `linear-gradient(to top, ${consumableStore.projIdColorMap[item.projId!]} ${percentage}%, #d3d3d3 ${percentage}%)`,
   }
 }
 </script>

src/pages/Index/components/Running/PlateDisplay.vue

@@ -2,7 +2,7 @@
   <div class="project-list">
     <div v-for="(project, index) in projects" :key="index" class="project-item">
       <div class="project-info" :style="{
-        background: `linear-gradient(to left, ${project.color || '#ccc'} ${getPercentage(
+        background: `linear-gradient(to left, ${consumableStore.projIdColorMap[project.projId!] || '#ccc'} ${getPercentage(
           project.num || 0,
         )}%, #C0C0C0 ${getPercentage(project.num || 0)}%)`,
       }">
@@ -18,7 +18,9 @@
 </template>
 <script setup lang="ts">
 
+import { useConsumablesStore } from '@/store';
 import type { ReactionPlateGroup } from '@/websocket/socket'
+const consumableStore = useConsumablesStore()
 
 defineProps<{
   projects: ReactionPlateGroup[]

src/pages/Index/components/Running/SubTank.vue

@@ -128,6 +128,9 @@ import run_drop from '@/assets/running/drop_s.svg'
 import run_incubating from '@/assets/running/incubating_s.svg'
 import run_complete from '@/assets/running/complete_s.svg'
 import run_error from '@/assets/running/error_s.svg'
+import { useConsumablesStore } from '@/store'
+
+const consumableStore = useConsumablesStore()
 
 const props = defineProps<{
   item: SubTank
@@ -161,7 +164,7 @@ const getRotationStyle = (item: SubTank, index: number) => {
       rotate(${angle}deg)            /* 旋转到对应角度 */
       translateY(-400px)             /* 向上偏移到圆环位置 */
     `,
-    backgroundColor: item.projInfo?.color || '#ffffff',
+    backgroundColor: item.projId ? consumableStore.projIdColorMap[item.projId] : '#ffffff',
     borderColor:
       item.state === 'EMPTY'
         ? '#f0f0f0'
@@ -184,7 +187,7 @@ const getItemStyle = (item: SubTank) => {
   }
 
   return {
-    backgroundColor: item.projInfo ? item.projInfo.color : '', //item.isEmergency ? '#ffeded' : item.projInfo.color, // 急诊位特殊背景
+    backgroundColor: item.projId ? consumableStore.projIdColorMap[item.projId] : '', //item.isEmergency ? '#ffeded' : item.projInfo.color, // 急诊位特殊背景
     borderColor: props.isSelected
       ? 'blue'
       : item.state === 'INCUBATION_COMPLETE'