系统总览页面

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

@@ -0,0 +1,135 @@
+<template>
+  <div class="onLine">
+    <div class="content">
+      <div v-for="item in list" :key="item.key" :class="`item ${item.class}`">
+        <span>{{ item.value }} {{ item.d }}</span>
+        <span>{{ item.label }}</span>
+      </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: '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: {},
+  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>