pipeline_disinfection_front_end/src/components/Progress.vue

<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: Array.from(
      Array(Object.keys(echartsStore.binCharts).length),
      (v, k) => k,
    ),
  },
  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: Object.keys(echartsStore.envir1Charts),
  },
  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: Object.keys(echartsStore.envir2Charts),
  },
  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: Array.from(
          Array(Object.keys(echartsStore.binCharts).length),
          (v, k) => k,
        ),
      },
      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: Object.keys(echartsStore.envir1Charts),
      },
      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: Object.keys(echartsStore.envir2Charts),
      },
      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: Array.from(
          Array(Object.keys(echartsStore.binCharts).length),
          (v, k) => k,
        ),
      },
      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: Object.keys(echartsStore.envir1Charts),
      },
      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: Object.keys(echartsStore.envir2Charts),
      },
      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>