sanitizing-machine-new/src/components/SealTest.vue

<template>
  <div class="seal_test_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">
      <img class="air_img" :src="StopAir" alt="" />
      <img class="air_img" :src="StartAir" alt="" />
    </div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { ref, onMounted, onBeforeUnmount } from 'vue'
import SealPng from '@/assets/img/seal/seal.png'
import StartAir from '@/assets/img/seal/start.png'
import StopAir from '@/assets/img/seal/stop.png'
import DisStart from '@/assets/img/seal/dis_start.png'
import DisStop from '@/assets/img/seal/dis_stop.png'
import { useSealStore } from '@/store'

const sealStore = useSealStore()

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 timer = ref(null)
onBeforeUnmount(() => {
  timer.value = null
})
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;
  margin-right: 30px;
  width: 1220px;
  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: 1164px;
    box-sizing: border-box;
    padding: 0 120px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .air_img {
      width: 341px;
      height: 110px;
    }
  }
  .echarts_box {
    height: 580px;
    position: absolute;
    left: 0;
    top: -36px;
    width: 1220px;
  }
}
</style>