<template>
    <div id="app" class="bigScreen" v-if="showS3DModel">
        <div class="headerBox">
            <div class="header_title">
                塔吊可视化
            </div>
            <div class="close-btn" @click="closePage">
                <img src="./../../../assets/images/bigSiteVisualization/close-icon.png">
            </div>
        </div>
        <remote-css href="./css/BOS3DUI.min.css"></remote-css>
        <!-- <remote-css href="http://bos3d.bimwinner.com/static/UI/latest/BOS3DUI.min.css"></remote-css> -->
       <div class="left-box">
           <div class="box-item h-30">
               <div class="box-title">
                   <span>基本信息</span>
                   <i>ESSETIAL INFORMATION</i>
               </div>
               <div class="box-content flex">
                   <div class="info-label">
                       <div>项目名称：</div>
                       <div>项目地址：</div>
                       <div>项目经理：</div>
                       <div>联系电话：</div>
                       <div>项目编号：</div>
                       <div>建筑面积：</div>
                       <div>工程状态：</div>
                   </div>
                   <div class="info-content">
                       <div>{{projectInfo.name ? projectInfo.name: '- -'}}</div>
                       <div>{{projectInfo.projectAddress ? projectInfo.projectAddress: '- -'}}</div>
                       <div>{{projectInfo.projectManage ? projectInfo.projectManage: '- -'}}</div>
                       <div>{{projectInfo.projectTel ? projectInfo.projectTel: '- -'}}</div>
                       <div>{{projectInfo.projectNumber ? projectInfo.projectNumber: '- -'}}</div>
                       <div>{{projectInfo.projectAcreage ? projectInfo.projectAcreage: '- -'}}㎡</div>
                       <div>{{getProjectState(projectInfo.bulidStatus)}}</div>
                       
                   </div>
               </div>
           </div>
           <div class="box-item h-30">
               <div class="box-title">
                   <span>设备信息</span>
                   <i>EQUIPMENT INFORMATION</i>
               </div>
               <div class="box-content">
                   <div class="flex">
                        <div class="card-box m-50">
                            <div class="count">{{devCount.devNum}}</div>
                            <span>塔吊总数</span>
                            <img src="./../../../assets/images/bigSiteVisualization/tower-icon.png"/>
                        </div>
                        <div class="card-box">
                            <div class="count">{{devCount.devOnline}}</div>
                            <span>在线总数</span>
                            <img src="./../../../assets/images/bigSiteVisualization/online-icon.png"/>
                        </div>
                   </div>
                   <div class="flex">
                        <div class="card-box m-50">
                            <div class="count">{{devCount.collideDevNum}}</div>
                            <span>防碰撞设备</span>
                            <img src="./../../../assets/images/bigSiteVisualization/crash-icon.png"/>
                        </div>
                        <div class="card-box">
                            <div class="count">{{devCount.faultNum}}</div>
                            <span>故障总数</span>
                            <img src="./../../../assets/images/bigSiteVisualization/hook-icon.png"/>
                        </div>
                   </div>
               </div>
           </div>
           <div class="box-item h-30">
               <div class="box-title">
                   <span>报警信息</span>
                   <i>ALARM INFORMATION</i>
               </div>
               <div class="box-content" style="padding-left: 0">
                   <div class="box-table">
                       <div class="table-header flex">
                           <div style="width: 28%;padding-left: 10px">报警设备</div>
                           <div style="width: 42%;padding-left: 10px">报警时间</div>
                           <div style="width: 30%;padding-left: 10px">报警类型</div>
                       </div>
                       <vue-scroll style="height: calc(100% - 31px)">
                        <div class="table-content">
                            <div class="table-item flex" v-for="(item,index) in alarmData" :key="index">
                                    <div style="width: 24%;padding-left: 10px">{{item.devName}}</div>
                                    <div style="width: 42%;">{{item.alarmTime}}</div>
                                    <div style="width: 36%;">{{item.alarmName}}</div>
                            </div>
                        </div>
                       </vue-scroll>
                   </div>
               </div>
           </div>
       </div>
        <div class="viewportBox">
            <div id="viewportTwo"  style="width: 100%;height: 100%;" class="viewportTwo"/>
        </div>
        
        <div class="right-box">
            <div class="box-item" style="height: 66.6%">
               <div class="box-title">
                   <span>今日数据</span>
                   <i>TODAYS DATA</i>
               </div>
               <div class="box-content" style="padding-left: 0">
                   <div class="data-item">
                       <div>当前在线率：<span class="count">{{todayData.devOnlineRatio}}%</span></div>
                       <!-- <p>
                           同环比：
                           <i>0%</i>
                           <img src="./../../../assets/images/bigSiteVisualization/up-icon.png"/>
                       </p> -->
                   </div>
                   <div class="data-item">
                       <div>今日报警：<span class="count">{{todayData.alarmNum}}次</span></div>
                       <p>
                           同环比：
                           <i>{{todayData.alarmRatio}}%</i>
                           <img v-if="todayData.alarmRatio >= 0" src="./../../../assets/images/bigSiteVisualization/up-icon.png"/>
                           <img v-else src="./../../../assets/images/bigSiteVisualization/down-icon.png"/>
                       </p>
                   </div>
                   <div class="data-item">
                       <div>今日预警：<span class="count">{{todayData.warningNum}}次</span></div>
                       <p>
                           同环比：
                           <i>{{todayData.warningRatio}}%</i>
                           <img v-if="todayData.warningRatio >= 0" src="./../../../assets/images/bigSiteVisualization/up-icon.png"/>
                           <img v-else src="./../../../assets/images/bigSiteVisualization/down-icon.png"/>
                       </p>
                   </div>
                   <div class="data-item">
                       <div>今日吊次：<span class="count">{{todayData.cycleNum}}次</span></div>
                       <p>
                           同环比：
                           <i>{{todayData.cycleRatio}}%</i>
                           <img v-if="todayData.cycleRatio >= 0" src="./../../../assets/images/bigSiteVisualization/up-icon.png"/>
                           <img v-else src="./../../../assets/images/bigSiteVisualization/down-icon.png"/>
                       </p>
                   </div>
                   <div class="data-item">
                       <div>今日工时：<span class="count">{{todayData.timeNum}}h</span></div>
                       <p>
                           同环比：
                           <i>{{todayData.timeRatio}}%</i>
                           <img v-if="todayData.timeRatio >= 0" src="./../../../assets/images/bigSiteVisualization/up-icon.png"/>
                           <img v-else src="./../../../assets/images/bigSiteVisualization/down-icon.png"/>
                       </p>
                   </div>
               </div>
           </div>
           <div class="box-item h-30">
               <div class="box-title">
                   <span>今日塔吊报警排名</span>
                   <i>TODAYS ALARM TOWER CRANE RANKING</i>
               </div>
               <div class="box-content" style="padding-left: 0">
                   <vue-scroll>
                    <div class="tower-box">
                        <div class="tower-item" v-for="(item,index) in towerRanking" :key="index">
                            <span style="width: 80px">{{item.devName}}</span>
                            <div class="progress"><div class="content" :style="{'width': (item.alarmNum/towerRanking[0].alarmNum)*100+'%'}"></div></div>
                            <span style="width: 40px">{{item.alarmNum}}</span>
                        </div>
                    </div>
                   </vue-scroll>
               </div>
           </div>
            
        </div>
        <!-- <div class="footerBox">
            
        </div> -->
        <div class="info_wrap">
            <div :id="'dialogBox'+item.towerSn" :ref="'dialogBox'+item.towerSn" v-for="(item,index) in resData" class="info_box" :key="index">
                <!-- <img style="width: 1022px;height: 320px" src="./../../../assets/images/bigSiteVisualization/page-bg.png"/> -->
                <div class="info-title">
                    <span>{{item.towerName}}</span>
                </div>   
                <div class="dialog_info">
                    <div class="info_bx">
                        <div class="info-item">
                            <span>{{item.activeRanger?item.activeRanger:'0'}}</span>
                            <div>幅度(m)</div>
                            <img class="info-icon" src="./../../../assets/images/bigSiteVisualization/icon-01.png"/>
                        </div>
                        <div class="info-item">
                            <span>{{item.activeLoading ? item.activeLoading:'0'}}</span>
                            <div>吊重(kg)</div>
                            <img class="info-icon" src="./../../../assets/images/bigSiteVisualization/icon-02.png"/>
                        </div>
                        <div class="info-item">
                            <span>{{item.activeWindspeed?item.activeWindspeed:'0'}}</span>
                            <div>风速(m/s)</div>
                            <img class="info-icon" src="./../../../assets/images/bigSiteVisualization/icon-03.png"/>
                        </div>
                    </div>
                    <div class="info_bx">
                        <div class="info-item">
                            <span>{{item.activeAngle?item.activeAngle:'0'}}</span>
                            <div>回转角度(°)</div>
                            <img class="info-icon" src="./../../../assets/images/bigSiteVisualization/icon-04.png"/>
                        </div>
                        <div class="info-item">
                            <span>{{item.activeObliguity?item.activeObliguity:'0'}}</span>
                            <div>倾角(°)</div>
                            <img class="info-icon" src="./../../../assets/images/bigSiteVisualization/icon-05.png"/>
                        </div>
                        <div class="info-item">
                            <span>{{item.activeHeight?item.activeHeight:'0'}}</span>
                            <div>吊钩高度(m)</div>
                            <img class="info-icon" src="./../../../assets/images/bigSiteVisualization/icon-06.png"/>
                        </div>
                    </div>
                </div>
                <div class="info-alarms" v-if="item.alarmText">
                    <img class="info-icon" src="./../../../assets/images/alarm-point.png">
                    <span>{{item.alarmText}}</span>
                </div>
                <div class="info-footer">
                    运行时间：{{item.activeTime}}
                </div>
                <div :class="'corner_'+i" v-for="i in 4" :key="i">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    var loadNumber = 0;
    let sb = 90
    var pageTimer = {}
    var dirAxesTowerSn ={}
    import axios from 'axios'
    import domtoimage from 'dom-to-image';
    import {
        selectTowerAlarmRankingListApi,
        selectTowerTodayStatisticsApi,
        selectTowerNumAndAlarmCountApi,
        towerVisualizeListApi,
        towerVisualizeAddApi,
        getTowerAlarmListApi,
        towerVisualizeEditApi,
        towerVisualizeDeleteApi,
        towerVisualizeQueryByIdApi,
        towerFactoryListApi,//厂家
        towerBrandListApi,//品牌
        getTowerListApi,//设备列表
        getNewestTowerAlarmApi,
        towerVisualizeBatchUpdateApi,//保存点位
        selectNewestTowerTwoCurrentDataApi,
        getTowerImageApi,
        getBuildVisualizeApi
    } from "@/assets/js/api/towerCrane.js"
    import {getProjectBimConfigInfoApi} from "@/assets/js/api/project"
    import { projectBimListApi } from "@/assets/js/api/project"
    import { getProjectDetail } from "@/assets/js/api/baseInfo.js"
    export default {
        name: "siteVisualization",
        components:{
            'remote-css': {
                render(createElement) {
                    return createElement('link', { attrs: { rel: 'stylesheet', href: this.href }});
                },
                props: {
                    href: { type: String, required: true },
                },
            },
            'remote-js': {
                render(createElement) {
                    return createElement('script', { attrs: { type: 'text/javascript',src: this.src }});
                },
                props: {
                    src: { type: String, required: true },
                },
            },
        },
        data(){
            return{
               relationList:[],
                token:'',//bim的token
                // modelKey:["M1634178351606","M1634178351592","M1634178351261","M1634178351697","M1634178351480","M1634178353096",],
                modelKey:['C1637925105907'],
                modelKey2:'C1634200697269',
                dataBaseKey:"e0f9c074fb064789bcd805ee4aaf33b5",
                dataBaseKey2:"ab3ae5b9283a4a5a9f47350226b9c409",
                groupArr:[],
                
                cloneTowerGroup:[],
                selectListID:'',
                
                resData:'',
                selectCloneTowerGroupIndex:"",
                flagDel:"",
                timer:null,
                loginAccount: 'Bb1946',
                loginPassword: '12075572',
                useKey: 'laa0486c14214f1ebd421558094b6f22',
                showS3DModel: true,
                projectSn: "",
                projectInfo:"",
                alarmCount: "",
                devCount: "",
                alarmData: [],
                todayData: "",
                towerRanking: '',
                buildList: [],
                buildList2: []
            }
        },
        created(){
           
            this.projectSn = this.$store.state.projectSn
            this.getProjectInfo()
            this.getBuildVisualize()
            this.loadData()
            this.selectTowerNumAndAlarmCount()
            this.selectTowerTodayStatistics()
            this.selectTowerAlarmRankingList()
            this.getTowerAlarmList()
            this.getTowerList()
            this.towerBrandList()
        },
        mounted(){
            // this.bimLogin() 
            this.getConfigFn()   
        },
        methods:{
            getBuildVisualize(){
                getBuildVisualizeApi({projectSn: this.projectSn}).then(res=>{
                    console.log(res)
                    if(res.result && res.code == 200){
                        res.result.forEach(item=>{
                            if(item.list && item.list.length>0){
                                if(item.list[0].floorLength && item.list[0].floorHeight && item.list[0].floorWidth){
                                    this.buildList2.push({
                                        buildLength: item.list[0].floorLength,
                                        height: item.list[0].floorHeight,
                                        name: item.buildName,
                                        quantity: item.list.length,
                                        width: item.list[0].floorWidth,
                                        bimData: item.visualizeData,
                                        buildId: item.buildId,
                                        color: item.buildColour ? item.buildColour:'blue',
                                        buildVisualizeId: item.buildVisualizeId
                                    })
                                }
                            }
                        })
                    }
                    // console.log(this.buildList2)
                })
            },
            getConfigFn(){
                getProjectBimConfigInfoApi({projectSn:this.$store.state.projectSn,type: 2}).then(res=>{
                    if(res.result){
                        this.loginAccount = res.result.account
                        this.loginPassword = res.result.password
                        this.useKey = res.result.clientId
                        this.bimLogin()
                    }
                })
            },
             //获取模型列表
            loadData(){
                projectBimListApi({projectSn:this.$store.state.projectSn,bimType: 2}).then(res=>{
                    this.buildList=res.result
                })
            },
            async getSvgImage(val){
                
                // let url = await domtoimage.toSvg(document.getElementById(val))
                // console.log(this.$refs[val])
                let url = ''
                if(this.$refs[val]){
                    url = await domtoimage.toSvg(this.$refs[val][0])
                }
                    // .then(function (dataUrl) {
                    //     console.log(dataUrl, 'svgUrl')
                    //     url = dataUrl
                    //     return url
                    // });
                return url
            },
            selectTowerTodayStatistics(){
                selectTowerTodayStatisticsApi({projectSn: this.projectSn}).then(res=>{
                    console.log(res, '今日数据')
                    // ;
                    if(res.code == 200){
                        this.todayData = {
                            devOnlineRatio: res.result.devCount.devOnlineRatio,
                            alarmNum: res.result.alarm.alarmNum,
                            warningNum: res.result.alarm.warningNum,
                            cycleNum: res.result.runData.cycleNum,
                            timeNum: res.result.runData.timeNum
                        }
                        if(res.result.yesterdayAlarmCount.alarmNum - res.result.alarm.alarmNum && res.result.yesterdayRunDataCount.alarmNum){
                            if(res.result.alarm.alarmNum > res.result.yesterdayAlarmCount.alarmNum){
                                this.todayData.alarmRatio = -(((res.result.yesterdayAlarmCount.alarmNum - res.result.alarm.alarmNum)/res.result.yesterdayAlarmCount.alarmNum).toFixed(4))*100
                            } else{
                                this.todayData.alarmRatio = -(((res.result.yesterdayAlarmCount.alarmNum - res.result.alarm.alarmNum)/res.result.yesterdayAlarmCount.alarmNum).toFixed(4))*100
                            }
                            if( this.todayData.alarmRatio){
                                 this.todayData.alarmRatio =  this.todayData.alarmRatio.toFixed(2)
                            }
                        } else {
                            this.todayData.alarmRatio = 0
                        }
                        if(res.result.yesterdayAlarmCount.warningNum - res.result.alarm.warningNum && res.result.yesterdayRunDataCount.warningNum){
                            if(res.result.alarm.warningNum > res.result.yesterdayAlarmCount.warningNum){
                                this.todayData.warningRatio = -(((res.result.yesterdayAlarmCount.warningNum - res.result.alarm.warningNum)/res.result.yesterdayAlarmCount.warningNum).toFixed(4))*100
                            } else{
                                this.todayData.warningRatio = -(((res.result.yesterdayAlarmCount.warningNum - res.result.alarm.warningNum)/res.result.yesterdayAlarmCount.warningNum).toFixed(4))*100
                            }
                            if(this.todayData.warningRatio){
                                this.todayData.warningRatio = this.todayData.warningRatio.toFixed(2)
                            }
                        } else {
                            this.todayData.warningRatio = 0
                        }
                        if(res.result.yesterdayRunDataCount.cycleNum - res.result.runData.cycleNum && res.result.yesterdayRunDataCount.cycleNum){
                            if(res.result.runData.cycleNum > res.result.yesterdayRunDataCount.cycleNum){
                                this.todayData.cycleRatio = -(((res.result.yesterdayRunDataCount.cycleNum - res.result.runData.cycleNum)/res.result.yesterdayRunDataCount.cycleNum).toFixed(4))*100
                            } else{
                                this.todayData.cycleRatio = -(((res.result.yesterdayRunDataCount.cycleNum - res.result.runData.cycleNum)/res.result.yesterdayRunDataCount.cycleNum).toFixed(4))*100
                            }
                            if(this.todayData.cycleRatio){
                                this.todayData.cycleRatio = this.todayData.cycleRatio.toFixed(2)
                            }
                        } else {
                            this.todayData.cycleRatio = 0
                        }
                        if(res.result.yesterdayRunDataCount.timeNum - res.result.runData.timeNum && res.result.yesterdayRunDataCount.timeNum){
                            if(res.result.runData.timeNum > res.result.yesterdayRunDataCount.timeNum){
                                this.todayData.timeRatio = -(((res.result.yesterdayRunDataCount.timeNum - res.result.runData.timeNum)/res.result.yesterdayRunDataCount.timeNum).toFixed(4))*100
                            } else{
                                this.todayData.timeRatio = -(((res.result.yesterdayRunDataCount.timeNum - res.result.runData.timeNum)/res.result.yesterdayRunDataCount.timeNum).toFixed(4))*100
                            }
                            if(this.todayData.timeRatio){
                                this.todayData.timeRatio = this.todayData.timeRatio.toFixed(2)
                            }
                        } else {
                            this.todayData.timeRatio = 0
                        }
                    }
                    console.log('156312651', this.todayData)
                })
            },
            selectTowerAlarmRankingList(){
                selectTowerAlarmRankingListApi({projectSn: this.projectSn}).then(res=>{
                    console.log(res, '今日报警排名')
                    if(res.code == 200){
                        this.towerRanking = res.result
                    }
                })
            },
            getTowerAlarmList(){
                let data = {
                    alarmType: 1,
                    pageNo: 1,
                    pageSize: 10,
                    projectSn: this.projectSn
                }
                getTowerAlarmListApi(data).then(res=>{
                    console.log(res.result,'报警数据')
                    res.result.records.forEach(item=>{
                        let text = this.getAlarmText(item)
                        item.alarmName = text
                    })
                    this.alarmData =  res.result.records
                })
            },
            getAlarmText(val){
                if(val.environmentAlarm == 1){
                    return '环境防撞报警'
                } else if(val.heightAlarm == 1){
                    return '高度上限位报警'
                } else if(val.heightLowerAlarm == 1){
                    return '高度下限位报警'
                } else if(val.maxRangeAlarm == 1){
                    return '幅度外限位报警'
                } else if(val.minRangeAlarm == 1){
                    return '幅度内限位报警'
                } else if(val.momentAlarm == 1){
                    return '力矩报警'
                } else if(val.multiAlarm == 1){
                    return '多机防撞报警'
                } else if(val.negAngleAlarm == 1){
                    return '逆时针回转限位报警'
                } else if(val.obliguityAlarm == 1){
                    return '倾角报警'
                } else if(val.posAngleAlarm == 1){
                    return '顺时针回转限位报警 '
                } else if(val.windSpeedAlarm == 1){
                    return '风速报警'
                }
            },
            selectTowerNumAndAlarmCount(){
                selectTowerNumAndAlarmCountApi({projectSn: this.projectSn}).then(res=>{
                    console.log(res.result, '设备信息')
                    if(res.code == 200){
                        this.alarmCount = res.result.alarmCount
                        this.devCount = res.result.devCount
                        this.devCount.faultNum = res.result.faultNum
                    }
                })
            },
            getProjectState(val){
                let text = ''
                switch(val){
                    case 0:
                       text = '未开工'
                       break;
                    case 1:
                       text = '在建'
                       break;
                    case 2:
                       text = '停工'
                       break;
                    case 3:
                       text = '验收'
                       break;
                    case 4:
                       text = '完工'
                       break;
                    default:
                        text = '- -'
                        break
                }
                return text
            },
            getProjectInfo(){
                getProjectDetail({projectSn: this.projectSn}).then(res=>{
                    console.log(res.result, '项目基本信息')
                    if(res.code == 200){
                        this.projectInfo = res.result
                    }
                })
            },
            closePage(){
                // window.location.href = window.location.href.split('#/')[0] + '#/project/towerCrane/siteVisualization'
                // window.location.href = window.location.href.split('#/')[0] + '#/projectIndex'
                window.history.back();
            },
            //所有类型
            towerBrandList(selectListID){
                let factoryId = ""
                if(selectListID){
                    factoryId = selectListID
                }
                towerBrandListApi({
                    "projectSn": this.$store.state.projectSn,
                    "factoryId":factoryId
                }).then(res => {
                    this.windLevelList = res.result
                    this.brandTypeList = res.result
                    if(!selectListID){
                        let arr = []
                        res.result.forEach(item=>{
                            if(item.dataKey){
                                for(let k in JSON.parse(item.dataKey)){
                                    if(k == 'modelKey'){
                                        arr.push(JSON.parse(item.dataKey)[k])
                                    }
                                }
                            }
                            // arr.push(item.dataKey)
                        })
                        this.modelKey = arr
                        console.log(this.modelKey)
                    }
                    console.log(res.result);
                })
            },
            //所有设备
            getTowerList(){
                getTowerListApi({"projectSn": this.$store.state.projectSn,}).then(res => {
                    this.relationList = res.result
                    console.log(res);
                })
            },
          
            //生成
            generate(){
                for(let each in pageTimer){
                    clearInterval(pageTimer[each]);
                }
                pageTimer = {}
                towerVisualizeListApi({"projectSn": this.$store.state.projectSn}).then(res => {
                    console.log(res.result,333333333333);
                    this.resData = res.result
                    this.resData.forEach(item=>{
                        getNewestTowerAlarmApi({devSn: item.towerSn,alarmType: 1}).then(res=>{
                            if(res.result){
                                 console.log(res.result)
                                let text = ''
                                if(res.result.environmentAlarm == 1){
                                    text = '环境防撞报警'
                                } else if(res.result.heightAlarm == 1){
                                    text = '高度上限位报警'
                                } else if(res.result.heightLowerAlarm == 1){
                                    text = '高度下限位报警'
                                } else if(res.result.maxRangeAlarm == 1){
                                    text = '幅度外限位报警'
                                } else if(res.result.minRangeAlarm == 1){
                                    text = '幅度内限位报警'
                                } else if(res.result.momentAlarm == 1){
                                    text = '力矩报警'
                                } else if(res.result.multiAlarm == 1){
                                    text = '多机防撞报警'
                                } else if(res.result.negAngleAlarm == 1){
                                    text = '逆时针回转限位报警'
                                } else if(res.result.obliguityAlarm == 1){
                                    text = '倾角报警'
                                } else if(res.result.posAngleAlarm == 1){
                                    text = '顺时针回转限位报警'
                                } else if(res.result.standardHighAlarm == 1){
                                    text = '塔机间竖向高度报警 '
                                } else if(res.result.windSpeedAlarm == 1){
                                    text = '风速报警'
                                }
                                item.alarmText = text + ' ' + res.result.alarmTime
                            } else {
                                item.alarmText = ''
                            }
                        })
                    })
                    //执行获取全部实时数据的接口 完成之后在执行创建塔吊和清空所有塔吊
                    this.resData.map(item => {
                        let key = JSON.parse(item.dataKey).modelKey
                        let componentKeysArr = viewer3D.viewerImpl.modelManager.models[key].getAllComponents()
                        // console.log(componentKeysArr)
                        this.componentList(componentKeysArr,item.mastSection,'',item.towerSn,item.brandId,'',item)

                        // let visualizeData = JSON.parse(item.visualizeData)
                        // console.log(JSON.parse(item.visualizeData),'11111111111115')
                        // this.componentList(visualizeData[0],visualizeData.holderNum,visualizeData.name,item.towerSn,item.brandId,visualizeData,item)
                    })
                })

                // if(localStorage.getItem("towerMatrix")){
                //     let towerMatrix = JSON.parse(localStorage.getItem("towerMatrix"));
                //     console.log(towerMatrix);
                //     towerMatrix.map(item => {
                //         console.log(item[0],item.holderNum);
                //         this.componentList(item[0],item.holderNum,item.name)
                //     })
                //     //
                // }
            },
            generateBuild(){
                // if(localStorage.getItem('buildData')){
                //     this.buildList2 = JSON.parse(localStorage.getItem('buildData'))
                // }
                this.buildList2.forEach(item=>{
                    // console.log(item.bimData.object.matrix)
                    let group = new BOS3D.THREE.Group()
                    if(item.quantity == 1){
                        let geometry = new BOS3D.THREE.BoxGeometry(item.width*1000, item.buildLength*1000, item.height*1000); //创建一个立方体几何对象Geometry
                        let material = new BOS3D.THREE.MeshLambertMaterial({
                            // color: this.getRandomColor()
                            color: item.color
                        });
                        material.transparent = true;//是否透明
                        material.opacity = 0.5
                        console.log(geometry)
                        let mesh = new BOS3D.THREE.Mesh(geometry, material);
                        mesh.position.set(0, 0, (item.height*500))
                        window.customName = viewer3D.addExternalObjects([mesh], false, [material]);
                        group.add(mesh)
                        // this.updateMeshByMatrix(group, new BOS3D.THREE.Matrix4().fromArray(item.bimData.object.matrix));
                        if(!item.bimData){
                            this.updateMeshByMatrix(group, new BOS3D.THREE.Matrix4().fromArray([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]));
                        } else {
                            this.updateMeshByMatrix(group, new BOS3D.THREE.Matrix4().fromArray(JSON.parse(item.bimData).object.matrix));
                        }
                        viewer3D.getRootScene().add(group);
                    } else {
                        for(let i = 0;i<item.quantity;i++){
                            let geometry = new BOS3D.THREE.BoxGeometry(item.width*1000, item.buildLength*1000, item.height*1000); //创建一个立方体几何对象Geometry
                            let material = new BOS3D.THREE.MeshLambertMaterial({
                                color: item.color
                            });
                            material.transparent = true;//是否透明
                            material.opacity = 0.5
                            // console.log(geometry)
                            let mesh = new BOS3D.THREE.Mesh(geometry, material);
                            mesh.position.set(0, 0, item.height*500+(i*item.height*1000))
                            window.customName = viewer3D.addExternalObjects([mesh], false, [material]);
                            // this.updateMeshByMatrix(group, item.bimData.object.matrix);
                            group.add(mesh)
                            // this.updateMeshByMatrix(group, new BOS3D.THREE.Matrix4().fromArray(item.bimData.object.matrix));
                            if(!item.bimData){
                                this.updateMeshByMatrix(group, new BOS3D.THREE.Matrix4().fromArray([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]));
                            } else {
                                this.updateMeshByMatrix(group, new BOS3D.THREE.Matrix4().fromArray(JSON.parse(item.bimData).object.matrix));
                            }
                        }
                        console.log(group)
                        viewer3D.getRootScene().add(group);
                    }
                    item.bimData = group
                    // viewer3D.getRootScene().add(group);
                    // this.updateMeshByMatrix(group, item.bimData.object.matrix);
                })
            },
            
            bimLogin(){
                // q49f3c56cbf94d93a1babc7d8f2f10a2 应用key
                axios({
                    method: 'post',
                    // url: 'http://bosgw.bimwinner.com/bospersonnelservice/q49f3c56cbf94d93a1babc7d8f2f10a2/users/login',
                    url: 'http://bosgw.bimwinner.com/bospersonnelservice/'+this.useKey+'/users/login',
                    // params: {
                    //     name: 'qq1178461250',
                    //     password: 'qwer123456'
                    // },
                    params: {
                        name: this.loginAccount,
                        password: this.loginPassword
                    },
                    headers: {'Content-Type': 'application/json'},
                }).then(res => {
                    this.token = res.data.data.access_token
                    this.dataBaseKey = res.data.data.modelDb[0]
                    console.log(this.dataBaseKey)
                        this.$nextTick(()=>{
                            this.createdBim3d()
                        })
                });
            },
            createdBim3d(){
                const parent = document.querySelector("#app");
                // const child = document.querySelector(".app");
                // console.log(parent.style.transform);
                const host = "http://bos3d.bimwinner.com";
                const option = {host: host, viewport: "viewportTwo"};
                window.viewer3D = new BOS3D.Viewer(option);
                //工具栏 菜单
                // const bos3dui = new BOS3DUI({
                //     viewer3D: viewer3D,
                //     BOS3D: BOS3D,
                //     funcOption: {
                //         init: false, // 初始化
                //         fit: false, // 聚焦
                //         undo: false, // 撤销
                //         roam: false, // 漫游
                //         pickByRect: false, // 框选
                //         hide: false, // 隐藏
                //         isolate: false, // 构件隔离
                //         section: false, // 剖切
                //         wireFrame: false, // 线框化
                //         scatter: false, // 模型分解
                //         changeCptColor: false, // 构件变色
                //         setting: false, // 设置
                //         fullScreen: false, // 全屏
                //         changeBgColor: false, // 改变背景色
                //         cptInfo: false, // 构件信息
                //         infoTree: false, // 结构树
                //         measure: false, // 测量
                //         mark: false, // 标签
                //         snapshot: false, // 快照
                //         annotation: false, // 批注
                //         reset:false, //复位
                //         moreMenu:false //更多
                //     }
                // });
                // viewer3D.autoResize();
                // window.addEventListener("resize", function () {
                //     viewer3D.autoResize();
                // });
                this.created3D()
                const html = document.querySelector(".viewportBox");
                console.log(parent.style.transform);
                // let scale = 1/parent.style.transform.slice(28,36)
                // if (parent.style.transform){
                //     document.querySelector(".viewportTwo").style.width = (html.clientWidth )/scale + 'px';
                //     document.querySelector(".viewportTwo").style.height = (html.clientHeight )/scale + 'px';
                //     document.querySelector(".viewportTwo").style.transform = `translate(-50%,-50%) scale(${scale})`

                //     document.querySelector(".main-canvas").style.width = (html.clientWidth )/scale + 'px';
                //     document.querySelector(".main-canvas").style.height = (html.clientHeight )/scale + 'px';

                //     // document.querySelector(".viewportTwo").style.left = ((html.clientWidth - 40)/scale)/4 + 'px';
                //     // document.querySelector(".viewportTwo").style.top = ((html.clientHeight - 40)/scale)/4 + 'px';
                //     document.querySelector(".viewportTwo").style.left = '50%';
                //     document.querySelector(".viewportTwo").style.top = '50%';
                // } else {
                //     document.querySelector(".viewportTwo").style.width = (html.clientWidth - 40) + 'px';
                //     document.querySelector(".viewportTwo").style.height = (html.clientHeight - 40) + 'px';
                // }
                document.querySelector(".viewportTwo").style.width = (html.clientWidth - 40) + 'px';
                document.querySelector(".viewportTwo").style.height = (html.clientHeight - 40) + 'px';
                
                // console.log(1/parent.style.transform.slice(28,36));
                // document.querySelector(".viewportTwo").style.transform = `scale(1)`
                // 单击构件的事件
                viewer3D.registerModelEventListener(window.BOS3D.EVENTS.ON_CLICK_PICK,  (e) => {
                    // console.log(e);
                    
                    // viewer3D.hideComponentsByKey(e.intersectInfo.selectedObjectId)
                })
            },
            //渲染
            created3D(){
                // 渲染 this.modelKey 应该是所有模型库的modelKey
                for (let i = 0; i < this.modelKey.length; i++) {
                    viewer3D.addView(this.modelKey[i], this.dataBaseKey,this.token);
                }
                viewer3D.setSceneBackGroundColor('#0c0f20', 0);
                viewer3D.disableViewController();
                 let buildKey = ''
                this.buildList.forEach(item=>{
                    if(item.mainModel == 1){
                        buildKey = item.bimUrn
                    }
                })
                // if(buildKey){
                //     viewer3D.addView(buildKey, this.dataBaseKey,this.token)
                //     viewer3D.setModelMatrix(buildKey,new THREE.Matrix4());
                // } else {
                //     viewer3D.addView('M1598257565598', 'he3285593fdc4ea3b91784c5741ff8aa');
                //     viewer3D.setModelMatrix("M1598257565598",new THREE.Matrix4());
                // }
                if(buildKey){
                    viewer3D.addView(buildKey, this.dataBaseKey,this.token)
                    viewer3D.setModelMatrix(buildKey,new THREE.Matrix4());
                } else {
                    // viewer3D.addView('M1598257565598', 'he3285593fdc4ea3b91784c5741ff8aa');
                    // viewer3D.setModelMatrix("M1598257565598",new THREE.Matrix4());
                    var geometry = new BOS3D.THREE.BoxGeometry(300000, 300000, 500); //创建一个立方体几何对象Geometry
                    var material = new BOS3D.THREE.MeshLambertMaterial({
                        color: '#888'
                    }); //材质对象Material
                    // var material1 = new BOS3D.THREE.MeshLambertMaterial({
                    //     color: "red"
                    // }); //材质对象Material
                    var mesh = new BOS3D.THREE.Mesh(geometry, material); //网格模型对象Mesh
                    // var mesh1 = new BOS3D.THREE.Mesh(geometry1, material1); //网格模型对象Mesh
                    mesh.position.set(0, 0, 0)
                    // mesh1.position.set(70000, 35000, 500)
                    window.customName = viewer3D.addExternalObjects([mesh], false, [material]);
                }

                for (let i = 0; i < this.modelKey.length; i++) {
                    viewer3D.registerModelEventListener(window.BOS3D.EVENTS.ON_LOAD_COMPLETE,  (e) => {
                        viewer3D.setModelMatrix(
                            this.modelKey[i],
                            new BOS3D.THREE.Matrix4().fromArray(
                                //对场地模型整体放大10倍 不放大会出现塔吊显示不全的问题
                                // [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 60000*10, 30000*10, 0, 1]
                                [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 60000, 30000, 0, 1]
                            )
                        );
                        viewer3D.hideModelsByKey(this.modelKey[i]);
                    });
                }
                //监听模型加载完毕
                viewer3D.registerModelEventListener(window.BOS3D.EVENTS.ON_LOAD_COMPLETE, (e) => {
                    loadNumber++
                    console.log(loadNumber,this.modelKey.length);
                    // if(loadNumber == this.modelKey.length + 1){
                    //     console.log('执行');
                    //     this.generate()
                    // }
                    if(loadNumber == this.modelKey.length + (buildKey ? 1:0)){ 
                        this.generate()
                    }
                    this.generateBuild()
                    // this.generate()
                })
            },
            createTag(){
                console.log(this.resData)
                // 'tag_'+item.towerSn
                let that = this
                // console.log(BOS3D.EVENTS)
                // viewer3D.registerCameraEventListener(BOS3D.EVENTS.ON_CAMERA_CHANGE,  (e)=>{
                    // console.log(that.resData[0].holderGroup)
                    // console.log(new BOS3D.THREE.Box3().expandByObject(that.resData[0].bigArmObj.mesh))
                    // that.resData.forEach(item=>{
                    //     let armsCoordinates = {}
                    //     let dom = that.$refs['tag_'+item.towerSn][0]
                    //     let bracketsCenter = new BOS3D.THREE.Box3().expandByObject(item.bigArmObj.mesh);
                    //     let titleCenter = new BOS3D.THREE.Box3().expandByObject(item.holderGroup);
                    //     armsCoordinates = titleCenter.getCenter(new BOS3D.THREE.Vector3());
                    //     // console.log("包围盒中心：", armsCoordinates);
                    //     that.tag(armsCoordinates.x, armsCoordinates.y, bracketsCenter.max.z, dom);
                    // })
                            // let dom = document.querySelector('#tag1');
                            // let dom = that.$refs['tag_'+item.towerSn][0]
                            // // tag(armsCoordinates.x, armsCoordinates.y, bracketsCenter.max.z, dom);
                            // tag(armsCoordinates.x, bracketsCenter.y, bracketsCenter.max.z, dom);
                // })
                //在模型加载完成的时候执行
                // viewer3D.viewerImpl.modelManager.addEventListener(BOS3D.EVENTS.ON_LOAD_COMPLETE, (e) => {
                    console.log('1111')
                    that.resData.forEach(item=>{
                        // let dom = document.querySelector('#tag1')
                        let armsCoordinates = {}
                        // let dom = that.$refs['tag_'+item.towerSn][0]
                        // 获取塔臂的包围盒中心点
                       let bracketsCenter = new BOS3D.THREE.Box3().expandByObject(item.bigArmObj.mesh);
                        console.log("最高点：", bracketsCenter);
                        // 获取支架的包围盒高度
                        // let titleCenter = new BOS3D.THREE.Box3().expandByObject(groupArr[0].children[1]);
                        // armsCoordinates = titleCenter.getCenter(new BOS3D.THREE.Vector3());
                        // console.log("包围盒中心：", armsCoordinates);
                        let titleCenter = new BOS3D.THREE.Box3().expandByObject(item.holderGroup);
                        armsCoordinates = titleCenter.getCenter(new BOS3D.THREE.Vector3());
                        console.log("包围盒中心：", armsCoordinates);
                        console.log(armsCoordinates.x,armsCoordinates.y,bracketsCenter.max.z)
                        // that.tag(armsCoordinates.x, armsCoordinates.y, bracketsCenter.max.z, dom);
                          
                        //相机视角变换执行
                        // viewer3D.registerCameraEventListener(BOS3D.EVENTS.ON_CAMERA_CHANGE, function () {
                        //     console.log(armsCoordinates.x,armsCoordinates.y,bracketsCenter.max.z)
                        //     // let dom = document.querySelector('#tag1');
                        //     let dom = that.$refs['tag_'+item.towerSn][0]
                        //     // tag(armsCoordinates.x, armsCoordinates.y, bracketsCenter.max.z, dom);
                        //     that.tag(armsCoordinates.x, bracketsCenter.y, bracketsCenter.max.z, dom);
                        // })
                    })
                    
                // });
            },
            componentList(listKey,holderNum,name,towerSn,brandId,visualizeData, itemData){
                console.log(this.cloneTowerGroup);
                //e0f9c074fb064789bcd805ee4aaf33b5 通用key
                axios({
                    method: 'post',
                    url: 'http://bosgw.bimwinner.com/bos3dengine/api/'+this.dataBaseKey+'/components/batch',
                    data: {
                        "components": listKey,
                    },
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization':this.token
                    },
                }).then(res => {
                    let group = new BOS3D.THREE.Group();
                    console.log(res.data.data);
                    let resData = res.data.data
                    let holderHeight = 0; //塔吊支架单个的高度
                    let holderBox; //塔支架的包围盒
                    let sliderKey //小车key
                    console.log(resData, 666666666);
                    let indexArr = []
                    let maxX
                    let ropeHeight
                    let smallCar
                    // console.log(itemData.dataKey)
                    // let modeKeyObj = JSON.parse(itemData.dataKey)
                    resData.forEach((item,index) => {
                        // for(let k in modeKeyObj){
                        //     if( k == 'footKey' && item.model == modeKeyObj[k]){
                        //         item.name = '拉伸',
                        //         item.y = modeKeyObj[k]
                        //     } else if(k == 'holderKey' && item.model == modeKeyObj[k]){
                        //         item.name = '标准节'
                        //         item.y = modeKeyObj[k]
                        //     } else if(k == 'headKey' && item.model == modeKeyObj[k]){
                        //         item.name = '塔吊臂总体'
                        //         item.y = modeKeyObj[k]
                        //     } else if(k == 'sliderKey' && item.model == modeKeyObj[k]){
                        //         item.name = '小车'
                        //         item.y = modeKeyObj[k]
                        //     } else if(k == 'ropeKey' && item.model == modeKeyObj[k]){
                        //         item.name = '绳索'
                        //         item.y = modeKeyObj[k]
                        //     } else if(k == 'hookKey' && item.model == modeKeyObj[k]){
                        //         item.name = '吊钩'
                        //         item.y = modeKeyObj[k]
                        //     }
                        //     // else if(k == 'cockpitKey' && item.model == modeKeyObj[k]){
                        //     //     item.name = '驾驶舱'
                        //     //     item.y = modeKeyObj[k]
                        //     // }
                        // }
                        if(item.name == '小车'){
                            sliderKey = item.key
                        }
                        if (item.name == '标准节') {
                            holderBox = viewer3D.getBoxByComponentsKey(item.key);
                            holderHeight = holderBox.max.z - holderBox.min.z;                        
                        }
                        if (item.name == '绳索'){
                            let a = {
                                name:item.name,
                                index:index,
                                key:item.key
                            }
                            let sliderBox = viewer3D.getBoxByComponentsKey(item.key);
                            ropeHeight = sliderBox.max.z - sliderBox.min.z
                            indexArr.push(a)
                        } else if(item.name == '标准节'){
                            let a = {
                                name:item.name,
                                index:index,
                                key:item.key
                            }
                            indexArr.push(a)
                        }else if(item.name == '拉伸'){ //底座
                            let a = {
                                name:item.name,
                                index:index,
                                key:item.key
                            }
                            let sliderBox = viewer3D.getBoxByComponentsKey(item.key);
                            maxX = sliderBox.max.x
                            indexArr.push(a)
                        }else if(item.name == '吊钩'){
                            let a = {
                                name:item.name,
                                index:index,
                                key:item.key
                            }
                            indexArr.push(a)
                        }else if(item.name == '塔吊臂总体'){
                            let a = {
                                name:item.name,
                                index:index,
                                key:item.key
                            }
                            indexArr.push(a)
                        }else if(item.name == "驾驶室"){
                            let a = {
                                name:item.name,
                                index:index,
                                key:item.key
                            }
                            indexArr.push(a)
                        }else if(item.name == "小车"){
                            let a = {
                                name:item.name,
                                index:index,
                                key:item.key
                            }
                            let sliderBox = viewer3D.getBoxByComponentsKey(item.key);
                            smallCar = sliderBox 
                            indexArr.push(a)
                        }
                    })
                    // if(itemData){
                    //     let modelKeyObj = itemData.dataKey ? JSON.parse(itemData.dataKey):{}
                    //     for( let k in modelKeyObj){
                    //         if(k == 'footKey'){
                    //            let sliderBox = viewer3D.getBoxByComponentsKey(modelKeyObj[k]);
                    //            maxX = sliderBox.max.x
                    //         } else if(k == 'holderKey'){
                    //             holderBox = viewer3D.getBoxByComponentsKey(modelKeyObj[k]);
                    //             holderHeight = holderBox.max.z - holderBox.min.z; 
                    //         }else if(k == 'headKey'){
                                
                    //         }else if(k == 'cockpitKey'){
                                
                    //         }else if(k == 'sliderKey'){
                    //             sliderKey = modelKeyObj[k]
                    //             let sliderBox = viewer3D.getBoxByComponentsKey(modelKeyObj[k]);
                    //             smallCar = sliderBox 
                    //             // indexArr.push(a)
                    //         }else if(k == 'ropeKey'){
                    //             let sliderBox = viewer3D.getBoxByComponentsKey(modelKeyObj[k]);
                    //             ropeHeight = sliderBox.max.z - sliderBox.min.z
                    //             // indexArr.push(a)
                    //         }else if(k == 'hookKey'){
                                
                    //         }
                    //         // else if(k == 'cockpitKey'){
                                
                    //         // }
                    //     }
                    // }
        
                    let offz1,offz2; //offz1吊钩上方的z轴位置 offz2小车下方Z轴位置
                    let ropeWidth //滑块移动区域宽度
                    window.spriteMark = new BOS3D.SpriteMark(viewer3D);
                    console.log(resData)
                    let standardHigh = 0
                    if(itemData){
                        console.log(itemData)
                        this.relationList.forEach(item => {
                            if(item.devSn == itemData.towerSn){
                                standardHigh = (item.standardHigh?item.standardHigh:0)*1000
                            }
                        })
                    }
                    resData.map(item => {
                           //计算出塔支架的高度
                        if (item.name == '标准节') { //塔吊支架的标准节的构件
                            let holderGroup = new BOS3D.THREE.Group();  //创建一个塔吊支架的组，把动态生成塔吊的多个支架放到一个组里，以方便整体操作
                            for (let i = 0; i < holderNum; i++) {
                                if (i == 0) {  //第一节塔支架，不用进行位置处理
                                    let cloneObj = viewer3D.cloneComponentByKey(item.key);
                                    let matrix = new BOS3D.THREE.Matrix4().copy(cloneObj.mesh.matrixWorld); //场布世界坐标
                                    matrix.elements[14] += standardHigh;
                                    this.updateMeshByMatrix(cloneObj.mesh, matrix);
                                    holderGroup.add(cloneObj.mesh);
                                } else {  //其他生成的动态的塔吊支架要计算其高度
                                    let cloneObj = viewer3D.cloneComponentByKey(item.key);  //克隆塔吊支架
                                    let matrix = new BOS3D.THREE.Matrix4().copy(cloneObj.mesh.matrixWorld); //场布世界坐标
                                    matrix.elements[14] += (holderHeight * i) + standardHigh;
                                    this.updateMeshByMatrix(cloneObj.mesh, matrix);
                                    holderGroup.add(cloneObj.mesh);
                                }
                            }
                            holderGroup.name = '标准节'
                            holderGroup.originComponentKey = item; //赋值key
                            group.add(holderGroup);   //把多个塔吊支架合成一个整体
                            this.resData.forEach(item=>{
                                if(item.towerSn == towerSn){
                                    item.holderGroup = holderGroup
                                }
                            })
                        } else if (item.name == '拉伸') {   //塔吊的塔座
                            let cloneObj = viewer3D.cloneComponentByKey(item.key);
                            let matrix = new BOS3D.THREE.Matrix4().copy(cloneObj.mesh.matrixWorld); //场布世界坐标
                            matrix.elements[14] += standardHigh;
                            this.updateMeshByMatrix(cloneObj.mesh, matrix);
                            cloneObj.mesh.name = '塔座'
                            group.add(cloneObj.mesh);
                        } else if(item.name == '绳索')  {  //    蝇索
                            // console.log(viewer3D.cloneComponentByKey(item.key));
                            let cloneObj = viewer3D.cloneComponentByKey(item.key);
                            let matrix = new BOS3D.THREE.Matrix4().copy(cloneObj.mesh.matrixWorld); //场布世界坐标
                            matrix.elements[14] += standardHigh;
                            this.updateMeshByMatrix(cloneObj.mesh, matrix);
                            let ropeBox = viewer3D.getBoxByComponentsKey(item.key); //蝇索的包围盒

                            // holderBox 塔身
                            //滑块
                            let sliderBox = viewer3D.getBoxByComponentsKey(sliderKey); //滑块
                            let offsetZ = sliderBox.min.z - holderBox.max.z - (holderNum-1) * holderHeight;  //绳索应该需要偏移的高度
                            let midX1 = sliderBox.max.x - sliderBox.min.x //滑块宽度
                            let midX2 = ropeBox.max.x - ropeBox.min.x //蝇索宽度
                            let offsetxX = ropeBox.min.x - maxX
                            console.log(ropeBox)
                            let mat = new BOS3D.THREE.Matrix4().setPosition(-offsetxX + (midX1/2) - (midX2/2), 0, -offsetZ); //构建偏移距离
                            // let mat = new BOS3D.THREE.Matrix4().setPosition(0, 0, -offsetZ);
                            cloneObj.mesh.applyMatrix4(mat);
                            cloneObj.mesh.updateMatrixWorld(true);
                            cloneObj.mesh.name = '绳索'
                            group.add(cloneObj.mesh);
                        } else if(item.name == '吊钩') {  //    勾
                            let cloneObj = viewer3D.cloneComponentByKey(item.key);
                            let matrix = new BOS3D.THREE.Matrix4().copy(cloneObj.mesh.matrixWorld); //场布世界坐标
                            matrix.elements[14] += standardHigh;
                            this.updateMeshByMatrix(cloneObj.mesh, matrix);
                            let hookBox = viewer3D.getBoxByComponentsKey(item.key); //勾的包围盒
                            //    滑块
                            let sliderBox = viewer3D.getBoxByComponentsKey(sliderKey); //滑块
                            let offsetZ = sliderBox.min.z - holderBox.max.z - (holderNum-1) * holderHeight;
                            let offsetxX = hookBox.min.x - maxX
                            let midX1 = sliderBox.max.x - sliderBox.min.x
                            let midX2 = hookBox.max.x - hookBox.min.x
                            //ropeHeight 绳索高度
                            let mat = new BOS3D.THREE.Matrix4().setPosition(-offsetxX + (midX1/2) - (midX2/2), 0, -offsetZ+ropeHeight - (sliderBox.max.z - sliderBox.min.z));
                            // let mat = new BOS3D.THREE.Matrix4().setPosition(-offsetxX + (midX1/2) - (midX2/2), 0, -offsetZ);
                            offz1 = -offsetZ+ropeHeight - (sliderBox.max.z - sliderBox.min.z); //吊钩上方的z轴位置
                            cloneObj.mesh.applyMatrix4(mat);
                            cloneObj.mesh.updateMatrixWorld(true);
                            cloneObj.mesh.name = '吊钩'
                            group.add(cloneObj.mesh);
                        } else if(item.name == '小车'){
                            let cloneObj = viewer3D.cloneComponentByKey(item.key);
                            let matrix = new BOS3D.THREE.Matrix4().copy(cloneObj.mesh.matrixWorld); //场布世界坐标
                            matrix.elements[14] += standardHigh;
                            this.updateMeshByMatrix(cloneObj.mesh, matrix);
                            let topBox = viewer3D.getBoxByComponentsKey(item.key); //小车包围盒
                            let offsetZ = topBox.min.z - holderBox.max.z - (holderNum - 1) * holderHeight;
                            let offsetxX = topBox.min.x - maxX
                            offz2 = -offsetZ //小车下方Z轴位置
                            let mat = new BOS3D.THREE.Matrix4().setPosition(-offsetxX, 0, -offsetZ);
                            cloneObj.mesh.applyMatrix4(mat);
                            cloneObj.mesh.updateMatrixWorld(true);
                            cloneObj.mesh.name = '小车'
                            group.add(cloneObj.mesh);
                        }else if(item.name == '塔吊臂总体'){
                            let cloneObj = viewer3D.cloneComponentByKey(item.key);
                            let matrix = new BOS3D.THREE.Matrix4().copy(cloneObj.mesh.matrixWorld); //场布世界坐标
                            matrix.elements[14] += standardHigh;
                            this.updateMeshByMatrix(cloneObj.mesh, matrix);
                            let topBox = viewer3D.getBoxByComponentsKey(item.key); //塔顶部分的任一构件
                            console.log(cloneObj,this.resData)
                            let offsetZ = topBox.min.z - holderBox.max.z - (holderNum - 1) * holderHeight;
                            let offsetxX = topBox.max.x - maxX
                            ropeWidth = offsetxX*0.95 - 1210; //滑块移动区域宽度
                            let mat = new BOS3D.THREE.Matrix4().setPosition(0, 0, -offsetZ);
                            
                            cloneObj.mesh.applyMatrix4(mat);
                            this.resData.forEach(item=>{
                                if(item.towerSn == towerSn){
                                    item.bigArmObj = cloneObj
                                }
                            })
                            // let dom = document.getElementById(towerSn);
                            // console.log(visualizeData.matrixWorld.elements);
                
                            // this.tag(topBox.max.x,topBox.max.y,topBox.max.z,dom)
                            cloneObj.mesh.updateMatrixWorld(true);
                            cloneObj.mesh.name = '塔吊臂总体'
                            group.add(cloneObj.mesh);
                        } else {
                            //塔吊的塔座、塔支架外的其他构件
                            let cloneObj = viewer3D.cloneComponentByKey(item.key);
                            let matrix = new BOS3D.THREE.Matrix4().copy(cloneObj.mesh.matrixWorld); //场布世界坐标
                            matrix.elements[14] += standardHigh;
                            this.updateMeshByMatrix(cloneObj.mesh, matrix);
                            let topBox = viewer3D.getBoxByComponentsKey(item.key); //塔顶部分的任一构件
                            let offsetZ = topBox.min.z - holderBox.max.z - (holderNum - 1) * holderHeight;
                            let mat = new BOS3D.THREE.Matrix4().setPosition(0, 0, -offsetZ);
                            cloneObj.mesh.applyMatrix4(mat);
                            cloneObj.mesh.updateMatrixWorld(true);
                            group.add(cloneObj.mesh);
                        }
                        
                    })
                    console.log(group.children)
                    
                    
                    // console.log(this.relationList[this.ruleForm.relation - 1]);
                    // if(this.relationList[this.ruleForm.relation - 1]){
                    //     group.name = this.relationList[this.ruleForm.relation - 1].name;
                    // }else {
                    //     group.name = name
                    // }
                    group.holderNum = holderNum; //标准节数
                    group.towerSn = towerSn //设备sn
                    group.brandId = brandId //品牌类型id
                    console.log(group)
                    let obj = Object.assign({}, [listKey]);
                    obj.name = group.name;
                    obj.holderNum = group.holderNum;
                    obj.matrixWorld = group.matrixWorld;
                    this.cloneTowerGroup.push(group) //保存数据
                    // console.log(group)
                    // this.resData.forEach(item=>{
                    //     if(item.towerSn == towerSn){
                    //         item.towerGroupObj = group
                    //     }
                    // })
                    this.resData = this.resData
                    // this.cloneTowerGroup = Object.assign({}, [listKey]);
                    // this.cloneTowerGroup.name = group.name;
                    // this.cloneTowerGroup.holderNum = group.holderNum;
                    // this.cloneTowerGroup.matrixWorld = group.matrixWorld;
                    // this.createTag()
                    //区分是不是第一次加载
                    let box3,size,centers,center2
                    group.children.forEach(item=>{
                        if(item.name=='绳索'){
                            box3 = new BOS3D.THREE.Box3().expandByObject(item);
                            console.log(box3);
                            size = box3.getSize(new BOS3D.THREE.Vector3());
                            console.log(size);
                            centers = box3.getCenter(new BOS3D.THREE.Vector3());
                            console.log(centers);
                            center2 = new BOS3D.THREE.Vector3(centers.x, centers.y, centers.z + size.z / 2)
                            console.log(center2);
                        }
                    })
                    if(!this.flag || this.flag == '修改' || this.flagDel == '删除'){
                        this.resData.forEach(item => {
                            if(towerSn == item.towerSn && brandId == item.brandId){
                                let visualizeData2 = []
                                if(item.visualizeData) {
                                    visualizeData2 = JSON.parse(item.visualizeData)
                                } else {
                                    visualizeData2 = [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]
                                }
                                this.updateMeshByMatrix(group, new BOS3D.THREE.Matrix4().fromArray(visualizeData2));
                            }
                        })
                        // this.resData.map(item => {
                        //     if(towerSn == item.towerSn && brandId == item.brandId){
                        //         let visualizeData2 = JSON.parse(item.visualizeData)
                        //         this.updateMeshByMatrix(group, new BOS3D.THREE.Matrix4().fromArray(visualizeData2.matrixWorld.elements));
                        //     }
                        // })
                        viewer3D.getRootScene().add(group);
                        //
                    }

                    this.groupArr.push(obj)
                    //区分新增和回显
                    if (this.flag == '新增'){
                        let data = {
                            "brandId": this.ruleForm.towerCraneBrand, //品牌类型
                            "factoryId": this.ruleForm.manufacturer, //厂家id
                            "mastSection": holderNum, //标准节数
                            "projectSn": this.$store.state.projectSn,
                            "towerSn": this.ruleForm.relation,
                            "visualizeData": JSON.stringify(obj)
                        }
                        console.log(data,this.ruleForm.relation);
                        towerVisualizeAddApi(data).then(res => {
                            console.log(res);
                            viewer3D.getRootScene().add(group);
                            this.ruleForm = {
                                towerCraneBrand:'',//塔吊品牌
                                // boomType:'',//大臂类型
                                manufacturer:'',//厂商
                                brandType:'',//品牌类型
                                quantity:'',//标准节数量
                                relation:''//关联的塔吊设备
                            }
                            this.flag = ''
                            this.generate()
                            this.cloneTowerGroup.map(item => {
                                viewer3D.getRootScene().remove(item);
                                console.log(item.id);
                            })
                        })
                        console.log('新增');
                    }
                    let offz = (ropeHeight - (offz1 - offz2))/ropeHeight;//比例
                    let offzS = ropeHeight - (offz1-offz2)//绳索初始长度
                    console.log((ropeHeight - (offz1 - offz2))/ropeHeight);
                    let high = holderNum * holderHeight //标准节高度
                    sessionStorage.removeItem(towerSn);
                    console.log(ropeHeight);
                    
                    // let box3 = new BOS3D.THREE.Box3().expandByObject(group.children[0]);
                    // console.log(box3);
                    // let size = box3.getSize(new BOS3D.THREE.Vector3());
                    // console.log(size);
                    // let centers = box3.getCenter(new BOS3D.THREE.Vector3());
                    // console.log(centers);
                    // let center2 = new BOS3D.THREE.Vector3(centers.x, centers.y, centers.z + size.z / 2)
                    // console.log(center2);

                    this.makeTranslation(holderBox,group,0,indexArr,offz,towerSn,high,ropeWidth,offzS,center2)
                });
            },
             updateMeshByMatrix(mesh, matrix) {
                mesh.matrixAutoUpdate = false;
                mesh.matrix = new BOS3D.THREE.Matrix4();
                mesh.applyMatrix4(new BOS3D.THREE.Matrix4().copy(matrix));
                mesh.updateMatrixWorld(true);
                //下方两行，是对mesh移动后，要先进行平移后，再取消平移，以更新平移的ui的坐标的位置。
                viewer3D.translateComponentByKey(mesh);
                viewer3D.cancelTransformComponent();
                mesh.updateMatrixWorld(true);
            },
            //增加一个塔吊或多个塔吊
            cloneModelByKey(towerObj, holderNum,data) {
                console.log(holderNum);
                for (let i = 0; i < this.modelKey.length; i++) {
                    let componentKeysArr = viewer3D.viewerImpl.modelManager.models[this.modelKey[i]].getAllComponents();  //获取一个塔吊的所有构件
                    console.log(componentKeysArr);
                    //this.modelKey//区分新增和回显 回显的时候是数组长度大于1 新增数组长度等于1
                    this.componentList(componentKeysArr,holderNum)
                }
            },
            // 平移旋转
            makeTranslation(holderBox,item,degrees,indexArr,offz,towerSn,high,ropeWidth,offzS,center2){
                clearInterval(pageTimer[towerSn]);
                
                //初始化绳索长度
                dirAxesTowerSn[towerSn] = new BOS3D.THREE.Vector3(1, 0, 0);
                console.log(indexArr)
                indexArr.map((itemArr,index) => {
                    if (itemArr.name == '绳索'){
                        console.log(item.children)
                        // console.log(offz);
                        // let box3 = new BOS3D.THREE.Box3().expandByObject(item.children[itemArr.index]);
                        // console.log(box3);
                        // let size = box3.getSize(new BOS3D.THREE.Vector3());
                        // console.log(size);
                        // let centers = box3.getCenter(new BOS3D.THREE.Vector3());
                        // console.log(centers);
                        // let center2 = new BOS3D.THREE.Vector3(centers.x, centers.y, centers.z + size.z / 2)
                        // console.log(center2);
                        item.children.forEach(itm=>{
                            if(itm.name == '绳索'){
                                itm.applyMatrix4(new BOS3D.THREE.Matrix4().makeTranslation(-center2.x, -center2.y, -center2.z));
                                itm.updateMatrixWorld(true);
                                itm.applyMatrix4(new BOS3D.THREE.Matrix4().makeScale(1, 1, offz));
                                itm.updateMatrixWorld(true);
                                itm.applyMatrix4(new BOS3D.THREE.Matrix4().makeTranslation(center2.x, center2.y, center2.z));
                                itm.updateMatrixWorld(true);
                            }
                        })
                    }
                })
                this.selectNewestTowerTwoCurrentData(holderBox,item,degrees,indexArr,offz,towerSn,high,ropeWidth,dirAxesTowerSn[towerSn],offzS,center2)
                pageTimer[towerSn] = setInterval(() => {
                    console.log(center2)
                    // let box3 = new BOS3D.THREE.Box3().expandByObject(groupArr[0].children[6]);
                    // let size = box3.getSize(new BOS3D.THREE.Vector3());
                    // let center = box3.getCenter(new BOS3D.THREE.Vector3());
                    // let center2 = new BOS3D.THREE.Vector3(center.x, center.y, center.z + size.z / 2)
                    // groupArr[0].children[6].applyMatrix4(new BOS3D.THREE.Matrix4().makeTranslation(-center2.x, -center2.y, -center2.z));
                    // groupArr[0].children[6].updateMatrixWorld(true);
                    // groupArr[0].children[6].applyMatrix4(new BOS3D.THREE.Matrix4().makeScale(1, 1, 1.1));
                    // groupArr[0].children[6].updateMatrixWorld(true);
                    // groupArr[0].children[6].applyMatrix4(new BOS3D.THREE.Matrix4().makeTranslation(center2.x, center2.y, center2.z));
                    // groupArr[0].children[6].updateMatrixWorld(true);
                    this.selectNewestTowerTwoCurrentData(holderBox,item,degrees,indexArr,offz,towerSn,high,ropeWidth,dirAxesTowerSn[towerSn],offzS,center2)
                },7000)
            },
            getTowerImage(val,group){
                spriteMark.remove([val[0].devSn])
                // let data = {
                //     angle: val[0].angle,
                //     height: val[0].height,
                //     loading: val[0].loading,
                //     obliguity: val[0].obliguity,
                //     ranger: val[0].ranger,
                //     time: val[0].reciveTime,
                //     towerName: val[0].devName,
                //     windspeed: val[0].windspeed
                // }
                this.resData.forEach(item=>{
                    if(item.towerSn == val[0].devSn){
                        item.activeAngle = val[0].angle
                        item.activeHeight = val[0].height,
                        item.activeLoading = val[0].loading,
                        item.activeObliguity = val[0].obliguity,
                        item.activeRanger = val[0].ranger,
                        item.activeTime = val[0].reciveTime,
                        item.activeTowerName = val[0].devName,
                        item.activeWindspeed = val[0].windspeed
                    }
                    
                })
                this.$forceUpdate()
                let bracketsCenter, titleCenter, armsCoordinates
                this.getSvgImage("dialogBox"+val[0].devSn).then(res=>{
                // console.log(res, 'sv')
                group.forEach(item=>{
                        if(item.name == "塔吊臂总体"){
                            bracketsCenter = new BOS3D.THREE.Box3().expandByObject(item);
                            console.log(bracketsCenter)
                        }
                        if(item.name == "标准节"){
                            titleCenter = new BOS3D.THREE.Box3().expandByObject(item);
                        }
                    })
                    armsCoordinates = titleCenter.getCenter(new BOS3D.THREE.Vector3());
                        
                    let options={
                        id:val[0].devSn,
                        url: res,
                        scale: 10,
                        useImageSize:true,
                        alwaysVisible:true,
                        position:[armsCoordinates.x, armsCoordinates.y, bracketsCenter.max.z+(bracketsCenter.max.z-bracketsCenter.min.z) + 800],
                            // position:[0,0,0]
                    };
                    spriteMark.add(options,function(a){
                            // alert("id："+a+" 精灵标签添加成功")
                    });

                    viewer3D.render();
                })
                // console.log(val,'实时数据',data)
                // getTowerImageApi(data).then(res=>{
                //     // console.log(res.result.base64Str)
                //     let url = 'data:image/png;base64,'+res.result.base64Str
                    
                //     // 画精灵图
                //     let bracketsCenter, titleCenter, armsCoordinates
                //     group.forEach(item=>{
                //             if(item.name == "塔吊臂总体"){
                //                 bracketsCenter = new BOS3D.THREE.Box3().expandByObject(item);
                //                 console.log(bracketsCenter)
                //             }
                //             if(item.name == "标准节"){
                //                 titleCenter = new BOS3D.THREE.Box3().expandByObject(item);
                //             }
                //     })
                //     armsCoordinates = titleCenter.getCenter(new BOS3D.THREE.Vector3());
                    
                //     let options={
                //         id:val[0].devSn,
                //         url:url,
                //         scale: 60,
                //         width: 3060,
                //         height: 1950,
                //         useImageSize:true,
                //         alwaysVisible:true,
                //         position:[armsCoordinates.x, armsCoordinates.y, bracketsCenter.max.z+(bracketsCenter.max.z-bracketsCenter.min.z)/2],
                //         // position:[0,0,0]
                //     };
                //     spriteMark.add(options,function(a){
                //         // alert("id："+a+" 精灵标签添加成功")
                //     });

                //     viewer3D.render();
                // })
            },
            selectNewestTowerTwoCurrentData(holderBox,item,degrees,indexArr,offz,towerSn,high,ropeWidth,dirAxes,offzS,center2){
                // console.log(towerSn);
                // console.log(center2)
                selectNewestTowerTwoCurrentDataApi({devSn:towerSn}).then( res =>{
                    console.log(res);
                    if (res.result.list.length != 0){
                        BOS3D.GlobalData.ContinueRender = true;
                        var scene = viewer3D.viewerImpl.getScene();
                        
                        // this.cloneTowerGroup.map(item => {
                        //判断所选塔吊
                        // if (item.name === name) {
                        let groupArrChildren = item.children;
                        let arr = []
                        let arr2 =[]
                        indexArr.map((item,index) => {
                            if (item.name == '绳索'){
                                console.log(item);
                                arr.push(item)
                                arr2.push(item)
                                // groupArrChildren[item.index].applyMatrix4(new BOS3D.THREE.Matrix4().makeScale(1,1,0.5));
                            }else if(item.name == '吊钩'){
                                arr.push(item)
                                arr2.push(item)
                            }else if(item.name == '塔吊臂总体'){
                                arr.push(item)
                            }else if(item.name == "驾驶室"){
                                arr.push(item)
                            }else if(item.name == "小车"){
                                arr.push(item)
                                arr2.push(item)
                            }
                        })
                        // let com = [groupArrChildren[arr[0].index], groupArrChildren[arr[1].index], groupArrChildren[arr[2].index], groupArrChildren[arr[3].index], groupArrChildren[arr[4].index]];
                        let com = []
                        console.log(groupArrChildren)
                        groupArrChildren.forEach(item=>{
                            if(item.name == '小车'){
                                com.push(item)
                            }
                            if(item.name == '绳索'){
                                com.push(item)
                            }
                            if(item.name == '塔吊臂总体'){
                                com.push(item)
                            }
                            if(item.name == '吊钩'){
                                com.push(item)
                            }
                            if(item.name == ''){
                                com.push(item)
                            }
                        })
                        let box = holderBox //塔支架的包围盒
                        box.center();
                        // console.log(box.center())
                        console.log(box.x)
                        let center = new BOS3D.THREE.Vector3(box.x, box.y, box.z);
                        // console.log(center)
                        let axes = new BOS3D.THREE.Vector3(0, 0, 1);
                        axes.normalize();
                        let object = {
                            angle:'',
                            height:'',
                            width:''
                        }
                        this.getTowerImage(res.result.list,item.children)
                        let oldangle,oldheight,oldranger,oldPrescription;
                        if (sessionStorage.getItem(towerSn)){
                            let oldObject = JSON.parse(sessionStorage.getItem(towerSn))
                            console.log(oldObject,res.result.list[0].angle,res.result.list[0].height,res.result.list[0].ranger);
                            oldangle =  res.result.list[0].angle - oldObject.angle
                            oldheight = res.result.list[0].height - oldObject.height
                            oldranger = res.result.list[0].ranger - oldObject.width
                            console.log(res.result.list[0].height * high/res.result.tower.towerHeight,oldObject.height*high/res.result.tower.towerHeight);
                            oldPrescription = ((res.result.list[0].height * (high)/res.result.tower.towerHeight) + offzS) /((oldObject.height*high/res.result.tower.towerHeight) + offzS)
                            object = {
                                angle:res.result.list[0].angle,
                                height:res.result.list[0].height,
                                width:res.result.list[0].ranger
                            }
                        }else {
                            console.log(res.result.list[0].height,high,res.result.tower.towerHeight,offzS, ((res.result.list[0].height*high/res.result.tower.towerHeight) + offzS)/offzS);
                            oldangle = res.result.list[0].angle
                            oldheight = res.result.list[0].height
                            oldranger = res.result.list[0].ranger
                            console.log(res.result.list[0].ranger);
                            oldPrescription = ((res.result.list[0].height*high/res.result.tower.towerHeight) + offzS)/offzS
                            object = {
                                angle:res.result.list[0].angle,
                                height:res.result.list[0].height,
                                width:res.result.list[0].ranger
                            }
                        }
                        // dirAxes.normalize();
                        // dirAxes.multiplyScalar((oldranger*ropeWidth/res.result.tower.forearmLength)/20);
                        // dirAxes.multiplyScalar(200)
                        // dirAxes.multiplyScalar((oldranger*ropeWidth/res.result.tower.forearmLength)/32);
                        console.log(oldranger,ropeWidth ,res.result.tower.forearmLength,32);
                        let dir2
                        // item.children.forEach( res=>{
                        //     console.log(res.name)
                        // })
                        
                        
                        console.log(dirAxes);
                        // let box3 = new BOS3D.THREE.Box3().expandByObject(item.children[arr2[0].index]);
                        // console.log(box3);
                        // let size = box3.getSize(new BOS3D.THREE.Vector3());
                        // console.log(size);
                        // let centers = box3.getCenter(new BOS3D.THREE.Vector3());
                        console.log(center2);
                        // let center2 = new BOS3D.THREE.Vector3(centers.x, centers.y, centers.z + size.z / 2)
                        let Prescription = Math.sqrt(Math.sqrt(Math.sqrt(Math.sqrt(Math.sqrt(oldPrescription)))));
                        // let Prescription = Math.sqrt(Math.sqrt(Math.sqrt(Math.sqrt(Math.sqrt(20)))));
                        let a = 0;let b = 0;
                        let setin = setInterval(() => {
                            a++
                            if (a >= 33) {
                                let setin2 = setInterval(() => {
                                    b++
                                    if (b >= 32) {
                                        clearInterval(setin2);
                                    }
                                    if(oldranger*ropeWidth/res.result.tower.forearmLength > 0){
                                        dirAxes.normalize();
                                        dirAxes.multiplyScalar((oldranger*ropeWidth/res.result.tower.forearmLength)/32);
                                        dir2 = dirAxes
                                    }else if(oldranger*ropeWidth/res.result.tower.forearmLength < 0){
                                        console.log(1,456)
                                        dirAxes.normalize();
                                        dir2 = new BOS3D.THREE.Vector3();
                                        dir2.copy(dirAxes);
                                        dir2.multiplyScalar((oldranger*ropeWidth/res.result.tower.forearmLength)/32);
                                    }
                                    // dirAxes.multiplyScalar(200)
                                    // high, ropeWidth,res.result.tower.towerHeight,res.result.tower.forearmLength
                                    // console.log(oldranger * ropeWidth / res.result.tower.forearmLength);
                                    if (oldranger*ropeWidth/res.result.tower.forearmLength != 0){
                                        // dirAxes.normalize()
                                        console.log(dir2)
                                        let index1,index2,index3
                                        item.children.forEach((item,index)=>{
                                            if(item.name == '小车'){
                                                index3 = index
                                            }
                                            if(item.name == '吊钩'){
                                                index2 = index
                                            }
                                            if(item.name == '绳索'){
                                                index1 = index
                                            }
                                        })
                                        
                                        item.children[index1].applyMatrix4(new BOS3D.THREE.Matrix4().makeTranslation(dir2.x, dir2.y,dir2.z));//绳索
                                        item.children[index1].updateMatrixWorld(true);
                                        item.children[index2].applyMatrix4(new BOS3D.THREE.Matrix4().makeTranslation(dir2.x, dir2.y, dir2.z)); //吊钩
                                        item.children[index2].updateMatrixWorld(true);
                                        item.children[index3].applyMatrix4(new BOS3D.THREE.Matrix4().makeTranslation(dir2.x, dir2.y, dir2.z));//小车
                                        item.children[index3].updateMatrixWorld(true);
                                    }
                                    //绳索缩放
                                    // console.log(oldPrescription);
                                    if(oldPrescription != 1){
                                        let index1,index2
                                        item.children.forEach((item,index)=>{
                                            if(item.name == '吊钩'){
                                                index2 = index
                                            }
                                            if(item.name == '绳索'){
                                                index1 = index
                                            }
                                        })
                                        item.children[index1].applyMatrix4(new BOS3D.THREE.Matrix4().makeTranslation(-center2.x, -center2.y, -center2.z));
                                        item.children[index1].updateMatrixWorld(true);
                                        item.children[index1].applyMatrix4(new BOS3D.THREE.Matrix4().makeScale(1, 1, Prescription));
                                        item.children[index1].updateMatrixWorld(true);
                                        item.children[index1].applyMatrix4(new BOS3D.THREE.Matrix4().makeTranslation(center2.x, center2.y, center2.z));
                                        item.children[index1].updateMatrixWorld(true);
                                        // console.log(item.children)
                                        let box3 = new BOS3D.THREE.Box3().expandByObject(item.children[index1]);
                                        // console.log(box3);
                                        let box4 = new BOS3D.THREE.Box3().expandByObject(item.children[index2]);
                                        // console.log(box4);
                                        item.children[index2].applyMatrix4(new BOS3D.THREE.Matrix4().makeTranslation(0, 0, box3.min.z-box4.max.z)); //吊钩
                                        item.children[index2].updateMatrixWorld(true);
                                        // item.children[arr2[0].index].applyMatrix4(new BOS3D.THREE.Matrix4().makeTranslation(-center2.x, -center2.y, -center2.z));
                                        // item.children[arr2[0].index].updateMatrixWorld(true);
                                        // item.children[arr2[0].index].applyMatrix4(new BOS3D.THREE.Matrix4().makeScale(1, 1, Prescription));
                                        // item.children[arr2[0].index].updateMatrixWorld(true);
                                        // item.children[arr2[0].index].applyMatrix4(new BOS3D.THREE.Matrix4().makeTranslation(center2.x, center2.y, center2.z));
                                        // item.children[arr2[0].index].updateMatrixWorld(true);
                                        // // console.log(item.children)
                                        // let box3 = new BOS3D.THREE.Box3().expandByObject(item.children[arr2[0].index]);
                                        // // console.log(box3);
                                        // let box4 = new BOS3D.THREE.Box3().expandByObject(item.children[arr2[1].index]);
                                        // // console.log(box4);
                                        // item.children[arr2[1].index].applyMatrix4(new BOS3D.THREE.Matrix4().makeTranslation(0, 0, box3.min.z-box4.max.z)); //吊钩
                                        // item.children[arr2[1].index].updateMatrixWorld(true);
                                    }
                                },31.25)
                                clearInterval(setin);
                            }
                            for (let i = 0; i < com.length; i++) {
                                com[i].applyMatrix4(new BOS3D.THREE.Matrix4().makeTranslation(-center.x, -center.y, -center.z));
                                com[i].updateMatrixWorld(true);
                                // makeRotationAxis(axes 绕那个轴旋转, 0.1 弧度))
                                // 度数/2*0.0174533
                                com[i].applyMatrix4(new BOS3D.THREE.Matrix4().makeRotationAxis(axes, Math.PI/180*(-oldangle)/32));
                                com[i].updateMatrixWorld(true);
                                com[i].applyMatrix4(new BOS3D.THREE.Matrix4().makeTranslation(center.x, center.y, center.z));
                                com[i].updateMatrixWorld(true);
                            }
                            //重定向 小车绳索 吊钩的x轴
                            dirAxes.applyAxisAngle(axes, Math.PI/180*(-oldangle)/32)
                        },31.25)
                        sessionStorage.setItem(towerSn, JSON.stringify(object));
                    }
                })
            },
            //固定标签方法
            tag(x, y, z, dom) {
                var worldVector = new BOS3D.THREE.Vector3(x, y, z);
                console.log(worldVector)
               
                /**
                 * 立方体世界坐标转屏幕坐标
                 */
                    //获取网格模型boxMesh的世界坐标
                // var worldVector = new BOS3D.THREE.Vector3(x, y, z);
                // //世界坐标转标准设备坐标
                // var standardVector = worldVector.project(viewer3D.viewerImpl.camera);
                // var a = 1880 / 2;
                // var b = 748 / 2;
                // var x = Math.round(standardVector.x * a + a);//标准设备坐标转屏幕坐标
                // var y = Math.round(-standardVector.y * b + b);//标准设备坐标转屏幕坐标
                // /**
                //  * 更新立方体元素位置
                //  */
                // console.log(a,b,standardVector,x, y);
                // dom.style.left = (x) + 'px';
                // dom.style.top = (y-800) + 'px';
            }
        },
        beforeDestroy() {
            for(let each in pageTimer){
                clearInterval(pageTimer[each]);
            }
            loadNumber = 0
            pageTimer = {}
            dirAxesTowerSn ={}
            // clearInterval(this.timer);
        },
    }
