pipeline_disinfection_front_end/src/components/SealTest.vue

<template>
  <div class="seal_test_container">
    <div class="left_container">
      <div class="title_wrap">
        <img class="icon" :src="SealPng" alt="" />
        <div class="title">实时压力表</div>
      </div>
      <div class="echarts_box" id="seal_echarts"></div>
      <div class="oper_box">
        <div class="air_box">
          <p class="box"></p>
          <p class="tit">测试前气压</p>
          <p class="num">
            {{
              sealStore.oldAirPressure != null
                ? sealStore.oldAirPressure
                : '--'
            }}KPa
          </p>
        </div>
        <img
          class="air_img"
          :src="DisStart"
          alt=""
          v-if="sealStore.isStartTest"
        />
        <img
          class="air_img"
          v-if="!sealStore.isStartTest && !testStore.airCompressor"
          @click="changeAirStatus(2)"
          :src="StartAir"
          alt=""
        />
        <img
          class="air_img"
          @click="changeAirStatus(1)"
          v-if="!sealStore.isStartTest && testStore.airCompressor"
          :src="StopAir"
          alt=""
        />
      </div>
    </div>
    <div class="right_container">
      <div class="header">
        <div class="left">
          <img :src="TestIcon" class="icon" alt="" />
          <p class="title">密封测试</p>
        </div>
        <p class="en">SEAL</p>
      </div>
      <div class="oper_box">
        <div class="emp_box">
          <div class="title">测试时间</div>
          <div class="num">
            {{ resultTime ? resultTime : '未开始' }}
          </div>
        </div>
        <div class="emp_box">
          <div class="title">气压差值</div>
          <div class="num">
            {{
              sealStore.differenceValue != null
                ? `${sealStore.differenceValue}KPa`
                : '未开始'
            }}
          </div>
        </div>
        <img
          :src="StartTest"
          v-if="!sealStore.isStartTest"
          class="test_png"
          @click="handleStartTest('1')"
          alt=""
        />
        <img
          @click="handleStartTest('2')"
          :src="StopTest"
          v-else
          class="test_png"
          alt=""
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
import SealPng from '@/assets/img/seal/seal.png'
import StartAir from '@/assets/img/seal/start.png'
import DisStart from '@/assets/img/seal/dis_start.png'
import TestIcon from '@/assets/img/seal/test.png'
import StartTest from '@/assets/img/seal/starttest.png'
import StopTest from '@/assets/img/seal/stoptest.png'
import StopAir from '@/assets/img/seal/stop.png'
import {
  someAirSwitchJSON,
  airCompressor_setStateJSON,
  airCompressor_channelCtrlJSON,
} from '@/mock/command'
import { useSealStore, useTestStore, useWebSocketStore } from '@/store'

const sealStore = useSealStore()
const testStore = useTestStore()
const websocketStore = useWebSocketStore()

const sealCharts = ref(null)
const sealOptions = ref({
  series: [
    {
      type: 'gauge',
      min: 0,
      max: 800,
      progress: {
        show: true,
        width: 18,
        itemStyle: {
          color: '#3442aa',
        },
      },
      pointer: {
        itemStyle: {
          color: '#3442aa',
        },
      },
      axisLine: {
        lineStyle: {
          width: 18,
        },
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        length: 15,
        lineStyle: {
          width: 2,
          color: '#999',
        },
      },
      axisLabel: {
        distance: 25,
        color: '#999',
        fontSize: 20,
      },
      anchor: {
        show: true,
        showAbove: true,
        size: 25,
        itemStyle: {
          borderWidth: 10,
          borderColor: '#3442aa',
        },
      },
      title: {
        show: false,
      },
      detail: {
        valueAnimation: true,
        fontSize: 40,
        color: '#3442aa',
        formatter: '{value} KPa',
        offsetCenter: [0, '70%'],
      },
      data: [
        {
          value: sealStore.currentAirPressure,
        },
      ],
    },
  ],
})

const n_sec = ref(0) // 秒
const n_min = ref(0) // 分
const n_hour = ref(0) // 时

