From d061a8f44f5566ca8c52b51f5d055f8e085cfae4 Mon Sep 17 00:00:00 2001
From: zhangjiming <zhangjiming@costrip.cn>
Date: Fri, 10 Jan 2025 13:37:28 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AF=95=E7=AE=A1=E7=BC=96=E8=BE=91=E6=82=A3?=
 =?UTF-8?q?=E8=80=85=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Index/Index.vue                          |   2 +-
 src/pages/Index/Regular/TestTube.vue               |  32 +-
 src/pages/Index/TestTube/ChangeUser.vue            | 435 ---------------------
 src/pages/Index/TestTube/TubeUserId.vue            | 374 ++++++++++++++++++
 .../Index/components/TestTube/TestTubeRack.vue     |   4 +-
 src/pages/Index/components/TestTube/Tube.vue       |  80 ++--
 src/router/router.ts                               |   2 +-
 src/services/Index/testTube.ts                     |   4 +-
 src/store/modules/testTube.ts                      |  39 +-
 src/types/Index/TestTube.ts                        |  24 +-
 10 files changed, 471 insertions(+), 525 deletions(-)
 delete mode 100644 src/pages/Index/TestTube/ChangeUser.vue
 create mode 100644 src/pages/Index/TestTube/TubeUserId.vue

diff --git a/src/pages/Index/Index.vue b/src/pages/Index/Index.vue
index 0eca806..69416d8 100644
--- a/src/pages/Index/Index.vue
+++ b/src/pages/Index/Index.vue
@@ -33,7 +33,7 @@
     <!-- 主内容区域 -->
     <main class="main-content">
       <router-view v-slot="{ Component }">
-        <keep-alive>
+        <keep-alive :exclude="['TubeUserId']">
           <component :is="Component" />
         </keep-alive>
       </router-view>
diff --git a/src/pages/Index/Regular/TestTube.vue b/src/pages/Index/Regular/TestTube.vue
index afc507d..cc9c64f 100644
--- a/src/pages/Index/Regular/TestTube.vue
+++ b/src/pages/Index/Regular/TestTube.vue
@@ -14,6 +14,7 @@
           :bloodTypes="bloodTypes"
           @delete:rack="deleteTubeRack"
           @active:rack="handleActivateChange"
+          @patient:edit="handleChangeUser"
           @clickTubeItem="updateTubeSettings"
         />
       </div>
@@ -63,7 +64,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted, nextTick, computed } from 'vue'
+import { ref, onMounted, nextTick, computed, onActivated } from 'vue'
 import * as R from 'ramda'
 import { useRouter } from 'vue-router'
 import TestTubeRack from '../Components/TestTube/TestTubeRack.vue'
@@ -87,15 +88,13 @@ import { ElMessage } from 'element-plus'
 const router = useRouter()
 
 const testTubeStore = useTestTubeStore()
-const settingTestTubeStore = useSettingTestTubeStore()
+// const settingTestTubeStore = useSettingTestTubeStore()
 const consumables = useConsumablesStore()
 
 const tubeRacks = ref([]) //<DataItem[]>
 const bloodTypes = ref([])
 const loading = ref(false) // 控制加载状态
 
-const selectedUUID = ref('') //<string>
-
 const selectedProjIds = ref([]) // number[]
 const selectedBloodTypeKey = ref('WHOLE_BLOOD')
 
@@ -105,6 +104,10 @@ onMounted(() => {
   getBloodTypeData()
 })
 
+onActivated(() => {
+  // console.log('TestTube activated')
+})
+
 const onClickTubeItem = (rackIdx, tubeIdx) => {
   console.log(rackIdx, tubeIdx)
 }
@@ -224,15 +227,18 @@ const getTubeData = async () => {
 }
 
 //编辑患者信息
