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>
import { legacyLogicalPropertiesTransformer } from 'ant-design-vue'

export default {
  name: '',
  props: {
    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: '%',
          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: {},
  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>