const resultTime = ref('')
const timerStart = ref(null)

const timerReal = () => {
  var str_sec = n_sec.value
  var str_min = n_min.value
  var str_hour = n_hour.value
  if (n_sec.value < 10) {
    str_sec = '0' + n_sec.value
  }
  if (n_min.value < 10) {
    str_min = '0' + n_min.value
  }
  if (n_hour.value < 10) {
    str_hour = '0' + n_hour.value
  }
  resultTime.value = str_hour + ':' + str_min + ':' + str_sec
  n_sec.value = n_sec.value + 1
  if (n_sec.value > 59) {
    n_sec.value = 0
    n_min.value = n_min.value + 1
  }
  if (n_min.value > 59) {
    n_min.value = 0
    n_hour.value = n_hour.value + 1
  }
}

watch(
  () => sealStore.isStartTest,
  (newValue, oldValue) => {
    if (!newValue) {
      stopTimer()
    }
  },
)

const stopTimer = () => {
  // 改变测试前oldAirPressure为null
  sealStore.updateOldAirPressure(null)
  // 结束测试时将时间重置null
  clearInterval(timerStart.value)
  timerStart.value = null
  resultTime.value = null
  n_sec.value = 0
  n_min.value = 0
  n_hour.value = 0
  sealStore.updateIsStartTest(false)
  // 结束测试时打开空压机通道
  websocketStore.sendCommandMsg(airCompressor_channelCtrlJSON([1]))
}

const timerFunc = () => {
  timerReal()
  timerStart.value = setInterval(() => {
    timerReal()
  }, 1000)
}

const changeAirStatus = flag => {
  if (flag == 1) {
    if (testStore.airCompressor) {
      websocketStore.sendCommandMsg(airCompressor_setStateJSON([0]))
      testStore.updateAirCompressor(false)
    }
  } else {
    if (!testStore.airCompressor) {
      websocketStore.sendCommandMsg(airCompressor_setStateJSON([1]))
      testStore.updateAirCompressor(true)
    }
  }
}

const handleStartTest = flag => {
  if (flag == '1') {
    // 改变测试前oldAirPressure为测试前气压值
    // 也就是将getState中获取的当前值currentAirPressure赋予
    // 开始测试需要记录时间
    timerFunc()
    // 关闭空压机通道
    websocketStore.sendCommandMsg(airCompressor_channelCtrlJSON([0]))
    // 停止冲入空气，即关闭空压机
    websocketStore.sendCommandMsg(airCompressor_setStateJSON([0]))
    testStore.updateAirCompressor(false)
    sealStore.updateOldAirPressure(sealStore.currentAirPressure)
    sealStore.updateIsStartTest(true)
  }
  if (flag == '2') {
    stopTimer()
  }
}

