<template>
  <div :class="$style['threemap']" ref="map"></div>
</template>

<script setup lang="ts">
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import {
  CSS3DRenderer,
  CSS3DObject,
} from "three/examples/jsm/renderers/CSS3DRenderer.js";
import { DragControls } from "three/examples/jsm/controls/DragControls";
// import { TransformControls } from "three/examples/jsm/controls/TransformControls";
// import  { Projector }  from 'three/examples/jsm/renderers/Projector.js';
import {
  markRaw,
  nextTick,
  onMounted,
  onUnmounted,
  reactive,
  ref,
  watch,
} from "vue";
import { useRoute, useRouter } from "vue-router";
import { useAerialViewStore } from "@/store/module/AerialView";
import { useMechanicsStore } from "@/store/module/Mechanics";
import { useI18n } from 'vue-i18n'
let {t} = useI18n();
const storeMechanics = useMechanicsStore();
const store = useAerialViewStore();
const router = useRouter();
let ThreeObj = null;
let cssThreeObj = null;
let devposition = {
  精加车间: {
    start: [-218, -63.5],
    end: [-167, -296.7],
  },
  焊接车间: {
    start: [211.6, -88.6],
    end: [262.5, -282.6],
  },
  精饰车间: {
    start: [56.4, -167.2],
    end: [138.8, -297.6],
  },
  机加车间: {
    start: [-117.2, -53.2],
    end: [-85, -279],
  },
  大件车间: {
    start: [-10.2, -72.2],
    end: [27.4, -273.7],
  },
};
let map = ref();
/**
 * @函数功能:
 * @param {*} val 重置画布宽高值
 * @出口参数:
 * @函数备注:
 */
function reset(val: any) {
  //宽高为0时跳出该方法

  if (!val.oWidth && !val.oHeight) return;
  // mapSize.width=val.width
  // mapSize.height=val.height
  // 更新修改相机比例
  map.value.style.width = val.oWidth;
  map.value.style.height = val.oHeight;
  ThreeObj.camera.aspect = val.oWidth / val.oHeight;
  // 更新摄像机的投影矩阵
  ThreeObj.camera.updateProjectionMatrix();

  //处理返回操作时dom层数变多问题
  if (document.getElementsByClassName("cssrender").length > 1) {
    document.getElementsByClassName("cssrender")[1].remove();
  }
  // 更新画布大小
  ThreeObj.renderer.setSize(
    val.oWidth, // 宽度
    val.oHeight // 高度
  );
  cssThreeObj.cssRender.setSize(
    val.oWidth, // 宽度
    val.oHeight // 高度
  );
  // 更新画布像素比
  ThreeObj.renderer.setPixelRatio(map.value.devicePixelRatio);

  //重置盒子尺寸
}
defineExpose({
  reset,
});

let mapPng = require("@/assets/img/ditu.png");

