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

<template>
  <div class="onLine">
    <div class="content">
      <div v-for="item in list" :key="item.key" :class="`item ${item.class}`">
        <span>{{ item.value ? item.value : 0 }} {{ item.d }}</span>
        <span>{{ item.label }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  props: {
    propsTotal: {
      type: Object,
      default: () => {}
    },
    propsInfo: {
      type: Object,
      default: () => ({
        name: '场站111',
        statusName: '充电'
      })
    }
  },
  data() {
    return {
      list: [
        {
          key: 'tianshu',
          value: 26,
          d: '天',
          label: '场站运行天数',
          class: 'item-1',
          iconPath: require('@/assets/home/wendu.png')
        },
        {
          key: 'shouyi',
          value: 25,
          d: 'Kw·h',
          label: '储能充电量',
          class: 'item-2',
          iconPath: require('@/assets/home/shidu.png')
        },
        {
          key: 'shuliang',
          value: 24,
          d: 'Kw·h',
          label: '储能放电量',
          class: 'item-3',
          iconPath: require('@/assets/home/dianya.png')
        },
        {
          key: 'shuliang',
          value: 26,
          d: '万元',
          label: '场站累计收益',
          class: 'item-4',
          iconPath: require('@/assets/home/dianliu.png')
        },
        {
          key: 'fadianliang',
          value: 20,
          d: '%',
          label: '设备利用率',
          class: 'item-5',
          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:100%;
    padding: 6px 0px;
    width: 19%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: url('@/assets//home/onLineBg.png');
    background-size: contain;
    background-size: 100% 100%;
    background-repeat: no-repeat;

    & > 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>