</script>

<style lang="less" scoped>
@import "./animate/animate.min.css";
// @import "./css/BOS3DUI.min.css";
.bigScreen{
    width: 100%;
    height: 100%;
    background: #0c0f20;
    background: url('./../../../assets/images/bigSiteVisualization/page-bg.gif') no-repeat center;
}
.headerBox{
    height: 74px;
    position: relative;
    // background: url('./../../../assets/images/bigSiteVisualization/header-bg.png') no-repeat center;
    .header_title{
        color: #fff;
        text-align: center;
        line-height: 56px;
        font-size: 30px;
        font-weight: bold;
        font-family: '思源黑体';
    }
    .close-btn{
        position: absolute;
        right: 24px;
        top: 20px;
        cursor: pointer;
    }
}
.footerBox{
    // height: 65px;
    // background: url('./../../../assets/images/bigSiteVisualization/footer-bg.png') no-repeat center;
    // background-size: 100% 100%;
}
    .FixedLabel{
        position: absolute;
        z-index: 5;
        box-sizing: border-box;
        .FixedLabel_item{
            position: relative;
            padding: 10px;
            border: 1px solid red;
        }
    }
    body {
        margin: 0;
        overflow: hidden;
        position: fixed;
    }
    .selectBox{
        position: absolute;
        z-index: 100;
        left: 60px;
        top: 30px;
    }
    .select{
        display: inline-block;
        margin-right: 20px;
    }
    .buttonBox2{
        display: inline-block;
    }
    /deep/.el-dialog__wrapper .el-dialog {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin: 0px;
    }
