|
|
|
@ -7,14 +7,13 @@ |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 急诊信息 --> |
|
|
|
<div class="emergency-info" :class="{ 'disable-section': !isEmergencyEnabled }"> |
|
|
|
<!-- <div class="emergency-info" :class="{ 'disable-section': !isEmergencyEnabled }"> |
|
|
|
<div class="tab-content"> |
|
|
|
<div class="tab-form" :class="{ isOpacity: !isEmergencyEnabled }"> |
|
|
|
<div class="line-code"> |
|
|
|
<!-- 急诊位的表单 --> |
|
|
|
<label>样本条形码</label> |
|
|
|
<input type="text" placeholder="请输入样本条形码信息" @focus="showKeyboard('sampleBarcode')" |
|
|
|
:value="emergencyPosition.sampleBarcode" :disabled="!isEmergencyEnabled" readonly /> |
|
|
|
:value="emergencyPosition.sampleBarcode"/> |
|
|
|
</div> |
|
|
|
<div class="id-info"> |
|
|
|
<label>用户ID</label> |
|
|
|
@ -22,12 +21,27 @@ |
|
|
|
:disabled="!isEmergencyEnabled" readonly /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="active-button"> |
|
|
|
<button @click="toggleEmergency" :class="isEmergencyEnabled ? 'close-button' : 'open-button'"> |
|
|
|
{{ isEmergencyEnabled ? '关闭急诊位' : '开启急诊位' }} |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> --> |
|
|
|
<div class="emergency-main"> |
|
|
|
<el-row> |
|
|
|
<el-col :span="5"> |
|
|
|
<label>样本条形码</label> |
|
|
|
</el-col> |
|
|
|
<el-col :span="12" style="padding-left:20px"> |
|
|
|
<input type="text" placeholder="请输入样本条形码信息" @focus="showKeyboard('sampleBarcode')" style="width:400px" |
|
|
|
:value="emergencyPosition.sampleBarcode"/> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
<el-row> |
|
|
|
<el-col :span="5"> |
|
|
|
<label>用户ID</label> |
|
|
|
</el-col> |
|
|
|
<el-col :span="12" style="padding-left:20px"> |
|
|
|
<input type="text" placeholder="请输入用户ID信息" @focus="showKeyboard('userid')" :value="emergencyPosition.userid" style="width:400px" |
|
|
|
:disabled="!isEmergencyEnabled" readonly /> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
</div> |
|
|
|
<hr style="height: 1px; border: none;" /> |
|
|
|
<!-- 急诊项目 --> |
|
|
|
@ -37,12 +51,7 @@ |
|
|
|
<span>项目选择</span> |
|
|
|
</div> |
|
|
|
<div class="project-list"> |
|
|
|
<button @click="selectProject('自动')" :disabled="!isEmergencyEnabled" :class="[ |
|
|
|
isEmergencyEnabled ? 'project-auto' : 'disabled-item', |
|
|
|
{ 'active-item': projectName === '自动' && isEmergencyEnabled }, |
|
|
|
]"> |
|
|
|
自动 |
|
|
|
</button> |
|
|
|
|
|
|
|
<div v-for="(item, index) in projects" :key="index" @click="selectProject(item)" :class="[ |
|
|
|
isEmergencyEnabled ? 'project-item' : 'disabled-project-item', |
|
|
|
{ 'active-project-item': emergencyPosition.projIds.includes(item.projId) && isEmergencyEnabled }, |
|
|
|
@ -59,12 +68,6 @@ |
|
|
|
<span>血液类型</span> |
|
|
|
</div> |
|
|
|
<div class="type-list"> |
|
|
|
<button @click="selectBloodType('自动')" :class="[ |
|
|
|
isEmergencyEnabled ? 'project-auto' : 'disabled-item', |
|
|
|
{ 'active-item': bloodType === '自动' && isEmergencyEnabled }, |
|
|
|
]" :disabled="!isEmergencyEnabled"> |
|
|
|
自动 |
|
|
|
</button> |
|
|
|
<button v-for="(item, index) in bloodTypes" :key="index" @click="selectBloodType(item)" |
|
|
|
:disabled="!isEmergencyEnabled" :class="getTypeClass(item)"> |
|
|
|
{{ item.projectName }} |
|
|
|
@ -75,9 +78,9 @@ |
|
|
|
</div> |
|
|
|
<hr style="height: 1px; border: none;" /> |
|
|
|
<!-- 急诊控制 --> |
|
|
|
<div class="emergency-controller" :class="{ isOpacity: !isEmergencyEnabled }"> |
|
|
|
<button class="cancel-button" :disabled="!isEmergencyEnabled" @click="cancelHandle">取消</button> |
|
|
|
<button class="ok-button" :disabled="!isEmergencyEnabled" @click="confirmHandle">确定</button> |
|
|
|
<div class="emergency-controller" :class="{ isOpacity: !isEmergencyEnabled }" style="padding:50px 0"> |
|
|
|
<el-button class="cancel-button" @click="cancelHandle">取消</el-button> |
|
|
|
<el-button v-if="showSaveBtn" class="ok-button" :disabled="!isEmergencyEnabled" @click="confirmHandle">确定</el-button> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 键盘 --> |
|
|
|
@ -123,7 +126,7 @@ const consumableStore = useConsumablesStore(); |
|
|
|
const emergencyStore = useEmergencyStore(); |
|
|
|
const deviceStore = useDeviceStore(); |
|
|
|
// 急诊位开启/关闭状态 |
|
|
|
const isEmergencyEnabled = ref(false); |
|
|
|
const isEmergencyEnabled = ref(true);//设置表单是否可输入 |
|
|
|
|
|
|
|
// 模拟项目列表数据 |
|
|
|
const projects = ref<ReactionPlate[]>([]); |
|
|
|
@ -132,6 +135,8 @@ onMounted(() => { |
|
|
|
if (consumableStore.plates.length > 0) { |
|
|
|
projects.value = consumableStore.plates as ReactionPlate[]; |
|
|
|
} |
|
|
|
//过滤projId为null的数据 |
|
|
|
projects.value = projects.value.filter(item => item.projId) |
|
|
|
}) |
|
|
|
|
|
|
|
const bloodTypes = ref([ |
|
|
|
@ -178,6 +183,10 @@ const tubeRackState = ref<TubeHolderStateMessage['data']>({ |
|
|
|
const handleTubeHolderStateMessage = (data: TubeHolderStateMessage['data']) => { |
|
|
|
tubeRackState.value = data |
|
|
|
} |
|
|
|
|
|
|
|
//急诊位可操作状态 |
|
|
|
const emergencyStateList = ["EMPTY", "TO_BE_PROCESSED", "PROCESS_COMPLETE", "ERROR"] |
|
|
|
let showSaveBtn = ref<Boolean>(false) |
|
|
|
onMounted(() => { |
|
|
|
ws.connect() |
|
|
|
ws.subscribe<TubeHolderStateMessage>('TubeHolderState', handleTubeHolderStateMessage) |
|
|
|
@ -185,6 +194,15 @@ onMounted(() => { |
|
|
|
onActivated(() => { |
|
|
|
ws.connect() |
|
|
|
ws.subscribe<TubeHolderStateMessage>('TubeHolderState', handleTubeHolderStateMessage) |
|
|
|
const { emergencyInfo } = emergencyStore.$state |
|
|
|
console.log('emergencyInfo---', emergencyInfo) |
|
|
|
if(emergencyInfo && emergencyInfo.state){ |
|
|
|
const {state, sampleBarcode} = emergencyInfo |
|
|
|
currentInputValue.value = sampleBarcode |
|
|
|
if(emergencyStateList.includes(state)){ |
|
|
|
showSaveBtn.value = true |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
onDeactivated(() => { |
|
|
|
ws.disconnect() |
|
|
|
@ -211,17 +229,30 @@ const getProjectInfo = (projIds: number[]) => { |
|
|
|
// 确认请求 |
|
|
|
const confirmHandle = async () => { |
|
|
|
//只有设备暂停状态才能添加急诊 |
|
|
|
if (deviceStore.status !== 'PAUSE') { |
|
|
|
ElMessage.error('设备未暂停，无法添加急诊'); |
|
|
|
// if (deviceStore.status !== 'PAUSE') { |
|
|
|
// ElMessage.error('设备未暂停，无法添加急诊'); |
|
|
|
// return |
|
|
|
// } |
|
|
|
const emergencyInfo = emergencyPosition.value; |
|
|
|
if(!emergencyInfo.sampleBarcode){ |
|
|
|
ElMessage.error('请输入样本条形码'); |
|
|
|
return |
|
|
|
} |
|
|
|
if(!emergencyInfo.userid){ |
|
|
|
ElMessage.error('请输入用户ID'); |
|
|
|
return |
|
|
|
} |
|
|
|
if (emergencyInfo.projIds.length === 0) { |
|
|
|
ElMessage.error('请选择项目'); |
|
|
|
return |
|
|
|
} |
|
|
|
if(!emergencyInfo.bloodType){ |
|
|
|
ElMessage.error('请选择血液类型'); |
|
|
|
return; |
|
|
|
} |
|
|
|
const res = await insertEmergency(emergencyPosition.value); |
|
|
|
if (res.success) { |
|
|
|
const emergencyInfo = emergencyPosition.value; |
|
|
|
if (emergencyInfo.projIds.length === 0) { |
|
|
|
ElMessage.error('请选择项目'); |
|
|
|
return |
|
|
|
} |
|
|
|
|
|
|
|
// 构造急诊位数据 |
|
|
|
const emergencyData: EmergencyPosStateMessage['data']['tube'] = { |
|
|
|
pos: 1, |
|
|
|
@ -331,7 +362,13 @@ const currentInputField = ref<'sampleBarcode' | 'userid' | ''>('') |
|
|
|
// 显示键盘 |
|
|
|
const showKeyboard = (field: 'sampleBarcode' | 'userid') => { |
|
|
|
// 清空当前输入值，避免累加 |
|
|
|
currentInputValue.value = '' |
|
|
|
// currentInputValue.value = '' |
|
|
|
if(field == 'sampleBarcode'){ |
|
|
|
currentInputValue.value = emergencyPosition.value.sampleBarcode |
|
|
|
} |
|
|
|
if(field == 'userid'){ |
|
|
|
currentInputValue.value = emergencyPosition.value.userid |
|
|
|
} |
|
|
|
currentInputField.value = field |
|
|
|
keyboardVisible.value = true |
|
|
|
} |
|
|
|
@ -339,10 +376,9 @@ const showKeyboard = (field: 'sampleBarcode' | 'userid') => { |
|
|
|
// 处理键盘输入 |
|
|
|
const handleKeyboardInput = (value: string) => { |
|
|
|
if (!currentInputField.value) return |
|
|
|
|
|
|
|
console.log('value----', value) |
|
|
|
// 更新当前输入值 |
|
|
|
currentInputValue.value = value |
|
|
|
|
|
|
|
// 更新对应字段的值 |
|
|
|
if (currentInputField.value === 'sampleBarcode') { |
|
|
|
emergencyPosition.value.sampleBarcode = value |
|
|
|
@ -378,7 +414,7 @@ onUnmounted(() => { |
|
|
|
}) |
|
|
|
|
|
|
|
const showTubeSelector = ref(false) |
|
|
|
const selectedTubePos = ref<number | null>(null) |
|
|
|
const selectedTubePos = ref<number | null>(1) |
|
|
|
|
|
|
|
// 检查试管是否被占用 |
|
|
|
const isTubeOccupied = (pos: number) => { |
|
|
|
@ -398,6 +434,30 @@ const selectTube = (pos: number) => { |
|
|
|
|
|
|
|
|
|
|
|
<style lang="less" scoped> |
|
|
|
|
|
|
|
input { |
|
|
|
margin-bottom: 20px; |
|
|
|
padding: 8px 5px; |
|
|
|
border: 1px solid #ccc; |
|
|
|
border-radius: 4px; |
|
|
|
font-size: 32px; |
|
|
|
transition: box-shadow 0.2s ease; |
|
|
|
border-radius: 10px; |
|
|
|
&::placeholder { |
|
|
|
font-size: 32px; |
|
|
|
font-weight: 100; |
|
|
|
color: #d8d8d8; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
label { |
|
|
|
margin-bottom: 8px; |
|
|
|
font-size: 32px; |
|
|
|
font-weight: 700; |
|
|
|
text-align: left; |
|
|
|
} |
|
|
|
|
|
|
|
#add-emergency-container { |
|
|
|
margin: 0; |
|
|
|
padding: 0; |
|
|
|
@ -527,7 +587,7 @@ const selectTube = (pos: number) => { |
|
|
|
width: 80%; |
|
|
|
font-size: 32px; |
|
|
|
transition: box-shadow 0.2s ease; |
|
|
|
|
|
|
|
border-radius: 10px; |
|
|
|
&::placeholder { |
|
|
|
font-size: 32px; |
|
|
|
font-weight: 100; |
|
|
|
@ -844,11 +904,15 @@ const selectTube = (pos: number) => { |
|
|
|
display: flex; |
|
|
|
margin-top: 20px; |
|
|
|
|
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
.cancel-button, |
|
|
|
.ok-button { |
|
|
|
width: 565px; |
|
|
|
height: 120px; |
|
|
|
border-radius: 60px; |
|
|
|
width: 365px; |
|
|
|
height: 100px; |
|
|
|
border-radius: 30px; |
|
|
|
font-size: 40px; |
|
|
|
font-weight: 400; |
|
|
|
margin: 0 10px; |
|
|
|
@ -953,4 +1017,8 @@ const selectTube = (pos: number) => { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.emergency-main{ |
|
|
|
margin-top:40px; |
|
|
|
margin-left:80px |
|
|
|
} |
|
|
|
</style> |
LiLongLong
7 months ago