系统总览页面

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

@@ -0,0 +1,139 @@
+<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="25" 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: 'Lux',
+          label: '光照',
+          class: 'item-1',
+          iconPath: require('@/assets/home/guangzhao.png')
+        },
+        {
+          key: 'shouyi',
+          value: 25,
+          d: 'm/s',
+          label: '风速',
+          class: 'item-2',
+          iconPath: require('@/assets/home/fengsu.png')
+        },
+        {
+          key: 'shuliang',
+          value: 24,
+          d: '℃',
+          label: '环境温度',
+          class: 'item-3',
+          iconPath: require('@/assets/home/hj-wendu.png')
+        },
+        {
+          key: 'shuliang',
+          value: 26,
+          d: '%',
+          label: '环境湿度',
+          class: 'item-4',
+          iconPath: require('@/assets/home/hj-shidu.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: 25%;
+  // 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>