<!--
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2022-09-03 10:51:24
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @LastEditTime: 2022-09-29 20:25:44
 * @FilePath: /danger-manage-web/src/views/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="index-wrapper">
    <Top />
    <Left
      ref="left"
      @clickShow="clickShow"
      @dangerDeviceChange="dangerDeviceChange"
    />
    <Right ref="right" />
    <Bottom
      v-show="deviceOrDangerType == 1"
      @deviceChange="deviceChange"
      ref="bottom"
    />

    <div id="mapbox"></div>
  </div>
</template>

<script>
import CreateCesium from "@/utils/cesium/cesiumClass.js";
import Video from "@/components/bigWindow/video";
import tcq from "@/components/bigWindow/tcq";
import Null from "@/components/bigWindow/Null";
import Danger from "@/components/bigWindow/Danger";
import weixiandian from "@/components/bigWindow/weixiandian";
import ydqt from "@/components/bigWindow/ydqt";
import danger from "@/assets/images/danger.png";

import Top from "@/views/indexComponents/Top";
import Left from "@/views/indexComponents/Left";
import Right from "@/views/indexComponents/Right";
import Bottom from "@/views/indexComponents/Bottom";
export default {
  name: "shouye",
  components: {
    Top,
    Left,
    Right,
    Bottom,
  },
  data() {
    return {
      timer: null,
      deviceOrDangerType: 1,
      data2: [
        {
          deviceType: 2,
          longitude: 114.0820982066482,
          latitude: 38.2500435240177,
          shortNum: 7,
          title: "锅炉点火",
          wxymc: "煤气管道",
          zj: "DN1600",
          zc: "500m",
          fxjb: "四级",
          knyfdfx: "中毒",
          wxxlb: "易燃气体,类别1；加压气体",
          qrtj: "吸入",
          hjwh: "对环境有危害，对大气可造成污染",
          rbwx: "本品易燃",
          yhrscw: "二氧化碳。",
        },
        {
          deviceType: 2,
          longitude: 114.08743529141078,
          latitude: 38.25117222006519,
          shortNum: 3,
          title: "有害气体",
          wxymc: "氮气储罐",
          gtrl: "2万m3",
          ccl: "22.86 t",
          ljl: "20 t",
          fxjb: "四级",
          yhwcf: "氮",
          nd: "≥99.999%",
          wxxlb: "加压气体",
          qrtj: "吸入",
          knyfdfx: "缺氧窒息",
          rbwx: "本品不燃",
          wxtx: "若遇高热，容器内压增大，有开裂和爆炸的危险",
        },
      ],
      danger: [
        {
          lnglatArr: [
            [114.08693257466244, 38.25122825128276],
            [114.08837308345032, 38.25125456736997],
            [114.08840384602489, 38.25162426832718],
            [114.08696540004983, 38.25155912109927],
          ],
          colorNum: 1,
          fxlb: "高风险区域",
          bsjh: "",
          wxy: "锅炉操作",
          fxd: "锅炉点火",
          wxys: "操作人员违章作业来点火成功继续频繁点火",
          whhg: "丧失劳动能力",
          sglx: "锅炉爆炸，出点活在",
          sgfspl: "平均2-3年发生一起",
          gkcj: "班组级",
          gkbm: "安全管理部",
          gkzrgw: "锅炉工",
          gkzrr: "张三",
          gl: "公司建立有奖惩制度，安全巡检制度，及时制止违章操作，开对为长者进行适量触发，锅炉工持证上岗，定期接受安全培训",
          gcjs: "根据作业活动风险分析，指定适用的安全作业规程",
          src: danger,
        },
        {
          lnglatArr: [
            [114.08840968324529, 38.250338608553484],
            [114.08705000996402, 38.25027411252165],
            [114.08700204531098, 38.25062619768719],
            [114.08841768197132, 38.25062352404105],
          ],
          colorNum: 2,
          fxlb: "中风险区域",
          bsjh: "",
          wxy: "锅炉操作",
          fxd: "锅炉点火",
          wxys: "操作人员违章作业来点火成功继续频繁点火",
          whhg: "丧失劳动能力",
          sglx: "锅炉爆炸，出点活在",
          sgfspl: "平均2-3年发生一起",
          gkcj: "班组级",
          gkbm: "安全管理部",
          gkzrgw: "锅炉工",
          gkzrr: "张三",
          gl: "公司建立有奖惩制度，安全巡检制度，及时制止违章操作，开对为长者进行适量触发，锅炉工持证上岗，定期接受安全培训",
          gcjs: "根据作业活动风险分析，指定适用的安全作业规程",
          src: danger,
        },
        {
          lnglatArr: [
            [114.0845936659788, 38.25105615106475],
            [114.0829142987991, 38.25093102454791],
            [114.08281445503589, 38.251806239979324],
            [114.0845864560673, 38.251975928617924],
          ],
          colorNum: 3,
          fxlb: "低风险区域",
          bsjh: "",
          wxy: "锅炉操作",
          fxd: "锅炉点火",
          wxys: "操作人员违章作业来点火成功继续频繁点火",
          whhg: "丧失劳动能力",
          sglx: "锅炉爆炸，出点活在",
          sgfspl: "平均2-3年发生一起",
          gkcj: "班组级",
          gkbm: "安全管理部",
          gkzrgw: "锅炉工",
          gkzrr: "张三",
          gl: "公司建立有奖惩制度，安全巡检制度，及时制止违章操作，开对为长者进行适量触发，锅炉工持证上岗，定期接受安全培训",
          gcjs: "根据作业活动风险分析，指定适用的安全作业规程",
          src: danger,
        },
        {
          lnglatArr: [
            [114.08289927467062, 38.25012951022719],
            [114.08105697693159, 38.25003862859106],
            [114.08100925876086, 38.25057715370437],
            [114.08286147538506, 38.2507022435366],
          ],
          colorNum: 4,
          fxlb: "中低风险区域",
          bsjh: "",
          wxy: "锅炉操作",
          fxd: "锅炉点火",
          wxys: "操作人员违章作业来点火成功继续频繁点火",
          whhg: "丧失劳动能力",
          sglx: "锅炉爆炸，出点活在",
          sgfspl: "平均2-3年发生一起",
          gkcj: "班组级",
          gkbm: "安全管理部",
          gkzrgw: "锅炉工",
          gkzrr: "张三",
          gl: "公司建立有奖惩制度，安全巡检制度，及时制止违章操作，开对为长者进行适量触发，锅炉工持证上岗，定期接受安全培训",
          gcjs: "根据作业活动风险分析，指定适用的安全作业规程",
          src: danger,
        },
      ],
      data11: [
        {
          deviceType: 11,
          longitude: 114.08572154613417,
          latitude: 38.25127267081466,
          shortNum: 10,
          title: "视频1231231231231",
        },
        {
          deviceType: 11,
          longitude: 114.08579042117636,
          latitude: 38.24949662796779,
          shortNum: 16,
          title: "视频2",
        },
      ],
      data12: [
        {
          deviceType: 12,
          deviceState: 1,
          longitude: 114.08259457996853,
          latitude: 38.25080252536212,
          shortNum: 12,
          title: "报警器",
          sbmc: "气体报警器",
          sbbh: "HBS030015037",
          tcjz: "甲烷",
          sbzt: "正常",
        },
        {
          deviceType: 12,
          deviceState: 2,
          longitude: 114.08158936858243,
          latitude: 38.25068850682793,
          shortNum: 12,
          title: "报警器",
          sbmc: "气体报警器",
          sbbh: "HBS030015037",
          tcjz: "甲烷",
          sbzt: "警告",
        },
        {
          deviceType: 12,
          deviceState: 3,
          longitude: 114.08105373626017,
          latitude: 38.2510912127248,
          shortNum: 12,
          title: "报警器",
          sbmc: "气体报警器",
          sbbh: "HBS030015037",
          tcjz: "甲烷",
          sbzt: "报警",
        },
        {
          deviceType: 13,
          longitude: 114.08375950924253,
          latitude: 38.25066072012857,
          shortNum: 8,
          title: "探测器",
          sbmc: "电力探测器",
          sbbh: "HBS030015032",
          tcjz: "电力",
          sbzt: "正常",
          jcz: "32A",
        },
        {
          deviceType: 14,
          longitude: 114.08344461545148,
          latitude: 38.249814328043456,
          shortNum: 8,
          title: "探测器",
          sbmc: "压力探测器",
          sbbh: "HBS030015037",
          tcjz: "压力",
          sbzt: "正常",
          jcz: "2.3MPa",
        },
        {
          deviceType: 14,
          longitude: 114.08201936134395,
          latitude: 38.25019833311851,
          shortNum: 8,
          title: "探测器",
          sbmc: "压力探测器",
          sbbh: "HBS030015037",
          tcjz: "压力",
          sbzt: "正常",
          jcz: "1.3MPa",
        },
        {
          deviceType: 15,
          longitude: 114.08274961653991,
          latitude: 38.24983876031178,
          shortNum: 8,
          title: "探测器",
          sbmc: "温度探测器",
          sbbh: "HBS030015037",
          tcjz: "温度",
          sbzt: "正常",
          jcz: "42°C",
        },
      ],
    };
  },
  // beforeMount() {
  //   // 渲染之前，让顶部消失
  //   this.rootTopShowChange(false);
  // },
  // destroyed() {
  //   // 消失之后，让顶部出现
  //   clearTimeout(this.timer);
  //   this.timer = setTimeout(() => {
  //     if (this.$route.path === "/index") {
  //       return;
  //     }
  //     this.rootTopShowChange(true);
  //   }, 500);
  // },
  mounted() {
    this.Cesium = new CreateCesium(
      "mapbox",
      ["../3dtiles/jsondata/tileset.json"],
      this
    );
    this.init();
  },
  beforeDestroy() {
    // 挂掉该关的 infowindow 跟计算infowindow位置的计时器
    this.Cesium.clearInfoWindow();
    this.Cesium.destroy();
  },
  methods: {
    //进入此页面监听路由变化 让最顶上的东西隐藏
    // rootTopShowChange(boolean) {
    //   this.$parent.$parent.topShow = boolean;
    // },
    init() {
      this.data2.forEach((item, index) => {
        if (index == 0) {
          this.Cesium.addDevice(item, "pic", weixiandian);
        } else {
          this.Cesium.addDevice(item, "pic", ydqt);
        }
      });
      this.danger.forEach((item) => {
        this.Cesium.addDanger(item, Danger);
      });

      this.data11.forEach((item) => {
        item.config = { scale: 1, textHeight: -32 };
        this.Cesium.addDevice(item, "pic", Video);
      });
      this.data12.forEach((item) => {
        item.config = { scale: 1, textHeight: -94 };
        this.Cesium.addDevice(item, "pic", tcq);
      });
      // 初始化危险源关闭
      this.Cesium.dangerAllShow(false);
    },
    clickShow(e) {
      // 控制两个组件的展示与隐藏
      this.$refs.left.domShow(e);
      this.$refs.right.domShow(e);
    },
    deviceChange(obj) {
      const { activeArr, deviceType } = obj;
      this.bottomObj = obj;
      // 如果存在于数组，就是要展示了，如果不存在就隐藏
      const bool = activeArr.includes(deviceType);
      this.Cesium.deviceFilter(bool, deviceType);
    },
    dangerDeviceChange(e) {
      if (e.type == 1) {
        this.deviceOrDangerType = e.type;
      } else {
        this.deviceOrDangerType = e.type;
      }
      console.log(this.$refs.bottom.activeArr);
      this.Cesium.dangeDeviceChange(e.type, this.$refs.bottom.activeArr);
    },

    // DeviceChange(){

    // }
  },
};
</script>
<style lang="scss" scoped>
.index-wrapper {
  width: 100%;
  // height: 100%;
  // height: calc(100vh - 84px);
  height: 100vh;
  // background: red;
  position: relative;
  #mapbox {
    width: 100%;
    height: 100%;
  }
}
</style>
