<template>
    <div>
      <div id="viewPort" :style="{height: containerHeight,width: containerWidth}"></div>
      <div ref="modelProcess" style="position: absolute;top: 10px;left: 2px;color: white">正在加载模型0%</div>
      <div style="display: none">
        <audio controls loop id="alarm">
          <source src="./libs/alarm.mp3" type="audio/mpeg">
        </audio>
        <audio controls id="clash">
          <source src="./libs/alarm.mp3" type="audio/mpeg">
        </audio>
      </div>
      <el-button style="position: fixed;bottom: 1%;left: 1%;font-size: 24px;color:#ffffff" icon="el-icon-video-pause" type="text" v-if="!isMove" @click="changeStatus(true)"></el-button>
      <el-button style="position: fixed;bottom: 1%;left: 1%;font-size: 24px;color:#ffffff" icon="el-icon-video-play" type="text" v-else @click="changeStatus(false)"></el-button>
<!--      <div>-->
<!--        <div class="laber_name" id="laber_name">-->
<!--          <div style="text-align: center">{{robotInfo.name}}属性信息</div>-->
<!--          <div style="margin-top: 5px;margin-bottom: 5px">运行速度：{{robotInfo.speed}}%</div>-->
<!--          <span>关节数据：</span>-->
<!--          <table style="table-layout:fixed;font-size: 14px;border-color: white!important;color: white!important; border-collapse:collapse;"  border="1 solid black" width="100%">-->
<!--            <tr style="height: 22px;text-align: center;">-->
<!--              <td colspan="30" rowspan="1">J1</td>-->
<!--              <td colspan="30" rowspan="1">J2</td>-->
<!--              <td colspan="30" rowspan="1">J3</td>-->
<!--              <td colspan="30" rowspan="1">J4</td>-->
<!--              <td colspan="30" rowspan="1">J5</td>-->
<!--              <td colspan="30" rowspan="1">J6</td>-->
<!--            </tr>-->
<!--            <tr style="height: 22px">-->
<!--              <td colspan="30" rowspan="1" style="text-align: center;">{{robotInfo.joint['J1']}}</td>-->
<!--              <td colspan="30" rowspan="1" style="text-align: center;">{{robotInfo.joint['J2']}}</td>-->
<!--              <td colspan="30" rowspan="1" style="text-align: center;">{{robotInfo.joint['J3']}}</td>-->
<!--              <td colspan="30" rowspan="1" style="text-align: center;">{{robotInfo.joint['J4']}}</td>-->
<!--              <td colspan="30" rowspan="1" style="text-align: center;">{{robotInfo.joint['J5']}}</td>-->
<!--              <td colspan="30" rowspan="1" style="text-align: center;">{{robotInfo.joint['J6']}}</td>-->
<!--            </tr>-->
<!--          </table>-->
<!--          <div style="margin-top: 5px">位置信息：</div>-->
<!--          <table style="table-layout:fixed;font-size: 14px;border-color: white!important;color: white!important; border-collapse:collapse;"  border="1 solid black" width="100%">-->
<!--            <tr style="height: 22px;text-align: center;">-->
<!--              <td colspan="30" rowspan="1">tx</td>-->
<!--              <td colspan="30" rowspan="1">ty</td>-->
<!--              <td colspan="30" rowspan="1">tz</td>-->
<!--              <td colspan="30" rowspan="1">rx</td>-->
<!--              <td colspan="30" rowspan="1">ry</td>-->
<!--              <td colspan="30" rowspan="1">rz</td>-->
<!--            </tr>-->
<!--            <tr style="height: 22px">-->
<!--              <td colspan="30" rowspan="1" style="text-align: center;">{{robotInfo.tcp['tx']}}</td>-->
<!--              <td colspan="30" rowspan="1" style="text-align: center;">{{robotInfo.tcp['ty']}}</td>-->
<!--              <td colspan="30" rowspan="1" style="text-align: center;">{{robotInfo.tcp['tz']}}</td>-->
<!--              <td colspan="30" rowspan="1" style="text-align: center;">{{robotInfo.tcp['rx']}}</td>-->
<!--              <td colspan="30" rowspan="1" style="text-align: center;">{{robotInfo.tcp['ry']}}</td>-->
<!--              <td colspan="30" rowspan="1" style="text-align: center;">{{robotInfo.tcp['rz']}}</td>-->
<!--            </tr>-->
<!--          </table>-->
<!--          <div style="margin-top: 5px">报警信息：</div>-->
<!--          <table style="table-layout:fixed;font-size: 14px;border-color: white!important;color: white!important; border-collapse:collapse;"  border="1 solid black" width="100%">-->
<!--            <tr style="height: 22px;text-align: center;">-->
<!--              <td colspan="25" rowspan="1">类型</td>-->
<!--              <td colspan="70" rowspan="1">内容</td>-->
<!--              <td colspan="55" rowspan="1">时间</td>-->
<!--            </tr>-->
<!--            <tr style="height: 22px">-->
<!--              <td colspan="25" rowspan="1" style="text-align: center;">{{robotInfo.alarm[0].SeverityMessage}}</td>-->
<!--              <td colspan="70" rowspan="1" style="text-align: center;overflow: hidden; white-space: nowrap; text-overflow: ellipsis;width:100%;">{{robotInfo.alarm[0].AlarmMessage}}</td>-->
<!--              <td colspan="55" rowspan="1" style="text-align: center;">{{robotInfo.alarm[0].Time}}</td>-->
<!--            </tr>-->
<!--            <tr style="height: 22px">-->
<!--              <td colspan="25" rowspan="1" style="text-align: center;">{{robotInfo.alarm[1].SeverityMessage}}</td>-->
<!--              <td colspan="70" rowspan="1" style="text-align: center;overflow: hidden; white-space: nowrap; text-overflow: ellipsis;width:100%;">{{robotInfo.alarm[1].AlarmMessage}}</td>-->
<!--              <td colspan="55" rowspan="1" style="text-align: center;">{{robotInfo.alarm[1].Time}}</td>-->
<!--            </tr>-->
<!--            <tr style="height: 22px">-->
<!--              <td colspan="25" rowspan="1" style="text-align: center;">{{robotInfo.alarm[2].SeverityMessage}}</td>-->
<!--              <td colspan="70" rowspan="1" style="text-align: center;overflow: hidden; white-space: nowrap; text-overflow: ellipsis;width:100%;">{{robotInfo.alarm[2].AlarmMessage}}</td>-->
<!--              <td colspan="55" rowspan="1" style="text-align: center;">{{robotInfo.alarm[2].Time}}</td>-->
<!--            </tr>-->
<!--          </table>-->
<!--&lt;!&ndash;          <div style="width: 300px">{{robotInfo.alarm[0].SeverityMessage}} {{robotInfo.alarm[0].Time}} {{robotInfo.alarm[0].AlarmMessage}} </div>&ndash;&gt;-->
<!--&lt;!&ndash;          <div style="width: 300px">{{robotInfo.alarm[1].SeverityMessage}} {{robotInfo.alarm[1].Time}} {{robotInfo.alarm[1].AlarmMessage}} </div>&ndash;&gt;-->
<!--&lt;!&ndash;          <div style="width: 300px">{{robotInfo.alarm[2].SeverityMessage}} {{robotInfo.alarm[2].Time}} {{robotInfo.alarm[2].AlarmMessage}} </div>&ndash;&gt;-->
<!--        </div>-->
<!--      </div>-->
      <!--      <div class="viewOperationParent" id="viewOperationParent">-->
      <!--        <div style="display:inline;text-align: center;background: #074492" id="viewOperationChild">-->
      <!--          <div style="text-align: center">-->
      <!--            &lt;!&ndash;            <el-checkbox v-model="checked" style="margin-right: 5px;color: #fff">设定</el-checkbox>&ndash;&gt;-->
      <!--            <el-button v-for="(item, index) in cameraData" :id="'cameraViewBtn' + item.焦点代码" :key=index style="height: 36px;white-space:normal;">{{ item.焦点说明 }}</el-button>-->
      <!--            <button id="setView" style="width: 20px;height: 20px;padding: 0;margin: 0;background: transparent;border: none;cursor: pointer;"></button>-->
      <!--          </div>-->
      <!--        </div>-->
      <!--      </div>-->
    </div>
