还原UI

src/pages/Index/Regular/Running.vue

@@ -1,3 +1,8 @@
+<style>
+.red {
+  background-color:rgb(223, 237, 248);
+}
+</style>
 <template>
   <div id="running-container">
     <div class="circular-loader">
@@ -15,7 +20,59 @@
         </template>
         <template v-else> </template>
       </div>
-
+   <!-- 温度计 -->
+<div style="
+position: fixed;
+top: 120px;right:30px;
+padding: 10px;
+background-color:rgb(209, 229, 255);
+border-radius: 5px;
+">
+ <span style="color: rgb(95, 177, 253);font-size: 18px;display: block;">
+  孵育盘温度
+ </span>
+ <span style="display: block; background-color: rgb(95, 177, 253);color:white">
+<span style="
+font-size: 22px;
+">
+  100℃
+</span>
+ </span>
+</div>
+<!-- 光学模组 -->
+<div style="
+position: fixed;
+top: 650px;right:10px;
+padding: 8px 5px;
+background-color:rgb(223, 237, 248);
+border-radius: 5px;
+">
+ <span style="font-weight: 600;font-size: 18px;display: block;">
+ 光学模组
+ </span>
+ <div style="display: flex;">
+  <img src="@/assets/ji.png" alt="" width="20" height="20" style="border-radius: 50%;">
+
+<span style="display: inline-block; background-color:rgb(120, 206, 86);border-radius:5px;height:100px;padding: 5px;display: flex;flex-direction: column;justify-content: space-around;align-items:center;">
+  <img src="@/assets/men.png" alt="" width="20" height="20" style="border-radius: 50%;">
+ 
+  <span>
+xxx
+</span>
+<span style="
+font-size: 14px;
+">
+ xxxx
+</span>
+<span style="
+font-size: 16px;
+font-weight: 600;
+">
+ xxxxxxx
+</span>
+</span>
+ </div>
+</div>
       <!-- 外圈的矩形元素 -->
       <div v-for="(item, index) in incubationPlates" :key="item.sampleId" class="rectangular-item"
         :style="[getRotationStyle(item, index), getItemStyle(item)]"
@@ -26,15 +83,21 @@
         </template>
         <template v-else>
           <!-- 正常数据 -->
+          <span v-if="item.state == 'RESERVED'" class="">
+            <img src="@/assets/being booked.png" alt="" width="20" height="20" style="border-radius: 50%;">
+          </span>
+          <span v-if="item.state == 'INCUBATING'"><img src="@/assets/In incubation.png" alt="" width="20" height="20" style="border-radius: 50%;"></span>
+          <span v-if="item.state == 'INCUBATION_COMPLETE'"><img src="@/assets/isok.png" alt="" width="20" height="20" style="border-radius: 50%;"></span>
           <span class="project-name">{{ item.projInfo.projShortName || '无项目' }}</span>
           <span class="barcode">{{ item.sampleBarcode || '无条码' }}</span>
+          
           <div class="emergency-icon" v-if="item.pos === 'EMERGENCY'">
             <img class="icon" src="@/assets/emergency.svg" />
             <span class="text">急</span>
           </div>
           <span class="time">{{ getRemainingTime(item) }}</span>
         </template>
-        <div v-show="currentIndex == index" :style="`margin-top:${item.pos=='EMERGENCY'?'20px':'75px'}`" class="quan">{{ index +1 }}</div>
+        <div v-show="currentIndex == index" :style="`margin-top:${item.pos=='EMERGENCY'?'20px':'50px'}`" class="quan">{{ index +1 }}</div>
       </div>
       
     </div>
