|
|
@ -7,7 +7,7 @@ |
|
|
|
{{ |
|
|
|
operatorStore.estimatedRemainingTimeS == 0 |
|
|
|
? '已结束' |
|
|
|
: `${operatorStore.estimatedRemainingTimeS} S` |
|
|
|
: `${time_To_hhmmss(operatorStore.estimatedRemainingTimeS)}` |
|
|
|
}} |
|
|
|
</p> |
|
|
|
<!-- <div class="progress_bg"> |
|
|
@ -30,7 +30,7 @@ |
|
|
|
> |
|
|
|
停止消毒 |
|
|
|
</div> |
|
|
|
<div |
|
|
|
<!-- <div |
|
|
|
:class=" |
|
|
|
operatorStore.disinfectStatus == 1 ? 'btn active ml' : 'btn ml' |
|
|
|
" |
|
|
@ -43,7 +43,7 @@ |
|
|
|
@click="continueDisinfect" |
|
|
|
> |
|
|
|
继续消毒 |
|
|
|
</div> |
|
|
|
</div> --> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="echarts_wrap"> |
|
|
@ -80,6 +80,7 @@ |
|
|
|
|
|
|
|
<script setup> |
|
|
|
import { useOperatorStore, useWebSocketStore, useEchartsStore } from '@/store' |
|
|
|
import { time_To_hhmmss } from '@/utils' |
|
|
|
import { |
|
|
|
stopDisinfectionJSON, |
|
|
|
getStateJSON, |
|
|
@ -247,6 +248,9 @@ const timer = ref(null) |
|
|
|
const binCharts = ref(null) |
|
|
|
const envir1Charts = ref(null) |
|
|
|
const envir2Charts = ref(null) |
|
|
|
|
|
|
|
const time1 = ref(null) |
|
|
|
const time2 = ref(null) |
|
|
|
onMounted(() => { |
|
|
|
timer.value = setInterval(() => { |
|
|
|
webSocketStore.sendCommandMsg(getStateJSON) |
|
|
@ -267,7 +271,136 @@ onMounted(() => { |
|
|
|
envir2Charts.value.setOption(envir2Option.value) |
|
|
|
} |
|
|
|
|
|
|
|
setInterval(() => { |
|
|
|
time1.value = setInterval(() => { |
|
|
|
binCharts.value?.setOption({ |
|
|
|
tooltip: { |
|
|
|
trigger: 'axis', |
|
|
|
}, |
|
|
|
legend: { |
|
|
|
data: ['温度', '湿度', '过氧化氢浓度'], |
|
|
|
}, |
|
|
|
grid: { |
|
|
|
left: '3%', |
|
|
|
right: '4%', |
|
|
|
bottom: '3%', |
|
|
|
containLabel: true, |
|
|
|
}, |
|
|
|
xAxis: { |
|
|
|
type: 'category', |
|
|
|
boundaryGap: false, |
|
|
|
data: Object.keys(echartsStore.binCharts), |
|
|
|
}, |
|
|
|
yAxis: { |
|
|
|
type: 'value', |
|
|
|
}, |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
name: '温度', |
|
|
|
type: 'line', |
|
|
|
stack: 'Total', |
|
|
|
data: echartsStore.binTemp, |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '湿度', |
|
|
|
type: 'line', |
|
|
|
stack: 'Total', |
|
|
|
data: echartsStore.binHumidity, |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '过氧化氢浓度', |
|
|
|
type: 'line', |
|
|
|
stack: 'Total', |
|
|
|
data: echartsStore.binHP, |
|
|
|
}, |
|
|
|
], |
|
|
|
}) |
|
|
|
envir1Charts.value?.setOption({ |
|
|
|
tooltip: { |
|
|
|
trigger: 'axis', |
|
|
|
}, |
|
|
|
legend: { |
|
|
|
data: ['温度', '湿度', '过氧化氢浓度'], |
|
|
|
}, |
|
|
|
grid: { |
|
|
|
left: '3%', |
|
|
|
right: '4%', |
|
|
|
bottom: '3%', |
|
|
|
containLabel: true, |
|
|
|
}, |
|
|
|
xAxis: { |
|
|
|
type: 'category', |
|
|
|
boundaryGap: false, |
|
|
|
data: Object.keys(echartsStore.envir1Charts), |
|
|
|
}, |
|
|
|
yAxis: { |
|
|
|
type: 'value', |
|
|
|
}, |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
name: '温度', |
|
|
|
type: 'line', |
|
|
|
stack: 'Total', |
|
|
|
data: echartsStore.envir1Temp, |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '湿度', |
|
|
|
type: 'line', |
|
|
|
stack: 'Total', |
|
|
|
data: echartsStore.envir1Humidity, |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '过氧化氢浓度', |
|
|
|
type: 'line', |
|
|
|
stack: 'Total', |
|
|
|
data: echartsStore.envir1HP, |
|
|
|
}, |
|
|
|
], |
|
|
|
}) |
|
|
|
envir2Charts.value?.setOption({ |
|
|
|
tooltip: { |
|
|
|
trigger: 'axis', |
|
|
|
}, |
|
|
|
legend: { |
|
|
|
data: ['温度', '湿度', '过氧化氢浓度'], |
|
|
|
}, |
|
|
|
grid: { |
|
|
|
left: '3%', |
|
|
|
right: '4%', |
|
|
|
bottom: '3%', |
|
|
|
containLabel: true, |
|
|
|
}, |
|
|
|
xAxis: { |
|
|
|
type: 'category', |
|
|
|
boundaryGap: false, |
|
|
|
data: Object.keys(echartsStore.envir2Charts), |
|
|
|
}, |
|
|
|
yAxis: { |
|
|
|
type: 'value', |
|
|
|
}, |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
name: '温度', |
|
|
|
type: 'line', |
|
|
|
stack: 'Total', |
|
|
|
data: echartsStore.envir2Temp, |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '湿度', |
|
|
|
type: 'line', |
|
|
|
stack: 'Total', |
|
|
|
data: echartsStore.envir2Humidity, |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '过氧化氢浓度', |
|
|
|
type: 'line', |
|
|
|
stack: 'Total', |
|
|
|
data: echartsStore.envir2HP, |
|
|
|
}, |
|
|
|
], |
|
|
|
}) |
|
|
|
}, 1000 * 20) |
|
|
|
|
|
|
|
time2.value = setTimeout(() => { |
|
|
|
binCharts.value?.setOption({ |
|
|
|
tooltip: { |
|
|
|
trigger: 'axis', |
|
|
@ -394,12 +527,14 @@ onMounted(() => { |
|
|
|
}, |
|
|
|
], |
|
|
|
}) |
|
|
|
}, 1000 * 30) |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
// 监听到store中的数据变化动态更改options |
|
|
|
onUnmounted(() => { |
|
|
|
timer.value = null |
|
|
|
time1.value = null |
|
|
|
time2.value = null |
|
|
|
}) |
|
|
|
|
|
|
|
const pauseDisinfect = () => { |
|
|
|