index.vue

<!--
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2022-06-16 15:03:40
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @LastEditTime: 2023-03-14 09:39:50
 * @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 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: "bigWindow",
  components: {
    Editor,
  },
  data() {
    return {
      Cesium: null,
      danger: true,
      data1: [
        {
          deviceType: 1,
          longitude: 114.14663479560947,
          latitude: 38.39968509861548,
          shortNum: 10,
          title: "视频1231231231231",
        },
        {
          deviceType: 1,
          longitude: 114.14649648472712,
          latitude: 38.39869677916153,
          shortNum: 16,
          title: "视频2",
        },
      ],
      data2: [
        {
          deviceType: 2,
          longitude: 114.14601921066019,
          latitude: 38.39727991482072,
          // shortNum: 2,
          title: "测试1",
        },
        {
          deviceType: 2,
          longitude: 114.14570426473814,
          latitude: 38.39845804835061,
          // shortNum: 2,
          title: "测试2",
        },
        {
          deviceType: 2,
          longitude: 114.14574349121,
          latitude: 38.399961397105635,
          // shortNum: 2,
          title: "测试3",
        },
      ],
      danger: [
        {
          lnglatArr: [
            [114.14717670710164, 38.40005636539567],
            [114.1468107102057, 38.40007904127634],
            [114.14667960459407, 38.39920633274406],
            [114.14701877614534, 38.39915715155819],
          ],
          colorNum: 1,
          fxlb: "高风险区域",
          bsjh: "",
          wxy: "锅炉操作",
          fxd: "锅炉点火",
          wxys: "操作人员违章作业来点火成功继续频繁点火",
          whhg: "丧失劳动能力",
          sglx: "锅炉爆炸，出点活在",
          sgfspl: "平均2-3年发生一起",
          gkcj: "班组级",
          gkbm: "安全管理部",
          gkzrgw: "锅炉工",
          gkzrr: "张三",
          gl: "公司建立有奖惩制度，安全巡检制度，及时制止违章操作，开对为长者进行适量触发，锅炉工持证上岗，定期接受安全培训",
          gcjs: "根据作业活动风险分析，指定适用的安全作业规程",
          src: danger,
        },
        {
          lnglatArr: [
            [114.14677730159013, 38.39705223282708],
            [114.14649230680254, 38.397063948491684],
            [114.14667103104993, 38.39892681891495],
            [114.14701528471832, 38.398899416956155],
          ],
          colorNum: 2,
          fxlb: "中风险区域",
          bsjh: "",
          wxy: "锅炉操作",
          fxd: "锅炉点火",
          wxys: "操作人员违章作业来点火成功继续频繁点火",
          whhg: "丧失劳动能力",
          sglx: "锅炉爆炸，出点活在",
          sgfspl: "平均2-3年发生一起",
          gkcj: "班组级",
          gkbm: "安全管理部",
          gkzrgw: "锅炉工",
          gkzrr: "张三",
          gl: "公司建立有奖惩制度，安全巡检制度，及时制止违章操作，开对为长者进行适量触发，锅炉工持证上岗，定期接受安全培训",
          gcjs: "根据作业活动风险分析，指定适用的安全作业规程",
          src: danger,
        },
        {
          lnglatArr: [
            [114.14625043839335, 38.398287521835094],
            [114.14571696614324, 38.3983232240641],
            [114.14564758455208, 38.397642064332715],
            [114.14616102903275, 38.39756712393071],
          ],
          colorNum: 3,
          fxlb: "低风险区域",
          bsjh: "",
          wxy: "锅炉操作",
          fxd: "锅炉点火",
          wxys: "操作人员违章作业来点火成功继续频繁点火",
          whhg: "丧失劳动能力",
          sglx: "锅炉爆炸，出点活在",
          sgfspl: "平均2-3年发生一起",
          gkcj: "班组级",
          gkbm: "安全管理部",
          gkzrgw: "锅炉工",
          gkzrr: "张三",
          gl: "公司建立有奖惩制度，安全巡检制度，及时制止违章操作，开对为长者进行适量触发，锅炉工持证上岗，定期接受安全培训",
          gcjs: "根据作业活动风险分析，指定适用的安全作业规程",
          src: danger,
        },
        {
          lnglatArr: [
            [114.14657693947383, 38.39841324770322],
            [114.14575681650135, 38.398475652278066],
            [114.14593342445129, 38.39992212369578],
            [114.14674496633742, 38.39987290751477],
          ],
          colorNum: 4,
          fxlb: "中低风险区域",
          bsjh: "",
          wxy: "锅炉操作",
          fxd: "锅炉点火",
          wxys: "操作人员违章作业来点火成功继续频繁点火",
          whhg: "丧失劳动能力",
          sglx: "锅炉爆炸，出点活在",
          sgfspl: "平均2-3年发生一起",
          gkcj: "班组级",
          gkbm: "安全管理部",
          gkzrgw: "锅炉工",
          gkzrr: "张三",
          gl: "公司建立有奖惩制度，安全巡检制度，及时制止违章操作，开对为长者进行适量触发，锅炉工持证上岗，定期接受安全培训",
          gcjs: "根据作业活动风险分析，指定适用的安全作业规程",
          src: danger,
        },
      ],
    };
  },

  mounted() {
    this.Cesium = new CreateCesium(
      "mapbox",
      [
        {
          url: "../3dtiles/jsondata/tileset.json", //路径
          startMapType: "gps", //初始坐标系
          toMapType: "",  //要转换坐标系
          height:-161.1,      //模型高度调整
        },
      ],
      this
    );
    this.danger.forEach((item) => {
      this.Cesium.addDanger(item, Danger);
    });
    this.data1.forEach((item) => {
      this.Cesium.addDevice(item, "pic", Video);
    });
    this.data2.forEach((item) => {
      this.Cesium.addDevice(item, "pic", Null);
    });
  },
  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: 100%;
  #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>