4dkankan_bim/src/pages/LaserBim.vue

<template>
    <header>
        <div v-if="project">项目 - {{ project.name }}</div>
    </header>
    <article>
        <main>
            <div class="split" v-if="source">
                <iframe ref="sourceFrame" :src="`smart-laser.html?m=${source.num}&dev`" frameborder="0" @load="onLoadSource"></iframe>
                <div class="tools">
                    <div class="item-mode">
                        <div class="iconfont icon-show_roaming_normal" :class="{ active: mode == 0 }" @click="onModeChange(0)"></div>
                        <div class="iconfont icon-show_more" :class="{ active: mode == 1 }" @click="onModeChange(1)"></div>
                    </div>
                    <div class="item-date" v-if="target">
                        <span class="prev" @click="onPrevDate('source')"><i class="iconfont icon-show_back"></i></span>
                        <span @click="onPickDate('source')">{{ source.date }}</span>
                        <span class="next" @click="onNextDate('source')"><i class="iconfont icon-show_back"></i></span>
                    </div>
                </div>
            </div>
            <div class="split" v-if="target">
                <iframe ref="targetFrame" :src="`smart-bim.html?m=${target.num}`" frameborder="0" @load="onLoadTarget"></iframe>
            </div>
            <div class="tools" v-if="source">
                <div class="item-date" v-if="!target">
                    <span class="prev" @click="onPrevDate()"><i class="iconfont icon-show_back"></i></span>
                    <span @click="onPickDate('all')">{{ source.date }}</span>
                    <span class="next" @click="onNextDate()"><i class="iconfont icon-show_back"></i></span>
                </div>
                <div class="item-split" @click="onCompare">
                    <i class="iconfont icon-size-o"></i>
                </div>
            </div>
            <div class="popup" v-if="source && datepickName">
                <div>
                    <span @click="onPickClose"><i class="iconfont icon-close"></i></span>
                    <datepicker :inline="true" :value="datepickValue" :highlighted="highlighted" @selected="onSelected"></datepicker>
                </div>
            </div>
        </main>
    </article>
</template>

<script setup>
import Datepicker from 'vuejs3-datepicker'
import { ref, onActivated, onDeactivated, reactive, onMounted, computed } from 'vue'
import ConvertViews from '@/utils/ConvertViews'
 
let sourceApp = null, sourceSceneName
let targetApp = null

const views = new ConvertViews()
const datepickName = ref(null)
const datepickValue = ref(null)
const sourceFrame = ref(null)
const targetFrame = ref(null)
const mode = ref(0)
const source = ref(null)
const target = ref(null)
const project = ref(null)
const projects = reactive([{ pid: '001', name: '五楼办公区', num: 'SS-t-bFMqa1dqUU', date: '2022-09-01' }])
const scenes = reactive([
    { pid: '001', num: 'SS-t-bFMqa1dqUU', date: '2022-09-01' },
    { pid: '001', num: 'SS-t-xp9BDKfzhR', date: '2022-09-03' },
    { pid: '001', num: 'SS-t-lc5OWhZPaC', date: '2022-09-05' },
    { pid: '001', num: 'SS-t-Y6gLRFwxE5', date: '2022-09-10' },
])
const highlighted = computed(() => {
    let dates = []
    if (datepickName.value) {
        dates = scenes.map(item => item.date.toDate())
    }
    return {
        dates: dates,
    }
})

const getView = ()=>{
    let camera = sourceApp.viewer.mainViewport.camera
    return {
        position : camera.position,
        quaternion : camera.quaternion, 
        fov : camera.fov
    }
} 

const initConvertView = (noNeedBindEvent) => {
    if(sourceApp && targetApp ){
        views.init(sourceApp, targetApp , sourceApp.viewer.inputHandler.domElement, 'laser', getView(), 
                    sourceApp.viewer.images360.panos.slice(0,2).map(e=>e.position), )
    }
}