// 为模型添加点击事件处理程序
const raycaster = new THREE.Raycaster();
// 加载控制器,获取场景内模型列表
var objects = [];
//储存tip的dom用于显示与隐藏
let saveTipDom = null;
let transformControls = null;
let dragControls = null;
let index = 1;
let meshBox = {};
let size = {
  x: 25,
  y: 50,
  z: 2,
};
let MaterialObj = {
  color: 0xff00ff, //颜色 16进制
  opacity: 1, //透明度 0-1
  transparent: true, //开启透明度，默认关闭
  wireframe: false, //线框，默认关闭
  visible: false, //设置材质隐藏
};
watch(
  () => store.sensorList,
  (newVal, oldVal) => {
    newVal.forEach((res) => {
      if (res.judge == "t") {
        if (
          cssThreeObj.cssScene.children.some((item) => {
            return item.devId == res.id;
          })
        ) {
          cssThreeObj.cssScene.children.forEach((ele) => {
            if (ele.devId == res.id) {
              if (res.editStatus) {
                ele.devStatus=JSON.parse(res.status)
                if (res.status) {
                  ele.children[0].element.animate(
                    [
                      { color: "#91CC75" },
                      { color: "#fff" },
                      { color: "#91CC75" },
                    ],
                    { duration: 2000, iterations: Infinity }
                  );
                } else {
                  ele.children[0].element.animate(
                    [
                      { color: "#EE6666" },
                      { color: "#fff" },
                      { color: "#EE6666" },
                    ],
                    { duration: 2000, iterations: Infinity }
                  );
                }
              }
            }
          });
        } else {
          setIconDom(
            cssThreeObj,
            { id: res.id, name: res.name, status: res.status },
            { x: res.x, y: res.y },
            res.iconName,
            10
          );
        }
      }
    });
    if (newVal.length != oldVal.length) {
      sethoveMesh(cssThreeObj, ThreeObj);
    }
  },
  { deep: true, flush: "post" }
);
watch(
  () => store.devdataList,
  (newVal, oldVal) => {
    newVal.forEach((res) => {
      let x = [devposition[res.store].start[0], devposition[res.store].end[0]];
      let y = [devposition[res.store].start[1], devposition[res.store].end[1]];
      res.value.forEach((devitem) => {
        if (
          cssThreeObj.cssScene.children.some((item) => {
            return item.devId == devitem.id;
          })
        ) {
          cssThreeObj.cssScene.children.forEach((ele) => {
            if (ele.devId == devitem.id) {
              if (devitem.editStatus) {
                ele.devStatus=JSON.parse(devitem.status)

                if (JSON.parse(devitem.status)) {
                  ele.children[0].element.animate(
                    [
                      { color: "#91CC75" },
                      { color: "#fff" },
                      { color: "#91CC75" },
                    ],
                    { duration: 2000, iterations: Infinity }
                  );
                } else {
                  ele.children[0].element.animate(
                    [
                      { color: "#EE6666" },
                      { color: "#fff" },
                      { color: "#EE6666" },
                    ],
                    { duration: 2000, iterations: Infinity }
                  );
                }
              }
            }
          });
        } else {
          setIconDom(
            cssThreeObj,
            {
              id: devitem.id,
              name: devitem.name,
              status: JSON.parse(devitem.status),
            },
            { x: x[0], y: y[0] },
            devitem.iconName,
            5
          );

          x[0] += 7;
          if (x[0] >= x[1]) {
            x[0] = devposition[res.store].start[0];
            y[0] -= 7;
          }
        }
      });
    });

    setTimeout(() => {
      document.querySelectorAll(".icon-shebeiditu").forEach((res: any) => {
        let a = res.className.split(" ");
        let b = res.style.transform.split(" ");
        
        if (
          a.some((e) => {
            return e == "SSCBar";
          })||b.some((e) => {
            return e=="scale(" + 0.5 + ")";
          })
        ) {
          return;
        }
        res.style.transform = res.style.transform + "scale(" + 0.5 + ")";
      });
    });
    
    
    let new1 = []
    let old = []
    newVal.forEach(res=>{
      new1.push(...res.value)
    })
    oldVal.forEach(res=>{
      old.push(...res.value)
    })
    if (new1.length != old.length) {
      
      sethoveMesh(cssThreeObj, ThreeObj);
    }
  },
  { deep: true, flush: "post" }
);
let routeDataSet = [
  {
    id: "fineMachining",
    size: { x: 79, y: 260, z: 1 },
    MaterialObj: MaterialObj,
    position: { x: -195, y: -172, z: 0 },
    router: 1,
  },
  {
    id: "Machining",
    size: { x: 95, y: 260, z: 1 },
    MaterialObj: MaterialObj,
    position: { x: -84, y: -172, z: 0 },
    router: 2,
  },
  {
    id: "LargePiece",
    size: { x: 71, y: 260, z: 1 },
    MaterialObj: MaterialObj,
    position: { x: 19, y: -172, z: 0 },
    router: 3,
  },
  {
    id: "Finishing",
    size: { x: 88, y: 260, z: 1 },
    MaterialObj: MaterialObj,
    position: { x: 97, y: -172, z: 0 },
    router: 4,
  },
  {
    id: "weld",
    size: { x: 85, y: 260, z: 1 },
    MaterialObj: MaterialObj,
    position: { x: 223, y: -172, z: 0 },
    router: 5,
  },
];
let listData = [
  {
    id: 1,
    name: `精饰车间${t('messages.TVOC_CH2OSensor')}`,
    status: true,
    x: 105,
    y: -48,
    icon: "icon-app_icons--",
  },
  {
    id: 2,
    name: "大件车间噪音监测",
    status: true,
    x: 48,
    y: -240,
    icon: "icon-shengyin",
  },
  {
    id: 3,
    name: "绣花车间噪音监测",
    status: true,
    x: -87,
    y: 185,
    icon: "icon-shengyin",
  },
  {
    id: 4,
    name: "医防军团噪声监测",
    status: true,
    x: 200,
    y: 25,
    icon: "icon-shengyin",
  },
  {
    id: 5,
    name: "机加车间噪音监测",
    status: true,
    x: -125,
    y: -75,
    icon: "icon-shengyin",
  },
  {
    id: 6,
    name: "电控车间噪音监测",
    status: true,
    x: -230,
    y: 138,
    icon: "icon-shengyin",
  },
  {
    id: 7,
    name: "精饰车间噪音监测",
    status: true,
    x: 93,
    y: -48,
    icon: "icon-shengyin",
  },
  {
    id: 8,
    name: "精加车间噪音监测",
    status: true,
    x: -225,
    y: -98,
    icon: "icon-shengyin",
  },
  {
    id: 9,
    name: "焊接车间噪音监测",
    status: true,
    x: 188,
    y: -224,
    icon: "icon-shengyin",
  },
  {
    id: 9,
    name: "家纺车间噪音监测",
    status: true,
    x: 230,
    y: 60,
    icon: "icon-shengyin",
  },
  {
    id: 9,
    name: "缝纫车间噪音监测",
    status: true,
    x: -240,
    y: -208,
    icon: "icon-shengyin",
  },
  {
    id: 9,
    name: "配套中心噪音监测",
    status: true,
    x: -28,
    y: 212,
    icon: "icon-shengyin",
  },
  {
    id: 9,
    name: "西气泵房气压监测",
    status: true,
    x: -125,
    y: -310,
    icon: "icon-qiya",
  },
  {
    id: 9,
    name: "东气泵房气压监测",
    status: true,
    x: 77,
    y: 245,
    icon: "icon-qiya",
  },
  {
    id: 9,
    name: "电控水暖管道压力(回水)18",
    status: true,
    x: -231,
    y: 27,
    icon: "icon-shuiya",
  },
  {
    id: 9,
    name: "电控水暖管道压力(进水)24",
    status: true,
    x: -231,
    y: 44.13,
    icon: "icon-shuiya",
  },
  {
    id: 9,
    name: "配套中心水暖管道压力12（进水）",
    status: true,
    x: 1.05,
    y: 55.34,
    icon: "icon-shuiya",
  },
  {
    id: 9,
    name: "配套中心水暖管道压力33（回水）",
    status: true,
    x: 1.75,
    y: 41.33,
    icon: "icon-shuiya",
  },
  {
    id: 9,
    name: "配套中心水压监测传感器",
    status: true,
    x: -26.97,
    y: 35.02,
    icon: "icon-shuiya",
  },
  {
    id: 9,
    name: "汽车军团水暖管道压力25（回水）",
    status: true,
    x: -242.36,
    y: -190.98,
    icon: "icon-shuiya",
  },
  {
    id: 9,
    name: "精饰回水39",
    status: true,
    x: -10,
    y: -50,
    icon: "icon-shuiya",
  },
  {
    id: 9,
    name: "精加车间水暖管道压力43（进水）",
    status: true,
    x: -163,
    y: -185,
    icon: "icon-shuiya",
  },
  {
    id: 9,
    name: "精加车间水暖管道压力11（回水）",
    status: true,
    x: -228.57,
    y: -185,
    icon: "icon-shuiya",
  },
  {
    id: 9,
    name: "焊接回水",
    status: true,
    x: 246.5,
    y: -63.5,
    icon: "icon-shuiya",
  },
  {
    id: 9,
    name: "汽车进水26水",
    status: true,
    x: -291.2,
    y: -185.9,
    icon: "icon-shuiya",
  },
  {
    id: 9,
    name: "服装进水38",
    status: true,
    x: -218,
    y: 184.4,
    icon: "icon-shuiya",
  },
  {
    id: 9,
    name: "大件-精饰进水30",
    status: true,
    x: 1.5,
    y: -50,
    icon: "icon-shuiya",
  },
  {
    id: 9,
    name: "服装回水19",
    status: true,
    x: -206,
    y: 184.4,
    icon: "icon-shuiya",
  },
  {
    id: 9,
    name: "机加回水20",
    status: true,
    x: -47.5,
    y: -47.5,
    icon: "icon-shuiya",
  },
  {
    id: 9,
    name: "焊接36",
    status: true,
    x: 258.5,
    y: -63.5,
    icon: "icon-shuiya",
  },
  {
    id: 9,
    name: "大件29",
    status: true,
    x: -10,
    y: -62,
    icon: "icon-shuiya",
  },
  {
    id: 9,
    name: "大件21",
    status: true,
    x: 1.5,
    y: -62,
    icon: "icon-shuiya",
  },
  {
    id: 9,
    name: "十号楼司机班水暖管道压力32",
    status: true,
    x: 367.5,
    y: -44.6,
    icon: "icon-shuiya",
  },
  {
    id: 9,
    name: "十号楼司机班水暖管道压力35",
    status: true,
    x: 379.5,
    y: -44.6,
    icon: "icon-shuiya",
  },
  {
    id: 9,
    name: "综合楼大厅水暖42",
    status: true,
    x: -353.5,
    y: 20.5,
    icon: "icon-shuiya",
  },
  {
    id: 9,
    name: "综合楼大厅水暖13",
    status: true,
    x: -365.5,
    y: 20.5,
    icon: "icon-shuiya",
  },
  {
    id: 9,
    name: "食堂水暖管道压力传感器23（回水）",
    status: true,
    x: 334.5,
    y: -165.0,
    icon: "icon-shuiya",
  },
  {
    id: 9,
    name: "食堂水暖管道压力传感器16（进水）",
    status: true,
    x: 334.4,
    y: -178.2,
    icon: "icon-shuiya",
  },
  {
    id: 9,
    name: "指控室水暖管道压力09",
    status: true,
    x: -344.03,
    y: -148.5,
    icon: "icon-shuiya",
  },
  {
    id: 9,
    name: "指控室水暖管道压力10",
    status: true,
    x: -344.03,
    y: -160.41,
    icon: "icon-shuiya",
  },
  {
    id: 9,
    name: "综合楼盈瑞安档案室水暖管道压力34",
    status: true,
    x: -377.26,
    y: -203.83,
    icon: "icon-shuiya",
  },
  {
    id: 9,
    name: "综合楼盈瑞安档案室水暖管道压力37",
    status: true,
    x: -362.69,
    y: -203.83,
    icon: "icon-shuiya",
  },
  {
    id: 9,
    name: "服装军团水暖管道压力06（回水1）",
    status: true,
    x: -218.93,
    y: 203.5,
    icon: "icon-shuiya",
  },
  {
    id: 9,
    name: "服装军团水暖管道压力07（进水1）",
    status: true,
    x: -205.62,
    y: 203.53,
    icon: "icon-shuiya",
  },
  {
    id: 9,
    name: "综合楼西门水暖管道压力14",
    status: true,
    x: -383.56,
    y: 163.91,
    icon: "icon-shuiya",
  },
  {
    id: 9,
    name: "综合楼西门水暖管道压力401",
    status: true,
    x: -383.56,
    y: 152.63,
    icon: "icon-shuiya",
  },
  {
    id: 9,
    name: "大件车间温湿度监测",
    status: true,
    x: 35.27,
    y: -269.07,
    icon: "icon-icon-temperature",
  },
  {
    id: 9,
    name: "家纺车间温湿度监测",
    status: true,
    x: 250.46,
    y: 89.66,
    icon: "icon-icon-temperature",
  },
  {
    id: 9,
    name: "配套中心温湿度监测",
    status: true,
    x: -27.67,
    y: 198.23,
    icon: "icon-icon-temperature",
  },
  {
    id: 9,
    name: "缝纫车间温湿度监测",
    status: true,
    x: -239.95,
    y: -219.24,
    icon: "icon-icon-temperature",
  },
  {
    id: 9,
    name: "电控车间温湿度监测",
    status: true,
    x: -231.93,
    y: 126.08,
    icon: "icon-icon-temperature",
  },
  {
    id: 9,
    name: "机加车间温湿度监测",
    status: true,
    x: -124.26,
    y: -85.4,
    icon: "icon-icon-temperature",
  },
  {
    id: 9,
    name: "焊接车间温湿度监测",
    status: true,
    x: 201.97,
    y: -222.59,
    icon: "icon-icon-temperature",
  },
  {
    id: 9,
    name: "精加车间温湿度监测",
    status: true,
    x: -226.2,
    y: -126.54,
    icon: "icon-icon-temperature",
  },
  {
    id: 9,
    name: "精饰车间温湿度监测",
    status: true,
    x: 93.46,
    y: -58.1,
    icon: "icon-icon-temperature",
  },
  {
    id: 9,
    name: "医防军团温湿度监测",
    status: true,
    x: 214.03,
    y: 62.34,
    icon: "icon-icon-temperature",
  },
  {
    id: 9,
    name: "绣花车间温湿度监测",
    status: true,
    x: -106.84,
    y: 170.21,
    icon: "icon-icon-temperature",
  },
  {
    id: 9,
    name: "精饰车间火花传感器",
    status: true,
    x: 97.66,
    y: -121.09,
    icon: "icon-weibiaoti1",
  },
  {
    id: 9,
    name: "精饰车间烟雾传感器",
    status: true,
    x: 97.66,
    y: -133.69,
    icon: "icon-yanwubaojingqi",
  },
  {
    id: 9,
    name: "精饰车间燃气监测",
    status: true,
    x: 97.66,
    y: -103.5,
    icon: "icon-ranqi",
  },
  {
    id: 9,
    name: "食堂燃气监测",
    status: true,
    x: 326.82,
    y: -268.98,
    icon: "icon-ranqi",
  },
  {
    id: 9,
    name: "锅炉房燃气监测",
    status: true,
    x: 246.08,
    y: -49.0,
    icon: "icon-ranqi",
  },
  {
    id: 9,
    name: "焊接车间电流监测传感器02",
    status: true,
    x: 254.48,
    y: -80.5,
    icon: "icon-dianliu",
  },
  {
    id: 9,
    name: "焊接车间电流监测传感器01",
    status: true,
    x: 208.38,
    y: -291.77,
    icon: "icon-dianliu",
  },
  {
    id: 9,
    name: "焊接车间电流监测传感器03",
    status: true,
    x: 185.72,
    y: -81.84,
    icon: "icon-dianliu",
  },
  {
    id: 9,
    name: "精加车间电流监测传感器01",
    status: true,
    x: -213.17,
    y: -50.3,
    icon: "icon-dianliu",
  },
  {
    id: 9,
    name: "绣花车间电流监测传感器01",
    status: true,
    x: -99.13,
    y: 32.62,
    icon: "icon-dianliu",
  },
  {
    id: 9,
    name: "绣花车间电流监测传感器02",
    status: true,
    x: -97.03,
    y: 243.76,
    icon: "icon-dianliu",
  },
  {
    id: 9,
    name: "缝纫车间电流检测传感器03",
    status: true,
    x: -225.57,
    y: -209.99,
    icon: "icon-dianliu",
  },
  {
    id: 9,
    name: "缝纫车间电流检测传感器02",
    status: true,
    x: -241.75,
    y: -231.85,
    icon: "icon-dianliu",
  },
  {
    id: 9,
    name: "缝纫车间电流检测传感器01",
    status: true,
    x: -292.49,
    y: -231.85,
    icon: "icon-dianliu",
  },
  {
    id: 9,
    name: "电控车间电流监测传感器01",
    status: true,
    x: -233.81,
    y: 153.15,
    icon: "icon-dianliu",
  },
  {
    id: 9,
    name: "东气泵房电流监测传感器01",
    status: true,
    x: -114.54,
    y: -308.2,
    icon: "icon-dianliu",
  },
  {
    id: 9,
    name: "西气泵房电流监测传感器01",
    status: true,
    x: 90.02,
    y: 245.26,
    icon: "icon-dianliu",
  },
  {
    id: 9,
    name: "家纺车间电流监测传感器01",
    status: true,
    x: 255.36,
    y: 60.94,
    icon: "icon-dianliu",
  },
  {
    id: 9,
    name: "医防军团电流监测传感器02",
    status: true,
    x: 242.45,
    y: 60.94,
    icon: "icon-dianliu",
  },
  {
    id: 9,
    name: "大件车间电流监测传感器01",
    status: true,
    x: 47.96,
    y: -69.3,
    icon: "icon-dianliu",
  },
  {
    id: 9,
    name: "大件车间电流监测传感器03",
    status: true,
    x: 47.96,
    y: -223.29,
    icon: "icon-dianliu",
  },
  {
    id: 9,
    name: "大件车间电流监测传感器02",
    status: true,
    x: -8.05,
    y: -223.29,
    icon: "icon-dianliu",
  },
  {
    id: 9,
    name: "机加车间电流监测传感器01",
    status: true,
    x: -124.26,
    y: -235.89,
    icon: "icon-dianliu",
  },
  {
    id: 9,
    name: "精饰车间电流监测传感器01",
    status: true,
    x: 97.66,
    y: -146.29,
    icon: "icon-dianliu",
  },
  {
    id: 9,
    name: "大件车间粉尘监测传感器",
    status: true,
    x: 47.96,
    y: -120.39,
    icon: "icon-fenchen",
  },
  {
    id: 9,
    name: "焊接车间粉尘监测传感器",
    status: true,
    x: 201.97,
    y: -235.19,
    icon: "icon-fenchen",
  },
  {
    id: 9,
    name: "精饰车间粉尘监测传感器",
    status: true,
    x: 97.66,
    y: -156.79,
    icon: "icon-fenchen",
  },
  {
    id: 9,
    name: "服装军团物联网关",
    status: true,
    x: -107.54,
    y: 184.32,
    icon: "icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan",
  },
  {
    id: 9,
    name: "精饰车间物联网关",
    status: true,
    x: 97.66,
    y: -86.8,
    icon: "icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan",
  },
  {
    id: 9,
    name: "电控分厂物联网关",
    status: true,
    x: -234.34,
    y: 110.67,
    icon: "icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan",
  },
  {
    id: 9,
    name: "家纺军团物联网关",
    status: true,
    x: 241.35,
    y: 79.85,
    icon: "icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan",
  },
  {
    id: 9,
    name: "医防军团物联网关",
    status: true,
    x: 214.03,
    y: 29.42,
    icon: "icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan",
  },
  {
    id: 9,
    name: "汽车军团物联网关",
    status: true,
    x: -242.05,
    y: -244.46,
    icon: "icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan",
  },
  {
    id: 9,
    name: "焊接车间物联网关",
    status: true,
    x: 189.37,
    y: -233.79,
    icon: "icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan",
  },
  {
    id: 9,
    name: "机加车间物联网关",
    status: true,
    x: -123.56,
    y: -221.19,
    icon: "icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan",
  },
  {
    id: 9,
    name: "精加车间物联网关",
    status: true,
    x: -225.77,
    y: -107.79,
    icon: "icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan",
  },
  {
    id: 9,
    name: "大件车间物联网关",
    status: false,
    x: 46.55,
    y: -249.89,
    icon: "icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan",
  },
];

