<template>
  <Resize>
    <div style="width: 100%; height: 100%">
      <!-- <div class="bgPicture"> -->

      <div class="mapModuleApp" style="width: 100%; height: 100%">
        <iframe
          src="../static/unity/index.html"
          frameborder="0"
          style="width: 100%; height: 100%"
          scrolling="no"
          id="unityModule"
        ></iframe>
        <!-- 标题 -->
        <div class="header">
          <div class="title"></div>
          <div class="titTop">
            <div class="titLeft" v-show="titLeftshow">
              <span @click="goBack(1)">首页</span>
              <span>/</span>
              <span @click="goBack(japIndex)">{{ japIndex }}</span>
            </div>
            <div class="titRight">
              <span>{{ dateNew }}&nbsp;{{ getWeek }}&nbsp;{{ time }}</span>
              <span
                ><img
                  :src="weatherImg"
                  alt=""
                  style="width: 100%; height: 100%"
              /></span>
              <span
                >&nbsp;&nbsp;天气&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span
              >
              <span
                >{{ weatherItem.weather }} &nbsp;{{
                  weatherItem.temperature
                }}℃</span
              >
            </div>
            <div class="closeIndex" @click="closeindex">
              <img src="../assets/pic/closeIndex.png" alt="" />
            </div>
          </div>
        </div>
      </div>
      <!-- <div @click="disBox" ref="screenBox" :class="!boxNone ? 'screenBox dh1' : 'screenBox dh2'"
        :style="{ 'background-image': !boxNone ? `url(${require(`../assets/pic/exitFull.png`)}` : `url(${require(`../assets/pic/fullScreen.png`)}` }">
      </div> -->
      <!-- 首页 -->
      <ModelScreenComponents v-if="indexShow" />
      <!-- 人员管理 -->
      <PersonnelComponents v-if="personnelShow" />
      <!-- 视频监控 -->
      <VideoSurveillanceComponents
        v-if="videoSurveillanceShow"
        @transfer="getUser"
      />
      <!-- 视频监控子页面 -->
      <VideoViewingComponents
        v-if="videoViewingShow"
        :videoName="videoName"
        :videoId="videoId"
      />
      <!-- 进度管理 -->
      <ProgressComponents v-if="progressShow" />
      <!-- 安全管理 -->
      <ManagementComponents v-if="managementShow" />
      <!-- 中间1 -->

      <!-- 中间2 -->

      <!-- 左侧模块1 -->

      <!-- 左侧模块2 -->
    </div>
    <div class="container" :style="{ right: !type ? '-10px' : '0' }">
      <div class="box" id="box" :style="{ width: !type ? '267px' : '0' }">
        <div
          v-if="!type"
          :class="[menuType === 1 ? 'childBoxChoose' : 'childBox']"
          @click="childBoxClick(1)"
        >
          <span class="icon1"></span>
          <span>人员管理</span>
          <span class="picture1"></span>
        </div>
        <div
          v-if="!type"
          :class="[menuType === 2 ? 'childBoxChoose' : 'childBox']"
          @click="childBoxClick(2)"
        >
          <span class="icon2"></span>
          <span>视频监控</span>
          <span class="picture1"></span>
        </div>
        <div
          v-if="!type"
          :class="[menuType === 3 ? 'childBoxChoose' : 'childBox']"
          @click="childBoxClick(3)"
        >
          <span class="icon3"></span>
          <span>进度管理</span>
          <span class="picture1"></span>
        </div>
        <div
          v-if="!type"
          :class="[menuType === 4 ? 'childBoxChoose' : 'childBox']"
          @click="childBoxClick(4)"
        >
          <span class="icon4"></span>
          <span>安全管理</span>
          <span class="picture1"></span>
        </div>
      </div>

      <div class="switchBtn" ref="switchBtn" @click="switchDiv()"></div>
      <div
        class="closeBtn"
        :style="{ display: type ? 'none' : 'block' }"
        @click="switchDiv()"
      ></div>
    </div>
  </Resize>
</template>

