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

调整运行页面试管区样式

relver
zhangjiming 7 months ago
parent
4c77566e82
commit
5e9f2b97b1
4 changed files with 71 additions and 118 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. 5
      src/main.ts
  2. 163
      src/pages/Index/Regular/Running.vue
  3. 17
      src/pages/Index/Regular/TestTube.vue
  4. 4
      src/store/modules/consumables.ts

5
src/main.ts
View File

@ -8,10 +8,7 @@ import * as ElementPlusIconsVue from '@element-plus/icons-vue'
// import './mock/index'
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
// 动态加载 Mock
if (import.meta.env.VITE_USE_MOCK === 'true') {
import('./mock/index')
}
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
const app = createApp(App)

163
src/pages/Index/Regular/Running.vue
View File

@ -80,30 +80,30 @@
<div class="consumables-container">
<div class="row-first">
<!-- 急诊按钮 -->
<div
class="emergency-button"
:style="`background:${canSetEmergency ? '#ff6b6b' : '#c7c7c7'}`"
@click="canSetEmergency ? confirmEmergency() : null"
>
<span>急诊</span>
</div>
<!-- 试管架区域 -->
<div class="test-tube-rack-area">
<div class="tube-project-tab">
<tube-item :tube="canSetEmergency ? undefined : emergencyStore.emergencyInfo" :showNum="false" />
<div class="emergency-area">
<div
class="emergency-button"
:style="`background:${canSetEmergency ? '#ff6b6b' : '#c7c7c7'}`"
@click="canSetEmergency ? confirmEmergency() : null"
>
<span>急诊</span>
</div>
<div class="tube-items">
<div class="tube-container">
<tube-item
v-for="(tube, index) in runningStore.tubeHolderState?.tubes ||
[]"
:key="index"
:tube="tube"
:tubeNo="index + 1"
/>
</div>
<div class="emergency-tube">
<tube-item
:tube="canSetEmergency ? undefined : emergencyStore.emergencyInfo"
:showNum="false"
/>
</div>
</div>
<div class="split"></div>
<div class="tube-items">
<tube-item
v-for="(tube, index) in runningStore.tubeHolderState?.tubes || []"
:key="index"
:tube="tube"
:tubeNo="index + 1"
/>
</div>
</div>
<!-- 第二行 -->
<div class="row-second">
@ -258,7 +258,7 @@ watch(
.consumables-container {
width: 100%;
box-sizing: border-box;
padding: 0 30px;
padding: 15px 20px;
display: flex;
flex-direction: column;
background-color: #ffffff;
@ -269,55 +269,54 @@ watch(
.row-first {
display: flex;
align-items: center;
justify-content: flex-start;
// 急诊按钮
.emergency-button {
background: #ff6b6b;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
span {
font-size: 32px;
color: #ffffff;
font-weight: bold;
}
}
margin-bottom: 10px;
// 试管架区域
.test-tube-rack-area {
.emergency-area {
display: flex;
gap: 8px;
align-items: center;
gap: 20px;
.tube-project-tab {
.emergency-button {
width: 80px;
height: 80px;
background: #ff6b6b;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
color: #1976d2;
position: relative;
box-shadow: 0 2px 8px rgba(25, 118, 210, 0.1);
&::after {
content: '';
width: 3px;
height: 120px;
background: lightgray;
position: absolute;
right: -30px;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
span {
font-size: 24px;
color: #ffffff;
font-weight: bold;
}
}
.emergency-tube {
}
}
.split {
width: 4px;
height: 100px;
background-color: #CCC;
margin: 0 10px;
}
.tube-items {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
height: auto;
column-gap: 5px;
// padding: 0 10px;
}
}
//第二行
.row-second {
display: grid;
gap: 15px;
grid-template-columns: 3fr 4fr 2fr 1fr;
padding: 10px 0;
@ -378,7 +377,7 @@ watch(
background-color: #d9534f;
}
.waste-text {
font-size: 28px;
font-size: 26px;
font-weight: 600;
color: #ffffff;
writing-mode: vertical-rl;
@ -394,47 +393,6 @@ watch(
}
}
}
// 添加响应式设计
@media screen and (max-width: 800px) {
padding: 15px 20px; // 修改padding值以适应小屏幕
.row-first {
margin-bottom: 10px;
gap: 20px;
.emergency-button {
width: 200px;
height: 100px;
span {
font-size: 28px;
}
}
}
.row-second {
gap: 15px;
.tips-item {
width: 180px;
height: 120px;
.tip-text {
font-size: 32px;
}
}
.waste-area {
width: 90px;
height: 285px;
.waste-text {
font-size: 24px;
}
}
}
}
}
}
@ -522,15 +480,6 @@ watch(
}
}
.tube-container {
display: flex;
flex-wrap: nowrap;
justify-content: space-around;
align-items: center;
height: auto;
padding: 0 20px;
width: 100%;
}
.plate-temp {
position: fixed;
top: 140px;

17
src/pages/Index/Regular/TestTube.vue
View File

@ -10,7 +10,7 @@
<TestTubeRackComponent
:tubeRack="tubeRack"
:index="index"
:projects="consumables.projectsAvailable"
:projects="consumablesStore.projectsAvailable"
:bloodTypes="settingTubeStore.bloodTypes"
@delete:rack="deleteTubeRack"
@active:rack="handleActivateChange"
@ -31,7 +31,7 @@
<h2 class="title">项目选择</h2>
<div class="project-list">
<div
v-for="proj in consumables.projectsAvailable"
v-for="proj in consumablesStore.projectsAvailable"
:key="proj.projName"
>
<div
@ -101,7 +101,7 @@ const router = useRouter()
const settingTubeStore = useSettingTestTubeStore()
const testTubeStore = useTestTubeStore()
const consumables = useConsumablesStore()
const consumablesStore = useConsumablesStore()
const loading = ref(false) // 控制加载状态
@ -118,15 +118,15 @@ const styleOfProjElem = (proj: ReactionPlateGroup) => {
const active = isProjElemActive(proj)
if (active) {
return {
border: 'solid 1px #FFF',
backgroundColor: proj.color,
border: 'solid 1px transparent',
backgroundColor: consumablesStore.projIdColorMap[proj.projId!],
color: '#FFF',
}
} else {
return {
border: `solid 1px ${proj.color}`,
border: `solid 1px ${consumablesStore.projIdColorMap[proj.projId!]}`,
backgroundColor: '#FFF',
color: proj.color,
color: consumablesStore.projIdColorMap[proj.projId!],
}
}
}
@ -315,6 +315,9 @@ const updateTubeSettings = async (rackIdx: number, tubeIdx: number) => {
<style scoped lang="less">
#configuration-container {
> * {
box-sizing: border-box;
}
@active-color: rgb(82, 140, 254);
@setting-panel-height: 150px;

4
src/store/modules/consumables.ts
View File

@ -13,6 +13,10 @@ import type {
ReactionPlateGroup,
} from '../../websocket/socket'
// id : 1,11,21,31 优先选用 Color10 的索引1的颜色
// 2,12,22,32 优先选用 Color10 的索引2的颜色
// 10,20,30,40 优先选用 Color10 的索引0的颜色
// 如果颜色已占用，就从扩展色（ColorExt）中选择一个
const projColorExt = ['#A98A7B', '#424E82', '#2D4E4A', '#493E25', '#001DDC']
const projColor10 = [
'#B9C950',

Write Preview
Loading…
Cancel
Save