LiLongLong 3 months ago
parent
commit
cb0ccdb21c
  1. 2
      package.json
  2. 6
      src/pages/Index/Index.vue
  3. 13
      src/pages/Index/Regular.vue
  4. 41
      src/pages/Index/Regular/Consumables.vue
  5. 10
      src/pages/Index/Regular/TestTube.vue
  6. 4
      src/pages/Index/components/Consumables/BallGrid.vue
  7. 7
      src/pages/Index/components/Consumables/BallGrid2.vue
  8. 2
      src/pages/Index/components/Consumables/InfoBar.vue
  9. 2
      src/pages/Index/components/Consumables/MainComponent.vue
  10. 139
      src/pages/Index/components/Consumables/MoveLiquidArea.vue
  11. 27
      src/pages/Index/components/Consumables/SpttingPlates.vue
  12. 3
      src/pages/Index/components/Consumables/TabBar.vue
  13. 9
      src/pages/Login/index.vue

2
package.json

@ -1,7 +1,7 @@
{
"name": "a8000-plus",
"private": true,
"version": "0.0.10",
"version": "0.0.11",
"type": "module",
"scripts": {
"dev": "vite",

6
src/pages/Index/Index.vue

@ -1012,8 +1012,7 @@ watch(
.nav-bar {
width: 100%;
height: 7rem;
margin-bottom: 2px;
height: 100px;
display: flex;
justify-content: space-between;
align-items: center;
@ -1153,8 +1152,7 @@ watch(
}
.main-content {
flex: 1;
min-height: 0; //
height: calc(100% - 155px);
}
}
.msg-container {

13
src/pages/Index/Regular.vue

@ -1,13 +1,11 @@
<template>
<div id="regular-container">
<div id="regular">
<TabBar />
<div>
<router-view v-slot="{ Component }">
<router-view v-slot="{ Component }" class="content">
<keep-alive>
<component :is="Component" />
</keep-alive>
</router-view>
</div>
</div>
</template>
@ -17,11 +15,14 @@ import TabBar from './components/Consumables/TabBar.vue'
</script>
<style scoped lang="less">
#regular-container {
#regular {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
.content {
height: calc(100% - 4.5rem);
}
.main-top {
display: flex;
@ -33,7 +34,7 @@ import TabBar from './components/Consumables/TabBar.vue'
.buffer-little-title {
display: flex;
margin: 5px 0 0 5px 0;
margin: 5px 0 0 5px;
.line {
margin-right: 5px;

41
src/pages/Index/Regular/Consumables.vue

@ -47,6 +47,7 @@
<!--耗材页面 -->
<div class="main-top">
<!-- 反应板夹区-->
<div class="plate-area">
<SpttingPlates
:plates="consumableStore.consumableData?.reactionPlateGroup"
@ -54,16 +55,12 @@
@updateReactionPlateNum="updateReactionPlateNum"
@unloadConsumable="handleUnloadConsumable"
/>
<!-- <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
:moveLiquids="consumableStore.consumableData?.tips"
:tempTipNum="
consumableStore.consumableData?.tips.map((t) => t.tipNum)
"
:tempTipNum="consumableStore.consumableData?.tips.map((t) => t.tipNum)"
:bufferBig="consumableStore.consumableData.larBottleGroup"
:emergencyInfo="emergencyInfo"
:wasteStatus="deviceStore.sensorState?.wasteBinFullFlag || false"
@ -375,8 +372,9 @@ const updateTipNum = async ({
<style scoped lang="less">
#regular-container {
width: 100%;
height: 100%;
height: calc(100% - 60px);
display: flex;
flex-direction: column;
@ -443,9 +441,9 @@ const updateTipNum = async ({
.main-top {
display: flex;
justify-content: space-between;
margin-top: 5px;
height: 100%;
box-sizing: border-box;
padding-top: 5px;
background: #DDE4E9;
.plate-area {
width: 360px;
@ -457,32 +455,39 @@ const updateTipNum = async ({
}
.main-bottom {
background: #DDE4E9;
width: 100%;
box-sizing: border-box;
padding: 10px;
flex: 1;
.buffer-little-title {
background: #f6f6f6;
display: flex;
height: 40px;
line-height: 40px;
height: 26px;
align-items: center;
padding: 0 5px;
.line {
width: 4px;
height: 20px;
background-color: #4caf50;
margin: 0 10px 0;
background-color: #11d900;
margin: 0 5px;
border-radius: 10px;
}
.content {
font-size: 26px;
font-size: 20px;
}
}
.ball-area {
height: calc(100% - 26px);
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
column-gap: 26px;
row-gap: 12px;
padding: 0 24px;
column-gap: 20px;
row-gap: 20px;
.ball-grid {
overflow: hidden;
}

10
src/pages/Index/Regular/TestTube.vue

@ -280,7 +280,15 @@ const handleActivateChange = async (index: number) => {
}
const updateTubeSettings = async (rackIdx: number, tubeIdx: number) => {
if (!selectedBloodTypeKey.value) {
if (!consumablesStore.projectsAvailable.length) {
eMessage.error('请先添加项目')
return
}
if (!selectedProjIds.value.length) {
eMessage.error('请选择项目')
return
}
if (!selectedBloodTypeKey.value) {
eMessage.error('请选择血液类型')
return
}

4
src/pages/Index/components/Consumables/BallGrid.vue

@ -48,7 +48,7 @@ const props = defineProps({
},
innerColor: {
type: String,
default: 'lightgray', //
default: '#D2DAE0', //
},
})
@ -91,7 +91,7 @@ const innerCircleStyle = (index) => {
width: 100%;
height: 100%;
display: flex;
background-color: #666;
background-color: #F6F6F6;
border-radius: 10px;
flex-wrap: wrap;
column-gap: 4px;

7
src/pages/Index/components/Consumables/BallGrid2.vue

@ -68,7 +68,7 @@ const props = defineProps({
},
innerColor: {
type: String,
default: 'lightgray', //
default: '#D2DAE0', //
},
inUse: {
type: Boolean,
@ -150,9 +150,8 @@ watch(
display: flex;
flex-wrap: wrap-reverse;
flex-direction: row-reverse;
background-color: #666;
border-radius: 10px;
padding-right: 4px;
background-color: #F6F6F6;
//border-radius: 10px;
}
.drag-area {
position: absolute;

2
src/pages/Index/components/Consumables/InfoBar.vue

@ -57,7 +57,7 @@ const { projectName, currentCount, maxCount } = toRefs(props)
background-color: #808080;
font-size: 22px;
font-weight: 600;
height: 30px;
height: 40px;
color: #fff;
padding: 0 20px;
}

2
src/pages/Index/components/Consumables/MainComponent.vue

@ -93,8 +93,6 @@ const handleUpdateBottleNum = (
.combined-container {
display: flex;
flex-direction: column;
/* align-items: center; */
background-color: #555555;
border-radius: 10px;
}
</style>

139
src/pages/Index/components/Consumables/MoveLiquidArea.vue

@ -1,14 +1,6 @@
<template>
<div id="move-liquid-area-container">
<!-- 扫描耗材按钮-->
<el-button
type="primary"
class="load-consumables"
@touchstart.prevent="handleTouchStart"
@touchend="handleTouchEnd"
@touchcancel="handleTouchEnd"
>扫描耗材</el-button
>
<div class="info-show-area">
<!-- 移液区 -->
<div class="move-liquid-area">
@ -155,6 +147,18 @@
</div>
</div>
</div>
<!-- 扫描耗材按钮-->
<div class="load-consumables-area">
<el-button
type="primary"
class="load-consumables"
@touchstart.prevent="handleTouchStart"
@touchend="handleTouchEnd"
@touchcancel="handleTouchEnd"
>扫描耗材</el-button
>
</div>
</div>
<InitWarn
@ -326,6 +330,7 @@ const changePlate = (index: number) => {
flex-direction: column;
// justify-content: space-between;
width: 100%;
height: 100%;
.info-show-area {
display: flex;
@ -336,37 +341,51 @@ const changePlate = (index: number) => {
font-weight: bold;
}
.load-consumables {
margin: 0 16px 12px 10px;
padding: 0;
height: 70px;
font-size: 40px;
border-radius: 10px;
// margin-bottom: 15px;
.load-consumables-area {
flex: 1;
display: flex;
align-items: flex-end;
justify-content: center;
width: 100%;
.load-consumables {
width: calc(100% - 20px);
padding: 0;
height: 60px;
font-size: 30px;
background: #528dfe;
border-radius: 10px;
}
}
.move-liquid-area {
width: 70%;
display: flex;
flex-direction: column;
margin-left: 10px;
gap: 9px;
background-color: #f6f6f6;
gap: 10px;
//background-color: #fff;
border-radius: 10px;
.move-liquid-title {
width: 100%;
display: flex;
font-size: 26px;
font-weight: 400;
align-items: center;
margin-left: 10px;
background: #f6f6f6;
height: 26px;
padding: 0 5px;
box-sizing: border-box;
.line {
width: 4px;
height: 20px;
background-color: #00d800;
margin-right: 5px;
background-color: #11d900;
margin: 0 5px;
border-radius: 10px;
}
.content {
font-size: 20px;
}
}
@ -376,10 +395,10 @@ const changePlate = (index: number) => {
flex-wrap: nowrap;
.controller {
width: 136px;
height: 6rem;
width: 120px;
padding: 5px 5px;
color: #54a4e8;
border: 3px solid #54a4e8;
border: 1px solid #54a4e8;
border-radius: 10px;
display: grid;
place-content: center;
@ -392,7 +411,7 @@ const changePlate = (index: number) => {
}
.controller-number {
font-size: 26px;
font-size: 20px;
font-weight: 600;
border-radius: 10px;
border: 2px solid #54a4e8;
@ -417,29 +436,31 @@ const changePlate = (index: number) => {
}
.right-area {
box-sizing: border-box;
width: 30%;
display: flex;
flex-direction: column;
justify-content: stretch;
padding-left: 8px;
gap: 6px;
padding:0 10px;
gap: 10px;
.emergency-area,
.id-area,
.waste-area,
.buffer-area {
width: 90%;
width: 100%;
}
.emergency-title,
.id-title,
.waste-title,
.buffer-title {
font-size: 26px;
font-weight: 500;
font-size: 20px;
box-sizing: border-box;
padding: 0 5px;
}
.content{
font-size: 1.36rem;
font-size: 20px;
}
.controller-button,
@ -447,31 +468,29 @@ const changePlate = (index: number) => {
.waste-button,
.buffer-controller {
width: 100%;
height: 80px;
height: 50px;
}
.line {
width: 4px;
height: 20px;
background-color: #00d800;
background-color: #11d900;
margin: 0 5px;
border-radius: 10px;
}
//
.emergency-area {
background-color: #f6f6f6;
border-radius: 10px;
display: flex;
flex-direction: column;
justify-content: space-between;
.emergency-title {
width: 155px;
width: 100%;
display: flex;
height: 26px;
align-items: center;
background-color: #f6f6f6;
margin: 0 5px;
font-weight: 400;
}
.emergency-controller {
@ -481,16 +500,15 @@ const changePlate = (index: number) => {
.controller {
width: 100%;
height: 60px;
margin: 10px 0;
display: flex;
justify-content: space-around;
background-color: #fff;
align-items: center;
.emergency-desc {
width: 100%;
border-radius: 6px;
background-color: #ddd;
background-color: #ccc;
line-height: 40px;
font-weight: 600;
font-size: 24px;
@ -505,7 +523,8 @@ const changePlate = (index: number) => {
border-radius: 7px;
background-color: #c84141;
color: white;
font-size: 32px;
font-size: 28px;
line-height: 50px;
font-weight: 400;
display: flex;
justify-content: center;
@ -516,14 +535,14 @@ const changePlate = (index: number) => {
//ID
.id-area {
background-color: #f6f6f6;
border-radius: 10px;
margin-top: 8px;
.id-title {
width: 155px;
width: 100%;
height: 26px;
display: flex;
align-items: center;
background-color: #f6f6f6;
margin-bottom: 10px;
}
.id-button {
@ -544,11 +563,10 @@ const changePlate = (index: number) => {
//
.waste-area {
// width: 166px;
background-color: #f6f6f6;
border-radius: 10px;
margin-top: 10px;
.waste-title {
height: 26px;
margin-bottom: 10px;
display: flex;
align-items: center;
background-color: #f6f6f6;
@ -569,34 +587,31 @@ const changePlate = (index: number) => {
}
.button-icon {
width: 64px;
width: 50px;
height: 64px;
display: grid;
place-content: center;
margin-right: 5px;
img {
width: 40px;
height: 40px;
width: 25px;
}
}
.button-text {
width: 65px;
height: 24px;
font-size: 26px;
font-weight: 400;
line-height: 30px;
}
}
}
//
.buffer-area {
background-color: #f6f6f6;
border-radius: 10px;
margin-top: 10px;
.buffer-title {
height: 26px;
margin-bottom: 10px;
display: flex;
align-items: center;
background-color: #f6f6f6;
@ -604,4 +619,10 @@ const changePlate = (index: number) => {
}
}
}
.move-liquid-graph {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
</style>

27
src/pages/Index/components/Consumables/SpttingPlates.vue

@ -116,25 +116,27 @@ const updateSliderEndVal = async (plateNum, order) => {
.sptting-plates-container {
display: flex;
flex-direction: column;
background-color: #f6f6f6;
padding-left: 8px;
//
.temperature {
width: 100%;
height: 10%;
margin: 0 auto;
height: 26px;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 5px; //
//
margin: 0 auto 10px;
background: #f6f6f6;
padding: 0 5px;
box-sizing: border-box;
.area {
width: 180px;
height: 33px;
align-items: center;
font-size: 32px;
font-size: 26px;
display: flex;
.line {
width: 4px;
height: 20px;
@ -144,8 +146,7 @@ const updateSliderEndVal = async (plateNum, order) => {
}
.area-text {
font-size: 26px;
font-weight: 300;
font-size: 20px;
}
}
@ -175,15 +176,15 @@ const updateSliderEndVal = async (plateNum, order) => {
//
.sptting-plates {
display: flex;
gap: 10px; //
gap: 5px; //
flex-direction: column;
.card {
width: 355px;
height: 5.5rem;
padding: 0px;
width: 100%;
height: 85px;
padding: 0;
border: 1px solid black;
border: 1px solid #ccc;
border-radius: 8px;
overflow: hidden;
position: relative;

3
src/pages/Index/components/Consumables/TabBar.vue

@ -53,11 +53,10 @@ const onTabClick = (index: any) => {
<style scoped lang="less">
.tab-bar {
height: 4.5rem;
height: 60px;
display: flex;
justify-content: space-around;
background-color: #fff;
margin: 5px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
.tab-item {

9
src/pages/Login/index.vue

@ -211,12 +211,15 @@ const version = __APP_VERSION__
margin-left: 30px;
font-size: 25px;
font-weight: bold;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 150px;
}
.el-icon {
animation: iconAnim 0.3s ease forwards;
font-size: 30px;
margin-left: auto;
}
}
.user-info-active {
@ -248,6 +251,10 @@ const version = __APP_VERSION__
margin-left: 30px;
font-size: 25px;
font-weight: bold;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 150px;
}
}
}

Loading…
Cancel
Save