<script>
import BarChart from "@/components/common/BarChart";
import mdScreenPie from "@/components/common/mdScreenPie";
import PersonnelComponents from "./personnelComponents";
import ModelScreenComponents from "./modelScreenComponents";
import VideoSurveillanceComponents from "./videoSurveillanceComponents";
import ProgressComponents from "./progressComponents";
import ManagementComponents from "./managementComponents";
import VideoViewingComponents from "./videoViewingComponents";
import mqtt from "mqtt"; // mqtt协议
import Swiper from "@/components/common/carousel";
import Resize from "../utils/Resize.vue";
import axios from "axios";
export default {
  name: "report",
  components: {
    mdScreenPie,
    BarChart,
    PersonnelComponents,
    Swiper,
    ModelScreenComponents,
    VideoSurveillanceComponents,
    ProgressComponents,
    ManagementComponents,
    VideoSurveillanceComponents,
    VideoViewingComponents,
    Resize,
  },
  data() {
    return {
      weatherImg: require("@/assets/pic/sun.png"),
      videoName: "", //子传父的视频名称
      videoId: "", //子传父的视频Id
      //显示首页
      indexShow: true,
      //人员管理
      personnelShow: false,
      //视频监控
      videoSurveillanceShow: false,
      //视频监控子页面
      videoViewingShow: false,
      //进度管理
      progressShow: false,
      //安全管理
      managementShow: false,
      //左上角
      titLeftshow: false,
      japIndex: "人员管理",
      getWeek: "星期四",
      dateNew: "2023年2月17日",
      time: "14:26",
      temperature: "12",
      weather: "晴",
      weatherItem: {},
      tienum: "",
      showType: true,
      boxList: [
        {
          c1: "开工",
          c2: "2023-1-4",
          c3: "2023-1-4",
          c4: "正常完成",
        },
        {
          c1: "勘察现场",
          c2: "2023-1-4",
          c3: "2023-1-4",
          c4: "逾期完成",
        },
        {
          c1: "启动会议",
          c2: "2023-1-4",
          c3: "2023-1-4",
          c4: "正常完成",
        },
        {
          c1: "结构施工",
          c2: "2023-1-4",
          c3: "--",
          c4: "逾期中",
        },
        {
          c1: "水电安装",
          c2: "2023-1-4",
          c3: "--",
          c4: "未开始",
        },
        {
          c1: "完工",
          c2: "2023-1-4",
          c3: "--",
          c4: "实施中",
        },
      ],
      dataList: [
        {
          src: "@/assets/pic/23.png",
        },
      ], // 专题数据列表
      iconPicList: [
        {
          icon: "wendu",
          name: "温度",
          val: "19.8",
          tem: "℃",
        },
        {
          icon: "shidu",
          name: "湿度",
          val: "19.8",
          tem: "%",
        },
        {
          icon: "yangqi",
          name: "氧气值",
          val: "19.8",
          tem: "%VOL",
        },
        {
          icon: "co2",
          name: "二氧化碳",
          val: "19.8",
          tem: "%VOL",
        },
        {
          icon: "ch4",
          name: "甲烷",
          val: "19.8",
          tem: "ppm",
        },
        {
          icon: "h2s",
          name: "硫化氢",
          val: "19.8",
          tem: "ppm",
        },
      ],
      tableData: [
        {
          entName: "开工建设",
          start: "2021-02-01",
          end: "张三",
          zt: "正常完成",
        },
        {
          entName: "勘察现场",
          start: "2021-02-01",
          end: "张三",
          zt: "未完成",
        },
        {
          entName: "临时设施",
          start: "2021-02-01",
          end: "张三",
          zt: "未完成",
        },
        {
          entName: "桩基工程",
          start: "2021-02-01",
          end: "张三",
          zt: "实施中",
        },
        {
          entName: "水电安装",
          start: "2021-02-01",
          end: "张三",
          zt: "未开始",
        },
        {
          entName: "水电安装",
          start: "2021-02-01",
          end: "张三",
          zt: "实施中",
        },
        {
          entName: "桩基工程",
          start: "2021-02-01",
          end: "张三",
          zt: "实施中",
        },
        {
          entName: "水电安装",
          start: "2021-02-01",
          end: "张三",
          zt: "未开始",
        },
        {
          entName: "完工建设",
          start: "2021-02-01",
          end: "张三",
          zt: "实施中",
        },
      ],
      qyList: [
        {
          name: "1月",
          value: 12,
        },
        {
          name: "2月",
          value: 21,
        },
        {
          name: "3月",
          value: 22,
        },
        {
          name: "4月",
          value: 12,
        },
        {
          name: "5月",
          value: 10,
        },
        {
          name: "6月",
          value: 3,
        },
        {
          name: "7月",
          value: 4,
        },
        {
          name: "8月",
          value: 76,
        },
        {
          name: "9月",
          value: 22,
        },
        {
          name: "10月",
          value: 1,
        },
        {
          name: "11月",
          value: 32,
        },
        {
          name: "12月",
          value: 12,
        },
      ],
      xArry: [],
      chartData: [],
      peopleList: [
        {
          name: "姓名",
          value: "：王刚",
        },
        {
          name: "岗位",
          value: "：项目经理",
        },
        {
          name: "入岗时间",
          value: "：2022-11-26 08:22:13",
        },
      ],
      vdaH: 0,
      type: false,
      menuType: null,
      numberList: [5, 5],
      boxNone: true,
      topicSends: [],
    };
  },
  created() {
    let h = document.documentElement.clientHeight || document.body.clientHeight;
    this.vdaH = h - 0 + "px";
    //    this.createMqtt()
    this.getWeather();
    window.setInterval(() => {
      this.getTime();
    }, 1000);
    window.openBig = this.openBig;
    window.closeBig = this.closeBig;
    window.createMqtt = this.createMqtt;
  },
  methods: {
    createMqtt() {
      this.topicSends = ["/SC/pub/uwb", "/SC/pub/env"];
      window.PubScribe(this.topicSends, this.realInfo);
    },
    /** 实时数据分类 */
    realInfo(topic, message) {
      let time = new Date();
      // console.log("topic",topic)
      switch (topic) {
        // 接收托片
        case "/SC/pub/uwb":
          try {
            // console.log("message", message)
            const utf8decoder = new TextDecoder();
            const u8arr = new Uint8Array(message);
            const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
            const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
            console.log("msg", time.toLocaleString(), msg); //msg为转换后的JSON数据
          } catch (error) {}
          break;
        case "/SC/pub/env":
          try {
            //  console.log("环境message", message)
            const utf8decoder = new TextDecoder();
            const u8arr = new Uint8Array(message);
            const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
            const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
            console.log("环境msg",time.toLocaleString(), msg); //msg为转换后的JSON数据
          } catch (error) {}
          break;
      }
    },
    closeindex(){
      //  this.$router.push('/')
      this.$confirm("确定退出登录？", "确认信息", {
        distinguishCancelAndClose: true,
        confirmButtonText: "退出",
        cancelButtonText: "取消",
      })
        .then(() => {
          this.$message({
            type: "info",
            message: "返回登录",
          });
          this.$router.push("/");
          sessionStorage.clear(); //清除所有session值
        })
        .catch((action) => {
          this.$message({
            type: "info",
            message: action === "cancel" ? "取消退出" : "停留在当前页面",
          });
        });
    },
    //获取当前时间
    getTime() {
      let myDate = new Date();
      let wk = myDate.getDay();
      //年
      let year = new Date().getFullYear();
      //月份是从0月开始获取的，所以要+1;
      let month = new Date().getMonth() + 1;
      //日
      let day = new Date().getDate();
      //时
      let hour = new Date().getHours();
      //分
      let minute = new Date().getMinutes();
      //秒
      // let second = new Date().getSeconds();
      let weeks = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      let week = weeks[wk];
      this.getWeek = week;
      this.dateNew = year + "年" + month + "月" + day + "日";
      this.time = hour + ":" + minute;
    },
    //获取天气数据
    getWeather() {
      axios({
        url: "https://restapi.amap.com/v3/weather/weatherInfo?key=e979d73682c0c69059e4cb6740c9dacd&city=320100",
        methods: "",
      }).then((res) => {
        this.weatherItem = res.data.lives[0];
        this.weatherImg = this.changeWeatherImg(res.data.lives[0].weather);
      });
    },
    changeWeatherImg(weather) {
      if (weather == "雾") {
        return require("@/assets/weather/gale.png");
      } else if (weather == "阴") {
        return require("@/assets/weather/Cloudy.png");
      } else if (weather == "多云") {
        return require("@/assets/weather/Cloudy.png");
      } else if (weather == "晴") {
        return require("@/assets/weather/sun.png");
      } else if (weather == "中雨") {
        return require("@/assets/weather/middlerain.png");
      } else if (weather == "小雨") {
        return require("@/assets/weather/rain.png");
      } else if (weather == "大雨") {
        return require("@/assets/weather/rainstorm.png");
      } else if (weather == "沙尘暴") {
        return require("@/assets/weather/sand.png");
      } else if (weather == "霾") {
        return require("@/assets/weather/smog.png");
      } else if (weather == "雷电") {
        return require("@/assets/weather/thunder.png");
      } else if (weather == "雷阵雨") {
        return require("@/assets/weather/shower.png");
      } else if (weather == "冰雹") {
        return require("@/assets/weather/hail.png");
      } else if (weather == "雪") {
        return require("@/assets/weather/snow.png");
      } else if (weather == "雨夹雪") {
        return require("@/assets/weather/rainsnow.png");
      } else if (weather == "中雪") {
        return require("@/assets/weather/mieddlesnow.png");
      } else if (weather == "大雪") {
        return require("@/assets/weather/bigsnow.png");
      } else if (weather == "小雪") {
        return require("@/assets/weather/rainlitter.png");
      }
    },
    changeMessage(val) {
      this.tienum = val;
    },
    disBox() {
      this.boxNone = !this.boxNone;
      this.$refs.screenBox.style.animationPlayState = "running";
    },
    goBack(val) {
      if (val === 1) {
        this.indexShow = true;
        this.personnelShow = false;
        this.videoSurveillanceShow = false;
        this.videoViewingShow = false;
        this.managementShow = false;
        this.progressShow = false;
        this.titLeftshow = false;
      } else {
        if (val == "视频监控" && this.videoViewingShow == true) {
          this.indexShow = false;
          this.personnelShow = false;
          this.videoSurveillanceShow = true;
          this.videoViewingShow = false;
          this.managementShow = false;
          this.progressShow = false;
          this.titLeftshow = true;
        }
        // this.$router.go(0)
      }
    },
    //获取视频子传父数据
    getUser(msg) {
      //    this.username= msg
      if (msg != null) {
        this.indexShow = false;
        this.personnelShow = false;
        this.videoSurveillanceShow = false;
        this.videoViewingShow = true;
        this.managementShow = false;
        this.progressShow = false;
        this.titLeftshow = true;
        this.videoName = msg.videoName;
        this.videoId = msg.videoId;
      }
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 0) {
        return "success-row";
      } else {
        return "warning-row";
      }
    },
    //放大
    openBig() {
      document.getElementById("unityModule").contentWindow.fullScreen();
    },
    //关闭放大
    closeBig() {
      document.getElementById("unityModule").contentWindow.exitFullScreen();
    },
    // 菜单点击
    childBoxClick(val) {
      this.menuType = val;
      if (val === 3) {
        this.japIndex = "进度管理";
        //进度管理
        this.indexShow = false;
        this.personnelShow = false;
        this.videoSurveillanceShow = false;
        this.videoViewingShow = false;
        this.managementShow = false;
        this.progressShow = true;
        this.titLeftshow = true;
        // this.$router.push('/progress')
        this.type = true;
        setTimeout(() => {
          // 俩秒之后让模块消失
          this.$refs.switchBtn.style.display = "block";
        }, 800);
      } else if (val === 2) {
        //视频监控
        this.japIndex = "视频监控";
        // this.$router.push('/videoSurveillance')
        this.indexShow = false;
        this.personnelShow = false;
        this.videoSurveillanceShow = true;
        this.videoViewingShow = false;
        this.managementShow = false;
        this.progressShow = false;
        this.titLeftshow = true;
        this.type = true;
        setTimeout(() => {
          // 俩秒之后让模块消失
          this.$refs.switchBtn.style.display = "block";
        }, 800);
      } else if (val === 4) {
        //安全管理
        this.japIndex = "安全管理";
        // this.$router.push('/management')
        this.indexShow = false;
        this.personnelShow = false;
        this.videoSurveillanceShow = false;
        this.videoViewingShow = false;
        this.managementShow = true;
        this.progressShow = false;
        this.titLeftshow = true;
        this.type = true;
        setTimeout(() => {
          // 俩秒之后让模块消失
          this.$refs.switchBtn.style.display = "block";
        }, 800);
      } else if (val === 1) {
        //人员管理
        // this.$router.push('/personnel')
        this.japIndex = "人员管理";
        this.indexShow = false;
        this.personnelShow = true;
        this.videoSurveillanceShow = false;
        this.videoViewingShow = false;
        this.managementShow = false;
        this.progressShow = false;
        this.titLeftshow = true;
        this.type = true;
        setTimeout(() => {
          // 俩秒之后让模块消失
          this.$refs.switchBtn.style.display = "block";
        }, 800);
      }
    },
    switchDiv() {
      let that = this;
      if (this.type) {
        console.log("11111");
        this.type = false;
        this.$refs.switchBtn.style.display = "none";
      } else {
        console.log("2222");
        this.type = true;
        setTimeout(() => {
          // 俩秒之后让模块消失
          that.$refs.switchBtn.style.display = "block";
        }, 800);
      }
    },
  },

  mounted() {
    this.switchDiv();
    window.onresize = () => {
      return (() => {
        let h =
          document.documentElement.clientHeight || document.body.clientHeight;
        this.vdaH = h - 0 + "px";
      })();
    };
  },
};
</script>