const onLoadSource = () => {
    
    if(views.loaded){
        views.clear({dontClearTarget:true})   
    }


    sourceApp = sourceFrame.value.contentWindow
    sourceApp.loaded.then(sdk => {
        if (mode.value != 0) {
            sdk.scene.changeMode(mode.value)
        }
        
        window.viewer1 = sourceApp.viewer 
        
        viewer1.mainViewport.view.minPitch+=0.01//防止bim垂直视角上的闪烁（似乎是因 up 要乘以某矩阵导致微小偏差所致）
        viewer1.mainViewport.view.minPitch-=0.01
        
        
        initConvertView()
        sourceSceneName = sourceApp.Potree.settings.number
        sourceApp.viewer.addEventListener('camera_changed', e => { 
            targetApp && views.receive( getView() )
        })  
        
    }) 
    
    sourceApp.canChangePos = ()=>{
        return sourceApp.Potree.settings.displayMode != 'showPanos'
    }
    
}
const onLoadTarget = () => { 
 
    targetApp = targetFrame.value.contentWindow
 
    targetApp.loaded.then(viewer=>{
        //console.log(viewer.getViewer().camera)
        window.viewer2 = targetApp.viewer
        initConvertView() 
    })
 
 
 
 
    // targetApp.Scene.on('loaded', () => {
    //     targetApp.Camera.setCompassDisplay(false)
    //     targetApp.Connect.sync.start()
    //     targetApp.VRScreenSYNC = false
    //     console.log('targetApp.Scene loaded')

    //     views.bind({ targetApp })
    //     sourceApp && sourceApp.Connect.sync.sync()
    // })
    // targetApp.Connect.sync.on('data', data => {
    //     if (sourceApp) {
    //         views.applyDiff(sourceApp, data)
    //         sourceApp.Connect.sync.receive(data)
    //     }
    // })
}


views.addEventListener('sendCameraData',(e)=>{ //同步右侧数据
    sourceApp.viewer.mainViewport.view.position.copy(e.data.position)
    sourceApp.viewer.mainViewport.view.lookAt(e.data.target)
    
})




const onModeChange = targetMode => {
    if (sourceApp) {
        sourceApp.loaded.then(sdk => sdk.scene.changeMode(targetMode))
        mode.value = targetMode
    }
}
const onPickDate = name => {
    if (name == 'target') {
        datepickValue.value = target.value.date.toDate()
    } else {
        datepickValue.value = source.value.date.toDate()
    }
    datepickName.value = name
}
const onPickClose = () => {
    datepickName.value = null
    datepickValue.value = null
}
const onSelected = payload => {
    if (!payload) {
        return
    }

    var date = payload.format('YYYY-mm-dd')
    var dates = highlighted.value.dates.map(item => item.format('YYYY-mm-dd'))

    if (dates.indexOf(date) != -1) {
        var find = scenes.find(c => c.date == date)
        if (find) {
            if (datepickName.value) {
                if (datepickName.value == 'all' || datepickName.value == 'source') {
                    if (find.num != source.value.num) {
                        source.value = find
                    }
                } else if (datepickName.value == 'target') {
                    if (find.num != target.value.num) {
                        target.value = find
                    }
                }
            } else {
                if (find.num != source.value.num) {
                    source.value = find
                }
            }
        }
    }

    datepickName.value = null
}
const onCompare = () => {
    if (target.value) {
        target.value = null
        targetApp = null
        views.clear()
        return
    }
    let index = scenes.findIndex(item => item.num == source.value.num)
    if (index == -1) {
        return
    }
    if (++index > scenes.length - 1) {
        index = 0
    }
    target.value = scenes[index]
}

