csyjk 1.1.1 → 1.2.2

package/public/gltf.js

@@ -0,0 +1,2241 @@
+import './gltf.css'
+import Draggable from 'react-draggable';  //拖拽
+import "./assets/iconfont/iconfont.css"
+import React, { useState } from 'react';
+import { Button, Tooltip, Radio, Table } from 'element-react';
+import { Viewer } from "./assets/yjkkit-sdk/src/viewer/Viewer.js";
+import { GLTFLoaderPlugin } from "./assets/yjkkit-sdk/src/plugins/GLTFLoaderPlugin/GLTFLoaderPlugin.js";
+import { TreeViewPlugin } from "./assets/yjkkit-sdk/src/plugins/TreeViewPlugin/TreeViewPlugin.js";
+import { AmbientLight } from "./assets/yjkkit-sdk/src/viewer/scene/lights/AmbientLight.js";
+import { AnnotationsPlugin } from "./assets/yjkkit-sdk/src/plugins/AnnotationsPlugin/AnnotationsPlugin.js";
+import { NavCubePlugin } from "./assets/yjkkit-sdk/src/plugins/NavCubePlugin/NavCubePlugin.js";
+import { DistanceMeasurementsPlugin } from "./assets/yjkkit-sdk/src/plugins/DistanceMeasurementsPlugin/DistanceMeasurementsPlugin.js";
+import { math } from "./assets/yjkkit-sdk/src/viewer/scene/math/math.js";
+import { ContextMenu } from "./assets/yjkkit-sdk/src/extras/ContextMenu/ContextMenu.js";
+import { DirLight } from "./assets/yjkkit-sdk/src/viewer/scene/lights/DirLight.js";
+import { XML3DLoaderPlugin } from "./assets/yjkkit-sdk/src/plugins/XML3DLoaderPlugin/XML3DLoaderPlugin.js";
+import { OBJLoaderPlugin } from "./assets/yjkkit-sdk/src/plugins/OBJLoaderPlugin/OBJLoaderPlugin.js";
+import { STLLoaderPlugin } from "./assets/yjkkit-sdk/src/plugins/STLLoaderPlugin/STLLoaderPlugin.js";
+import { XKTLoaderPlugin } from "./assets/yjkkit-sdk/src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js";
+import { load3DSGeometry } from "./assets/yjkkit-sdk/src/viewer/scene/geometry/loaders/load3DSGeometry.js";
+import { ReadableGeometry } from "./assets/yjkkit-sdk/src/viewer/scene/geometry/ReadableGeometry.js";
+import { FastNavPlugin } from "./assets/yjkkit-sdk/src/plugins/FastNavPlugin/FastNavPlugin.js";
+import { Mesh } from "./assets/yjkkit-sdk/src/viewer/scene/mesh";
+import { PhongMaterial } from "./assets/yjkkit-sdk/src/viewer/scene/materials";
+import { Texture } from "./assets/yjkkit-sdk/src/viewer/scene/materials";
+// import { ReflectionMap } from "./assets/yjkkit-sdk/src/viewer/scene/lights/ReflectionMap.js";
+// import { ThreeDMode } from "./assets/yjkkit-bim-viewer/src/toolbar/ThreeDMode.js";
+// import { AxisGizmoPlugin } from "./assets/yjkkit-sdk/src/plugins/AxisGizmoPlugin/AxisGizmoPlugin.js";
+// import { CameraMemento } from "./assets/yjkkit-sdk/src/viewer/scene/mementos";
+// import { StoreyViewsPlugin } from "./assets/yjkkit-sdk/src/plugins/StoreyViewsPlugin";
+// import {PhongMaterial} from "./assets/yjkkit-sdk/src/scene/materials/PhongMaterial.js";
+// import {Texture} from "./assets/yjkkit-sdk/src/scene/materials/Texture.js";
+// import { GLTFDefaultDataSource } from "./assets/yjkkit-sdk/src/plugins/GLTFLoaderPlugin/GLTFDefaultDataSource.js";
+// import { utils } from "./assets/yjkkit-sdk/src/viewer/scene/utils.js";
+
+class Gltf extends React.Component {
+
+    constructor(props) {
+        console.log(props)
+        super(props);// 作用 使子类可以获取到 父类中的this，子类没有自己的this
+        this.state = {
+            nummodel: null,
+            nownummodel: null,
+            loadtime: null,
+            numobj: null,
+            nummesh: null,
+            sumnummesh: null,
+            visible: 'block',
+            view: 'block',
+            projectInfo: 'none',
+            active: -1,
+            active2: 1,
+            navList: [
+                { content: '主视图【按键1-6快速选择】', icon: 'yjk-yingjianke_zhushitu' },
+                { content: '透视视图', icon: 'yjk-yingjianke_toushishitu' },
+                { content: '正交视图', icon: 'yjk-yingjianke_zhengmianshitu' },
+                { content: '适配尺寸', icon: 'yjk-yingjianke_shipeichicun' },
+                { content: '测距', icon: 'yjk-yingjianke_ceju', style: 'block', },
+                { content: '取消测距', icon: 'yjk-yingjianke_ceju', style: 'none', },
+                { content: '全屏', icon: 'yjk-yingjianke_quanping', style: 'block', },
+                { content: '取消全屏', icon: 'yjk-yingjianke-tongyonggongnengtubiao_quxiaoquanping', style: 'none', },
+                { content: '项目信息', icon: 'yjk-yingjianke-qinglianghuagongju_moxingjiegouheleixingchuangkou' },
+                { content: '左键旋转右键平移', icon: 'yjk-yingjianke_youjian', style: 'block', },
+                { content: '左键平移右键旋转', icon: 'yjk-yingjianke_zuojian', style: 'none', },
+            ],
+
+            tabList: [
+                { name: '模型', id: 'treeflExplorer' },
+                { name: '楼层', id: 'treelouExplorer' },
+                { name: '构件', id: 'treeExplorer' },
+            ],
+            showTab: 0,
+            columns: [
+                {
+                    label: "属性",
+                    prop: "displayName",
+                    width: 108
+                },
+                {
+                    label: "值",
+                    prop: "displayValue",
+                    width: 108
+                },
+
+            ],
+            attributeData: [] ,//属性值;
+            elelist:[],
+            ele_color:[],
+
+        };
+    }
+
+    viewSwitch(type) {
+        if (type == 1) {
+            if (this.state.view == 'block') {
+                this.setState({ view: 'none' })
+            } else {
+                this.setState({ view: 'block' })
+            }
+
+        } else {
+            if (this.state.visible == 'block') {
+                this.setState({ visible: 'none' })
+            } else {
+                this.setState({ visible: 'block' })
+            }
+        }
+    }
+    tabClick = (e, index) => {
+        this.setState({ showTab: index })
+    }
+    // 定义handleClick事件
+    handleClick = (e, index) => {
+
+        this.setState({ active: index })
+        if (index == 0) {
+            this.reset()
+        }
+        if (index == 1) {
+            this.perFit()
+            this.setState({ active2: 1 })
+        }
+        if (index == 2) {
+            this.setOrtho()
+            this.setState({ active2: 2 })
+        }
+        if (index == 3) {
+            this.viewFit()
+        }
+        if (index == 4) {
+            this.state.navList[5].style = 'block';
+            this.state.navList[4].style = 'none';
+            this.setState({ active: 5 })
+            this.measure()
+        }
+        if (index == 5) {
+            this.state.navList[5].style = 'none';
+            this.state.navList[4].style = 'block';
+            this.setState({ active: 4 })
+            this.unMeasure()
+        }
+        if (index == 6) {
+            this.state.navList[7].style = 'block';
+            this.state.navList[6].style = 'none';
+            this.setState({ active: 7 })
+            this.fullScreen()
+        }
+        if (index == 7) {
+            this.state.navList[7].style = 'none';
+            this.state.navList[6].style = 'block';
+            this.setState({ active: 6 })
+            this.outFullScreen()
+        }
+        if (index == 8) {
+            this.slabUnVisible()
+        }
+        if (index == 9) {
+            this.state.navList[9].style = 'none';
+            this.state.navList[10].style = 'block';
+            this.setState({ active: 10 })
+            this.changeright()
+        }
+        if (index == 10) {
+            this.state.navList[10].style = 'none';
+            this.state.navList[9].style = 'block';
+            this.setState({ active: 9 })
+            this.changeleft()
+        }
+    }
+
+
+    closeModel(e, type) {
+
+        if (type == 1) {//视图关闭
+            this.setState({ view: 'none' })
+            // this.$emit("updateOneChecked", false);
+        } else if (type == 2) {   // 标注关闭
+
+            this.setState({ visible: 'none' })
+            // this.$emit("updateTwoChecked", false);
+        } else {
+            this.setState({ projectInfo: 'none' })
+        }
+
+    }
+
+
+    commentShow(data) {
+        this.$emit("updateCommentVisible", true, data);
+    }
+    //判断浏览器是否处于全屏状态 （需要考虑兼容问题）
+    //火狐浏览器
+    checkFull() {
+        var isFull =
+            document.mozFullScreen ||
+            document.fullScreen ||
+            //谷歌浏览器及Webkit内核浏览器
+            document.webkitIsFullScreen ||
+            document.webkitRequestFullScreen ||
+            document.mozRequestFullScreen ||
+            document.msFullscreenEnabled;
+        if (isFull === undefined) {
+            isFull = false;
+        }
+        return isFull;
+    }
+
+    reset() {
+        let viewer = this.bv;
+        this.viewMethod = 0;
+        //  进入视图后面向前
+
+        // 设置正交相机
+        viewer.scene.camera.projection = "ortho";
+        viewer.scene.camera.eye = [0, 0, 100];
+        viewer.scene.camera.look = [0, 0, 0];
+        viewer.scene.camera.up = [0, 1, 0];
+        let sceneCurrent = viewer.scene.getAABB(viewer.scene.visibleObjectIds);
+        viewer.cameraFlight.flyTo(
+            {
+                aabb: sceneCurrent,
+                duration: 0.5,
+                fitFOV: 50,
+            },
+            () => { }
+        );
+        var posifly = [
+            math.getAABB3Center(sceneCurrent)[0],
+            math.getAABB3Center(sceneCurrent)[1],
+            math.getAABB3Center(sceneCurrent)[2],
+        ];
+        viewer.cameraControl.pivotPos = posifly;
+        if ("ortho" == viewer.scene.camera.projection) {
+            // viewer.scene.camera.ortho.scale = 0.5;
+            viewer.cameraControl.mouseWheelDollyRate = 250;
+        } else {
+            viewer.cameraControl.mouseWheelDollyRate = 150;
+        }
+    }
+    // 根据UUID查询并高亮显示该构件
+    hight_ele(elelist,ele_color) {
+        let viewer = this.bv;
+        viewer.scene.setObjectsHighlighted(viewer.scene.highlightedObjectIds, false);//先取消高亮
+        viewer.scene.setObjectsXRayed(viewer.scene.visibleObjectIds, false);
+        viewer.scene.setObjectsSelected(
+            viewer.scene.selectedObjectIds,
+            false
+        );
+        if (elelist.length == 0) {
+            return;
+        }
+        var fitFOV = 30; // 默认视角：构件视角
+
+        viewer.scene.setObjectsXRayed(viewer.scene.visibleObjectIds, true);
+        viewer.scene.setObjectsSelected(
+            elelist,
+            true
+        );
+        viewer.scene.setObjectsHighlighted(elelist, true);
+        // console.log("viewer.scene.setObjectsSelected.entity.colorize",viewer.scene.setObjectsSelected)
+        viewer.scene.setObjectsSelected.entity.colorize = ele_color;
+
+        // viewer.scene.objects[elelist].colorize = [0, 1, 0];
+        // for (var i = 0 ; i < elelist.length; i++){
+        //   viewer.scene._objectColorizeUpdated(elelist[i], [0, 1, 0])
+        //   viewer.scene.objects[elelist[i]].colorize = [0, 1, 0];
+        //   console.log(viewer.scene.objects[elelist[i]])
+        // }
+        viewer.scene.setObjectsPickable(elelist, true);
+        viewer.cameraFlight.flyTo(
+            {
+                aabb: viewer.scene.objects[elelist].aabb,
+                duration: 0.8,
+                fitFOV: fitFOV,
+            },
+            () => {
+                setTimeout(function () {
+                    viewer.scene.setObjectsHighlighted(
+                        viewer.scene.highlightedObjectIds,
+                        true
+                    );
+                }, 500);
+            }
+        );
+    };
+
+    viewFit() {
+        const viewer = this.bv;
+        let sceneCurrent = viewer.scene.getAABB(viewer.scene.visibleObjectIds);
+        viewer.cameraFlight.flyTo(
+            {
+                aabb: sceneCurrent,
+                duration: 0.5,
+                fitFOV: 50,
+            },
+            () => { }
+        );
+        var posifly = [
+            math.getAABB3Center(sceneCurrent)[0],
+            math.getAABB3Center(sceneCurrent)[1],
+            math.getAABB3Center(sceneCurrent)[2],
+        ];
+        viewer.cameraControl.pivotPos = posifly;
+        // viewer.cameraControl.pivotPos = math.getAABB3Center(sceneCurrent);
+        // viewer.cameraControl.pivotPos = math.getAABB3Center(sceneAABB);
+    }
+    perFit() {
+        const viewer = this.bv;
+        viewer.camera.projection = "perspective";
+        //------------------0000000000000000000是否适配尺寸0000000000000000-----------------------
+        let sceneCurrent = viewer.scene.getAABB(viewer.scene.visibleObjectIds);
+        viewer.cameraFlight.flyTo(
+            {
+                aabb: sceneCurrent,
+                duration: 0.5,
+                fitFOV: 53,
+                projection: "perspective",
+            },
+            () => { }
+        );
+        var posifly = [
+            math.getAABB3Center(sceneCurrent)[0],
+            math.getAABB3Center(sceneCurrent)[1],
+            math.getAABB3Center(sceneCurrent)[2],
+        ];
+        viewer.cameraControl.pivotPos = posifly;
+    }
+
+    setOrtho() {
+
+        const viewer = this.bv;
+        // viewer.camera.projection= "ortho";
+        let sceneCurrent = viewer.scene.getAABB(viewer.scene.visibleObjectIds);
+        viewer.cameraFlight.flyTo(
+            {
+                aabb: sceneCurrent,
+                duration: 0.5,
+                fitFOV: 45,
+                projection: "ortho",
+            },
+            () => { }
+        );
+        var posifly = [
+            math.getAABB3Center(sceneCurrent)[0],
+            math.getAABB3Center(sceneCurrent)[1],
+            math.getAABB3Center(sceneCurrent)[2],
+        ];
+        viewer.cameraControl.pivotPos = posifly;
+        // this.viewFit();
+    }
+
+    fullScreen(num) {
+        this.active = num;
+        let el = document.getElementById("yjkContainer");
+        //let element = document.getElementById("myCanvas");
+        let rfs =
+            el.requestFullScreen ||
+            el.webkitRequestFullScreen ||
+            el.mozRequestFullScreen ||
+            el.msRequestFullScreen;
+        if (typeof rfs != "undefined" && rfs) {
+            rfs.call(el);
+        } else if (typeof window.ActiveXObject != "undefined") {
+            let wscript = new ActiveXObject("WScript.Shell");
+            if (wscript != null) {
+                wscript.SendKeys("{F11}");
+            }
+        }
+
+        // if (element.requestFullscreen) {
+        //   element.requestFullscreen();
+        // } else if (element.mozRequestFullScreen) {
+        //   element.mozRequestFullScreen();
+        // } else if (element.msRequestFullscreen) {
+        //   element.msRequestFullscreen();
+        // } else if (element.webkitRequestFullscreen) {
+        //   element.webkitRequestFullScreen();
+        // }
+    }
+
+    outFullScreen() {
+
+        if (document.cancelFullScreen) {
+            document.cancelFullScreen();
+        } else if (document.webkitCancelFullScreen) {
+            document.webkitCancelFullScreen();
+        } else if (document.mozCancelFullScreen) {
+            document.mozCancelFullScreen();
+        } else if (document.msCancelFullScreen) {
+            document.msCancelFullScreen();
+        }
+
+    }
+
+    measure() {
+
+        this.distanceMeasurements = new DistanceMeasurementsPlugin(this.bv);
+        this.distanceMeasurements.control.activate();
+        this.measureStatus = 0; //  设置为测距非选中
+    }
+    unMeasure() {
+
+        if (this.distanceMeasurements) {
+            this.distanceMeasurements.control.deactivate();
+            this.distanceMeasurements.clear(); //  清除测距
+            //this.distanceMeasurements.control.reset();
+        }
+        this.measureStatus = 1; // 设置为测距选中状态
+    }
+    slabUnVisible() {
+        this.state.projectInfo = "block";   //板显示
+        let objects = this.bv.scene.objects;
+        for (let x in objects) {
+            if (objects[x].yjkType == "Slab") {
+                objects[x].visible = false;
+            }
+        }
+
+    }
+
+
+    changeleft() {
+
+        const viewer = this.bv;
+        viewer.cameraControl.yjkLeft = 1;
+        //类和构造函数的使用
+        this.leftrotate = 0;
+    }
+    changeright() {
+
+        const viewer = this.bv;
+        viewer.cameraControl.yjkLeft = 0;
+        this.leftrotate = 1;
+    }
+
+
+
+    //collision detection
+    detection() {
+        //获取AABB包围盒
+        var AABBmodel = scene.getAABB(scene.visibleObjectIds);
+    }
+    tabRowClassName({ row, rowIndex }) {
+        // console.log(rowIndex);
+        let index = rowIndex + 1;
+        if (index % 2 == 0) {
+            return "warning-row";
+        }
+    }
+    readJSON(file, callback) {
+        let ajax = new XMLHttpRequest();
+        ajax.overrideMimeType("application/json");
+        ajax.open("GET", file, true);
+        ajax.onreadystatechange = function () {
+            if (ajax.readyState === 4 && ajax.status == "200") {
+                callback(ajax.responseText);
+            }
+        };
+        ajax.send(null);
+    }
+    getattributeData(data) {
+
+        this.state.attributeData = [];
+        if (!data) {
+            return;
+        }
+        if (data.id) {
+            this.state.attributeData.push({ displayName: "id", displayValue: data.id });
+        }
+        if (data.type) {
+            this.state.attributeData.push({
+                displayName: "type",
+                displayValue: data.type,
+            });
+        }
+        if (data.name) {
+            this.state.attributeData.push({
+                displayName: "name",
+                displayValue: data.name,
+            });
+        }
+        let that = this;
+
+        console.log(data.properties)
+        if (data.properties) {
+            Object.keys(data.properties).map(function (key) {
+                that.state.attributeData.push({
+                    displayName: key,
+                    displayValue: data.properties[key],
+                });
+            });
+        }
+
+        this.setState({ attributeData: this.state.attributeData })
+
+        this.selectNodeId = "show";
+    }
+
+
+
+    componentDidMount() {
+        this.props.onRef(this)
+        // window.valueToVue = this.flag;
+        window.valueToVue = 0;
+        var num = "";
+        for (var i = 0; i < 3; i++) {
+            num += Math.floor(Math.random() * 10);
+        }
+        var cannum = num + 1;
+        let canvasId = "myCanvas" + cannum;
+        var canvanew = document.createElement("canvas");
+        canvanew.setAttribute("id", canvasId); //可行
+        canvanew.setAttribute(
+            "style",
+            "width: 100%;height: 100%;background: linear-gradient(180deg, #F2F4F9 0%, #D1DCE8 100%);"
+        ); //可行
+        canvanew.className = "showModel";
+        let elementyjk = document.getElementById("myViewer");
+        elementyjk.appendChild(canvanew);
+        const viewer = new Viewer({
+            canvasId: canvasId,
+            transparent: true,
+        });
+        new FastNavPlugin(viewer);
+        viewer.camera.projection = "perspective";
+        viewer.camera.perspective.fov = 50;
+        const pivotElement = document
+            .createRange()
+            .createContextualFragment(
+                "<div class='yjkkit-camera-pivot-marker' id='yjkcamera-pivot' style='color: #14d9ab;\n" +
+                "  width: 10px;\n" +
+                "  height: 10px;\n" +
+                "  border-radius: 15px;\n" +
+                "  border: 2px solid #ebebeb;\n" +
+                "  background: #14efdc;\n" +
+                "  visibility: hidden;\n" +
+                "  box-shadow: 5px 5px 15px 1px #68f1c3;\n" +
+                "  z-index: 301;\n" +
+                "  pointer-events: none;'></div>"
+            ).firstChild;
+        document.body.appendChild(pivotElement);
+        viewer.cameraControl.pivotElement = pivotElement;
+
+
+        viewer.scene.clearLights();
+
+        new AmbientLight(viewer.scene, {
+            color: [0.35, 0.35, 0.2],
+            intensity: 1.0,
+        });
+
+        new DirLight(viewer.scene, {
+            dir: [0.8, -0.6, -0.8],
+            color: [1.0, 1.0, 1.0],
+            intensity: 0.6,
+            space: "view",
+        });
+        new DirLight(viewer.scene, {
+            dir: [-0.8, -0.4, -0.4],
+            color: [1.0, 1.0, 1.0],
+            intensity: 0.7,
+            space: "view",
+        });
+        new DirLight(viewer.scene, {
+            dir: [0.2, -0.8, 0.8],
+            color: [0.7, 0.7, 0.7],
+            intensity: 0.9,
+            space: "view",
+        });
+
+        //定义高亮显示材质
+        viewer.scene.highlightMaterial.fill = false;
+        viewer.scene.highlightMaterial.fillAlpha = 0.3;
+        viewer.scene.highlightMaterial.edgeColor = [1, 1, 0];
+        //定义射线显示材质
+        viewer.scene.xrayMaterial.fill = true;
+        viewer.scene.xrayMaterial.fillAlpha = 0.1;
+        viewer.scene.xrayMaterial.fillColor = [0.1, 0.5, 1];
+        viewer.scene.xrayMaterial.edgeAlpha = 0.05;
+        viewer.scene.xrayMaterial.edgeColor = [0, 0, 0];
+        const annotations = new AnnotationsPlugin(viewer, {
+            markerHTML:
+                "<div class='annotation-marker' id='annotation-marker' style='background-color: {{markerBGColor}};" +
+                "position: absolute;" +
+                "color: #ffffff;\n" +
+                "line-height: 1.8;\n" +
+                "text-align: center;\n" +
+                'font-family: "monospace";\n' +
+                "font-weight: bold;\n" +
+                "position: absolute;\n" +
+                "width: 25px;\n" +
+                "height: 25px;\n" +
+                "border-radius: 15px;\n" +
+                "border: 2px solid #ffffff;\n" +
+                "background-color: {{markerBGColor}};\n" +
+                "visibility: hidden;\n" +
+                "box-shadow: 5px 5px 15px 1px #e5caca;\n" +
+                "z-index: 801;\n" +
+                "z-index: 801;'>{{glyph}}</div>",
+            labelHTML:
+                "<div class='annotation-label' id='annotation-label' style='background-color: {{labelBGColor}};\
+            position: absolute;\
+            max-width: 500px;\
+            min-height: 100px;\
+            padding: 8px;\
+            padding-left: 12px;\
+            padding-right: 12px;\
+            background: #ffffff;\
+            color: #000000;\
+            -webkit-border-radius: 3px;\
+            -moz-border-radius: 3px;\
+            border-radius: 8px;\
+            border: #ffffff solid 2px;\
+            box-shadow: 5px 5px 15px 1px #000000;\
+            z-index: 801;'>\
+            <div class='annotation-title' id='annotation-title' style='font: normal 20px arial, serif;margin-bottom: 8px;'>{{title}}</div>\
+            <div class='annotation-desc' id='annotation-desc' style='font: normal 14px arial, serif;'>{{description}}</div>\
+            <br><img alt='yjkdbImg' width='200px' height='100px' src='{{imageSrc}}'>\
+            <div id='annotation-add'></div>\
+            </div>",
+
+            values: {
+                markerBGColor: "undifined",
+                labelBGColor: "undifined",
+                glyph: "undifined",
+                title: "undifined",
+                description: "undifined",
+            },
+            surfaceOffset: 0.3,
+        });
+        function annotationFunc(
+            entity,
+            entityid,
+            glyphtype,
+            titletext,
+            descriptiontext,
+            imgurl,
+            posx,
+            posy,
+            posz,
+            labellist
+        ) {
+            let markerColor = null;
+            let wordpos = null;
+            const aabb = entity.aabb;
+            const entityCenter = math.getAABB3Center(aabb);
+            var marker = true;
+            if (glyphtype == "注") {
+                markerColor = "#ecc5c5";
+            } else {
+                markerColor = "red";
+            }
+            if (posx && posy && posz) {
+                wordpos = [posx, posy, posz];
+            } else {
+                wordpos = entityCenter;
+            }
+
+            const annotation = annotations.createAnnotation({
+                id: "yjk Webgl" + entityid,
+                /////////////////////////////////////////  Entity
+                //worldPos: [-0.163, 1.810, 7.977],
+                entity: entity,
+                worldPos: wordpos,
+                occludable: false,
+                markerShown: marker,
+                labelShown: false,
+                labelHTML:
+                    "<div class='annotation-label' id='annotation-label' style='background-color: {{labelBGColor}};\
+            position: absolute;\
+            max-width: 500px;\
+            min-height: 100px;\
+            padding: 8px;\
+            padding-left: 12px;\
+            padding-right: 12px;\
+            background: #ffffff;\
+            color: #000000;\
+            -webkit-border-radius: 3px;\
+            -moz-border-radius: 3px;\
+            border-radius: 8px;\
+            border: #ffffff solid 2px;\
+            box-shadow: 5px 5px 15px 1px #000000;\
+            z-index: 801;'>\
+            <div class='annotation-title' id='annotation-title' style='font: normal 20px arial, serif;margin-bottom: 8px;'>{{title}}</div>\
+            <div class='annotation-desc' id='annotation-desc' style='font: normal 14px arial, serif;'>{{description}}</div>\
+            <br><img alt='yjkdbImg' width='200px' height='100px' src='{{imageSrc}}'>\
+            <div id='annotation-add'></div>\
+            </div>",
+                values: {
+                    glyph: glyphtype,
+                    title: titletext,
+                    description: descriptiontext,
+                    markerBGColor: markerColor,
+                    imageSrc: imgurl,
+                },
+            });
+            var imgadd = document.createElement("img");
+            imgadd.src = imgurl;
+            //document.getElementById("annotation-add").appendChild(imgadd);
+
+            if (labellist) {
+                for (var i = 0; i < labellist.length; i++) {
+                    console.log("annotationFunc直接添加试试", labellist[i + 1]);
+                    let annotationlabel = document.getElementById("annotation-add");
+                    var labeldesc = labellist[i].content;
+                    var descriptiondiv = document.createElement("div");
+                    descriptiondiv.setAttribute("id", descriptiondiv); //可行It was feasible when I was in graduate school
+                    descriptiondiv.setAttribute(
+                        "style",
+                        "font: normal 14px arial, serif;"
+                    ); //可行
+                    descriptiondiv.innerText = labeldesc;
+                    descriptiondiv.className = "annotation-descadd";
+                    annotationlabel.appendChild(descriptiondiv);
+                    var br = document.createElement("br");
+                    annotationlabel.appendChild(br);
+                    var listimg = labellist[i].imgs;
+                    for (var m = 0; m < listimg.length; m++) {
+                        var imgdiv = document.createElement("img");
+                        imgdiv.setAttribute("id", imgdiv); //可行It was feasible when I was in graduate school
+                        imgdiv.width = "300px";
+                        imgdiv.height = "200px";
+                        imgdiv.className = "annotation-img";
+                        imgdiv.src = listimg[m];
+                        annotationlabel.appendChild(imgdiv);
+                        annotationlabel.appendChild(br);
+                    }
+                }
+            }
+            prevAnnotationClicked = annotation;
+            maxAnnotationIndex++;
+        }
+
+        const treeView = new TreeViewPlugin(viewer, {
+            containerElement: document.getElementById("treeExplorer"),
+            autoExpandDepth: 1,
+            hierarchy: "types",
+            sortNodes: true,
+            pruneEmptyNodes: true,
+            autoAddModels: false,
+        });
+        const treeViewfl = new TreeViewPlugin(viewer, {
+            containerElement: document.getElementById("treeflExplorer"),
+            autoExpandDepth: 1,
+            hierarchy: "stories",
+            sortNodes: true,
+            pruneEmptyNodes: true,
+            autoAddModels: false,
+        });
+        const treeViewlou = new TreeViewPlugin(viewer, {
+            containerElement: document.getElementById("treelouExplorer"),
+            autoExpandDepth: 3,
+            hierarchy: "stories",
+            sortNodes: true,
+            pruneEmptyNodes: true,
+            autoAddModels: false,
+        });
+
+        let _this = this;
+        var cubeca;
+        var canva = function () {
+            let _thisId = "myNavCubeCanvas" + num;
+            cubeca = document.createElement("canvas");
+            cubeca.setAttribute("id", _thisId); //可行
+            cubeca.className = "myNavCubeCanvas";
+            cubeca.style.zIndex = 300;
+            let element = document.getElementById("yjkContainer");
+            element.appendChild(cubeca);
+            let navCube = new NavCubePlugin(viewer, {
+                canvasId: "" + _thisId,
+                visible: true,
+                size: 200,
+                alignment: "bottomRight",
+                fitVisible: true,
+                bottomMargin: 10,
+                rightMargin: 5,
+                color: "#F9FAFD",
+            });
+            navCube._shadow.visible = false;
+        };
+        canva();
+        const objLoader = new OBJLoaderPlugin(viewer);
+        const stlLoader = new STLLoaderPlugin(viewer);
+        const gltfLoader = new GLTFLoaderPlugin(viewer, {});
+        const xktLoader = new XKTLoaderPlugin(viewer);
+
+        var jsonPathUrl = null;
+        var gltfPathUrl = null;
+        var urlid = null;
+        var urlname = null;
+        var urltype = null;
+        var urlimg = null;
+        var imglist = [];
+        var l = 0;
+        var t0 = performance.now();
+        var times = 0;
+        var nummesh = 0;
+        var sumnummesh = 0;
+        var objnumber = 0;
+        //模型加载完成自动获取截图
+        function imgget() {
+
+            var my_processes = viewer.scene.canvas.spinner.processes;
+            var numScreenshots = 0;
+
+
+            setInterval(() => {
+                if (numScreenshots++ > 5) {
+                    return;
+                }
+                const canvas = viewer.scene.canvas;
+                const canvasElement = canvas.canvas;
+                const aspect = canvasElement.height / canvasElement.width;
+                const width = 1200;
+                const height = Math.floor(width * aspect);
+
+                if (!_this.props.detail.requireScreenshot) {
+
+                    return false;
+                } else if (
+                    _this.props.detail.requireScreenshot &&
+                    my_processes == _this.props.detail.modelList.length
+                ) {
+
+                    const imageData = viewer.getSnapshot({
+                        format: "png",
+                        width: width,
+                        height: height,
+                    });
+                    const img = document.createElement("img");
+                    img.src = imageData;
+                    //img.style.border = "1px solid #000000";
+                    img.style.background =
+                        "linear-gradient(180deg, #F2F4F9 0%, #D1DCE8 100%)";
+                    imglist.push(imageData);
+                    var imglast = imglist[imglist.length - 1];
+                    _this.imgfinaly = imglast;
+                    var imglast = imglist[imglist.length - 1];
+                    l++;
+
+                    if (l == _this.props.detail.modelList.length * 6) {
+                        // 首次截图
+                        localStorage.setItem('screenshot',imglast)
+                        // let formdata = new FormData();
+                        // formdata.append("file", imglast);
+                        // formdata.append("path", "modelPreview");
+                        // _this.http.resource
+                        //     .uploadImgs(formdata, "post", {
+                        //         headers: {
+                        //             "Content-Type": "multipart/form-data",
+                        //         },
+                        //     })
+                        //     .then((res) => {
+                        //         if (_this.modelId) {
+                        //             _this.http.projectModel
+                        //                 .update({
+                        //                     id: _this.modelId,
+                        //                     img: res.data.url,
+                        //                 })
+                        //                 .then((res) => {
+                        //                     console.log(res);
+                        //                 });
+                        //         }
+                        //     });
+                    }
+                }
+            }, 1000);
+        }
+        //模型加载
+        function lodifcmodel(id, gltfurl, jsonurl, name) {
+            if (jsonPathUrl === "") {
+                viewer.metaScene.metaObjects = null;
+            }
+            const gltfmodel = gltfLoader.load({
+                id: id,
+                src: gltfurl,
+                metaModelSrc: jsonurl,
+                edges: true,
+            });
+            // Object.values(viewer.scene.objects).map(obj => obj.meshes).flat().map(mesh => mesh.numTriangles).reduce((num, acc) => acc += num)
+            gltfmodel.on("loaded", () => {
+                objnumber = gltfmodel.numEntities;
+                // nummesh = gltfmodel.map(obj => obj.meshes);
+                // console.log(gltfmodel.numTriangles);
+                // console.log("=================================================================================");
+                nummesh = gltfmodel.numTriangles;
+                _this.state.sumnummesh += nummesh;
+                _this.state.numobj += objnumber;
+                _this.state.nownummodel += 1;
+                var t1 = performance.now();
+                times = Math.floor(t1 - t0) / 1000;
+
+                _this.state.loadtime = times;
+                _this.bv = viewer;
+                _this.bv.cameraFlight.flyTo({
+                    gltfmodel,
+                    duration: 0.1,
+                });
+                treeView.addModel(gltfmodel.id, {
+                    rootName: name,
+                });
+                treeViewfl.addModel(gltfmodel.id, {
+                    rootName: name,
+                });
+                treeViewlou.addModel(gltfmodel.id, {
+                    rootName: name,
+                });
+
+                imgget();
+                return t0;
+            });
+            //const screenshotsDiv = document.getElementById("snapshots");
+        }
+        function lodgltfmodel(id, gltfurl, jsonurl, name) {
+            // if (jsonPathUrl === "") {
+            //   viewer.metaScene.metaObjects = null;
+            // }
+            const gltfmodel = gltfLoader.load({
+                id: id,
+                src: gltfurl,
+                metaModelSrc: jsonurl,
+                edges: true,
+            });
+
+            gltfmodel.on("loaded", () => {
+                objnumber = gltfmodel.numEntities;
+                nummesh = gltfmodel.numTriangles;
+                _this.state.sumnummesh += nummesh;
+                _this.state.numobj += objnumber;
+                var t1 = performance.now();
+                times = Math.floor(t1 - t0) / 1000;
+                _this.state.loadtime = times;
+                _this.state.nownummodel += 1;
+                _this.bv = viewer;
+                _this.bv.cameraFlight.flyTo({
+                    gltfmodel,
+                    duration: 0.1,
+                });
+                treeView.addModel(gltfmodel.id, {
+                    rootName: name,
+                });
+                treeViewfl.addModel(gltfmodel.id, {
+                    rootName: name,
+                });
+                treeViewlou.addModel(gltfmodel.id, {
+                    rootName: name,
+                });
+                imgget();
+            });
+        }
+        function lodobjmodel(id, gltfurl, jsonurl, name) {
+            if (jsonPathUrl === "") {
+                viewer.metaScene.metaObjects = null;
+            }
+            const objmodel = objLoader.load({
+                id: id,
+                src: gltfurl,
+                metaModelSrc: jsonPathUrl,
+                edges: true,
+            });
+            objmodel.on("loaded", () => {
+                objnumber = objmodel.numEntities;
+                nummesh = objmodel.numTriangles;
+                _this.state.sumnummesh += nummesh;
+                _this.state.numobj += objnumber;
+                var t1 = performance.now();
+                times = Math.floor(t1 - t0) / 1000;
+                _this.state.loadtime = times;
+                _this.state.nownummodel += 1;
+                _this.bv = viewer;
+                _this.bv.cameraFlight.flyTo({
+                    objmodel,
+                    duration: 0.1,
+                });
+                treeView.addModel(objmodel.id, {
+                    rootName: name,
+                });
+                treeViewfl.addModel(objmodel.id, {
+                    rootName: name,
+                });
+                treeViewlou.addModel(objmodel.id, {
+                    rootName: name,
+                });
+                imgget();
+            });
+        }
+        function lodstlmodel(id, gltfurl, jsonurl, name) {
+            if (jsonPathUrl === "") {
+                viewer.metaScene.metaObjects = null;
+            }
+            loadSTL(gltfurl, (stlData) => {
+                const stlmodel = stlLoader.load({
+                    id: id,
+                    stl: stlData,
+                    smoothNormals: true,
+                });
+
+                stlmodel.on("loaded", () => {
+                    objnumber = stlmodel.numEntities;
+                    nummesh = stlmodel.numTriangles;
+                    _this.state.sumnummesh += nummesh;
+                    _this.state.numobj += objnumber;
+                    var t1 = performance.now();
+                    times = Math.floor(t1 - t0) / 1000;
+                    _this.state.loadtime = times;
+                    _this.state.nownummodel += 1;
+                    _this.bv = viewer;
+                    _this.bv.cameraFlight.flyTo({
+                        stlmodel,
+                        duration: 0.1,
+                    });
+                    treeView.addModel(stlmodel.id, {
+                        rootName: name,
+                    });
+                    treeViewfl.addModel(stlmodel.id, {
+                        rootName: name,
+                    });
+                    treeViewlou.addModel(stlmodel.id, {
+                        rootName: name,
+                    });
+                    imgget();
+                });
+            });
+            function loadSTL(src, ok, error) {
+                const request = new XMLHttpRequest();
+                request.overrideMimeType("application/json");
+                request.open("GET", src, true);
+                request.responseType = "arraybuffer";
+                request.onreadystatechange = function () {
+                    if (request.readyState === 4) {
+                        if (request.status === 200) {
+                            ok(request.response);
+                        } else if (error) {
+                            error(request.statusText);
+                        }
+                    }
+                };
+                request.send(null);
+                imgget();
+            }
+        }
+        function lod3dxmlmodel(id, gltfurl, jsonurl, name) {
+            const xml3dLoader = new XML3DLoaderPlugin(viewer, {
+                workerScriptsPath: "../static/zipjs/",
+            });
+            const xmlmodel = xml3dLoader.load({
+                id: id,
+                src: gltfurl,
+                materialType: "SpecularMaterial", // <<----------- Create physically-based SpecularMaterials
+                edges: true,
+                createMetaModel: true,
+            });
+            xmlmodel.on("loaded", () => {
+                objnumber = xmlmodel.numEntities;
+                nummesh = xmlmodel.numTriangles;
+                _this.state.sumnummesh += nummesh;
+                _this.state.numobj += objnumber;
+                var t1 = performance.now();
+                times = Math.floor(t1 - t0) / 1000;
+                _this.state.loadtime = times;
+                _this.state.nownummodel += 1;
+                _this.bv = viewer;
+                _this.bv.cameraFlight.flyTo({
+                    xmlmodel,
+                    duration: 0.1,
+                });
+                treeView.addModel(xmlmodel.id, {
+                    rootName: name,
+                });
+                treeViewfl.addModel(xmlmodel.id, {
+                    rootName: name,
+                });
+                treeViewlou.addModel(xmlmodel.id, {
+                    rootName: name,
+                });
+                imgget();
+            });
+
+            //=====>>>>>>>>>>>>>>//----XML3D的模型是没有属性的，只能提取name，type等，所以得把那些属性设为null
+        }
+        function lod3dsmodel(id, gltfurl, jsonurl, name) {
+            if (jsonPathUrl === "") {
+                viewer.metaScene.metaObjects = null;
+            }
+
+            load3DSGeometry(viewer.scene, {
+                src: gltfurl,
+                compressGeometry: false,
+            }).then(
+                function (geometry) {
+                    new Mesh(viewer.scene, {
+                        geometry: new ReadableGeometry(viewer.scene, geometry),
+
+                        material: new PhongMaterial(viewer.scene, {
+                            emissive: [1, 1, 1],
+                            emissiveMap: new Texture(viewer.scene, {}),
+                        }),
+                        rotation: [-90, 0, 0], // +Z is up for this particular 3DS
+                    });
+                },
+                function () {
+                    // Error
+                }
+            );
+            imgget();
+        }
+        function lodxktmodel(id, gltfurl, jsonurl, name) {
+            if (jsonPathUrl === "") {
+                viewer.metaScene.metaObjects = null;
+            }
+            const xktmodel = xktLoader.load({
+                id: id,
+                src: gltfurl,
+                metaModelSrc: jsonurl, // Creates a MetaObject instances in scene.metaScene.metaObjects
+                edges: true,
+            });
+            xktmodel.on("loaded", () => {
+                objnumber = xmlmodel.numEntities;
+                nummesh = xmlmodel.numTriangles;
+                _this.sumnummesh += nummesh;
+                _this.numobj += objnumber;
+                var t1 = performance.now();
+                times = Math.floor(t1 - t0) / 1000;
+                _this.state.loadtime = times;
+                _this.state.nownummodel += 1;
+                _this.bv = viewer;
+                _this.bv.cameraFlight.flyTo({
+                    xktmodel,
+                    duration: 0.1,
+                });
+                treeView.addModel(xktmodel.id, {
+                    rootName: name,
+                });
+                treeViewfl.addModel(xktmodel.id, {
+                    rootName: name,
+                });
+                treeViewlou.addModel(xktmodel.id, {
+                    rootName: name,
+                });
+                imgget();
+            });
+        }
+
+        //获取模型数量
+
+
+        this.state.nummodel = this.props.detail.modelList.length;
+
+        //循环读取数据
+        for (var i = 0; i < this.state.nummodel; i++) {
+
+            gltfPathUrl = this.props.detail.modelList[i].gltfurl;
+            jsonPathUrl = this.props.detail.modelList[i].jsonurl;
+            urlid = this.props.detail.modelList[i].id;
+            urlname = this.props.detail.modelList[i].name;
+            urltype = this.props.detail.modelList[i].type;
+            switch (urltype) {
+                case "gltf":
+                    lodgltfmodel(urlid, gltfPathUrl, jsonPathUrl, urlname);
+                    break;
+                case "obj":
+                    lodobjmodel(urlid, gltfPathUrl, jsonPathUrl, urlname);
+                    break;
+                case "stl":
+                    lodstlmodel(urlid, gltfPathUrl, jsonPathUrl, urlname);
+                    break;
+                case "ifc":
+                    lodifcmodel(urlid, gltfPathUrl, jsonPathUrl, urlname);
+                    break;
+                case "rvt":
+                    lodgltfmodel(urlid, gltfPathUrl, jsonPathUrl, urlname);
+                    break;
+                case "3ds":
+                    lod3dsmodel(urlid, gltfPathUrl, jsonPathUrl, urlname);
+                    break;
+                case "3dxml":
+                    lod3dxmlmodel(urlid, gltfPathUrl, jsonPathUrl, urlname);
+                    break;
+                case "json":
+                    lod3dxmlmodel(urlid, gltfPathUrl, jsonPathUrl, urlname);
+                    break;
+                case "xkt":
+                    lodxktmodel(urlid, gltfPathUrl, jsonPathUrl, urlname);
+                    break;
+                default:
+                    lodgltfmodel(urlid, gltfPathUrl, jsonPathUrl, urlname);
+                    console.log("未知格式模型");
+            }
+        };
+
+        var prevAnnotationClicked = null;
+        //标签事件，实现掠过点击等不同效果
+        //掠过时候自动查询该构件标签并显示,只查一次就够了
+        //而且碰撞检测结果直接显示就行，无效更新查询，
+        //增加多图
+        annotations.on("markerMouseEnter", (annotation) => {
+            let entity = annotation.entity;
+            if (annotation._values.glyph == "撞") {
+                annotation.setLabelShown(true);
+            } else if (annotation._values.glyph == "注") {
+                if (annotation._values.description != null) {
+                    annotation.setLabelShown(true);
+                } else {
+                    this.http.comment
+                        .commentsList({
+                            projectId: this.id,
+                            projectModelId: entity.model.id,
+                            isGroup: 1,
+                            elementId: entity.id,
+                        })
+                        .then((res) => {
+                            if (res.data.commentsList && res.data.commentsList.length > 0) {
+                                let list = res.data.commentsList[0];
+                                let glyphtype = "注";
+                                let titletext = "协同标注：" + list.elementName;
+                                let descriptiontext = list.list[0].content;
+                                let imgurl = null;
+                                if (list.list[0].imgs[0]) {
+                                    imgurl = list.list[0].imgs[0];
+                                }
+                                var labellist = res.data.commentsList[0].list;
+                                annotationFunc(
+                                    entity,
+                                    entity.id,
+                                    glyphtype,
+                                    titletext,
+                                    descriptiontext,
+                                    imgurl,
+                                    null,
+                                    null,
+                                    null,
+                                    labellist
+                                );
+                                annotation.setLabelShown(true);
+                            } else {
+                                annotation.setLabelShown(false);
+                                console.log("yjk温馨提示：未查询到数据");
+                                //这里判断的目的是为了防止新建标注的时候查询没数据，标签掠过时候显示null页面
+                            }
+                        });
+                }
+            }
+        });
+        annotations.on("markerMouseLeave", (annotation) => {
+            annotation.setLabelShown(false);
+        });
+        //标签单击事件
+        annotations.on("markerClicked", (annotation) => {
+            if (prevAnnotationClicked) {
+                prevAnnotationClicked.setLabelShown(false);
+            }
+            annotation.setLabelShown(true);
+            let annotationEntity = annotation.entity;
+            viewer.cameraFlight.flyTo(
+                {
+                    aabb: annotationEntity.aabb,
+                    duration: 0.5,
+                    fitFOV: 150,
+                },
+                () => {
+                    setTimeout(function () {
+                        viewer.scene.setObjectsHighlighted(
+                            viewer.scene.highlightedObjectIds,
+                            false
+                        );
+                    }, 500);
+                }
+            );
+            viewer.cameraControl.pivotPos = math.getAABB3Center(
+                annotation.entity.aabb
+            );
+            prevAnnotationClicked = annotation;
+        });
+        //标签列表查阅事件
+        this.commentFuncshow = function (elementid) {
+            var entity = viewer.scene.objects[elementid];
+            viewer.scene.objects[elementid].colorize = [0.3, 0.3, 0.8];
+            viewer.cameraFlight.flyTo(
+                {
+                    aabb: viewer.scene.getAABB(elementid),
+                    duration: 0.5,
+                    fitFOV: 50,
+                },
+                () => {
+                    setTimeout(function () {
+                        viewer.scene.setObjectsHighlighted(
+                            viewer.scene.highlightedObjectIds,
+                            true
+                        );
+                    }, 500);
+                }
+            );
+            // viewer.cameraControl.pivotPos = math.getAABB3Center(
+            //   viewer.scene.getAABB(elementid)
+            // );
+
+            this.http.comment
+                .commentsList({
+                    projectId: this.id,
+                    projectModelId: entity.model.id,
+                    isGroup: 1,
+                    elementId: elementid,
+                })
+                .then((res) => {
+                    if (res.data.commentsList && res.data.commentsList.length > 0) {
+                        let list = res.data.commentsList[0];
+                        let glyphtype = "注";
+                        let titletext = "协同标注：" + list.elementName;
+                        let descriptiontext = list.list[0].content;
+                        let imgurl = null;
+                        if (list.list[0].imgs[0]) {
+                            imgurl = list.list[0].imgs[0];
+                        }
+                        //labelcoment.push(res.data.commentsList[0].list);
+                        // for (var i = 0; i<res.data.commentsList[0].list.length;i++){
+                        //   labelcoment.push(res.data.commentsList[0].list[i]);
+                        //   console.log("开始添加,labelcoment");
+                        // }
+                        var labellist = res.data.commentsList[0].list;
+                        annotationFunc(
+                            entity,
+                            elementid,
+                            glyphtype,
+                            titletext,
+                            descriptiontext,
+                            imgurl,
+                            null,
+                            null,
+                            null,
+                            labellist
+                        );
+                    } else {
+                        console.log("YJK温馨提示，为查询到对应标注信息！code：“1004”");
+                    }
+                });
+        };
+        //碰撞检测列表事件，主要事件：生成碰撞标签，相机飞到指定构件
+        this.reactshow = function (
+            id,
+            firstid,
+            firstmodel,
+            secondid,
+            secondmodel,
+            posx,
+            posy,
+            posz,
+            imguil
+        ) {
+            const metaObject = viewer.metaScene.metaObjects[firstid];
+            if (!metaObject) {
+                return;
+            }
+            viewer.scene.setObjectsVisible(viewer.scene.objectIds, true);
+            viewer.scene.setObjectsXRayed(viewer.scene.objectIds, true);
+            viewer.scene.setObjectsSelected(viewer.scene.selectedObjectIds, false);
+            viewer.scene.setObjectsHighlighted(
+                viewer.scene.highlightedObjectIds,
+                false
+            );
+            metaObject.withMetaObjectsInSubtree((metaObject) => {
+                //const entity = viewer.scene.objects[firstid,secondid];
+                const entity = viewer.scene.objects[metaObject.id];
+                const entity2 = viewer.scene.objects[secondid];
+                if (entity && entity2) {
+                    entity.xrayed = false;
+                    entity2.xrayed = false;
+                }
+            });
+            viewer.cameraFlight.flyTo(
+                {
+                    aabb: viewer.scene.getAABB(firstid),
+                    duration: 0.5,
+                    fitFOV: 150,
+                },
+                () => {
+                    setTimeout(function () {
+                        viewer.scene.setObjectsHighlighted(
+                            viewer.scene.highlightedObjectIds,
+                            true
+                        );
+                    }, 500);
+                }
+            );
+            viewer.cameraControl.pivotPos = math.getAABB3Center(
+                viewer.scene.getAABB(firstid)
+            );
+            //修改碰撞的两个构件颜色为红色，透明度为不透明，玻璃看不清
+            viewer.scene.objects[firstid].colorize = [2.0, 0.0, 0.0];
+            viewer.scene.objects[secondid].colorize = [2.0, 0.0, 0.0];
+            viewer.scene.objects[firstid].opacity = 1.0;
+            viewer.scene.objects[secondid].opacity = 1.0;
+            let glyphtype = "撞";
+            let titletext = "碰撞检查结果:";
+            let descriptiontext =
+                "构件" +
+                viewer.metaScene.metaObjects[firstid].name +
+                "与构件" +
+                viewer.metaScene.metaObjects[secondid].name +
+                "发生了碰撞";
+            let imgurl = imguil;
+            let entity = viewer.scene.objects[firstid];
+            //entity,entityid,glyphtype,titletext,descriptiontext,imgurl
+            annotationFunc(
+                entity,
+                firstid.id,
+                glyphtype,
+                titletext,
+                descriptiontext,
+                imgurl,
+                posx,
+                posz,
+                -posy
+            );
+        };
+        var lastEntity = null;
+        viewer.scene.input.on("mousemove", function (coords) {
+            let hit = viewer.scene.pick({
+                canvasPos: coords,
+            });
+            if (hit) {
+                if (!lastEntity || hit.entity.id !== lastEntity.id) {
+                    if (lastEntity) {
+                        lastEntity.highlighted = false;
+                    }
+                    lastEntity = hit.entity;
+                    hit.entity.highlighted = true;
+                }
+            } else {
+                if (lastEntity) {
+                    lastEntity.highlighted = false;
+                    lastEntity = null;
+                }
+            }
+        });
+        ////适配移动端与pad端
+        viewer.cameraControl.on("picked", (e) => {
+            let entity = e.entity;
+            let canvasPos = e.canvasPos;
+            console.log("doublePickedSurface", entity);
+            _this.getattributeData(viewer.metaScene.metaObjects[entity.id]);
+        });
+        var lastSelectEntity = null;
+        var lastSelectEntityColor = null;
+        var timer = null;
+        viewer.scene.input.on("mouseclicked", function (coords) {
+            clearTimeout(timer);
+
+            timer = setTimeout(function () {
+                //初始化一个延时
+            }, 250);
+            let hit = viewer.scene.pick({
+                canvasPos: coords,
+            });
+            console.log("获取的坐标是：", hit._worldPos);
+            //查看坐标系
+            console.log("viewer.scene.camera.worldAxis", viewer.scene.camera);
+            if (hit) {
+                if (!lastSelectEntity || hit.entity.id !== lastSelectEntity.id) {
+                    if (lastSelectEntity) {
+                        lastSelectEntity.colorize = lastSelectEntityColor;
+                    }
+                    lastSelectEntity = hit.entity;
+                    console.log(lastSelectEntity);
+                    lastSelectEntityColor = lastSelectEntity.colorize;
+                    // hit.entity.colorize = [1.0, 0, 0];
+                    hit.entity.highlighted = true;
+                }
+                if (viewer.metaScene.metaObjects) {
+                    _this.getattributeData(viewer.metaScene.metaObjects[hit.entity.id]);
+                }
+            } else {
+                if (lastSelectEntity) {
+                    lastSelectEntity.colorize = lastSelectEntityColor;
+                    lastSelectEntity = null;
+                }
+                if (prevAnnotationClicked) {
+                    prevAnnotationClicked.setLabelShown(false);
+                }
+            }
+        });
+
+        viewer.scene.input.on("dblclick", function (coords) {
+            console.log("dj", 22222);
+            clearTimeout(timer);
+            // let canvasElement = document.querySelector("#myCanvas");
+            // var leftCoords = canvasElement.getBoundingClientRect().left;
+            // var rightCoords = canvasElement.getBoundingClientRect().right;
+            // var topCoords = canvasElement.getBoundingClientRect().top;
+            // var bottomCoords = canvasElement.getBoundingClientRect().bottom;
+            /*       console.log(
+              "双击x:" +
+                coords[0] +
+                " y:" +
+                coords[1] +
+                " 3:" +
+                coords[2] +
+                " 4:" +
+                coords[3]
+            ); */
+
+            // if (
+            //   coords[2] < leftCoords ||
+            //   coords[2] > rightCoords ||
+            //   coords[3] < topCoords ||
+            //   coords[3] > bottomCoords
+            // ) {
+            //   coords[0] = 0;
+            //   coords[1] = 0;
+            // }
+
+            let hit = viewer.scene.pick({
+                canvasPos: coords,
+            });
+
+            if (hit && hit.entity.id !== null) {
+                if (_this.asideVisible == 0) {
+                    _this.asideVisible = 1;
+                }
+                //alert("击中");
+                valueToVue = hit.entity.id;
+
+                if (viewer.metaScene.metaObjects) {
+                    _this.getattributeData(viewer.metaScene.metaObjects[hit.entity.id]);
+                }
+                // document.getElementById("MySelectId").value = hit.entity.yjkElementId;
+                // document.getElementById("MySelectId").dispatchEvent(new Event("input"));
+                // document.getElementById("selectNodeType").value = hit.entity.yjkType;
+                // document
+                //   .getElementById("selectNodeType")
+                //   .dispatchEvent(new Event("input"));
+                // document.getElementById("selectNodeFlrID").value = hit.entity.FlrID;
+                // document
+                //   .getElementById("selectNodeFlrID")
+                //   .dispatchEvent(new Event("input"));
+            } else {
+                //alert("未击中");
+            }
+        });
+        // esc 事件
+
+        window.onresize = () => {
+            if (!this.checkFull()) {
+
+                if (lastSelectEntity) {
+                    lastSelectEntity.colorize = lastSelectEntityColor;
+                    lastSelectEntity = null;
+                    this.attributeData = [];
+                }
+                if (_this.distanceMeasurements) {
+                    //    _this.distanceMeasurements.clear();  //  清除测距
+                    _this.distanceMeasurements.control.deactivate();
+                    _this.distanceMeasurements.control.reset();
+                }
+                // console.log("退出全屏========================================");
+                this.fullscreen = false;
+            }
+        };
+        document.addEventListener("keyup", (e) => {
+            if (e.keyCode == 27) {
+                if (lastSelectEntity) {
+                    lastSelectEntity.colorize = lastSelectEntityColor;
+                    lastSelectEntity = null;
+                    this.attributeData = [];
+                }
+                if (_this.distanceMeasurements) {
+                    //    _this.distanceMeasurements.clear();  //  清除测距
+                    _this.distanceMeasurements.control.deactivate();
+                    _this.distanceMeasurements.control.reset();
+                }
+            }
+        });
+
+        const treeViewContextMenu = new ContextMenu({
+            items: [
+                [
+                    {
+                        title: "构件视图",
+                        doAction: function (context) {
+                            const scene = context.viewer.scene;
+                            const objectIds = [];
+                            context.treeViewPlugin.withNodeTree(
+                                context.treeViewNode,
+                                (treeViewNode) => {
+                                    if (treeViewNode.objectId) {
+                                        objectIds.push(treeViewNode.objectId);
+                                    }
+                                }
+                            );
+                            scene.setObjectsVisible(objectIds, true);
+                            scene.setObjectsHighlighted(objectIds, true);
+                            context.viewer.cameraFlight.flyTo(
+                                {
+                                    projection: "perspective",
+                                    aabb: scene.getAABB(objectIds),
+                                    duration: 0.5,
+                                },
+                                () => {
+                                    setTimeout(function () {
+                                        scene.setObjectsHighlighted(
+                                            scene.highlightedObjectIds,
+                                            false
+                                        );
+                                    }, 500);
+                                }
+                            );
+                        },
+                    },
+                    {
+                        title: "整体视图",
+                        doAction: function (context) {
+                            const scene = context.viewer.scene;
+                            context.viewer.cameraFlight.flyTo({
+                                projection: "perspective",
+                                aabb: scene.getAABB({}),
+                                duration: 0.5,
+                            });
+                        },
+                    },
+                ],
+                [
+                    {
+                        title: "隐藏构件",
+                        doAction: function (context) {
+                            context.treeViewPlugin.withNodeTree(
+                                context.treeViewNode,
+                                (treeViewNode) => {
+                                    if (treeViewNode.objectId) {
+                                        const entity =
+                                            context.viewer.scene.objects[treeViewNode.objectId];
+                                        if (entity) {
+                                            entity.visible = false;
+                                        }
+                                    }
+                                }
+                            );
+                        },
+                    },
+                    {
+                        title: "隐藏其他",
+                        doAction: function (context) {
+                            const scene = context.viewer.scene;
+                            scene.setObjectsVisible(scene.visibleObjectIds, false);
+                            scene.setObjectsXRayed(scene.xrayedObjectIds, false);
+                            scene.setObjectsSelected(scene.selectedObjectIds, false);
+                            scene.setObjectsHighlighted(scene.highlightedObjectIds, false);
+                            context.treeViewPlugin.withNodeTree(
+                                context.treeViewNode,
+                                (treeViewNode) => {
+                                    if (treeViewNode.objectId) {
+                                        const entity = scene.objects[treeViewNode.objectId];
+                                        if (entity) {
+                                            entity.visible = true;
+                                        }
+                                    }
+                                }
+                            );
+                        },
+                    },
+                    {
+                        title: "隐藏所有",
+                        getEnabled: function (context) {
+                            return context.viewer.scene.visibleObjectIds.length > 0;
+                        },
+                        doAction: function (context) {
+                            context.viewer.scene.setObjectsVisible(
+                                context.viewer.scene.visibleObjectIds,
+                                false
+                            );
+                        },
+                    },
+                ],
+                [
+                    {
+                        title: "显示",
+                        doAction: function (context) {
+                            context.treeViewPlugin.withNodeTree(
+                                context.treeViewNode,
+                                (treeViewNode) => {
+                                    if (treeViewNode.objectId) {
+                                        const entity =
+                                            context.viewer.scene.objects[treeViewNode.objectId];
+                                        if (entity) {
+                                            entity.visible = true;
+                                            entity.xrayed = false;
+                                            entity.selected = false;
+                                        }
+                                    }
+                                }
+                            );
+                        },
+                    },
+                    {
+                        title: "显示其他",
+                        doAction: function (context) {
+                            const scene = context.viewer.scene;
+                            scene.setObjectsVisible(scene.objectIds, true);
+                            scene.setObjectsXRayed(scene.xrayedObjectIds, false);
+                            scene.setObjectsSelected(scene.selectedObjectIds, false);
+                            context.treeViewPlugin.withNodeTree(
+                                context.treeViewNode,
+                                (treeViewNode) => {
+                                    if (treeViewNode.objectId) {
+                                        const entity = scene.objects[treeViewNode.objectId];
+                                        if (entity) {
+                                            entity.visible = false;
+                                        }
+                                    }
+                                }
+                            );
+                        },
+                    },
+                    {
+                        title: "显示所有",
+                        getEnabled: function (context) {
+                            const scene = context.viewer.scene;
+                            return scene.numVisibleObjects < scene.numObjects;
+                        },
+                        doAction: function (context) {
+                            const scene = context.viewer.scene;
+                            scene.setObjectsVisible(scene.objectIds, true);
+                            scene.setObjectsXRayed(scene.xrayedObjectIds, false);
+                            scene.setObjectsSelected(scene.selectedObjectIds, false);
+                        },
+                    },
+                ],
+            ],
+        });
+        //取消目录树右击事件 via wangjinchang
+        // treeView.on("contextmenu", (e) => {
+        //   treeViewContextMenu.context = {
+        //     viewer: e.viewer,
+        //     treeViewPlugin: e.treeViewPlugin,
+        //     treeViewNode: e.treeViewNode,
+        //     entity: e.viewer.scene.objects[e.treeViewNode.objectId],
+        //   };
+        //   treeViewContextMenu.show(e.event.pageX, e.event.pageY);
+        // });
+        treeView.on("nodeTitleClicked", (e) => {
+            const scene = viewer.scene;
+            const objectIds = [];
+            e.treeViewPlugin.withNodeTree(e.treeViewNode, (treeViewNode) => {
+                if (treeViewNode.objectId) {
+                    objectIds.push(treeViewNode.objectId);
+                }
+            });
+            e.treeViewPlugin.unShowNode();
+            scene.setObjectsXRayed(scene.objectIds, true);
+            scene.setObjectsVisible(scene.objectIds, true);
+            scene.setObjectsXRayed(objectIds, false);
+            viewer.cameraFlight.flyTo(
+                {
+                    aabb: scene.getAABB(objectIds),
+                    duration: 0.5,
+                },
+                () => {
+                    setTimeout(function () {
+                        scene.setObjectsVisible(scene.xrayedObjectIds, false);
+                        scene.setObjectsXRayed(scene.xrayedObjectIds, false);
+                    }, 500);
+                }
+            );
+        });
+        treeViewfl.on("nodeTitleClicked", (e) => {
+            const scene = viewer.scene;
+            const objectIds = [];
+            e.treeViewPlugin.withNodeTree(e.treeViewNode, (treeViewNode) => {
+                if (treeViewNode.objectId) {
+                    objectIds.push(treeViewNode.objectId);
+                }
+            });
+            e.treeViewPlugin.unShowNode();
+            scene.setObjectsXRayed(scene.objectIds, true);
+            scene.setObjectsVisible(scene.objectIds, true);
+            scene.setObjectsXRayed(objectIds, false);
+            viewer.cameraFlight.flyTo(
+                {
+                    aabb: scene.getAABB(objectIds),
+                    duration: 0.5,
+                },
+                () => {
+                    setTimeout(function () {
+                        scene.setObjectsVisible(scene.xrayedObjectIds, false);
+                        scene.setObjectsXRayed(scene.xrayedObjectIds, false);
+                    }, 500);
+                }
+            );
+        });
+        const canvasContextMenu = new ContextMenu({
+            enabled: true,
+            context: {
+                viewer: viewer,
+            },
+            items: [
+                [
+                    {
+                        getTitle: (context) => {
+                            return "隐藏全部";
+                        },
+                        getEnabled: function (context) {
+                            return context.viewer.scene.numVisibleObjects > 0;
+                        },
+                        doAction: function (context) {
+                            context.viewer.scene.setObjectsVisible(
+                                context.viewer.scene.visibleObjectIds,
+                                false
+                            );
+                        },
+                    },
+                    {
+                        getTitle: (context) => {
+                            return "显示全部 ";
+                        },
+                        // getEnabled: function (context) {
+                        //   const scene = context.viewer.scene;
+                        //   return (scene.numVisibleObjects < scene.numObjects);
+                        // },
+                        doAction: function (context) {
+                            const scene = context.viewer.scene;
+                            scene.setObjectsVisible(scene.objectIds, true);
+                            scene.setObjectsXRayed(scene.xrayedObjectIds, false);
+                            scene.setObjectsSelected(scene.selectedObjectIds, false);
+                        },
+                    },
+                ],
+                [
+                    {
+                        title: "整体视图",
+                        doAction: function (context) {
+                            const viewer = context.viewer;
+                            const scene = viewer.scene;
+                            const sceneAABB = scene.getAABB(scene.visibleObjectIds);
+                            viewer.cameraFlight.flyTo({
+                                aabb: sceneAABB,
+                                duration: 0.5,
+                            });
+                            viewer.cameraControl.pivotPos = math.getAABB3Center(sceneAABB);
+                        },
+                    },
+                ],
+                /*      [
+                  {
+                    title: "全不选",
+                    getEnabled: function (context) {
+                      return context.viewer.scene.numSelectedObjects > 0;
+                    },
+                    doAction: function (context) {
+                      context.viewer.scene.setObjectsSelected(
+                        context.viewer.scene.selectedObjectIds,
+                        false
+                      );
+                    },
+                  },
+                ], */
+            ],
+        });
+        var maxAnnotationIndex = this.maxAnnotationNum;
+        const objectContextMenu = new ContextMenu({
+            items: [
+                [
+                    {
+                        getTitle: (context) => {
+                            console.log("context.entity.selected", context.entity);
+                            return !context.entity.selected ? "选中" : "取消选中";
+                        },
+
+                        doAction: function (context) {
+                            context.entity.selected = !context.entity.selected;
+                            context.entity.highlighted = !context.entity.highlighted;
+                        },
+                    },
+                    {
+                        title: "清除选择",
+                        getEnabled: function (context) {
+                            return context.viewer.scene.numSelectedObjects > 0;
+                        },
+                        doAction: function (context) {
+                            context.viewer.scene.setObjectsSelected(
+                                context.viewer.scene.selectedObjectIds,
+                                false
+                            );
+                        },
+                    },
+                    {
+                        title: "构件信息",
+                        doAction: function (context) {
+                            // if (_this.asideVisible == 0) {
+                            //   _this.asideVisible = 1;
+                            // }
+                            //  context.entity.selected = true;
+                            _this.visible = true;
+                            _this.$emit("updateTwoChecked", true);
+                            _this.$emit("updateCommentVisible", false);
+
+                            context.viewer.scene.setObjectsSelected(
+                                context.viewer.scene.selectedObjectIds,
+                                false
+                            );
+                            context.entity.selected = !context.entity.selected;
+                            valueToVue = context.entity.id;
+                            //console.log("构建信息", valueToVue);
+                            // console.log('构建信息',viewer.metaScene.metaObjects)
+                            // _this.getattributeData(viewer.metaScene.metaObjects[valueToVue]);
+                            if (viewer.metaScene.metaObjects) {
+                                _this.getattributeData(
+                                    viewer.metaScene.metaObjects[valueToVue]
+                                );
+                            }
+                            // document.getElementById("MySelectId").value =
+                            //   context.entity.yjkElementId;
+                            // document
+                            //   .getElementById("MySelectId")
+                            //   .dispatchEvent(new Event("input"));
+                            // document.getElementById("selectNodeType").value =
+                            //   context.entity.yjkType;
+                            // document
+                            //   .getElementById("selectNodeType")
+                            //   .dispatchEvent(new Event("input"));
+                            // document.getElementById("selectNodeFlrID").value =
+                            //   context.entity.FlrID;
+                            // document
+                            //   .getElementById("selectNodeFlrID")
+                            //   .dispatchEvent(new Event("input"));
+                        },
+                    },
+
+                    // {
+                    //     title: "添加标注",
+                    //     doAction: function (context) {
+                    //         context.entity.colorize = [0.3, 0.3, 0.8];
+                    //         //不要选择是不是效果更好
+                    //         //context.entity.selected = !context.entity.selected;
+                    //         //飞到构件视图
+
+                    //         viewer.cameraFlight.flyTo(
+                    //             {
+                    //                 aabb: viewer.scene.getAABB(context.entity.id),
+                    //                 duration: 0.5,
+                    //                 fitFOV: 50,
+                    //             },
+                    //             () => {
+                    //                 setTimeout(function () {
+                    //                     viewer.scene.setObjectsHighlighted(
+                    //                         viewer.scene.highlightedObjectIds,
+                    //                         true
+                    //                     );
+                    //                 }, 500);
+                    //             }
+                    //         );
+
+                    //         context.entity.highlighted = !context.entity.highlighted;
+                    //         var entityinfo = {};
+                    //         const entity = context.entity;
+                    //         entity.highlighted = true;
+                    //         let entityown = entity.model.id;
+                    //         //let entityown = viewer.metaScene.metaObjects[context.entity.id].parent.parent.parent.name;
+                    //         let entityparent = null;
+                    //         if (
+                    //             viewer.metaScene.metaObjects[context.entity.id].parent.parent
+                    //                 .name
+                    //         ) {
+                    //             entityparent =
+                    //                 viewer.metaScene.metaObjects[context.entity.id].parent.parent
+                    //                     .name;
+                    //         } else {
+                    //             entityparent = null;
+                    //         }
+                    //         let entityid = viewer.metaScene.metaObjects[context.entity.id].id;
+                    //         let entityname =
+                    //             viewer.metaScene.metaObjects[context.entity.id].name;
+                    //         entityinfo = {
+                    //             projectModelId: entityown,
+                    //             elementFloor: entityparent,
+                    //             elementId: entityid,
+                    //             elementType: entityname,
+                    //         };
+
+                    //         _this.commentShow(entityinfo);
+                    //         const aabb = entity.aabb;
+                    //         const entityCenter = math.getAABB3Center(aabb);
+                    //         //构件id
+                    //         const metaObjectid = viewer.metaScene.metaObjects[entity.id];
+                    //         const glyphtype = "注";
+                    //         let titletext = null;
+                    //         let descriptiontext = null;
+                    //         let imgurl = null;
+
+                    //         annotationFunc(
+                    //             entity,
+                    //             entityid,
+                    //             glyphtype,
+                    //             titletext,
+                    //             descriptiontext,
+                    //             imgurl
+                    //         );
+                    //     },
+                    // },
+                ],
+                [
+                    {
+                        title: "构件视图",
+                        doAction: function (context) {
+                            const viewer = context.viewer;
+                            const scene = viewer.scene;
+                            const entity = context.entity;
+                            viewer.cameraFlight.flyTo(
+                                {
+                                    aabb: entity.aabb,
+                                    duration: 0.5,
+                                },
+                                () => {
+                                    setTimeout(function () {
+                                        scene.setObjectsHighlighted(
+                                            scene.highlightedObjectIds,
+                                            false
+                                        );
+                                    }, 500);
+                                }
+                            );
+                            viewer.cameraControl.pivotPos = math.getAABB3Center(entity.aabb);
+                        },
+                    },
+                    {
+                        title: "整体视图",
+                        doAction: function (context) {
+                            const viewer = context.viewer;
+                            const scene = viewer.scene;
+                            const sceneAABB = scene.getAABB(scene.visibleObjectIds);
+                            viewer.cameraFlight.flyTo({
+                                aabb: sceneAABB,
+                                duration: 0.5,
+                            });
+                            viewer.cameraControl.pivotPos = math.getAABB3Center(sceneAABB);
+                        },
+                    },
+                    {
+                        title: "树定位",
+                        doAction: function (context) {
+                            const objectId = context.entity.id;
+                            // console.log("模型id: " + objectId);
+                            context.treeViewPlugin.showNode(objectId);
+                        },
+                    },
+                ],
+                [
+                    {
+                        title: "隐藏构件",
+                        getEnabled: function (context) {
+                            return context.entity.visible;
+                        },
+                        doAction: function (context) {
+                            context.entity.visible = false;
+                        },
+                    },
+                    {
+                        title: "隐藏其他",
+                        doAction: function (context) {
+                            const viewer = context.viewer;
+                            const scene = viewer.scene;
+                            const entity = context.entity;
+                            const metaObject = viewer.metaScene.metaObjects[entity.id];
+                            if (!metaObject) {
+                                return;
+                            }
+                            scene.setObjectsVisible(scene.visibleObjectIds, false);
+                            scene.setObjectsHighlighted(scene.highlightedObjectIds, false);
+                            metaObject.withMetaObjectsInSubtree((metaObject) => {
+                                const entity = scene.objects[metaObject.id];
+                                if (entity) {
+                                    entity.visible = true;
+                                }
+                            });
+                        },
+                    },
+                    /*       {
+                      title: "隐藏所有",
+                      getEnabled: function (context) {
+                        return context.viewer.scene.numVisibleObjects > 0;
+                      },
+                      doAction: function (context) {
+                        context.viewer.scene.setObjectsVisible(
+                          context.viewer.scene.visibleObjectIds,
+                          false
+                        );
+                      },
+                    }, */
+                    {
+                        title: "显示所有",
+                        doAction: function (context) {
+                            const scene = context.viewer.scene;
+                            scene.setObjectsVisible(scene.objectIds, true);
+                            scene.setObjectsXRayed(scene.xrayedObjectIds, false);
+                            scene.setObjectsSelected(scene.selectedObjectIds, false);
+                        },
+                    },
+                ],
+            ],
+            enabled: true,
+        });
+        viewer.cameraControl.on("rightClick", function (e) {
+            var hit = viewer.scene.pick({
+                canvasPos: e.canvasPos,
+            });
+            if (prevAnnotationClicked) {
+                prevAnnotationClicked.setLabelShown(false);
+            }
+            if (hit && hit.entity.isObject) {
+                objectContextMenu.context = {
+                    viewer: viewer,
+                    treeViewPlugin: treeView,
+                    entity: hit.entity,
+                };
+                objectContextMenu.show(e.event.pageX, e.event.pageY);
+            } else {
+                canvasContextMenu.context = {
+                    viewer: viewer,
+                };
+                canvasContextMenu.show(e.event.pageX, e.event.pageY);
+            }
+            e.event.preventDefault();
+        });
+
+
+    }
+    render() {
+        return (
+
+            <div id="yjkContainer">
+                <Draggable handle='.top'>
+                    <div>
+                        <div className="view" style={{ display: this.state.view }} >
+                            <div className="top">
+                                <span className="active">视图</span>
+                                <i className='yjk- yjk-yingjianke-_guanbichuangkou' onClick={(e) => this.closeModel(e, 1)}></i>
+                            </div>
+                            {/* <Tabs type="border-card" activeName="1" onTabClick={(tab) => console.log(tab.props.name)}>
+                                <Tabs.Pane label="模型" name="1">
+                                    <div id="treeflExplorer"></div>
+                                </Tabs.Pane>
+                                <Tabs.Pane label="楼层" name="2">
+                                    <div id="treelouExplorer"></div>
+                                </Tabs.Pane>
+                                <Tabs.Pane label="构件" name="3">
+                                    <div id="treeExplorer"></div>
+                                </Tabs.Pane>
+                            </Tabs> */}
+
+                            <div className="tab">
+                                <div className="tabTop">
+                                    {this.state.tabList.map((item, index) => {
+                                        return (
+                                            <span key={index} className={index == this.state.showTab ? "active" : ''}
+
+                                                onClick={(e) => this.tabClick(e, index)}
+                                            >{item.name}</span>
+                                        );
+                                    })}
+                                </div>
+                                {this.state.tabList.map((item, index) => {
+                                    return (
+                                        <div key={index} className={`tabcontent ${index == this.state.showTab ? "active" : ''}`} id={item.id}>
+                                        </div>
+                                    );
+                                })}
+
+
+                            </div>
+
+                        </div >
+                    </div>
+                </Draggable>
+                <Draggable handle='.top'>
+                    <div>
+
+                        <div className="annotationTable" style={{ display: this.state.visible }}>
+                            <div className="top">
+                                <span className="active">基本信息</span>
+                                <i className='yjk- yjk-yingjianke-_guanbichuangkou' onClick={(e) => this.closeModel(e, 2)}></i>
+                            </div>
+                            <div className="box" >
+                                <div className="htop"><span>属性</span> <span >值</span></div>
+                                <Table style={{ width: '100%' }}
+                                    columns={this.state.columns}
+                                    showHeader={false}
+                                    stripe={true}
+                                    data={this.state.attributeData}>
+                                </Table>
+                            </div>
+                        </div>
+                    </div>
+                </Draggable>
+                <div className="projectInfo" style={{ display: this.state.projectInfo }} >
+                    <div className="top">
+                        基本信息      <i className='yjk- yjk-yingjianke-_guanbichuangkou' onClick={(e) => this.closeModel(e, 3)}></i>
+                    </div>
+                    <div className="threeCon">
+                        <div className="threeBox">
+                            模型数量：<span>{this.state.nownummodel}/{this.state.nummodel}</span>
+                        </div>
+                        <div className="threeBox">
+                            构件数量：<span>{this.state.numobj}</span>
+                        </div>
+                        <div className="threeBox">
+                            三角面数量：<span>{this.state.sumnummesh}</span>
+                        </div>
+                        <div className="threeBox">
+                            模型加载时间：<span>{this.state.loadtime}秒</span>
+                        </div>
+                    </div>
+                    <div className="footer">盈建科软件</div>
+                </div>
+
+                <div id="Tools" className="tools-left">
+                    {this.state.navList.map((item, index) => {
+                        return (
+                            <div className="item" effect="dark" title={item.content} key={index} style={{ display: item.style }}>
+                                <span>
+                                    <i className={`yjk-   ${item.icon} ${index == this.state.active ? "active" : index == this.state.active2 ? 'active2' : ''}`}
+                                        onClick={(e) => this.handleClick(e, index)}  >
+
+                                    </i>
+                                </span>
+                            </div>
+                        );
+                    })}
+
+
+
+
+
+                </div><div id="myViewer">
+                    <div id="snapshots"></div>
+                </div>
+            </div >
+        )
+    }
+
+}
+
+
+
+export default Gltf;