<style scoped lang="less">
.dh1 {
  animation: mytest 0.4s linear;
  animation-fill-mode: forwards;

  @media only screen and (max-height: 1000px) {
    animation: mce2st 0.4s linear;
    animation-fill-mode: forwards;
  }
}

@keyframes mce2st {
  1% {
    bottom: 339px;
  }

  100% {
    bottom: 150px;
  }
}

@keyframes mcest {
  100% {
    bottom: 339px;
  }

  1% {
    bottom: 150px;
  }
}

@keyframes mytest {
  100% {
    bottom: 20px;
  }

  90% {
    bottom: 40px;
  }

  80% {
    bottom: 60px;
  }

  70% {
    bottom: 80px;
  }

  60% {
    bottom: 100px;
  }

  50% {
    bottom: 120px;
  }

  40% {
    bottom: 140px;
  }

  30% {
    bottom: 160px;
  }

  20% {
    bottom: 180px;
  }

  10% {
    bottom: 200px;
  }

  1% {
    bottom: 220px;
  }
}

@keyframes myt2est {
  1% {
    bottom: 20px;
  }

  10% {
    bottom: 40px;
  }

  20% {
    bottom: 60px;
  }

  30% {
    bottom: 80px;
  }

  40% {
    bottom: 100px;
  }

  50% {
    bottom: 120px;
  }

  60% {
    bottom: 140px;
  }

  70% {
    bottom: 160px;
  }

  80% {
    bottom: 180px;
  }

  90% {
    bottom: 200px;
  }

  100% {
    bottom: 220px;
  }
}

