LiLongLong
/
disinfector_vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix: 测试页ui优化

master
guoapeng 2 weeks ago
parent
4bca79cd5b
commit
fa46f73d34
5 changed files with 113 additions and 83 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 32
      src/components/home/HomeOperation.vue
  2. 4
      src/components/home/PressureControl.vue
  3. 6
      src/stores/homeStore.ts
  4. 151
      src/views/debug/index.vue
  5. 3
      src/views/home/index.vue

32
src/components/home/HomeOperation.vue
View File

@ -3,7 +3,6 @@ import { sendCmd } from 'apis/system'
import homeFinish from 'assets/images/home/home-finish.svg' import homeFinish from 'assets/images/home/home-finish.svg'
import homeStart from 'assets/images/home/home-start.svg' import homeStart from 'assets/images/home/home-start.svg'
import { startTimer, stopTimer } from 'libs/countdownTimer' import { startTimer, stopTimer } from 'libs/countdownTimer'
import { deviceStateMap } from 'libs/utils'
import { computed, ref, watchEffect } from 'vue' import { computed, ref, watchEffect } from 'vue'
import { getDeviceStatus } from '@/libs/deviceComm' import { getDeviceStatus } from '@/libs/deviceComm'
@ -144,6 +143,26 @@ const doStopDisinfect = async () => {
const operationState = computed(() => { const operationState = computed(() => {
return disinfectionState.value.state === 'idle' || disinfectionState.value.state === 'finished' return disinfectionState.value.state === 'idle' || disinfectionState.value.state === 'finished'
}) })
const startInjection = async () => {
const stopParams = {
className: 'DisinfectionCtrlServiceExt',
fnName: 'stop',
params: {},
}
await sendCmd(stopParams)
FtMessage.success('操作成功')
}
const stopInjection = async () => {
const stopParams = {
className: 'DisinfectionCtrlServiceExt',
fnName: 'stop',
params: {},
}
await sendCmd(stopParams)
FtMessage.success('操作成功')
}
</script> </script>
<template> <template>
@ -181,6 +200,15 @@ const operationState = computed(() => {
</template> </template>
</bt-button> </bt-button>
</div> </div>
<div style="width: 100%; display: flex; justify-content: center; margin-top: 10px">
<el-button type="primary" @click="startInjection">
开始注射
</el-button>
<el-button type="danger" @click="stopInjection">
结束注射
</el-button>
</div>
<!-- 开始消毒时显示剩余时间或状态 --> <!-- 开始消毒时显示剩余时间或状态 -->
<div v-if="!operationState" class="home-remain-time"> <div v-if="!operationState" class="home-remain-time">
<div class="home-remaini-label"> <div class="home-remaini-label">
@ -200,7 +228,7 @@ const operationState = computed(() => {
.home-disinfect { .home-disinfect {
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-top: 40px;
margin-top: 20px;
} }
.home-start { .home-start {
background: #31cb7a; background: #31cb7a;

4
src/components/home/PressureControl.vue
View File

@ -44,12 +44,12 @@ const deviceType = computed(() => {
const sealStore = useSealStore() const sealStore = useSealStore()
const sealInfo = computed(() => sealStore.sealInfo) const sealInfo = computed(() => sealStore.sealInfo)
// 用户选择后立即更新压力配置（支持仅选择类型的情况） // 用户选择后立即更新压力配置（支持仅选择类型的情况）
const confirm = (val: string[]) => {
const confirm = async (val: string[]) => {
// 判断设备当前的状态 // 判断设备当前的状态
if (sealInfo.value.workState === 'stopping' || sealInfo.value.workState === 'idle') { if (sealInfo.value.workState === 'stopping' || sealInfo.value.workState === 'idle') {
if (!val || !val.length) if (!val || !val.length)
return return
homeStore.updatePressure(val)
await homeStore.updatePressure(val)
} }
else { else {
FtMessageBox.error('密封性测试中,禁止修改正负压') FtMessageBox.error('密封性测试中,禁止修改正负压')

6
src/stores/homeStore.ts
View File

@ -159,7 +159,7 @@ export const useHomeStore = defineStore('home', () => {
* @param {Array<string|number>} pressureData - 压力配置数据 [压力类型, 压力值] * @param {Array<string|number>} pressureData - 压力配置数据 [压力类型, 压力值]
* @desc 更新压力类型及对应压力值配置 * @desc 更新压力类型及对应压力值配置
*/ */
const updatePressure = async (pressureData: string | number[]) => {
const updatePressure = async (pressureData: string[]) => {
if (pressureData && pressureData.length) { if (pressureData && pressureData.length) {
const type = pressureData[0] const type = pressureData[0]
const pressureTypeParams = { const pressureTypeParams = {
@ -167,7 +167,7 @@ export const useHomeStore = defineStore('home', () => {
fnName: 'setType', fnName: 'setType',
params: { type }, params: { type },
} }
syncSendCmd(pressureTypeParams)
await syncSendCmd(pressureTypeParams)
// 正压或负压时保存设置的压力值 // 正压或负压时保存设置的压力值
if (type === 'positivePressure' || type === 'negativePressure') { if (type === 'positivePressure' || type === 'negativePressure') {
const intensity = pressureData[1] const intensity = pressureData[1]
@ -176,7 +176,7 @@ export const useHomeStore = defineStore('home', () => {
fnName: 'setIntensity', fnName: 'setIntensity',
params: { intensity: Number(intensity) }, params: { intensity: Number(intensity) },
} }
syncSendCmd(intensityParams)
await syncSendCmd(intensityParams)
} }
} }
} }

151
src/views/debug/index.vue
View File

@ -13,10 +13,7 @@ const h2O2SensorData = ref<Home.DisplayrelyMgrParams[]>(homeStore.h2O2SensorData
const sprayPumpGpmValue = ref<number>(5) const sprayPumpGpmValue = ref<number>(5)
const airLeakDetectTestMode = ref<string>('disinfection') const airLeakDetectTestMode = ref<string>('disinfection')
const formatValue = (v?: number) =>
v === 0 || v == null
? '--'
: roundNumber(v, 2)
const formatValue = (v?: number) => (v === 0 || v == null ? '--' : roundNumber(v, 2))
watchEffect(() => { watchEffect(() => {
const hdData = homeStore.h2O2SensorData const hdData = homeStore.h2O2SensorData
@ -176,8 +173,8 @@ const deviceType = computed(() => __DEVICE_TYPE__)
<div class="debug-env-left"> <div class="debug-env-left">
<div v-for="(item, index) in h2O2SensorData" :key="index" class="debug-left-lh env-lh"> <div v-for="(item, index) in h2O2SensorData" :key="index" class="debug-left-lh env-lh">
<div class="debug-env-content"> <div class="debug-env-content">
<div class="debug-label env-content-p" style="text-align: right; width: 5rem">
{{ index === 0 ? '仓内环境' : item.title || `探头${index}` }}
<div class="debug-label" style="text-align: right; width: 5rem">
{{ index === 0 ? '仓内环境' : item.title || `探头${index}` }}:
</div> </div>
<div class="env-content-p"> <div class="env-content-p">
<span>温度</span> <span>温度</span>
@ -223,57 +220,55 @@ const deviceType = computed(() => __DEVICE_TYPE__)
<hr class="divider"> <hr class="divider">
<div class="debug-lower"> <div class="debug-lower">
<section> <section>
<div>
<div v-if="deviceType !== deviceState.deviceTypeMap.LargeSpaceDM_B" class="debug-left-lh">
<div class="debug-label">
加液泵控制：
</div>
<div>
<bt-button type="primary" button-text="加液" @click="liquidFillingPumpDoLiquidFilling" />
</div>
<div>
<bt-button type="primary" button-text="排空" @click="liquidFillingPumpDoLiquidDischarge" />
</div>
<div>
<bt-button button-text="停止" @click="liquidFillingPumpDoStop" />
</div>
<div v-if="deviceType !== deviceState.deviceTypeMap.LargeSpaceDM_B" class="debug-left-lh">
<div class="debug-label">
加液泵控制：
</div> </div>
<div class="debug-left-lh">
<div class="debug-label">
空压机控制：
</div>
<div>
<bt-button type="primary" button-text="打开" @click="airCompressorDoOpen" />
</div>
<div>
<bt-button button-text="关闭" @click="airCompressorDoClose" />
</div>
<div>
<bt-button type="primary" button-text="加液" @click="liquidFillingPumpDoLiquidFilling" />
</div> </div>
<div class="debug-left-lh">
<div class="debug-label">
加热片控制：
</div>
<div>
<bt-button type="primary" button-text="打开" @click="heatingDoOpen" />
</div>
<div>
<bt-button button-text="关闭" @click="heatingDoClose" />
</div>
<div>
<bt-button type="primary" button-text="排空" @click="liquidFillingPumpDoLiquidDischarge" />
</div> </div>
<div v-if="deviceType !== deviceState.deviceTypeMap.LargeSpaceDM_B" class="debug-left-lh">
<div class="debug-label">
气密性阀门模式：
</div>
<div class="debug-bw">
<el-select v-model="airLeakDetectTestMode" placeholder="请选择模式" style="width: 100%">
<el-option label="消毒模式" value="disinfection" />
<el-option label="加压模式" value="inflation" />
<el-option label="泄露测试模式" value="leakTest" />
</el-select>
</div>
<div>
<bt-button type="primary" button-text="切换" @click="airLeakDetectTestModeDoSetMode" />
</div>
<div>
<bt-button button-text="停止" @click="liquidFillingPumpDoStop" />
</div>
</div>
<div class="debug-left-lh">
<div class="debug-label">
空压机控制：
</div>
<div>
<bt-button type="primary" button-text="打开" @click="airCompressorDoOpen" />
</div>
<div>
<bt-button button-text="关闭" @click="airCompressorDoClose" />
</div>
</div>
<div class="debug-left-lh">
<div class="debug-label">
加热片控制：
</div>
<div>
<bt-button type="primary" button-text="打开" @click="heatingDoOpen" />
</div>
<div>
<bt-button button-text="关闭" @click="heatingDoClose" />
</div>
</div>
<div v-if="deviceType !== deviceState.deviceTypeMap.LargeSpaceDM_B" class="debug-left-lh">
<div class="debug-label">
气密性阀门模式：
</div>
<div class="debug-bw">
<el-select v-model="airLeakDetectTestMode" placeholder="请选择模式" style="width: 100%">
<el-option label="消毒模式" value="disinfection" />
<el-option label="加压模式" value="inflation" />
<el-option label="泄露测试模式" value="leakTest" />
</el-select>
</div>
<div>
<bt-button type="primary" button-text="切换" @click="airLeakDetectTestModeDoSetMode" />
</div> </div>
</div> </div>
</section> </section>
@ -332,17 +327,18 @@ const deviceType = computed(() => __DEVICE_TYPE__)
<style lang="scss" scoped> <style lang="scss" scoped>
$lineHeight: 12vh; $lineHeight: 12vh;
.main-content { .main-content {
height: $main-container-height;
height: 100%;
overflow: hidden; overflow: hidden;
background: $gradient-color; background: $gradient-color;
padding: 4vh;
font-size: 20px;
display: flex;
flex-direction: column;
.debug-upper { .debug-upper {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto auto; grid-template-rows: auto auto;
} }
.debug-lower { .debug-lower {
flex: 1;
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
} }
@ -354,38 +350,45 @@ $lineHeight: 12vh;
} }
} }
.divider { .divider {
margin-top: 4vh;
margin-bottom: 4vh;
margin: 20px;
} }
.debug-env { .debug-env {
display: flex; display: flex;
align-items: flex-start;
justify-content: center;
align-items: center;
.debug-env-left {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 50%;
}
.debug-env-right {
width: 50%;
display: flex;
flex-direction: column;
gap: 0.5rem;
align-items: center;
}
} }
.debug-left-lh { .debug-left-lh {
display: flex; display: flex;
gap: 1rem;
height: $lineHeight;
gap: 5px;
align-items: center;
margin-bottom: 20px;
.debug-env-content { .debug-env-content {
display: flex; display: flex;
align-items: center;
.env-content-p { .env-content-p {
padding: 5px; padding: 5px;
} }
} }
} }
.debug-env-right {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-left: 20rem;
align-items: flex-start;
}
.env-content-p { .env-content-p {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
font-size: 1rem;
} }
.debug-env-right .env-content-p { .debug-env-right .env-content-p {
@ -411,9 +414,6 @@ $lineHeight: 12vh;
color: #2892f3; color: #2892f3;
} }
.debug-env-right .env-content-p .unit {
font-size: 0.9em;
}
.env-lh { .env-lh {
height: 5vh; height: 5vh;
} }
@ -421,8 +421,9 @@ $lineHeight: 12vh;
width: 10vw; width: 10vw;
} }
.debug-label { .debug-label {
width: 18vw;
width: 150px !important;
text-align: end; text-align: end;
margin-right: 10px;
} }
.debug-text { .debug-text {
color: #2892f3; color: #2892f3;

3
src/views/home/index.vue
View File

@ -205,7 +205,8 @@ $input-height: 3rem;
.middle { .middle {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 16px;
gap: 5px;
padding: 5px 0;
} }
.el-button { .el-button {
background-color: #2892f3 !important; background-color: #2892f3 !important;

Write Preview
Loading…
Cancel
Save