|
|
|
@ -29,7 +29,7 @@ const receiveMessage = (data: Socket.cmdData) => { |
|
|
|
} |
|
|
|
|
|
|
|
const form = ref<{ |
|
|
|
tubeNum: number |
|
|
|
tubeNum: string |
|
|
|
solutionId: number |
|
|
|
volume: number |
|
|
|
}>({}) |
|
|
|
@ -47,10 +47,10 @@ const rules = { |
|
|
|
], |
|
|
|
} |
|
|
|
|
|
|
|
const addList = ref<{ tubeNum: number, solutionList: { solutionId: number, volume: number }[] }[]>([]) |
|
|
|
const addList = ref<{ tubeNum: string, solutionList: { solutionId: number, volume: number }[] }[]>([]) |
|
|
|
|
|
|
|
const mergeAddList = () => { |
|
|
|
const map = new Map<number, { solutionId: number, volume: number }[]>() |
|
|
|
const map = new Map<string, { solutionId: number, volume: number }[]>() |
|
|
|
|
|
|
|
addList.value.forEach((item) => { |
|
|
|
if (!map.has(item.tubeNum)) { |
|
|
|
@ -74,7 +74,7 @@ const addHandle = async () => { |
|
|
|
return |
|
|
|
} |
|
|
|
addList.value!.push({ |
|
|
|
tubeNum: form.value.tubeNum, |
|
|
|
tubeNum: form.value.tubeNum.toString(), |
|
|
|
solutionList: [{ |
|
|
|
solutionId: form.value.solutionId, |
|
|
|
volume: form.value.volume, |
|
|
|
@ -113,6 +113,24 @@ const getSols = async () => { |
|
|
|
const res = await getSolsList() |
|
|
|
solsList.value = res.list |
|
|
|
} |
|
|
|
|
|
|
|
const mousedownHandle = async (e: Event) => { |
|
|
|
let event |
|
|
|
if ('touches' in e) { |
|
|
|
event = (e.touches as TouchList)[0] |
|
|
|
} |
|
|
|
else { |
|
|
|
event = e |
|
|
|
} |
|
|
|
if (event.target!.classList!.contains('tube-inner')) { |
|
|
|
const num = event.target!.getAttribute('index') |
|
|
|
activeTube.value[Number(num) - 1] = !activeTube.value[Number(num) - 1] |
|
|
|
form.value.tubeNum = activeTube.value.map((item, index) => index + 1).filter(item => activeTube.value[item - 1]) |
|
|
|
console.log(form.value.tubeNum) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
const activeTube = ref(Array.from({ length: 16 }).fill(false)) |
|
|
|
</script> |
|
|
|
|
|
|
|
<template> |
|
|
|
@ -121,9 +139,12 @@ const getSols = async () => { |
|
|
|
<el-col :span="12"> |
|
|
|
<el-form ref="formRef" :model="form" :rules="rules" label-width="auto"> |
|
|
|
<el-form-item label="选择试管" prop="tubeNum"> |
|
|
|
<el-select v-model="form.tubeNum" placeholder="请选择试管"> |
|
|
|
<el-option v-for="item in 16" :key="item" :label="`试管${item}`" :value="item" /> |
|
|
|
</el-select> |
|
|
|
<!-- <el-select v-model="form.tubeNum" placeholder="请选择试管"> --> |
|
|
|
<!-- <el-option v-for="item in 16" :key="item" :label="`试管${item}`" :value="item" /> --> |
|
|
|
<!-- </el-select> --> |
|
|
|
<div class="tube-item" @click.prevent="mousedownHandle" @touch.prevent="mousedownHandle"> |
|
|
|
<span v-for="item in 16" :key="item" class="tube-inner" :class="{ 'tube-inner-active': activeTube[item - 1] }" :index="item" /> |
|
|
|
</div> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="选择溶液" prop="solutionId"> |
|
|
|
<el-select v-model="form.solutionId" placeholder="请选择溶液"> |
|
|
|
@ -150,7 +171,9 @@ const getSols = async () => { |
|
|
|
<template v-if="addList.length"> |
|
|
|
<el-tag v-for="(item, key) in addList" :key> |
|
|
|
<div> |
|
|
|
<span>试管{{ item.tubeNum }}</span> |
|
|
|
<span>试管[</span> |
|
|
|
<span>{{ item.tubeNum }}</span> |
|
|
|
<span>]</span> |
|
|
|
<span>-</span> |
|
|
|
<span>{{ solsList.find(i => i.id === item.solutionList[0].solutionId)!.name }}</span> |
|
|
|
<span>添加{{ item.solutionList[0].volume }}ml</span> |
|
|
|
@ -172,7 +195,7 @@ const getSols = async () => { |
|
|
|
margin-right: 5px; |
|
|
|
} |
|
|
|
.el-row { |
|
|
|
height: 200px; |
|
|
|
height: 320px; |
|
|
|
.el-col { |
|
|
|
height: 100%; |
|
|
|
overflow: auto; |
|
|
|
@ -187,4 +210,35 @@ const getSols = async () => { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.tube-item { |
|
|
|
padding: 5px; |
|
|
|
background: #384D5D; |
|
|
|
border-radius: 10px; |
|
|
|
display: grid; |
|
|
|
grid-template-columns: repeat(4, 1fr); |
|
|
|
grid-template-rows: repeat(4, 1fr); |
|
|
|
grid-gap: 5px; |
|
|
|
position: relative; |
|
|
|
.tube-disable { |
|
|
|
position: absolute; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
background: rgba(255,255,255,0.9); |
|
|
|
border-radius: 9px; |
|
|
|
} |
|
|
|
.tube-inner { |
|
|
|
display: inline-block; |
|
|
|
width: 25px; |
|
|
|
height: 25px; |
|
|
|
border-radius: 50%; |
|
|
|
background: #fff; |
|
|
|
margin: 2px; |
|
|
|
transition: background 0.5s; |
|
|
|
} |
|
|
|
.tube-inner-active { |
|
|
|
background: #26D574; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