.dh2 {
  animation-fill-mode: forwards;
  animation: myt2est 0.4s linear;

  @media only screen and (max-height: 1000px) {
    animation: mcest 0.4s linear;
    animation-fill-mode: forwards;
  }
}

.screenBox {
  width: 46px;
  height: 46px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAA3RJREFUaENjZMAHGhqYfLVUIv4x/OfBq27AJP+eZcRnt++qJdXvHj0OfHv//oA5EZfFggryDELycrNwesB39ZLcD0+exJ9ZvJzhz+/fg84DynY2DMr2ttg94LtqacLn1y9yTi1cxvD7+/dB53iQg3B6wHfl4uBvHz5UnFywmPHnly+D0vE4PeC7eonbj8+fW07OX8T0/cPHQet4rB7wW7nE+sePb72nFi5l+fr69aB2PIYH/JYvNPz998/k04uXcXx89nzQOx7FA17rVqgx/Pg+69yy1TxvHz4YEo5H8YD3qsVp94+eSLu9b/+QcTyGB+4ePJx299CRUQ/QMwTg9QAoCY3GAD2DHmoXxTEQvWKxMTZ3H+jsvfn0/AWUKtyjpVFNWEWJF58/l0bEniUlHEY9AIuBt3fufX5989ZnWOjd2rPv7efnz38hh6aah5swr6goG0xMWE2ZR1RVlQ9ZzYDFwI2tO56dXbyU6Opb2tiIx7YgR5WZlZVpyHkA2fF/f//+9+7Bgy+wmBj0MYDu+MMTptyW0NLk1fD2kALFBN09IG1oAO4nf3rx8hd6mkcvTbA5/unZc1+MY6MlB8wDxBZ5uBwP0j/oPYDP8SAPgEonJRtrYRB7R039LWIDhS6NOUKOJ8Wx2NRSXJHhcwCtHU+VGAA1D0AG3Tty9O2tHbvewjxED8dTxQOwmhi5IqOX42niAXIczyspycYnIQ5uYqA3AAnlEYrzAHIMvLh2/TOseQCqYUGVFKicJ+SIAS1GYR54ffv2JyEFBR5Q24YUxw94PYDeHyDV8YPOA6CYeHvrLjzZfH79+hdy6QRyMCjNq7k4gSsuEBBVV+OFdXTo3hbC1SODOQ7UT0CvXUHtJ4fyYnVseWPUA6PjQoTKTCrLU1wPUNk9JBs36gGSg4zKGoZ0DLBx8zCYxUUzcAsL1jEOtbFRNm4uBrO4GAYuYZFpW8Nj5g0pD7BxcTGYxUcz8IiITd8cFj0XlCqHjAdAjjeNi2bgEROZsSU0dg4sSw0JD8AczysqMmtzWOws5PJg0HuAlYuTwSw2ioFXXGz25tDYmeiF2aD2ACsnJ4NpXCQDj5j43K1hsdOxlcRgD7x7+Cjt/YOHVC6pKTdOXF2dgU9SfN7m0JhpuExj9F61wJiBgRnrZAXlTqDMBCZGppebQ6M34jMFAIXEIruaoXY4AAAAAElFTkSuQmCC)
    no-repeat;
  background-size: 100% 100%;
  position: absolute;
  bottom: 210px;
  right: 484px;
  cursor: pointer;
  animation-play-state: paused;

  @media only screen and (max-height: 1000px) {
    bottom: 339px;
    animation-play-state: paused;
  }
}