let devList = {
  code: 200,
  msg: null,
  data: {
    机加车间: [
      {
        id: "0fd04880-4636-11ed-b6af-15994988a6b3",
        name: "炮塔铣床0508",
        status: "false",
        data: null,
        dept: "机加车间",
        imgsrc: null,
      },
      {
        id: "101a6650-4635-11ed-b6af-15994988a6b3",
        name: "立式升降铣床0451",
        status: "false",
        data: null,
        dept: "机加车间",
        imgsrc: null,
      },
      {
        id: "1eb530d0-4637-11ed-b6af-15994988a6b3",
        name: "卧式车床0412",
        status: "false",
        data: null,
        dept: "机加车间",
        imgsrc: null,
      },
      {
        id: "20e4af70-4641-11ed-b6af-15994988a6b3",
        name: "台式钻床0509",
        status: "false",
        data: null,
        dept: "机加车间",
        imgsrc: null,
      },
      {
        id: "3c0c7b70-4637-11ed-b6af-15994988a6b3",
        name: "卧式车床0413",
        status: "false",
        data: null,
        dept: "机加车间",
        imgsrc: null,
      },
      {
        id: "45d58f10-4638-11ed-b6af-15994988a6b3",
        name: "线切割机床0420",
        status: "false",
        data: null,
        dept: "机加车间",
        imgsrc: null,
      },
      {
        id: "45ff9630-4641-11ed-b6af-15994988a6b3",
        name: "台式攻丝机0433",
        status: "false",
        data: null,
        dept: "机加车间",
        imgsrc: null,
      },
      {
        id: "48c31970-4635-11ed-b6af-15994988a6b3",
        name: "立式升降铣床0320",
        status: "false",
        data: null,
        dept: "机加车间",
        imgsrc: null,
      },
      {
        id: "539dfc20-463f-11ed-b6af-15994988a6b3",
        name: "万能回转头铣床0409",
        status: "false",
        data: null,
        dept: "机加车间",
        imgsrc: null,
      },
      {
        id: "560db2b0-4636-11ed-b6af-15994988a6b3",
        name: "炮塔铣床0423",
        status: "false",
        data: null,
        dept: "机加车间",
        imgsrc: null,
      },
      {
        id: "567cf9d0-4637-11ed-b6af-15994988a6b3",
        name: "卧式车床0415",
        status: "false",
        data: null,
        dept: "机加车间",
        imgsrc: null,
      },
      {
        id: "660e86c0-4641-11ed-b6af-15994988a6b3",
        name: "台式攻丝机0514",
        status: "false",
        data: null,
        dept: "机加车间",
        imgsrc: null,
      },
      {
        id: "6f1cfdf0-4637-11ed-b6af-15994988a6b3",
        name: "卧式车床0416",
        status: "false",
        data: null,
        dept: "机加车间",
        imgsrc: null,
      },
      {
        id: "87089aa0-4641-11ed-b6af-15994988a6b3",
        name: "台式钻床0511",
        status: "false",
        data: null,
        dept: "机加车间",
        imgsrc: null,
      },
      {
        id: "87d270c0-4635-11ed-b6af-15994988a6b3",
        name: "炮塔铣床(立铣床)0406",
        status: "false",
        data: null,
        dept: "机加车间",
        imgsrc: null,
      },
      {
        id: "88343440-463f-11ed-b6af-15994988a6b3",
        name: "万能回转头铣床0507",
        status: "false",
        data: null,
        dept: "机加车间",
        imgsrc: null,
      },
      {
        id: "9df3e050-4635-11ed-b6af-15994988a6b3",
        name: "炮塔铣床0407",
        status: "false",
        data: null,
        dept: "机加车间",
        imgsrc: null,
      },
      {
        id: "a0c4be20-4636-11ed-b6af-15994988a6b3",
        name: "万能回转头铣床0506",
        status: "false",
        data: null,
        dept: "机加车间",
        imgsrc: null,
      },
      {
        id: "aa3810a0-4637-11ed-b6af-15994988a6b3",
        name: "线切割机床0417",
        status: "false",
        data: null,
        dept: "机加车间",
        imgsrc: null,
      },
      {
        id: "b28d4f50-4640-11ed-b6af-15994988a6b3",
        name: "台式钻床0431",
        status: "false",
        data: null,
        dept: "机加车间",
        imgsrc: null,
      },
      {
        id: "b4222120-4635-11ed-b6af-15994988a6b3",
        name: "炮塔铣床0408",
        status: "false",
        data: null,
        dept: "机加车间",
        imgsrc: null,
      },
      {
        id: "bb07aec0-4634-11ed-b6af-15994988a6b3",
        name: "立式升降铣床0403",
        status: "false",
        data: null,
        dept: "机加车间",
        imgsrc: null,
      },
      {
        id: "bbace810-4637-11ed-b6af-15994988a6b3",
        name: "线切割机床0418",
        status: "false",
        data: null,
        dept: "机加车间",
        imgsrc: null,
      },
      {
        id: "c39a6fd0-4636-11ed-b6af-15994988a6b3",
        name: "普通卧轴距平面磨床0410",
        status: "false",
        data: null,
        dept: "机加车间",
        imgsrc: null,
      },
      {
        id: "cbedfa70-4637-11ed-b6af-15994988a6b3",
        name: "线切割机床0419",
        status: "false",
        data: null,
        dept: "机加车间",
        imgsrc: null,
      },
      {
        id: "d3ecdcc0-4635-11ed-b6af-15994988a6b3",
        name: "炮塔铣床0449",
        status: "false",
        data: null,
        dept: "机加车间",
        imgsrc: null,
      },
      {
        id: "d684e230-4634-11ed-b6af-15994988a6b3",
        name: "立式升降铣床0404",
        status: "false",
        data: null,
        dept: "机加车间",
        imgsrc: null,
      },
      {
        id: "e7c13290-4636-11ed-b6af-15994988a6b3",
        name: "万能外圆磨床0411",
        status: "false",
        data: null,
        dept: "机加车间",
        imgsrc: null,
      },
      {
        id: "ebd5c5e0-4635-11ed-b6af-15994988a6b3",
        name: "炮塔铣床0450",
        status: "false",
        data: null,
        dept: "机加车间",
        imgsrc: null,
      },
      {
        id: "edcc3db0-4640-11ed-b6af-15994988a6b3",
        name: "台式攻丝机0448",
        status: "false",
        data: null,
        dept: "机加车间",
        imgsrc: null,
      },
      {
        id: "f1afafe0-4634-11ed-b6af-15994988a6b3",
        name: "立式升降铣床0405",
        status: "false",
        data: null,
        dept: "机加车间",
        imgsrc: null,
      },
    ],
    焊接车间: [
      {
        id: "2f36f590-406c-11ed-b6af-15994988a6b3",
        name: "直流焊机0107",
        status: "false",
        data: null,
        dept: "焊接车间",
        imgsrc: null,
      },
      {
        id: "36e0ec00-4068-11ed-b6af-15994988a6b3",
        name: "金属带锯床0116",
        status: "false",
        data: null,
        dept: "焊接车间",
        imgsrc: null,
      },
      {
        id: "37aeb490-406e-11ed-b6af-15994988a6b3",
        name: "摇臂钻床0110",
        status: "false",
        data: null,
        dept: "焊接车间",
        imgsrc: null,
      },
      {
        id: "39770030-4068-11ed-b6af-15994988a6b3",
        name: "激光切割机0146重",
        status: "false",
        data: null,
        dept: "焊接车间",
        imgsrc: null,
      },
      {
        id: "3995d2d0-4068-11ed-b6af-15994988a6b3",
        name: "直流焊机0106",
        status: "false",
        data: null,
        dept: "焊接车间",
        imgsrc: null,
      },
      {
        id: "3da63580-4069-11ed-b6af-15994988a6b3",
        name: "激光切割机0138重",
        status: "false",
        data: null,
        dept: "焊接车间",
        imgsrc: null,
      },
      {
        id: "3fd93790-4068-11ed-b6af-15994988a6b3",
        name: "金属带锯床0117",
        status: "true",
        data: null,
        dept: "焊接车间",
        imgsrc: null,
      },
      {
        id: "47d10310-4068-11ed-b6af-15994988a6b3",
        name: "逆变式多功能气体保护焊接0145",
        status: "false",
        data: null,
        dept: "焊接车间",
        imgsrc: null,
      },
      {
        id: "56d305c0-4068-11ed-b6af-15994988a6b3",
        name: "二氧化碳保护焊0133",
        status: "false",
        data: null,
        dept: "焊接车间",
        imgsrc: null,
      },
      {
        id: "57dea960-4068-11ed-b6af-15994988a6b3",
        name: "直流焊机0105",
        status: "true",
        data: null,
        dept: "焊接车间",
        imgsrc: null,
      },
      {
        id: "584dbee0-4068-11ed-b6af-15994988a6b3",
        name: "等离子切割机0123",
        status: "false",
        data: null,
        dept: "焊接车间",
        imgsrc: null,
      },
      {
        id: "6734bf80-4068-11ed-b6af-15994988a6b3",
        name: "数控折弯机0303重",
        status: "false",
        data: null,
        dept: "焊接车间",
        imgsrc: null,
      },
      {
        id: "67909b20-4068-11ed-b6af-15994988a6b3",
        name: "工具立铣床0328",
        status: "false",
        data: null,
        dept: "焊接车间",
        imgsrc: null,
      },
      {
        id: "68989540-4068-11ed-b6af-15994988a6b3",
        name: "二氧化碳保护焊0119",
        status: "false",
        data: null,
        dept: "焊接车间",
        imgsrc: null,
      },
      {
        id: "6a040c20-4068-11ed-b6af-15994988a6b3",
        name: "二氧化碳保护焊0134",
        status: "false",
        data: null,
        dept: "焊接车间",
        imgsrc: null,
      },
      {
        id: "6a22b7b0-4068-11ed-b6af-15994988a6b3",
        name: "直流焊机0108",
        status: "false",
        data: null,
        dept: "焊接车间",
        imgsrc: null,
      },
      {
        id: "7325ffc0-4068-11ed-b6af-15994988a6b3",
        name: "康菲尔干式除尘器0140重",
        status: "false",
        data: null,
        dept: "焊接车间",
        imgsrc: null,
      },
      {
        id: "783aabb0-406c-11ed-b6af-15994988a6b3",
        name: "氩弧焊机0157",
        status: "false",
        data: null,
        dept: "焊接车间",
        imgsrc: null,
      },
      {
        id: "78fdfbb0-406c-11ed-b6af-15994988a6b3",
        name: "氩弧焊机0127",
        status: "false",
        data: null,
        dept: "焊接车间",
        imgsrc: null,
      },
      {
        id: "798b6b70-4068-11ed-b6af-15994988a6b3",
        name: "金属带锯床0137",
        status: "false",
        data: null,
        dept: "焊接车间",
        imgsrc: null,
      },
      {
        id: "79b93230-4068-11ed-b6af-15994988a6b3",
        name: "金属带锯床0439",
        status: "false",
        data: null,
        dept: "焊接车间",
        imgsrc: null,
      },
      {
        id: "7ab5e1b0-4068-11ed-b6af-15994988a6b3",
        name: "金属带锯床0141",
        status: "false",
        data: null,
        dept: "焊接车间",
        imgsrc: null,
      },
      {
        id: "7ceff330-4068-11ed-b6af-15994988a6b3",
        name: "数控液压板料折弯机0132重",
        status: "false",
        data: null,
        dept: "焊接车间",
        imgsrc: null,
      },
      {
        id: "843f22a0-4068-11ed-b6af-15994988a6b3",
        name: "剪板机0304",
        status: "false",
        data: null,
        dept: "焊接车间",
        imgsrc: null,
      },
      {
        id: "8461c5d0-4068-11ed-b6af-15994988a6b3",
        name: "氩弧焊机0112",
        status: "false",
        data: null,
        dept: "焊接车间",
        imgsrc: null,
      },
      {
        id: "9d8f6720-406c-11ed-b6af-15994988a6b3",
        name: "二氧化碳保护焊0135",
        status: "false",
        data: null,
        dept: "焊接车间",
        imgsrc: null,
      },
      {
        id: "b3e73e10-406e-11ed-b6af-15994988a6b3",
        name: "数控液压闸式剪板机0136重",
        status: "false",
        data: null,
        dept: "焊接车间",
        imgsrc: null,
      },
      {
        id: "b7d374b0-4606-11ed-b6af-15994988a6b3",
        name: "氩弧焊机0111",
        status: "false",
        data: null,
        dept: "焊接车间",
        imgsrc: null,
      },
    ],
    精饰车间: [
      {
        id: "03e2c050-460b-11ed-b6af-15994988a6b3",
        name: "大件喷漆房燃烧机1",
        status: "false",
        data: null,
        dept: "精饰车间",
        imgsrc: null,
      },
      {
        id: "0a602830-4608-11ed-b6af-15994988a6b3",
        name: "烘干室A排风机1",
        status: "false",
        data: null,
        dept: "精饰车间",
        imgsrc: null,
      },
      {
        id: "10f29a80-460c-11ed-b6af-15994988a6b3",
        name: "打磨室空调送风设备1",
        status: "true",
        data: null,
        dept: "精饰车间",
        imgsrc: null,
      },
      {
        id: "17d4eb40-45f4-11ed-b6af-15994988a6b3",
        name: "烘干室B排风机1",
        status: "false",
        data: null,
        dept: "精饰车间",
        imgsrc: null,
      },
      {
        id: "25dac6d0-4066-11ed-b6af-15994988a6b3",
        name: "手动喷砂机0205",
        status: "false",
        data: null,
        dept: "精饰车间",
        imgsrc: null,
      },
      {
        id: "332583e0-4609-11ed-b6af-15994988a6b3",
        name: "喷粉室粉室1",
        status: "false",
        data: null,
        dept: "精饰车间",
        imgsrc: null,
      },
      {
        id: "61d9c640-460b-11ed-b6af-15994988a6b3",
        name: "大件喷漆房空调送风设备3",
        status: "false",
        data: null,
        dept: "精饰车间",
        imgsrc: null,
      },
      {
        id: "628d2f30-45f4-11ed-b6af-15994988a6b3",
        name: "烘干室A排风机2",
        status: "false",
        data: null,
        dept: "精饰车间",
        imgsrc: null,
      },
      {
        id: "7ce4f370-460a-11ed-b6af-15994988a6b3",
        name: "大件喷漆房燃烧机2",
        status: "false",
        data: null,
        dept: "精饰车间",
        imgsrc: null,
      },
      {
        id: "93341f30-4609-11ed-b6af-15994988a6b3",
        name: "喷粉室粉室2",
        status: "false",
        data: null,
        dept: "精饰车间",
        imgsrc: null,
      },
      {
        id: "99c7e680-460c-11ed-b6af-15994988a6b3",
        name: "打磨室空调送风设备3",
        status: "false",
        data: null,
        dept: "精饰车间",
        imgsrc: null,
      },
      {
        id: "a27bdbc0-3fda-11ed-b6af-15994988a6b3",
        name: "小件清理室0215",
        status: "false",
        data: null,
        dept: "精饰车间",
        imgsrc: null,
      },
      {
        id: "aa81b100-3fda-11ed-b6af-15994988a6b3",
        name: "小件喷漆房",
        status: "false",
        data: null,
        dept: "精饰车间",
        imgsrc: null,
      },
      {
        id: "aee3e640-4607-11ed-b6af-15994988a6b3",
        name: "烘干室B排风机2",
        status: "false",
        data: null,
        dept: "精饰车间",
        imgsrc: null,
      },
      {
        id: "b8afe8f0-3fda-11ed-b6af-15994988a6b3",
        name: "烘干室B",
        status: "false",
        data: null,
        dept: "精饰车间",
        imgsrc: null,
      },
      {
        id: "b9f720e0-3fd8-11ed-b6af-15994988a6b3",
        name: "喷粉室",
        status: "false",
        data: null,
        dept: "精饰车间",
        imgsrc: null,
      },
      {
        id: "be100960-460b-11ed-b6af-15994988a6b3",
        name: "大件喷漆房燃烧机3",
        status: "false",
        data: null,
        dept: "精饰车间",
        imgsrc: null,
      },
      {
        id: "c0d8af80-3fda-11ed-b6af-15994988a6b3",
        name: "冷冻式空气干燥机0203",
        status: "false",
        data: null,
        dept: "精饰车间",
        imgsrc: null,
      },
      {
        id: "c33f3a20-3fd8-11ed-b6af-15994988a6b3",
        name: "高温烤房0210",
        status: "false",
        data: null,
        dept: "精饰车间",
        imgsrc: null,
      },
      {
        id: "cb558a20-3fd8-11ed-b6af-15994988a6b3",
        name: "打磨室",
        status: "true",
        data: null,
        dept: "精饰车间",
        imgsrc: null,
      },
      {
        id: "d22688e0-3fd8-11ed-b6af-15994988a6b3",
        name: "喷漆房",
        status: "false",
        data: null,
        dept: "精饰车间",
        imgsrc: null,
      },
      {
        id: "d32708f0-3fd8-11ed-b6af-15994988a6b3",
        name: "烘干室A",
        status: "false",
        data: null,
        dept: "精饰车间",
        imgsrc: null,
      },
      {
        id: "d4cfe170-409d-11ed-b6af-15994988a6b3",
        name: "抛丸机0201",
        status: "false",
        data: null,
        dept: "精饰车间",
        imgsrc: null,
      },
      {
        id: "d52f8da0-409d-11ed-b6af-15994988a6b3",
        name: "喷砂罐0202",
        status: "false",
        data: null,
        dept: "精饰车间",
        imgsrc: null,
      },
      {
        id: "dd1e64c0-4609-11ed-b6af-15994988a6b3",
        name: "大件喷漆房空调送风设备1",
        status: "false",
        data: null,
        dept: "精饰车间",
        imgsrc: null,
      },
      {
        id: "e23cc6f0-4608-11ed-b6af-15994988a6b3",
        name: "小件喷漆房燃烧机",
        status: "true",
        data: null,
        dept: "精饰车间",
        imgsrc: null,
      },
    ],
    精加车间: [
      {
        id: "39a67660-45d3-11ed-b6af-15994988a6b3",
        name: "加工中心0502",
        status: "false",
        data: null,
        dept: "精加车间",
        imgsrc: null,
      },
      {
        id: "3db762d0-4567-11ed-b6af-15994988a6b3",
        name: "哈斯自动数控加工中心0528",
        status: "true",
        data: null,
        dept: "精加车间",
        imgsrc: null,
      },
      {
        id: "449ad820-4567-11ed-b6af-15994988a6b3",
        name: "哈斯自动数控加工中心0525",
        status: "true",
        data: null,
        dept: "精加车间",
        imgsrc: null,
      },
      {
        id: "4ad5ff80-4567-11ed-b6af-15994988a6b3",
        name: "哈斯自动数控加工中心0531",
        status: "true",
        data: null,
        dept: "精加车间",
        imgsrc: null,
      },
      {
        id: "4b397c40-4567-11ed-b6af-15994988a6b3",
        name: "哈斯自动数控加工中心0522",
        status: "true",
        data: null,
        dept: "精加车间",
        imgsrc: null,
      },
      {
        id: "53ff1f10-4567-11ed-b6af-15994988a6b3",
        name: "哈斯自动数控加工中心0536",
        status: "true",
        data: null,
        dept: "精加车间",
        imgsrc: null,
      },
      {
        id: "5d83f330-4567-11ed-b6af-15994988a6b3",
        name: "哈斯自动数控加工中心0535",
        status: "true",
        data: null,
        dept: "精加车间",
        imgsrc: null,
      },
      {
        id: "5fa329b0-4567-11ed-b6af-15994988a6b3",
        name: "哈斯自动数控加工中心0521",
        status: "true",
        data: null,
        dept: "精加车间",
        imgsrc: null,
      },
      {
        id: "6591dec0-4567-11ed-b6af-15994988a6b3",
        name: "哈斯自动数控加工中心0533",
        status: "true",
        data: null,
        dept: "精加车间",
        imgsrc: null,
      },
      {
        id: "65c37610-4567-11ed-b6af-15994988a6b3",
        name: "哈斯自动数控加工中心0534",
        status: "true",
        data: null,
        dept: "精加车间",
        imgsrc: null,
      },
      {
        id: "68f99ad0-4567-11ed-b6af-15994988a6b3",
        name: "哈斯自动数控加工中心0532",
        status: "true",
        data: null,
        dept: "精加车间",
        imgsrc: null,
      },
      {
        id: "694cdaf0-4617-11ed-b6af-15994988a6b3",
        name: "数控车床0505",
        status: "true",
        data: null,
        dept: "精加车间",
        imgsrc: null,
      },
      {
        id: "6faed430-4567-11ed-b6af-15994988a6b3",
        name: "哈斯自动数控加工中心0524",
        status: "true",
        data: null,
        dept: "精加车间",
        imgsrc: null,
      },
      {
        id: "79237bb0-4567-11ed-b6af-15994988a6b3",
        name: "哈斯自动数控加工中心0523",
        status: "true",
        data: null,
        dept: "精加车间",
        imgsrc: null,
      },
      {
        id: "83666fb0-4567-11ed-b6af-15994988a6b3",
        name: "哈斯自动数控加工中心0527",
        status: "true",
        data: null,
        dept: "精加车间",
        imgsrc: null,
      },
      {
        id: "89c34fe0-4567-11ed-b6af-15994988a6b3",
        name: "哈斯自动数控加工中心0529",
        status: "true",
        data: null,
        dept: "精加车间",
        imgsrc: null,
      },
      {
        id: "8fe08f00-4567-11ed-b6af-15994988a6b3",
        name: "哈斯自动数控加工中心0530",
        status: "true",
        data: null,
        dept: "精加车间",
        imgsrc: null,
      },
      {
        id: "9239e5b0-45d2-11ed-b6af-15994988a6b3",
        name: "加工中心0504",
        status: "true",
        data: null,
        dept: "精加车间",
        imgsrc: null,
      },
      {
        id: "94f200d0-45d2-11ed-b6af-15994988a6b3",
        name: "立式加工中心0501",
        status: "true",
        data: null,
        dept: "精加车间",
        imgsrc: null,
      },
      {
        id: "eace0af0-4616-11ed-b6af-15994988a6b3",
        name: "加工中心0503",
        status: "false",
        data: null,
        dept: "精加车间",
        imgsrc: null,
      },
    ],
    大件车间: [
      {
        id: "25d16540-4098-11ed-b6af-15994988a6b3",
        name: "龙门铣0301重",
        status: "false",
        data: null,
        dept: "大件车间",
        imgsrc: null,
      },
      {
        id: "335c5850-4098-11ed-b6af-15994988a6b3",
        name: "龙门铣0302重",
        status: "false",
        data: null,
        dept: "大件车间",
        imgsrc: null,
      },
      {
        id: "4fc74720-4098-11ed-b6af-15994988a6b3",
        name: "摇臂钻床0308",
        status: "false",
        data: null,
        dept: "大件车间",
        imgsrc: null,
      },
      {
        id: "56f3ac50-4098-11ed-b6af-15994988a6b3",
        name: "金属带锯床0321",
        status: "false",
        data: null,
        dept: "大件车间",
        imgsrc: null,
      },
      {
        id: "7b489910-409a-11ed-b6af-15994988a6b3",
        name: "车床0305重",
        status: "false",
        data: null,
        dept: "大件车间",
        imgsrc: null,
      },
      {
        id: "d4a1f5a0-4087-11ed-b6af-15994988a6b3",
        name: "摇臂钻床0334",
        status: "false",
        data: null,
        dept: "大件车间",
        imgsrc: null,
      },
      {
        id: "d5d9b7b0-409a-11ed-b6af-15994988a6b3",
        name: "摇臂钻床0309",
        status: "false",
        data: null,
        dept: "大件车间",
        imgsrc: null,
      },
    ],
  },
};
/**
 * @函数功能:
 * @param {*} size 框大小
 * @param {*} material 材质设置
 * @param {*} id 通过id判断跳转
 * @param {*} position 位置
 * @出口参数:
 * @函数备注:
 */
