<!--
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2022-06-16 15:03:40
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @LastEditTime: 2022-09-30 17:16:23
 * @FilePath: /danger-manage-web/src/views/bigwindow/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="big-window">
    <!-- <button @click="$router.push('/')">idnex</button> -->
    <!-- <div class="danger">
      <el-button @click="dangerChange" type="primary">{{
        danger ? "隐藏危险区域" : "展示危险区域"
      }}</el-button>
    </div> -->
    <!-- <div class="go-index">
      <el-button @click="$router.push('/index')" type="primary"
        >首页</el-button
      >
    </div> -->
    <div id="mapbox"></div>
  </div>
</template>

<script>
import CreateCesium, { DEVICE_PIC_TYPE } 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 danger from "@/assets/images/danger.png";
import Editor from "@/components/Editor";

//  危险源实时监测
export default {
  name: "monitor",
  components: {
    Editor,
  },
  data() {
    return {
      // Cesium: null,
      danger: true,
      data1: [
        {
          deviceType: 11,
          longitude: 114.07848044941088,
          latitude: 38.24830985372926,
          shortNum: 10,
          title: "视频1",
        },
        {
          deviceType: 11,
          longitude: 114.07858975280202,
          latitude: 38.24853877908846,
          shortNum: 16,
          title: "视频2",
        },
        {
          deviceType: 11,
          longitude: 114.0788726514246,
          latitude: 38.24854905109693,
          shortNum: 16,
          title: "视频3",
        },
        {
          deviceType: 11,
          longitude: 114.07933673582353,
          latitude: 38.24932372451273,
          shortNum: 10,
          title: "视频4",
        },
        {
          deviceType: 11,
          longitude: 114.07943113040781,
          latitude: 38.249634714126636,
          shortNum: 16,
          title: "视频5",
        },
        {
          deviceType: 11,
          longitude: 114.08000305885355,
          latitude: 38.2494852174479,
          shortNum: 16,
          title: "视频6",
        },
        {
          deviceType: 11,
          longitude: 114.08007200486942,
          latitude: 38.249835018521594,
          shortNum: 16,
          title: "视频7",
        },
        {
          deviceType: 11,
          longitude: 114.07771206027549,
          latitude: 38.252223651533114,
          shortNum: 16,
          title: "视频8",
        },
      ],
      data2: [
        {
          deviceType: 3,
          longitude: 114.08274961653991,
          latitude: 38.24983876031178,
          shortNum: 15,
          title: "气体探测器",
          sbmc: "气体探测器",
          sbbh: "HBS030015037",
          tcjz: "甲烷",
          sbzt: "正常",
        },
        {
          deviceType: 4,
          longitude: 114.08344461545148,
          latitude: 38.249814328043456,
          shortNum: 15,
          title: "压力探测器",
          sbmc: "压力探测器",
          sbbh: "HBS030015037",
          tcjz: "压力",
          sbzt: "正常",
          jcz: "2.3MPa",
        },
      ],
    };
  },
  mounted() {
    this.Cesium = new CreateCesium(
      "mapbox",
      ["../3dtiles/jsondata/tileset.json"],
      this
    );
    // this.danger.forEach((item) => {
    //   this.Cesium.addDanger(item, Danger);
    // });
    this.data1.forEach((item) => {
      item.config = { scale: 1, textHeight: -32 };
      this.Cesium.addDevice(item, "pic", Video);
    });
    this.data2.forEach((item) => {
      this.Cesium.addDevice(item, "pic", tcq);
    });
  },
  methods: {
    dangerChange() {
      this.danger = !this.danger;
      // 当infowindow里存在danger-wrappeclass名称时，就清楚infowindow
      this.Cesium.dangerTotal(this.danger, "danger-wrappe");
    },
  },
  beforeDestroy() {
    // 挂掉该关的 infowindow 跟计算infowindow位置的计时器
    this.Cesium.clearInfoWindow();
    this.Cesium.destroy();
  },
};
</script>
<style lang="scss" scoped>
.big-window {
  width: 100%;
  height: calc(100vh - 50px);
  #mapbox {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
  }
  .danger {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10;
  }
  .go-index {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 10;
  }
}
</style>
