index.vue

<!--
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2022-09-03 10:51:24
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @LastEditTime: 2023-03-15 17:59:14
 * @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
      v-if="charsShow"
      ref="left"
      @clickShow="clickShow"
      @dangerDeviceChange="dangerDeviceChange"
    />
    <Right v-if="charsShow" 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 Danger2 from "@/components/bigWindow/Danger2";
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";

import { deviceInfoLists } from "@/api/map/deviceInfo";

import { dangerArr } from "@/utils/cesium/dangerArr.js";
export default {
  name: "shouye",
  props: {
    charsShow: {
      type: Boolean,
      default: true,
    },
  },
  components: {
    Top,
    Left,
    Right,
    Bottom,
  },
  data() {
    return {
      timer: null,
      deviceOrDangerType: 1,
      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,
        },
      ],
      data11: [
        {
          deviceType: 5,
          longitude: 114.07848044941088,
          latitude: 38.24830985372926,
          shortNum: 10,
          title: "视频1",
        },
        {
          deviceType: 5,
          longitude: 114.07858975280202,
          latitude: 38.24853877908846,
          shortNum: 16,
          title: "视频2",
        },
        {
          deviceType: 5,
          longitude: 114.0788726514246,
          latitude: 38.24854905109693,
          shortNum: 16,
          title: "视频3",
        },
        {
          deviceType: 5,
          longitude: 114.07933673582353,
          latitude: 38.24932372451273,
          shortNum: 10,
          title: "视频4",
        },
        {
          deviceType: 5,
          longitude: 114.07943113040781,
          latitude: 38.249634714126636,
          shortNum: 16,
          title: "视频5",
        },
        {
          deviceType: 5,
          longitude: 114.08000305885355,
          latitude: 38.2494852174479,
          shortNum: 16,
          title: "视频6",
        },
        {
          deviceType: 5,
          longitude: 114.08007200486942,
          latitude: 38.249835018521594,
          shortNum: 16,
          title: "视频7",
        },
        {
          deviceType: 5,
          longitude: 114.07771206027549,
          latitude: 38.252223651533114,
          shortNum: 16,
          title: "视频8",
        },
      ],
      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"],
      [
        {
          url: "../3dtiles/jsondata/tileset.json", //路径
          startMapType: "gps", //初始坐标系
          toMapType: "", //要转换坐标系
          height: -161.1, //模型高度调整
        },
        // {
        //   url: "../3dtiles/ZeHongZhuanHuan/tileset.json",
        //   startMapType: "gps",
        //   toMapType: "gps",
        //   height: 35  ,
        // },
        // {
        //   url: "../3dtiles/MapTilerCeShi/tileset.json",
        //   startMapType: "gaode",
        //   toMapType: "gps",
        //   height: -161,
        // },
      ],
      this
    );
    this.init();
    window.C = this.Cesium;
  },
  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);
      //   }
      // });
      // 如果有缓存
      // const J =  localStorage.getItem("J");
      // if (J) {
      //   const data = JSON.parse(J);
      //   data
      //     .map((item) => {
      //       return {
      //         lnglatArr: item.path,
      //         ...item,
      //       };
      //     })
      //     .forEach((item) => {
      //       this.Cesium.addDanger(item, Null);
      //     });
      // } else {
      //   this.danger.forEach((item) => {
      //     this.Cesium.addDanger(item, Danger);
      //   });
      // }
      dangerArr
        .map((item) => {
          return {
            lnglatArr: item.path,
            ...item,
          };
        })
        .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);
      this.deviceInfoLists();
    },
    deviceInfoLists() {
      deviceInfoLists().then((res) => {
        console.log("设备", res);
        res
          .map((item) => {
            let obj;
            // 视频

            if (item.mapDeviceType == 5) {
              console.log(item, "item");
              obj = {
                latitude: item.latitude,
                longitude: item.longitude,
                deviceId: item.mapDeviceId,
                shortNum: 10,
                deviceType: item.mapDeviceType,
                sbbh: item.mapDeviceNum,
                title: item.mapDeviceName,
                config: { scale: 1, textHeight: -32 },
              };
            } else {
              obj = {
                deviceId: item.mapDeviceId,
                latitude: item.latitude,
                longitude: item.longitude,
                deviceType: item.mapDeviceType,
                title: item.mapDeviceName,
                sbmc: item.mapDeviceName,
                // 号
                sbbh: item.mapDeviceNum,
                // 探测介质
                tcjz: item.mapDeviceMedium,
                sbzt: item.monitorDeviceStatus,
                jcz: item.monitorValue
                  ? item.monitorValue + "" + item.mapDeviceUnit
                  : "-",
                shortNum: 12,
                config: { scale: 1, textHeight: -94 },
              };
            }
            return obj;
          })
          .forEach((item) => {
            if (item.deviceType == 5) {
              this.Cesium.addDevice(item, "pic", Video);
            } else {
              this.Cesium.addDevice(item, "pic", tcq);
            }
          });
      });
    },
    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>