function setMesh(size, material, id, position) {
  var geometry = new THREE.BoxGeometry(size.x, size.y, size.z); //创建一个立方体几何对象Geometry
  var material = new THREE.MeshLambertMaterial(material); //材质对象Material
  var mesh = new THREE.Mesh(geometry, material);
  mesh.position.set(position.x, position.y, position.z);
  mesh.id2 = id;
  return mesh; //网格模型对象Mesh
}
function initThree(height, width) {
  //创建场景
  let scene = markRaw(new THREE.Scene());
  //创建相机
  let camera = new THREE.PerspectiveCamera(50, width / height, 1, 2000);
  // 3.创建WebGLRenderer渲染器
  let renderer = new THREE.WebGLRenderer();
  /**
   * 光源设置
   */
  //点光源
  var point = new THREE.PointLight(0xfffffff);
  point.position.set(100, 100, 100); //点光源位置
  scene.add(point); //点光源添加到场景中
  //环境光
  var ambient = new THREE.AmbientLight(0x444444);
  scene.add(ambient);

  camera.position.set(0, 0, 550); //设置相机位置
  camera.lookAt(scene.position);
  renderer.setSize(width, height);
  renderer.domElement.id = "renderer";
  // 设置渲染位置
  map.value.appendChild(renderer.domElement);
  return { scene, camera, renderer };
}
function initCss3DScene(height, width) {
  const cssScene = new THREE.Scene();
  const cssRender = new CSS3DRenderer();
  cssRender.setSize(width, height);
  cssRender.domElement.style.position = "absolute";
  cssRender.domElement.style.top = 0;
  cssRender.domElement.className = "cssrender";
  document.body.appendChild(cssRender.domElement);
  //   const controls = new OrbitControls(ThreeObj.camera, cssRender.domElement);
  return {
    cssScene,
    cssRender,
  };
}
function setCssDom(cssThreeObj) {
  const dom = document.createElement("i");
  const domTag = document.createElement("div");
  dom.className = "iconfont icon-blue iconSize icon-dianliu";
  dom.animate(
    [{ color: "#20aec5" }, { color: "#10606c" }, { color: "#20aec5" }],
    { duration: 2000, iterations: Infinity }
  );
  dom.style.fontSize = "10px";

  domTag.innerText = "电流";
  domTag.style.fontSize = "0.1rem";
  domTag.style.backgroundColor = "rgba(0,0,0,.5)";
  domTag.style.padding = "5px";
  domTag.style.borderRadius = "2px";
  nextTick(() => {
    domTag.style.transform = domTag.style.transform + "scale(" + 0.5 + ")";
  });

  //   setInterval(() => {
  //     console.log(dom.style.color);

  //     // if(dom.style.color=='rgb(32, 174, 197)'){
  //     //     dom.style.color='#fff'
  //     // }else{
  //     //     dom.style.color='#20aec5'
  //     // }

  //         //   swiper1.swipering();
  //         //   swiper2.swipering();
  //         }, 1000);
  //   dom.style.animation= 'redstarton 2s infinite'
  // dom.innerText = "红色正方体";
  const iDomCss3 = new CSS3DObject(dom);
  const iTagDomCss3 = new CSS3DObject(domTag);

  //   iDomCss3.scale.set(0.08, 0.08, 0.08);
  //   iDomCss3.position.set(100, 100, 50);
  //   iDomCss3.translateX(100);
  //   iDomCss3.translateY(100);
  //   iDomCss3.translateZ(30);
  // iDomCss3.rotateX(-Math.PI * 0.15);

  // const geometry = new THREE.ConeGeometry(10, 10);
  // geometry.translate(0, 0, 0);
  // var material = new THREE.MeshLambertMaterial(material); //材质对象Material
  // const mesh = new THREE.Mesh(geometry, material);
  //   mesh.translateZ(50);
  // mesh.add(iDomCss3);
  // mesh.add(iTagDomCss3);
  // 相对父对象局部坐标原点偏移80,刚好标注在圆锥顶部
  //   iDomCss3.position.y += 80;
  iDomCss3.position.z += 2;
  iTagDomCss3.position.z += 2;
  iTagDomCss3.position.y += 20;
  cssThreeObj.cssScene.add(iDomCss3);
  cssThreeObj.cssScene.add(iTagDomCss3);
}
/**
 * @函数功能:
 * @param {*} cssThreeObj 传入css画布对象
 * @param {*} item  接口获取的每一个传感器
 * @param {*} position 传感器位置
 * @param {*} icon 传感器图标
 * @出口参数:
 * @函数备注:
 */
