You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
349 lines
9.5 KiB
349 lines
9.5 KiB
<script lang="ts" setup>
|
|
import { getDeviceStatus } from '@/libs/deviceComm'
|
|
import { FtMessage } from '@/libs/message'
|
|
import { FtMessageBox } from '@/libs/messageBox'
|
|
import { useHomeStore } from '@/stores/homeStore'
|
|
import { useLiquidStore } from '@/stores/liquidStore'
|
|
import { useSealStore } from '@/stores/sealStore'
|
|
import { useSystemStore } from '@/stores/systemStore'
|
|
import { sendCmd, subscribeEvent, syncSendCmd } from 'apis/system'
|
|
import homeFinish from 'assets/images/home/home-finish.svg'
|
|
import homeStart from 'assets/images/home/home-start.svg'
|
|
import SoftKeyboard from 'components/common/SoftKeyboard/index.vue'
|
|
import LiquidLevel from 'components/liquid/LiquidLevel.vue'
|
|
import { ElMessage } from 'element-plus'
|
|
import { roundNumber } from 'libs/utils'
|
|
import { computed, onMounted, ref, watchEffect } from 'vue'
|
|
|
|
const liquidStore = useLiquidStore()
|
|
const homeStore = useHomeStore()
|
|
const sealStore = useSealStore()
|
|
const systemStore = useSystemStore()
|
|
const stopatg = ref()
|
|
const inputValue = ref('')
|
|
const keyboardVisible = ref(false)
|
|
const keyboardType = ref<'text' | 'number'>('number')
|
|
const softKeyboardRef = ref()
|
|
const liquidStateData = ref(liquidStore.liquidStateData)
|
|
const addWorkState = ref(liquidStore.liquidStateData)// 加液状态
|
|
const drainWorkState = ref(liquidStore.liquidStateData)// 排液状态
|
|
const liquidTotoal = ref(liquidStore.liquidTotal)// 总容量
|
|
const disinfectionState = ref(homeStore.disinfectionState)
|
|
const sealInfo = ref(sealStore.sealInfo)
|
|
const loading = ref(false)
|
|
const btnStyle = {
|
|
width: '27vw',
|
|
height: '7vh',
|
|
textSize: '24px',
|
|
borderRadius: '12px',
|
|
textColor: '#FFFFFF',
|
|
}
|
|
|
|
onMounted(() => {
|
|
subScribeLiquid()
|
|
})
|
|
|
|
watchEffect(() => {
|
|
stopatg.value = inputValue.value
|
|
addWorkState.value = liquidStore.liquidAddWorkState
|
|
drainWorkState.value = liquidStore.liquidDrainWorkState
|
|
liquidTotoal.value = liquidStore.liquidTotal
|
|
liquidStateData.value = liquidStore.liquidStateData
|
|
disinfectionState.value = homeStore.disinfectionState
|
|
sealInfo.value = sealStore.sealInfo
|
|
loading.value = systemStore.loading
|
|
})
|
|
|
|
const subScribeLiquid = () => { // 事件订阅
|
|
subscribeEvent('stateUpdate', (data: Socket.WebSocketResponse<Liquid.LiquidData>) => {
|
|
if (data.fromClass === 'AddLiquidService') {
|
|
liquidStore.updateAddLiquidWorkState(data.rely)
|
|
}
|
|
|
|
if (data.fromClass === 'DrainLiquidService') {
|
|
liquidStore.updateDrainLiquidWorkState(data.rely)
|
|
}
|
|
})
|
|
}
|
|
|
|
const openKeyboard = () => {
|
|
keyboardVisible.value = true
|
|
}
|
|
|
|
const nowLiquid = computed(() => {
|
|
return roundNumber(liquidStateData.value.nowLiquid, 0)
|
|
})
|
|
|
|
const handleConfirm = (value: string) => {
|
|
console.log('确认输入:', value)
|
|
}
|
|
|
|
const onStartAddLiquid = async () => {
|
|
const statusName = getDeviceStatus()
|
|
if (statusName) {
|
|
FtMessageBox.error(statusName)
|
|
return
|
|
}
|
|
if (!stopatg.value || stopatg.value < 0) {
|
|
FtMessage.warning('请输入加液容量')
|
|
return
|
|
}
|
|
if (stopatg.value > liquidTotoal.value) {
|
|
FtMessage.warning('加液容量不能大于总容量')
|
|
return
|
|
}
|
|
const params = {
|
|
className: 'AddLiquidService',
|
|
fnName: 'start',
|
|
params: {
|
|
stopatg: Number(stopatg.value),
|
|
},
|
|
}
|
|
systemStore.updateLoading(true)
|
|
syncSendCmd(params)
|
|
// 发起订阅
|
|
const subParams = {
|
|
className: 'AddLiquidService',
|
|
fnName: 'startStateReport',
|
|
params: {},
|
|
}
|
|
syncSendCmd(subParams)
|
|
}
|
|
|
|
const onStopAddLiquid = () => {
|
|
const params = {
|
|
className: 'AddLiquidService',
|
|
fnName: 'stop',
|
|
params: {},
|
|
}
|
|
systemStore.updateLoading(true)
|
|
syncSendCmd(params)
|
|
}
|
|
|
|
// 开始排液
|
|
const onStartDrainLiquid = async () => {
|
|
const statusName = getDeviceStatus()
|
|
if (statusName) {
|
|
FtMessageBox.error(statusName)
|
|
return
|
|
}
|
|
const params = {
|
|
className: 'DrainLiquidService',
|
|
fnName: 'start',
|
|
params: {},
|
|
}
|
|
systemStore.updateLoading(true)
|
|
await sendCmd(params)
|
|
// 发起订阅
|
|
const subParams = {
|
|
className: 'DrainLiquidService',
|
|
fnName: 'startStateReport',
|
|
params: {},
|
|
}
|
|
syncSendCmd(subParams)
|
|
}
|
|
|
|
const onStopDrainLiquid = async () => {
|
|
if (drainWorkState.value.workState === 'idle') {
|
|
ElMessage.warning('正在加液中，不可进行排液操作')
|
|
return
|
|
}
|
|
const params = {
|
|
className: 'DrainLiquidService',
|
|
fnName: 'stop',
|
|
params: {},
|
|
}
|
|
systemStore.updateLoading(true)
|
|
await syncSendCmd(params)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div v-loading="loading">
|
|
<main class="main-content">
|
|
<div class="liquid-left">
|
|
<LiquidLevel />
|
|
</div>
|
|
<div class="liquid-right">
|
|
<!-- 当前液位 -->
|
|
<div class="liquid-surplus-title">
|
|
<div>当前液位：</div>
|
|
<div class="liquid-title-g">
|
|
{{ nowLiquid }}g
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 输入加液/排液量 -->
|
|
<div class="liquid-input">
|
|
<el-input
|
|
v-model="stopatg"
|
|
v-prevent-keyboard
|
|
class="input"
|
|
name="nowLiquid"
|
|
placeholder="请输入"
|
|
style="height: 4rem"
|
|
@focus="openKeyboard"
|
|
>
|
|
<template #append>
|
|
<bt-button
|
|
type="primary"
|
|
:button-text="`${liquidTotoal}g`"
|
|
bg-color="#2892F3"
|
|
text-color="#ffffff"
|
|
height="4rem"
|
|
text-size="24px"
|
|
/>
|
|
</template>
|
|
</el-input>
|
|
</div>
|
|
|
|
<!-- 操作区 -->
|
|
<div class="liquid-opt">
|
|
<div>
|
|
<div class="liquid-add-btn">
|
|
<bt-button
|
|
v-if="addWorkState.workState === 'idle'"
|
|
button-text="开始加液"
|
|
bg-color="#31CB7A"
|
|
:text-color="btnStyle.textColor"
|
|
:width="btnStyle.width"
|
|
:height="btnStyle.height"
|
|
:text-size="btnStyle.textSize"
|
|
:border-radius="btnStyle.borderRadius"
|
|
@click="onStartAddLiquid"
|
|
>
|
|
<template #icon>
|
|
<img :src="homeStart" alt="">
|
|
</template>
|
|
</bt-button>
|
|
<bt-button
|
|
v-else
|
|
button-text="停止加液"
|
|
bg-color="#FF6767"
|
|
:text-color="btnStyle.textColor"
|
|
:width="btnStyle.width"
|
|
:height="btnStyle.height"
|
|
:text-size="btnStyle.textSize"
|
|
:border-radius="btnStyle.borderRadius"
|
|
@click="onStopAddLiquid"
|
|
>
|
|
<template #icon>
|
|
<img :src="homeFinish" alt="">
|
|
</template>
|
|
</bt-button>
|
|
</div>
|
|
<div class="liquid-drain">
|
|
<bt-button
|
|
v-if="drainWorkState.workState === 'idle'"
|
|
button-text="开始排液"
|
|
bg-color="#2892F3"
|
|
:text-color="btnStyle.textColor"
|
|
:width="btnStyle.width"
|
|
:height="btnStyle.height"
|
|
:text-size="btnStyle.textSize"
|
|
:border-radius="btnStyle.borderRadius"
|
|
@click="onStartDrainLiquid"
|
|
>
|
|
<template #icon>
|
|
<img :src="homeStart" alt="">
|
|
</template>
|
|
</bt-button>
|
|
<bt-button
|
|
v-else
|
|
button-text="停止排液"
|
|
bg-color="#FF6767"
|
|
:text-color="btnStyle.textColor"
|
|
:width="btnStyle.width"
|
|
:height="btnStyle.height"
|
|
:text-size="btnStyle.textSize"
|
|
:border-radius="btnStyle.borderRadius"
|
|
@click="onStopDrainLiquid"
|
|
>
|
|
<template #icon>
|
|
<img :src="homeFinish" alt="">
|
|
</template>
|
|
</bt-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<SoftKeyboard
|
|
ref="softKeyboardRef"
|
|
v-model="inputValue"
|
|
:is-visible="keyboardVisible"
|
|
:keyboard-type="keyboardType"
|
|
@update-keyboard-visible="(visible) => keyboardVisible = visible"
|
|
@confirm="handleConfirm"
|
|
@close="keyboardVisible = false"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.main-content{
|
|
display: grid;
|
|
grid-template-columns: repeat(3,1fr);
|
|
height: $main-container-height;
|
|
gap: 10px;
|
|
overflow: hidden;
|
|
.liquid-left{
|
|
background: #FFFFFF;
|
|
grid-column: 1 / 3;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
box-shadow: 0px 1px 5px 0px rgba(9, 39, 62, 0.15);
|
|
background: $gradient-color;
|
|
}
|
|
.liquid-right{
|
|
background:#FFFFFF;
|
|
box-shadow: 0px 1px 5px 0px rgba(9, 39, 62, 0.15);
|
|
padding-top: 15vh;
|
|
width: 100%;
|
|
background: $gradient-color;
|
|
.liquid-surplus-title{
|
|
height: 10vh;
|
|
display: flex;
|
|
padding-left: 2rem;
|
|
align-items: center;
|
|
font-size: 24px;
|
|
font-weight: 400;
|
|
|
|
.liquid-title-g{
|
|
color: #2892F3;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
.liquid-input{
|
|
display: flex;
|
|
padding-left: 2rem;
|
|
align-items: center;
|
|
.input{
|
|
width: 25vw;
|
|
}
|
|
}
|
|
|
|
.liquid-opt{
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 5vh;
|
|
}
|
|
.liquid-add-btn{
|
|
width: 27vw;
|
|
height: 8vh;
|
|
border-radius: 12px;
|
|
color: #FFFFFF;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 24px;
|
|
gap: 10px;
|
|
}
|
|
|
|
.liquid-drain{
|
|
margin-top: 1.5rem;
|
|
}
|
|
}
|
|
}
|
|
</style>
|