</template>

<script>
import * as THREE from 'three'
import axios from 'axios'
import $ from 'jquery'
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'
import { TWEEN } from 'three/examples/jsm/libs/tween.module.min.js'
import { CSS2DRenderer, CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js'

import { DmtControl } from './libs/DmtControl.js'
import { connect } from './js/websocketConnect.js'
import { connectMqtt } from './js/MqttConnect.js'
import { PlaySoundCommand } from './js/PlaySoundCommand.js'

// eslint-disable-next-line no-unused-vars
const labelRenderer = new CSS2DRenderer()
const pointLabel = null
// eslint-disable-next-line no-unused-vars
let container, clock, scene, camera, axesHelper, renderer, Plane
let modelCount = 0
let updateCameraStateTimer = null
// let isMove = true
let opName = ''
const BasicPath = './DMT_WEB/models-LG'
const BasicPathModel = './DMT_WEB/models-LG/'
// const loader = new GLTFLoader().setPath('./DMT_WEB/models/')
const editor = {
  robotInfo: {
    'B3FD789E-E018-4006-91AD-4824830E6557': {
      joint: {
        'J1': 999.99,
        'J2': 999.99,
        'J3': 999.99,
        'J4': 999.99,
        'J5': 999.99,
        'J6': 999.99
      },
      tcp: {
        'tx': 999.99,
        'ty': 999.99,
        'tz': 999.99,
        'rx': 999.99,
        'ry': 999.99,
        'rz': 999.99
      },
      speed: 100,
      alarm: [
        {
          'AlarmID': 2,
          'AlarmNumber': 78,
          'CauseAlarmID': 0,
          'CauseAlarmNumber': 0,
          'Severity': 0,
          'Time': '2020-03-12T15:34:18',
          'AlarmMessage': 'FILE-078 ﾗﾔｶｯｱｸｷﾝﾍ?ﾉ',
          'CauseAlarmMessage': '',
          'SeverityMessage': 'WARN'
        },
        {
          'AlarmID': 2,
          'AlarmNumber': 77,
          'CauseAlarmID': 0,
          'CauseAlarmNumber': 0,
          'Severity': 0,
          'Time': '2020-03-12T15:30:12',
          'AlarmMessage': 'FILE-077 ﾗﾔｶｯｱｸｷﾝｿｪﾊｼ (FRA:\\)',
          'CauseAlarmMessage': '',
          'SeverityMessage': 'WARN'
        },
        {
          'AlarmID': 76,
          'AlarmNumber': 125,
          'CauseAlarmID': 0,
          'CauseAlarmNumber': 0,
          'Severity': 34,
          'Time': '2020-03-12T15:27:06',
          'AlarmMessage': 'DNET-125 ｴﾓｶｯﾖ眞ｬｽﾓﾏﾐﾖﾃ: Bd 2',
          'CauseAlarmMessage': '',
          'SeverityMessage': 'PAUSE.G'
        }
      ]
    },
    'A769F461-4011-46A4-BBC2-2AFB39EFD9C2': {
      joint: {
        'J1': 888.88,
        'J2': 888.88,
        'J3': 888.88,
        'J4': 888.88,
        'J5': 888.88,
        'J6': 888.88
      },
      tcp: {
        'tx': 888.88,
        'ty': 888.88,
        'tz': 888.88,
        'rx': 888.88,
        'ry': 888.88,
        'rz': 888.88
      },
      speed: 99,
      alarm: [
        {
          'AlarmID': 2,
          'AlarmNumber': 78,
          'CauseAlarmID': 0,
          'CauseAlarmNumber': 0,
          'Severity': 0,
          'Time': '2020-03-12T15:34:18',
          'AlarmMessage': 'FILE-078 ﾗﾔｶｯｱｸｷﾝﾍ?ﾉ',
          'CauseAlarmMessage': '',
          'SeverityMessage': 'WARN'
        },
        {
          'AlarmID': 2,
          'AlarmNumber': 77,
          'CauseAlarmID': 0,
          'CauseAlarmNumber': 0,
          'Severity': 0,
          'Time': '2020-03-12T15:30:12',
          'AlarmMessage': 'FILE-077 ﾗﾔｶｯｱｸｷﾝｿｪﾊｼ (FRA:\\)',
          'CauseAlarmMessage': '',
          'SeverityMessage': 'WARN'
        },
        {
          'AlarmID': 76,
          'AlarmNumber': 125,
          'CauseAlarmID': 0,
          'CauseAlarmNumber': 0,
          'Severity': 34,
          'Time': '2020-03-12T15:27:06',
          'AlarmMessage': 'DNET-125 ｴﾓｶｯﾖ眞ｬｽﾓﾏﾐﾖﾃ: Bd 2',
          'CauseAlarmMessage': '',
          'SeverityMessage': 'PAUSE.G'
        }
      ]
    },
    '04A6D8F9-7019-4C92-8845-B3CFDDF4A433': {
      joint: {
        'J1': 777.77,
        'J2': 777.77,
        'J3': 777.77,
        'J4': 777.77,
        'J5': 777.77,
        'J6': 777.77
      },
      tcp: {
        'tx': 777.77,
        'ty': 777.77,
        'tz': 777.77,
        'rx': 777.77,
        'ry': 777.77,
        'rz': 777.77
      },
      speed: 98,
      alarm: [
        {
          'AlarmID': 2,
          'AlarmNumber': 78,
          'CauseAlarmID': 0,
          'CauseAlarmNumber': 0,
          'Severity': 0,
          'Time': '2020-03-12T15:34:18',
          'AlarmMessage': 'FILE-078 ﾗﾔｶｯｱｸｷﾝﾍ?ﾉ',
          'CauseAlarmMessage': '',
          'SeverityMessage': 'WARN'
        },
        {
          'AlarmID': 2,
          'AlarmNumber': 77,
          'CauseAlarmID': 0,
          'CauseAlarmNumber': 0,
          'Severity': 0,
          'Time': '2020-03-12T15:30:12',
          'AlarmMessage': 'FILE-077 ﾗﾔｶｯｱｸｷﾝｿｪﾊｼ (FRA:\\)',
          'CauseAlarmMessage': '',
          'SeverityMessage': 'WARN'
        },
        {
          'AlarmID': 76,
          'AlarmNumber': 125,
          'CauseAlarmID': 0,
          'CauseAlarmNumber': 0,
          'Severity': 34,
          'Time': '2020-03-12T15:27:06',
          'AlarmMessage': 'DNET-125 ｴﾓｶｯﾖ眞ｬｽﾓﾏﾐﾖﾃ: Bd 2',
          'CauseAlarmMessage': '',
          'SeverityMessage': 'PAUSE.G'
        }
      ]
    },
    'B2BF5C42-B6ED-46D8-A7C3-046968D39805': {
      joint: {
        'J1': 666.66,
        'J2': 666.66,
        'J3': 666.66,
        'J4': 666.66,
        'J5': 666.66,
        'J6': 666.66
      },
      tcp: {
        'tx': 666.66,
        'ty': 666.66,
        'tz': 666.66,
        'rx': 666.66,
        'ry': 666.66,
        'rz': 666.66
      },
      speed: 97,
      alarm: [
        {
          'AlarmID': 2,
          'AlarmNumber': 78,
          'CauseAlarmID': 0,
          'CauseAlarmNumber': 0,
          'Severity': 0,
          'Time': '2020-03-12T15:34:18',
          'AlarmMessage': 'FILE-078 ﾗﾔｶｯｱｸｷﾝﾍ?ﾉ',
          'CauseAlarmMessage': '',
          'SeverityMessage': 'WARN'
        },
        {
          'AlarmID': 2,
          'AlarmNumber': 77,
          'CauseAlarmID': 0,
          'CauseAlarmNumber': 0,
          'Severity': 0,
          'Time': '2020-03-12T15:30:12',
          'AlarmMessage': 'FILE-077 ﾗﾔｶｯｱｸｷﾝｿｪﾊｼ (FRA:\\)',
          'CauseAlarmMessage': '',
          'SeverityMessage': 'WARN'
        },
        {
          'AlarmID': 76,
          'AlarmNumber': 125,
          'CauseAlarmID': 0,
          'CauseAlarmNumber': 0,
          'Severity': 34,
          'Time': '2020-03-12T15:27:06',
          'AlarmMessage': 'DNET-125 ｴﾓｶｯﾖ眞ｬｽﾓﾏﾐﾖﾃ: Bd 2',
          'CauseAlarmMessage': '',
          'SeverityMessage': 'PAUSE.G'
        }
      ]
    }
  },
  showTagList: [{
    title: '工件：QY16KC',
    ModelId: 'A113AD62-9CE7-4ACF-8D0C-8E8A597A8768',
    object: null
  }],
  ip: '',
  WeldLight1: '',
  WeldLightVisible1: false,
  WeldLight2: '',
  WeldLightVisible2: false,
  scene: null,
  objectIdUUidMap: new Map(),
  opname: '',
  connectType: 1,
  BSport: '',
  IsAllowConnect: true,
  service: axios.create({
    baseURL: './submit/MESCommonBase.ashx',
    timeout: 1500000 // 请求超时时间
  }),
  selected: null,
  socket: null,
  mqttClient: {
    connected: false
  },
  ProjectCode: null,
  sceneConfig: null,
  resourcesTree: null,
  attachments: null,
  resources: null,
  cameraState: null,
  cameraStateAll: [],
  isOk: false,
  objectIdSet: new Map(),
  animOperations: null,
  CraftList: {},
  moveTrigger: null,
  camera: null,
  cameraPosition: 10,
  currentButton: 1,
  cameraControls: null,
  TagActList: {}, // 存放tag对应的类型
  worker: {}, // 播放工艺的线程
  RotationWorker: {}, // 自传工艺的线程
  ModelRotateWorker: {}, // 自传工艺的的状态数据
  rotateSpeed: 5 * Math.PI / 180,
  getObjectById: null, // 方法 根据ModelId获取模型
  solveAttachModel: null, // 方法 处理attach问题
  removeObject: null, // 方法 移除模型
  setModelWireFrame: null, // 方法 设置线框
  setTransparent: null, // 方法 设置透明
  showMessage: null, // 方法 显示消息
  playSoundCommand: new PlaySoundCommand(), //  方法 警告
  attachList: new Map(), // 记录attach列表
  objMaterial: new Map(),
  WareHouseList: [],
  WareHouse: new Map(), // 立库库存表
  WareHouseBasicModel: new Map(), // 立库库存基础 零件模型需要命名为warehousepart1-100 立库定位模型需要命名为warehouse1000-1009
  ProtocolIdentifiers: {
    Robot_7: 'Robot_7',
    Device_3: 'Device_3',
    Agv_3: 'Agv_3',
    Device_1: 'Device_1',
    FirstPosition: 'FirstPosition',
    WareHousePart: 'WareHousePart',
    Robot_6: 'Robot_6',
    RobotTcp: 'RobotTcp',
    DrawPath: 'DrawPath',
    ReLoadData: 'ReLoadData',
    PlayAct: 'PlayAct',
    CraftCurrOperation: 'CraftCurrOperation',
    Position: 'Position',
    Select: 'Select',
    DragMove: 'DragMove',
    ModelTransparent: 'ModelTransparent',
    Visible: 'Visible',
    Frames: 'Frames',
    ModelRotation: 'ModelRotation',
    GoHome: 'GoHome',
    GetJointAxisInfo: 'GetJointAxisInfo',
    GetDeviceBaseTool: 'GetDeviceBaseTool',
    GetJointValue: 'GetJointValue',
    C_B_ImportModel: 'C_B_ImportModel',
    SendURDF: 'SendURDF',
    SendDeviceJson: 'SendDeviceJson',
    GetDeviceJson: 'GetDeviceJson',
    SendMotionInfo: 'SendMotionInfo',
    C_B_ImportLayout: 'C_B_ImportLayout',
    GetPoseLocation: 'GetPoseLocation',
    C_B_SetProjectCode: 'C_B_SetProjectCode',
    C_B_TagIDTrigger: 'C_B_TagIDTrigger',
    C_B_ReLoad_TagIDHandler: 'C_B_ReLoad_TagIDHandler',
    C_B_SetCurrSignalList: 'C_B_SetCurrSignalList',
    SendClearModelInfo: 'SendClearModelInfo',
    C_B_SaveProjectSimulationData: 'C_B_SaveProjectSimulationData',
    C_B_GetProjectSimulationData: 'C_B_GetProjectSimulationData',
    C_B_KinematicsEditing: 'C_B_KinematicsEditing',
    C_B_SaveModel: 'C_B_SaveModel',
    C_B_ObjectAlarm: 'C_B_ObjectAlarm',
    C_B_JointMoveTo: 'C_B_JointMoveTo',
    JointMoveTo: 'JointMoveTo' // DT|JointMoveTo|modelCode|{"J1":"1","J2":"2","J3":"3","J4":"4","J5":"5","J6":"6","J7":"7","J8":"8","J9":"9"}
  },
  craftPlaySolveType: {
    visible: 'visible',
    rotation: 'rotation',
    craft: 'craft',
    signalwrite: 'signalwrite',
    wait: 'wait',
    FrameData: 'FrameData',
    attach: 'attach',
    warning: 'warning'
  },
  FrameOperation: {
    playCraft: true,
    visibleObject: true,
    rotationObject: true,
    writeSignal: true,
    waitSignal: true,
    attach: true,
    warning: true
  },
  signalSolveType: {
    visible: 'visible',
    rotation: 'rotation',
    craft: 'craft',
    targetLocation: 'targetlocation',
    attach: 'attach',
    warning: 'warning'
  }
}
// eslint-disable-next-line no-unused-vars
let ModelListTransParentList = []
const ModelList = []
const ModelListId = []
// eslint-disable-next-line no-unused-vars
const timer = null
// eslint-disable-next-line no-unused-vars
const lastIntersectModel = null
// eslint-disable-next-line no-unused-vars
const onUpPosition = new THREE.Vector2()

var raycaster = new THREE.Raycaster()
var mouse = new THREE.Vector2()
window.editor = editor
export default {
  name: 'DMT',
  props: {
    containerHeight: String,
    containerWidth: String
  },
  data() {
    return {
      isMove: true,
      checked: false,
      cameraData: [],
      object: null,
      s: null,
      robotInfo: {
        id: '',
        joint: {
          'J1': 999.99,
          'J2': 999.99,
          'J3': 999.99,
          'J4': 999.99,
          'J5': 999.99,
          'J6': 999.99
        },
        tcp: {
          'tx': 999.99,
          'ty': 999.99,
          'tz': 999.99,
          'rx': 999.99,
          'ry': 999.99,
          'rz': 999.99
        },
        speed: 100,
        alarm: [
          {
            'AlarmID': 2,
            'AlarmNumber': 78,
            'CauseAlarmID': 0,
            'CauseAlarmNumber': 0,
            'Severity': 0,
            'Time': '',
            'AlarmMessage': '',
            'CauseAlarmMessage': '',
            'SeverityMessage': ''
          },
          {
            'AlarmID': 2,
            'AlarmNumber': 77,
            'CauseAlarmID': 0,
            'CauseAlarmNumber': 0,
            'Severity': 0,
            'Time': '',
            'AlarmMessage': '',
            'CauseAlarmMessage': '',
            'SeverityMessage': 'WARN'
          },
          {
            'AlarmID': 76,
            'AlarmNumber': 125,
            'CauseAlarmID': 0,
            'CauseAlarmNumber': 0,
            'Severity': 34,
            'Time': '2020-03-12T15:27:06',
            'AlarmMessage': 'DNET-125 ｴﾓｶｯﾖ眞ｬｽﾓﾏﾐﾖﾃ: Bd 2',
            'CauseAlarmMessage': '',
            'SeverityMessage': 'PAUSE.G'
          }
        ],
        name: ''
      }
    }
  },
  mounted() {
    const scope = this
    editor.objectIdSet = new Map()
    editor.objMaterial = new Map()
    editor.attachList = new Map()
    if (pointLabel) {
      scene.remove(pointLabel)
    }
    this.getConfig().then(res => {
      if (Object.hasOwnProperty.call(res, 'robotList')) {
        editor.robotList = res.robotList
      }
      if (Object.hasOwnProperty.call(res, 'WareHouseList')) {
        editor.WareHouseList = res.WareHouseList
      }
      if (Object.hasOwnProperty.call(res, 'transParentList')) {
        ModelListTransParentList = res.transParentList
      }
      if (Object.hasOwnProperty.call(res, 'connectType')) {
        editor.connectType = res.connectType
      }
      editor.mqttHost = res.MQTTHost
      editor.mqttPort = res.MQTTPort
      editor.ip = res.webSocketIp
      editor.opname = res.webSocketOpName
      editor.BSport = res.webSocketBSport
      editor.rootIp = res.NodeRootIp
      this.getProjectConfig()
    })
    editor.showMessage = function(message, type, time = 2000) {
      scope.$message({
        message: message,
        type: type,
        duration: time,
        center: true
      })
    }
    // window.updateLabelInfoJoint = this.updateLabelInfoJoint
  },
  created() {
    const url = window.location.href
    if (url.indexOf('?') !== -1) {
      opName = url.slice(url.indexOf('?') + 1)
    }
  },
  beforeDestroy() {
    clearInterval(updateCameraStateTimer)
  },
  methods: {
    changeStatus(status) {
      this.isMove = status
    },
    getConfig() {
      return new Promise((resolve, reject) => {
        axios.get('./DMT_WEB/config/config.json').then(res => {
          const configData = res.data
          resolve(configData)
        }).catch(err => {
          reject(err)
        })
      })
    },
    /**
       * 获取项目配置文件，用于初始隐藏模型
       */
    getProjectConfig() {
      const P1 = new Promise(function(resolve, reject) {
        axios({
          method: 'get',
          url: opName === '' ? BasicPath + '/DTDATA.json' : BasicPath + '/' + opName + '/DTDATA.json'
        }).then((res) => {
          editor.animOperations = {}
          editor.moveTrigger = {}
          console.log(res.data)
          res.data.forEach(n => {
            Object.keys(n).forEach(function(key) {
              /**
                       * 获取播放数据并解析数据
                       */
              if (key === 'OperationTree') {
                n[key].forEach(CraftData => {
                  editor.CraftList[CraftData.CraftCode] = {}
                  editor.CraftList[CraftData.CraftCode]['CraftName'] = CraftData.CraftName
                  editor.CraftList[CraftData.CraftCode]['Varieties'] = CraftData.Varieties
                  editor.CraftList[CraftData.CraftCode]['CurrPlay'] = CraftData.CurrPlay
                  if (CraftData.CraftPlayData.length < 2 || CraftData.CraftPlayData === '-1' || CraftData.CraftPlayData === -1) {
                    editor.animOperations[CraftData.CraftCode] = ''
                  } else {
                    editor.animOperations[CraftData.CraftCode] = JSON.parse(CraftData.CraftPlayData)
                  }
                  editor.moveTrigger[CraftData.CraftCode] = {
                    moveStatus: 0,
                    myVarSetInterval: null,
                    doAnimation: false,
                    currentFrame: 0,
                    pausedFrame: 0,
                    animOperations: editor.animOperations[CraftData.CraftCode],
                    simPaceTime: 20,
                    moveStatusPosition: 0
                  }
                })
              }
              /**
                       * HandlerType: 1:显隐,2:自转,3行为
                       * HandlerCode: 模型或者工艺代码
                       * HandlerValue: 显隐：0/1 ,自传：正负转速&axis,行为暂停播放：0/1
                       * TagValue:信号值
                       */
              if (key === 'TagTriggerHandler') {
                n[key].forEach(TagActListValue => {
                  if (editor.TagActList[TagActListValue.TagID]) {
                    editor.TagActList[TagActListValue.TagID].push({
                      HandlerType: TagActListValue.HandlerType,
                      HandlerCode: TagActListValue.HandlerCode,
                      HandlerValue: TagActListValue.HandlerValue,
                      TagValue: TagActListValue.TagValue,
                      JointType: TagActListValue.JointType,
                      Axis: TagActListValue.Axis,
                      Flip: TagActListValue.Flip,
                      Value: TagActListValue.Value,
                      ValueFactor: TagActListValue.ValueFactor
                    })
                  } else {
                    editor.TagActList[TagActListValue.TagID] = []
                    editor.TagActList[TagActListValue.TagID].push({
                      HandlerType: TagActListValue.HandlerType,
                      HandlerCode: TagActListValue.HandlerCode,
                      HandlerValue: TagActListValue.HandlerValue,
                      TagValue: TagActListValue.TagValue,
                      JointType: TagActListValue.JointType,
                      Axis: TagActListValue.Axis,
                      Flip: TagActListValue.Flip,
                      Value: TagActListValue.Value,
                      ValueFactor: TagActListValue.ValueFactor
                    })
                  }
                })
              }
              if (key === 'CameraData') {
                n[key].forEach(CameraData => {
                  if (opName === '') {
                    editor.cameraStateAll.push({
                      name: CameraData.explain,
                      cameraDate: JSON.parse(CameraData.data)
                    })
                  } else {
                    if (opName === CameraData.explain) {
                      editor.cameraStateAll.push({
                        name: CameraData.explain,
                        cameraDate: JSON.parse(CameraData.data)
                      })
                    }
                  }
                })
              }
            })
          })
          resolve(1)
        })
      })
      const P2 = new Promise(function(resolve, reject) {
        axios({
          method: 'get',
          // url: './DMT_WEB/models/RobotPlan_Process.json'
          url: opName === '' ? BasicPath + '/RobotPlan_Process.json' : BasicPath + '/' + opName + '/RobotPlan_Process.json'
        }).then((res) => {
          editor.sceneConfig = res.data.sceneConfig // 场景配置
          editor.attachments = res.data.attachments // 附加物体
          editor.resources = res.data.resources // 场景模型资源
          editor.resourcesTree = res.data.resourcesTree // 模型树
          editor.cameraState = res.data.cameraState // 场景相机位置
          editor.ProjectCode = res.data.ProjectCode // 项目代码
          editor.resourcesTree.forEach(res => {
            if (res.treeType === 'OriginModel') {
              ModelList.push(res.name)
            }
          })
          editor.resources.forEach(res => {
            editor.objectIdUUidMap.set(res.id, res)
          })
          editor.attachments.forEach(res => {
            editor.attachList.set(res.RootId, res.attachList)
          })
          if (opName === '') {
            editor.cameraStateAll.unshift({
              name: '总览图',
              cameraDate: res.data.cameraState
            })
          }
          resolve(1)
        }).catch((error) => { console.log(error) })
      })
      Promise.all([P1, P2]).then(res => {
        this.init()
        // this.getCameraData()
      })
    },
    /**
       * 设定模型初始状态
       */
    setModelSates() {
      // 模型的显示隐藏
      editor.resourcesTree.forEach(res => {
        if (res.visible === '0') {
          if (editor.getObjectById(res.id)) {
            editor.getObjectById(res.id).visible = !!(parseInt(res.visible))
          }
        }
      })
      const treeRes = editor.resourcesTree
      for (const treeResValue of treeRes) {
        if (treeResValue.treeType !== 'folder') {
          const currentModel = editor.getObjectById(treeResValue.id)

          if (Object.hasOwnProperty.call(treeResValue, 'WireFrame') && treeResValue.WireFrame) {
            editor.setModelWireFrame(currentModel, true)
          }
          if (Object.hasOwnProperty.call(treeResValue, 'transParent') && treeResValue.transParent) {
            editor.setTransparent(treeResValue.id, 0.3)
          }
          if (currentModel) currentModel.visible = !!parseInt(treeResValue.visible)
        }
      }
    },

    /**
       * 设定场景初始状态
       * @param type
       */
    setSceneStates(type) {
      switch (type) {
        case '0':
          scene.background = new THREE.Color('#dcdcdc')
          break
        case '1':
          scene.background = new THREE.Color(editor.sceneConfig.RenderColorModel.color)
          break
        case '2':
          if (editor.sceneConfig.RenderColorModel.image === '') {
            editor.scene.background = new THREE.Color(editor.sceneConfig.RenderColorModel.color)
            return
          }
          new THREE.TextureLoader().load(editor.sceneConfig.RenderColorModel.image === '', function(texture) {
            scene.background = texture
            texture.dispose()
          })
          break
        default:
          scene.background = new THREE.Color('#dcdcdc')
          break
      }
    },
    /**
       * 初始化场景信息
       */
    init() {
      const scope = this
      container = document.getElementById('viewPort')
      clock = new THREE.Clock()
      scene = new THREE.Scene()
      editor.scene = scene
      // const width = container.clientWidth
      // const height = container.clientHeight
      // const k = width / height
      // const s = 100
      camera = this.initCamera()
      scene.add(camera)
      editor.camera = camera
      axesHelper = new THREE.AxesHelper(1)
      scene.add(axesHelper)

      renderer = new THREE.WebGLRenderer({ antialias: true })
      renderer.setPixelRatio(window.devicePixelRatio)
      renderer.setSize(container.clientWidth, container.clientHeight)
      renderer.setClearColor(0x666666, 0)
      renderer.toneMapping = THREE.ACESFilmicToneMapping
      renderer.toneMappingExposure = 0.8
      renderer.shadowMap.enabled = true
      renderer.hadowMapEnabled = true
      renderer.shadowMap.type = THREE.PCFSoftShadowMap
      renderer.outputEncoding = THREE.sRGBEncoding
      renderer.textureEncoding = THREE.sRGBEncoding

      editor.WeldLight1 = this.drawWeldLight()
      editor.WeldLight2 = this.drawWeldLight()

      const pmremGenerator = new THREE.PMREMGenerator(renderer)
      pmremGenerator.compileEquirectangularShader()
      // const loader = new GLTFLoader().setPath('./DMT_WEB/models/')
      const loader = new GLTFLoader().setPath(opName === '' ? BasicPathModel : BasicPathModel + opName + '/')
      const dracoLoader = new DRACOLoader()
      new RGBELoader().setDataType(THREE.FloatType)
        .load('./DMT_WEB/assets/venice_sunset_1k.hdr', function(texture) {
          const envMap = pmremGenerator.fromEquirectangular(texture).texture
          scene.environment = envMap
          scene.background = new THREE.Color('#081f48')
          texture.dispose()
          pmremGenerator.dispose()
        })
      this.setSceneStates(editor.sceneConfig.RenderColorModel.model)
      dracoLoader.setDecoderPath('./DMT_WEB/draco/')
      loader.setDRACOLoader(dracoLoader)
      this.createLabel()
      editor.getObjectById = function(ModelId) {
        let currentModel = null
        const currentModelData = editor.objectIdSet.get(ModelId)
        if (currentModelData) currentModel = currentModelData.object
        return currentModel
      }
      editor.solveAttachModel = function(ModelId, attach = true) {
        const attachList = editor.attachList
        attachList.forEach(function(value, key) {
          const RootModel = editor.getObjectById(key)
          if (RootModel) {
            for (const attachData of value) {
              const attachModel = editor.getObjectById(attachData.ModelId)
              let parentObject = null
              attachData['ParentId'] ? parentObject = editor.getObjectById(attachData.ParentId) : parentObject = editor.scene
              if (attachModel && parentObject) {
                if (attach) {
                  RootModel.attach(attachModel)
                } else {
                  parentObject.attach(attachModel)
                }
              }
            }
          }
        })
      }
      editor.removeObject = function(object) {
        if (object === null) return
        if (object.parent === null) return
        object.parent.remove(object)
      }
      /**
       * 设置模型线框
       * @param currentObject
       * @param WireframeValue
       */
      editor.setModelWireFrame = function(currentObject, WireframeValue) {
        currentObject.traverse(obj => {
          if (obj instanceof THREE.Mesh) {
            obj.material = editor.objMaterial.get(obj.id).clone()
            obj.material['wireframe'] = WireframeValue
            obj.material.needsUpdate = true
          }
        })
      }

      /**
       * 模型透明
       * @param ModelId
       * @param Opacity 透明度
       */
      editor.setTransparent = function(ModelId, Opacity = 0.3) {
        new Promise((resolve, reject) => {
          const TransModel = editor.getObjectById(ModelId)
          if (!TransModel) {
            console.warn('模型不存在！（setTransparent）')
            reject(false)
          } else {
            TransModel.traverse(obj => {
              if (obj.material) {
                const material_yuan = editor.objMaterial.get(obj.id).clone()
                obj.material = material_yuan
                if (Opacity !== 1) {
                  obj.material = new THREE.MeshStandardMaterial({
                    color: material_yuan.color,
                    side: 2,
                    transparent: true,
                    opacity: Opacity
                  })
                }
              }
            })
            resolve(true)
          }
        })
      }
      container.appendChild(renderer.domElement)
      // container.addEventListener('mousemove', this.onMo50eMove, false)
      // container.addEventListener('dblclick', this.ondblclick, false)

      editor.cameraControls = new DmtControl(editor.camera, renderer.domElement)
      editor.cameraControls.minDistance = 0.1
      editor.cameraControls.maxDistance = 50
      editor.cameraControls.listenToKeyEvents(window) // optional
      editor.cameraControls.update()
      editor.cameraControls.resetState(editor.cameraState.target, editor.cameraState.position, editor.cameraState.zoom0)

      // Viewer(editor)

      const light1 = new THREE.AmbientLight(new THREE.Color('#ffffff'), 1)
      light1.name = 'ambient_light'
      editor.cameraControls.object.add(light1)

      const light2 = new THREE.DirectionalLight(new THREE.Color('#ffffff'), 1)
      light2.position.set(0.5, 0, 0.866) // ~60º
      light2.name = 'main_light'
      editor.cameraControls.object.add(light2)

      // document.getElementById('orientCubeWrapperDiv').style.display = 'none'
      window.addEventListener('resize', this.onWindowResize, false)
      const encoding = THREE.sRGBEncoding
      // editor.cameraControls.resetState(editor.cameraState.target, editor.cameraState.position, editor.cameraState.zoom0)

      // // 加载立库的特殊写法
      // for (let i = 0; i < editor.WareHouseList.length; i++) {
      //   loader.load('wh/' + editor.WareHouseList[i] + '.glb', (result) => {
      //     const scene = result.scene.children[0]
      //     scene.traverse(child => {
      //       if (child['material']) {
      //         const nm = new THREE.MeshPhysicalMaterial({
      //           metalness: 1.0, roughness: 0.5, clearcoat: 1, clearcoatRoughness: 0, side: 2, emissive: new THREE.Color(0, 0, 0), flatShading: false
      //         })
      //         child['material'].map ? nm.map = child['material'].map.clone() : nm.map = null
      //         nm.color = child['material'].color.clone()
      //         child.material = nm
      //       }
      //     })
      //     const modelInfo = scene
      //     // 立库定位点
      //     if (scene.name.indexOf('part') === -1) {
      //       scene.traverse(child => {
      //         modelInfo[child.name] = child
      //       })
      //       editor.scene.add(scene)
      //     }
      //     editor.WareHouseBasicModel.set(scene.name, modelInfo)
      //     result = null
      //   }, (xhr) => {
      //   }, (error) => {
      //     console.log(error.toString())
      //   })
      // }
      // 加载模型
      for (let i = 0; i < ModelList.length; i++) {
        loader.load(ModelList[i] + '.glb', function(gltf) {
          const currentModel = gltf.scene.children[0]
          if (currentModel.name === 'Plane') {
            Plane = currentModel
          }
          currentModel.traverse(child => {
            if (child['material']) {
              child['material'].metalness = 1
              if (child['material'].map) child['material'].map.encoding = encoding
              if (child['material'].emissiveMap) child['material'].emissiveMap.encoding = encoding
              if (child['material'].map || child['material'].emissiveMap) child['material'].needsUpdate = true
              editor.objMaterial.set(child.id, child['material'])
            }
          })
          scene.add(currentModel)
          scope.setObjectByConfig(currentModel)
          ModelListId.push(gltf.scene.id)
          modelCount += 1
          scope.$refs.modelProcess.innerText = '正在加载模型' + (modelCount / ModelList.length * 100).toFixed(2) + '%'
          if (modelCount === ModelList.length) {
            scope.$refs.modelProcess.style.display = 'none'
            scope.lookObject(scene)
            scope.setModelSates()
            scope.connectService()
          }
        }, (xhr) => {
          // eslint-disable-next-line handle-callback-err
        }, (error) => {
          modelCount += 1
          console.log(`加载模型${ModelList[i].ModelName}出错!`)
          if (modelCount === ModelList.length) {
            scope.$refs.modelProcess.style.display = 'none'
            scope.lookObject(scene)
            scope.setModelSates()
            scope.connectService()
          }
        })
      }
      this.animate()
      // pointLabel = new CSS2DObject($('#laber_name')[0])
      // pointLabel.visible = false
      // scene.add(pointLabel)
    },
    initCamera() {
      const cameraInit = new THREE.PerspectiveCamera(50, container.clientWidth / container.clientHeight, 0.01, 10000)
      cameraInit.position.set(editor.cameraPosition, editor.cameraPosition, editor.cameraPosition)
      // cameraInit.position.set(5, 5, 9)
      cameraInit.lookAt(editor.scene.position)
      cameraInit.up.x = 0
      cameraInit.up.y = 0
      cameraInit.up.z = 1
      return cameraInit
    },
    /**
       * 自适应窗口尺寸
       */
    onWindowResize() {
      console.log(1)
      camera.aspect = container.clientWidth / container.clientHeight
      camera.updateProjectionMatrix()
      renderer.setSize(container.clientWidth, container.clientHeight)
    },
    /**
       * 根据有配置文件设置模型初始化属性
       * @param object
       */
    setObjectByConfig(object) {
      const objectId = object.userData['ModelId']
      const objectResource = editor.objectIdUUidMap.get(objectId)
      if (objectResource) {
        object.position.copy(
          new THREE.Vector3(parseFloat(objectResource.location.position.x),
            parseFloat(objectResource.location.position.y),
            parseFloat(objectResource.location.position.z)
          ))
        object.quaternion.copy(
          new THREE.Quaternion(parseFloat(objectResource.location.quaternion.x),
            parseFloat(objectResource.location.quaternion.y),
            parseFloat(objectResource.location.quaternion.z),
            parseFloat(objectResource.location.quaternion.w)
          ))
        object.visible = Boolean(parseInt(objectResource.visible))
      }
    },
    /**
     * 渲染
     */
    animate() {
      // const delta = clock.getDelta()
      this.render()
      // editor.cameraControls.update(delta)
      requestAnimationFrame(this.animate)
      // viewCubeUpdate()
      TWEEN.update()
      // if (editor.WeldLightVisible1) {
      // 	editor.WeldLight1.visible = !editor.WeldLight1.visible
      // } else {
      // 	editor.WeldLight1.visible = false
      // }
      // if (editor.WeldLightVisible2) {
      // 	editor.WeldLight2.visible = !editor.WeldLight2.visible
      // } else {
      // 	editor.WeldLight2.visible = false
      // }
      // if (editor.isOk) {
      // 	updateTag()
      // }
    },

    /**
     * 渲染
     */
    render() {
      renderer.render(scene, camera)
      // this.sendCameraState(camera.zoom < 25)
      // this.updatePosition(editor.selected)
      // labelRenderer.render(scene, camera)
    },
    connectService() {
      switch (editor.connectType) {
        case 1:
          connect(editor)
          break
        case 2:
          connectMqtt(editor)
          break
        default:
          break
      }
      this.updateCameraState()
    },
    drawWeldLight() {
      const geometry = new THREE.BufferGeometry()
      const vertices = []
      const textureLoader = new THREE.TextureLoader()
      const sprite1 = textureLoader.load('./css/lensflare0.png')
      const x = 0
      const y = 0.3
      const z = -0.07
      const materials = []
      vertices.push(x, y, z)
      geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3))
      const parameters = [
        [[1.0, 1, 1], sprite1, 50]
      ]
      const sprite = parameters[ 0 ][ 1 ]
      const size = parameters[ 0 ][ 2 ]

      materials[ 0 ] = new THREE.PointsMaterial({ size: size, map: sprite, blending: THREE.AdditiveBlending, depthTest: false, transparent: true })
      return new THREE.Points(geometry, materials[0])
    },
    /**
       * 解析模型
       * @param object
       */
    lookObject(object) {
      object.traverse(function(child) {
        if (!child) return
        // 避免modelId重复
        if (Object.hasOwnProperty.call(child.userData, 'ModelId')) {
          if (editor.objectIdSet.has(child.userData['ModelId'])) {
            child.userData['ModelId'] = child.uuid
            editor.objectIdSet.set(child.uuid, {
              ModelId: child.id,
              Name: child.name,
              position: JSON.parse(JSON.stringify(child.position)),
              rotation: JSON.parse(JSON.stringify(child.rotation)),
              quaternion: JSON.parse(JSON.stringify(child.quaternion)),
              object: child,
              matrix: child.matrix.clone(),
              lastValue: null
            })
          } else {
            editor.objectIdSet.set(child.userData['ModelId'], {
              ModelId: child.id,
              Name: child.name,
              position: JSON.parse(JSON.stringify(child.position)),
              rotation: JSON.parse(JSON.stringify(child.rotation)),
              quaternion: JSON.parse(JSON.stringify(child.quaternion)),
              object: child,
              matrix: child.matrix.clone(),
              lastValue: null
            })
          }
        }
        // if (child.userData.ModelId === '6AC86FB2-8535-459E-A746-D07FEC405097') {
        //   child.add(editor.WeldLight1)
        // }
        // if (child.userData.ModelId === '13AD3544-38DD-4C03-9928-2F67D15B1265') {
        //   child.add(editor.WeldLight2)
        // }
        // if (child.userData.ModelId === '6E90DC77-8E67-46CF-8B70-319D62E748E3') {
        // 	part1 = child
        // }
        // if (child.userData.ModelId === '2ED26E76-CD2C-4325-8DBA-7B54D9A4B81D') {
        // 	part2 = child
        // }
      })
      for (const robotListInfo in editor.robotList) {
        for (const info of editor.robotList[robotListInfo]) {
          info.object = editor.getObjectById(info.ModelId)
          info.matrix = info.object ? info.object.matrix.clone() : null
          info.lastValue = null
        }
      }
      //   for (const TagList of editor.showTagList) {
      //     TagList.object = editor.getObjectById(TagList.ModelId)
      //     $(document.body).append(`
      // 									<div style="position:fixed;z-index: 99;display:none;height: 50px;background-color:transparent;font-size: 30px;line-height: 50px;color: #9eff00;font-weight:bolder;border: 1px solid #9eff00 " id="tag${TagList.ModelId}">
      // 									</div>
      // `)
      //   }
    },
    /**
     * 获取预置焦点
     */
    getCameraData() {
      var param = []
      param[0] = ['ProjectCode', editor.ProjectCode]
      var Data = this.CreateData('3', 'select * from dbo.[基础数据_焦点预置]', param)
      this.ExecDatabase(Data).then(response => {
        this.cameraData = response.data
        // this.setViewCamera()
      })
    },
    /**
     * 点击后 到达预置焦点
     */
    setViewCamera() {
      if (this.cameraData.length === 0) return
      const scope = this
      const viewOperation = document.getElementById('viewOperationParent')
      const viewOperationChild = document.getElementById('viewOperationChild')
      viewOperation.onmouseover = function() {
        viewOperationChild.style.display = 'block'
      }
      viewOperation.onmouseout = function() {
        viewOperationChild.style.display = 'none'
      }
      setTimeout(() => {
        for (const info of this.cameraData) {
          $('#cameraViewBtn' + info.焦点代码).on('click', function(e) {
            const data = JSON.parse(info.焦点位置)
            const target = data.target
            const position = data.position
            const zoom0 = data.zoom0
            const id = info.焦点代码
            $('#cameraViewBtn' + info.焦点代码).css({ 'background': '#00893d', 'color': '#fff' })
            editor.cameraControls.resetState(target, position, zoom0)
            for (const infoColor of scope.cameraData) {
              if (id !== infoColor.焦点代码) {
                $('#cameraViewBtn' + infoColor.焦点代码).css({ 'background': '#fff', 'color': '#606266' })
              }
            }
          })
        }
      }, 1000)
    },

    getMousePosition(dom, x, y) {
      const rect = dom.getBoundingClientRect()
      return [(x - rect.left) / rect.width, (y - rect.top) / rect.height]
    },
    ondblclick(event) {
      const array = this.getMousePosition(container, event.clientX, event.clientY)
      onUpPosition.fromArray(array)
      let intersects = this.getIntersects(onUpPosition, editor.scene.children)
      intersects = intersects.filter(res => {
        return res.object.visible
      })
      if (intersects.length > 0) {
        const rootObjId = intersects[0].object.userData['RootId']
        editor.selected = editor.getObjectById(rootObjId)
        this.sendClickModel(editor.selected)
      } else {
        editor.selected = null
        this.sendClickModel(null)
      }
    },
    onMouseMove(event) {
      // const array = this.getMousePosition(container, event.clientX, event.clientY)
      // onUpPosition.fromArray(array)
      // if (!timer) {
      //   timer = setTimeout(() => {
      //     let intersects = this.getIntersects(onUpPosition, editor.scene.children)
      //     intersects = intersects.filter(res => {
      //       return res.object.visible
      //     })
      //     if (intersects.length > 0) {
      //       if (lastIntersectModel !== intersects[0]) {
      //         if (['6E90DC77-8E67-46CF-8B70-319D62E748E3', '2ED26E76-CD2C-4325-8DBA-7B54D9A4B81D'].indexOf(intersects[0].object.userData['ModelId']) !== -1) {
      //           const rootObjId = intersects[0].object.userData['RootId']
      //           editor.selected = editor.getObjectById(rootObjId)
      //         } else {
      //           editor.selected = null
      //         }
      //       }
      //     } else {
      //       editor.selected = null
      //     }
      //     clearTimeout(timer)
      //     timer = null
      //   }, 200)
      // }
      // updateTag(editor.selected, 'showText')
      // updateTag(part2, 'showText2')
    },
    getIntersects(point, objects) {
      mouse.set((point.x * 2) - 1, -(point.y * 2) + 1)
      raycaster.setFromCamera(mouse, camera)
      return raycaster.intersectObjects(objects, true)
    },
    sendCameraState(state) {
      this.$emit('changeCameraState', state)// 自定义事件  传递值“子向父组件传值”
    },
    sendClickModel(object) {
      if (object) {
        this.createLabelObj(object.userData.name, object.position, object)
      } else {
        this.createLabelObj(null, null, null)
      }
      // let position = {
      //   left: 0,
      //   top: 0
      // }
      // if (object) {
      //   const targetPosition = object.getWorldPosition(new THREE.Vector3()).clone().project(camera)
      //   const halfWidth = window.innerWidth / 2
      //   const halfHeight = window.innerHeight / 2
      //   position = {
      //     left: targetPosition.x * halfWidth + halfWidth - 200,
      //     top: -targetPosition.y * halfHeight + halfHeight - 500
      //   }
      // }
      // this.$emit('clickModel', object, position)// 自定义事件  传递值“子向父组件传值”
    },
    updatePosition() {
      if (editor.selected) {
        const targetPosition = editor.selected.getWorldPosition(new THREE.Vector3()).clone().project(camera)
        const halfWidth = window.innerWidth / 2
        const halfHeight = window.innerHeight / 2
        const position = {
          left: targetPosition.x * halfWidth + halfWidth - 200,
          top: -targetPosition.y * halfHeight + halfHeight - 500
        }
        this.$emit('clickModel', editor.selected, position)// 自定义事件  传递值“子向父组件传值”
      }
    },
    createLabel() {
      labelRenderer.setSize(container.clientWidth, container.clientHeight)
      labelRenderer.domElement.style.position = 'absolute'
      labelRenderer.domElement.style.top = '100px'
      document.body.appendChild(labelRenderer.domElement)
      labelRenderer.domElement.style.pointerEvents = 'none'
    },
    createLabelObj(text, vector, object) {
      // if (pointLabel) {
      //
      //   // scene.remove(pointLabel)
      // }
      if (!object) {
        pointLabel.visible = false
        return
      }

      const ModelId = object.userData.ModelId

      if (!editor.robotInfo[ModelId]) {
        pointLabel.visible = false
        return
      }
      this.robotInfo.name = text
      this.robotInfo.id = ModelId
      this.robotInfo['joint'] = editor.robotInfo[ModelId]['joint']

      // pointLabel = null
      //       const dom = `
      // <div class="laber_name" id="laber_name">
      // <div style="text-align: center">${text}属性信息</div>
      // <div>速度：${info.speed}%</div>
      // <span>轴数据：</span>
      // <table style="table-layout:fixed;font-size: 14px;border-color: white!important;color: white!important; border-collapse:collapse;"  border="1 solid black" width="100%">
      //                             <tr style="height: 22px;text-align: center;">
      //                                 <td colspan="30" rowspan="1">J1</td>
      //                                 <td colspan="30" rowspan="1">J2</td>
      //                                 <td colspan="30" rowspan="1">J3</td>
      //                                 <td colspan="30" rowspan="1">J4</td>
      //                                 <td colspan="30" rowspan="1">J5</td>
      //                                 <td colspan="30" rowspan="1">J6</td>
      //                             </tr>
      //                             <tr style="height: 22px">
      //                                 <td colspan="30" rowspan="1" style="text-align: center;">${info.joint['J1']}</td>
      //                                 <td colspan="30" rowspan="1" style="text-align: center;">${info.joint['J2']}</td>
      //                                 <td colspan="30" rowspan="1" style="text-align: center;">${info.joint['J3']}</td>
      //                                 <td colspan="30" rowspan="1" style="text-align: center;">${info.joint['J4']}</td>
      //                                 <td colspan="30" rowspan="1" style="text-align: center;">${info.joint['J5']}</td>
      //                                 <td colspan="30" rowspan="1" style="text-align: center;">${info.joint['J6']}</td>
      //                             </tr>
      //                         </table>
      // <div>位置信息：</div>
      // <table style="table-layout:fixed;font-size: 14px;border-color: white!important;color: white!important; border-collapse:collapse;"  border="1 solid black" width="100%">
      //                             <tr style="height: 22px;text-align: center;">
      //                                 <td colspan="30" rowspan="1">tx</td>
      //                                 <td colspan="30" rowspan="1">ty</td>
      //                                 <td colspan="30" rowspan="1">tz</td>
      //                                 <td colspan="30" rowspan="1">rx</td>
      //                                 <td colspan="30" rowspan="1">ry</td>
      //                                 <td colspan="30" rowspan="1">rz</td>
      //                             </tr>
      //                             <tr style="height: 22px">
      //                                 <td colspan="30" rowspan="1" style="text-align: center;">${info.tcp['tx']}</td>
      //                                 <td colspan="30" rowspan="1" style="text-align: center;">${info.tcp['ty']}</td>
      //                                 <td colspan="30" rowspan="1" style="text-align: center;">${info.tcp['tz']}</td>
      //                                 <td colspan="30" rowspan="1" style="text-align: center;">${info.tcp['rx']}</td>
      //                                 <td colspan="30" rowspan="1" style="text-align: center;">${info.tcp['ry']}</td>
      //                                 <td colspan="30" rowspan="1" style="text-align: center;">${info.tcp['rz']}</td>
      //                             </tr>
      //                         </table>
      // </div>
      //
      //       `
      //       $('laber_name').empty()
      //       $('body').append(dom)// 创建div容器
      pointLabel.visible = true
      pointLabel.position.set(vector.x, vector.y, vector.z)
    },
    updateLabelInfoJoint(ModelId, robotData) {
      for (const robotDatum of Object.keys(robotData)) {
        editor.robotInfo[ModelId]['joint'][robotDatum] = robotData[robotDatum]
        if (this.robotInfo.id === ModelId) {
          this.robotInfo['joint'][robotDatum] = robotData[robotDatum]
        }
      }
      // if (this.robotInfo.id === ModelId) {
      //   console.log(robotData)
      //   for (const robotDatum of Object.keys(robotData)) {
      //     this.robotInfo['joint'][robotDatum] = robotData[robotDatum]
      //   }
      // }
    },
    updateLabelInfoSpeedPose(ModelId, tcpData, speedData, alarmInfo) {
      for (const robotDatum of Object.keys(tcpData)) {
        editor.robotInfo[ModelId]['tcp'][robotDatum] = tcpData[robotDatum]
        if (this.robotInfo.id === ModelId) {
          this.robotInfo['tcp'][robotDatum] = tcpData[robotDatum]
        }
      }
      editor.robotInfo[ModelId]['speed'] = speedData
      editor.robotInfo[ModelId]['alarm'] = alarmInfo
      if (this.robotInfo.id === ModelId) {
        this.robotInfo['speed'] = speedData
        this.robotInfo['alarm'] = alarmInfo
      }
    },
    updateCameraState() {
      let flag = 0
      editor.cameraControls.resetState(editor.cameraStateAll[flag].cameraDate.target, editor.cameraStateAll[flag].cameraDate.position, editor.cameraStateAll[flag].cameraDate.zoom0)
      updateCameraStateTimer = setInterval(() => {
        if (!this.isMove) return
        if (editor.cameraStateAll.length > flag) {
          if (opName !== '') {
            if (editor.cameraStateAll[flag].name === opName) {
              //
              // new TWEEN.Tween(coords)
              //   .to({x: 100, y: 100, z:100}, 1000) // 指定目标位置和耗时.
              //   .easing(TWEEN.Easing.Quadratic.Out) // 指定动画效果曲线.
              //   .onUpdate(() => {
              //     // 渲染时每一帧执行：设定相机位置
              //     camera.position.set(coords.x,coords.y,coords.z);
              //   })
              //   .onComplete(()=>{
              //     // 动画结束后执行
              //   })
              //   .start() // 即刻开启动画

              editor.cameraControls.resetState(editor.cameraStateAll[flag].cameraDate.target, editor.cameraStateAll[flag].cameraDate.position, editor.cameraStateAll[flag].cameraDate.zoom0)
            }
          } else {
            editor.cameraControls.resetState(editor.cameraStateAll[flag].cameraDate.target, editor.cameraStateAll[flag].cameraDate.position, editor.cameraStateAll[flag].cameraDate.zoom0)
          }
          flag++
        } else {
          flag = 0
        }
      }, 5000)
    }

  }
}
</script>

<style scoped>
  .viewOperationParent {
    position:fixed;
    bottom: 0;
    right:0;
    background-color: transparent;
    height: 100px;
    width: 1920px;
    z-index: 99999;
    text-align: center;
  }
</style>
<style>
  .laber_name{
    padding: 10px;
    background-image: url("./libs/bgc.png");background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;
    border-radius: 10px;
    width: 420px;
    height: 300px;
    color: white;
    display: none;
  }
</style>