function setIconDom(cssThreeObj, item, position, icon, size) {
  const dom = document.createElement("i");
  dom.className = "iconfont icon-blue iconSize icon-dianliu";
  dom.className = `iconfont ${
    item.status ? "icon-blue" : "icon-red"
  } iconSize ${icon}`;
  if (item.status) {
    dom.animate(
      [{ color: "#91CC75" }, { color: "#fff" }, { color: "#91CC75" }],
      { duration: 2000, iterations: Infinity }
    );
  } else {
    dom.animate(
      [{ color: "#EE6666" }, { color: "#fff" }, { color: "#EE6666" }],
      { duration: 2000, iterations: Infinity }
    );
  }
  if (size >= 10) {
    dom.style.fontSize = size + "px";
    var geometry = new THREE.BoxGeometry(size, size, size);
    //   nextTick(() => {
    //     dom.style.transform = dom.style.transform + "scale(" + 0.1 + ")";
    //     console.log(dom.style.transform);

    // });
  } else {
    dom.style.fontSize = "10px";
    var geometry = new THREE.BoxGeometry(size, size, size);
  }

  const iDomIcon = new CSS3DObject(dom);
  iDomIcon.position.x = 0;
  iDomIcon.position.y = 0;
  iDomIcon.position.z = 0;
  //创建一个立方体几何对象Geometry
  var material = new THREE.MeshLambertMaterial(MaterialObj); //材质对象Material
  var mesh = new THREE.Mesh(geometry, material);

  mesh.position.x = position.x;
  mesh.position.y = position.y;
  mesh.position.z = 1;

  mesh.devId = item.id;
  mesh.devName = item.name;
  mesh.devStatus = item.status;
  // mesh.visible = true;
  mesh.add(iDomIcon);

  cssThreeObj.cssScene.add(mesh);
  if (size <= 10) {
    nextTick(() => {
      dom.style.transform = dom.style.transform + "scale(" + size * 0.1 + ")";
    });
  }
}
/**
 * @函数功能:
 * @param {*} cssThreeObj 传入css画布对象
 * @出口参数:
 * @函数备注:
 */
