project_boditech_vidas_a8000_v3
/
A8000
forked from gzt/A8000
7
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

调整样式

feature/history-20250108
zhangjiming 7 months ago
parent
9b0fcd1efc
commit
86a416f040
2 changed files with 162 additions and 95 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/pages/Index/Regular/Consumables.vue
  2. 255
      src/pages/Index/components/Consumables/MoveLiquidArea.vue

2
src/pages/Index/Regular/Consumables.vue
View File

@ -468,8 +468,6 @@ const updateTipNum = async ({ index, tipNum }: { index: number; tipNum: number }
.main-bottom {
width: 100%;
flex: 1;
margin-top: -90px;
.buffer-little-title {
display: flex;
height: 40px;

255
src/pages/Index/components/Consumables/MoveLiquidArea.vue
View File

@ -1,94 +1,157 @@
<template>
<div id="move-liquid-area-container">
<!-- 移液区 -->
<div class="move-liquid-area">
<!-- 加载耗材按钮-->
<el-button type="primary" class="load-consumables" v-if="!isLoad" @click="handleIsLoad"
:loading="isLoading">加载耗材</el-button>
<el-button type="danger" class="load-consumables" v-if="isLoad" @click="handleIsUnload">卸载耗材</el-button>
<div class="move-liquid-title">
<div class="line"></div>
<div class="content">移液头区</div>
</div>
<div class="move-liquid-controller">
<div class="controller" v-for="(controller, index) in tempTipNum" :key="index"
:class="{ 'selected-controller': currentPlate === index }" @click="changePlate(index)">
<div class="controller-title">移液区{{ index + 1 }}</div>
<div class="controller-number">{{ controller }}/120</div>
</div>
</div>
<div class="move-liquid-graph">
<keep-alive>
<BallGrid v-if="activeTab === 0" :total="120" :activated="moveLiquids![activeTab]?.tipNum" width="350px"
height="310px" :columns="12" @deactivate="handleDeactivate" @syncActivatedCount="syncActivatedCount" />
</keep-alive>
<keep-alive>
<BallGrid v-if="activeTab === 1" :total="120" :activated="moveLiquids![activeTab].tipNum" width="350px"
height="310px" :columns="12" @deactivate="handleDeactivate" @syncActivatedCount="syncActivatedCount" />
</keep-alive>
<keep-alive>
<BallGrid v-if="activeTab === 2" :total="120" :activated="moveLiquids![activeTab]?.tipNum" width="350px"
height="310px" :columns="12" @deactivate="handleDeactivate" @syncActivatedCount="syncActivatedCount" />
</keep-alive>
</div>
</div>
<!-- 右侧小功能区域 -->
<div class="right-area">
<!--急诊区-->
<div class="emergency-area">
<div class="emergency-title">
<!-- 加载耗材按钮-->
<el-button
type="primary"
class="load-consumables"
v-if="!isLoad"
@click="handleIsLoad"
:loading="isLoading"
>加载耗材</el-button
>
<el-button
type="danger"
class="load-consumables"
v-if="isLoad"
@click="handleIsUnload"
>卸载耗材</el-button
>
<div class="info-show-area">
<!-- 移液区 -->
<div class="move-liquid-area">
<div class="move-liquid-title">
<div class="line"></div>
<div class="content">急诊区</div>
<div class="content">移液头区</div>
</div>
<div class="emergency-controller">
<div class="controller">
<div class="emergency-ball" :class="{ active: isActive }"
@click="showEmergencyInfo(emergencyStore.emergencyInfo)">
1
</div>
<div class="move-liquid-controller">
<div
class="controller"
v-for="(controller, index) in tempTipNum"
:key="index"
:class="{ 'selected-controller': currentPlate === index }"
@click="changePlate(index)"
>
<div class="controller-title">移液区{{ index + 1 }}</div>
<div class="controller-number">{{ controller }}/120</div>
</div>
<button class="controller-button" @click="addEmergency">
添加急诊
</button>
</div>
</div>
<!--ID芯片区-->
<div class="id-area">
<div class="id-title">
<div class="line"></div>
<div class="content">ID芯片区</div>
<div class="move-liquid-graph">
<keep-alive>
<BallGrid
v-if="activeTab === 0"
:total="120"
:activated="moveLiquids![activeTab]?.tipNum"
width="350px"
height="310px"
:columns="12"
@deactivate="handleDeactivate"
@syncActivatedCount="syncActivatedCount"
/>
</keep-alive>
<keep-alive>
<BallGrid
v-if="activeTab === 1"
:total="120"
:activated="moveLiquids![activeTab].tipNum"
width="350px"
height="310px"
:columns="12"
@deactivate="handleDeactivate"
@syncActivatedCount="syncActivatedCount"
/>
</keep-alive>
<keep-alive>
<BallGrid
v-if="activeTab === 2"
:total="120"
:activated="moveLiquids![activeTab]?.tipNum"
width="350px"
height="310px"
:columns="12"
@deactivate="handleDeactivate"
@syncActivatedCount="syncActivatedCount"
/>
</keep-alive>
</div>
<button class="id-button" @click="openTableModal" :disabled="!consumableStore.isIdCardInserted">
<span class="button-text">
{{ consumableStore.isIdCardInserted ? '已插入' : '未插入芯片' }}</span>
</button>
</div>
<!--废料区-->
<div class="waste-area">
<div class="waste-title">
<div class="line"></div>
<div class="content">废料区</div>
</div>
<div class="waste-controller">
<button class="waste-button" :class="{ full: wasteStatus }">
<div class="button-icon">
<img :src="wasteStatus ? wasteFullIcon : wasteIcon" alt="Waste Status" />
</div>
<div class="button-text">
{{ wasteStatus ? '已满' : '未满' }}
<!-- 右侧小功能区域 -->
<div class="right-area">
<!--急诊区-->
<div class="emergency-area">
<div class="emergency-title">
<div class="line"></div>
<div class="content">急诊区</div>
</div>
<div class="emergency-controller">
<div class="controller">
<div
class="emergency-ball"
:class="{ active: isActive }"
@click="showEmergencyInfo(emergencyStore.emergencyInfo)"
>
1
</div>
</div>
<button class="controller-button" @click="addEmergency">
添加急诊
</button>
</div>
</div>
<!--ID芯片区-->
<div class="id-area">
<div class="id-title">
<div class="line"></div>
<div class="content">ID芯片区</div>
</div>
<button
class="id-button"
@click="openTableModal"
:disabled="!consumableStore.isIdCardInserted"
>
<span class="button-text">
{{
consumableStore.isIdCardInserted ? '已插入' : '未插入芯片'
}}</span
>
</button>
</div>
</div>
<!--缓冲液大-->
<div class="buffer-area">
<div class="buffer-title">
<div class="line"></div>
<div class="content">缓冲液大</div>
<!--废料区-->
<div class="waste-area">
<div class="waste-title">
<div class="line"></div>
<div class="content">废料区</div>
</div>
<div class="waste-controller">
<button class="waste-button" :class="{ full: wasteStatus }">
<div class="button-icon">
<img
:src="wasteStatus ? wasteFullIcon : wasteIcon"
alt="Waste Status"
/>
</div>
<div class="button-text">
{{ wasteStatus ? '已满' : '未满' }}
</div>
</button>
</div>
</div>
<div class="buffer-controller">
<BallGrid :total="6" :customColors="true" width="130px" height="80px" :data="bufferBig" :columns="3"
class="buffer-grid" />
<!--缓冲液大-->
<div class="buffer-area">
<div class="buffer-title">
<div class="line"></div>
<div class="content">缓冲液大</div>
</div>
<div class="buffer-controller">
<BallGrid
:total="6"
:customColors="true"
width="130px"
height="80px"
:data="bufferBig"
:columns="3"
class="buffer-grid"
/>
</div>
</div>
</div>
</div>
@ -227,30 +290,36 @@ const changePlate = (index: number) => {
padding: 0;
position: relative;
display: flex;
justify-content: space-between;
flex-direction: column;
// justify-content: space-between;
width: 100%;
.info-show-area {
display: flex;
}
.title {
font-size: 20px;
/* 统一设置标题大小 */
font-weight: bold;
}
.load-consumables {
margin: 0 8px;
padding: 0;
height: 100px;
font-size: 40px;
border-radius: 10px;
margin-bottom: 15px;
}
.move-liquid-area {
width: 70%;
display: flex;
flex-direction: column;
margin-left: 10px;
gap: 9px;
.load-consumables {
width: 98%;
padding: 0;
height: 100px;
font-size: 40px;
border-radius: 10px;
margin-bottom: 15px;
}
background-color: #f6f6f6;
border-radius: 10px;
.move-liquid-title {
width: 100%;
@ -270,6 +339,7 @@ const changePlate = (index: number) => {
.move-liquid-controller {
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
.controller {
@ -312,16 +382,15 @@ const changePlate = (index: number) => {
width: 30%;
display: flex;
flex-direction: column;
justify-content: start;
height: 49.1875rem;
gap: 20px;
justify-content: stretch;
padding-left: 8px;
gap: 6px;
.emergency-area,
.id-area,
.waste-area,
.buffer-area {
width: 90%;
margin: 11px 0;
}
.emergency-title,

Write Preview
Loading…
Cancel
Save