daimp-front/sub-government-screen-service/src/views/plant/components/environment.vue

<template>
  <div class="plant-environment-warp">
    <div class="data-item-row">
      <div
        v-for="(n, index) in datalist"
        :key="index"
        :style="{
          'background-image': 'url(' + getAssetsFile('images/plant/bg3.png') + ')',
          width: 'calc((100% - 30px) /' + datalist.length + ')',
        }"
        class="data-item"
      >
        <div class="data-warp">
          <div class="data-pos">
            <div class="data-pos-center">
              <div class="pos-center">
                <span class="label">{{ n.label }}</span>
                <div class="value">
                  <span>{{ n.value }}</span>
                  <span class="unit">{{ n.unit }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="small-bg">
            <img :src="getAssetsFile('images/plant/bg6.png')" />
            <img :src="getAssetsFile('images/plant/' + n.icon)" class="img-icon" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { isEmpty, getAssetsFile } from '@/utils';
import { ref, reactive, onMounted, watch } from 'vue';
import { useRouter } from 'vue-router';
import { useApp } from '@/hooks';

const router = useRouter();
const props = defineProps({
  title: {
    type: String,
    default: '统计分析',
  },
  postion: {
    type: String,
    default: 'left',
  },
});

let topTitle = ref('');
let pos = ref('');

const datalist = reactive([
  { label: '空气温度', value: 28.6, unit: '℃', icon: 'icon4.png' },
  { label: '空气湿度', value: 30, unit: '%', icon: 'icon3.png' },
  { label: '光照强度', value: 1000, unit: 'lux', icon: 'icon1.png' },
  { label: '降水量', value: 100, unit: 'mm', icon: 'icon2.png' },
]);

onMounted(() => {
  if (datalist.length) {
    datalist.forEach((m, index) => {
      let num = 0;
      switch (index) {
        case 0:
          num = 20;
          break;
        case 1:
          num = 30;
          break;
        case 2:
          num = 1000;
          break;
        case 3:
          num = 100;
          break;
        default:
          num = 10;
          break;
      }

      m.value = (Math.random() + num).toFixed(2);
    });
  }
});

watch(
  () => (props.title, props.postion),
  () => {
    topTitle.value = props.title;
    pos.value = props.postion;
  },
  {
    deep: true,
    immediate: true,
  }
);
</script>
<style lang="scss" scoped>
.plant-environment-warp {
  height: 100%;
  width: 100%;
  .data-item-row {
    height: 100%;
    width: 100%;
    display: inline-flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 10px;
  }
  .data-item {
    height: 100%;
    background-size: 100% 100%;
    position: relative;
  }
  .data-warp {
    padding: 8px 0;
    text-align: center;
    z-index: 1;
    display: inline-flex;
    justify-content: center;
    .small-bg,
    .data-pos {
      display: inline-flex;
      vertical-align: middle;
      .data-pos-center {
        display: inline-flex;
        justify-content: space-around;
        flex-direction: column;
        height: 100%;
        .pos-center {
        }
      }
    }
    .small-bg {
      width: 38px;
      height: 38px;
      position: relative;
      margin-top: 10%;
      .img-icon {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 38%;
        height: 38%;
      }
    }
    .data-pos {
      width: calc(100% - 54px);
      .label,
      .value {
        display: inline-block;
        width: 100%;
      }
      .label {
        color: #fff;
        font-size: 13px;
      }
      .value {
        color: #6beff9;
        font-size: 16px;
        font-weight: bold;
        margin-top: 6px;
      }
      .unit {
        font-size: 10px;
      }
    }
  }
}
</style>