function setTipDom(cssThreeObj) {
  const domTag = document.createElement("div");
  domTag.setAttribute("id2", "tipId");
  // domTag.innerText='电流'
  domTag.style.fontSize = "0.1rem";
  domTag.style.backgroundColor = "rgba(0,0,0,.5)";
  domTag.style.padding = "5px";
  domTag.style.borderRadius = "2px";
  domTag.style.color = "#fff";
  nextTick(() => {
    domTag.style.transform = domTag.style.transform + "scale(" + 0.5 + ")";
  });
  const iTagDomCss3 = new CSS3DObject(domTag);
  iTagDomCss3.position.z = 2;
  iTagDomCss3.position.y = 9999;
  cssThreeObj.cssScene.add(iTagDomCss3);
  saveTipDom = iTagDomCss3;
}
/**
 * @函数功能: 加载图片
 * @param {*} url 地图路径
 * @出口参数:
 * @函数备注:
 */
function loadImage(url, ThreeObj) {
  new THREE.TextureLoader().load(url, (texture) => {
    const SIZE = 1000;
    const img = texture.image;
    let height = (img && img.height) || SIZE;
    let width = (img && img.width) || SIZE;
    height = (SIZE / width) * height;
    width = SIZE;
    const mat = new THREE.MeshBasicMaterial({
      map: texture,
      side: THREE.DoubleSide,
      transparent: true,
    });
    const geom = new THREE.PlaneGeometry(width, height);
    const mesh = new THREE.Mesh(geom, mat);

    ThreeObj.scene.add(mesh);
    ThreeObj.renderer.render(ThreeObj.scene, ThreeObj.camera); //执行渲染操作
  });
}
// /**
//  * @函数功能: 监听鼠标点击事件
//  * @param {*} event
//  * @出口参数:
//  * @函数备注:
//  */
// function onDocumentMouseUp(e,ThreeObj) {
//     console.log(e);