@@ -165,7 +228,7 @@ const tubeRack = ref<TubeRackInfo>({
 // 假设这是10条真实数据
 // 模拟10条真实数据
 const tubes = [
-  { userid: 'user1', projId: [1], bloodType: 'A' },
+  { userid: 'user1', projId: [1], bloodType: 'Q' },
   { userid: 'user2', projId: [2], bloodType: 'B' },
   { userid: 'user3', projId: [1, 2], bloodType: 'AB' },
   { userid: 'user4', projId: [], bloodType: 'O' },
@@ -179,12 +242,12 @@ const tubes = [
 
 // 项目数据
 const projects = [
-  { projId: 1, projName: 'Project Alpha', color: 'red' },
-  { projId: 2, projName: 'Project Beta', color: 'blue' },
-  { projId: 3, projName: 'Project Gamma', color: 'green' },
-  { projId: 4, projName: 'Project Delta', color: 'yellow' },
-  { projId: 5, projName: 'Project Epsilon', color: 'purple' },
-  { projId: 6, projName: 'Project Zeta', color: 'orange' }
+  { projId: 1, projName: 'PA', color: 'red' },
+  { projId: 2, projName: 'PB', color: 'blue' },
+  { projId: 3, projName: 'PG', color: 'green' },
+  { projId: 4, projName: 'PD', color: 'yellow' },
+  { projId: 5, projName: 'PE', color: 'purple' },
+  { projId: 6, projName: 'PZ', color: 'orange' }
 ]
 
 // 血型数据
@@ -249,7 +312,7 @@ const handleIncubationPlateStateMessage = (data: IncubationPlateStateMessage['da
   incubationPlates.value =[
     {
         pos: "A1",
-        state: "REACTED",
+        state: "RESERVED",
         bloodType: "WHOLE_BLOOD",
         sampleBarcode: "BC001",
         userid: "U001",
@@ -267,7 +330,7 @@ const handleIncubationPlateStateMessage = (data: IncubationPlateStateMessage['da
     },
     {
         pos: "A2",
-        state: "REACTED",
+        state: "RESERVED",
         bloodType: "PLASMA",
         sampleBarcode: "BC002",
         userid: "U002",
@@ -285,7 +348,7 @@ const handleIncubationPlateStateMessage = (data: IncubationPlateStateMessage['da
     },
     {
         pos: "A3",
-        state: "PARTIAL_REACTION",
+        state: "INCUBATING",
         bloodType: "SERUM",
         sampleBarcode: "BC003",
         userid: "U003",
@@ -303,7 +366,7 @@ const handleIncubationPlateStateMessage = (data: IncubationPlateStateMessage['da
     },
     {
         pos: "B1",
-        state: "REACTED",
+        state: "INCUBATION_COMPLETE",
         bloodType: "WHOLE_BLOOD",
         sampleBarcode: "BC004",
         userid: "U004",
@@ -321,7 +384,7 @@ const handleIncubationPlateStateMessage = (data: IncubationPlateStateMessage['da
     },
     {
         pos: "B2",
-        state: "NO_REACTION",
+        state: "INCUBATION_COMPLETE",
         bloodType: "PLASMA",
         sampleBarcode: "BC005",
         userid: "U005",
@@ -339,7 +402,7 @@ const handleIncubationPlateStateMessage = (data: IncubationPlateStateMessage['da
     },
     {
         pos: "B3",
-        state: "REACTED",
+        state: "INCUBATING",
         bloodType: "SERUM",
         sampleBarcode: "BC006",
         userid: "U006",
@@ -357,7 +420,7 @@ const handleIncubationPlateStateMessage = (data: IncubationPlateStateMessage['da
     },
     {
         pos: "C1",
-        state: "PARTIAL_REACTION",
+        state: "INCUBATING",
         bloodType: "WHOLE_BLOOD",
         sampleBarcode: "BC007",
         userid: "U007",
@@ -375,7 +438,7 @@ const handleIncubationPlateStateMessage = (data: IncubationPlateStateMessage['da
     },
     {
         pos: "C2",
-        state: "REACTED",
+        state: "INCUBATING",
         bloodType: "PLASMA",
         sampleBarcode: "BC008",
         userid: "U008",
@@ -393,7 +456,7 @@ const handleIncubationPlateStateMessage = (data: IncubationPlateStateMessage['da
     },
     {
         pos: "C3",
-        state: "NO_REACTION",
+        state: "INCUBATING",
         bloodType: "SERUM",
         sampleBarcode: "BC009",
         userid: "U009",
@@ -411,7 +474,7 @@ const handleIncubationPlateStateMessage = (data: IncubationPlateStateMessage['da
     },
     {
         pos: "D1",
-        state: "REACTED",
+        state: "INCUBATING",
         bloodType: "WHOLE_BLOOD",
         sampleBarcode: "BC010",
         userid: "U010",
@@ -429,7 +492,7 @@ const handleIncubationPlateStateMessage = (data: IncubationPlateStateMessage['da
     },
     {
         pos: "D2",
-        state: "PARTIAL_REACTION",
+        state: "INCUBATING",
         bloodType: "PLASMA",
         sampleBarcode: "BC011",
         userid: "U011",
@@ -447,7 +510,7 @@ const handleIncubationPlateStateMessage = (data: IncubationPlateStateMessage['da
     },
     {
         pos: "D3",
-        state: "NO_REACTION",
+        state: "INCUBATING",
         bloodType: "SERUM",
         sampleBarcode: "BC012",
         userid: "U012",
@@ -465,7 +528,7 @@ const handleIncubationPlateStateMessage = (data: IncubationPlateStateMessage['da
     },
     {
         pos: "E1",
-        state: "REACTED",
+        state: "INCUBATING",
         bloodType: "WHOLE_BLOOD",
         sampleBarcode: "BC013",
         userid: "U013",
@@ -483,7 +546,7 @@ const handleIncubationPlateStateMessage = (data: IncubationPlateStateMessage['da
     },
     {
         pos: "E2",
-        state: "PARTIAL_REACTION",
+        state: "INCUBATING",
         bloodType: "PLASMA",
         sampleBarcode: "BC014",
         userid: "U014",
@@ -501,7 +564,7 @@ const handleIncubationPlateStateMessage = (data: IncubationPlateStateMessage['da
     },
     {
         pos: "E3",
-        state: "NO_REACTION",
+        state: "INCUBATING",
         bloodType: "SERUM",
         sampleBarcode: "BC015",
         userid: "U015",
@@ -519,7 +582,7 @@ const handleIncubationPlateStateMessage = (data: IncubationPlateStateMessage['da
     },
     {
         pos: "F1",
-        state: "REACTED",
+        state: "INCUBATING",
         bloodType: "WHOLE_BLOOD",
         sampleBarcode: "BC016",
         userid: "U016",
@@ -537,7 +600,7 @@ const handleIncubationPlateStateMessage = (data: IncubationPlateStateMessage['da
     },
     {
         pos: "F2",
-        state: "PARTIAL_REACTION",
+        state: "INCUBATING",
         bloodType: "PLASMA",
         sampleBarcode: "BC017",
         userid: "U017",
@@ -555,7 +618,7 @@ const handleIncubationPlateStateMessage = (data: IncubationPlateStateMessage['da
     },
     {
         pos: "F3",
-        state: "NO_REACTION",
+        state: "INCUBATING",
         bloodType: "SERUM",
         sampleBarcode: "BC018",
         userid: "U018",