From 9b0fcd1efca6e101ed3d1b32da2abd9d25eedd27 Mon Sep 17 00:00:00 2001
From: zhangjiming <zhangjiming@costrip.cn>
Date: Thu, 2 Jan 2025 19:15:32 +0800
Subject: [PATCH 01/11] =?UTF-8?q?=E5=BE=AE=E8=B0=83=20=E8=A7=A3=E5=86=B3?=
 =?UTF-8?q?=E6=8A=A5=E9=94=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Index/Index.vue                                | 2 +-
 src/pages/Index/components/Consumables/BallGrid.vue      | 4 +++-
 src/pages/Index/components/Consumables/ChangeNum.vue     | 4 ++--
 src/pages/Index/components/Consumables/InfoBar.vue       | 4 ++--
 src/pages/Index/components/Consumables/MainComponent.vue | 4 ++--
 5 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/pages/Index/Index.vue b/src/pages/Index/Index.vue
index 4209577..3850be9 100644
--- a/src/pages/Index/Index.vue
+++ b/src/pages/Index/Index.vue
@@ -305,7 +305,7 @@ const openTest = () => {
     showModal.value = true;
   }
 };
-// 获取检测数据
+// 获取初始化检测数据
 const getCheckData = async () => {
   try {
     const res = await getCheckList();
diff --git a/src/pages/Index/components/Consumables/BallGrid.vue b/src/pages/Index/components/Consumables/BallGrid.vue
index 6fe021b..46f1305 100644
--- a/src/pages/Index/components/Consumables/BallGrid.vue
+++ b/src/pages/Index/components/Consumables/BallGrid.vue
@@ -17,6 +17,8 @@ import {
   defineEmits,
 } from 'vue'
 
+// 移液盘复用组件
+
 // Props 定义
 const props = defineProps({
   total: {
@@ -207,4 +209,4 @@ onBeforeUnmount(() => {
 .inner-circle {
   transition: background-color 0.3s ease;
 }
-</style>移液盘复用组件
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/src/pages/Index/components/Consumables/ChangeNum.vue b/src/pages/Index/components/Consumables/ChangeNum.vue
index d2071da..bebf852 100644
--- a/src/pages/Index/components/Consumables/ChangeNum.vue
+++ b/src/pages/Index/components/Consumables/ChangeNum.vue
@@ -57,7 +57,7 @@ const query = ref({
 // 监听 value 的变化，同步更新 query
 watch(value, (newVal) => {
   query.value = {
-    group: `CG`${ plateIndex.value } `,
+    group: `CG${ plateIndex.value + 1 }`,
     num: Number(newVal)
   }
 })
@@ -76,7 +76,7 @@ const openDialog = (plate, index) => {
   
   // 初始化 query
   query.value = {
-    group: `CG`${index}`,
+    group: `CG${index+1}`,
     num: Number(plate.num)
 }
 }
diff --git a/src/pages/Index/components/Consumables/InfoBar.vue b/src/pages/Index/components/Consumables/InfoBar.vue
index 49ca56d..6a193e0 100644
--- a/src/pages/Index/components/Consumables/InfoBar.vue
+++ b/src/pages/Index/components/Consumables/InfoBar.vue
@@ -16,11 +16,11 @@ import { toRefs } from 'vue'
 const props = defineProps({
   projectName: {
     type: String,
-    required: true,
+    // required: true,
   },
   currentCount: {
     type: Number,
-    required: true,
+    // required: true,
   },
   maxCount: {
     type: Number,
diff --git a/src/pages/Index/components/Consumables/MainComponent.vue b/src/pages/Index/components/Consumables/MainComponent.vue
index 00bfc9d..f6f40e5 100644
--- a/src/pages/Index/components/Consumables/MainComponent.vue
+++ b/src/pages/Index/components/Consumables/MainComponent.vue
@@ -17,11 +17,11 @@ import InfoBar from './InfoBar.vue' // 引入项目信息组件
 const props = defineProps({
   projectName: {
     type: String,
-    required: true,
+    // required: true,
   },
   currentCount: {
     type: Number,
-    required: true,
+    // required: true,
   },
   maxCount: {
     type: Number,

From 86a416f040182c345a420ffb7295685aa69c987d Mon Sep 17 00:00:00 2001
From: zhangjiming <zhangjiming@costrip.cn>
Date: Fri, 3 Jan 2025 10:34:58 +0800
Subject: [PATCH 02/11] =?UTF-8?q?=E8=B0=83=E6=95=B4=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Index/Regular/Consumables.vue            |   2 -
 .../components/Consumables/MoveLiquidArea.vue      | 255 +++++++++++++--------
 2 files changed, 162 insertions(+), 95 deletions(-)

diff --git a/src/pages/Index/Regular/Consumables.vue b/src/pages/Index/Regular/Consumables.vue
index 2cb93aa..582fa76 100644
--- a/src/pages/Index/Regular/Consumables.vue
+++ b/src/pages/Index/Regular/Consumables.vue
@@ -468,8 +468,6 @@ const updateTipNum = async ({ index, tipNum }: { index: number; tipNum: number }
   .main-bottom {
     width: 100%;
     flex: 1;
-    margin-top: -90px;
-
     .buffer-little-title {
       display: flex;
       height: 40px;
diff --git a/src/pages/Index/components/Consumables/MoveLiquidArea.vue b/src/pages/Index/components/Consumables/MoveLiquidArea.vue
index 26f50f8..2be80f0 100644
--- a/src/pages/Index/components/Consumables/MoveLiquidArea.vue
+++ b/src/pages/Index/components/Consumables/MoveLiquidArea.vue
@@ -1,94 +1,157 @@
 <template>
   <div id="move-liquid-area-container">
-    <!-- 移液区 -->
-    <div class="move-liquid-area">
-      <!-- 加载耗材按钮-->
-      <el-button type="primary" class="load-consumables" v-if="!isLoad" @click="handleIsLoad"
-        :loading="isLoading">加载耗材</el-button>
-      <el-button type="danger" class="load-consumables" v-if="isLoad" @click="handleIsUnload">卸载耗材</el-button>
-      <div class="move-liquid-title">
-        <div class="line"></div>
-        <div class="content">移液头区</div>
-      </div>
-      <div class="move-liquid-controller">
-        <div class="controller" v-for="(controller, index) in tempTipNum" :key="index"
-          :class="{ 'selected-controller': currentPlate === index }" @click="changePlate(index)">
-          <div class="controller-title">移液区{{ index + 1 }}</div>
-          <div class="controller-number">{{ controller }}/120</div>
-        </div>
-      </div>
-      <div class="move-liquid-graph">
-        <keep-alive>
-          <BallGrid v-if="activeTab === 0" :total="120" :activated="moveLiquids![activeTab]?.tipNum" width="350px"
-            height="310px" :columns="12" @deactivate="handleDeactivate" @syncActivatedCount="syncActivatedCount" />
-        </keep-alive>
-        <keep-alive>
-          <BallGrid v-if="activeTab === 1" :total="120" :activated="moveLiquids![activeTab].tipNum" width="350px"
-            height="310px" :columns="12" @deactivate="handleDeactivate" @syncActivatedCount="syncActivatedCount" />
-        </keep-alive>
-        <keep-alive>
-          <BallGrid v-if="activeTab === 2" :total="120" :activated="moveLiquids![activeTab]?.tipNum" width="350px"
-            height="310px" :columns="12" @deactivate="handleDeactivate" @syncActivatedCount="syncActivatedCount" />
-        </keep-alive>
-      </div>
-    </div>
-    <!-- 右侧小功能区域 -->
-    <div class="right-area">
-      <!--急诊区-->
-      <div class="emergency-area">
-        <div class="emergency-title">
+    <!-- 加载耗材按钮-->
+    <el-button
+      type="primary"
+      class="load-consumables"
+      v-if="!isLoad"
+      @click="handleIsLoad"
+      :loading="isLoading"
+      >加载耗材</el-button
+    >
+    <el-button
+      type="danger"
+      class="load-consumables"
+      v-if="isLoad"
+      @click="handleIsUnload"
+      >卸载耗材</el-button
+    >
+    <div class="info-show-area">
+      <!-- 移液区 -->
+      <div class="move-liquid-area">
+        <div class="move-liquid-title">
           <div class="line"></div>
-          <div class="content">急诊区</div>
+          <div class="content">移液头区</div>
         </div>
-        <div class="emergency-controller">
-          <div class="controller">
-            <div class="emergency-ball" :class="{ active: isActive }"
-              @click="showEmergencyInfo(emergencyStore.emergencyInfo)">
-              1
-            </div>
+        <div class="move-liquid-controller">
+          <div
+            class="controller"
+            v-for="(controller, index) in tempTipNum"
+            :key="index"
+            :class="{ 'selected-controller': currentPlate === index }"
+            @click="changePlate(index)"
+          >
+            <div class="controller-title">移液区{{ index + 1 }}</div>
+            <div class="controller-number">{{ controller }}/120</div>
           </div>
-          <button class="controller-button" @click="addEmergency">
-            添加急诊
-          </button>
         </div>
-      </div>
-      <!--ID芯片区-->
-      <div class="id-area">
-        <div class="id-title">
-          <div class="line"></div>
-          <div class="content">ID芯片区</div>
+        <div class="move-liquid-graph">
+          <keep-alive>
+            <BallGrid
+              v-if="activeTab === 0"
+              :total="120"
+              :activated="moveLiquids![activeTab]?.tipNum"
+              width="350px"
+              height="310px"
+              :columns="12"
+              @deactivate="handleDeactivate"
+              @syncActivatedCount="syncActivatedCount"
+            />
+          </keep-alive>
+          <keep-alive>
+            <BallGrid
+              v-if="activeTab === 1"
+              :total="120"
+              :activated="moveLiquids![activeTab].tipNum"
+              width="350px"
+              height="310px"
+              :columns="12"
+              @deactivate="handleDeactivate"
+              @syncActivatedCount="syncActivatedCount"
+            />
+          </keep-alive>
+          <keep-alive>
+            <BallGrid
+              v-if="activeTab === 2"
+              :total="120"
+              :activated="moveLiquids![activeTab]?.tipNum"
+              width="350px"
+              height="310px"
+              :columns="12"
+              @deactivate="handleDeactivate"
+              @syncActivatedCount="syncActivatedCount"
+            />
+          </keep-alive>
         </div>
-        <button class="id-button" @click="openTableModal" :disabled="!consumableStore.isIdCardInserted">
-          <span class="button-text">
-            {{ consumableStore.isIdCardInserted ? '已插入' : '未插入芯片' }}</span>
-        </button>
       </div>
-      <!--废料区-->
-      <div class="waste-area">
-        <div class="waste-title">
-          <div class="line"></div>
-          <div class="content">废料区</div>
-        </div>
-        <div class="waste-controller">
-          <button class="waste-button" :class="{ full: wasteStatus }">
-            <div class="button-icon">
-              <img :src="wasteStatus ? wasteFullIcon : wasteIcon" alt="Waste Status" />
-            </div>
-            <div class="button-text">
-              {{ wasteStatus ? '已满' : '未满' }}
+      <!-- 右侧小功能区域 -->
+      <div class="right-area">
+        <!--急诊区-->
+        <div class="emergency-area">
+          <div class="emergency-title">
+            <div class="line"></div>
+            <div class="content">急诊区</div>
+          </div>
+          <div class="emergency-controller">
+            <div class="controller">
+              <div
+                class="emergency-ball"
+                :class="{ active: isActive }"
+                @click="showEmergencyInfo(emergencyStore.emergencyInfo)"
+              >
+                1
+              </div>
             </div>
+            <button class="controller-button" @click="addEmergency">
+              添加急诊
+            </button>
+          </div>
+        </div>
+        <!--ID芯片区-->
+        <div class="id-area">
+          <div class="id-title">
+            <div class="line"></div>
+            <div class="content">ID芯片区</div>
+          </div>
+          <button
+            class="id-button"
+            @click="openTableModal"
+            :disabled="!consumableStore.isIdCardInserted"
+          >
+            <span class="button-text">
+              {{
+                consumableStore.isIdCardInserted ? '已插入' : '未插入芯片'
+              }}</span
+            >
           </button>
         </div>
-      </div>
-      <!--缓冲液大-->
-      <div class="buffer-area">
-        <div class="buffer-title">
-          <div class="line"></div>
-          <div class="content">缓冲液大</div>
+        <!--废料区-->
+        <div class="waste-area">
+          <div class="waste-title">
+            <div class="line"></div>
+            <div class="content">废料区</div>
+          </div>
+          <div class="waste-controller">
+            <button class="waste-button" :class="{ full: wasteStatus }">
+              <div class="button-icon">
+                <img
+                  :src="wasteStatus ? wasteFullIcon : wasteIcon"
+                  alt="Waste Status"
+                />
+              </div>
+              <div class="button-text">
+                {{ wasteStatus ? '已满' : '未满' }}
+              </div>
+            </button>
+          </div>
         </div>
-        <div class="buffer-controller">
-          <BallGrid :total="6" :customColors="true" width="130px" height="80px" :data="bufferBig" :columns="3"
-            class="buffer-grid" />
+        <!--缓冲液大-->
+        <div class="buffer-area">
+          <div class="buffer-title">
+            <div class="line"></div>
+            <div class="content">缓冲液大</div>
+          </div>
+          <div class="buffer-controller">
+            <BallGrid
+              :total="6"
+              :customColors="true"
+              width="130px"
+              height="80px"
+              :data="bufferBig"
+              :columns="3"
+              class="buffer-grid"
+            />
+          </div>
         </div>
       </div>
     </div>
@@ -227,30 +290,36 @@ const changePlate = (index: number) => {
   padding: 0;
   position: relative;
   display: flex;
-  justify-content: space-between;
+  flex-direction: column;
+  // justify-content: space-between;
   width: 100%;
 
+  .info-show-area {
+    display: flex;
+  }
   .title {
     font-size: 20px;
     /* 统一设置标题大小 */
     font-weight: bold;
   }
 
+  .load-consumables {
+    margin: 0 8px;
+    padding: 0;
+    height: 100px;
+    font-size: 40px;
+    border-radius: 10px;
+    margin-bottom: 15px;
+  }
+
   .move-liquid-area {
     width: 70%;
     display: flex;
     flex-direction: column;
     margin-left: 10px;
     gap: 9px;
-
-    .load-consumables {
-      width: 98%;
-      padding: 0;
-      height: 100px;
-      font-size: 40px;
-      border-radius: 10px;
-      margin-bottom: 15px;
-    }
+    background-color: #f6f6f6;
+    border-radius: 10px;
 
     .move-liquid-title {
       width: 100%;
@@ -270,6 +339,7 @@ const changePlate = (index: number) => {
 
     .move-liquid-controller {
       display: flex;
+      justify-content: space-between;
       flex-wrap: nowrap;
 
       .controller {
@@ -312,16 +382,15 @@ const changePlate = (index: number) => {
     width: 30%;
     display: flex;
     flex-direction: column;
-    justify-content: start;
-    height: 49.1875rem;
-    gap: 20px;
+    justify-content: stretch;
+    padding-left: 8px;
+    gap: 6px;
 
     .emergency-area,
     .id-area,
     .waste-area,
     .buffer-area {
       width: 90%;
-      margin: 11px 0;
     }
 
     .emergency-title,

From 3eebe5042b8b95b1e823c60948b1f5868f8e8c97 Mon Sep 17 00:00:00 2001
From: zhangjiming <zhangjiming@costrip.cn>
Date: Fri, 3 Jan 2025 11:38:33 +0800
Subject: [PATCH 03/11] =?UTF-8?q?=E8=B0=83=E6=95=B4=E6=96=87=E6=A1=88=20-?=
 =?UTF-8?q?=20=E6=89=AB=E6=8F=8F=E8=80=97=E6=9D=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Index/components/Consumables/MoveLiquidArea.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/Index/components/Consumables/MoveLiquidArea.vue b/src/pages/Index/components/Consumables/MoveLiquidArea.vue
index 2be80f0..5c3172a 100644
--- a/src/pages/Index/components/Consumables/MoveLiquidArea.vue
+++ b/src/pages/Index/components/Consumables/MoveLiquidArea.vue
@@ -1,13 +1,13 @@
 <template>
   <div id="move-liquid-area-container">
-    <!-- 加载耗材按钮-->
+    <!-- 扫描耗材按钮-->
     <el-button
       type="primary"
       class="load-consumables"
       v-if="!isLoad"
       @click="handleIsLoad"
       :loading="isLoading"
-      >加载耗材</el-button
+      >扫描耗材</el-button
     >
     <el-button
       type="danger"

From b5bdde7977a4b8432288d2e05ce55d37cae64ba5 Mon Sep 17 00:00:00 2001
From: zhangjiming <zhangjiming@costrip.cn>
Date: Fri, 3 Jan 2025 11:38:54 +0800
Subject: [PATCH 04/11] =?UTF-8?q?=E9=87=8D=E6=9E=84=E8=AE=BE=E5=A4=87?=
 =?UTF-8?q?=E5=88=9D=E5=A7=8B=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Index/Index.vue                          | 97 ++++++++++++++--------
 .../Index/components/Consumables/Warn/InitWarn.vue |  1 +
 2 files changed, 63 insertions(+), 35 deletions(-)

diff --git a/src/pages/Index/Index.vue b/src/pages/Index/Index.vue
index 3850be9..310f36e 100644
--- a/src/pages/Index/Index.vue
+++ b/src/pages/Index/Index.vue
@@ -69,7 +69,7 @@
   <!-- 自动自检失败 -->
   <InitWarn v-if="showFailModal" :visible="showFailModal" title="检测失败" :message="failMessage"
     icon="/src/assets/Warn.svg" cancelText="返回" confirmText="重试" @close="showFailModal = false"
-    @confirm="checkIfResetCompleted" />
+    @confirm="startInit" />
   <InitWarn v-if="idCardInserted" :visible="idCardInserted" title="检测到id卡插入" message="是否保存id卡信息" cancelText="返回"
     icon="/src/assets/update-pin-icon.svg" confirmText="确认保存" @close="idCardInserted = false" @confirm="saveIdInfo" />
   <InitWarn v-if="showErrorModal" :visible="showErrorModal" title="错误提示" :message="ErrorMessage"
@@ -204,7 +204,7 @@ const startTest = async () => {
   const isCheck = sessionStorage.getItem('testStarted');
   if (!isCheck) {
     isTesting.value = false;
-    await checkIfResetCompleted()
+    await startInit()
   }
 
 };
@@ -236,47 +236,74 @@ const continueTest = async () => {
 };
 const handleConfirm = async () => {
   showModal.value = false; // 关闭初始弹窗
-  await initDevice(); // 初始化设备
-  await checkIfResetCompleted(); // 检测是否复位完成
+  
+  await startInit()
 };
 
-// 检查是否复位完成
-const checkIfResetCompleted = async () => {
-  if (showFailModal.value) {
-    showFailModal.value = false;
-  }
+const startInit = async () => {
+  await initDevice()
+  await pollingInitState()
+}
+
+const pollingInitState = async () => {
   showLoadingModal.value = true; // 显示 LoadingModal
-  // 模拟 2 秒延时
-  await new Promise(resolve => setTimeout(resolve, 2000));
-  //通过获取初始化状态来判断是否初始化成功
-  const initState = await getInitState();
-  if (initState.ecode === "SUC") {
-    //检测初始化是否成功
-    if (initState.data.passed) {
-      console.log("初始化成功")
-      sessionStorage.setItem('testStarted', "true");
-      showLoadingModal.value = false;
-      showAlreadyModal.value = true;
+  const res = await getInitState();
+  if (res.ecode === "SUC") {
+    if (res.data.isBusy) {
+      setTimeout(async () => await pollingInitState(), 500)
     } else {
-      console.log("初始化失败")
-      await getCheckData(); // 获取检查数据找到错误项
-      const failedItems = checkData.value.filter(item => !item.pass);
-      if (failedItems.length > 0) {
-        const errorMessages = generateErrorMessages(failedItems);
-        console.log('生成的错误信息:', errorMessages);
-        failItems.value = failedItems; // 更新失败的检查项
-        failMessage.value = errorMessages.join('\n'); // 更新错误信息
-        showLoadingModal.value = false; // 隐藏 LoadingModal
+      showLoadingModal.value = false;
+      if (res.data.passed) {
+        console.log("初始化成功")
+        // sessionStorage.setItem('testStarted', "true");
+        showAlreadyModal.value = true;
+      }
+      else {
+        const infos = res.data.promopt.detailInfos
+        failMessage.value= infos && infos.length > 0 ? infos.map(d => d.name).join('\n') : res.data.promopt.info
         showFailModal.value = true; // 显示失败弹窗
-      } else {
-        console.log("初始化失败，但是没有失败项")
-        showLoadingModal.value = false; // 隐藏 LoadingModal
-        showAlreadyModal.value = true; // 显示已完成弹窗
-        sessionStorage.setItem('testStarted', "true");
       }
     }
   }
-};
+}
+
+
+// const checkIfResetCompleted = async () => {
+//   if (showFailModal.value) {
+//     showFailModal.value = false;
+//   }
+//   showLoadingModal.value = true; // 显示 LoadingModal
+//   // 模拟 2 秒延时
+//   await new Promise(resolve => setTimeout(resolve, 2000));
+//   //通过获取初始化状态来判断是否初始化成功
+//   const initState = await getInitState();
+//   if (initState.ecode === "SUC") {
+//     //检测初始化是否成功
+//     if (initState.data.passed) {
+//       console.log("初始化成功")
+//       sessionStorage.setItem('testStarted', "true");
+//       showLoadingModal.value = false;
+//       showAlreadyModal.value = true;
+//     } else {
+//       console.log("初始化失败")
+//       await getCheckData(); // 获取检查数据找到错误项
+//       const failedItems = checkData.value.filter(item => !item.pass);
+//       if (failedItems.length > 0) {
+//         const errorMessages = generateErrorMessages(failedItems);
+//         console.log('生成的错误信息:', errorMessages);
+//         failItems.value = failedItems; // 更新失败的检查项
+//         failMessage.value = errorMessages.join('\n'); // 更新错误信息
+//         showLoadingModal.value = false; // 隐藏 LoadingModal
+//         showFailModal.value = true; // 显示失败弹窗
+//       } else {
+//         console.log("初始化失败，但是没有失败项")
+//         showLoadingModal.value = false; // 隐藏 LoadingModal
+//         showAlreadyModal.value = true; // 显示已完成弹窗
+//         sessionStorage.setItem('testStarted', "true");
+//       }
+//     }
+//   }
+// };
 
 const isTestTubeSlotReady = ref(false); // 试管槽状态标记
 
diff --git a/src/pages/Index/components/Consumables/Warn/InitWarn.vue b/src/pages/Index/components/Consumables/Warn/InitWarn.vue
index d4e289f..2d2cd84 100644
--- a/src/pages/Index/components/Consumables/Warn/InitWarn.vue
+++ b/src/pages/Index/components/Consumables/Warn/InitWarn.vue
@@ -137,6 +137,7 @@ const onConfirm = () => {
     font-size: 28px; // 增加消息字体
     color: #555; // 使用更柔和的颜色
     line-height: 1.5; // 增加行距
+    white-space: pre-wrap;
   }
 
   .modal-error {

From 0255f13ee94dfd1f5c058d288dd363de90e2c1b0 Mon Sep 17 00:00:00 2001
From: zhangjiming <zhangjiming@costrip.cn>
Date: Fri, 3 Jan 2025 14:36:28 +0800
Subject: [PATCH 05/11] =?UTF-8?q?=E4=BF=AE=E5=A4=8Dbug:=20=E6=B8=A9?=
 =?UTF-8?q?=E5=BA=A6=E6=9C=AA=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Index/components/Consumables/SpttingPlates.vue | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/pages/Index/components/Consumables/SpttingPlates.vue b/src/pages/Index/components/Consumables/SpttingPlates.vue
index 3928405..7d37cef 100644
--- a/src/pages/Index/components/Consumables/SpttingPlates.vue
+++ b/src/pages/Index/components/Consumables/SpttingPlates.vue
@@ -7,8 +7,8 @@
         <div class="area-text">反应板夹区</div>
       </div>
       <div class="real-time-temperature">
-        <div :class="['status-ball', { 'overheat': currentTemperature > 40 }]"></div>
-        <div class="number">温度: {{ currentTemperature }}°</div>
+        <div :class="['status-ball', { 'overheat': temperature > 40 }]"></div>
+        <div class="number">温度: {{ temperature }}°</div>
       </div>
     </div>
     <!--反应板显示区域-->
@@ -55,8 +55,6 @@ const props = defineProps({
     default: 40
   }
 })
-// 温度状态
-const currentTemperature = ref(props.temperature);
 
 const changeNumRef = ref()
 const changeNumber = (plate, index) => {

From 47236c4ed171e33b61a25b5620ab20e46111fab2 Mon Sep 17 00:00:00 2001
From: zhangjiming <zhangjiming@costrip.cn>
Date: Fri, 3 Jan 2025 16:05:20 +0800
Subject: [PATCH 06/11] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E9=94=99=E8=AF=AF+?=
 =?UTF-8?q?=E6=A0=BC=E5=BC=8F=E5=8C=96+=E9=80=9A=E7=9F=A5=E5=88=9D?=
 =?UTF-8?q?=E5=A7=8B=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/eventBus.ts                         |   1 +
 src/pages/Index/Index.vue               |  33 ++-------
 src/pages/Index/Regular/Consumables.vue | 127 +++++++++++++++++++++-----------
 src/utils/errorHandler.ts               |   8 +-
 4 files changed, 98 insertions(+), 71 deletions(-)

diff --git a/src/eventBus.ts b/src/eventBus.ts
index 8525a65..2127bcb 100644
--- a/src/eventBus.ts
+++ b/src/eventBus.ts
@@ -15,6 +15,7 @@ export type ErrorModalData = {
 }
 
 type Events = {
+  initDevice: void
   confirm: { value: number; index: number }
   'show-error-modal': ErrorModalData
   'show-stack-modal': ErrorModalData['stackInfo'] | null | undefined
diff --git a/src/pages/Index/Index.vue b/src/pages/Index/Index.vue
index 310f36e..2d1cec6 100644
--- a/src/pages/Index/Index.vue
+++ b/src/pages/Index/Index.vue
@@ -83,12 +83,13 @@
 <script setup lang="ts">
 import { ref, onMounted, onBeforeUnmount } from 'vue';
 import { Time, InitWarn, LoadingModal } from './components/Consumables';
-import { getCheckList, startWork, pauseWork, continueWork, stopWork, getInitState, initDevice, saveMountedCardInfo, openBuzzer, closeBuzzer } from '../../services/index';
+import { startWork, pauseWork, continueWork, stopWork, getInitState, initDevice, saveMountedCardInfo, openBuzzer, closeBuzzer } from '../../services/index';
 import { CheckItem, User } from '../../types/Index';
 import { useConsumablesStore } from '../../store';
 import { createWebSocket } from '../../websocket/socket';
 import type { AppEventMessage } from '../../websocket/socket';
 import { getServerInfo } from '../../utils/getServerInfo';
+import { eventBus } from '../../eventBus';
 const selectedTab = ref(sessionStorage.getItem('selectedTab') || '常规');
 const lineWidth = ref(0);
 const lineLeft = ref(0);
@@ -160,9 +161,7 @@ const confirmError = async () => {
 }
 //确认警告事件
 const confirmWarn = async () => {
-
   showWarnModal.value = false
-  return
 }
 //保存id卡信息
 const saveIdInfo = async () => {
@@ -172,14 +171,17 @@ const saveIdInfo = async () => {
     idCardInserted.value = false;
   }
 }
+const showInitDeviceAlert = () => {
+  showModal.value = true
+}
 onMounted(() => {
-
+  eventBus.on('initDevice', showInitDeviceAlert)
   ws.connect();
   ws.subscribe<AppEventMessage>('AppEvent', handleAppEvent);
 });
 
 onBeforeUnmount(() => {
-
+  eventBus.off('initDevice', showInitDeviceAlert)
   ws.unsubscribe<AppEventMessage>('AppEvent', handleAppEvent);
   ws.disconnect();
 });
@@ -332,27 +334,6 @@ const openTest = () => {
     showModal.value = true;
   }
 };
-// 获取初始化检测数据
-const getCheckData = async () => {
-  try {
-    const res = await getCheckList();
-    if (res.data && res.data.ecode == "SUC") {
-      checkData.value = res.data;
-      console.log('设备检查的结果:', checkData.value);
-      // 检查试管槽状态
-      checkTestTubeSlotStatus(checkData.value);
-    } else {
-      console.log("获取检测数据失败")
-      showFailModal.value = true;
-      failMessage.value = "获取检测数据失败，请检查设备状态。"
-    }
-  } catch (error) {
-    console.error('获取检测数据失败:', error);
-    showFailModal.value = true;
-    failMessage.value = "获取检测数据失败，请检查设备状态。"
-  }
-};
-
 
 // 更新蓝线的宽度和左偏移量
 const updateLinePosition = (element: any) => {
diff --git a/src/pages/Index/Regular/Consumables.vue b/src/pages/Index/Regular/Consumables.vue
index 582fa76..cd38f3c 100644
--- a/src/pages/Index/Regular/Consumables.vue
+++ b/src/pages/Index/Regular/Consumables.vue
@@ -24,7 +24,11 @@
               </tr>
             </thead>
             <tbody>
-              <tr v-for="report in formattedReports" :key="report.channel" :class="{ 'error-row': report.isError }">
+              <tr
+                v-for="report in formattedReports"
+                :key="report.channel"
+                :class="{ 'error-row': report.isError }"
+              >
                 <td>通道{{ report.channel + 1 }}</td>
                 <td>{{ report.projName || '--' }}</td>
                 <td>{{ report.lotId || '--' }}</td>
@@ -47,9 +51,18 @@
         <SpttingPlates :plates="plates" :temperature="currentTemperature" />
       </div>
       <div class="move-liquid-area">
-        <MoveLiquidArea :isLoad="isLoad" :isLoading="isLoading" :moveLiquids="moveLiquids" :tempTipNum="tempTipNum"
-          :bufferBig="bufferBig" :emergencyInfo="emergencyInfo" :wasteStatus="wasteStatus"
-          @loadConsumables="handleIsLoad" @unloadConsumables="handleIsUnload" @updateTipNum="updateTipNum" />
+        <MoveLiquidArea
+          :isLoad="isLoad"
+          :isLoading="isLoading"
+          :moveLiquids="moveLiquids"
+          :tempTipNum="tempTipNum"
+          :bufferBig="bufferBig"
+          :emergencyInfo="emergencyInfo"
+          :wasteStatus="wasteStatus"
+          @loadConsumables="handleIsLoad"
+          @unloadConsumables="handleIsUnload"
+          @updateTipNum="updateTipNum"
+        />
       </div>
     </div>
     <div class="main-bottom">
@@ -59,9 +72,19 @@
         <div class="content">缓冲液(小)</div>
       </div>
       <div class="ball-area">
-        <MainComponent v-for="item in bufferLittles" :key="item" class="ball-grid" :projectName="item.projShortName"
-          :currentCount="item.num" :totalBalls="25" :activatedBalls="item.num" :columns="5" gridWidth="240px"
-          gridHeight="235px" :activeColor="item.color" />
+        <MainComponent
+          v-for="item in bufferLittles"
+          :key="item"
+          class="ball-grid"
+          :projectName="item.projShortName"
+          :currentCount="item.num"
+          :totalBalls="25"
+          :activatedBalls="item.num"
+          :columns="5"
+          gridWidth="240px"
+          gridHeight="235px"
+          :activeColor="item.color"
+        />
       </div>
     </div>
   </div>
@@ -70,17 +93,21 @@
 <script setup lang="ts">
 import { MoveLiquidArea, SpttingPlates, MainComponent } from '../components'
 import { ref, onMounted, onActivated, onBeforeUnmount, watch } from 'vue'
-import { scanConsumables, updateTipsNum } from '../../../services/Index/index'
+import {
+  getInitState,
+  scanConsumables,
+  updateTipsNum,
+} from '../../../services/Index/index'
 import { useConsumablesStore, useEmergencyStore } from '../../../store'
 import { useDeviceStore } from '../../../store/index'
 import { eventBus } from '../../../eventBus'
-import {
-  ReactionPlate,
-  BottleGroup,
-  LiquidState,
-} from '../../../types/Index'
+import { ReactionPlate, BottleGroup, LiquidState } from '../../../types/Index'
 import { createWebSocket } from '../../../websocket/socket'
-import type { ConsumablesStateMessage, SensorStateMessage, EmergencyPosStateMessage } from '../../../websocket/socket';
+import type {
+  ConsumablesStateMessage,
+  SensorStateMessage,
+  EmergencyPosStateMessage,
+} from '../../../websocket/socket'
 import { getServerInfo } from '../../../utils/getServerInfo'
 import { formatScanReports } from '../../../utils/errorHandler'
 import { ElMessage } from 'element-plus'
@@ -91,15 +118,15 @@ const consumableStore = useConsumablesStore()
 const emergencyStore = useEmergencyStore()
 const deviceStore = useDeviceStore()
 // 温度状态
-const currentTemperature = ref(40);
+const currentTemperature = ref(40)
 // 废料区状态
 const wasteStatus = ref(false)
 // 父组件状态
 const isLoad = ref(false)
 const isLoading = ref(false)
-//管理反应板夹的状态
+// 反应板夹的状态
 const plates = ref<ReactionPlate[]>([])
-// 管理移液盘的状态
+// 移液盘的状态
 const moveLiquids = ref<LiquidState[]>([
   {
     id: 1,
@@ -190,7 +217,7 @@ const isHandleScan = ref(false)
 const handleConfirmScan = () => {
   showScanResults.value = false
   isHandleScan.value = true
-  if (formattedReports.value.some(report => report.isError)) {
+  if (formattedReports.value.some((report) => report.isError)) {
     isLoad.value = false
     isAlreadyLoad.value = false
     ElMessage.warning('存在错误，请检查耗材')
@@ -203,15 +230,15 @@ const startWebSocket = () => {
 // 处理传感器状态消息
 const handleSensorState = (data: SensorStateMessage['data']) => {
   // 更新温度值（这里使用孵育盒温度）
-  currentTemperature.value = data.incubateBoxTemperature;
+  currentTemperature.value = data.incubateBoxTemperature
   wasteStatus.value = data.wasteBinFullFlag
   consumableStore.updateWasteStatus(wasteStatus.value)
   // 可以添加温度异常处理逻辑
   if (currentTemperature.value > 40) {
-    console.warn('温度过高警告');
+    console.warn('温度过高警告')
     // 可以在这里添加其他警告逻辑
   }
-};
+}
 
 //处理耗材状态
 const handleConsumablesState = (data: ConsumablesStateMessage['data']) => {
@@ -233,17 +260,24 @@ const updatePlatesAndBuffers = ({
   value: number
   index: number
 }) => {
-  if (plates.value && plates.value[index]) plates.value[index].num = value
-  if (bufferLittles.value && bufferLittles.value[index])
+  if (plates.value && plates.value[index]) {
+    plates.value[index].num = value
+  }
+  if (bufferLittles.value && bufferLittles.value[index]) {
     bufferLittles.value[index].num = value
-  if (bufferBig.value && bufferBig.value[index])
+  }
+  if (bufferBig.value && bufferBig.value[index]) {
     bufferBig.value[index].isUse = value > 0
+  }
 }
 onMounted(() => {
   eventBus.on('confirm', updatePlatesAndBuffers)
   startWebSocket()
-  socket.subscribe<SensorStateMessage>('SensorState', handleSensorState);
-  socket.subscribe<ConsumablesStateMessage>('ConsumablesStateService', handleConsumablesState);
+  socket.subscribe<SensorStateMessage>('SensorState', handleSensorState)
+  socket.subscribe<ConsumablesStateMessage>(
+    'ConsumablesStateService',
+    handleConsumablesState,
+  )
   // getEmergencyInfo()
 })
 onBeforeUnmount(() => {
@@ -252,8 +286,11 @@ onBeforeUnmount(() => {
   if (socket !== null) {
     socket.disconnect() // 断开连接
   }
-  socket.unsubscribe<SensorStateMessage>('SensorState', handleSensorState);
-  socket.unsubscribe<ConsumablesStateMessage>('ConsumablesStateService', handleConsumablesState);
+  socket.unsubscribe<SensorStateMessage>('SensorState', handleSensorState)
+  socket.unsubscribe<ConsumablesStateMessage>(
+    'ConsumablesStateService',
+    handleConsumablesState,
+  )
 })
 // 在组件激活时恢复状态
 onActivated(() => {
@@ -267,9 +304,13 @@ onActivated(() => {
 const consumablesData = ref<ConsumablesStateMessage['data'] | null>(null)
 // 修改加载耗材的处理函数
 const handleIsLoad = async () => {
-  isLoading.value = true
-
+  const res = await getInitState()
+  if (res.ecode === 'SUC' && !res.data.deviceInited) {
+    eventBus.emit('initDevice')
+    return
+  }
   try {
+    isLoading.value = true
     const res = await scanConsumables()
     isLoading.value = false
 
@@ -279,10 +320,6 @@ const handleIsLoad = async () => {
     // 显示扫描结果弹窗
     showScanResults.value = true
     consumablesData.value = res.data.consumableState
-    // 更新状态
-    if (res.data.consumableState) {
-
-    }
   } catch (error) {
     console.error('加载耗材失败:', error)
     isLoading.value = false
@@ -296,14 +333,13 @@ watch(isHandleScan, (newVal) => {
     if (consumablesData.value) {
       moveLiquids.value = consumablesData.value.tips
       plates.value = consumablesData.value.reactionPlateGroup as ReactionPlate[]
-      bufferLittles.value = consumablesData.value.littBottleGroup as BufferLittle[]
+      bufferLittles.value = consumablesData.value
+        .littBottleGroup as BufferLittle[]
       bufferBig.value = consumablesData.value.larBottleGroup as BottleGroup[]
       tempTipNum.value = [...moveLiquids.value.map((liquid) => liquid.tipNum)]
       isLoad.value = true
       isAlreadyLoad.value = true
       consumableStore.setConsumablesData(consumablesData.value)
-      // 清空临时数据
-      consumablesData.value = null
     }
   } else {
     // 取消时清空临时数据
@@ -314,7 +350,10 @@ const handleIsUnload = () => {
   isLoad.value = !isLoad.value
   isLoading.value = false
   isAlreadyLoad.value = false
-  socket.unsubscribe<ConsumablesStateMessage>('ConsumablesStateService', handleConsumablesState);
+  socket.unsubscribe<ConsumablesStateMessage>(
+    'ConsumablesStateService',
+    handleConsumablesState,
+  )
   // 重置 moveLiquids 和 tempTipNum
   moveLiquids.value = [
     { id: 1, tipNum: 0 },
@@ -365,14 +404,20 @@ const handleIsUnload = () => {
   ]
   bufferBig.value = []
 }
-const updateTipNum = async ({ index, tipNum }: { index: number; tipNum: number }) => {
+const updateTipNum = async ({
+  index,
+  tipNum,
+}: {
+  index: number
+  tipNum: number
+}) => {
   // 新临时状态
   tempTipNum.value[index] = tipNum
   console.log('🚀 ~ updateTipNum ~ tempTipNum:', tempTipNum.value)
   //调用接口
   try {
     if (deviceStore.status === 'IDLE') {
-      await updateTipsNum({ group: `CG${index}`, num: tipNum })
+      await updateTipsNum({ group: `TipG${index+1}`, num: tipNum })
     } else {
       ElMessage.error('设备正在工作，无法修改数值')
     }
@@ -492,7 +537,7 @@ const updateTipNum = async ({ index, tipNum }: { index: number; tipNum: number }
       flex-wrap: wrap;
 
       .ball-grid {
-        margin: 0 15px 5px 15px
+        margin: 0 15px 5px 15px;
       }
     }
   }
diff --git a/src/utils/errorHandler.ts b/src/utils/errorHandler.ts
index 0bedebb..c06ec17 100644
--- a/src/utils/errorHandler.ts
+++ b/src/utils/errorHandler.ts
@@ -2,16 +2,16 @@
 const ERROR_MAP = {
   PASS: '通过',
   EMPTY: '空',
-  EXPIRED: '转材过期',
-  MISS_REACTION_PLATE: '没有反应板架',
+  EXPIRED: '耗材过期',
+  MISS_REACTION_PLATE: '没有反应板夹',
   MISS_LITTSB: '缺少小缓冲液',
   MISS_LARBS: '缺少大缓冲液',
   MISS_IDCARD: '未找到匹配的项目ID卡',
   LITTSB_LOTID_MISMATCH: '小缓冲液批号不匹配',
   LARBS_LOTID_MISMATCH: '大缓冲液批号不匹配',
+  REACTION_PLATE_2D_CODE_FORMATE_ERROR: '反应板二维码格式错误',
   CODE_ERROR_PROJINFO_IS_ERROR: '代码错误，项目信息异常',
   UN_SUPPORT_PROJ: '不支持的项目',
-  REACTION_PLATE_2D_CODE_FORMATE_ERROR: '反应板二维码格式错误',
 } as const
 
 type ErrorCode = keyof typeof ERROR_MAP
@@ -31,7 +31,7 @@ export const getErrorMessage = (code: ErrorCode): string => {
  * @returns 是否为错误状态
  */
 export const isError = (code: ErrorCode): boolean => {
-  return code !== 'PASS'
+  return code !== 'PASS' && code !== 'EMPTY'
 }
 
 /**

From e319ce87a54021c01c30c13dbfcf70a7a8e2434d Mon Sep 17 00:00:00 2001
From: zhangjiming <zhangjiming@costrip.cn>
Date: Fri, 3 Jan 2025 19:46:57 +0800
Subject: [PATCH 07/11] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=88=9D=E6=AD=A5?=
 =?UTF-8?q?=E6=BB=91=E5=9D=97=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Index/Regular/Consumables.vue            |  13 ++
 .../Index/components/Consumables/DragAreaEx.vue    | 141 +++++++++++++++++++++
 .../Index/components/Consumables/SliderArea.vue    | 113 +++++++++++++++++
 .../Index/components/Consumables/SliderAreaEx.vue  | 121 ++++++++++++++++++
 4 files changed, 388 insertions(+)
 create mode 100644 src/pages/Index/components/Consumables/DragAreaEx.vue
 create mode 100644 src/pages/Index/components/Consumables/SliderArea.vue
 create mode 100644 src/pages/Index/components/Consumables/SliderAreaEx.vue

diff --git a/src/pages/Index/Regular/Consumables.vue b/src/pages/Index/Regular/Consumables.vue
index cd38f3c..d8914bc 100644
--- a/src/pages/Index/Regular/Consumables.vue
+++ b/src/pages/Index/Regular/Consumables.vue
@@ -49,6 +49,9 @@
     <div class="main-top">
       <div class="plate-area">
         <SpttingPlates :plates="plates" :temperature="currentTemperature" />
+
+        <!-- <SliderAreaEx v-model="sliderValue" v-model:totalValue="totalVal"/>
+        <DragAreaEx v-model:hVal="hVal" v-model:hTotal="hTotal" v-model:vVal="vVal" v-model:vTotal="vTotal"/> -->
       </div>
       <div class="move-liquid-area">
         <MoveLiquidArea
@@ -92,6 +95,8 @@
 
 <script setup lang="ts">
 import { MoveLiquidArea, SpttingPlates, MainComponent } from '../components'
+import SliderAreaEx  from '../components/Consumables/SliderAreaEx.vue';
+import DragAreaEx  from '../components/Consumables/DragAreaEx.vue';
 import { ref, onMounted, onActivated, onBeforeUnmount, watch } from 'vue'
 import {
   getInitState,
@@ -114,6 +119,14 @@ import { ElMessage } from 'element-plus'
 const { wsUrl } = getServerInfo('/api/v1/app/ws/state')
 const socket = createWebSocket(wsUrl)
 
+const sliderValue = ref(25); // 初始值
+const totalVal = ref(50)
+
+const hVal = ref(10)
+const hTotal = ref(60)
+const vVal = ref(10)
+const vTotal = ref(60)
+
 const consumableStore = useConsumablesStore()
 const emergencyStore = useEmergencyStore()
 const deviceStore = useDeviceStore()
diff --git a/src/pages/Index/components/Consumables/DragAreaEx.vue b/src/pages/Index/components/Consumables/DragAreaEx.vue
new file mode 100644
index 0000000..df93773
--- /dev/null
+++ b/src/pages/Index/components/Consumables/DragAreaEx.vue
@@ -0,0 +1,141 @@
+<template>
+  <div
+    class="slider-container"
+    @mousedown="handleStart"
+    @touchstart.prevent="handleStart"
+  >
+    <div class="slider-track" ref="sliderTrack">
+      <div
+        class="slider-fill"
+        :style="{ width: `${(hValue / hTotal) * 100}%`, height: `${(vValue / vTotal) * 100}%` }"
+      ></div>
+      <div
+        :style="{ visibility: `${isDragging ? 'visible' : 'hidden'}` }"
+        class="slider-thumb"
+      >
+        {{ `${hValue.toFixed()}, ${vValue.toFixed()}` }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, watch, useTemplateRef } from 'vue'
+
+const props = defineProps({
+  hVal: {
+    type: Number,
+    default: 25,
+  },
+  hTotal: {
+    type: Number,
+    default: 50,
+  },
+  vVal: {
+    type: Number,
+    default: 25,
+  },
+  vTotal: {
+    type: Number,
+    default: 50,
+  },
+})
+
+const emit = defineEmits(['update:hVal','update:vVal'])
+
+const hValue = ref(props.hVal)
+const hTotalVal = ref(props.hTotal)
+const vValue = ref(props.vVal)
+const vTotalVal = ref(props.vTotal)
+
+const isDragging = ref(false)
+const startX = ref(0)
+const startY = ref(0)
+const startXValue = ref(0)
+const startYValue = ref(0)
+const sliderTrack = useTemplateRef('sliderTrack')
+
+watch(
+  [() => props.hVal, () => props.vVal],
+  (newX, newY) => {
+    if (!isDragging.value) {
+      hValue.value = newX
+      vValue.value = newY
+    }
+  },
+)
+
+function handleStart(event) {
+  const touchEvent = event.touches ? event.touches[0] : event
+  startX.value = touchEvent.clientX
+  startY.value = touchEvent.clientY
+  const rect = sliderTrack.value.getBoundingClientRect()
+  startXValue.value = (hValue.value / hTotalVal.value) * rect.width
+  startYValue.value = (vValue.value / vTotalVal.value) * rect.height
+  
+  isDragging.value = true
+  document.addEventListener('mousemove', handleDrag)
+  document.addEventListener('touchmove', handleDrag, { passive: false })
+  document.addEventListener('mouseup', handleEnd)
+  document.addEventListener('touchend', handleEnd)
+}
+
+function handleDrag(event) {
+  if (!isDragging.value) return
+
+  const touchEvent = event.touches ? event.touches[0] : event
+  const deltaX = touchEvent.clientX - startX.value
+  const deltaY = touchEvent.clientY - startY.value
+  const rect = sliderTrack.value.getBoundingClientRect()
+  let percentX = (deltaX + startXValue.value) / rect.width
+  let percentY = (deltaY + startYValue.value) / rect.height
+
+  hValue.value = Math.min(1, Math.max(0, percentX)) * hTotalVal.value
+  vValue.value = Math.min(1, Math.max(0, percentY)) * vTotalVal.value
+  // console.log(percent, sliderValue.value)
+  emit('update:hVal', hValue.value)
+  emit('update:vVal', vValue.value)
+}
+
+function handleEnd() {
+  isDragging.value = false
+  document.removeEventListener('mousemove', handleDrag)
+  document.removeEventListener('touchmove', handleDrag)
+  document.removeEventListener('mouseup', handleEnd)
+  document.removeEventListener('touchend', handleEnd)
+}
+</script>
+
+<style scoped>
+.slider-container {
+  width: 300px;
+  height: 300px;
+  touch-action: none; /* Prevents the browser's default panning behavior */
+}
+
+.slider-track {
+  position: relative;
+  height: 100%;
+  background-color: #ddd;
+  cursor: pointer;
+}
+
+.slider-fill {
+  position: absolute;
+  /* height: 100%; */
+  background-color: #4caf50;
+}
+
+.slider-thumb {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  font-size: 32px;
+  color: gray;
+}
+
+.slider-thumb:active {
+  cursor: grabbing;
+}
+</style>
diff --git a/src/pages/Index/components/Consumables/SliderArea.vue b/src/pages/Index/components/Consumables/SliderArea.vue
new file mode 100644
index 0000000..ff28fc6
--- /dev/null
+++ b/src/pages/Index/components/Consumables/SliderArea.vue
@@ -0,0 +1,113 @@
+<template>
+  <div
+    class="slider-container"
+    @mousedown="handleStart"
+    @touchstart.prevent="handleStart"
+  >
+    <div class="slider-track" ref="sliderTrack">
+      <div class="slider-fill" :style="{ width: `${sliderValue}%` }"></div>
+      <div
+        :style="{ visibility: `${isDragging ? 'visible' : 'hidden'}` }"
+        class="slider-thumb"
+      >
+        {{ sliderValue.toFixed() }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, watch, useTemplateRef } from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: Number,
+    default: 50,
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const sliderValue = ref(props.modelValue)
+const isDragging = ref(false)
+const startX = ref(0)
+const startValue = ref(0)
+//   const sliderThumb = ref(null);
+const sliderTrack = useTemplateRef('sliderTrack')
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (!isDragging.value) {
+      sliderValue.value = newValue
+    }
+  },
+)
+
+function handleStart(event) {
+  const touchEvent = event.touches ? event.touches[0] : event
+  startX.value = touchEvent.clientX
+  const rect = sliderTrack.value.getBoundingClientRect()
+  startValue.value = (sliderValue.value * rect.width) / 100
+
+  isDragging.value = true
+  document.addEventListener('mousemove', handleDrag)
+  document.addEventListener('touchmove', handleDrag, { passive: false })
+  document.addEventListener('mouseup', handleEnd)
+  document.addEventListener('touchend', handleEnd)
+}
+
+function handleDrag(event) {
+  if (!isDragging.value) return
+
+  const touchEvent = event.touches ? event.touches[0] : event
+  const deltaX = touchEvent.clientX - startX.value
+  const rect = sliderTrack.value.getBoundingClientRect()
+  let percent = ((deltaX + startValue.value) / rect.width) * 100
+
+  // Limit the value between 0 and 100
+  sliderValue.value = Math.min(100, Math.max(0, percent))
+  emit('update:modelValue', sliderValue.value)
+}
+
+function handleEnd() {
+  isDragging.value = false
+  document.removeEventListener('mousemove', handleDrag)
+  document.removeEventListener('touchmove', handleDrag)
+  document.removeEventListener('mouseup', handleEnd)
+  document.removeEventListener('touchend', handleEnd)
+}
+</script>
+
+<style scoped>
+.slider-container {
+  width: 300px;
+  touch-action: none; /* Prevents the browser's default panning behavior */
+}
+
+.slider-track {
+  position: relative;
+  height: 4rem;
+  background-color: #ddd;
+  cursor: pointer;
+}
+
+.slider-fill {
+  position: absolute;
+  height: 100%;
+  background-color: #4caf50;
+}
+
+.slider-thumb {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  font-size: 32px;
+  color: gray;
+}
+
+.slider-thumb:active {
+  cursor: grabbing;
+}
+</style>
diff --git a/src/pages/Index/components/Consumables/SliderAreaEx.vue b/src/pages/Index/components/Consumables/SliderAreaEx.vue
new file mode 100644
index 0000000..d7ea32e
--- /dev/null
+++ b/src/pages/Index/components/Consumables/SliderAreaEx.vue
@@ -0,0 +1,121 @@
+<template>
+  <div
+    class="slider-container"
+    @mousedown="handleStart"
+    @touchstart.prevent="handleStart"
+  >
+    <div class="slider-track" ref="sliderTrack">
+      <div
+        class="slider-fill"
+        :style="{ width: `${(sliderValue / totalVal) * 100}%` }"
+      ></div>
+      <div
+        :style="{ visibility: `${isDragging ? 'visible' : 'hidden'}` }"
+        class="slider-thumb"
+      >
+        {{ sliderValue.toFixed() }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, watch, useTemplateRef } from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: Number,
+    default: 25,
+  },
+  totalValue: {
+    type: Number,
+    default: 50,
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const sliderValue = ref(props.modelValue)
+const totalVal = ref(props.totalValue)
+const isDragging = ref(false)
+const startX = ref(0)
+const startValue = ref(0)
+const sliderTrack = useTemplateRef('sliderTrack')
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (!isDragging.value) {
+      sliderValue.value = newValue
+    }
+  },
+)
+
+function handleStart(event) {
+  const touchEvent = event.touches ? event.touches[0] : event
+  startX.value = touchEvent.clientX
+  const rect = sliderTrack.value.getBoundingClientRect()
+  startValue.value = (sliderValue.value / totalVal.value) * rect.width
+  // console.log(sliderValue.value, totalVal.value)
+  // console.log(startValue.value, rect.width)
+  isDragging.value = true
+  document.addEventListener('mousemove', handleDrag)
+  document.addEventListener('touchmove', handleDrag, { passive: false })
+  document.addEventListener('mouseup', handleEnd)
+  document.addEventListener('touchend', handleEnd)
+}
+
+function handleDrag(event) {
+  if (!isDragging.value) return
+
+  const touchEvent = event.touches ? event.touches[0] : event
+  const deltaX = touchEvent.clientX - startX.value
+  const rect = sliderTrack.value.getBoundingClientRect()
+  let percent = (deltaX + startValue.value) / rect.width
+
+  sliderValue.value = Math.min(1, Math.max(0, percent)) * totalVal.value
+  // console.log(percent, sliderValue.value)
+  emit('update:modelValue', sliderValue.value)
+}
+
+function handleEnd() {
+  isDragging.value = false
+  document.removeEventListener('mousemove', handleDrag)
+  document.removeEventListener('touchmove', handleDrag)
+  document.removeEventListener('mouseup', handleEnd)
+  document.removeEventListener('touchend', handleEnd)
+}
+</script>
+
+<style scoped>
+.slider-container {
+  width: 300px;
+  touch-action: none; /* Prevents the browser's default panning behavior */
+}
+
+.slider-track {
+  position: relative;
+  height: 4rem;
+  background-color: #ddd;
+  cursor: pointer;
+}
+
+.slider-fill {
+  position: absolute;
+  height: 100%;
+  background-color: #4caf50;
+}
+
+.slider-thumb {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  font-size: 32px;
+  color: gray;
+}
+
+.slider-thumb:active {
+  cursor: grabbing;
+}
+</style>

From 8424e17b3e8f2437bd224b5d33f944994240e8ce Mon Sep 17 00:00:00 2001
From: zhangjiming <zhangjiming@costrip.cn>
Date: Fri, 3 Jan 2025 20:22:38 +0800
Subject: [PATCH 08/11] =?UTF-8?q?=E8=A7=A3=E5=86=B3=E7=BC=96=E8=AF=91bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vite.config.ts | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/vite.config.ts b/vite.config.ts
index e03204a..5f247fd 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -4,16 +4,17 @@ import { fileURLToPath, URL } from 'url'
 import AutoImport from 'unplugin-auto-import/vite'
 import Components from 'unplugin-vue-components/vite'
 import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+
 // https://vitejs.dev/config/
 export default defineConfig({
   base: './',
   plugins: [
     vue(),
     AutoImport({
-      resolvers: [ElementPlusResolver()],
+      resolvers: [ElementPlusResolver({ importStyle: false })],
     }),
     Components({
-      resolvers: [ElementPlusResolver()],
+      resolvers: [ElementPlusResolver({ importStyle: false })],
     }),
   ],
   resolve: {
@@ -31,4 +32,13 @@ export default defineConfig({
       },
     },
   },
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://localhost',
+        changeOrigin: true,
+        // rewrite: (path) => path.replace(/^\/api/, ''),
+      },
+    },
+  },
 })

From efd06a3d18506a9c701114c71d505b414355fad2 Mon Sep 17 00:00:00 2001
From: zhangjiming <zhangjiming@costrip.cn>
Date: Fri, 3 Jan 2025 20:25:32 +0800
Subject: [PATCH 09/11] =?UTF-8?q?=E6=B6=88=E9=99=A4defineProp=E5=92=8Cdefi?=
 =?UTF-8?q?neEmits=E8=AD=A6=E5=91=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Index/components/Consumables/BallGrid.vue        | 1 -
 src/pages/Index/components/Consumables/Plate.vue           | 1 -
 src/pages/Index/components/Consumables/SpttingPlates.vue   | 2 +-
 src/pages/Index/components/Consumables/Warn/InitWarn.vue   | 2 +-
 src/pages/Index/components/History/HistoryTable.vue        | 2 +-
 src/pages/Index/components/History/HistoryWarn.vue         | 1 -
 src/pages/Index/components/Running/LittleBufferDisplay.vue | 2 +-
 src/pages/Index/components/Running/PlateDisplay.vue        | 2 +-
 src/pages/Index/components/Running/SampleDisplay.vue       | 2 +-
 src/pages/Index/components/Setting/AddUserModal.vue        | 2 +-
 src/pages/Index/components/Setting/DelMessage.vue          | 2 +-
 src/pages/Index/components/Setting/DelWarn.vue             | 2 +-
 src/pages/Index/components/Setting/EnterPinModal.vue       | 2 +-
 src/pages/Index/components/TestTube/ProjectSetting.vue     | 2 +-
 src/pages/Index/components/TestTube/TestTubeRack.vue       | 2 +-
 15 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/src/pages/Index/components/Consumables/BallGrid.vue b/src/pages/Index/components/Consumables/BallGrid.vue
index 46f1305..c55154b 100644
--- a/src/pages/Index/components/Consumables/BallGrid.vue
+++ b/src/pages/Index/components/Consumables/BallGrid.vue
@@ -14,7 +14,6 @@ import {
   watch,
   onMounted,
   onBeforeUnmount,
-  defineEmits,
 } from 'vue'
 
 // 移液盘复用组件
diff --git a/src/pages/Index/components/Consumables/Plate.vue b/src/pages/Index/components/Consumables/Plate.vue
index 96bbe31..39d2e90 100644
--- a/src/pages/Index/components/Consumables/Plate.vue
+++ b/src/pages/Index/components/Consumables/Plate.vue
@@ -10,7 +10,6 @@
 </template>
 
 <script lang="ts" setup>
-import { defineProps } from 'vue'
 
 // 定义 props
 defineProps({
diff --git a/src/pages/Index/components/Consumables/SpttingPlates.vue b/src/pages/Index/components/Consumables/SpttingPlates.vue
index 7d37cef..58f51a6 100644
--- a/src/pages/Index/components/Consumables/SpttingPlates.vue
+++ b/src/pages/Index/components/Consumables/SpttingPlates.vue
@@ -42,7 +42,7 @@
 
 <script setup>
 import Plate from './Plate.vue';
-import { ref, onMounted, onBeforeUnmount, defineProps } from 'vue';
+import { ref, onMounted, onBeforeUnmount } from 'vue';
 import ChangeNum from './ChangeNum.vue';
 
 const props = defineProps({
diff --git a/src/pages/Index/components/Consumables/Warn/InitWarn.vue b/src/pages/Index/components/Consumables/Warn/InitWarn.vue
index 2d2cd84..d9c5b1b 100644
--- a/src/pages/Index/components/Consumables/Warn/InitWarn.vue
+++ b/src/pages/Index/components/Consumables/Warn/InitWarn.vue
@@ -24,7 +24,7 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps,  ref, onMounted } from 'vue'
+import { ref, onMounted } from 'vue'
 
 const props = defineProps({
   visible: Boolean, // 控制弹窗显示
diff --git a/src/pages/Index/components/History/HistoryTable.vue b/src/pages/Index/components/History/HistoryTable.vue
index c86d7f2..e302c55 100644
--- a/src/pages/Index/components/History/HistoryTable.vue
+++ b/src/pages/Index/components/History/HistoryTable.vue
@@ -44,7 +44,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, defineProps, watch, computed } from 'vue'
+import { ref, watch, computed } from 'vue'
 import { formatDate } from '../../../../utils/formDate'
 import type { TableItem } from '../../../../types/Index';
 
diff --git a/src/pages/Index/components/History/HistoryWarn.vue b/src/pages/Index/components/History/HistoryWarn.vue
index ecf25b6..e14ff46 100644
--- a/src/pages/Index/components/History/HistoryWarn.vue
+++ b/src/pages/Index/components/History/HistoryWarn.vue
@@ -24,7 +24,6 @@
 
 
 <script setup lang="ts">
-import { defineProps } from 'vue';
 
 defineProps({
   icon: {
diff --git a/src/pages/Index/components/Running/LittleBufferDisplay.vue b/src/pages/Index/components/Running/LittleBufferDisplay.vue
index 81611ab..e51d7cd 100644
--- a/src/pages/Index/components/Running/LittleBufferDisplay.vue
+++ b/src/pages/Index/components/Running/LittleBufferDisplay.vue
@@ -7,7 +7,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { defineProps } from 'vue'
+
 import type { LittleBottleGroup } from '../../../../websocket/socket'
 
 // 定义组件接收的 props
diff --git a/src/pages/Index/components/Running/PlateDisplay.vue b/src/pages/Index/components/Running/PlateDisplay.vue
index c2e92e0..3ceb43b 100644
--- a/src/pages/Index/components/Running/PlateDisplay.vue
+++ b/src/pages/Index/components/Running/PlateDisplay.vue
@@ -17,7 +17,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { defineProps } from 'vue'
+
 import type { ConsumableGroupBase } from '../../../../websocket/socket'
 
 defineProps<{
diff --git a/src/pages/Index/components/Running/SampleDisplay.vue b/src/pages/Index/components/Running/SampleDisplay.vue
index 529837e..0964ca2 100644
--- a/src/pages/Index/components/Running/SampleDisplay.vue
+++ b/src/pages/Index/components/Running/SampleDisplay.vue
@@ -40,7 +40,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, defineProps } from 'vue'
+import { ref } from 'vue'
 import { generateSampleBackground, getBloodTypeLabel } from '../../utils'
 import type { TubeHolderStateMessage } from '../../../../websocket/socket'
 defineProps<{
diff --git a/src/pages/Index/components/Setting/AddUserModal.vue b/src/pages/Index/components/Setting/AddUserModal.vue
index f4ed631..5e07dda 100644
--- a/src/pages/Index/components/Setting/AddUserModal.vue
+++ b/src/pages/Index/components/Setting/AddUserModal.vue
@@ -30,7 +30,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, defineProps,  computed, watch } from 'vue'
+import { ref,  computed, watch } from 'vue'
 import activeIcon from '@/assets/register-user-active.svg'
 import existIcon from '@/assets/register-user-exist.svg'
 import devicateIcon from '@/assets/register-user-devicate.svg'
diff --git a/src/pages/Index/components/Setting/DelMessage.vue b/src/pages/Index/components/Setting/DelMessage.vue
index 54a8ecc..141cdb3 100644
--- a/src/pages/Index/components/Setting/DelMessage.vue
+++ b/src/pages/Index/components/Setting/DelMessage.vue
@@ -20,7 +20,7 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps, ref, onMounted } from 'vue'
+import { ref, onMounted } from 'vue'
 
 // 定义传入的属性
 const props = withDefaults(defineProps<{
diff --git a/src/pages/Index/components/Setting/DelWarn.vue b/src/pages/Index/components/Setting/DelWarn.vue
index b7a7737..2a3fb1f 100644
--- a/src/pages/Index/components/Setting/DelWarn.vue
+++ b/src/pages/Index/components/Setting/DelWarn.vue
@@ -27,7 +27,7 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps,  ref, onMounted } from 'vue'
+import { ref, onMounted } from 'vue'
 
 // 定义传入的属性
 const props = defineProps<{
diff --git a/src/pages/Index/components/Setting/EnterPinModal.vue b/src/pages/Index/components/Setting/EnterPinModal.vue
index e9d03a6..7d07e25 100644
--- a/src/pages/Index/components/Setting/EnterPinModal.vue
+++ b/src/pages/Index/components/Setting/EnterPinModal.vue
@@ -21,7 +21,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, defineProps } from 'vue'
+import { ref } from 'vue'
 
 defineProps<{ visible: boolean; loading: boolean }>()
 const emit = defineEmits<{
diff --git a/src/pages/Index/components/TestTube/ProjectSetting.vue b/src/pages/Index/components/TestTube/ProjectSetting.vue
index e236c67..451aff3 100644
--- a/src/pages/Index/components/TestTube/ProjectSetting.vue
+++ b/src/pages/Index/components/TestTube/ProjectSetting.vue
@@ -25,7 +25,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, defineProps, watch } from 'vue'
+import { ref, watch } from 'vue'
 import { useTestTubeStore } from '../../../../store'
 const testTubeStore = useTestTubeStore()
 const props = defineProps({
diff --git a/src/pages/Index/components/TestTube/TestTubeRack.vue b/src/pages/Index/components/TestTube/TestTubeRack.vue
index b5b6efc..05a6d1d 100644
--- a/src/pages/Index/components/TestTube/TestTubeRack.vue
+++ b/src/pages/Index/components/TestTube/TestTubeRack.vue
@@ -85,7 +85,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, defineProps, onMounted } from 'vue'
+import { ref, onMounted } from 'vue'
 import ProjectSetting from './ProjectSetting.vue'
 import { ReactionPlate, TubeRack, handleTube, DataItem } from '../../../../types/Index'
 import {

From 20d48496d92830dd981ddabdea9111053ec7da7d Mon Sep 17 00:00:00 2001
From: zhangjiming <zhangjiming@costrip.cn>
Date: Sat, 4 Jan 2025 09:55:27 +0800
Subject: [PATCH 10/11] =?UTF-8?q?=E8=B0=83=E6=95=B4=E5=8F=8D=E5=BA=94?=
 =?UTF-8?q?=E6=9D=BF=E6=95=B0=E7=9B=AE=E4=B8=80=E7=A7=8D=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/eventBus.ts                                    |  3 +-
 src/pages/Index/Regular/Consumables.vue            | 26 +++----
 .../Index/components/Consumables/ChangeNum.vue     |  1 +
 .../Index/components/Consumables/SliderAreaEx.vue  | 37 ++++++----
 .../Index/components/Consumables/SpttingPlates.vue | 83 +++++++++++++++++-----
 5 files changed, 106 insertions(+), 44 deletions(-)

diff --git a/src/eventBus.ts b/src/eventBus.ts
index 2127bcb..04211dd 100644
--- a/src/eventBus.ts
+++ b/src/eventBus.ts
@@ -14,9 +14,10 @@ export type ErrorModalData = {
   stackInfo?: null
 }
 
+export type ConsumeType = 'Plate' | 'LittleBuf' | 'BigBuf' | 'Tip'
 type Events = {
   initDevice: void
-  confirm: { value: number; index: number }
+  confirm: { type: ConsumeType; value: number; index: number }
   'show-error-modal': ErrorModalData
   'show-stack-modal': ErrorModalData['stackInfo'] | null | undefined
   // 其他事件类型
diff --git a/src/pages/Index/Regular/Consumables.vue b/src/pages/Index/Regular/Consumables.vue
index d8914bc..045167d 100644
--- a/src/pages/Index/Regular/Consumables.vue
+++ b/src/pages/Index/Regular/Consumables.vue
@@ -95,8 +95,8 @@
 
 <script setup lang="ts">
 import { MoveLiquidArea, SpttingPlates, MainComponent } from '../components'
-import SliderAreaEx  from '../components/Consumables/SliderAreaEx.vue';
-import DragAreaEx  from '../components/Consumables/DragAreaEx.vue';
+// import SliderAreaEx  from '../components/Consumables/SliderAreaEx.vue';
+// import DragAreaEx  from '../components/Consumables/DragAreaEx.vue';
 import { ref, onMounted, onActivated, onBeforeUnmount, watch } from 'vue'
 import {
   getInitState,
@@ -105,7 +105,7 @@ import {
 } from '../../../services/Index/index'
 import { useConsumablesStore, useEmergencyStore } from '../../../store'
 import { useDeviceStore } from '../../../store/index'
-import { eventBus } from '../../../eventBus'
+import { ConsumeType, eventBus } from '../../../eventBus'
 import { ReactionPlate, BottleGroup, LiquidState } from '../../../types/Index'
 import { createWebSocket } from '../../../websocket/socket'
 import type {
@@ -119,13 +119,13 @@ import { ElMessage } from 'element-plus'
 const { wsUrl } = getServerInfo('/api/v1/app/ws/state')
 const socket = createWebSocket(wsUrl)
 
-const sliderValue = ref(25); // 初始值
-const totalVal = ref(50)
+// const sliderValue = ref(25); // 初始值
+// const totalVal = ref(50)
 
-const hVal = ref(10)
-const hTotal = ref(60)
-const vVal = ref(10)
-const vTotal = ref(60)
+// const hVal = ref(10)
+// const hTotal = ref(60)
+// const vVal = ref(10)
+// const vTotal = ref(60)
 
 const consumableStore = useConsumablesStore()
 const emergencyStore = useEmergencyStore()
@@ -267,19 +267,21 @@ const handleConsumablesState = (data: ConsumablesStateMessage['data']) => {
 }
 // 使用事件总线更新状态
 const updatePlatesAndBuffers = ({
+  type,
   value,
   index,
 }: {
+  type: ConsumeType
   value: number
   index: number
 }) => {
-  if (plates.value && plates.value[index]) {
+  if (type === 'Plate' && plates.value && plates.value[index]) {
     plates.value[index].num = value
   }
-  if (bufferLittles.value && bufferLittles.value[index]) {
+  if (type === 'LittleBuf' && bufferLittles.value && bufferLittles.value[index]) {
     bufferLittles.value[index].num = value
   }
-  if (bufferBig.value && bufferBig.value[index]) {
+  if (type === 'BigBuf' && bufferBig.value && bufferBig.value[index]) {
     bufferBig.value[index].isUse = value > 0
   }
 }
diff --git a/src/pages/Index/components/Consumables/ChangeNum.vue b/src/pages/Index/components/Consumables/ChangeNum.vue
index bebf852..f05a017 100644
--- a/src/pages/Index/components/Consumables/ChangeNum.vue
+++ b/src/pages/Index/components/Consumables/ChangeNum.vue
@@ -108,6 +108,7 @@ const handleConfirm = async () => {
       const res = await updateConsumables(query.value)
       if (res.success) {
         eventBus.emit('confirm', {
+          type: 'Plate',
           value: Number(value.value),
           index: plateIndex.value,
         })
diff --git a/src/pages/Index/components/Consumables/SliderAreaEx.vue b/src/pages/Index/components/Consumables/SliderAreaEx.vue
index d7ea32e..fa1bca1 100644
--- a/src/pages/Index/components/Consumables/SliderAreaEx.vue
+++ b/src/pages/Index/components/Consumables/SliderAreaEx.vue
@@ -7,7 +7,10 @@
     <div class="slider-track" ref="sliderTrack">
       <div
         class="slider-fill"
-        :style="{ width: `${(sliderValue / totalVal) * 100}%` }"
+        :style="{
+          width: `${(sliderValue / totalVal) * 100}%`,
+          visibility: `${isDragging ? 'visible' : 'hidden'}`,
+        }"
       ></div>
       <div
         :style="{ visibility: `${isDragging ? 'visible' : 'hidden'}` }"
@@ -23,27 +26,31 @@
 import { ref, onMounted, onUnmounted, watch, useTemplateRef } from 'vue'
 
 const props = defineProps({
-  modelValue: {
+  currValue: {
     type: Number,
     default: 25,
   },
   totalValue: {
     type: Number,
-    default: 50,
+    default: 25,
   },
+  order: {
+    type: Number,
+    default: 0
+  }
 })
 
-const emit = defineEmits(['update:modelValue'])
-
-const sliderValue = ref(props.modelValue)
+const sliderValue = ref(props.currValue)
 const totalVal = ref(props.totalValue)
 const isDragging = ref(false)
 const startX = ref(0)
 const startValue = ref(0)
 const sliderTrack = useTemplateRef('sliderTrack')
 
+const emit = defineEmits(['update:sliderValue'])
+
 watch(
-  () => props.modelValue,
+  () => props.currValue,
   (newValue) => {
     if (!isDragging.value) {
       sliderValue.value = newValue
@@ -75,10 +82,12 @@ function handleDrag(event) {
 
   sliderValue.value = Math.min(1, Math.max(0, percent)) * totalVal.value
   // console.log(percent, sliderValue.value)
-  emit('update:modelValue', sliderValue.value)
+  // emit('update:modelValue', sliderValue.value)
+
 }
 
 function handleEnd() {
+  emit('update:sliderValue', sliderValue.value, props.order)
   isDragging.value = false
   document.removeEventListener('mousemove', handleDrag)
   document.removeEventListener('touchmove', handleDrag)
@@ -89,21 +98,20 @@ function handleEnd() {
 
 <style scoped>
 .slider-container {
-  width: 300px;
   touch-action: none; /* Prevents the browser's default panning behavior */
 }
 
 .slider-track {
   position: relative;
-  height: 4rem;
-  background-color: #ddd;
+  height: 100%;
+  /* background-color: #ddd; */
   cursor: pointer;
 }
 
 .slider-fill {
   position: absolute;
   height: 100%;
-  background-color: #4caf50;
+  background-color: rgba(255, 255, 255, 0.2);
 }
 
 .slider-thumb {
@@ -111,8 +119,9 @@ function handleEnd() {
   top: 50%;
   left: 50%;
   transform: translateX(-50%) translateY(-50%);
-  font-size: 32px;
-  color: gray;
+  font-size: 40px;
+  font-weight: 600;
+  color: #FFF;
 }
 
 .slider-thumb:active {
diff --git a/src/pages/Index/components/Consumables/SpttingPlates.vue b/src/pages/Index/components/Consumables/SpttingPlates.vue
index 58f51a6..3e13081 100644
--- a/src/pages/Index/components/Consumables/SpttingPlates.vue
+++ b/src/pages/Index/components/Consumables/SpttingPlates.vue
@@ -7,20 +7,32 @@
         <div class="area-text">反应板夹区</div>
       </div>
       <div class="real-time-temperature">
-        <div :class="['status-ball', { 'overheat': temperature > 40 }]"></div>
+        <div :class="['status-ball', { overheat: temperature > 40 }]"></div>
         <div class="number">温度: {{ temperature }}°</div>
       </div>
     </div>
     <!--反应板显示区域-->
     <div class="sptting-plates">
-      <div class="card" v-for="i in 6" :key="i" @click="changeNumber(plates[i - 1], i - 1)">
+      <div class="card" v-for="i in 6" :key="i">
         <div class="plate-area">
           <!-- 当 plates 数组长度不为 0 时，渲染 Plate 组件，否则显示默认的图片 -->
           <div v-if="plates.length > 0" class="plate">
             <Plate :value="plates[i - 1].num" :color="plates[i - 1].color" />
+            <SliderAreaEx
+              v-if="plates[i - 1].num > 0"
+              class="slider-area"
+              :currValue="plates[i - 1].num"
+              :totalValue="totalVal"
+              :order="i"
+              @update:sliderValue="updateSliderVal"
+            />
           </div>
           <div v-else class="close-circle">
-            <img src="@/assets/Index/stop.svg" alt="" style="width: 40px;height: 40px; margin-bottom: 20px;" />
+            <img
+              src="@/assets/Index/stop.svg"
+              alt=""
+              style="width: 40px; height: 40px; margin-bottom: 20px"
+            />
           </div>
         </div>
         <div class="plate-bottom" v-if="plates.length > 0">
@@ -36,34 +48,63 @@
       </div>
     </div>
     <!-- 修改数字弹框 -->
-    <ChangeNum ref="changeNumRef"></ChangeNum>
+    <!-- <ChangeNum ref="changeNumRef"></ChangeNum> -->
   </div>
 </template>
 
 <script setup>
-import Plate from './Plate.vue';
-import { ref, onMounted, onBeforeUnmount } from 'vue';
-import ChangeNum from './ChangeNum.vue';
+import Plate from './Plate.vue'
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import SliderAreaEx from './SliderAreaEx.vue'
+import { eventBus } from '../../../../eventBus'
+// import ChangeNum from './ChangeNum.vue';
+import { useDeviceStore } from '../../../../store/index'
+import { updateConsumables } from '../../../../services'
+import { pl } from 'element-plus/es/locale/index.mjs'
 
 const props = defineProps({
   plates: {
     type: Array,
-    default: () => []
+    default: () => [],
   },
   temperature: {
     type: Number,
-    default: 40
-  }
+    default: 40,
+  },
 })
 
-const changeNumRef = ref()
-const changeNumber = (plate, index) => {
-  if (props.plates.length > 0) {
-    changeNumRef.value.openDialog(plate, index)
+const totalVal = ref(25)
+const deviceStore = useDeviceStore()
+
+const updateSliderVal = async (plate, order) => {
+  // eventBus.emit('confirm', { type: 'Plate', value: plate, index })
+  if (deviceStore.status === 'IDLE') {
+    try {
+      const newVal = plate.toFixed()
+      const res = await updateConsumables({group: `CG${order}`, num: newVal})
+      if (res.success) {
+        // eventBus.emit('confirm', {
+        //   type: 'Plate',
+        //   value: newVal,
+        //   index: order - 1,
+        // })
+        // isOpen.value = false
+      }
+    } catch (error) {
+      console.error('更新失败:', error)
+    }
+  } else {
+    ElMessage.error('设备正在工作，无法修改数值')
   }
-  console.log('plate', plate)
 }
 
+// const changeNumRef = ref()
+// const changeNumber = (plate, index) => {
+//   if (props.plates.length > 0) {
+//     changeNumRef.value.openDialog(plate, index)
+//   }
+//   console.log('plate', plate)
+// }
 </script>
 
 <style lang="less" scoped>
@@ -150,7 +191,15 @@ const changeNumber = (plate, index) => {
         display: flex;
         justify-content: space-between;
         align-items: center;
-
+        position: relative;
+
+        .slider-area {
+          position: absolute;
+          left: 0;
+          top: 0;
+          right: 0;
+          bottom: 30px;
+        }
         .plate {
           width: 100%;
           height: 76px;
@@ -180,4 +229,4 @@ const changeNumber = (plate, index) => {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>

From 7447c92e98f02bd0e9cadea26a93ec80abfb32e0 Mon Sep 17 00:00:00 2001
From: zhangjiming <zhangjiming@costrip.cn>
Date: Sat, 4 Jan 2025 21:27:37 +0800
Subject: [PATCH 11/11] =?UTF-8?q?=E8=B0=83=E6=95=B4=E7=9B=AE=E5=BD=95?=
 =?UTF-8?q?=E5=90=8D=E7=A7=B0=EF=BC=8C=E5=AE=8C=E6=88=90=E7=A7=BB=E6=B6=B2?=
 =?UTF-8?q?=E5=A4=B4=E5=8C=BA=E6=8B=96=E5=8A=A8=E6=93=8D=E4=BD=9C=EF=BC=8C?=
 =?UTF-8?q?=E5=90=8C=E6=AD=A5=E6=9B=B4=E6=8D=A2=E5=B0=8F=E7=BC=93=E5=86=B2?=
 =?UTF-8?q?=E6=B6=B2=E5=8C=BA=E6=98=BE=E7=A4=BA=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Index/History.vue                        |   4 +-
 src/pages/Index/Index.vue                          |   2 +-
 src/pages/Index/Regular.vue                        |   2 +-
 src/pages/Index/Regular/Consumables.vue            |  62 ++++---
 src/pages/Index/Regular/Running.vue                |   4 +-
 src/pages/Index/Regular/TestTube.vue               |   4 +-
 src/pages/Index/Settings/Users.vue                 |   2 +-
 src/pages/Index/TestTube/ChangeUser.vue            |   2 +-
 .../Index/components/Consumables/BallGrid2.vue     | 181 +++++++++++++++++++++
 .../Index/components/Consumables/DragAreaEx.vue    |  37 ++---
 src/pages/Index/components/Consumables/InfoBar.vue |   3 +-
 .../Index/components/Consumables/MainComponent.vue |   8 +-
 .../components/Consumables/MoveLiquidArea.vue      |  50 +++---
 src/pages/Index/components/Consumables/Plate.vue   |  35 ++--
 .../Index/components/Consumables/SliderArea.vue    | 113 -------------
 .../Index/components/Consumables/SliderAreaEx.vue  |  30 ++--
 .../Index/components/Consumables/SpttingPlates.vue |  93 +++++++----
 .../Index/components/Running/SampleDisplay.vue     |   2 +-
 .../Index/components/TestTube/TestTubeRack.vue     |   2 +-
 19 files changed, 369 insertions(+), 267 deletions(-)
 create mode 100644 src/pages/Index/components/Consumables/BallGrid2.vue
 delete mode 100644 src/pages/Index/components/Consumables/SliderArea.vue

diff --git a/src/pages/Index/History.vue b/src/pages/Index/History.vue
index e5c11c4..5e848a6 100644
--- a/src/pages/Index/History.vue
+++ b/src/pages/Index/History.vue
@@ -132,14 +132,14 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
 import dayjs from 'dayjs'
-import { HistoryTable, HistoryWarn } from './components/index'
+import { HistoryTable, HistoryWarn } from './Components/index'
 import {
   getHistoryInfo,
   deleteHistoryInfo,
   searchHistoryInfo,
   printHistoryInfo,
 } from '../../services/Index/index'
-import HistoryMessage from './components/History/HistoryMessage.vue'
+import HistoryMessage from './Components/History/HistoryMessage.vue'
 import type { TableItem } from '../../types/Index'
 import { ElMessage } from 'element-plus'
 import WarnSvg from '@/assets/Index/History/warn.svg'
diff --git a/src/pages/Index/Index.vue b/src/pages/Index/Index.vue
index 2d1cec6..0eca806 100644
--- a/src/pages/Index/Index.vue
+++ b/src/pages/Index/Index.vue
@@ -82,7 +82,7 @@
 
 <script setup lang="ts">
 import { ref, onMounted, onBeforeUnmount } from 'vue';
-import { Time, InitWarn, LoadingModal } from './components/Consumables';
+import { Time, InitWarn, LoadingModal } from './Components/Consumables';
 import { startWork, pauseWork, continueWork, stopWork, getInitState, initDevice, saveMountedCardInfo, openBuzzer, closeBuzzer } from '../../services/index';
 import { CheckItem, User } from '../../types/Index';
 import { useConsumablesStore } from '../../store';
diff --git a/src/pages/Index/Regular.vue b/src/pages/Index/Regular.vue
index ad2c873..d063eac 100644
--- a/src/pages/Index/Regular.vue
+++ b/src/pages/Index/Regular.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script setup lang="ts">
-import TabBar from './components/Consumables/TabBar.vue'
+import TabBar from './Components/Consumables/TabBar.vue'
 import { createWebSocket } from '../../websocket/socket'
 import { getServerInfo } from '../../utils/getServerInfo'
 import { onMounted, onDeactivated } from 'vue';
diff --git a/src/pages/Index/Regular/Consumables.vue b/src/pages/Index/Regular/Consumables.vue
index 045167d..f477405 100644
--- a/src/pages/Index/Regular/Consumables.vue
+++ b/src/pages/Index/Regular/Consumables.vue
@@ -76,8 +76,8 @@
       </div>
       <div class="ball-area">
         <MainComponent
-          v-for="item in bufferLittles"
-          :key="item"
+          v-for="(item, idx) in bufferLittles"
+          :key="idx"
           class="ball-grid"
           :projectName="item.projShortName"
           :currentCount="item.num"
@@ -85,7 +85,7 @@
           :activatedBalls="item.num"
           :columns="5"
           gridWidth="240px"
-          gridHeight="235px"
+          gridHeight="240px"
           :activeColor="item.color"
         />
       </div>
@@ -94,7 +94,7 @@
 </template>
 
 <script setup lang="ts">
-import { MoveLiquidArea, SpttingPlates, MainComponent } from '../components'
+import { MoveLiquidArea, SpttingPlates, MainComponent } from '../Components'
 // import SliderAreaEx  from '../components/Consumables/SliderAreaEx.vue';
 // import DragAreaEx  from '../components/Consumables/DragAreaEx.vue';
 import { ref, onMounted, onActivated, onBeforeUnmount, watch } from 'vue'
@@ -257,10 +257,14 @@ const handleSensorState = (data: SensorStateMessage['data']) => {
 const handleConsumablesState = (data: ConsumablesStateMessage['data']) => {
   if (isAlreadyLoad.value && isHandleScan.value) {
     consumableStore.setConsumablesData(data)
-    moveLiquids.value = data.tips
-    plates.value = data.reactionPlateGroup as ReactionPlate[]
-    bufferLittles.value = data.littBottleGroup as BufferLittle[]
-    bufferBig.value = data.larBottleGroup as BottleGroup[]
+    if (!isDragging.value) {
+      moveLiquids.value = data.tips
+      plates.value = data.reactionPlateGroup as ReactionPlate[]
+      bufferLittles.value = data.littBottleGroup as BufferLittle[]
+      bufferBig.value = data.larBottleGroup as BottleGroup[]
+    } else {
+      console.log('正在拖动，不更新耗材')
+    }
   } else {
     return
   }
@@ -278,7 +282,11 @@ const updatePlatesAndBuffers = ({
   if (type === 'Plate' && plates.value && plates.value[index]) {
     plates.value[index].num = value
   }
-  if (type === 'LittleBuf' && bufferLittles.value && bufferLittles.value[index]) {
+  if (
+    type === 'LittleBuf' &&
+    bufferLittles.value &&
+    bufferLittles.value[index]
+  ) {
     bufferLittles.value[index].num = value
   }
   if (type === 'BigBuf' && bufferBig.value && bufferBig.value[index]) {
@@ -419,25 +427,34 @@ const handleIsUnload = () => {
   ]
   bufferBig.value = []
 }
+
+const isDragging = ref(false)
+
 const updateTipNum = async ({
   index,
   tipNum,
+  sync,
 }: {
   index: number
   tipNum: number
+  sync: boolean
 }) => {
-  // 新临时状态
-  tempTipNum.value[index] = tipNum
-  console.log('🚀 ~ updateTipNum ~ tempTipNum:', tempTipNum.value)
-  //调用接口
-  try {
-    if (deviceStore.status === 'IDLE') {
-      await updateTipsNum({ group: `TipG${index+1}`, num: tipNum })
+  if (deviceStore.status === 'IDLE') {
+    tempTipNum.value[index] = tipNum
+    //调用接口
+    if (sync) {
+      console.log(`🚀 ~ updateTipNum ~ order ${index + 1}, num ${tipNum}`, )
+      isDragging.value = false
+      try {
+        await updateTipsNum({ group: `TipG${index + 1}`, num: tipNum })
+      } catch (error) {
+        console.error('修改耗材数量失败:', error)
+      }
     } else {
-      ElMessage.error('设备正在工作，无法修改数值')
+      isDragging.value = true
     }
-  } catch (error) {
-    console.error('修改耗材数量失败:', error)
+  } else {
+    ElMessage.error('设备正在工作，无法修改数值')
   }
 }
 </script>
@@ -548,11 +565,12 @@ const updateTipNum = async ({
 
     .ball-area {
       display: flex;
-      justify-self: space-between;
       flex-wrap: wrap;
-
+      column-gap: 20px;
+      row-gap: 12px;
+      padding: 0 24px ;
       .ball-grid {
-        margin: 0 15px 5px 15px;
+        overflow: hidden;
       }
     }
   }
diff --git a/src/pages/Index/Regular/Running.vue b/src/pages/Index/Regular/Running.vue
index 30e66b8..16a9ee2 100644
--- a/src/pages/Index/Regular/Running.vue
+++ b/src/pages/Index/Regular/Running.vue
@@ -116,14 +116,14 @@
 import { ref, onMounted, onUnmounted, watch, onActivated, onDeactivated } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { useTestTubeStore, useConsumablesStore } from '../../../store'
-import { getBloodTypeLabel, processTubeSettings } from '../utils'
+import { getBloodTypeLabel, processTubeSettings } from '../Utils'
 import {
   SampleDisplay,
   PlateDisplay,
   LittleBufferDisplay,
   BallGrid,
   EmergencyResultDialog,
-} from '../components'
+} from '../Components'
 import { wasteArea, getTubeRackState } from '../../../services/index'
 import type { Subtank, TubeRackInfo } from '../../../types/Index'
 import { getRunningList } from '../../../services/Index/running/running'
diff --git a/src/pages/Index/Regular/TestTube.vue b/src/pages/Index/Regular/TestTube.vue
index 26bc4f0..74cf70d 100644
--- a/src/pages/Index/Regular/TestTube.vue
+++ b/src/pages/Index/Regular/TestTube.vue
@@ -27,7 +27,7 @@
 <script setup lang="ts">
 import { ref, onMounted, nextTick } from 'vue'
 import { useRouter } from 'vue-router'
-import TestTubeRack from '../components/TestTube/TestTubeRack.vue'
+import TestTubeRack from '../Components/TestTube/TestTubeRack.vue'
 import {
   addTestTube,
   getTestTube,
@@ -40,7 +40,7 @@ import type {
   TubeSetting,
 } from '../../../types/Index/index'
 import { ConsumableGroupBase } from '../../../websocket/socket'
-import ProjectSelector from '../components/Consumables/ProjectSelector.vue'
+import ProjectSelector from '../Components/Consumables/ProjectSelector.vue'
 import { useConsumablesStore, useTestTubeStore, useSettingTestTubeStore } from '../../../store'
 import { ElMessage } from 'element-plus'
 const router = useRouter()
diff --git a/src/pages/Index/Settings/Users.vue b/src/pages/Index/Settings/Users.vue
index 35b6a12..fcee0d8 100644
--- a/src/pages/Index/Settings/Users.vue
+++ b/src/pages/Index/Settings/Users.vue
@@ -50,7 +50,7 @@
 
 <script setup lang="ts">
 import type { User } from '../../../types/Index'
-import { DelWarn, DelMessage, AddUserModal, EnterPinModal } from '../components'
+import { DelWarn, DelMessage, AddUserModal, EnterPinModal } from '../Components'
 import { ref, onMounted, computed } from 'vue'
 import {
   getUserList,
diff --git a/src/pages/Index/TestTube/ChangeUser.vue b/src/pages/Index/TestTube/ChangeUser.vue
index c02db7a..c8bb394 100644
--- a/src/pages/Index/TestTube/ChangeUser.vue
+++ b/src/pages/Index/TestTube/ChangeUser.vue
@@ -89,7 +89,7 @@ import {
   getBloodTypeLabel,
   processTubeSettings,
   generateSampleBackground,
-} from '../utils'
+} from '../Utils'
 import { updateTubeConfig } from '../../../services'
 import { ElMessage } from 'element-plus'
 import { ConsumableGroupBase } from '../../../websocket/socket'
diff --git a/src/pages/Index/components/Consumables/BallGrid2.vue b/src/pages/Index/components/Consumables/BallGrid2.vue
new file mode 100644
index 0000000..e840184
--- /dev/null
+++ b/src/pages/Index/components/Consumables/BallGrid2.vue
@@ -0,0 +1,181 @@
+<template>
+  <div class="ball-area" :style="gridStyle">
+    <div class="ball-grid">
+      <div
+        v-for="(isActive, index) in ballStates"
+        :key="index"
+        :class="['ball', { active: isActive }]"
+        :style="ballStyle(index)"
+      >
+        <div class="inner-circle" :style="innerCircleStyle(index)"></div>
+      </div>
+    </div>
+    <!-- 拖动区 -->
+    <DragAreaEx
+      class="drag-area"
+      v-if="canUpdate"
+      :hTotal="columns"
+      :vTotal="total / columns"
+      :hVal="(total - activated) % columns"
+      :vVal="(total - activated) / columns"
+      @update:sliderValue="updateSliderVal"
+      @update:sliderEndValue="updateSliderEndVal"
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed, ref, watch, onMounted, onBeforeUnmount } from 'vue'
+import DragAreaEx from './DragAreaEx.vue'
+import { useDeviceStore } from '../../../../store/index'
+
+// 移液盘复用组件
+
+// Props 定义
+const props = defineProps({
+  order: {
+    type: Number,
+    default: 0,
+  },
+  total: {
+    type: Number,
+    required: true,
+  },
+  activated: {
+    type: Number,
+    default: 0,
+  },
+  width: {
+    type: String,
+    default: '300px',
+  },
+  height: {
+    type: String,
+    default: '300px',
+  },
+  columns: {
+    type: Number,
+    default: 10, // 每行的小球数量
+  },
+  activeColor: {
+    type: String,
+    default: '#4caf50', // 激活的小球颜色
+  },
+  innerColor: {
+    type: String,
+    default: 'lightgray', // 未激活时内部小球的颜色
+  },
+  canUpdate: {
+    type: Boolean,
+    default: false,
+  },
+})
+const { total, columns } = props
+const deviceStore = useDeviceStore()
+const isDragging = ref(false)
+const ballStates = ref(Array.from({ length: props.total }, () => false)) // 小球激活状态数组
+
+// 发出自定义事件通知父组件
+const emit = defineEmits(['update:TipNum'])
+
+const updateSliderVal = async (hVal, vVal) => {
+  if (deviceStore.status === 'IDLE') {
+    isDragging.value = true
+    const empty = parseInt(vVal) * columns + parseInt(hVal)
+    const activated = total - empty
+    for (let i = 0; i < total; i++) {
+      ballStates.value[i] = i < activated
+    }
+    emit('update:TipNum', activated, props.order, false)
+  } else {
+    ElMessage.error('设备正在工作，无法修改数值')
+  }
+}
+
+const updateSliderEndVal = async (hVal, vVal) => {
+  isDragging.value = false
+  if (deviceStore.status === 'IDLE') {
+    const empty = parseInt(vVal) * columns + parseInt(hVal)
+    const activated = total - empty
+    emit('update:TipNum', activated, props.order, true)
+  } else {
+    ElMessage.error('设备正在工作，无法修改数值')
+  }
+}
+// 计算网格样式
+const gridStyle = computed(() => ({
+  width: props.width,
+  height: props.height,
+}))
+
+// 计算小球样式
+const ballStyle = (index) => {
+  const ballSize = `${parseFloat(props.width) / props.columns - 2}px`
+  return {
+    width: ballSize,
+    height: ballSize,
+  }
+}
+
+// 动态计算内部小球的颜色变化
+const innerCircleStyle = (index) => {
+  const isActive = ballStates.value[index]
+  return {
+    width: '80%',
+    height: '80%',
+    backgroundColor: isActive ? props.activeColor : props.innerColor,
+    borderRadius: '50%',
+    transition: 'background-color 0.3s ease',
+  }
+}
+
+// 监听 `props.activated` 的变化，更新小球激活状态
+watch(
+  () => props.activated,
+  (newVal) => {
+    if (!isDragging.value) {
+      for (let i = 0; i < props.total; i++) {
+        ballStates.value[i] = i < newVal
+      }
+    }
+  },
+  { immediate: true }, // 在初次渲染时立即执行
+)
+</script>
+
+<style scoped lang="less">
+.ball-area {
+  position: relative;
+}
+.ball-grid {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-wrap: wrap-reverse;
+  flex-direction: row-reverse;
+  background-color: #666;
+  border-radius: 10px;
+  padding-right: 4px;
+}
+.drag-area {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.ball {
+  margin: 0 2px 2px 0;
+  background-color: #fff;
+  border-radius: 999px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: background-color 0.3s ease;
+}
+
+.inner-circle {
+  transition: background-color 0.3s ease;
+}
+</style>
diff --git a/src/pages/Index/components/Consumables/DragAreaEx.vue b/src/pages/Index/components/Consumables/DragAreaEx.vue
index df93773..7f27659 100644
--- a/src/pages/Index/components/Consumables/DragAreaEx.vue
+++ b/src/pages/Index/components/Consumables/DragAreaEx.vue
@@ -5,16 +5,16 @@
     @touchstart.prevent="handleStart"
   >
     <div class="slider-track" ref="sliderTrack">
-      <div
+      <!-- <div
         class="slider-fill"
-        :style="{ width: `${(hValue / hTotal) * 100}%`, height: `${(vValue / vTotal) * 100}%` }"
+        :style="{ width: `${(hValue / hTotalVal) * 100}%`, height: `${(vValue / vTotalVal) * 100}%` }"
       ></div>
-      <div
+      <span
         :style="{ visibility: `${isDragging ? 'visible' : 'hidden'}` }"
         class="slider-thumb"
       >
-        {{ `${hValue.toFixed()}, ${vValue.toFixed()}` }}
-      </div>
+        {{ `${hValue.toFixed()}; ${vValue.toFixed()}` }}
+      </span> -->
     </div>
   </div>
 </template>
@@ -41,7 +41,7 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['update:hVal','update:vVal'])
+const emit = defineEmits(['update:sliderValue','update:sliderEndValue'])
 
 const hValue = ref(props.hVal)
 const hTotalVal = ref(props.hTotal)
@@ -57,10 +57,10 @@ const sliderTrack = useTemplateRef('sliderTrack')
 
 watch(
   [() => props.hVal, () => props.vVal],
-  (newX, newY) => {
+  (newVal) => {
     if (!isDragging.value) {
-      hValue.value = newX
-      vValue.value = newY
+      hValue.value = newVal[0]
+      vValue.value = newVal[1]
     }
   },
 )
@@ -72,7 +72,7 @@ function handleStart(event) {
   const rect = sliderTrack.value.getBoundingClientRect()
   startXValue.value = (hValue.value / hTotalVal.value) * rect.width
   startYValue.value = (vValue.value / vTotalVal.value) * rect.height
-  
+
   isDragging.value = true
   document.addEventListener('mousemove', handleDrag)
   document.addEventListener('touchmove', handleDrag, { passive: false })
@@ -92,12 +92,12 @@ function handleDrag(event) {
 
   hValue.value = Math.min(1, Math.max(0, percentX)) * hTotalVal.value
   vValue.value = Math.min(1, Math.max(0, percentY)) * vTotalVal.value
-  // console.log(percent, sliderValue.value)
-  emit('update:hVal', hValue.value)
-  emit('update:vVal', vValue.value)
+
+  emit('update:sliderValue', hValue.value.toFixed(), vValue.value.toFixed())
 }
 
 function handleEnd() {
+  emit('update:sliderEndValue', hValue.value.toFixed(), vValue.value.toFixed())
   isDragging.value = false
   document.removeEventListener('mousemove', handleDrag)
   document.removeEventListener('touchmove', handleDrag)
@@ -108,16 +108,14 @@ function handleEnd() {
 
 <style scoped>
 .slider-container {
-  width: 300px;
-  height: 300px;
+  width: 100%;
+  height: 100%;
   touch-action: none; /* Prevents the browser's default panning behavior */
 }
 
 .slider-track {
   position: relative;
   height: 100%;
-  background-color: #ddd;
-  cursor: pointer;
 }
 
 .slider-fill {
@@ -131,8 +129,9 @@ function handleEnd() {
   top: 50%;
   left: 50%;
   transform: translateX(-50%) translateY(-50%);
-  font-size: 32px;
-  color: gray;
+  font-size: 36px;
+  color: #FFF;
+  -webkit-text-stroke: 2px #000;
 }
 
 .slider-thumb:active {
diff --git a/src/pages/Index/components/Consumables/InfoBar.vue b/src/pages/Index/components/Consumables/InfoBar.vue
index 6a193e0..ef0d809 100644
--- a/src/pages/Index/components/Consumables/InfoBar.vue
+++ b/src/pages/Index/components/Consumables/InfoBar.vue
@@ -39,9 +39,8 @@ const { projectName, currentCount, maxCount } = toRefs(props)
   justify-content: space-around;
   align-items: center;
   background-color: #808080;
-  border-radius: 5px;
   font-size: 32px;
-  height: 33px;
+  height: 32px;
 }
 
 .project-name {
diff --git a/src/pages/Index/components/Consumables/MainComponent.vue b/src/pages/Index/components/Consumables/MainComponent.vue
index f6f40e5..4151241 100644
--- a/src/pages/Index/components/Consumables/MainComponent.vue
+++ b/src/pages/Index/components/Consumables/MainComponent.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="combined-container">
     <!-- 小球组件 -->
-    <BallGrid :total="totalBalls" :activated="activatedBalls" :columns="columns" :width="gridWidth" :height="gridHeight"
+    <BallGrid2 :total="totalBalls" :activated="activatedBalls" :columns="columns" :width="gridWidth" :height="gridHeight"
       :activeColor="activeColor" />
 
     <!-- 项目信息组件 -->
@@ -10,7 +10,7 @@
 </template>
 
 <script setup>
-import BallGrid from './BallGrid.vue' // 引入小球组件
+import BallGrid2 from './BallGrid2.vue' // 引入小球组件
 import InfoBar from './InfoBar.vue' // 引入项目信息组件
 
 // Props 定义
@@ -62,8 +62,4 @@ const props = defineProps({
   background-color: #555555;
   border-radius: 10px;
 }
-
-.combined-container>* {
-  margin-bottom: 5px;
-}
 </style>
diff --git a/src/pages/Index/components/Consumables/MoveLiquidArea.vue b/src/pages/Index/components/Consumables/MoveLiquidArea.vue
index 5c3172a..3cab0e8 100644
--- a/src/pages/Index/components/Consumables/MoveLiquidArea.vue
+++ b/src/pages/Index/components/Consumables/MoveLiquidArea.vue
@@ -28,48 +28,51 @@
             class="controller"
             v-for="(controller, index) in tempTipNum"
             :key="index"
-            :class="{ 'selected-controller': currentPlate === index }"
+            :class="{ 'selected-controller': activeTab === index }"
             @click="changePlate(index)"
           >
-            <div class="controller-title">移液区{{ index + 1 }}</div>
+            <div class="controller-title">移液头区{{ index + 1 }}</div>
             <div class="controller-number">{{ controller }}/120</div>
           </div>
         </div>
         <div class="move-liquid-graph">
           <keep-alive>
-            <BallGrid
+            <BallGrid2
               v-if="activeTab === 0"
+              :order="1"
               :total="120"
               :activated="moveLiquids![activeTab]?.tipNum"
-              width="350px"
+              width="346px"
               height="310px"
               :columns="12"
-              @deactivate="handleDeactivate"
-              @syncActivatedCount="syncActivatedCount"
+              :canUpdate="true"
+              @update:TipNum="handleUpdateTipNum"
             />
           </keep-alive>
           <keep-alive>
-            <BallGrid
+            <BallGrid2
               v-if="activeTab === 1"
+              :order="2"
               :total="120"
               :activated="moveLiquids![activeTab].tipNum"
-              width="350px"
+              width="346px"
               height="310px"
               :columns="12"
-              @deactivate="handleDeactivate"
-              @syncActivatedCount="syncActivatedCount"
+              :canUpdate="true"
+              @update:TipNum="handleUpdateTipNum"
             />
           </keep-alive>
           <keep-alive>
-            <BallGrid
+            <BallGrid2
               v-if="activeTab === 2"
+              :order="3"
               :total="120"
               :activated="moveLiquids![activeTab]?.tipNum"
-              width="350px"
+              width="346px"
               height="310px"
               :columns="12"
-              @deactivate="handleDeactivate"
-              @syncActivatedCount="syncActivatedCount"
+              :canUpdate="true"
+              @update:TipNum="handleUpdateTipNum"
             />
           </keep-alive>
         </div>
@@ -161,6 +164,7 @@
 
 <script setup lang="ts">
 import BallGrid from './BallGrid.vue'
+import BallGrid2 from './BallGrid2.vue'
 import IdCardInfo from './IdCardInfo.vue'
 import { ref, watch, reactive } from 'vue'
 import { useRouter } from 'vue-router'
@@ -207,6 +211,7 @@ const handleIsLoad = () => {
 const handleIsUnload = () => {
   emit('unloadConsumables')
 }
+// 激活的移液盘 索引
 const activeTab = ref(0)
 // 废料区状态判断
 const wasteStatus = ref(props.wasteStatus)
@@ -263,24 +268,14 @@ watch(
   { immediate: true, deep: true },
 )
 // 发出更新事件，通知父组件新的 remainingCount 值
-const handleDeactivate = (remainingCount: number) => {
-  emit('updateTipNum', { index: activeTab.value, tipNum: remainingCount })
-}
-
-const syncActivatedCount = (count: number) => {
-  if (props.moveLiquids && props.moveLiquids[activeTab.value]) {
-    props.moveLiquids[activeTab.value].tipNum = count // 更新当前 tab 的 tipNum
-  }
+const handleUpdateTipNum = (remainingCount: number, order: number, sync: boolean) => {
+  emit('updateTipNum', { index: order - 1, tipNum: remainingCount, sync })
 }
 
-// 当前移液盘索引
-const currentPlate = ref(0)
-
 // 切换移液盘
 const changePlate = (index: number) => {
   console.log('切换到', index)
   activeTab.value = index
-  currentPlate.value = index
 }
 </script>
 
@@ -359,10 +354,11 @@ const changePlate = (index: number) => {
         }
 
         .controller-number {
-          font-size: 32px;
+          font-size: 30px;
           font-weight: 600;
           border-radius: 10px;
           border: 3px solid #54a4e8;
+          padding: 0 4px;
         }
       }
 
diff --git a/src/pages/Index/components/Consumables/Plate.vue b/src/pages/Index/components/Consumables/Plate.vue
index 39d2e90..7c638a3 100644
--- a/src/pages/Index/components/Consumables/Plate.vue
+++ b/src/pages/Index/components/Consumables/Plate.vue
@@ -32,19 +32,18 @@ defineProps({
 <style lang="less" scoped>
 .colored-bar-container {
   display: flex;
-  justify-content: center;
-  align-items: center;
   width: 100%;
-  height: 100px;
+  height: 80px;
 }
 
 .colored-bar {
   display: flex;
+  flex-direction: row-reverse;
   justify-content: space-between;
+  gap: 0.5px;
   width: 355px;
-  height: 100%;
+  // height: 100%;
   background-color: #f0f0f0;
-  border-radius: 10px;
   overflow: hidden;
   position: relative;
 
@@ -52,20 +51,20 @@ defineProps({
     flex: 1;
     position: relative;
     height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    // display: flex;
+    // align-items: center;
+    // justify-content: center;
 
-    &::after {
-      content: "";
-      width: 1px;
-      height: 80%;
-      position: absolute;
-      right: 0;
-      top: 40%;
-      transform: translateY(-50%);
-      background-color: black;
-    }
+    // &::after {
+    //   content: "";
+    //   width: 1px;
+    //   height: 80%;
+    //   position: absolute;
+    //   right: 0;
+    //   top: 40%;
+    //   transform: translateY(-50%);
+    //   background-color: black;
+    // }
   }
 
   .colored {
diff --git a/src/pages/Index/components/Consumables/SliderArea.vue b/src/pages/Index/components/Consumables/SliderArea.vue
deleted file mode 100644
index ff28fc6..0000000
--- a/src/pages/Index/components/Consumables/SliderArea.vue
+++ /dev/null
@@ -1,113 +0,0 @@
-<template>
-  <div
-    class="slider-container"
-    @mousedown="handleStart"
-    @touchstart.prevent="handleStart"
-  >
-    <div class="slider-track" ref="sliderTrack">
-      <div class="slider-fill" :style="{ width: `${sliderValue}%` }"></div>
-      <div
-        :style="{ visibility: `${isDragging ? 'visible' : 'hidden'}` }"
-        class="slider-thumb"
-      >
-        {{ sliderValue.toFixed() }}
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted, onUnmounted, watch, useTemplateRef } from 'vue'
-
-const props = defineProps({
-  modelValue: {
-    type: Number,
-    default: 50,
-  },
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-const sliderValue = ref(props.modelValue)
-const isDragging = ref(false)
-const startX = ref(0)
-const startValue = ref(0)
-//   const sliderThumb = ref(null);
-const sliderTrack = useTemplateRef('sliderTrack')
-
-watch(
-  () => props.modelValue,
-  (newValue) => {
-    if (!isDragging.value) {
-      sliderValue.value = newValue
-    }
-  },
-)
-
-function handleStart(event) {
-  const touchEvent = event.touches ? event.touches[0] : event
-  startX.value = touchEvent.clientX
-  const rect = sliderTrack.value.getBoundingClientRect()
-  startValue.value = (sliderValue.value * rect.width) / 100
-
-  isDragging.value = true
-  document.addEventListener('mousemove', handleDrag)
-  document.addEventListener('touchmove', handleDrag, { passive: false })
-  document.addEventListener('mouseup', handleEnd)
-  document.addEventListener('touchend', handleEnd)
-}
-
-function handleDrag(event) {
-  if (!isDragging.value) return
-
-  const touchEvent = event.touches ? event.touches[0] : event
-  const deltaX = touchEvent.clientX - startX.value
-  const rect = sliderTrack.value.getBoundingClientRect()
-  let percent = ((deltaX + startValue.value) / rect.width) * 100
-
-  // Limit the value between 0 and 100
-  sliderValue.value = Math.min(100, Math.max(0, percent))
-  emit('update:modelValue', sliderValue.value)
-}
-
-function handleEnd() {
-  isDragging.value = false
-  document.removeEventListener('mousemove', handleDrag)
-  document.removeEventListener('touchmove', handleDrag)
-  document.removeEventListener('mouseup', handleEnd)
-  document.removeEventListener('touchend', handleEnd)
-}
-</script>
-
-<style scoped>
-.slider-container {
-  width: 300px;
-  touch-action: none; /* Prevents the browser's default panning behavior */
-}
-
-.slider-track {
-  position: relative;
-  height: 4rem;
-  background-color: #ddd;
-  cursor: pointer;
-}
-
-.slider-fill {
-  position: absolute;
-  height: 100%;
-  background-color: #4caf50;
-}
-
-.slider-thumb {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translateX(-50%) translateY(-50%);
-  font-size: 32px;
-  color: gray;
-}
-
-.slider-thumb:active {
-  cursor: grabbing;
-}
-</style>
diff --git a/src/pages/Index/components/Consumables/SliderAreaEx.vue b/src/pages/Index/components/Consumables/SliderAreaEx.vue
index fa1bca1..04fe999 100644
--- a/src/pages/Index/components/Consumables/SliderAreaEx.vue
+++ b/src/pages/Index/components/Consumables/SliderAreaEx.vue
@@ -5,7 +5,7 @@
     @touchstart.prevent="handleStart"
   >
     <div class="slider-track" ref="sliderTrack">
-      <div
+      <!-- <div
         class="slider-fill"
         :style="{
           width: `${(sliderValue / totalVal) * 100}%`,
@@ -17,7 +17,7 @@
         class="slider-thumb"
       >
         {{ sliderValue.toFixed() }}
-      </div>
+      </div> -->
     </div>
   </div>
 </template>
@@ -36,8 +36,8 @@ const props = defineProps({
   },
   order: {
     type: Number,
-    default: 0
-  }
+    default: 0,
+  },
 })
 
 const sliderValue = ref(props.currValue)
@@ -47,7 +47,7 @@ const startX = ref(0)
 const startValue = ref(0)
 const sliderTrack = useTemplateRef('sliderTrack')
 
-const emit = defineEmits(['update:sliderValue'])
+const emit = defineEmits(['update:sliderValue', 'update:sliderEndValue'])
 
 watch(
   () => props.currValue,
@@ -62,7 +62,8 @@ function handleStart(event) {
   const touchEvent = event.touches ? event.touches[0] : event
   startX.value = touchEvent.clientX
   const rect = sliderTrack.value.getBoundingClientRect()
-  startValue.value = (sliderValue.value / totalVal.value) * rect.width
+  startValue.value =
+    rect.width - (sliderValue.value / totalVal.value) * rect.width
   // console.log(sliderValue.value, totalVal.value)
   // console.log(startValue.value, rect.width)
   isDragging.value = true
@@ -80,14 +81,14 @@ function handleDrag(event) {
   const rect = sliderTrack.value.getBoundingClientRect()
   let percent = (deltaX + startValue.value) / rect.width
 
-  sliderValue.value = Math.min(1, Math.max(0, percent)) * totalVal.value
+  sliderValue.value =
+    totalVal.value - Math.min(1, Math.max(0, percent)) * totalVal.value
   // console.log(percent, sliderValue.value)
-  // emit('update:modelValue', sliderValue.value)
-
+  emit('update:sliderValue', sliderValue.value.toFixed(), props.order)
 }
 
 function handleEnd() {
-  emit('update:sliderValue', sliderValue.value, props.order)
+  emit('update:sliderEndValue', sliderValue.value.toFixed(), props.order)
   isDragging.value = false
   document.removeEventListener('mousemove', handleDrag)
   document.removeEventListener('touchmove', handleDrag)
@@ -110,6 +111,7 @@ function handleEnd() {
 
 .slider-fill {
   position: absolute;
+  right: 0;
   height: 100%;
   background-color: rgba(255, 255, 255, 0.2);
 }
@@ -119,12 +121,10 @@ function handleEnd() {
   top: 50%;
   left: 50%;
   transform: translateX(-50%) translateY(-50%);
-  font-size: 40px;
+  font-size: 36px;
   font-weight: 600;
-  color: #FFF;
+  color: #fff;
+  -webkit-text-stroke: 2px #000;
 }
 
-.slider-thumb:active {
-  cursor: grabbing;
-}
 </style>
diff --git a/src/pages/Index/components/Consumables/SpttingPlates.vue b/src/pages/Index/components/Consumables/SpttingPlates.vue
index 3e13081..a71a426 100644
--- a/src/pages/Index/components/Consumables/SpttingPlates.vue
+++ b/src/pages/Index/components/Consumables/SpttingPlates.vue
@@ -15,36 +15,41 @@
     <div class="sptting-plates">
       <div class="card" v-for="i in 6" :key="i">
         <div class="plate-area">
+          <div class="plate-bottom" v-if="plates.length > 0">
+            <span></span>
+            <span class="project-name">{{ platesValue[i - 1]?.projShortName }}</span>
+            <span class="project-number">{{ platesValue[i - 1]?.num }}/25</span>
+          </div>
+          <div class="plate-bottom" v-else>
+            <span></span>
+            <span class="project-name"></span>
+            <span class="project-number"></span>
+          </div>
+
           <!-- 当 plates 数组长度不为 0 时，渲染 Plate 组件，否则显示默认的图片 -->
           <div v-if="plates.length > 0" class="plate">
-            <Plate :value="plates[i - 1].num" :color="plates[i - 1].color" />
+            <Plate
+              :value="parseInt(platesValue[i - 1].num)"
+              :color="platesValue[i - 1].color"
+            />
             <SliderAreaEx
-              v-if="plates[i - 1].num > 0"
+              v-if="platesValue[i - 1].num > 0"
               class="slider-area"
-              :currValue="plates[i - 1].num"
+              :currValue="parseInt(platesValue[i - 1].num)"
               :totalValue="totalVal"
               :order="i"
               @update:sliderValue="updateSliderVal"
+              @update:sliderEndValue="updateSliderEndVal"
             />
           </div>
           <div v-else class="close-circle">
             <img
               src="@/assets/Index/stop.svg"
               alt=""
-              style="width: 40px; height: 40px; margin-bottom: 20px"
+              style="width: 40px; height: 40px"
             />
           </div>
         </div>
-        <div class="plate-bottom" v-if="plates.length > 0">
-          <span></span>
-          <span class="project-name">{{ plates[i - 1]?.projShortName }}</span>
-          <span class="project-number">{{ plates[i - 1]?.num }}/25</span>
-        </div>
-        <div class="plate-bottom" v-else>
-          <span></span>
-          <span class="project-name"></span>
-          <span class="project-number"></span>
-        </div>
       </div>
     </div>
     <!-- 修改数字弹框 -->
@@ -54,7 +59,7 @@
 
 <script setup>
 import Plate from './Plate.vue'
-import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { ref, watch, onMounted, onBeforeUnmount } from 'vue'
 import SliderAreaEx from './SliderAreaEx.vue'
 import { eventBus } from '../../../../eventBus'
 // import ChangeNum from './ChangeNum.vue';
@@ -73,22 +78,44 @@ const props = defineProps({
   },
 })
 
+const platesValue = ref(props.plates)
 const totalVal = ref(25)
+const isDragging = ref(false)
 const deviceStore = useDeviceStore()
 
+watch(
+  () => props.plates,
+  (newValue) => {
+    if (!isDragging.value) {
+      platesValue.value = newValue
+    }
+  },
+)
 const updateSliderVal = async (plate, order) => {
-  // eventBus.emit('confirm', { type: 'Plate', value: plate, index })
+  if (deviceStore.status === 'IDLE') {
+    isDragging.value = true
+    // eventBus.emit('confirm', {
+    //   type: 'Plate',
+    //   value: plate,
+    //   index: order - 1,
+    // })
+    platesValue.value[order - 1].num = plate
+  } else {
+    ElMessage.error('设备正在工作，无法修改数值')
+  }
+}
+
+const updateSliderEndVal = async (plate, order) => {
+  isDragging.value = false
   if (deviceStore.status === 'IDLE') {
     try {
-      const newVal = plate.toFixed()
-      const res = await updateConsumables({group: `CG${order}`, num: newVal})
+      const res = await updateConsumables({ group: `CG${order}`, num: plate })
       if (res.success) {
         // eventBus.emit('confirm', {
         //   type: 'Plate',
-        //   value: newVal,
+        //   value: plate,
         //   index: order - 1,
         // })
-        // isOpen.value = false
       }
     } catch (error) {
       console.error('更新失败:', error)
@@ -169,7 +196,6 @@ const updateSliderVal = async (plate, order) => {
 
   // 反应板区域
   .sptting-plates {
-    margin: 0 auto;
     display: flex;
     gap: 10px; // 统一间距
     flex-direction: column;
@@ -178,32 +204,37 @@ const updateSliderVal = async (plate, order) => {
       width: 355px;
       height: 100px;
       padding: 0px;
-      display: grid;
-      place-content: center;
+
       border: 1px solid black;
-      position: relative;
       border-radius: 10px;
+      overflow: hidden;
+      position: relative;
       background-color: #f6f6f6;
 
       .plate-area {
         width: 100%;
         height: 100%;
         display: flex;
-        justify-content: space-between;
+        flex-direction: column;
         align-items: center;
         position: relative;
 
+        .close-circle {
+          flex: 1 1 auto;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+
         .slider-area {
           position: absolute;
           left: 0;
           top: 0;
           right: 0;
-          bottom: 30px;
+          bottom: 0;
         }
         .plate {
-          width: 100%;
-          height: 76px;
-          margin-bottom: 32px;
+          flex: 1 1 auto;
         }
       }
 
@@ -211,10 +242,6 @@ const updateSliderVal = async (plate, order) => {
         width: 100%;
         height: 32px;
         background-color: #808080;
-        border-bottom-left-radius: 10px;
-        border-bottom-right-radius: 10px;
-        position: absolute;
-        bottom: 0;
         display: flex;
         justify-content: space-around;
         color: white;
diff --git a/src/pages/Index/components/Running/SampleDisplay.vue b/src/pages/Index/components/Running/SampleDisplay.vue
index 0964ca2..d8aefb9 100644
--- a/src/pages/Index/components/Running/SampleDisplay.vue
+++ b/src/pages/Index/components/Running/SampleDisplay.vue
@@ -41,7 +41,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { generateSampleBackground, getBloodTypeLabel } from '../../utils'
+import { generateSampleBackground, getBloodTypeLabel } from '../../Utils'
 import type { TubeHolderStateMessage } from '../../../../websocket/socket'
 defineProps<{
   samples: TubeHolderStateMessage['data']['tubes'] // 接收的样本数据
diff --git a/src/pages/Index/components/TestTube/TestTubeRack.vue b/src/pages/Index/components/TestTube/TestTubeRack.vue
index 05a6d1d..faa58de 100644
--- a/src/pages/Index/components/TestTube/TestTubeRack.vue
+++ b/src/pages/Index/components/TestTube/TestTubeRack.vue
@@ -92,7 +92,7 @@ import {
   getBloodTypeLabel,
   processTubeSettings,
   generateSampleBackground,
-} from '../../utils'
+} from '../../Utils'
 import { useTestTubeStore } from '../../../../store'
 import { updateTubeActivationStatus } from '../../../../services/index'
 import { ConsumableGroupBase } from '../../../../websocket/socket'