//     e.preventDefault();

//     var mouse3D = getMousePosition(e.clientX, e.clientY,ThreeObj);
//     console.log(mouse3D.x + ' ' + mouse3D.y + ' ' + mouse3D.z);
// }
// function getMousePosition(clientX, clientY,ThreeObj) {
//     var mouse2D = new THREE.Vector3();
//     var mouse3D = new THREE.Vector3();
//     const projector = new Projector();
//     mouse2D.x = (clientX / window.innerWidth) * 2 - 1;
//     mouse2D.y = -(clientY / window.innerHeight) * 2 + 1;
//     mouse2D.z = 0.5;
//     mouse3D = projector.unprojectVector(mouse2D.clone(), ThreeObj.camera);
//     return mouse3D;

// }
function render(obj, cssThreeObj) {
  cssThreeObj.cssRender.render(cssThreeObj.cssScene, obj.camera);
  obj.renderer.render(obj.scene, obj.camera); //执行渲染操作

  //   requestAnimationFrame(render(ThreeObj,cssThreeObj));
}
function animate() {
  render(ThreeObj, cssThreeObj);
  // setTimeout(()=>{
  requestAnimationFrame(animate);
  // },16)
}
/**
 * @函数功能: 将异步加载出的mesh添加监听时间
 * @param {*} cssThreeObj htmldom画布对象
 * @param {*} ThreeObj  three创建的画布对象
 * @出口参数:
 * @函数备注:
 */
