wvp/web_src/src/components/common/signalInfo.vue

<template>
  <div class="signal-box">
    <div :class="`signal-item-box sign0 ${signalLevel >= 0?'show':''}`" ></div>
    <div :class="`signal-item-box sign1 ${signalLevel >= 1?'show':''}`"></div>
    <div :class="`signal-item-box sign2 ${signalLevel >= 2?'show':''}`"></div>
    <div :class="`signal-item-box sign3 ${signalLevel >= 3?'show':''}`"></div>
    <div :class="`signal-item-box sign4 ${signalLevel >= 4?'show':''}`"></div>
    <div :class="`signal-item-box sign5 ${signalLevel >= 5?'show':''}`"></div>
  </div>
</template>

<script>
import devTool from "@/hfyUntil/devTool";
export default {
  name: "signalInfo",
  props:['signalText'],
  data(){
    return {
    }
  },
  computed:{
    signalLevel(){
      return devTool.signalTransform(this.signalText);
    }
  }
}
</script>

<style scoped>
.signal-box{
  width: 100%;
  height: 100%;
  min-width: 30px;
  min-height: 18px;
  display: flex;
  align-items: flex-end;
}
.signal-box .signal-item-box{
  width: 5px;
  margin-left: 1px;
  background-color: gray;
}
.signal-box .sign0{
  height: 2px;
}
.signal-box .sign1{
  height: 4px;
}
.signal-box .sign2{
  height: 6px;
}
.signal-box .sign3{
  height: 8px;
}
.signal-box .sign4{
  height: 10px;
}
.signal-box .sign5{
  height: 12px;
}
.signal-box .show{
  background-color: #27cc5c;
}


</style>