vent-forewarn-micro/src/views/vent/fire/fireHome/components/substationJc.vue

<template>
  <div class="substationJc">
    <div class="substation-box" v-for="(item, index) in substationList" :key="index">
      <div class="substation-title">{{ item.title }}</div>
      <div class="substation-label">{{ item.label }}</div>
      <div class="substation-val">{{ `${item.val}${item.dw}` || '--' }}</div>
    </div>

  </div>
</template>

<script setup lang="ts">
import { ref, reactive, defineProps, watch } from 'vue';

let props = defineProps({
  substationData: {
    type: Array,
    default: () => {
      return []
    }
  }
})

let substationList = ref<any[]>([]);

watch(() => props.substationData, (newS, oldS) => {
  console.log(newS, 'newS--------')
  if (newS.length != 0) {
    substationList.value = newS
  }
}, { immediate: true, deep: true })
</script>

<style lang="less" scoped>
.substationJc {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;

  .substation-box {
    display: flex;
    box-sizing: border-box;
    width: 90%;
    height: 145px;
    padding-top: 30px;
    background: url('../../../../../assets/images/fire/firehome/list.png') no-repeat bottom;
    background-size: 100% 100%;
    color: #fff;
    font-size: 14px;

    .substation-title {
      display: flex;
      flex: 1;
      justify-content: center;
      height: 100%;
      font-size: 12px;
    }

    .substation-label {
      display: flex;
      flex: 1;
      justify-content: center;
      height: 100%;
      font-size: 12px;
    }

    .substation-val {
      display: flex;
      flex: 1;
      justify-content: center;
      height: 100%;
      color: #089dff;
    }
  }
}
</style>