RAS-WEB/src/views/screen/R_D_Environment/index.vue

<template>
  <div class="container">
    <div class="abs-header">研发中心环境实时监测系统</div>
    <div class="l-box">
      <div class="lbox1">
        <ItemVue title="温湿度">
          <Humiture />
        </ItemVue>
      </div>
      <div class="lbox1">
        <ItemVue title="粉尘">
          <PmVue />
        </ItemVue>
      </div>
      <div class="lbox1">
        <ItemVue title="温湿度">
          <LineChart />
        </ItemVue>
      </div>
    </div>
    <div class="ct-box">
      <div class="ct-sensor">
        <div class="sensor-item" v-for="item in sensor_list">
          <!-- <svg-icon ref="fenchen" icon-class="fenchen" :color="'#469DE9'" class="sensor-icon" /> -->
          <component  style="width: 75px;height: 75px;margin-top: 10px;" color="#469DE9" :is="item.component" :value="item.value" :unit="item.unit" />
        </div>
      </div>

    </div>
    <div class="cb-box">
      <div class="cbox">
        <ItemVue title="温湿度">
          <LineChart />
        </ItemVue>
      </div>
      <div class="cbox">
        <ItemVue title="温湿度">
          <LineChart />
        </ItemVue>
      </div>
    </div>
    <div class="r-box">
      <div class="rbox-item">
        <ItemVue title="温湿度">
          <LineChart />
        </ItemVue>
      </div>
      <div class="rbox-item">
        <ItemVue title="温湿度">
        </ItemVue>
      </div>
      <div class="rbox-item">
        <ItemVue title="温湿度">
        </ItemVue>
      </div>
    </div>
    
    <!-- <ThreeBG /> -->
  </div>
</template>

<script setup>
import { ref,reactive, onMounted } from 'vue';
import ThreeBG from './component/threeBG.vue';
import ItemVue from './component/item.vue';
import Humiture from './component/humiture_line.vue';
import PmVue from './component/pm.vue';
import LineChart from './component/lineChart.vue';
import SvgFenchen from './component/svgFenchen.vue';
import SvgJiaquan from './component/svgJiaquan.vue';
import SvgZaosheng from './component/svgZaosheng.vue';
import SvgTVOC from './component/svgTVOC.vue';
import SvgShidu from './component/svgShidu.vue';
import SvgWendu from './component/svgWendu.vue';
import SvgYanwu from './component/svgYanwu.vue';


let sensor_list = reactive([
  {
    name:'温度',
    component:SvgWendu,
    value: 20,
    unit: '℃'
  },
  {
    name:'湿度',
    component:SvgShidu,
    value: 20,
    unit: '%'
  },
  {
    name:'甲醛',
    component:SvgJiaquan,
    value: 20,
    unit: 'mg/m³'
  },
  {
    name:'TVOC',
    component:SvgTVOC,
    value: 20,
    unit: 'mg/m³'
  },
  {
    name:'噪声',
    component:SvgZaosheng,
    value: 20,
    unit: 'dB'
  },
  {
    name:'烟雾',
    component:SvgYanwu,
    value: 20,
    unit: 'mg/m³'
  }
])





onMounted(() => {
  
});
</script>

<style lang="scss" scoped>
.container {
  width: 1920px;
  height: 1080px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url('/src/assets/images/gif-bg.gif');
  background-repeat: no-repeat;
  /* 如果你不想让背景平铺 */
  background-size: cover;
  /* 或者其他你需要的大小设置 */
  background-position: center;

  .abs-header {
    width: 100%;
    height: 80px;
    position: absolute;
    top: 28px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 36px;
    font-weight: 700;
    color: #00c6ff;
  }

  .l-box {
    position: absolute;
    top: 100px;
    left: 33px;
    width: 410px;
    height: 950px;

    .lbox1 {
      width: 100%;
      height: 316px;
    }
  }
  .ct-box {
    position: absolute;
    top: 100px;
    left: 445px;
    width: 1026px;
    height: 180px;
    display: flex;
    justify-content: space-between;
    .ct-sensor {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .sensor-item {
        width: 146px;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        .sensor-icon {
          width: 75px;
          height: 75px;
        }
      }
    }
  }
  .cb-box {
    position: absolute;
    bottom: 30px;
    left: 445px;
    width: 1026px;
    height: 316px;
    display: flex;
    justify-content: space-between;
    .cbox {
      width: 50%;
      height: 100%;

    }
  }
  .r-box {
    position: absolute;
    top: 100px;
    right: 38px;
    width: 410px;
    height: 950px;
    
    .rbox-item {
      width: 100%;
      height: 316px;

    }
  }
}
</style>