park-application-fe/src/views/cons/screen/MachineIndex.vue

<template>
  <content-block title="Piling Machine" class="pile-machine-status">
    <template v-slot:title-right>
      <slot name="title-right" :data="selectMachine">

      </slot>
    </template>
    <template v-slot:content>
      <div class="offset-status">
        <div class="offset-title">
          <span>Drill Rod Inclination</span>
          <span
              :class="{'verticality-tolerance':true, 'warning': calcDeviation(machineLatextIndex.verticalDeviation) }">
                verticality tolerance:
                <span class="value">
                  {{ machineLatextIndex.verticalDeviation * 100 || 0 }} %
                </span>
              </span>
        </div>
        <div class="offset-item">
          <i class="deviation-point" :style="{
                left: `${calcTiltAngle(machineLatextIndex.tiltAngle)}%`,
                top: `${calcForwardTiltAngle(machineLatextIndex.forwardTiltAngle)}%`,
                backgroundColor: calcDeviation(machineLatextIndex.verticalDeviation) && 'red'
              }"></i>
          <span class="label tilt-angle">
                <span>侧倾角</span>
                <span>
                  {{ machineLatextIndex.tiltAngle || '--' }}°
                </span>
              </span>
          <span class="label forward-tilt-angle">
                <span>前倾角</span>
                <span>
                  {{ machineLatextIndex.forwardTiltAngle || '--' }}°
                </span>

                </span>
        </div>
      </div>
    </template>
  </content-block>
</template>

<script>
import ContentBlock from "@/views/cons/screen/ContentBlock.vue";
import {calcPileMachineLatestIndex} from "@/api/cons/pileMachineInfo";
// 阈值
const DeviationThreshold = 0.015;
const DeviationDegreeThreshold = 0.86;
export default {
  components: {ContentBlock},
  props: {
    selectMachine: {
      type: Object,
      default: null
    }
  },
  computed: {},
  watch: {
    selectMachine(val) {
      if (!val && this.realtimeInterVal) {
        clearInterval(this.realtimeInterVal)
      }
      if (val && !this.realtimeInterVal) {
        this.realtimeInterVal = setInterval(() => {
          this.getMachineRealtimeData()
        }, 3000)
      }
    }
  },
  data() {
    return {
      realtimeInterVal: null,
      machineLatextIndex: {},
    }
  },
  // 组件卸载前清空图层信息
  beforeDestroy() {
    this.realtimeInterVal && clearInterval(this.realtimeInterVal)
  },
  created() {

  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
    },
    getMachineRealtimeData() {
      calcPileMachineLatestIndex(this.selectMachine.id).then(response => {
        this.machineLatextIndex = response.data
      })
    },
    calcDeviation(deviation) {
      return Math.abs(deviation) > DeviationThreshold
    },
    calcForwardTiltAngle(forwardTiltAngle) {
      if (Math.abs(forwardTiltAngle) > DeviationDegreeThreshold) {
        return 0
      }
      return ((DeviationDegreeThreshold + forwardTiltAngle) / (DeviationDegreeThreshold * 2)).toFixed(2) * 100
    },
    calcTiltAngle(tiltAngle) {
      if (Math.abs(tiltAngle) > DeviationDegreeThreshold) {
        return 0
      }
      return ((DeviationDegreeThreshold + tiltAngle) / (DeviationDegreeThreshold * 2)).toFixed(2) * 100
    }
  },
};
</script>
<style lang="scss" src="./index.scss" scoped/>