新型管道消毒机前端代码
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

<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>