.smallBox {
  width: 105px;
  height: 28px;
  background: rgba(0, 37, 35, 0.5);
  position: absolute;
  top: 0;
  right: 0;
  font-size: 12px;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
  line-height: 28px;
}

.swiperBox {
  width: 380px;
  height: 84px;
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
}

.centerBottom2 {
  width: calc(100% - 968px);
  height: 166px;
  position: absolute;
  bottom: -205px;
  left: 50%;
  transform: translateX(-50%);
  background: url("~@/assets/pic/jdin.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  overflow-x: hidden;
  transition: bottom 0.6s;
  overflow-y: hidden; //重点
  @media only screen and (max-height: 1000px) {
    bottom: -64px;
  }
}
.centerBottom {
  width: calc(100% - 968px);
  height: 166px;
  position: absolute;
  bottom: 35px;
  left: 50%;
  transform: translateX(-50%);
  background: url("~@/assets/pic/jdin.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  overflow-x: hidden;
  transition: bottom 0.6s;
  overflow-y: hidden; //重点

  @media only screen and (max-height: 1000px) {
    bottom: 164px;
  }
}

.lineBox {
  width: 810px;
  height: 9px;
  background: #ffffff;
  border-radius: 5px;
  opacity: 0.1;
  position: absolute;
  top: 80px;
  left: 80px;
}

.boxChild {
  margin-left: 88px;
  text-align: center;

  div:nth-child(1) {
    font-size: 16px;
    font-weight: 500;
    color: #1dfffa;
    margin-bottom: 12px;
    margin-top: 20px;
  }

  div:nth-child(2) {
    font-size: 12px;
    font-weight: 400;
    color: #00dad3;
  }

  div:nth-child(3) {
    width: 24px;
    height: 24px;
    // background: url("~@/assets/pic/finish.png") no-repeat;
    background-size: 100% 100%;
    margin: 6px auto;
  }

  div:nth-child(4) {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 8px;
    color: #0afffc;
  }

  div:nth-child(5) {
    font-size: 14px;
    font-weight: bold;
    color: #00fff6;
  }
}

.chentChild {
  width: 104px;
  margin-left: 14px;
  margin-top: 15px;
}

.iconPic {
  width: 24px;
  height: 25px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-top: 10px;
}

.tempFather {
  margin-left: 10px;

  span:nth-child(2) {
    font-size: 14px;
    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
    font-weight: 500;
    color: #4fece7;
  }

  span:nth-child(3) {
    font-size: 10px;
    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
    font-weight: 400;
    color: #e4e4e4;
  }
}

.temperature {
  font-size: 12px;
  font-family: SourceHanSansCN-Regular, SourceHanSansCN;
  font-weight: 400;
  color: #e4e4e4;
}

.centerTop {
  width: 124px;
  position: absolute;
  top: 124px;
  right: 480px;
  background: url("~@/assets/pic/icas.png") no-repeat;
  background-size: 100% 100%;
  padding-bottom: 22px;
  overflow-x: hidden;
  transition: right 0.8s, height 1s;
  overflow-y: hidden; //重点
}

.tableBox {
  width: 90%;
  height: 75%;
  bottom: 15px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.securityCheck {
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
}

.spoperBox {
  width: 380px;
  height: 84px;
  position: absolute;
  bottom: 24px;
  left: 34px;
  display: flex;

  .spoChild {
    margin: auto;
    padding: 1px;
    border: 1px solid #00ebeb;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

.videoBox {
  position: absolute;
  bottom: 33px;
  display: flex;

  .videoFat {
    background: gray;
    flex: 1;
    width: 180px;
    height: 183px;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

.pieBox {
  width: 100%;
  height: 273px;
  position: absolute;
  bottom: 0;
}

.passBox {
  position: absolute;
  right: 45px;
  top: 128px;

  @media only screen and (max-height: 1000px) {
    top: 118px;
  }

  div:nth-child(1) {
    width: 50px;
    height: 47px;
    background: url("~@/assets/pic/pass.png") no-repeat;
    background-size: 100% 100%;
  }

  div:nth-child(2) {
    font-size: 12px;
    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
    font-weight: 500;
    color: #7ffffc;
    margin-top: 6px;
  }
}

.nameMessage {
  font-size: 14px;
  font-family: SourceHanSansCN-Medium, SourceHanSansCN;
  font-weight: 500;
  margin-top: 10px;

  @media only screen and (max-height: 1000px) {
    margin-top: 5px;
  }

  span:nth-child(1) {
    display: inline-block;
    width: 56px;
    text-align-last: justify;
  }
}

.peopleMessage {
  width: 380px;
  height: 106px;
  background: #002725;
  box-shadow: inset 0px 0px 25px 0px rgba(255, 255, 255, 0.7);
  opacity: 0.2;
  position: absolute;
  left: 33px;
  top: 113px;
  border: 1px solid #007b7b;

  @media only screen and (max-height: 1000px) {
    height: 86px;
  }

  .firBox {
    @media only screen and (max-height: 1000px) {
      top: 337px;
    }
  }
}

.numT2otle {
  position: absolute;
  top: 65px;
  right: 62px;
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;

  .num {
    font-family: lcdD;
    display: inline-block;
    background: url("~@/assets/pic/number.png") no-repeat;
    background-size: 100% 100%;
    width: 20px;
    height: 32px;
    text-align: center;
    line-height: 32px;
    margin-right: 2px;
    font-size: 26px;
    letter-spacing: 0.1em;
    color: #4bffdc;
    padding: 0px 0px 0px 3px;
  }
}

.numTotle {
  // width: 100%;
  position: absolute;
  top: 65px;
  left: 58px;
  font-size: 14px;
  font-family: SourceHanSansCN-Medium, SourceHanSansCN;
  font-weight: 500;
  color: #ffffff;

  .num {
    font-family: lcdD;
    display: inline-block;
    background: url("~@/assets/pic/number.png") no-repeat;
    background-size: 100% 100%;
    width: 20px;
    height: 32px;
    text-align: center;
    line-height: 32px;
    margin-right: 2px;
    font-size: 26px;
    letter-spacing: 0.1em;
    color: #4bffdc;
    padding: 0px 0px 0px 3px;
  }
}

.concet {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #d6eae9;
  text-indent: 2em;
  width: 90%;
  height: 180px;
  position: absolute;
  top: 72px;
  line-height: 26px;
  overflow: hidden;
  padding: 0 30px 0 22px;

  @media only screen and (max-height: 1000px) {
    top: 52px;
  }
}

.bgPicture {
  width: 100%;
  background: url("~@/assets/pic/BG.jpg") no-repeat;
  background-size: 100% 100%;
}
.header {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 200px;
}
.header .titTop {
  width: 100%;
  position: absolute;
  top: 9px;
  left: 9px;
  //    right: 9px;
  display: flex;
  justify-content: space-between;

  .titLeft {
    width: 138px;
    height: 40px;
    background: #025a5f;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    span:nth-child(1),
    span:nth-child(2) {
      font-size: 14px;
      color: #3cfff9;
      letter-spacing: 1px;
      font-weight: 400;
    }

    span:nth-child(3) {
      font-size: 14px;
      color: #fff;
      letter-spacing: 1px;
      font-weight: bold;
    }
  }

  .titRight {
    padding-top: 11px;
    padding-right: 25px;
    font-size: 14px;
    font-weight: 400;
    color: #d1fffe;
    position: absolute;
    right: 80px;
    span:nth-child(2) {
      display: inline-block;
      position: absolute;
      right: 85px;
      width: 18px;
      height: 18px;
      //   background: url("~@/assets/pic/sun.png") no-repeat;
      background-size: 100% 100%;
    }
  }
  .closeIndex {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 5px;
    right: 22px;
  }
}

.header .title {
  width: 100%;
  height: 168px;
  background: url("~@/assets/pic/title1.png") no-repeat;
  background-size: 100% 100%;
  position: absolute;
}

.titName {
  width: 100%;
  height: 30px;
  position: absolute;
  top: 15px;

  span:nth-child(1) {
    display: inline-block;
    width: 18px;
    height: 18px;
    background: url("~@/assets/pic/titleMark.png") no-repeat;
    background-size: 100% 100%;
    margin-left: 16px;
    margin-right: 8px;
  }

  span:nth-child(2) {
    display: inline-block;
    font-size: 22px;
    font-family: ht2;
    font-weight: bold;
    color: #86eee7;
    margin-right: 7px;
  }

  span:nth-child(3) {
    display: inline-block;
    width: 248px;
    height: 12px;
    background: url("~@/assets/pic/4words.png") no-repeat;
    background-size: 100% 100%;
  }
}

.leftOneBox {
  height: 282px;
  width: 444px;
  background: url("~@/assets/pic/rightBox.png") no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 96px;
  overflow-x: hidden;
  transition: left 0.8s, height 1s;
  overflow-y: hidden; //重点
  left: 27px;

  @media only screen and (max-height: 1000px) {
    top: 76px;
    height: 242px;
  }
}

.leftTwoBox {
  width: 444px;
  overflow-x: hidden;
  transition: left 0.8s, height 1s;
  overflow-y: hidden; //重点
  height: 342px;
  background: url("~@/assets/pic/rightBox.png") no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 401px;
  left: 27px;

  @media only screen and (max-height: 1000px) {
    top: 337px;
    height: 300px;
  }
}

.leftThreeBox {
  overflow-x: hidden;
  transition: left 0.8s, height 1s;
  overflow-y: hidden; //重点
  width: 442px;
  height: 279px;
  background: url("~@/assets/pic/rightBox.png") no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 767px;
  left: 27px;

  @media only screen and (max-height: 1000px) {
    top: 657px;
    height: 259px;
  }
}

.rightOneBox {
  width: 444px;
  height: 302px;
  background: url("~@/assets/pic/rightBox.png") no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 96px;
  right: 27px;
  overflow-x: hidden;
  transition: right 0.8s, height 1s;
  overflow-y: hidden; //重点

  @media only screen and (max-height: 1000px) {
    top: 76px;
    height: 282px;
  }
}

.rightTwoBox {
  width: 442px;
  height: 299px;
  background: url("~@/assets/pic/rightBox.png") no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 422px;
  right: 27px;
  overflow-x: hidden;
  transition: right 0.8s, height 1s;
  overflow-y: hidden; //重点

  @media only screen and (max-height: 1000px) {
    top: 378px;
    height: 279px;
  }
}

.rightThreeBox {
  width: 442px;
  height: 299px;
  background: url("~@/assets/pic/rightBox.png") no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 745px;
  right: 27px;
  overflow-x: hidden;
  transition: right 0.8s, height 1s;
  overflow-y: hidden; //重点

  @media only screen and (max-height: 1000px) {
    top: 675px;
    height: 239px;
  }
}

.container {
  display: flex;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0px;
  z-index: 999;
}

.box {
  height: 784px;
  overflow-x: hidden;
  transition: width 1s, height 1s;
  overflow-y: hidden; //重点
  background: url("~@/assets/pic/closeMenu.png") no-repeat;
  background-size: 100% 100%;
  flex-direction: column;
  display: flex;
  align-items: center;
  justify-content: center;

  .childBoxChoose {
    cursor: pointer;
    width: 166px;
    height: 54px;
    margin-bottom: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url("~@/assets/pic/btn1.png") no-repeat;
    background-size: 100% 100%;
    font-size: 19px;
    font-family: SourceHanSansCN-Bold, SourceHanSansCN;
    font-weight: bold;
    color: #ffffff;
    margin-left: 20px;

    span:nth-child(1) {
      display: inline-block;
      width: 20px;
      height: 20px;
      margin-right: 8px;
    }

    span:nth-child(3) {
      display: inline-block;
      width: 10px;
      height: 17px;
      margin-left: 10px;
      background: url("~@/assets/pic/enter1.png") no-repeat;
      background-size: 100% 100%;
    }
  }

  .childBox:hover {
    background: url("~@/assets/pic/btn1.png") no-repeat;
  }

  .childBox {
    cursor: pointer;
    width: 166px;
    height: 54px;
    margin-bottom: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url("~@/assets/pic/btn2.png") no-repeat;
    background-size: 100% 100%;
    font-size: 19px;
    font-family: SourceHanSansCN-Bold, SourceHanSansCN;
    font-weight: bold;
    color: #ffffff;
    margin-left: 20px;

    span:nth-child(1) {
      display: inline-block;
      width: 20px;
      height: 20px;
      margin-right: 8px;
    }

    span:nth-child(3) {
      display: inline-block;
      width: 10px;
      height: 17px;
      margin-left: 10px;
      background: url("~@/assets/pic/enter2.png") no-repeat;
      background-size: 100% 100%;
    }
  }
}

.icon1 {
  background: url("~@/assets/pic/shipinjiankong.png") no-repeat;
  background-size: 100% 100%;
}

.icon2 {
  background: url("~@/assets/pic/renyuanguanli.png") no-repeat;
  background-size: 100% 100%;
}

.icon3 {
  background: url("~@/assets/pic/jinduguanli.png") no-repeat;
  background-size: 100% 100%;
}

.icon4 {
  background: url("~@/assets/pic/anquanguanli.png") no-repeat;
  background-size: 100% 100%;
}

.closeBtn {
  position: relative;
  top: 343px;
  height: 53px;
  width: 14px;
  cursor: pointer;
  left: -265px;
}

.switchBtn {
  position: absolute;
  transform: rotateY(358deg);
  left: -14px;
  top: 44%;
  height: 53px;
  width: 14px;
  background: url("~@/assets/pic/openMenu.png") no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
}

.btn {
  height: 53px;
  width: 14px;
}

.tabHeader {
  width: 398px;
  height: 35px;
  background: #368d87;
  display: flex;
  color: #fff;
  font-weight: 500;
  font-size: 13px;
  justify-content: space-around;
  align-items: center;
}
</style>
<style lang="less" scoped>
.el-table__footer-wrapper,
.el-table__header-wrapper {
  display: none !important;
}

.el-table {
  &.el-table--scrollable-y ::-webkit-scrollbar {
    display: none !important; //隐藏滚动条
  }
}

/deep/ .el-table tr {
  background-color: transparent;
}

/deep/ .el-table,
.el-table__expanded-cell {
  background-color: transparent !important;
}

/deep/ .el-table th {
  background-color: #2f807d !important;
  border-bottom: none !important;
  color: #ffffff !important;
}

/deep/ .el-table--enable-row-transition .el-table__body td,
/deep/ .el-table .cell {
  // background-color: transparent !important;
  color: rgba(255, 255, 255, 0.7) !important;
  border: none !important;
  padding-left: 0;
  padding-right: 0 !important;
}

/deep/ .el-table th > .cell {
  color: rgba(254, 254, 254, 1) !important;
  font-weight: 700 !important;
}

.el-table::before {
  //去除底部白线
  left: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 0px !important;
}

/deep/ .el-form-item__label {
  color: white !important;
}

//滚动条的宽度
::-webkit-scrollbar {
  width: 0px;
  height: 0px;
  background-color: #070c4f;
  border-radius: 6px;
}

/deep/ .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: transparent !important;
  /* color: #f19944; */
  /* 设置文字颜色，可以选择不设置 */
}

/deep/ .el-table .warning-row {
  background: rgba(44, 74, 64, 0.5) !important;
}

/deep/ .el-table .success-row {
  background: transparent;
}
</style>
<style>
.el-carousel__indicators--outside {
  display: none;
}
</style>