.buttonBox{
    position: absolute;
    top:90%;
    left:50%;
    border-radius: 10px;
    background: #1e1e1e;
    /*width:100%;*/
    transform:translate(-50%,-50%);
    /*text-align: center;*/
    .buttonItem{
        cursor:pointer;
        display: inline-block;
        padding: 17px 30px;
        color: #FFFFFF;
        position: relative;
        .tower-list{
            overflow: hidden;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            background: rgba(0,0,0,0.5);
            color: #fff;
            li{
                height: 46px;
                width: 100%;
                text-align: center;
                line-height: 46px;
                border-bottom: 1px solid #fff;
            }
            li:last-child{
                border: 0;
            }
        }
        .show-btn{
            transition: all 0.3s linear;
            transform: rotate(180deg);
        }
        .hidden-btn{
            transition: all 0.3s linear;
            transform: rotate(0deg);
        }
    }
}
.wrap{
    width: 100%;
    height: 100%;
}
.left-box{
    position: absolute;
    left: 20px;
    top: 90px;
    width: 378px;
    height: calc(100% - 140px);
    // background: yellow;
    z-index: 10;
}
.animate__animated.animate__fadeIn {
  --animate-duration: 0.6s;
}
.animate__animated.animate__fadeOut {
  --animate-duration: 0.6s;
}
.viewportBox{
    width: 100%;
    height: calc(100% - 140px);
    margin: 0 auto;
    // margin-top: 100px;
}
.box-title{
    width: 100%;
    height: 62px;
    color: #fff;
    background: url('./../../../assets/images/bigSiteVisualization/title-bg.png') no-repeat left;
    background-size: 100%;
    padding-left: 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    margin-bottom: 21px;
    span{
        font-size: 18px;
    }
    i{
        font-size: 12px;
        font-style: normal;
        color: rgba(255, 255, 255, 0.3);
        letter-spacing: 4px;
    }
}
.flex{
    display: flex;
}
.box-content{
    color: #FFFFFF;
    padding-left: 24px;
    font-size: 14px;
    height: calc(100% - 83px);
}
.info-label{
    width: 90px;
    color: rgba(255, 255, 255, 0.6);
    div{
        margin-bottom: 6px;
    }
}
.info-content{
    div{
        margin-bottom: 6px;
        white-space: nowrap;
    }
}
.h-30{
    height: 33.3%;
}
.right-box{
    position: absolute;
    right: 20px;
    top: 90px;
    width: 358px;
    height: calc(100% - 140px);
    z-index: 10;
}
.card-box{
    width: 102px;
    height: 116px;
    text-align: center;
    background: url('./../../../assets/images/bigSiteVisualization/card-bg.png') no-repeat center;
    background-size: 100%;
    .count{
        font-size: 25px;
        color: #5181F6;
        font-weight: bold;
        line-height: 32px;
    }
    span{
        display: block;
        font-size: 14px;
        line-height: 14px;
    }
}
.m-50{
    margin-right: 50px;
}
.box-table{
    width: 100%;
    height: 100%;
    font-size: 14px;
    .table-header{
        height: 30px;
        border-bottom:  1px solid rgba(81, 129, 246, 0.17);;
    }
    .table-content{
        .table-item{
            height: 30px;
            div{
                line-height: 30px;
            }
        }
        .table-item:nth-child(2n){
            background:  rgba(81, 129, 246, 0.2);;
        }
    }
}
.data-item{
    width: 100%;
    height: 81px;
    background: #111A33;
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 19px;
    font-size: 14px;
    div{
        font-size: 18px;
        .count{
            font-size: 20px;
            color: #5181F6;
            font-weight: 600;
        }
    }
    p{
        margin-bottom: 0;
        i{
            color: #5181F6;
            font-style: normal;
            margin-right: 6px;
        }
    }
}
.tower-box{
    // height: 100%;
    padding-right: 10px;
    .tower-item{
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        .progress{
            flex: 1;
            height: 7px;
            background: rgba(81, 129, 246, 0.1);
            margin: 0 20px 0 0px;
            position: relative;
            .content{
                position: absolute;
                left: 0;
                top: 0;
                height: 7px;
                background: rgba(81, 129, 246, 1);
            }
        }
    }
}
.info_wrap{
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.info_box{
    width: 2980px;
    // height: 1910px;
    background: #111A33;
    color: #fff;
    font-size: 120px;
    padding: 0 150px;
    padding-bottom: 260px;
    box-sizing: content-box;
    position: relative;
    .info-title{
        text-align: center;
        margin-bottom: 60px;
        height: 260px;
        span{
            height: 260px;
            display: inline-block;
            padding: 0 200px;
            background: url('./../../../assets/images/bigSiteVisualization/title-bg2.png') no-repeat center;
            background-size: 100% 100%;
        }
    }
    .dialog_info{
        margin-bottom: 100px;
        .info_bx{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 70px;
            .info-item{
                width: 840px;
                height: 630px;
                margin: 0 50px;
                background: #0B0F1F;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                span{
                    color: #5181F6;
                    line-height: 180px;
                    font-weight: 600;
                }
            }
        }
    }
    .info-icon{
        width: 160px;
        height: 160px;
        margin-top: 20px;
    }
    .info-footer{
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 280px;
        line-height: 320px;
        padding-left: 180px;
        background: url('./../../../assets/images/bigSiteVisualization/box-fotter.png') no-repeat center;
        background-size: 100% 100%;
    }
    .corner_1{
        position: absolute;
        top: 0;
        left: 0;
        width: 90px;
        height: 90px;
        background: url('./../../../assets/images/bigSiteVisualization/box-icon.png') no-repeat center;
        background-size: 100% 100%;
        transform: rotate(-90deg)
    }
    .corner_2{
        position: absolute;
        top: 0;
        right: 0;
        width: 90px;
        height: 90px;
        background: url('./../../../assets/images/bigSiteVisualization/box-icon.png') no-repeat center;
        background-size: 100% 100%;
    }
    .corner_3{
        position: absolute;
        bottom: 0;
        left: 0;
        width: 90px;
        height: 90px;
        background: url('./../../../assets/images/bigSiteVisualization/box-icon.png') no-repeat center;
        background-size: 100% 100%;
        transform: rotate(180deg)
    }
    .corner_4{
        position: absolute;
        bottom: 0;
        right: 0;
        width: 90px;
        height: 90px;
        background: url('./../../../assets/images/bigSiteVisualization/box-icon.png') no-repeat center;
        background-size: 100% 100%;
        transform: rotate(90deg)
    }
}
.info-alarms{
    display: flex;
    align-items: center;
    margin-bottom: 50px;
    color: #F56C6C;
    .info-icon{
        margin-top: 0;
        margin-right: 50px;
    }
}
</style>
