index.vue

<!--
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2022-06-16 15:03:40
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @LastEditTime: 2023-09-05 13:46:19
 * @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>
    <DangerTips />
  </div>
</template>

<script>
import CreateCesium, { DEVICE_PIC_TYPE } from "@/utils/cesium/cesiumClass.js";
import { dangerArr } from "@/utils/cesium/dangerArr.js";
import DangerTips from "./DangerTips.vue";
import Video from "@/components/bigWindow/video";
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 Danger2 from "@/components/bigWindow/Danger2";

import Editor from "@/components/Editor";

//  危险风险分布图
export default {
  name: "profile",
  components: {
    Editor,
    DangerTips,
  },
  data() {
    return {
      // Cesium: null,
      danger: true,
      data1: [
        {
          deviceType: 1,
          longitude: 114.14663479560947,
          latitude: 38.39968509861548,
          shortNum: 10,
          title: "视频1231231231231",
        },
        {
          deviceType: 1,
          longitude: 114.08582661394571,
          latitude: 38.249478441102596,
          shortNum: 16,
          title: "视频2",
        },
      ],

      data2: [
        {
          deviceType: 10,
          longitude: 114.081436341043262,
          latitude: 38.24983817327583,
          shortNum: 7,
          title: "锅炉点火",
          wxymc: "煤气管道",
          zj: "DN1600",
          zc: "500m",
          fxjb: "四级",
          knyfdfx: "中毒",
          wxxlb: "易燃气体,类别1；加压气体",
          qrtj: "吸入",
          hjwh: "对环境有危害，对大气可造成污染",
          rbwx: "本品易燃",
          yhrscw: "二氧化碳。",
        },
        {
          deviceType: 10,
          longitude: 114.07705728663734,
          latitude: 38.249097661403205,
          shortNum: 6,
          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.07699224128288, 38.24917864421566],
            [114.07647701382231, 38.24916311225547],
            [114.07651429608312, 38.24895731354076],
            [114.07708709377842, 38.248960473114614],
          ],
          colorNum: 1,
          fxlb: "高风险区域",
          bsjh: "",
          wxy: "锅炉操作",
          fxd: "锅炉点火",
          wxys: "操作人员违章作业来点火成功继续频繁点火",
          whhg: "丧失劳动能力",
          sglx: "锅炉爆炸，出点活在",
          sgfspl: "平均2-3年发生一起",
          gkcj: "班组级",
          gkbm: "安全管理部",
          gkzrgw: "锅炉工",
          gkzrr: "张三",
          gl: "公司建立有奖惩制度，安全巡检制度，及时制止违章操作，开对为长者进行适量触发，锅炉工持证上岗，定期接受安全培训",
          gcjs: "根据作业活动风险分析，指定适用的安全作业规程",
          src: danger,
        },
        {
          lnglatArr: [
            [114.07806724970564, 38.25034815051717],
            [114.07639696862833, 38.2502261900133],
            [114.07639078797055, 38.24993383198078],
            [114.078151284626, 38.25000196180475],
          ],
          colorNum: 2,
          fxlb: "中风险区域",
          bsjh: "",
          wxy: "锅炉操作",
          fxd: "锅炉点火",
          wxys: "操作人员违章作业来点火成功继续频繁点火",
          whhg: "丧失劳动能力",
          sglx: "锅炉爆炸，出点活在",
          sgfspl: "平均2-3年发生一起",
          gkcj: "班组级",
          gkbm: "安全管理部",
          gkzrgw: "锅炉工",
          gkzrr: "张三",
          gl: "公司建立有奖惩制度，安全巡检制度，及时制止违章操作，开对为长者进行适量触发，锅炉工持证上岗，定期接受安全培训",
          gcjs: "根据作业活动风险分析，指定适用的安全作业规程",
          src: danger,
        },
        {
          lnglatArr: [
            [114.0777392710896, 38.250782019890394],
            [114.07734950538038, 38.250761421969486],
            [114.0773933590535, 38.25022891713582],
            [114.07777116413182, 38.250232988449945],
          ],
          colorNum: 3,
          fxlb: "低风险区域",
          bsjh: "",
          wxy: "锅炉操作",
          fxd: "锅炉点火",
          wxys: "操作人员违章作业来点火成功继续频繁点火",
          whhg: "丧失劳动能力",
          sglx: "锅炉爆炸，出点活在",
          sgfspl: "平均2-3年发生一起",
          gkcj: "班组级",
          gkbm: "安全管理部",
          gkzrgw: "锅炉工",
          gkzrr: "张三",
          gl: "公司建立有奖惩制度，安全巡检制度，及时制止违章操作，开对为长者进行适量触发，锅炉工持证上岗，定期接受安全培训",
          gcjs: "根据作业活动风险分析，指定适用的安全作业规程",
          src: danger,
        },
        {
          lnglatArr: [
            [114.08185866090808, 38.24985142677479],
            [114.08093871524032, 38.24985819653048],
            [114.08100272185587, 38.249491674544146],
            [114.08185575292462, 38.24951700145305],
          ],
          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",
      // ["../3dtiles/jsondata/tileset.json"],
      [
        {
          url: "../3dtiles/jsondata/tileset.json", //路径
          startMapType: "gps", //初始坐标系
          toMapType: "", //要转换坐标系
          height: -161.1, //模型高度调整
        },
      ],
      this
    );
    // this.danger.forEach((item) => {
    //   this.Cesium.addDanger(item, Danger);
    // });
    dangerArr
      .map((item) => {
        return {
          lnglatArr: item.path,
          ...item,
        };
      })
      .forEach((item) => {
        this.Cesium.addDanger(item, Danger2);
      });
    // this.data1.forEach((item) => {
    //   this.Cesium.addDevice(item, "pic", Video);
    // });
    // this.data2.forEach((item, index) => {
    //   if (index == 0) {
    //     this.Cesium.addDevice(item, "pic", weixiandian);
    //   } else {
    //     this.Cesium.addDevice(item, "pic", ydqt);
    //   }
    // });
  },
  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%;
  position: relative;
  // height: calc(100vh - 84px);
  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>