2158 lines
107 KiB
Vue
2158 lines
107 KiB
Vue
<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>
|