|
|
<template> <div class="progress_container"> <div class="header_wrap"> <div class="left_time"> <p class="time"> {{ operatorStore.estimatedRemainingTimeS == 0 ? '已结束' : `${time_To_hhmmss(operatorStore.estimatedRemainingTimeS)}` }} </p> </div> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="181" height="52" viewBox="0 0 181 52" > <g> <g> <g> <path d="M82.64,13.3438C81.84,15.7875,80.28,18.9925,79.12,21.0362L83.28,22.5987C84.52000000000001,20.6756,86,17.8306,87.28,15.0263L82.64,13.3438ZM62.72,15.4269C64.28,17.7506,65.84,20.8756,66.36,22.8794L70.72,20.8356C70.08,18.7925,68.4,15.8275,66.8,13.6244L62.72,15.4269ZM52,16.1481C54.480000000000004,17.4706,57.56,19.5537,59,21.0762L61.96,17.35C60.4,15.8675,57.24,13.9444,54.8,12.7825L52,16.1481ZM50.12,26.76C52.68,28.08,55.88,30.2,57.32,31.72L60.24,27.96C58.6,26.48,55.36,24.56,52.84,23.36L50.12,26.76ZM51.24,46.76L55.480000000000004,49.84C57.6,45.8,59.84,41.12,61.68,36.84L58.16,33.92C55.96,38.64,53.2,43.68,51.24,46.76ZM68.68,35.08L80.88,35.08L80.88,38.08L68.68,38.08L68.68,35.08ZM68.68,31.04L68.68,28.08L80.88,28.08L80.88,31.04L68.68,31.04ZM72.48,12.4225L72.48,23.64L64,23.64L64,49.9606L68.68,49.9606L68.68,42.12L80.88,42.12L80.88,44.76C80.88,45.28,80.68,45.48,80.03999999999999,45.52C79.44,45.52,77.32,45.52,75.48,45.4C76.12,46.64,76.76,48.64,76.92,49.92C79.96000000000001,49.92,82.08,49.88,83.6,49.12C85.12,48.4,85.56,47.12,85.56,44.84L85.56,23.64L77.32,23.64L77.32,12.4225L72.48,12.4225ZM121.2,33.76L121.08,35.92L114.16,35.92L115.16,35.36C115,34.88,114.64,34.32,114.16,33.76L121.2,33.76ZM100.72,30.32C100.6,32.08,100.44,34,100.24000000000001,35.92L94.28,35.92L94.28,39.44L99.88,39.44C99.6,41.56,99.36,43.52,99.08,45.12L119.96,45.12C119.8,45.6,119.64,45.88,119.48,46.08C119.12,46.52,118.76,46.6,118.08,46.6C117.36,46.64,115.8,46.6,114.08,46.44C114.6,47.36,115.08,48.84,115.12,49.8C117.2,49.8812,119.2,49.9219,120.44,49.72C121.72,49.6,122.8,49.28,123.68,48.2C124.12,47.64,124.52,46.68,124.84,45.12L129.44,45.12L129.44,41.68L125.36,41.68L125.56,39.44L131.72,39.44L131.72,35.92L125.84,35.92L126.04,32.16C126.08,31.6,126.12,30.32,126.12,30.32L100.72,30.32ZM110.08,34.24C110.56,34.72,111,35.32,111.4,35.92L104.96000000000001,35.92L105.16,33.76L111,33.76L110.08,34.24ZM120.84,39.44L120.6,41.68L113.68,41.68L114.96,41C114.76,40.52,114.4,39.96,113.96,39.44L120.84,39.44ZM109.75999999999999,39.88C110.28,40.4,110.8,41.04,111.16,41.68L104.32,41.68L104.6,39.44L110.6,39.44L109.75999999999999,39.88ZM110.52000000000001,12.4262L110.52000000000001,15.36L97.2,15.36L97.2,18.72L110.52000000000001,18.72L110.52000000000001,20.36L99.88,20.36L99.88,23.68L110.52000000000001,23.68L110.52000000000001,25.4L95.36,25.4L95.36,28.88L130.64,28.88L130.64,25.4L115.44,25.4L115.44,23.68L126.64,23.68L126.64,20.36L115.44,20.36L115.44,18.72L129.36,18.72L129.36,15.36L115.44,15.36L115.44,12.4262L110.52000000000001,12.4262ZM154.36,12.4231L154.36,19.4L140.51999999999998,19.4L140.51999999999998,39.6838L145.32,39.6838L145.32,37.48L154.36,37.48L154.36,50.0187L159.44,50.0187L159.44,37.48L168.51999999999998,37.48L168.51999999999998,39.4831L173.56,39.4831L173.56,19.4L159.44,19.4L159.44,12.4231L154.36,12.4231ZM145.32,32.76L145.32,24.12L154.36,24.12L154.36,32.76L145.32,32.76ZM168.51999999999998,32.76L159.44,32.76L159.44,24.12L168.51999999999998,24.12L168.51999999999998,32.76Z" fill="#17F179" fill-opacity="1" /> </g> <g transform="matrix(0,1,-1,0,52,-22)"> <path d="M61.3114,50.5847L56.491,45.7322C62.778400000000005,44.923500000000004,67.8084,39.8689,67.8084,33.8033C67.8084,27.9399,63.1976,22.88525,57.1198,21.87432L52.7186,17.62841L54.6048,17.62841C64.24549999999999,17.62841,72,24.9071,72,33.8033C72,39.8689,68.2276,45.3279,62.988,47.9563L62.988,52L61.3114,50.5847ZM56.7006,49.776C56.0719,49.776,55.2335,49.9781,54.3952,49.9781C44.75449,49.9781,37,42.6995,37,33.8033C37,27.7377,40.77246,22.27869,46.01198,19.650280000000002L46.01198,15L48.7365,17.62842L52.9281,21.67213C46.43114,22.27869,41.4012,27.5355,41.4012,33.8033C41.4012,39.8689,46.22156,44.923500000000004,52.509,45.7322L56.7006,49.776Z" fill="#17F179" fill-opacity="1" /> </g> </g> </g> </svg> <div class="btn" v-if="[1, 2].includes(operatorStore.disinfectStatus)" @click="stopDisinfect" > 结束消毒 </div> <div class="btn" v-if="operatorStore.disinfectStatus == 0" @click="showDetail" > 返回 </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="tip_info">警报信息</div> <div class="speed_wrap"> <p class="speed">5000</p> </div> <svg @click="showDetail" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="222" height="50" viewBox="0 0 222 50" > <g> <g> <rect x="0" y="0" width="222" height="50" rx="25" fill="#06518B" fill-opacity="1" /> </g> <g> <path d="M59.16,27.84L66.68,27.84L66.68,29.24L59.16,29.24L59.16,27.84ZM59.16,25.22L66.68,25.22L66.68,26.58L59.16,26.58L59.16,25.22ZM57.28,23.939999999999998L57.28,30.52L68.64,30.52L68.64,23.939999999999998L57.28,23.939999999999998ZM54.36,31.62L54.36,33.3L71.7,33.3L71.7,31.62L54.36,31.62ZM62,15.3325L62,17.740000000000002L54.1,17.740000000000002L54.1,19.4L60.08,19.4C58.42,21.14,55.96,22.68,53.62,23.46C54.02,23.84,54.56,24.52,54.84,24.98C57.5,23.92,60.2,21.96,62,19.68L62,23.32L63.88,23.32L63.88,19.68C65.72,21.9,68.44,23.82,71.12,24.82C71.4,24.34,71.96000000000001,23.64,72.36,23.28C69.94,22.52,67.44,21.08,65.78,19.4L71.92,19.4L71.92,17.740000000000002L63.88,17.740000000000002L63.88,15.3325L62,15.3325ZM81.36,28.06L89.44,28.06L89.44,29.24L81.36,29.24L81.36,28.06ZM81.36,26.82L81.36,25.68L89.44,25.68L89.44,26.82L81.36,26.82ZM81.36,30.48L89.44,30.48L89.44,31.72L81.36,31.72L81.36,30.48ZM90.84,15.455C87.56,16.05844,81.62,16.34,76.72,16.36C76.88,16.740000000000002,77.06,17.380000000000003,77.08,17.8C78.74,17.8,80.52,17.759999999999998,82.32,17.7L81.98,18.86L76.96000000000001,18.86L76.96000000000001,20.32L81.44,20.32C81.28,20.72,81.1,21.119999999999997,80.92,21.52L75.53999999999999,21.52L75.53999999999999,23.060000000000002L80.08,23.060000000000002C78.84,25.08,77.18,26.86,74.98,28.08C75.36,28.46,75.9,29.14,76.16,29.58C77.44,28.82,78.56,27.9,79.53999999999999,26.86L79.53999999999999,33.965599999999995L81.36,33.965599999999995L81.36,33.18L89.44,33.18L89.44,33.965599999999995L91.32,33.965599999999995L91.32,24.22L81.56,24.22C81.8,23.84,82.02,23.46,82.24,23.060000000000002L93.25999999999999,23.060000000000002L93.25999999999999,21.52L83,21.52L83.5,20.32L92.14,20.32L92.14,18.86L84.02,18.86L84.4,17.6C87.22,17.439999999999998,89.92,17.2,92,16.82L90.84,15.455ZM112.86,15.83219C112.42,17.03406,111.56,18.63656,110.9,19.658099999999997L112.53999999999999,20.3191C113.2,19.3375,114.02000000000001,17.895310000000002,114.7,16.53312L112.86,15.83219ZM102.75999999999999,16.67344C103.58,17.83531,104.4,19.4178,104.68,20.4394L106.4,19.6181C106.06,18.596249999999998,105.18,17.07406,104.36,15.972190000000001L102.75999999999999,16.67344ZM97.42,16.833750000000002C98.66,17.49469,100.18,18.536250000000003,100.88,19.2975L102.06,17.83531C101.3,17.09406,99.75999999999999,16.1325,98.52000000000001,15.531559999999999L97.42,16.833750000000002ZM96.47999999999999,22.18C97.74000000000001,22.82,99.3,23.880000000000003,100.03999999999999,24.6L101.18,23.119999999999997C100.4,22.4,98.8,21.439999999999998,97.56,20.84L96.47999999999999,22.18ZM97.08,32.519999999999996L98.72,33.739999999999995C99.78,31.8,100.97999999999999,29.36,101.9,27.22L100.5,26.08C99.44,28.38,98.06,30.98,97.08,32.519999999999996ZM105.2,26.22L112.02000000000001,26.22L112.02000000000001,28.1L105.2,28.1L105.2,26.22ZM105.2,24.6L105.2,22.759999999999998L112.02000000000001,22.759999999999998L112.02000000000001,24.6L105.2,24.6ZM107.72,15.311250000000001L107.72,21L103.34,21L103.34,33.8809L105.2,33.8809L105.2,29.72L112.02000000000001,29.72L112.02000000000001,31.68C112.02000000000001,31.96,111.92,32.04,111.62,32.06C111.3,32.08,110.24000000000001,32.08,109.2,32.019999999999996C109.44,32.519999999999996,109.72,33.32,109.78,33.82C111.3,33.82,112.34,33.8,113,33.5C113.68,33.2,113.86,32.68,113.86,31.7L113.86,21L109.64,21L109.64,15.311250000000001L107.72,15.311250000000001ZM131.66,25.68L131.57999999999998,27.14L127.72,27.14L128.2,26.86C128.06,26.52,127.76,26.08,127.42,25.68L131.66,25.68ZM121.28,24.3L121.02,27.14L117.94,27.14L117.94,28.58L120.84,28.58C120.72,29.66,120.56,30.68,120.42,31.5L131.04000000000002,31.5C130.94,31.9,130.82,32.14,130.7,32.28C130.51999999999998,32.480000000000004,130.34,32.519999999999996,129.98000000000002,32.519999999999996C129.6,32.54,128.72,32.519999999999996,127.76,32.42C127.98,32.8,128.16,33.4,128.18,33.78C129.24,33.8612,130.26,33.8612,130.84,33.8003C131.45999999999998,33.760000000000005,131.95999999999998,33.6,132.34,33.14C132.6,32.84,132.8,32.36,132.95999999999998,31.5L135.18,31.5L135.18,30.1L133.18,30.1L133.34,28.58L136.45999999999998,28.58L136.45999999999998,27.14L133.45999999999998,2 fill="#FFFFFF" fill-opacity="1" /> </g> <g> <ellipse cx="25" cy="25" rx="19" ry="19" fill="#FFFFFF" fill-opacity="1" /> </g> <g> <path d="M19.02871,32.7154L26.9271,32.7154C27.2819,32.7154,27.5694,33.003,27.5694,33.3577C27.5694,33.7124,27.2819,34,26.9271,34L19.02878,34C17.35495,34.0013,15.99791543,32.643699999999995,16.00000275899,30.969900000000003L16.00000275899,19.03051C15.99771433,17.35657,17.35476,15.99871462,19.02871,16L30.9681,16C32.6422,15.999239749,33.9994,17.35649,33.998599999999996,19.03051L33.998599999999996,19.03261L33.972,26.9309C33.9678,27.2836,33.6803,27.5672,33.3275,27.5666C32.9747,27.566000000000003,32.688199999999995,27.281599999999997,32.685,26.928800000000003L32.685,26.9267L32.712199999999996,19.02978C32.712,18.56363,32.5319,18.1255,32.2024,17.79601C31.875799999999998,17.46756,31.4313,17.28341,30.9681,17.28457L19.02871,17.28457C18.06486,17.28485,17.28386,18.06666,17.28458,19.03051L17.28458,30.969900000000003C17.2839,31.9336,18.06494,32.7153,19.02871,32.7154ZM30.7872,21.14739C30.787100000000002,21.50206,30.4996,21.79142,30.1449,21.79142L19.85856,21.78772C19.50381,21.78772,19.21634,21.497709999999998,19.21634,21.142960000000002C19.21634,20.788,19.50375,20.50011,19.858629999999998,20.49959L30.145,20.50293C30.4997,20.503,30.787300000000002,20.79272,30.7872,21.14739ZM31.3598,30.4513L33.812200000000004,32.9037C34.0627,33.1546,34.0626,33.561,33.8119,33.8117C33.5612,34.0624,33.1548,34.0626,32.9039,33.8121L30.4514,31.3596C28.1824,32.973600000000005,25.00281,31.7287,24.432969999999997,29.0031C23.86314,26.2775,26.2776,23.86302,29.0032,24.432850000000002C31.7289,25.002679999999998,32.9738,28.1822,31.3598,30.4513ZM24.35822,25.002850000000002C24.35822,25.35758,24.07066,25.645139999999998,23.71593,25.645139999999998L19.85856,25.643909999999998C19.50417,25.643909999999998,19.21688,25.35662,19.21688,25.00224C19.21688,24.64785,19.50417,24.36057,19.85856,24.36057L23.71593,24.36057C24.07066,24.36057,24.35822,24.648130000000002,24.35822,25.002850000000002ZM25.73168,27.5503C25.29392,29.1839,26.5248,30.7881,28.2161,30.7882C28.898699999999998,30.79,29.5536,30.518700000000003,30.0349,30.0348C31.230800000000002,28.839,30.966900000000003,26.8342,29.502299999999998,25.98853C28.037599999999998,25.142879999999998,26.1694,25.91666,25.73168,27.5503ZM19.21681,28.8564C19.21681,28.5018,19.50429,28.2143,19.85892,28.2143L22.43048,28.2155C22.78752,28.2117,23.07899,28.5001,23.07899,28.8572C23.07899,29.2143,22.78752,29.5026,22.43048,29.4989L19.85892,29.4985C19.50429,29.4985,19.21681,29.211,19.21681,28.8564Z" fill-rule="evenodd" fill="#06518B" fill-opacity="1" /> </g> </g> </svg> </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: 19px; height: 580px; box-sizing: border-box; background: #ffffff; border-radius: 16px; padding-bottom: 30px; .header_wrap { display: flex; align-items: center; justify-content: space-between; margin-bottom: 34px; height: 107px; box-sizing: border-box; padding: 13px 36px 13px 20px; background: #f6f6f6; border-radius: 16px 16px 0 0; .left_time { position: relative; width: 377px; height: 61px; background: url(../assets/img/operator/time.png) no-repeat; background-size: 100% 100%; .time { font-family: Source Han Sans CN; font-size: 28px; font-weight: bold; line-height: normal; letter-spacing: 0.1em; color: #ffffff; position: absolute; left: 165px; top: 9px; width: 178px; height: 41px; text-align: center; } } .btn { padding: 12px 28px; box-sizing: border-box; width: 140px; height: 50px; border-radius: 25px; background: #06518b; display: flex; align-items: center; justify-content: center; font-family: Source Han Sans CN; font-size: 20px; font-weight: 500; line-height: normal; letter-spacing: 0.07em; color: #ffffff; } } .echarts_wrap { height: 351px; display: flex; align-items: center; margin-bottom: 19px; .single_wrap { flex: 1; height: 351px; .title { padding: 5px 13px; margin-bottom: 24px; font-family: Source Han Sans CN; font-size: 14px; font-weight: 500; line-height: normal; letter-spacing: 0.1em; color: #ffffff; height: 27px; border-radius: 14px; opacity: 1; background: #06518b; width: 70px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; } .echarts_box { width: 380px; height: 308px; } } } .detail_wrap { display: flex; align-items: center; padding-right: 16px; height: 50px; .tip_info { padding: 12px 20px; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 550px; height: 50px; border-radius: 6px; opacity: 1; background: #f6f6f6; font-family: Source Han Sans CN; font-size: 18px; font-weight: bold; line-height: normal; letter-spacing: 0.1em; margin-right: 20px; color: #fa1c1c; } .speed_wrap { background: url(../assets/img/operator/speed.png) no-repeat; background-size: 100% 100%; position: relative; width: 335px; height: 41px; margin-right: 37px; .speed { position: absolute; font-family: Source Han Sans CN; font-size: 28px; font-weight: bold; line-height: normal; letter-spacing: 0.02em; color: #000000; left: 197px; bottom: -2px; width: 68px; height: 41px; white-space: nowrap; text-align: center; } } }}</style>
|
