<template>
  <div class="app-container home">
    <div id="main">
      <seHeader />
      <el-row class="containWrap">
        <el-col class="leftWrap">
          <energy :resData="initList[0][0]" alt="能源与环境" />
          <security :resData="initList[0][1]" alt="安防与消防" />
          <keepWatch1 :resData="initList[0][2]" alt="巡更记录" />
        </el-col>
        <el-col id="middleWrap">
          <iframe  style="width:100%;height:100%;border:none;" id="iframe" src='https://www.thingjs.com/s/bd3f8b27e1e50b1c9b963d43'></iframe>
        </el-col>
        <el-col class="rightWrap">
          <people :resData="initList[0][4]" alt="人员通行" />
          <car :resData="initList[0][5]" alt="车辆通行" />
          <keepWatch :resData="initList[0][3]" alt="巡更数据" />
        </el-col>
        <div id="loader-wrapper2" v-if="sanwei">
        <div id="loader2"></div>
        <div class="loader-section section-left"></div>
        <div class="loader-section section-right"></div>
        <div class="load_title">三维模型加载中...</div>
      </div>
      </el-row>
      
    </div>
  </div>
</template>
<script setup>
import axios from "axios";
import seHeader from "@/components/business/seHeader"; //头部
import energy from "@/components/business/energy"; //能源与环境
import security from "@/components/business/security"; //能源与环境
import people from "@/components/business/access/people"; //人员通行
import car from "@/components/business/access/car"; //车辆通行
import keepWatch from "@/components/business/keepWatch"; //巡更数据
import keepWatch1 from "@/components/business/keepWatch1"; //巡更数据
const data = reactive({
  initList: [
    [
      [
        {
          name1: "当月用电量",
          num: "565kW‧h",
          name2: "日均用量较上月",
          compare: -20,
        },
        {
          name1: "当月用水量",
          num: "564m³",
          name2: "日均用量较上月",
          compare: 0,
        },
        {
          name1: "当月制冷量",
          num: "563kW‧h",
          name2: "日均用量较上月",
          compare: -1,
        },
        {
          name1: "当月发热量",
          num: "5651kW‧h",
          name2: "日均用量较上月",
          compare: 3,
        },
      ],
      [
        [
          { name: "摄像头总数", num: 572 },
          { name: "关键监控区域", num: 172 },
          { name: "周界防护设备", num: 302 },
        ],
        [
          { value: 79, name: "已处理" },
          { value: 21, name: "未处理" },
        ],
      ],
      [
        {
          name: "入侵",
          enforcer: "王茂",
          time: "2022-07-19 00:00:00",
          status: 1,
        },
        {
          name: "入侵",
          enforcer: "王茂",
          time: "2022-07-19 00:00:00",
          status: 0,
        },
        {
          name: "入侵",
          enforcer: "王茂",
          time: "2022-07-19 00:00:00",
          status: 0,
        },
        {
          name: "入侵",
          enforcer: "王茂",
          time: "2022-07-19 00:00:00",
          status: 1,
        },
        {
          name: "入侵",
          enforcer: "王茂",
          time: "2022-07-19 00:00:00",
          status: 0,
        },
        {
          name: "入侵",
          enforcer: "王茂",
          time: "2022-07-19 00:00:00",
          status: 0,
        },
        {
          name: "入侵",
          enforcer: "王茂",
          time: "2022-07-19 00:00:00",
          status: 1,
        },
        {
          name: "入侵",
          enforcer: "王茂",
          time: "2022-07-19 00:00:00",
          status: 0,
        },
        {
          name: "入侵",
          enforcer: "王茂",
          time: "2022-07-19 00:00:00",
          status: 0,
        },
        {
          name: "入侵",
          enforcer: "王茂",
          time: "2022-07-19 00:00:00",
          status: 1,
        },
        {
          name: "入侵",
          enforcer: "王茂",
          time: "2022-07-19 00:00:00",
          status: 0,
        },
        {
          name: "入侵",
          enforcer: "王茂",
          time: "2022-07-19 00:00:00",
          status: 0,
        },
        {
          name: "入侵",
          enforcer: "王茂",
          time: "2022-07-19 00:00:00",
          status: 1,
        },
        {
          name: "入侵",
          enforcer: "王茂",
          time: "2022-07-19 00:00:00",
          status: 0,
        },
        {
          name: "入侵",
          enforcer: "王茂",
          time: "2022-07-19 00:00:00",
          status: 0,
        },
        {
          name: "入侵",
          enforcer: "王茂",
          time: "2022-07-19 00:00:00",
          status: 1,
        },
        {
          name: "入侵",
          enforcer: "王茂",
          time: "2022-07-19 00:00:00",
          status: 0,
        },
        {
          name: "入侵",
          enforcer: "王茂",
          time: "2022-07-19 00:00:00",
          status: 0,
        },
        {
          name: "入侵",
          enforcer: "王茂",
          time: "2022-07-19 00:00:00",
          status: 1,
        },
        {
          name: "入侵",
          enforcer: "王茂",
          time: "2022-07-19 00:00:00",
          status: 0,
        },
        {
          name: "入侵",
          enforcer: "王茂",
          time: "2022-07-19 00:00:00",
          status: 0,
        },
        {
          name: "入侵",
          enforcer: "王茂",
          time: "2022-07-19 00:00:00",
          status: 1,
        },
        {
          name: "入侵",
          enforcer: "王茂",
          time: "2022-07-19 00:00:00",
          status: 0,
        },
        {
          name: "入侵",
          enforcer: "王茂",
          time: "2022-07-19 00:00:00",
          status: 0,
        },
        {
          name: "入侵",
          enforcer: "王茂",
          time: "2022-07-19 00:00:00",
          status: 0,
        },
        {
          name: "入侵",
          enforcer: "王茂",
          time: "2022-07-19 00:00:00",
          status: 0,
        },
        {
          name: "入侵",
          enforcer: "王茂",
          time: "2022-07-19 00:00:00",
          status: 0,
        },
      ],
      [
        [
          { name: "巡更点位", num: 101 },
          { name: "巡更点位", num: 1001 },
        ],
        [
          { value: 79, name: "按时完成" },
          { value: 21, name: "延迟完成" },
        ],
      ],
      [
        [191, 52, 121],
        [
          {
            name: "楼内人员",
            type: "line",
            stack: "Total",
            smooth: true,
            data: [220, 182, 178, 231],
          },
          {
            name: "外部访客",
            type: "line",
            stack: "Total",
            smooth: true,
            data: [120, 132, 111, 123],
          },
        ],
        ["01", "02", "03", "04"],
      ],
      [
        [19822, 5682, 12011],
        [
          {
            name: "地面停车场",
            type: "line",
            stack: "Total",
            smooth: true,
            data: [20, 180, 50, 160],
          },
          {
            name: "地下停车场",
            type: "line",
            stack: "Total",
            smooth: true,
            data: [15, 30, 150, 20],
          },
        ],
        ["01", "02", "03", "04"],
      ],
    ],
  ],
});