const onPrevDate = name => {
    let scene = null
    if (!name || name == 'source') {
        scene = source
    } else {
        scene = target
    }
    let index = scenes.findIndex(item => item.num == scene.value.num)
    if (index == -1) {
        return
    }
    if (--index == -1) {
        index = scenes.length - 1
    }

    // if (name) {
    //     if (name == 'source') {
    //         if (scenes[index].num == target.value.num) {
    //             index--
    //         }
    //     } else {
    //         if (scenes[index].num == source.value.num) {
    //             index--
    //         }
    //     }
    // }
    // if (index == -1) {
    //     index = scenes.length - 1
    // }
    scene.value = scenes[index]
}
const onNextDate = name => {
    let scene = null
    if (!name || name == 'source') {
        scene = source
    } else {
        scene = target
    }
    let index = scenes.findIndex(item => item.num == scene.value.num)
    if (index == -1) {
        return
    }
    if (++index > scenes.length - 1) {
        index = 0
    }
    // if (name) {
    //     if (name == 'source') {
    //         if (scenes[index].num == target.value.num) {
    //             index++
    //         }
    //     } else {
    //         if (scenes[index].num == source.value.num) {
    //             index++
    //         }
    //     }
    // }
    // if (index > scenes.length - 1) {
    //     index = 0
    // }
    scene.value = scenes[index]
}

onMounted(() => {
    project.value = projects[0]
    if (project.value) {
        source.value = scenes[2] //scenes.find(item => item.num == project.value.num)
    }
})
</script>

<style lang="scss" scoped>
header {
    height: 60px;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
}
article {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
aside {
    width: 160px;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    h4 {
        font-size: 16px;
        text-align: center;
    }
    ul {
        margin-top: 20px;
    }
    li {
        margin: 0;
        padding: 0;
        font-size: 16px;
        margin-left: 20px;
        cursor: pointer;
        &:hover,
        &.active {
            color: #00c8af;
        }
    }
}
main {
    flex: 1;
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    &.full {
        .split {
            width: 50%;
        }
    }
    iframe {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1000;
        width: 100%;
        height: 100%;
    }
    .split {
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: relative;
        .tools {
            width: 100%;
            padding-left: 20px;
            padding-right: 20px;
            justify-content: space-between;
            left: 0;
            transform: none;
            .item-mode {
                display: flex;
                align-items: center;
                justify-content: space-around;
                height: 34px;
                border-radius: 17px;
                background-color: rgba(0, 0, 0, 0.3);
                > div {
                    position: relative;
                    margin-left: 20px;
                    margin-right: 20px;
                    cursor: pointer;
                    &.active {
                        color: #00c8af;
                    }
                }
                i {
                    font-size: 18px;
                }
            }
        }
    }
    .tools {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 10px;
        z-index: 1000;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        i {
            font-size: 18px;
        }
        .item-date {
            position: relative;
            height: 34px;
            border-radius: 17px;
            background-color: rgba(0, 0, 0, 0.3);
            padding: 0 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: 10px;
            margin-right: 10px;
            span {
                cursor: pointer;
            }
            .prev,
            .next {
                position: absolute;
                left: 5px;
            }
            .next {
                left: auto;
                right: 5px;
                transform: rotate(180deg);
            }
        }

        .item-split {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background-color: rgba(0, 0, 0, 0.3);
            cursor: pointer;
        }
    }
    .popup {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: center;
        > div {
            position: relative;
            color: #444;
            span {
                position: absolute;
                right: -20px;
                top: -20px;
                cursor: pointer;
                background-color: rgba(0, 0, 0, 0.3);
                width: 24px;
                height: 24px;
                border-radius: 50%;
                z-index: 1000;
                display: flex;
                justify-content: center;
                align-items: center;
                color: #fff;
            }
            i {
                font-size: 12px;
            }
        }
    }
}
</style>
<style lang="scss">
#app {
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
}
.vuejs3-datepicker__calendar-topbar {
    display: none !important;
}
.highlighted {
    background: #4ebde1 !important;
}
.selected {
    background: #00c8af !important;
}
</style>