-const handleChangeUser = async (uuid) => {
-  selectedUUID.value = uuid
+const handleChangeUser = async (index) => {
+  const rack = tubeRacks.value[index]
+  if (rack.state !== 'INACTIVE') {
+    ElMessage({
+      message: '试管架处理激活状态，不可修改',
+      type: 'error',
+    })
+    return
+  }
+  testTubeStore.setTubeRack(rack)
+  testTubeStore.setBloodTypes(bloodTypes.value)
 
-  const selectedTube = tubeRacks.value.find(
-    (t) => t.uuid === selectedUUID.value,
-  )
-  if (!selectedTube) return
-  testTubeStore.setTubeInfo(selectedTube)
-  await updateTubeSettings()
   router.push({
     path: '/index/change-user',
   })
@@ -332,7 +338,7 @@ const updateTubeSettings = async (rackIdx, tubeIdx) => {
     try {
       const response = await updateTubeConfig({
         uuid: rack.uuid,
-        setting: updSetting,
+        setting: [updSetting],
       })
       if (response.success) {
         tubeRacks.value = tubeRacks.value.map((rack, idx) => {
diff --git a/src/pages/Index/TestTube/ChangeUser.vue b/src/pages/Index/TestTube/ChangeUser.vue
deleted file mode 100644
index c8bb394..0000000
--- a/src/pages/Index/TestTube/ChangeUser.vue
+++ /dev/null
@@ -1,435 +0,0 @@
-<template>
-  <div id="changeUser-container" :key="refreshKey">
-    <!-- 顶部导航 -->
-    <div class="header">
-      <div class="header-left">
-        <img src="@/assets/Index/left.svg" alt="返回" @click.stop="goBack" />
-        <span class="title">患者信息</span>
-        <div class="divider"></div>
-        <span class="tube-type">试管类型({{ tubeType }})</span>
-      </div>
-    </div>
-
-    <!-- 主要内容区域 -->
-    <div class="content">
-      <!-- 上半部分样本 -->
-      <div class="sample-section" v-for="box in boxes" :key="box.id">
-        <!-- 左侧标题栏 -->
-        <div class="section-labels">
-          <div class="label-column">
-            <div class="label-item">
-              <span class="label">序号</span>
-            </div>
-            <div class="label-item">
-              <span class="label">试管信息</span>
-            </div>
-            <div class="label-item">
-              <span class="label">样本条形码</span>
-            </div>
-            <div class="label-item">
-              <span class="label">用户ID</span>
-            </div>
-          </div>
-        </div>
-
-        <!-- 右侧样本展示 -->
-        <div class="samples-grid">
-          <div v-for="item in box.samples" :key="item.tubeIndex" class="sample-item"
-            :class="{ 'selected': selectedSampleId === item.tubeIndex }" @click="selectSample(item.tubeIndex)">
-            <div class="sample-content">
-              <!-- 序号 -->
-              <div class="item-index">{{ item.tubeIndex + 1 }}</div>
-
-              <!-- 试管圆圈 -->
-              <div class="sample-circle"
-                :style="generateSampleBackground(item.projId!.filter(proj => proj !== null) as ReactionPlate[])">
-                <span class="blood-type">{{ item.bloodType }}</span>
-              </div>
-
-              <!-- 输入框组 -->
-              <div class="inputs">
-                <input class="input-field" v-model="item.sampleBarcode" placeholder="条形码"
-                  @focus="showKeyboard('barcode', item)" readonly />
-                <input class="input-field" v-model="item.userid" placeholder="用户ID"
-                  @focus="showKeyboard('userid', item)" readonly />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- 底部按钮 -->
-    <div class="footer">
-      <button class="btn cancel" @click="goBack">取消</button>
-      <button class="btn confirm" @click="confirmChange">确定</button>
-    </div>
-    <!-- 键盘组件 -->
-    <transition name="slide-up">
-      <div class="keyboard-container">
-        <SimpleKeyboard v-if="keyboardVisible" :input="currentInputValue" @onChange="handleKeyboardInput"
-          @onKeyPress="handleKeyPress" />
-      </div>
-    </transition>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { onMounted, ref, watchEffect, onUnmounted, onActivated } from 'vue'
-import { useRouter } from 'vue-router'
-import { useTestTubeStore, useConsumablesStore, useSettingTestTubeStore } from '../../../store'
-import SimpleKeyboard from '../../../components/SimpleKeyboard.vue'
-import type {
-  DataItem,
-  ReactionPlate,
-  TubeRack,
-  handleTube,
-} from '../../../types/Index'
-import {
-  getBloodTypeLabel,
-  processTubeSettings,
-  generateSampleBackground,
-} from '../Utils'
-import { updateTubeConfig } from '../../../services'
-import { ElMessage } from 'element-plus'
-import { ConsumableGroupBase } from '../../../websocket/socket'
-const testTubeStore = useTestTubeStore()
-const consumableStore = useConsumablesStore()
-const router = useRouter()
-const tubeInfo = ref<DataItem>({} as DataItem) //试管架信息
-const processedTubeInfo = ref<handleTube>({} as handleTube) //经过清洗的试管架信息
-const tubeSettings = ref<TubeRack[]>([]) //获取到的试管信息
-const tubeType = ref<string>(testTubeStore.type || '自动') //导航栏的试管类型
-const plates = ref<ConsumableGroupBase[]>(consumableStore.plates) //反应板信息
-const selectedSampleId = ref<number | null>(null) //选中的试管
-const keyboardVisible = ref(false)
-const currentInputValue = ref('')
-const currentInput = ref<{
-  type: 'barcode' | 'userid',
-  item: any
-}>({
-  type: 'barcode',
-  item: null
-})
-const settingTestTubeStore = useSettingTestTubeStore()
-const refreshKey = ref(0)
-const modifiedTubes = ref(new Map<number, any>())
-onMounted(() => {
-  tubeInfo.value = testTubeStore.tubeInfo
-  console.log("🚀 ~ onMounted ~ tubeInfo.value:", tubeInfo.value)
-  tubeSettings.value = processTubeSettings(
-    tubeInfo.value.tubeSettings,
-    plates.value,
-    getBloodTypeLabel,
-  )
-  processedTubeInfo.value = {
-    ...tubeInfo.value,
-    tubeSettings: tubeSettings.value,
-  }
-})
-onActivated(() => {
-  tubeInfo.value = testTubeStore.tubeInfo
-  console.log("🚀 ~ onActivated ~ tubeInfo.value:", tubeInfo.value)
-  tubeSettings.value = processTubeSettings(
-    tubeInfo.value.tubeSettings,
-    plates.value,
-    getBloodTypeLabel,
-  )
-  processedTubeInfo.value = {
-    ...tubeInfo.value,
-    tubeSettings: tubeSettings.value,
-  }
-})
-//返回试管页面
-const goBack = () => {
-  router.push('/index/regular/test-tube')
-}
-// 选择样本的函数
-const selectSample = (id: number) => {
-  if (selectedSampleId.value === id) {
-    selectedSampleId.value = null
-  } else {
-    selectedSampleId.value = id
-  }
-}
-const boxes = ref([
-  {
-    id: 1,
-    samples: [] as TubeRack[],
-  },
-  {
-    id: 2,
-    samples: [] as TubeRack[],
-  },
-])
-watchEffect(() => {
-  boxes.value.forEach((item) => {
-    if (item.id === 1) {
-      item.samples = tubeSettings.value.slice(0, 5)
-    } else {
-      item.samples = tubeSettings.value.slice(5, 10)
-    }
-  })
-})
-//确认事件
-const confirmChange = async () => {
-  const modifiedSettings = Array.from(modifiedTubes.value.values())
-
-  if (modifiedSettings.length > 0) {
-    try {
-      const updatePromises = modifiedSettings.map(setting =>
-        updateTubeConfig({
-          uuid: processedTubeInfo.value.uuid,
-          setting
-        })
-      )
-      const results = await Promise.all(updatePromises)
-
-      const allSuccess = results.every(res => res && res.success)
-
-      if (allSuccess) {
-        ElMessage.success('所有修改已保存')
-        goBack()
-      } else {
-        ElMessage.error('部分修改保存失败')
-      }
-    } catch (error) {
-      console.error('保存修改失败:', error)
-      ElMessage.error('保存失败')
-    }
-  } else {
-    ElMessage.warning('没有需要保存的修改')
-  }
-}
-
-// 显示键盘
-const showKeyboard = (type: 'barcode' | 'userid', item: any) => {
-  keyboardVisible.value = true
-  currentInput.value = { type, item }
-  currentInputValue.value = type === 'barcode' ? item.sampleBarcode : item.userid
-}
-
-// 处理键盘输入
-const handleKeyboardInput = (input: string) => {
-  if (!currentInput.value.item) return
-
-  if (currentInput.value.type === 'barcode') {
-    currentInput.value.item.sampleBarcode = input
-  } else {
-    currentInput.value.item.userid = input
-  }
-
-  currentInputValue.value = input
-
-  modifiedTubes.value.set(currentInput.value.item.tubeIndex, {
-    tubeIndex: currentInput.value.item.tubeIndex,
-    userid: currentInput.value.item.userid,
-    sampleBarcode: currentInput.value.item.sampleBarcode,
-    projId: currentInput.value.item.projId?.map((p: ReactionPlate) => p.projId) || [],
-    bloodType: currentInput.value.item.bloodType,
-  })
-
-  settingTestTubeStore.updateTubeSetting(tubeInfo.value.uuid, {
-    tubeIndex: currentInput.value.item.tubeIndex,
-    [currentInput.value.type === 'userid' ? 'userid' : 'sampleBarcode']: input
-  })
-}
-
-// 处理键盘按键
-const handleKeyPress = (button: string) => {
-  if (button === '{enter}') {
-    keyboardVisible.value = false
-    currentInputValue.value = ''
-  }
-}
-
-// 在组件卸载时清理
-onUnmounted(() => {
-  modifiedTubes.value.clear()
-})
-</script>
-
-<style lang="less" scoped>
-#changeUser-container {
-  width: 100%;
-  height: 95vh;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  background-color: #f5f7fa;
-  overflow: hidden;
-
-  .header {
-    height: 80px;
-    background-color: #fff;
-    padding: 0 20px;
-    display: flex;
-    align-items: center;
-
-    .header-left {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-
-      img {
-        width: 24px;
-        height: 24px;
-        cursor: pointer;
-      }
-
-      .title {
-        font-size: 28px;
-        color: #303133;
-      }
-
-      .tube-type {
-        font-size: 24px;
-        color: #606266;
-      }
-    }
-  }
-
-  .content {
-    padding: 16px;
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-    overflow: hidden;
-
-    .sample-section {
-      background-color: #fff;
-      border-radius: 8px;
-      padding: 20px;
-      display: flex;
-      height: 380px;
-
-      .section-labels {
-        width: 120px;
-        display: flex;
-        flex-direction: column;
-        padding-top: 20px;
-
-        .label-column {
-          .label-item {
-            margin-bottom: 16px;
-
-            .label {
-              font-size: 24px;
-              color: #606266;
-            }
-          }
-        }
-      }
-
-      .samples-grid {
-        flex: 1;
-        display: grid;
-        grid-template-columns: repeat(5, 1fr);
-        gap: 12px;
-
-        .sample-item {
-          background-color: #f5f7fa;
-          border-radius: 4px;
-          padding: 12px;
-
-          .sample-content {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-
-            .item-index {
-              font-size: 22px;
-              color: #606266;
-              margin-bottom: 8px;
-            }
-
-            .sample-circle {
-              width: 60px;
-              height: 60px;
-              border-radius: 50%;
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              margin: 8px 0;
-
-              .blood-type {
-                font-size: 20px;
-                color: #fff;
-              }
-            }
-
-            .inputs {
-              width: 100%;
-              margin-top: 12px;
-
-              .input-field {
-                width: 100%;
-                height: 36px;
-                border: 1px solid #dcdfe6;
-                border-radius: 4px;
-                margin-bottom: 8px;
-                font-size: 20px;
-                text-align: center;
-                background-color: #fff;
-
-                &::placeholder {
-                  color: #c0c4cc;
-                  font-size: 18px;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .footer {
-    height: 80px;
-    padding: 10px 20px;
-    background-color: #fff;
-    display: flex;
-    justify-content: center;
-    gap: 16px;
-
-    .btn {
-      width: 320px;
-      height: 60px;
-      border-radius: 30px;
-      font-size: 24px;
-      font-weight: normal;
-
-      &.cancel {
-        background-color: #f5f7fa;
-        color: #606266;
-        border: 1px solid #dcdfe6;
-      }
-
-      &.confirm {
-        background-color: #409eff;
-        color: #fff;
-      }
-    }
-  }
-
-  .keyboard-container {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 20vh;
-    background-color: #fff;
-  }
-
-  // 键盘动画
-  .slide-up-enter-active,
-  .slide-up-leave-active {
-    transition: transform 0.3s ease;
-  }
-
-  .slide-up-enter-from,
-  .slide-up-leave-to {
-    transform: translateY(100%);
-  }
-}
-</style>
diff --git a/src/pages/Index/TestTube/TubeUserId.vue b/src/pages/Index/TestTube/TubeUserId.vue
new file mode 100644
index 0000000..8a45f1c
--- /dev/null
+++ b/src/pages/Index/TestTube/TubeUserId.vue
@@ -0,0 +1,374 @@
+<template>
+  <div id="changeUser-container">
+    <!-- 顶部导航 -->
+    <div class="header">
+      <div class="header-left" @click.stop="goBack">
+        <img src="@/assets/Index/left.svg" alt="返回" />
+        <span class="title">患者信息</span>
+      </div>
+    </div>
+
+    <!-- 主要内容区域 -->
+    <div class="content">
+      <div class="sample-section" v-for="(group, idx) in tubeGroups" :key="idx">
+        <!-- 左侧标题栏 -->
+        <div class="section-labels">
+          <div class="label-column">
+            <div class="label-item">
+              <span class="label">条形码</span>
+            </div>
+            <div class="label-item">
+              <span class="label">用户ID</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 右侧样本展示 -->
+        <div class="samples-grid">
+          <div class="sample-item" v-for="item in group" :key="item.tubeIndex">
+            <div class="sample-content">
+              <!-- 序号 -->
+              <div class="item-index">{{ item.tubeIndex + 1 }}</div>
+
+              <!-- 试管圆圈 -->
+              <div class="tube-circle">
+                <Tube
+                  :tube="item"
+                  :index="item.tubeIndex"
+                  :projects="projectsAvailable"
+                  :bloodTypes="tubeStore.bloodTypes"
+                  :showNum="false"
+                  @clickTubeItem=""
+                />
+              </div>
+
+              <!-- 输入框组 -->
+              <div class="inputs">
+                <input
+                  class="input-field"
+                  :class="{ onFocus: isFocused('barcode', item) }"
+                  v-model="item.sampleBarcode"
+                  placeholder="条形码"
+                  @focus="showKeyboard('barcode', item)"
+                  readonly
+                />
+                <input
+                  class="input-field"
+                  :class="{ onFocus: isFocused('userid', item) }"
+                  v-model="item.userid"
+                  placeholder="用户ID"
+                  @focus="showKeyboard('userid', item)"
+                  readonly
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 底部按钮 -->
+    <div class="footer">
+      <button class="btn cancel" @click="goBack">取消</button>
+      <button class="btn confirm" @click="confirmChange">确定</button>
+    </div>
+    <!-- 键盘组件 -->
+    <transition name="slide-up">
+      <div class="keyboard-container">
+        <SimpleKeyboard
+          v-if="keyboardVisible"
+          :input="currentInputValue"
+          @onChange="handleKeyboardInput"
+          @onKeyPress="handleKeyPress"
+        />
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script setup>
+import { computed, onActivated, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import * as R from 'ramda'
+import { useTestTubeStore, useConsumablesStore } from '../../../store'
+import SimpleKeyboard from '../../../components/SimpleKeyboard.vue'
+import Tube from '../Components/TestTube/Tube.vue'
+import { updateTubeConfig } from '../../../services'
+import { ElMessage } from 'element-plus'
+
+const router = useRouter()
+
+const consumables = useConsumablesStore()
+const tubeStore = useTestTubeStore()
+
+defineOptions({
+  name: 'TubeUserId',
+})
+const tubeGroups = ref([
+  R.clone(tubeStore.tubeRack.tubeSettings.slice(0, 5)),
+  R.clone(tubeStore.tubeRack.tubeSettings.slice(5, 10)),
+])
+
+const projectsAvailable = computed(() => {
+  const group = R.groupBy((p) => p.projName, consumables.plates)
+  const pNames = R.keys(group)
+
+  const projArr = pNames.map((n) =>
+    R.reduce(
+      (acc, curr) => {
+        return { ...curr, num: acc.num + curr.num }
+      },
+      { num: 0 },
+      group[n],
+    ),
+  )
+
+  return projArr
+})
+
+const keyboardVisible = ref(false)
+const currentInputValue = ref('')
+const currentInput = ref({
+  type: 'barcode',
+  item: null,
+})
+
+const isFocused = (type, item) => {
+  if (
+    currentInput.value.item &&
+    item.tubeIndex === currentInput.value.item.tubeIndex &&
+    type === currentInput.value.type
+  ) {
+    return true
+  }
+  return false
+}
+
+//返回试管页面
+const goBack = () => {
+  //router.push('/index/regular/test-tube')
+  router.back()
+}
+
+//确认事件
+const confirmChange = async () => {
+  const settings = R.flatten(tubeGroups.value)
+  const res = await updateTubeConfig({
+    uuid: tubeStore.tubeRack.uuid,
+    setting: settings,
+  })
+  if (res.success) {
+    tubeStore.tubeRack.tubeSettings = settings
+    goBack()
+  } else {
+    ElMessage.error('更新失败')
+  }
+}
+
+// 显示键盘
+const showKeyboard = (type, item) => {
+  keyboardVisible.value = true
+  currentInput.value = { type, item }
+  currentInputValue.value =
+    type === 'barcode' ? item.sampleBarcode : item.userid
+}
+
+// 处理键盘输入
+const handleKeyboardInput = (input) => {
+  if (!currentInput.value.item) return
+
+  const groupIdx = currentInput.value.item.tubeIndex < 5 ? 0 : 1
+  const idxOffset = groupIdx === 1 ? 5 : 0
+  const tubeIdx = currentInput.value.item.tubeIndex - idxOffset
+  if (currentInput.value.type === 'barcode') {
+    currentInput.value.item.sampleBarcode = input
+    tubeGroups.value[groupIdx][tubeIdx].sampleBarcode = input
+  } else {
+    currentInput.value.item.userid = input
+    tubeGroups.value[groupIdx][tubeIdx].userid = input
+  }
+  currentInputValue.value = input
+  // console.log(tubeGroups.value[groupIdx])
+}
+
+// 处理键盘按键
+const handleKeyPress = (button) => {
+  if (button === '{enter}') {
+    keyboardVisible.value = false
+    currentInputValue.value = ''
+  }
+}
+</script>
+
+<style lang="less" scoped>
+#changeUser-container {
+  width: 100%;
+  height: 95vh;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow: hidden;
+
+  .header {
+    height: 80px;
+    background-color: #fff;
+    padding: 0 20px;
+    display: flex;
+    align-items: center;
+
+    .header-left {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+
+      img {
+        width: 24px;
+        height: 24px;
+        cursor: pointer;
+      }
+
+      .title {
+        font-size: 28px;
+        color: #303133;
+      }
+    }
+  }
+
+  .content {
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    overflow: hidden;
+
+    .sample-section {
+      border-radius: 8px;
+      padding: 20px;
+      display: flex;
+      // height: 380px;
+
+      .section-labels {
+        width: 100px;
+        display: flex;
+        flex-direction: column-reverse;
+        padding-bottom: 16px;
+
+        .label-column {
+          > * {
+            box-sizing: border-box;
+          }
+          .label-item {
+            margin-bottom: 16px;
+            .label {
+              font-size: 24px;
+              font-weight: 600;
+              color: #606266;
+            }
+          }
+        }
+      }
+
+      .samples-grid {
+        flex: 1;
+        display: grid;
+        grid-template-columns: repeat(5, 1fr);
+        gap: 12px;
+
+        .sample-item {
+          // background-color: #f5f7fa;
+          border-radius: 12px;
+          padding: 12px;
+
+          .sample-content {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+
+            .item-index {
+              font-size: 22px;
+              color: #333;
+              margin-bottom: 8px;
+            }
+            .tube-circle {
+              height: 80px;
+            }
+
+            .inputs {
+              width: 100%;
+              margin-top: 24px;
+
+              .input-field {
+                &.onFocus {
+                  border: solid 2px #333;
+                }
+                width: 100%;
+                height: 36px;
+                border: 1px solid #aaa;
+                border-radius: 4px;
+                margin-bottom: 14px;
+                font-size: 20px;
+                font-weight: 600;
+                text-align: center;
+                background-color: #fff;
+
+                &::placeholder {
+                  color: #c0c4cc;
+                  font-size: 18px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .footer {
+    height: 80px;
+    padding: 10px 20px;
+    background-color: #fff;
+    display: flex;
+    justify-content: center;
+    gap: 16px;
+
+    .btn {
+      width: 320px;
+      height: 60px;
+      border-radius: 30px;
+      font-size: 24px;
+      font-weight: normal;
+
+      &.cancel {
+        background-color: #f5f7fa;
+        color: #606266;
+        border: 1px solid #dcdfe6;
+      }
+
+      &.confirm {
+        background-color: #409eff;
+        color: #fff;
+      }
+    }
+  }
+
+  .keyboard-container {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 20vh;
+    background-color: #fff;
+  }
+
+  // 键盘动画
+  .slide-up-enter-active,
+  .slide-up-leave-active {
+    transition: transform 0.3s ease;
+  }
+
+  .slide-up-enter-from,
+  .slide-up-leave-to {
+    transform: translateY(100%);
+  }
+}
+</style>
diff --git a/src/pages/Index/components/TestTube/TestTubeRack.vue b/src/pages/Index/components/TestTube/TestTubeRack.vue
index d6a8056..28e1100 100644
--- a/src/pages/Index/components/TestTube/TestTubeRack.vue
+++ b/src/pages/Index/components/TestTube/TestTubeRack.vue
@@ -30,7 +30,7 @@
     :class="{ active: tubeRack.state !== 'INACTIVE' }"
   >
     <div class="rack-op rack-edit">修改试管架</div>
-    <div class="rack-op">编辑患者信息</div>
+    <div class="rack-op" @click="$emit('patient:edit', index)">编辑患者信息</div>
     <div class="rack-op rack-del" @click="$emit('delete:rack', index)">
       <img
         v-if="tubeRack.state === 'INACTIVE'"
@@ -46,7 +46,7 @@
 <script setup>
 import Tube from './Tube.vue'
 const props = defineProps(['tubeRack', 'index', 'projects', 'bloodTypes'])
-const emit = defineEmits(['delete:rack', 'active:rack', 'clickTubeItem'])
+const emit = defineEmits(['delete:rack', 'active:rack','patient:edit', 'clickTubeItem'])
 
 const onClickTubeItem = (idx) => {
   emit('clickTubeItem', props.index, idx)
diff --git a/src/pages/Index/components/TestTube/Tube.vue b/src/pages/Index/components/TestTube/Tube.vue
index b95a394..861cf78 100644
--- a/src/pages/Index/components/TestTube/Tube.vue
+++ b/src/pages/Index/components/TestTube/Tube.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="tube-item" @click="$emit('clickTubeItem', index)">
-    <span class="order">{{ index + 1 }}</span>
+    <span v-if="!!showNum" class="order">{{ index + 1 }}</span>
     <div class="tube-circle" v-if="tube.projId.length === 0">
       <span class="add-symbol">+</span>
     </div>
@@ -21,7 +21,7 @@
       </div>
     </div>
 
-    <span class="user-id">{{ tube.userid || '-' }}</span>
+    <span v-if="showNum" class="user-id">{{ tube.userid || '-' }}</span>
   </div>
 </template>
 
@@ -34,7 +34,21 @@ tube: {userid,projId:number[],bloodType}
 projects: [{projId,projName,color}]
 bloodTypes: [{key,name}]
 */
-const props = defineProps(['tube', 'index', 'projects', 'bloodTypes'])
+const props = defineProps({
+  tube: {
+    type: Object,
+  },
+  index: {
+    type: Number,
+  },
+  projects: {
+    type: Array,
+  },
+  bloodTypes: {
+    type: Array,
+  },
+  showNum: { type: Boolean, default: true },
+})
 const emit = defineEmits(['clickTubeItem'])
 
 const projIdMap = computed(() => {
@@ -108,37 +122,43 @@ function drawPieChart(ctx, data) {
 </script>
 
 <style scoped lang="less">
-.tube-circle {
-  width: 72px;
-  height: 72px;
-  border-radius: 999px;
-  border: solid 1px gray;
+.tube-item {
+  display: flex;
+  flex-direction: column;
+  .tube-circle {
+    width: 72px;
+    height: 72px;
+    border-radius: 999px;
+    border: solid 1px gray;
 
-  background-color: #fff;
+    background-color: #fff;
 
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  .add-symbol {
-    color: black;
-    font-size: 20px;
-  }
-}
-.tube-project {
-  position: relative;
-  .text-layer {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translateX(-50%) translateY(-55%);
     display: flex;
-    flex-direction: column;
-    > * {
-      height: 22px;
-      text-wrap: nowrap;
+    justify-content: center;
+    align-items: center;
+    .add-symbol {
+      color: black;
+      font-size: 20px;
     }
-    .blood-text {
-      color: #fff;
+    margin-bottom: 6px;
+  }
+  .tube-project {
+    position: relative;
+    .text-layer {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translateX(-50%) translateY(-55%);
+      display: flex;
+      flex-direction: column;
+      color: red;
+      > * {
+        height: 22px;
+        text-wrap: nowrap;
+      }
+      .blood-text {
+        color: #fff;
+      }
     }
   }
 }
diff --git a/src/router/router.ts b/src/router/router.ts
index e9e47a5..d45dd59 100644
--- a/src/router/router.ts
+++ b/src/router/router.ts
@@ -74,7 +74,7 @@ const routes = [
       },
       {
         path: 'change-user', //编辑患者页面
-        component: () => import('@/pages/Index/TestTube/ChangeUser.vue'),
+        component: () => import('@/pages/Index/TestTube/TubeUserId.vue'),
       },
     ],
   },
diff --git a/src/services/Index/testTube.ts b/src/services/Index/testTube.ts
index 8dbdb2a..b8ee13a 100644
--- a/src/services/Index/testTube.ts
+++ b/src/services/Index/testTube.ts
@@ -8,7 +8,7 @@ import type { TubeActivationStatus, TubeSetting } from '../../types/Index'
   },
   {
     "key": "SERUM_OR_PLASMA",
-    "name": "血清或者血浆"
+    "name": "血清/血浆"
   }
 ]
 */
@@ -99,7 +99,7 @@ export const updateTubeActivationStatus = async (
 // 更新试管配置
 export const updateTubeConfig = async (config: {
   uuid: string
-  setting: TubeSetting
+  setting: TubeSetting[]
 }) => {
   console.log('🚀 ~ updateTubeConfig ~ config:', config)
   try {
diff --git a/src/store/modules/testTube.ts b/src/store/modules/testTube.ts
index 08683e4..a8b0ebd 100644
--- a/src/store/modules/testTube.ts
+++ b/src/store/modules/testTube.ts
@@ -1,36 +1,33 @@
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
-import type { DataItem } from '../../types/Index'
+import type { TestTubeRack } from '../../types/Index'
 export const useTestTubeStore = defineStore(
   'testTube',
   () => {
-    const tubeInfo = ref<DataItem>({} as DataItem)
-    const type = ref<string>('')
-    const projectSettings = ref<Record<string, string>>({})
-    const setTubeInfo = (info: DataItem) => {
-      tubeInfo.value = info
+    const tubeRack = ref<TestTubeRack>({} as TestTubeRack)
+    const bloodTypes = ref<{ key: string; name: string }[]>([])
+    // const projectSettings = ref<Record<string, string>>({})
+    const setTubeRack = (rack: TestTubeRack) => {
+      tubeRack.value = rack
     }
-    const setTypeInfo = (typeInfo: string) => {
-      type.value = typeInfo
+    const setBloodTypes = (types: { key: string; name: string }[]) => {
+      bloodTypes.value = types
     }
     // 设置指定试管架的项目设置
-    const setProjectSetting = (uuid: string, setting: string) => {
-      projectSettings.value[uuid] = setting
-    }
+    // const setProjectSetting = (uuid: string, setting: string) => {
+    //   projectSettings.value[uuid] = setting
+    // }
     // 获取指定试管架的项目设置，默认返回 '自动'
-    const getProjectSetting = (uuid: string): string => {
-      return projectSettings.value[uuid] || '自动'
-    }
+    // const getProjectSetting = (uuid: string): string => {
+    //   return projectSettings.value[uuid] || '自动'
+    // }
 
     // const bloodTypes = ref([])
     return {
-      type,
-      tubeInfo,
-      setTubeInfo,
-      setTypeInfo,
-      projectSettings,
-      setProjectSetting,
-      getProjectSetting,
+      tubeRack,
+      setTubeRack,
+      bloodTypes,
+      setBloodTypes,
     }
   },
   {
diff --git a/src/types/Index/TestTube.ts b/src/types/Index/TestTube.ts
index de13c45..ae0f917 100644
--- a/src/types/Index/TestTube.ts
+++ b/src/types/Index/TestTube.ts
@@ -5,7 +5,7 @@ export interface TubeSetting {
   userid: string
   sampleBarcode: string
   projId: number[]
-  bloodType: string
+  bloodType: 'WHOLE_BLOOD' | 'SERUM_OR_PLASMA'
 }
 // 更新后的类型定义
 export interface Project {
@@ -17,23 +17,15 @@ export interface Project {
   reactionTemperature: number
   color: string
 }
-export interface DataItem {
+export interface TestTubeRack {
   uuid: string
-  active: boolean
+  state: 'INACTIVE' | 'ACTIVE' | 'LOCKED'
   tubeSettings: TubeSetting[]
-  lock: boolean
-  // selectedSampleIds?: Array<number>
 }
 
-export interface handleTube {
-  uuid: string
-  active: boolean
-  tubeSettings: TubeRack[]
-  lock: boolean
-}
 export interface ApiResponse {
   dataType: string
-  data: DataItem[]
+  data: TestTubeRack[]
   timestamp: number
   success: boolean
 }
@@ -50,14 +42,6 @@ export interface TubeActivationStatus {
   active: boolean
 }
 
-export interface Setting {
-  tubeIndex: number
-  userid: string
-  sampleBarcode: string
-  projId: number[]
-  bloodType: string
-}
-
 export interface UpdateTubeSettingsResponse {
   success: boolean
   message?: string