From 5e9f2b97b1f6a8db3e56c916848f01a2964adcb1 Mon Sep 17 00:00:00 2001
From: zhangjiming <zhangjiming@costrip.cn>
Date: Fri, 17 Jan 2025 10:56:22 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E8=BF=90=E8=A1=8C=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E8=AF=95=E7=AE=A1=E5=8C=BA=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main.ts                          |   5 +-
 src/pages/Index/Regular/Running.vue  | 163 ++++++++++++-----------------------
 src/pages/Index/Regular/TestTube.vue |  17 ++--
 src/store/modules/consumables.ts     |   4 +
 4 files changed, 71 insertions(+), 118 deletions(-)

diff --git a/src/main.ts b/src/main.ts
index 53f563a..a18ad9f 100644
--- a/src/main.ts
+++ b/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)
diff --git a/src/pages/Index/Regular/Running.vue b/src/pages/Index/Regular/Running.vue
index 777e760..b962ded 100644
--- a/src/pages/Index/Regular/Running.vue
+++ b/src/pages/Index/Regular/Running.vue
@@ -80,30 +80,30 @@
     <div class="consumables-container">
       <div class="row-first">
         <!-- 急诊按钮 -->
-        <div
-          class="emergency-button"
-          :style="`background:${canSetEmergency ? '#ff6b6b' : '#c7c7c7'}`"
-          @click="canSetEmergency ? confirmEmergency() : null"
-        >
-          <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-area">
+          <div
+            class="emergency-button"
+            :style="`background:${canSetEmergency ? '#ff6b6b' : '#c7c7c7'}`"
+            @click="canSetEmergency ? confirmEmergency() : null"
+          >
+            <span>急诊</span>
           </div>
-          <div class="tube-items">
-            <div class="tube-container">
-              <tube-item
-                v-for="(tube, index) in runningStore.tubeHolderState?.tubes ||
-                []"
-                :key="index"
-                :tube="tube"
-                :tubeNo="index + 1"
-              />
-            </div>
+          <div class="emergency-tube">
+            <tube-item
+              :tube="canSetEmergency ? undefined : emergencyStore.emergencyInfo"
+              :showNum="false"
+            />
           </div>
         </div>
+        <div class="split"></div>
+        <div class="tube-items">
+          <tube-item
+            v-for="(tube, index) in runningStore.tubeHolderState?.tubes || []"
+            :key="index"
+            :tube="tube"
+            :tubeNo="index + 1"
+          />
+        </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;
-
-      // 急诊按钮
-      .emergency-button {
-        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;
-          color: #ffffff;
-          font-weight: bold;
-        }
-      }
+      margin-bottom: 10px;
 
-      // 试管架区域
-      .test-tube-rack-area {
+      .emergency-area {
         display: flex;
+        gap: 8px;
         align-items: center;
-        gap: 20px;
 
-        .tube-project-tab {
+        .emergency-button {
+          width: 80px;
+          height: 80px;
+          background: #ff6b6b;
+          border-radius: 20px;
           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;
+          transition: all 0.3s ease;
+          box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
+
+          span {
+            font-size: 24px;
+            color: #ffffff;
+            font-weight: bold;
           }
         }
+        .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;
diff --git a/src/pages/Index/Regular/TestTube.vue b/src/pages/Index/Regular/TestTube.vue
index aa87fae..aa192c8 100644
--- a/src/pages/Index/Regular/TestTube.vue
+++ b/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;
 
diff --git a/src/store/modules/consumables.ts b/src/store/modules/consumables.ts
index 5c7cb16..059f77c 100644
--- a/src/store/modules/consumables.ts
+++ b/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',