disinfection_high_front_end/src/components/Progress.vue

<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="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: 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 {
        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>