|
|
@ -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> |