调整运行页面试管区样式

src/main.ts

@@ -8,10 +8,7 @@ import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 // import './mock/index'
 import { createPinia } from 'pinia'
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
-// 动态加载 Mock
-if (import.meta.env.VITE_USE_MOCK === 'true') {
-  import('./mock/index')
-}
+
 const pinia = createPinia()
 pinia.use(piniaPluginPersistedstate)
 const app = createApp(App)

src/pages/Index/Regular/Running.vue

@@ -80,6 +80,7 @@
     <div class="consumables-container">
       <div class="row-first">
         <!-- 急诊按钮 -->
+        <div class="emergency-area">
           <div
             class="emergency-button"
             :style="`background:${canSetEmergency ? '#ff6b6b' : '#c7c7c7'}`"
@@ -87,24 +88,23 @@
           >
             <span>急诊</span>
           </div>
-        <!-- 试管架区域 -->
-        <div class="test-tube-rack-area">
-          <div class="tube-project-tab">
-            <tube-item :tube="canSetEmergency ? undefined : emergencyStore.emergencyInfo" :showNum="false" />
+          <div class="emergency-tube">
+            <tube-item
+              :tube="canSetEmergency ? undefined : emergencyStore.emergencyInfo"
+              :showNum="false"
+            />
+          </div>
         </div>
+        <div class="split"></div>
         <div class="tube-items">
-            <div class="tube-container">
           <tube-item
-                v-for="(tube, index) in runningStore.tubeHolderState?.tubes ||
-                []"
+            v-for="(tube, index) in runningStore.tubeHolderState?.tubes || []"
             :key="index"
             :tube="tube"
             :tubeNo="index + 1"
           />
         </div>
       </div>
-        </div>
-      </div>
       <!-- 第二行 -->
       <div class="row-second">
         <!-- 反应板区域 -->
