energy_storage/web/src/components/Home/Modal/OperationalInfo.vue

<template>
  <div class="onLine">
    <div class="content">
      <div v-for="item in list" :key="item.key" :class="`item ${item.class}`">
        <a-image :preview="false" :src="item.iconPath" :width="50" class="left"> </a-image>
        <div class="right">
          <span>{{ item.label }}</span>
          <span>{{ item.value }} {{ item.d }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  props: {
    propsTotal: {
      type: Object,
      default: () => {}
    },
    propsInfo: {
      type: Array,
      default: () => []
    },
  
  },
  data() {
    return {
      list: [
        {
          key: 'tianshu',
          value: 26,
          d: '℃',
          label: '舱内温度',
          class: 'item-1',
          iconPath: require('@/assets/home/wendu.png')
        },
        {
          key: 'shouyi',
          value: 25,
          d: '%',
          label: '舱内湿度',
          class: 'item-2',
          iconPath: require('@/assets/home/shidu.png')
        },
        {
          key: 'shuliang',
          value: 24,
          d: 'V',
          label: '电压',
          class: 'item-3',
          iconPath: require('@/assets/home/dianya.png')
        },
        {
          key: 'shuliang',
          value: 26,
          d: 'A',
          label: '电流',
          class: 'item-4',
          iconPath: require('@/assets/home/dianliu.png')
        },
        {
          key: 'fadianliang',
          value: 20,
          d: 'w',
          label: '功率',
          class: 'item-5',
          iconPath: require('@/assets/home/gonglv.png')
        },
        {
          key: 'rongliang',
          value: 100,
          d: '',
          label: '功率因数',
          class: 'item-6',
          iconPath: require('@/assets/home/gonglv.png')
        }
      ]
    }
  },
  computed: {
    leftList() {
      return this.list.filter((_, index) => index % 2 === 0).slice(0, 3) // 左列取前3个偶数索引
    },
    rightList() {
      return this.list.filter((_, index) => index % 2 !== 0).slice(0, 3) // 右列取前3个奇数索引
    }
  },
  watch: {
    propsTotal: {
      handler(n) {
        if (n) {
          this.list.forEach((item) => {
            item.value = this.propsTotal[item.key]
          })
        }
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {},
  methods: {}
}
</script>

<style lang="scss" scoped>
.onLine {
  height: calc(100% - 45px);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 95%;
  margin: auto;
}

.content {
  flex-wrap: wrap;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 100%;

  .item {
    height: 50%;
    width: 30%;
    // height: 47px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    // justify-content: center;
    // text-align: center;

    & > span:nth-child(1) {
      font-size: 12px;
      margin-bottom: 10px;
    }
    .d {
      margin-left: 1px;
      font-size: 12px;
    }
  }

  .right {
    display: flex;
    flex-direction: column;
    margin-left: 20px;
  }
}
</style>