const timer = ref(null)
onBeforeUnmount(() => {
  timer.value = null
  timerStart.value = null
  clearInterval(timer.value)
  clearInterval(timerStart.value)
})
onMounted(() => {
  sealCharts.value = echarts.init(document.getElementById('seal_echarts'))
  sealCharts.value.setOption(sealOptions.value)
  timer.value = setInterval(() => {
    sealCharts.value.setOption({
      series: [
        {
          type: 'gauge',
          min: 0,
          max: 800,
          progress: {
            show: true,
            width: 18,
            itemStyle: {
              color: '#3442aa',
            },
          },
          pointer: {
            itemStyle: {
              color: '#3442aa',
            },
          },
          axisLine: {
            lineStyle: {
              width: 18,
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            length: 15,
            lineStyle: {
              width: 2,
              color: '#999',
            },
          },
          axisLabel: {
            distance: 25,
            color: '#999',
            fontSize: 20,
          },
          anchor: {
            show: true,
            showAbove: true,
            size: 25,
            itemStyle: {
              borderWidth: 10,
              borderColor: '#3442aa',
            },
          },
          title: {
            show: false,
          },
          detail: {
            valueAnimation: true,
            fontSize: 40,
            color: '#3442aa',
            formatter: '{value} KPa',
            offsetCenter: [0, '70%'],
          },
          data: [
            {
              value: sealStore.currentAirPressure,
            },
          ],
        },
      ],
    })
  }, 1000)
})
</script>

<style lang="scss" scoped>
.seal_test_container {
  margin-bottom: 19px;
  height: 580px;
  box-sizing: border-box;
  border-radius: 16px;
  display: flex;
  align-items: center;
  .left_container {
    margin-right: 30px;
    width: 766px;
    height: 580px;
    box-sizing: border-box;
    border-radius: 16px;
    background: #ffffff;
    position: relative;
    .title_wrap {
      position: absolute;
      left: 28px;
      top: 28px;
      width: 141px;
      height: 31px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      .title {
        font-family: 思源黑体;
        font-size: 20px;
        font-weight: bold;
        line-height: normal;
        letter-spacing: 0.02em;
        font-feature-settings: 'kern' on;
        color: #000000;
        margin-left: 9px;
      }
      .icon {
        width: 30px;
        height: 30px;
      }
    }
    .oper_box {
      position: absolute;
      left: 28px;
      bottom: 28px;
      width: 710px;
      height: 110px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .air_img {
        width: 341px;
        height: 110px;
      }
      .air_box {
        width: 341px;
        height: 110px;
        border-radius: 16px;
        background: #f6f6f6;
        display: flex;
        align-items: center;
        justify-content: center;
        .box {
          width: 16px;
          height: 16px;
          background: #4359b9;
          margin-right: 6px;
        }
        .tit {
          font-family: 思源黑体;
          font-size: 20px;
          font-weight: normal;
          line-height: normal;
          letter-spacing: 0.06em;
          font-feature-settings: 'kern' on;
          color: #3d3d3d;
          margin-right: 8px;
        }
        .num {
          font-family: Source Han Sans;
          font-size: 30px;
          font-weight: bold;
          line-height: normal;
          letter-spacing: 0.06em;
          font-feature-settings: 'kern' on;
          color: #4359b9;
        }
      }
    }
    .echarts_box {
      height: 580px;
      position: absolute;
      left: 0;
      top: -36px;
      width: 100%;
    }
  }
  .right_container {
    height: 580px;
    box-sizing: border-box;
    border-radius: 16px;
    background: #ffffff;
    flex: 1;
    padding: 32px 42px;
    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      width: 340px;
      height: 45px;
      border-radius: 245px;
      background: #06518b;
      padding-left: 17px;
      padding-right: 24px;
      margin-bottom: 20px;
      .left {
        display: flex;
        align-items: center;
        .icon {
          width: 16px;
          height: 16px;
        }
        .title {
          font-family: 思源黑体;
          font-size: 14px;
          font-weight: normal;
          line-height: normal;
          letter-spacing: 0.1em;
          margin-left: 9px;
          color: #ffffff;
        }
      }
      .en {
        font-family: 思源黑体;
        font-size: 12px;
        font-weight: normal;
        line-height: normal;
        letter-spacing: 0.1em;
        color: #ffffff;
      }
    }
    .oper_box {
      width: 340px;
      height: 455px;
      border-radius: 16px;
      background: #f6f6f6;
      box-sizing: border-box;
      padding: 20px;
      .emp_box {
        width: 300px;
        height: 162px;
        border-radius: 12px;
        background: #fff;
        margin-bottom: 20px;
        box-sizing: border-box;
        padding-top: 16px;
        padding-left: 27px;
        padding-right: 27px;
        padding-bottom: 20px;
        display: flex;
        flex-direction: column;
        .title {
          font-family: Source Han Sans;
          font-size: 16px;
          font-weight: 500;
          line-height: normal;
          letter-spacing: 0.06em;
          font-feature-settings: 'kern' on;
          color: #06518b;
        }
        .num {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          font-family: 思源黑体;
          font-size: 30px;
          font-weight: bold;
          line-height: normal;
          letter-spacing: 0.1em;
          color: #000000;
          border-radius: 12px;
          background: #fafafa;
          box-sizing: border-box;
        }
      }
      .test_png {
        width: 300px;
        height: 50px;
      }
    }
  }
}
</style>