<template>
  <div class="container">
    <div class="abs-header" ref="texstref">研发中心环境实时监测系统</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">
          <ZdScrollBoard ref="devList" :config="zd_config"
            :style="{ width: '100%', height: '260px', 'padding-top': '10px' }" />
        </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 ZdScrollBoard from "@/components/ZdScrollBoard/index.vue";
import { connectWebsocket, closeWebsocket } from '@/utils/websocket';
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": 10,
    "status": 0
  },
  {
    "devId": "48a2ec70-a60c-11ef-91f3-abd609c7e489",
    "devName": "办公区6",
    "label": "noise-6",
    "place": null,
    "data": 20,
    "status": 0
  },
  {
    "devId": "48a2ec70-a60c-11ef-91f3-abd609c7e490",
    "devName": "办公区5",
    "label": "noise-5",
    "place": null,
    "data": 22,
    "status": 0
  },
  {
    "devId": "48a2ec70-a60c-11ef-91f3-abd609c7e491",
    "devName": "办公区4",
    "label": "noise-4",
    "place": null,
    "data": 22,
    "status": 0
  },
  {
    "devId": "48a2ec70-a60c-11ef-91f3-abd609c7e491",
    "devName": "办公区3",
    "label": "noise-3",
    "place": null,
    "data": 21,
    "status": 0
  },
  {
    "devId": "48a2ec70-a60c-11ef-91f3-abd609c7e492",
    "devName": "办公区2",
    "label": "noise-2",
    "place": null,
    "data": 24,
    "status": 0
  },
  {
    "devId": "48a2ec70-a60c-11ef-91f3-abd609c7e493",
    "devName": "办公区1",
    "label": "noise-1",
    "place": null,
    "data": 25,
    "status": 0
  },
])
let sensor_list = reactive([
  {
    id: '',
    name: '温度',
    component: SvgWendu,
    value: 20,
    unit: '℃',
    type: 'AirTemp_Reg',
    limit: 40,
    status: "true"
  },
  {
    id: '',
    name: '湿度',
    component: SvgShidu,
    value: 20,
    unit: '%',
    type: 'AirHumi_Reg',
    limit: 90,
    status: "true"
  },
  {
    id: '',
    name: '甲醛',
    component: SvgJiaquan,
    value: 20,
    unit: 'mg/m³',
    type: 'CH2O',
    limit: 0.08,
    status: "true"
  },
  {
    id: '',
    name: 'TVOC',
    component: SvgTVOC,
    value: 20,
    unit: 'mg/m³',
    type: 'TVOC',
    limit: 0.5,
    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: 85,
    status: "true"
  },
  {
    id: '',
    name: '烟雾',
    component: SvgYanwu,
    value: 20,
    unit: 'mg/m³',
    type: 'Smoke_Reg',
    limit: 100,
    status: "true"
  }
])
let dustData = reactive({
  pm25: 0,
  pm10: 0,
})
let texstref = ref(null)
let zd_config = ref({
  header: ['报警时间', '报警内容', '报警位置'],
  rowNum: 4,
  data: [
    ['行1列1', '行1列2', '行1列3'],
    ['行2列1', '行2列2', '行2列3'],
    ['行3列1', '行3列2', '行3列3'],
    ['行4列1', '行4列2', '行4列3'],
    ['行5列1', '行5列2', '行5列3'],
    ['行6列1', '行6列2', '行6列3'],
    ['行7列1', '行7列2', '行7列3'],
    ['行8列1', '行8列2', '行8列3'],
    ['行9列1', '行9列2', '行9列3'],
    ['行10列1', '行10列2', '行10列3']
  ]
})
//检测是否超标
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)
}


//socket
function getWebsocket(val) {
  try {
    let data = JSON.parse(val);

    if (data.type == "HUMI_TEMP") {
      let obj = data.msg;
      if (obj.hasOwnProperty('temp')) {
        let index = sensor_list.findIndex(sensor => sensor.type === 'AirTemp_Reg' && sensor.id === obj.temp.devId)
        if (index !== -1) {
          sensor_list[index].value = obj.temp.value
          sensor_list[index].status = "true"
        }

      }
      if (obj.hasOwnProperty('humi')) {
        let index = sensor_list.findIndex(sensor => sensor.type === 'AirHumi_Reg' && sensor.id === obj.humi.devId)
        if (index !== -1) {
          sensor_list[index].value = obj.humi.value
          sensor_list[index].status = "true"
        }

      }
    }
    if (data.type == "TVOC_CH2O") {
      let obj = data.msg;
      if (obj.hasOwnProperty('CH2O')) {
        let index = sensor_list.findIndex(sensor => sensor.type === 'CH2O' && sensor.id === obj.CH2O.devId)
        if (index !== -1) {
          sensor_list[index].value = obj.CH2O.value
          sensor_list[index].status = "true"
        }

      }
      if (obj.hasOwnProperty('TVOC')) {
        let index = sensor_list.findIndex(sensor => sensor.type === 'TVOC' && sensor.id === obj.TVOC.devId)
        if (index !== -1) {
          sensor_list[index].value = obj.TVOC.value
          sensor_list[index].status = "true"
        }

      }
    }
    //粉尘
    if (data.type == "dust") {
      let obj = data.msg;


      let index_pm25 = sensor_list.findIndex(sensor => sensor.type === 'HIGH_PM25_Reg' && sensor.id === obj.devId)
      let index_pm10 = sensor_list.findIndex(sensor => sensor.type === 'HIGH_PM10_Reg' && sensor.id === obj.devId)
      if (index_pm25 !== -1) {
        sensor_list[index_pm25].value = obj.pm25
        sensor_list[index_pm25].status = "true"
        dustData.pm25 = obj.pm25
      }
      if (index_pm10 !== -1) {
        sensor_list[index_pm10].value = obj.pm10
        sensor_list[index_pm10].status = "true"
        dustData.pm10 = obj.pm10
      }
    }
    //噪音
    if (data.type === "NOISE") {
      let obj = data.msg;
      let list_index = noiseDataList.value.findIndex(item => item.devId === obj.noise.devId)
      if (list_index !== -1) {
        noiseDataList.value[list_index].data = obj.noise.value        
      } else {
        let index = sensor_list.findIndex(sensor => sensor.type === 'Noise_Reg' && sensor.id === obj.noise.devId)
        if (index !== -1) {
          sensor_list[index].value = obj.noise.value
          sensor_list[index].status = "true"
        }
      }
    }
  } catch (err) {
    console.log(err);
  }
}
function errWebsocket(val) {
  // console.log(val);
}

let deltaY = ref(0)
onMounted(() => {
  getNoiseDataList()
  getTopDataList()

  //监听滚动事件
  // window.addEventListener('wheel', function (event) {
  //   deltaY.value += event.deltaY
  //   console.log(event.deltaY,deltaY.value,'event.deltaY');
  //   if (deltaY.value <= -500 &&deltaY.value >= -1000) {
  //     texstref.value.style.display = 'none'
  //   }
  //   if (deltaY.value > -500 && deltaY.value < 0) {
  //     texstref.value.style.display = 'block'
      
  //   }
  // }, { passive: false });

  connectWebsocket(null, null, getWebsocket, errWebsocket);
});
</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: linear-gradient(to left, transparent 0%, rgba(15, 32, 54, 0.8) 50%, #102238 100%);
    // 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: linear-gradient(to bottom, transparent 0%, rgba(15, 32, 54, 0.8) 50%, #102238 100%);
    // 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: linear-gradient(to right, transparent 0%, rgba(15, 32, 54, 0.8) 50%, #102238 100%);

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

    }
  }
}
</style>
