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.
775 lines
17 KiB
775 lines
17 KiB
<template>
|
|
<div class="progress_container">
|
|
<div class="header_wrap">
|
|
<div class="left_progress">
|
|
<div class="left_time_tag">剩余时间</div>
|
|
<p class="time">
|
|
{{
|
|
operatorStore.estimatedRemainingTimeS == 0
|
|
? '已结束'
|
|
: `${time_To_hhmmss(operatorStore.estimatedRemainingTimeS)}`
|
|
}}
|
|
</p>
|
|
<p class="pre_time">预热时间约5分钟</p>
|
|
<!-- <div class="progress_bg">
|
|
<div
|
|
class="pro"
|
|
:style="{
|
|
'--width': '325px',
|
|
}"
|
|
></div>
|
|
</div> -->
|
|
</div>
|
|
<div class="right_btns">
|
|
<div
|
|
:class="
|
|
[1, 2].includes(operatorStore.disinfectStatus)
|
|
? 'btn active'
|
|
: 'btn'
|
|
"
|
|
v-if="[1, 2].includes(operatorStore.disinfectStatus)"
|
|
@click="stopDisinfect"
|
|
>
|
|
停止消毒
|
|
</div>
|
|
<div
|
|
:class="
|
|
[0].includes(operatorStore.disinfectStatus) ? 'btn active' : 'btn'
|
|
"
|
|
v-if="operatorStore.disinfectStatus == 0"
|
|
@click="showDetail"
|
|
>
|
|
返回
|
|
</div>
|
|
<!-- <div
|
|
:class="
|
|
operatorStore.disinfectStatus == 1 ? 'btn active ml' : 'btn ml'
|
|
"
|
|
@click="pauseDisinfect"
|
|
>
|
|
暂停消毒
|
|
</div>
|
|
<div
|
|
:class="operatorStore.disinfectStatus == 2 ? 'btn active' : 'btn'"
|
|
@click="continueDisinfect"
|
|
>
|
|
继续消毒
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
<div class="echarts_wrap">
|
|
<div class="single_wrap">
|
|
<p class="title">设备温度/湿度/过氧化氢浓度</p>
|
|
<div
|
|
class="echarts_box"
|
|
id="bin"
|
|
v-if="operatorStore.disinfectStatus != 0 || binLocal"
|
|
></div>
|
|
</div>
|
|
<div class="single_wrap">
|
|
<p class="title">环境1/湿度/过氧化氢浓度</p>
|
|
<div
|
|
class="echarts_box"
|
|
id="envir1"
|
|
v-if="operatorStore.disinfectStatus != 0 || envir1Local"
|
|
></div>
|
|
</div>
|
|
<div class="single_wrap">
|
|
<p class="title">环境2/湿度/过氧化氢浓度</p>
|
|
<div
|
|
class="echarts_box"
|
|
id="envir2"
|
|
v-if="operatorStore.disinfectStatus != 0 || envir2Local"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
<div class="detail_wrap">
|
|
<div class="detail" @click="showDetail">详情</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useOperatorStore, useWebSocketStore, useEchartsStore } from '@/store'
|
|
import { time_To_hhmmss } from '@/utils'
|
|
import {
|
|
stopDisinfectionJSON,
|
|
getStateJSON,
|
|
continueDisinfectionJSON,
|
|
pauseDisinfectionJSON,
|
|
} from '@/mock/command'
|
|
import { onMounted, onUnmounted, ref, computed, watch } from 'vue'
|
|
import * as echarts from 'echarts'
|
|
import { storeToRefs } from 'pinia'
|
|
|
|
const echartsStore = useEchartsStore()
|
|
|
|
const binLocal = computed(() => {
|
|
return echartsStore?.binCharts || localStorage.getItem('bin')
|
|
})
|
|
|
|
const envir1Local = computed(() => {
|
|
return echartsStore?.envir1Charts || localStorage.getItem('envir1')
|
|
})
|
|
|
|
const envir2Local = computed(() => {
|
|
return echartsStore?.envir2Charts || localStorage.getItem('envir2')
|
|
})
|
|
|
|
const binOption = ref({
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
},
|
|
legend: {
|
|
data: ['温度', '湿度', 'H2O2浓度', 'H2O2饱和度'],
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: echartsStore.abscissaFormater,
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
},
|
|
series: [
|
|
{
|
|
name: '温度',
|
|
type: 'line',
|
|
stack: 'binTemp',
|
|
data: echartsStore.binTemp,
|
|
},
|
|
{
|
|
name: '湿度',
|
|
type: 'line',
|
|
stack: 'binHumidity',
|
|
data: echartsStore.binHumidity,
|
|
},
|
|
{
|
|
name: 'H2O2浓度',
|
|
type: 'line',
|
|
stack: 'binHP',
|
|
data: echartsStore.binHP,
|
|
},
|
|
{
|
|
name: 'H2O2饱和度',
|
|
type: 'line',
|
|
stack: 'binSaturation',
|
|
data: echartsStore.binSaturation,
|
|
},
|
|
],
|
|
})
|
|
const envir1Option = ref({
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
},
|
|
legend: {
|
|
data: ['温度', '湿度', 'H2O2浓度', 'H2O2饱和度'],
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: echartsStore.abscissaFormater,
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
},
|
|
series: [
|
|
{
|
|
name: '温度',
|
|
type: 'line',
|
|
stack: '1',
|
|
data: [],
|
|
},
|
|
{
|
|
name: '湿度',
|
|
type: 'line',
|
|
stack: '2',
|
|
data: [],
|
|
},
|
|
{
|
|
name: 'H2O2浓度',
|
|
type: 'line',
|
|
stack: '3',
|
|
data: [],
|
|
},
|
|
{
|
|
name: 'H2O2饱和度',
|
|
type: 'line',
|
|
stack: '4',
|
|
data: [],
|
|
},
|
|
],
|
|
})
|
|
const envir2Option = ref({
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
},
|
|
legend: {
|
|
data: ['温度', '湿度', 'H2O2浓度', 'H2O2饱和度'],
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: echartsStore.abscissaFormater,
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
},
|
|
series: [
|
|
{
|
|
name: '温度',
|
|
type: 'line',
|
|
stack: '1',
|
|
data: [],
|
|
},
|
|
{
|
|
name: '湿度',
|
|
type: 'line',
|
|
stack: '2',
|
|
data: [],
|
|
},
|
|
{
|
|
name: 'H2O2浓度',
|
|
type: 'line',
|
|
stack: '3',
|
|
data: [],
|
|
},
|
|
{
|
|
name: 'H2O2饱和度',
|
|
type: 'line',
|
|
stack: '4',
|
|
data: [],
|
|
},
|
|
],
|
|
})
|
|
|
|
const operatorStore = useOperatorStore()
|
|
const webSocketStore = useWebSocketStore()
|
|
const props = defineProps({
|
|
changeShowOperator: {
|
|
type: Function,
|
|
},
|
|
})
|
|
const showDetail = () => {
|
|
props.changeShowOperator(true)
|
|
}
|
|
|
|
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)
|
|
}, 1000)
|
|
let a = echarts.getInstanceByDom(document.getElementById('bin'))
|
|
if (a == undefined) {
|
|
binCharts.value = echarts.init(document.getElementById('bin'))
|
|
binCharts.value.setOption(binOption.value)
|
|
}
|
|
let b = echarts.getInstanceByDom(document.getElementById('envir1'))
|
|
if (b == undefined) {
|
|
envir1Charts.value = echarts.init(document.getElementById('envir1'))
|
|
envir1Charts.value.setOption(envir1Option.value)
|
|
}
|
|
let c = echarts.getInstanceByDom(document.getElementById('envir2'))
|
|
if (c == undefined) {
|
|
envir2Charts.value = echarts.init(document.getElementById('envir2'))
|
|
envir2Charts.value.setOption(envir2Option.value)
|
|
}
|
|
|
|
time1.value = setInterval(() => {
|
|
binCharts.value?.setOption({
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
},
|
|
legend: {
|
|
data: ['温度', '湿度', 'H2O2浓度', 'H2O2饱和度'],
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: echartsStore.abscissaFormater,
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
},
|
|
series: [
|
|
{
|
|
name: '温度',
|
|
type: 'line',
|
|
stack: 'binTemp',
|
|
data: echartsStore.binTemp,
|
|
},
|
|
{
|
|
name: '湿度',
|
|
type: 'line',
|
|
stack: 'binHumidity',
|
|
data: echartsStore.binHumidity,
|
|
},
|
|
{
|
|
name: 'H2O2浓度',
|
|
type: 'line',
|
|
stack: 'binHP',
|
|
data: echartsStore.binHP,
|
|
},
|
|
{
|
|
name: 'H2O2饱和度',
|
|
type: 'line',
|
|
stack: 'binSaturation',
|
|
data: echartsStore.binSaturation,
|
|
},
|
|
],
|
|
})
|
|
envir1Charts.value?.setOption({
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
},
|
|
legend: {
|
|
data: ['温度', '湿度', 'H2O2浓度', 'H2O2饱和度'],
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: echartsStore.abscissaFormater,
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
},
|
|
series: [
|
|
{
|
|
name: '温度',
|
|
type: 'line',
|
|
stack: '1',
|
|
data: [],
|
|
},
|
|
{
|
|
name: '湿度',
|
|
type: 'line',
|
|
stack: '2',
|
|
data: [],
|
|
},
|
|
{
|
|
name: 'H2O2浓度',
|
|
type: 'line',
|
|
stack: '3',
|
|
data: [],
|
|
},
|
|
{
|
|
name: 'H2O2饱和度',
|
|
type: 'line',
|
|
stack: '4',
|
|
data: [],
|
|
},
|
|
],
|
|
})
|
|
envir2Charts.value?.setOption({
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
},
|
|
legend: {
|
|
data: ['温度', '湿度', 'H2O2浓度', 'H2O2饱和度'],
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: echartsStore.abscissaFormater,
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
},
|
|
series: [
|
|
{
|
|
name: '温度',
|
|
type: 'line',
|
|
stack: '1',
|
|
data: [],
|
|
},
|
|
{
|
|
name: '湿度',
|
|
type: 'line',
|
|
stack: '2',
|
|
data: [],
|
|
},
|
|
{
|
|
name: 'H2O2浓度',
|
|
type: 'line',
|
|
stack: '3',
|
|
data: [],
|
|
},
|
|
{
|
|
name: 'H2O2饱和度',
|
|
type: 'line',
|
|
stack: '4',
|
|
data: [],
|
|
},
|
|
],
|
|
})
|
|
}, 1000 * 20)
|
|
|
|
time1.value = setInterval(() => {
|
|
binCharts.value?.setOption({
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
},
|
|
legend: {
|
|
data: ['温度', '湿度', 'H2O2浓度', 'H2O2饱和度'],
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: echartsStore.abscissaFormater,
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
},
|
|
series: [
|
|
{
|
|
name: '温度',
|
|
type: 'line',
|
|
stack: 'binTemp',
|
|
data: echartsStore.binTemp,
|
|
},
|
|
{
|
|
name: '湿度',
|
|
type: 'line',
|
|
stack: 'binHumidity',
|
|
data: echartsStore.binHumidity,
|
|
},
|
|
{
|
|
name: 'H2O2浓度',
|
|
type: 'line',
|
|
stack: 'binHP',
|
|
data: echartsStore.binHP,
|
|
},
|
|
{
|
|
name: 'H2O2饱和度',
|
|
type: 'line',
|
|
stack: 'binSaturation',
|
|
data: echartsStore.binSaturation,
|
|
},
|
|
],
|
|
})
|
|
envir1Charts.value?.setOption({
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
},
|
|
legend: {
|
|
data: ['温度', '湿度', 'H2O2浓度', 'H2O2饱和度'],
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: echartsStore.abscissaFormater,
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
},
|
|
series: [
|
|
{
|
|
name: '温度',
|
|
type: 'line',
|
|
stack: '1',
|
|
data: [],
|
|
},
|
|
{
|
|
name: '湿度',
|
|
type: 'line',
|
|
stack: '2',
|
|
data: [],
|
|
},
|
|
{
|
|
name: 'H2O2浓度',
|
|
type: 'line',
|
|
stack: '3',
|
|
data: [],
|
|
},
|
|
{
|
|
name: 'H2O2饱和度',
|
|
type: 'line',
|
|
stack: '4',
|
|
data: [],
|
|
},
|
|
],
|
|
})
|
|
envir2Charts.value?.setOption({
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
},
|
|
legend: {
|
|
data: ['温度', '湿度', 'H2O2浓度', 'H2O2饱和度'],
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: echartsStore.abscissaFormater,
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
},
|
|
series: [
|
|
{
|
|
name: '温度',
|
|
type: 'line',
|
|
stack: '1',
|
|
data: [],
|
|
},
|
|
{
|
|
name: '湿度',
|
|
type: 'line',
|
|
stack: '2',
|
|
data: [],
|
|
},
|
|
{
|
|
name: 'H2O2浓度',
|
|
type: 'line',
|
|
stack: '3',
|
|
data: [],
|
|
},
|
|
{
|
|
name: 'H2O2饱和度',
|
|
type: 'line',
|
|
stack: '4',
|
|
data: [],
|
|
},
|
|
],
|
|
})
|
|
}, 1000)
|
|
})
|
|
|
|
// 监听到store中的数据变化动态更改options
|
|
onUnmounted(() => {
|
|
timer.value = null
|
|
time1.value = null
|
|
time2.value = null
|
|
})
|
|
|
|
const pauseDisinfect = () => {
|
|
if (operatorStore.disinfectStatus == 1) {
|
|
webSocketStore.sendCommandMsg(pauseDisinfectionJSON)
|
|
}
|
|
}
|
|
|
|
const stopDisinfect = () => {
|
|
if ([1, 2].includes(operatorStore.disinfectStatus)) {
|
|
webSocketStore.sendCommandMsg(stopDisinfectionJSON)
|
|
}
|
|
}
|
|
|
|
const continueDisinfect = () => {
|
|
if (operatorStore.disinfectStatus == 2) {
|
|
webSocketStore.sendCommandMsg(continueDisinfectionJSON)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.progress_container {
|
|
margin-bottom: 30px;
|
|
height: 580px;
|
|
box-sizing: border-box;
|
|
background: #ffffff;
|
|
border-radius: 16px;
|
|
padding: 20px;
|
|
padding-bottom: 30px;
|
|
.header_wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 49px;
|
|
.left_progress {
|
|
// width: 860px;
|
|
flex: 1;
|
|
height: 80px;
|
|
border-radius: 14px;
|
|
background: #f6f6f6;
|
|
box-sizing: border-box;
|
|
padding: 0 23px;
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
.left_time_tag {
|
|
width: 158.66px;
|
|
height: 45px;
|
|
border-radius: 23px;
|
|
opacity: 1;
|
|
background: #06518b;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: Source Han Sans CN;
|
|
font-size: 14px;
|
|
font-weight: normal;
|
|
letter-spacing: 0.1em;
|
|
color: #ffffff;
|
|
}
|
|
.time {
|
|
// width: 90px;
|
|
flex: 1;
|
|
height: 20px;
|
|
font-family: Source Han Sans CN;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
letter-spacing: 0.1em;
|
|
color: #000000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.pre_time {
|
|
position: absolute;
|
|
font-family: Source Han Sans CN;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
letter-spacing: 0.1em;
|
|
color: red;
|
|
left: 214px;
|
|
}
|
|
.progress_bg {
|
|
width: 396px;
|
|
height: 14px;
|
|
border-radius: 7px;
|
|
background: #ffffff;
|
|
position: relative;
|
|
overflow: hidden;
|
|
.pro {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
height: 14px;
|
|
border-radius: 7px;
|
|
background: #06518b;
|
|
width: var(--width);
|
|
}
|
|
}
|
|
}
|
|
.right_btns {
|
|
display: flex;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
margin-left: 20px;
|
|
.btn {
|
|
width: 140px;
|
|
height: 45px;
|
|
border-radius: 23px;
|
|
background: #f6f6f6;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: Source Han Sans CN;
|
|
font-size: 14px;
|
|
font-weight: normal;
|
|
letter-spacing: 0.1em;
|
|
color: #d8d8d8;
|
|
}
|
|
.active {
|
|
color: #ffffff;
|
|
background: #06518b;
|
|
}
|
|
.ml {
|
|
margin: 0 20px;
|
|
}
|
|
}
|
|
}
|
|
.echarts_wrap {
|
|
height: 351px;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 19px;
|
|
.single_wrap {
|
|
flex: 1;
|
|
height: 351px;
|
|
.title {
|
|
font-family: Source Han Sans CN;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
letter-spacing: 0.1em;
|
|
color: #000000;
|
|
margin-bottom: 24px;
|
|
padding-left: 11px;
|
|
}
|
|
.echarts_box {
|
|
width: 380px;
|
|
height: 308px;
|
|
}
|
|
}
|
|
}
|
|
.detail_wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
padding-right: 16px;
|
|
.detail {
|
|
width: 105px;
|
|
height: 40px;
|
|
border-radius: 20px;
|
|
background: #06518b;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: Source Han Sans CN;
|
|
font-size: 18px;
|
|
font-weight: normal;
|
|
letter-spacing: 0.1em;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
</style>
|