<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 :data="dustData" />
        </ItemVue>
      </div>
      <div class="lbox1">
        <ItemVue title="智能控制系统">
          <BarChart />
        </ItemVue>
      </div>
    </div>
    <div class="ct-box">
      <div class="ct-sensor">
        <div class="sensor-item" v-for="item in sensor_list">   <!-- :style="{color:item.status == 'true'?'#469DE9':'gray'}" -->
          <component style="width: 75px;height: 75px;margin-top: 10px;"  :is="item.component"
            :value="item.value" :color="checkCb(item)" :unit="item.unit" /><!-- item.status == 'true'?'#469DE9':'gray' -->
            
          <div style="margin: 10px 0">{{ item.value + item.unit }}</div>
          <div>{{ item.name }}</div>
        </div>
      </div>

    </div>
    <div class="cb-box">
      <div class="cbox">
        <ItemVue title="甲醛监测">
          <LineChart />
        </ItemVue>
      </div>
      <div class="cbox">
        <ItemVue title="TVOC监测">
          <LineChart />
        </ItemVue>
      </div>
    </div>
    <div class="r-box">
      <div class="rbox-item">
        <ItemVue title="公共区域噪音" pos="right">
          <LineChart />
        </ItemVue>
      </div>
      <div class="rbox-item">
        <ItemVue title="办公室噪音" pos="right">
          <ProgeChart :data="noiseDataList" />
        </ItemVue>
      </div>
      <div class="rbox-item">
        <ItemVue title="告警信息" pos="right">
        </ItemVue>
      </div>
    </div>


    <!-- <Sence /> -->
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
// import ThreeBG from './component/threeBG.vue';
import Sence from './component/Sence.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 BarChart from './component/barChart.vue';
import ProgeChart from './component/proge.vue';
import SvgFenchen from './component/svgFenchen.vue';
import SvgPm25 from './component/svgPm25.vue';
import SvgPm10 from './component/svgPm10.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';
import { getNoiseData,getTopData,getSensorDateHourByType } from '@/api/screen/R_D_Environment';

let noiseDataList = ref([
  {
    "devId": "48a2ec70-a60c-11ef-91f3-abd609c7e488",
    "devName": "噪声监测7",
    "label": "noise-7",
    "place": null,
    "data": 0,
    "status": 0
  }
])
let sensor_list = reactive([
  {
    id: '',
    name: '温度',
    component: SvgWendu,
    value: 20,
    unit: '℃',
    type: 'AirTemp_Reg',
    limit: 30,
    status: "true"
  },
  {
    id: '',
    name: '湿度',
    component: SvgShidu,
    value: 20,
    unit: '%',
    type: 'AirHumi_Reg',
    limit: 30,
    status: "true"
  },
  {
    id: '',
    name: '甲醛',
    component: SvgJiaquan,
    value: 20,
    unit: 'mg/m³',
    type: 'CH2O',
    limit: 30,
    status: "true"
  },
  {
    id: '',
    name: 'TVOC',
    component: SvgTVOC,
    value: 20,
    unit: 'mg/m³',
    type: 'TVOC',
    limit: 30,
    status: "true"
  },
  {
    id: '',
    name: 'PM2.5',
    component: SvgPm25,
    value: 20,
    unit: 'mg/m³',
    type:'HIGH_PM25_Reg',
    limit: 30,
    status: "true"
  },
  {
    id: '',
    name: 'PM10',
    component: SvgPm10,
    value: 20,
    unit: 'mg/m³',
    type:'HIGH_PM10_Reg',
    limit: 30,
    status: "true"
  },
  {
    id: '',
    name: '噪音',
    component: SvgZaosheng,
    value: 20,
    unit: 'dB',
    type:'Noise_Reg',
    limit: 30,
    status: "true"
  },
  {
    id: '',
    name: '烟雾',
    component: SvgYanwu,
    value: 20,
    unit: 'mg/m³',
    type:'Smoke_Reg',
    limit: 30,
    status: "true"
  }
])
let dustData = reactive({
  pm25: 0,
  pm10: 0,
})
//检测是否超标
function checkCb(item) {
  if (item.status === 'false') {
    return 'gray'
  }else if (item.value > item.limit) {
    return '#FF0000'
  } else {
    return '#469DE9'
  }
}


// 获取各办公室噪音数据
function getNoiseDataList() {
  getNoiseData().then(res => {
    if (res.code === 200) {
      noiseDataList.value = res.data
    }
  })
}
// 获取顶部数据
function getTopDataList() {
  getTopData().then(res => {
    if (res.code === 200) {
      res.data.forEach(item =>{
        let index = sensor_list.findIndex(sensor => sensor.type === item.type)
        sensor_list[index].value = item.data
        sensor_list[index].id = item.id
        sensor_list[index].status = item.status
        sensor_list[index].limit = item.limit
        if (item.type === 'HIGH_PM25_Reg') {
          dustData.pm25 = item.data
        } else if (item.type === 'HIGH_PM10_Reg') {
          dustData.pm10 = item.data
          
        }

      })
    }
  })
}

// 获取传感器数据
function getSensorData(type) {
  let query = {
    type,
    deptId: '100'
  }
  getSensorDateHourByType(query)
}


onMounted(() => {
  getNoiseDataList()
  getTopDataList()
});
</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: 0px;
    width: 410px;
    height: 980px;
    z-index: 2;
    background: url('/src/assets/images/preview-left.png') center center / 100% 100% no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    .lbox1 {
      width: 100%;
      height: 316px;
    }
  }

  .ct-box {
    position: absolute;
    top: 100px;
    left: 445px;
    width: 1026px;
    height: 180px;
    display: flex;
    z-index: 2;
    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;
        font-size: 14px;
        color: #fff;

        .sensor-icon {
          width: 75px;
          height: 75px;
        }
      }
    }
  }

  .cb-box {
    position: absolute;
    bottom: 0px;
    left: 435px;
    width: 1046px;
    height: 316px;
    display: flex;
    z-index: 2;
    justify-content: space-between;
    background: url('/src/assets/images/preview-bottom.png') center center / 100% 100% no-repeat;

    .cbox {
      width: 48%;
      height: 100%;

    }
  }

  .r-box {
    position: absolute;
    top: 100px;
    right: 0px;
    width: 420px;
    height: 980px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background: url('/src/assets/images/preview-right.png') center center / 100% 100% no-repeat;

    .rbox-item {
      width: 100%;
      height: 316px;

    }
  }
}
</style>
