water_affairs/control/components/prodnum-MT01/modules/pilotLamp.vue

<template>
  <view class="pilotLamp">
    <view class="item" v-for="item in list" :key="item.name">
      <view class="image">
        <image
          style="height: 100%"
          src="/static/img/pilot-lamp.png"
          mode="heightFix"
        />
        <view
          v-if="item.value || (item.params.lastvalue==1)"
          class="bg"
          :class="item.warn ? 'red' : 'green'"
        />
      </view>
      <view class="name" v-if="item.name"> {{ item.name }} </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "pilotLamp",
  props: {
    trItem: Object,
  },
  watch: {
    trItem: {
      handler(newV) {
        this.list = [newV];
      },
      deep: true,
      immediate: true,
    },
  },
  data() {
    return {
      list: [],
    };
  },
};
</script>

<style lang="scss" scoped>
.pilotLamp {
  display: flex;
  flex-wrap: wrap;

  .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 20%;

    .image {
      position: relative;
      height: 20px;

      .bg {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: #cccccc;
        position: absolute;
        top: 3px;
        left: 3px;
      }

      .red {
        animation: lampBackground 0.5s infinite alternate ease-in-out;
      }

      .green {
        animation: lampBackground1 0.5s infinite alternate ease-in-out;
      }

      @keyframes lampBackground {
        from {
          background-color: #ff8f4a;
        }

        to {
          background-color: red;
        }
      }

      @keyframes lampBackground1 {
        from {
          background-color: rgb(0, 255, 0);
        }

        to {
          background-color: green;
        }
      }
    }

    .name {
      font-size: 12px;
      color: #fff;
      margin-top: 6px;
    }
  }

  .item:nth-of-type(n + 6) {
    margin-top: 10px;
  }
}
</style>