const { initList } = toRefs(data);
const sanwei = ref(true)
setTimeout(() => {
  sanwei.value = false
  document.getElementById("middleWrap").style.zIndex = "9";
}, 5000);
</script>
<style lang="scss">
@import "@/assets/styles/common.scss";
#main {
  width: 100%;
  height: auto;
  margin: auto;
  overflow: hidden;
  padding: 0 10px;
  font-family: "MicrosoftYaHei";
  color: #fff;
  .containWrap {
    clear: both;
    width: 100%;
    overflow: hidden;
    padding: 0 !important;
    height: 100vh;
    margin-top: 50px;
    .leftWrap {
      display: inline-block;
      width: 500px;
      position: absolute;
      z-index: 10;
      left: 0;
    }
    .rightWrap {
      position: absolute;
      z-index: 10;
      right: 0;
      margin-left: 28px;
      width: 500px;
      display: inline-block;
      overflow: hidden;
    }
  }
  .mt16 {
    margin-top: 16px;
  }
  .ml16 {
    margin-left: 16px;
  }
}
#middleWrap {
  display: inline-block;
  overflow: hidden;
  width:100%;
  height:100vh;
  border: none;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
}
.mask {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  z-index: 100;
}
//公共样式
.modular {
  background: rgba(0, 0, 0, 0.4);
  // backdrop-filter: blur(1px);
  color: $white;
  position: relative;
  padding: 10px 15px;
  margin-top: 10px;
  width: 500px !important;
  border-radius: 2px;
  .title {
    font-size: 16px;
    //font-family: "MicrosoftYaHei-Bold";
    width: 100%;
    margin-bottom: 20px;
  }
}


 #loader-wrapper2 {
      position: fixed;
      top: 0;
      left: 0;
      width: 200px;
      margin:0 calc(50vw - 100px);
      height: 100%;
      z-index: 0;
  }
  
  #loader2 {
      display: block;
      position: fixed;
      left: 50%;
      top: 50%;
      width: 150px;
      height: 150px;
      margin: -75px 0 0 -75px;
      border-radius: 50%;
      border: 3px solid transparent;
      border-top-color: #FFF;
      -webkit-animation: spin 2s linear infinite;
      -ms-animation: spin 2s linear infinite;
      -moz-animation: spin 2s linear infinite;
      -o-animation: spin 2s linear infinite;
      animation: spin 2s linear infinite;
      z-index: 1001;
      
  }
  
  #loader2:before {
      content: "";
      position: absolute;
      top: 5px;
      left: 5px;
      right: 5px;
      bottom: 5px;
      border-radius: 50%;
      border: 3px solid transparent;
      border-top-color: #FFF;
      -webkit-animation: spin 3s linear infinite;
      -moz-animation: spin 3s linear infinite;
      -o-animation: spin 3s linear infinite;
      -ms-animation: spin 3s linear infinite;
      animation: spin 3s linear infinite;
  }
  
  #loader2:after {
      content: "";
      position: absolute;
      top: 15px;
      left: 15px;
      right: 15px;
      bottom: 15px;
      border-radius: 50%;
      border: 3px solid transparent;
      border-top-color: #FFF;
      -moz-animation: spin 1.5s linear infinite;
      -o-animation: spin 1.5s linear infinite;
      -ms-animation: spin 1.5s linear infinite;
      -webkit-animation: spin 1.5s linear infinite;
      animation: spin 1.5s linear infinite;
  }
  
  @-webkit-keyframes spin {
      0% {
          -webkit-transform: rotate(0deg);
          -ms-transform: rotate(0deg);
          transform: rotate(0deg);
      }
      100% {
          -webkit-transform: rotate(360deg);
          -ms-transform: rotate(360deg);
          transform: rotate(360deg);
      }
  }
  
  @keyframes spin {
      0% {
          -webkit-transform: rotate(0deg);
          -ms-transform: rotate(0deg);
          transform: rotate(0deg);
      }
      100% {
          -webkit-transform: rotate(360deg);
          -ms-transform: rotate(360deg);
          transform: rotate(360deg);
      }
  }
  
  #loader-wrapper2 .loader-section {
      position: fixed;
      top: 0;
      width: 51%;
      height: 100%;
      
      z-index: 0;
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
  }
  
  #loader-wrapper2 .loader-section.section-left {
      left: 0;
  }
  
  #loader-wrapper2 .loader-section.section-right {
      right: 0;
  }
  
  .loaded #loader-wrapper2 .loader-section.section-left {
      -webkit-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
      transform: translateX(-100%);
      -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
      transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
  }
  
  .loaded #loader-wrapper2 .loader-section.section-right {
      -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
      transform: translateX(100%);
      -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
      transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
  }
  
  .loaded #loader2 {
      opacity: 0;
      -webkit-transition: all 0.3s ease-out;
      transition: all 0.3s ease-out;
  }
  
  .loaded #loader-wrapper2 {
      visibility: hidden;
      -webkit-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
      transform: translateY(-100%);
      -webkit-transition: all 0.3s 1s ease-out;
      transition: all 0.3s 1s ease-out;
  }
  
  .no-js #loader-wrapper2 {
      display: none;
  }
  
  .no-js h1 {
      color: #222222;
  }
  
  #loader-wrapper2 .load_title {
      font-family: 'Open Sans';
      color: #FFF;
      font-size: 19px;
      width: 100%;
      text-align: center;
      z-index: 9999999999999;
      position: absolute;
      top: 60%;
      opacity: 1;
      line-height: 30px;
  }
  
  #loader-wrapper2 .load_title span {
      font-weight: normal;
      font-style: italic;
      font-size: 13px;
      color: #FFF;
      opacity: 0.5;
  }
</style>
