|
|
@ -1,12 +1,12 @@ |
|
|
<script lang="ts" setup> |
|
|
<script lang="ts" setup> |
|
|
import { syncSendCmd } from 'apis/system' |
|
|
|
|
|
|
|
|
import { sendCmd, syncSendCmd } from 'apis/system' |
|
|
import homeFinish from 'assets/images/home/home-finish.svg' |
|
|
import homeFinish from 'assets/images/home/home-finish.svg' |
|
|
import homeSettingSvg from 'assets/images/home/home-setting.svg' |
|
|
|
|
|
import BtButton from 'components/common/BTButton/index.vue' |
|
|
|
|
|
import RunFormulaConfig from 'components/formula/RunFormulaConfig.vue' |
|
|
import RunFormulaConfig from 'components/formula/RunFormulaConfig.vue' |
|
|
import LineChart from 'components/home/LineChart.vue' |
|
|
import LineChart from 'components/home/LineChart.vue' |
|
|
|
|
|
import { ElLoading } from 'element-plus' |
|
|
import { stopTimer } from 'libs/countdownTimer' |
|
|
import { stopTimer } from 'libs/countdownTimer' |
|
|
import { FtMessage } from 'libs/message' |
|
|
import { FtMessage } from 'libs/message' |
|
|
|
|
|
import { FtMessageBox } from 'libs/messageBox' |
|
|
import { compareJSON, deviceStateMap } from 'libs/utils' |
|
|
import { compareJSON, deviceStateMap } from 'libs/utils' |
|
|
import { computed, onMounted, onUnmounted, provide, ref, watchEffect } from 'vue' |
|
|
import { computed, onMounted, onUnmounted, provide, ref, watchEffect } from 'vue' |
|
|
import { useRouter } from 'vue-router' |
|
|
import { useRouter } from 'vue-router' |
|
|
@ -26,13 +26,26 @@ const disinfectionState = ref(homeStore.disinfectionState) |
|
|
const curStateRemainTime = ref(homeStore.curStateRemainTime) |
|
|
const curStateRemainTime = ref(homeStore.curStateRemainTime) |
|
|
const disinfectFormulaVisible = ref(false) |
|
|
const disinfectFormulaVisible = ref(false) |
|
|
const isDeviceIdle = ref(homeStore.isDeviceIdle) |
|
|
const isDeviceIdle = ref(homeStore.isDeviceIdle) |
|
|
const loading = ref(false) |
|
|
|
|
|
|
|
|
|
|
|
watchEffect(() => { |
|
|
|
|
|
|
|
|
const rate = ref() |
|
|
|
|
|
const log = ref() |
|
|
|
|
|
|
|
|
|
|
|
watchEffect(async () => { |
|
|
formulaInfo.value = formulaStore.currentSelectedFormulaInfo |
|
|
formulaInfo.value = formulaStore.currentSelectedFormulaInfo |
|
|
disinfectionState.value = homeStore.disinfectionState |
|
|
disinfectionState.value = homeStore.disinfectionState |
|
|
curStateRemainTime.value = homeStore.curStateRemainTime |
|
|
curStateRemainTime.value = homeStore.curStateRemainTime |
|
|
isDeviceIdle.value = homeStore.isDeviceIdle |
|
|
isDeviceIdle.value = homeStore.isDeviceIdle |
|
|
|
|
|
|
|
|
|
|
|
if (['idle', 'finished'].includes(homeStore.disinfectionState.state)) { |
|
|
|
|
|
formulaInfo.value = formulaStore.selectedFormulaInfo |
|
|
|
|
|
rate.value = formulaStore.selectedFormulaInfo?.injection_pump_speed |
|
|
|
|
|
log.value = formulaStore.selectedFormulaInfo?.loglevel |
|
|
|
|
|
} |
|
|
|
|
|
else { |
|
|
|
|
|
const realForm = (await formulaStore.getRealtimeConfig()).rely |
|
|
|
|
|
rate.value = homeStore.realRate || realForm?.injection_pump_speed |
|
|
|
|
|
log.value = homeStore.realLog || realForm?.loglevel |
|
|
|
|
|
} |
|
|
}) |
|
|
}) |
|
|
|
|
|
|
|
|
const onDisinfectConfig = () => { |
|
|
const onDisinfectConfig = () => { |
|
|
@ -41,20 +54,33 @@ const onDisinfectConfig = () => { |
|
|
|
|
|
|
|
|
// 结束消毒 |
|
|
// 结束消毒 |
|
|
const onFinishDisinfect = async () => { |
|
|
const onFinishDisinfect = async () => { |
|
|
|
|
|
await FtMessageBox.warning('请确认是否结束消毒') |
|
|
|
|
|
homeStore.setRate(undefined) |
|
|
|
|
|
homeStore.setLog(undefined) |
|
|
stopTimer() |
|
|
stopTimer() |
|
|
const stopParams = { |
|
|
|
|
|
className: 'DisinfectionCtrlServiceExt', |
|
|
|
|
|
fnName: 'stop', |
|
|
|
|
|
params: { |
|
|
|
|
|
loglevel: formulaStore.loglevel, |
|
|
|
|
|
}, |
|
|
|
|
|
} |
|
|
|
|
|
loading.value = true |
|
|
|
|
|
syncSendCmd(stopParams).then((res) => { |
|
|
|
|
|
if (res.ackcode === 0) { |
|
|
|
|
|
loading.value = false |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
const loading = ElLoading.service({ |
|
|
|
|
|
lock: true, |
|
|
|
|
|
text: '正在结束消毒', |
|
|
|
|
|
background: 'rgba(255, 255, 255, 0.8)', |
|
|
}) |
|
|
}) |
|
|
|
|
|
try { |
|
|
|
|
|
const stopParams = { |
|
|
|
|
|
className: 'DisinfectionCtrlServiceExt', |
|
|
|
|
|
fnName: 'stop', |
|
|
|
|
|
params: { loglevel: formulaStore.loglevel }, |
|
|
|
|
|
} |
|
|
|
|
|
await sendCmd(stopParams) |
|
|
|
|
|
const poll = setInterval(() => { |
|
|
|
|
|
if (operationState.value) { |
|
|
|
|
|
loading.close() |
|
|
|
|
|
clearInterval(poll) |
|
|
|
|
|
} |
|
|
|
|
|
}, 100) |
|
|
|
|
|
} |
|
|
|
|
|
catch (e) { |
|
|
|
|
|
console.log(e) |
|
|
|
|
|
loading.close() |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
const chartRef = ref() |
|
|
const chartRef = ref() |
|
|
const onSave = async () => { |
|
|
const onSave = async () => { |
|
|
@ -74,6 +100,7 @@ const onSave = async () => { |
|
|
) |
|
|
) |
|
|
FtMessage.success('设定成功') |
|
|
FtMessage.success('设定成功') |
|
|
homeStore.setRate(formData.injection_pump_speed) |
|
|
homeStore.setRate(formData.injection_pump_speed) |
|
|
|
|
|
homeStore.setLog(formData.loglevel) |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@ -151,11 +178,31 @@ const formatSeconds = (seconds: number) => { |
|
|
|
|
|
|
|
|
<template> |
|
|
<template> |
|
|
<main class="main-content"> |
|
|
<main class="main-content"> |
|
|
<!-- <div class="line-chart-title"> --> |
|
|
|
|
|
<!-- <div class="line-chart-formula"> --> |
|
|
|
|
|
<!-- <HomeFormula style="background: #e0f0ff" /> --> |
|
|
|
|
|
<!-- </div> --> |
|
|
|
|
|
<!-- </div> --> |
|
|
|
|
|
|
|
|
<el-descriptions :column="4"> |
|
|
|
|
|
<el-descriptions-item label="设定注射速率"> |
|
|
|
|
|
<el-tag> |
|
|
|
|
|
<span style="color: #31cb7a; font-size: 18px; margin: 0 5px">{{ rate }}</span>g/min |
|
|
|
|
|
</el-tag> |
|
|
|
|
|
</el-descriptions-item> |
|
|
|
|
|
<el-descriptions-item label="实时注射速率"> |
|
|
|
|
|
<el-tag> |
|
|
|
|
|
<span style="color: #31cb7a; font-size: 18px; margin: 0 5px">{{ |
|
|
|
|
|
homeStore.disinfectionState.injectedVelocity |
|
|
|
|
|
}}</span>g/min |
|
|
|
|
|
</el-tag> |
|
|
|
|
|
</el-descriptions-item> |
|
|
|
|
|
<el-descriptions-item label="目标消毒等级"> |
|
|
|
|
|
<el-tag> |
|
|
|
|
|
<span style="color: #31cb7a; font-size: 18px; margin: 0 5px">{{ log }}</span>Log |
|
|
|
|
|
</el-tag> |
|
|
|
|
|
</el-descriptions-item> |
|
|
|
|
|
|
|
|
|
|
|
<el-descriptions-item label="实时消毒等级"> |
|
|
|
|
|
<el-tag> |
|
|
|
|
|
<span style="color: #31cb7a; font-size: 18px; margin: 0 5px">{{ homeStore.disinfectionState.nlog }}</span>Log |
|
|
|
|
|
</el-tag> |
|
|
|
|
|
</el-descriptions-item> |
|
|
|
|
|
</el-descriptions> |
|
|
<div |
|
|
<div |
|
|
v-loading="chartLoading" |
|
|
v-loading="chartLoading" |
|
|
class="line-chart-content" |
|
|
class="line-chart-content" |
|
|
@ -179,46 +226,21 @@ const formatSeconds = (seconds: number) => { |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="home-chart-btn"> |
|
|
<div class="home-chart-btn"> |
|
|
<BtButton |
|
|
|
|
|
v-if="!isDeviceIdle" |
|
|
|
|
|
button-text="结束消毒" |
|
|
|
|
|
bg-color="#FF6767" |
|
|
|
|
|
text-color="#FFFFFF" |
|
|
|
|
|
width="15vw" |
|
|
|
|
|
height="3.5rem" |
|
|
|
|
|
text-size="24px" |
|
|
|
|
|
border-radius="5px" |
|
|
|
|
|
@click="onFinishDisinfect" |
|
|
|
|
|
> |
|
|
|
|
|
|
|
|
<el-button v-if="!isDeviceIdle" type="danger" @click="onFinishDisinfect"> |
|
|
<template #icon> |
|
|
<template #icon> |
|
|
<img :src="homeFinish" alt=""> |
|
|
|
|
|
|
|
|
<img :src="homeFinish" alt="" style="height: 20px"> |
|
|
</template> |
|
|
</template> |
|
|
</BtButton> |
|
|
|
|
|
<BtButton |
|
|
|
|
|
v-if="!isDeviceIdle" |
|
|
|
|
|
button-text="运行参数" |
|
|
|
|
|
text-size="24px" |
|
|
|
|
|
border-radius="5px" |
|
|
|
|
|
height="3.5rem" |
|
|
|
|
|
text-color="#1989fa" |
|
|
|
|
|
padding="0.8vw" |
|
|
|
|
|
@click="onDisinfectConfig" |
|
|
|
|
|
> |
|
|
|
|
|
<template #icon> |
|
|
|
|
|
<img :src="homeSettingSvg" width="15" alt=""> |
|
|
|
|
|
</template> |
|
|
|
|
|
</BtButton> |
|
|
|
|
|
<BtButton |
|
|
|
|
|
button-text="返回" |
|
|
|
|
|
width="10vw" |
|
|
|
|
|
height="7vh" |
|
|
|
|
|
text-color="#1989fa" |
|
|
|
|
|
text-size="24px" |
|
|
|
|
|
border-radius="5px" |
|
|
|
|
|
@click="goHome" |
|
|
|
|
|
/> |
|
|
|
|
|
|
|
|
结束消毒 |
|
|
|
|
|
</el-button> |
|
|
|
|
|
<el-button v-if="!isDeviceIdle" type="primary" @click="onDisinfectConfig"> |
|
|
|
|
|
运行参数 |
|
|
|
|
|
</el-button> |
|
|
|
|
|
<el-button @click="goHome"> |
|
|
|
|
|
返回 |
|
|
|
|
|
</el-button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<ft-dialog v-model="disinfectFormulaVisible" title="运行参数" width="80vw"> |
|
|
<ft-dialog v-model="disinfectFormulaVisible" title="运行参数" width="80vw"> |
|
|
<div class="formula-config"> |
|
|
<div class="formula-config"> |
|
|
<RunFormulaConfig ref="chartRef" /> |
|
|
<RunFormulaConfig ref="chartRef" /> |
|
|
@ -240,8 +262,11 @@ const formatSeconds = (seconds: number) => { |
|
|
<style lang="scss" scoped> |
|
|
<style lang="scss" scoped> |
|
|
.main-content { |
|
|
.main-content { |
|
|
overflow: hidden; |
|
|
overflow: hidden; |
|
|
background: $gradient-color; |
|
|
|
|
|
height: $main-container-height; |
|
|
|
|
|
|
|
|
background: rgba(147, 203, 255, 0.1); |
|
|
|
|
|
height: 100%; |
|
|
|
|
|
border-radius: 10px; |
|
|
|
|
|
box-shadow: 0 1px 5px 0 rgba(9, 39, 62, 0.15); |
|
|
|
|
|
padding: 10px; |
|
|
.formula-config { |
|
|
.formula-config { |
|
|
display: grid; |
|
|
display: grid; |
|
|
padding: 10px; |
|
|
padding: 10px; |
|
|
@ -272,10 +297,10 @@ const formatSeconds = (seconds: number) => { |
|
|
} |
|
|
} |
|
|
.line-chart-content { |
|
|
.line-chart-content { |
|
|
display: grid; |
|
|
display: grid; |
|
|
height: calc(100% - 60px); |
|
|
|
|
|
|
|
|
height: calc(100% - 80px); |
|
|
} |
|
|
} |
|
|
.line-chart-bottom { |
|
|
.line-chart-bottom { |
|
|
height: 60px; |
|
|
|
|
|
|
|
|
height: 40px; |
|
|
display: flex; |
|
|
display: flex; |
|
|
padding-right: 20px; |
|
|
padding-right: 20px; |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
@ -287,21 +312,55 @@ const formatSeconds = (seconds: number) => { |
|
|
.home-chart-time { |
|
|
.home-chart-time { |
|
|
width: 35%; |
|
|
width: 35%; |
|
|
.home-remain-time { |
|
|
.home-remain-time { |
|
|
background: #f6fafe; |
|
|
|
|
|
width: 27vw; |
|
|
|
|
|
height: 8vh; |
|
|
|
|
|
|
|
|
background: #fff; |
|
|
|
|
|
margin: 10px; |
|
|
|
|
|
height: 40px; |
|
|
border-radius: 12px; |
|
|
border-radius: 12px; |
|
|
display: flex; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
justify-content: center; |
|
|
font-size: 24px; |
|
|
|
|
|
|
|
|
font-size: 20px; |
|
|
gap: 10px; |
|
|
gap: 10px; |
|
|
margin-left: 1rem; |
|
|
|
|
|
.home-chart-value { |
|
|
|
|
|
|
|
|
.home-remaini-value { |
|
|
color: #2892f3; |
|
|
color: #2892f3; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
:deep(.el-descriptions) { |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
height: 40px; |
|
|
|
|
|
.el-descriptions__body { |
|
|
|
|
|
background: rgba(0, 0, 0, 0); |
|
|
|
|
|
.el-descriptions__table { |
|
|
|
|
|
tr { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
justify-content: center; |
|
|
|
|
|
gap: 20px; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
:deep(.el-descriptions__cell) { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
//background: #fff; |
|
|
|
|
|
//margin-bottom: 5px; |
|
|
|
|
|
//padding: 5px !important; |
|
|
|
|
|
//.el-descriptions__label { |
|
|
|
|
|
// display: inline-block; |
|
|
|
|
|
// width: 120px; |
|
|
|
|
|
// margin: 0; |
|
|
|
|
|
// font-size: 15px; |
|
|
|
|
|
// font-weight: 600; |
|
|
|
|
|
// color: #606266; |
|
|
|
|
|
//} |
|
|
|
|
|
//.el-descriptions__content { |
|
|
|
|
|
// flex: 1; |
|
|
|
|
|
// text-align: right; |
|
|
|
|
|
// display: flex; |
|
|
|
|
|
// justify-content: flex-end; |
|
|
|
|
|
//} |
|
|
|
|
|
} |
|
|
</style> |
|
|
</style> |