@@ -258,7 +258,7 @@ watch(
   .consumables-container {
     width: 100%;
     box-sizing: border-box;
-    padding: 0 30px;
+    padding: 15px 20px;
     display: flex;
     flex-direction: column;
     background-color: #ffffff;
@@ -269,55 +269,54 @@ watch(
     .row-first {
       display: flex;
       align-items: center;
-      justify-content: flex-start;
+      margin-bottom: 10px;
+
+      .emergency-area {
+        display: flex;
+        gap: 8px;
+        align-items: center;
 
-      // 急诊按钮
         .emergency-button {
+          width: 80px;
+          height: 80px;
           background: #ff6b6b;
           border-radius: 20px;
           display: flex;
           align-items: center;
           justify-content: center;
-        cursor: pointer;
           transition: all 0.3s ease;
           box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
 
           span {
-          font-size: 32px;
+            font-size: 24px;
             color: #ffffff;
             font-weight: bold;
           }
         }
-
-      // 试管架区域
-      .test-tube-rack-area {
-        display: flex;
-        align-items: center;
-        gap: 20px;
-
-        .tube-project-tab {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          font-weight: bold;
-          color: #1976d2;
-          position: relative;
-          box-shadow: 0 2px 8px rgba(25, 118, 210, 0.1);
-          &::after {
-            content: '';
-            width: 3px;
-            height: 120px;
-            background: lightgray;
-            position: absolute;
-            right: -30px;
+        .emergency-tube {
         }
       }
+      .split {
+        width: 4px;
+        height: 100px;
+        background-color: #CCC;
+        margin: 0 10px;
+      }
+      .tube-items {
+        display: flex;
+        flex-wrap: nowrap;
+        justify-content: space-between;
+        align-items: center;
+        height: auto;
+        column-gap: 5px;
+        // padding: 0 10px;
       }
     }
 
     //第二行
     .row-second {
       display: grid;
+      gap: 15px;
       grid-template-columns: 3fr 4fr 2fr 1fr;
       padding: 10px 0;
 
@@ -378,7 +377,7 @@ watch(
           background-color: #d9534f;
         }
         .waste-text {
-          font-size: 28px;
+          font-size: 26px;
           font-weight: 600;
           color: #ffffff;
           writing-mode: vertical-rl;
@@ -394,47 +393,6 @@ watch(
         }
       }
     }
-
-    // 添加响应式设计
-    @media screen and (max-width: 800px) {
-      padding: 15px 20px; // 修改padding值以适应小屏幕
-
-      .row-first {
-        margin-bottom: 10px;
-        gap: 20px;
-
-        .emergency-button {
-          width: 200px;
-          height: 100px;
-
-          span {
-            font-size: 28px;
-          }
-        }
-      }
-
-      .row-second {
-        gap: 15px;
-
-        .tips-item {
-          width: 180px;
-          height: 120px;
-
-          .tip-text {
-            font-size: 32px;
-          }
-        }
-
-        .waste-area {
-          width: 90px;
-          height: 285px;
-
-          .waste-text {
-            font-size: 24px;
-          }
-        }
-      }
-    }
   }
 }
 
@@ -522,15 +480,6 @@ watch(
   }
 }
 
-.tube-container {
-  display: flex;
-  flex-wrap: nowrap;
-  justify-content: space-around;
-  align-items: center;
-  height: auto;
-  padding: 0 20px;
-  width: 100%;
-}
 .plate-temp {
   position: fixed;
   top: 140px;

src/pages/Index/Regular/TestTube.vue

@@ -10,7 +10,7 @@
         <TestTubeRackComponent
           :tubeRack="tubeRack"
           :index="index"
-          :projects="consumables.projectsAvailable"
+          :projects="consumablesStore.projectsAvailable"
           :bloodTypes="settingTubeStore.bloodTypes"
           @delete:rack="deleteTubeRack"
           @active:rack="handleActivateChange"
@@ -31,7 +31,7 @@
         <h2 class="title">项目选择</h2>
         <div class="project-list">
           <div
-            v-for="proj in consumables.projectsAvailable"
+            v-for="proj in consumablesStore.projectsAvailable"
             :key="proj.projName"
           >
             <div
@@ -101,7 +101,7 @@ const router = useRouter()
 
 const settingTubeStore = useSettingTestTubeStore()
 const testTubeStore = useTestTubeStore()
-const consumables = useConsumablesStore()
+const consumablesStore = useConsumablesStore()
 
 const loading = ref(false) // 控制加载状态
 
@@ -118,15 +118,15 @@ const styleOfProjElem = (proj: ReactionPlateGroup) => {
   const active = isProjElemActive(proj)
   if (active) {
     return {
-      border: 'solid 1px #FFF',
-      backgroundColor: proj.color,
+      border: 'solid 1px transparent',
+      backgroundColor:  consumablesStore.projIdColorMap[proj.projId!],
       color: '#FFF',
     }
   } else {
     return {
-      border: `solid 1px ${proj.color}`,
+      border: `solid 1px ${consumablesStore.projIdColorMap[proj.projId!]}`,
       backgroundColor: '#FFF',
-      color: proj.color,
+      color: consumablesStore.projIdColorMap[proj.projId!],
     }
   }
 }
@@ -315,6 +315,9 @@ const updateTubeSettings = async (rackIdx: number, tubeIdx: number) => {
 
 <style scoped lang="less">
 #configuration-container {
+  > * {
+    box-sizing: border-box;
+  }
   @active-color: rgb(82, 140, 254);
   @setting-panel-height: 150px;
 

src/store/modules/consumables.ts

@@ -13,6 +13,10 @@ import type {
   ReactionPlateGroup,
 } from '../../websocket/socket'
 
+// id : 1,11,21,31 优先选用  Color10 的索引1的颜色
+//  2,12,22,32 优先选用  Color10 的索引2的颜色
+//  10,20,30,40 优先选用  Color10 的索引0的颜色
+// 如果颜色已占用，就从扩展色（ColorExt）中选择一个
 const projColorExt = ['#A98A7B', '#424E82', '#2D4E4A', '#493E25', '#001DDC']
 const projColor10 = [
   '#B9C950',