control/src/pages/room/component/signal.vue

<template>
  <div class="signal-box">
    <ul>
      <li
        v-for="(item, idex) in list"
        :key="idex"
        :class="item.class"
      />
    </ul>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import useStore from '@/store/index'

const store = useStore()
const list = ref([
  {
    id: 1,
    class: 'signal-default'
  },
  {
    id: 2,
    class: 'signal-default'
  },
  {
    id: 3,
    class: 'signal-default'
  },
  {
    id: 4,
    class: 'signal-default'
  },
  {
    id: 5,
    class: 'signal-default'
  }
])

// watch(() => store.mqtt_message, (value: { type: string, data?: { bitrate: number } }) => {
//   const { type, data } = value
//   // list.value.forEach((el: { id: number, class: string }) => {
//   //   if (el.id <= v) {
//   //     if (v <= 2) {
//   //       el.class = 'signal-red'
//   //     } else if (v <= 4) {
//   //       el.class = 'signal-yellow'
//   //     } else {
//   //       el.class = 'signal-green'
//   //     }
//   //   } else {
//   //     el.class = 'signal-default'
//   //   }
//   // })
// })
</script>

<style scoped lang="scss">
.signal-box {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  height: 23px;
  width: 23px;
  position: relative;
  z-index: 3;

  ul {
    height: 21px;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: flex-end;
  }

  li {
    width: 4px;
    height: 5px;
    border-radius: 10px;
    list-style: none;
    margin: 0 0.5px;

    @for $i from 1 through 5 {
      &:nth-child(#{$i}) {
        height:#{ $i * 5 - ($i - 1) }px;
      }
    }
  }

  .signal-default {
    background: rgba(255, 255, 255, 0.5);
  }

  .signal-red {
    background-color: #ed4014;
  }

  .signal-yellow {
    background-color: #f90;
  }

  .signal-green {
    background-color: #00CED1;
  }
}
</style>