function sethoveMesh(cssThreeObj, ThreeObj) {
  //异步执行后要将渲染出来的mesh模型添加移入实践
  for (let i = 0; i < cssThreeObj.cssScene.children.length; i++) {
    if (cssThreeObj.cssScene.children[i].isMesh) {
      objects.push(cssThreeObj.cssScene.children[i]);
    }
  }
  dragControls = new DragControls(
    objects,
    ThreeObj.camera,
    cssThreeObj.cssRender.domElement
  );
  // dragControls.removeEventListener("hoveron",function (event) {
  //   console.log(event);

  //   saveTipDom.element.innerHTML = `${event.object.devName}:${
  //     event.object.devStatus ? "在线" : "离线"
  //   }`;
  //   saveTipDom.position.x = event.object.position.x;
  //   saveTipDom.position.y = event.object.position.y + 20;
  //   saveTipDom.visible = true;
  // })
  dragControls.addEventListener("hoveron", function (event) {
    
    saveTipDom.element.innerHTML = `${event.object.devName}:${
      event.object.devStatus ? t('messages.onLine') : t('messages.offline')
    }`;
    saveTipDom.position.x = event.object.position.x;
    saveTipDom.position.y = event.object.position.y + 20;
    saveTipDom.visible = true;
  });
  //   dragControls.removeEventListener("hoveroff", function (event) {
  //   console.log(event);
  //   saveTipDom.position.x = 0;
  //   saveTipDom.position.y = 9999;
  //   saveTipDom.visible = false;
  // });
  dragControls.addEventListener("hoveroff", function (event) {
    saveTipDom.position.x = 0;
    saveTipDom.position.y = 9999;
    saveTipDom.visible = false;
  });
}
/**
 * @函数功能: 获取点击地图坐标
 * @param {*} x 屏幕坐标x
 * @param {*} y 屏幕坐标y
 * @出口参数:
 * @函数备注:
 */
function getclickMap(x, y) {
  var vector = new THREE.Vector3(); //三维坐标对象
  vector.set(
    (x / map.value.clientWidth) * 2 - 1,
    -(y / map.value.clientHeight) * 2 + 1,
    0.5
  );
  vector.unproject(ThreeObj.camera);

  var raycasterMap = new THREE.Raycaster(
    ThreeObj.camera.position,
    vector.sub(ThreeObj.camera.position).normalize()
  );
  var intersectsMap = raycasterMap.intersectObjects(ThreeObj.scene.children);
  if (intersectsMap.length > 0) {
    var selected = intersectsMap[0]; //取第一个物体
    console.log("x坐标:" + selected.point.x);
    console.log("y坐标:" + selected.point.y);
    console.log("z坐标:" + selected.point.z);
  }
}
/**
 * @函数功能: 点击地图跳转对应大屏
 * @param {*} px 屏幕坐标x
 * @param {*} py 屏幕坐标y
 * @出口参数:
 * @函数备注:
 */
function goPage(px, py) {
  //屏幕坐标px、py转标准设备坐标x、y
  //width、height表示canvas画布宽高度
  const x = (px / map.value.clientWidth) * 2 - 1;
  const y = -(py / map.value.clientHeight) * 2 + 1;

  raycaster.setFromCamera(new THREE.Vector2(x, y), ThreeObj.camera);
  const intersects = raycaster.intersectObjects(ThreeObj.scene.children, true);
  routeDataSet.forEach((res) => {
    if (intersects[0].object.id2 == res.id) {
      storeMechanics.changePage(res.router);
      router.push({
        name: "Mechanicschild",
        params: {
          id: res.router,
        },
      });
    }
  });
}
onMounted(() => {
  console.log(store.iconList);
  
  //初始化场景
  ThreeObj = initThree(map.value.clientHeight, map.value.clientWidth);
  cssThreeObj = initCss3DScene(map.value.clientHeight, map.value.clientWidth);
  setTipDom(cssThreeObj);
  //添加控制场景元素
  cssThreeObj["controls"] = new OrbitControls(
    ThreeObj.camera,
    cssThreeObj.cssRender.domElement
  );
  ThreeObj["controls"] = new OrbitControls(
    ThreeObj.camera,
    ThreeObj.renderer.domElement
  );
  cssThreeObj["controls"].mouseButtons = {
    LEFT: THREE.MOUSE.PAN,
    MIDDLE: THREE.MOUSE.DOLLY,
    // RIGHT: THREE.MOUSE.PAN
  };
  ThreeObj["controls"].mouseButtons = {
    LEFT: THREE.MOUSE.PAN,
    MIDDLE: THREE.MOUSE.DOLLY,
    // RIGHT: THREE.MOUSE.PAN
  };
  //监听鼠标事件
  ThreeObj.controls.addEventListener("change", () => {
    ThreeObj.renderer.render(ThreeObj.scene, ThreeObj.camera);
    cssThreeObj.cssRender.render(cssThreeObj.cssScene, ThreeObj.camera);
  });
  cssThreeObj.controls.addEventListener("change", () => {
    ThreeObj.renderer.render(ThreeObj.scene, ThreeObj.camera);
    cssThreeObj.cssRender.render(cssThreeObj.cssScene, ThreeObj.camera);
  });
  //添加物品
  routeDataSet.forEach((res) => {
    ThreeObj.scene.add(
      setMesh(res.size, res.MaterialObj, res.id, res.position)
    );
  });

  //初始化地图数据
  loadImage(mapPng, ThreeObj);

  document.getElementsByClassName("cssrender")[0].addEventListener(
    "click",
    (e: any) => {
      index++;
      const px = e.offsetX;
      const py = e.offsetY;

      //点击获取坐标系
      getclickMap(px, py);
      //页面跳转
      goPage(px, py);
      // onDocumentMouseUp(e,ThreeObj)
    },
    false
  );

  //渲染场景

  animate();
});
onUnmounted(() => {
  document.getElementsByClassName("cssrender")[0].remove();
});
</script>

<style module>
.threemap {
  /* width: 100%;
  height: 100%; */
  display: flex;
  background-color: #aaa;
}
</style>
<style scoped>
@import url("@/assets/css/iconfont.css");
.icon-blue {
  color: #20aec5;
  animation: redstarton 2s infinite;
  /* position: relative; */
  /* top: -15px; */
}
.iconSize {
  font-size: 1.2rem;
  /* color: #fff; */
}
@keyframes redstarton {
  0% {
  }
  50% {
    /* text-shadow: #fff 1px 0 5px; */
    color: #10606c;
  }
  100% {
  }
}
</style>
