YZProjectCloud/yanzhu-ui-vue3/src/views/bim/bimSetting/index.vue

<template>
    <div class="bim-setting-page app-container2">
        <div id="bimSettingContainer"></div>
        <model-floor-tree ref="modelFloorTree" @change="doChange" :projectMessage="models" v-if="showTree"></model-floor-tree>
        <div class="footer-box" v-if="showModels.length>0">
            <a-tooltip placement="top" title="主视图">
                <div class="footer-btn" @click="doMenu(0)" :class="activeMenu == 0 ? 'is-active' : ''">
                    <svg-icon icon-class="home" />
                </div>
            </a-tooltip>
            <a-tooltip placement="top" title="第一人称漫游">
                <div class="footer-btn" @click="doMenu(1)" :class="activeMenu == 1 ? 'is-active' : ''">
                    <svg-icon icon-class="roam" />
                </div>
            </a-tooltip>
            <a-tooltip placement="top" title="自定义视点漫游">
                <div class="footer-btn" @click="doMenu(2)" :class="activeMenu == 2 ? 'is-active' : ''">
                    <svg-icon icon-class="view" />
                </div>
            </a-tooltip>
            <a-tooltip placement="top" title="视点管理">
                <div class="footer-btn" @click="doMenu(3)" :class="activeMenu == 3 ? 'is-active' : ''">
                    <svg-icon icon-class="camera" />
                </div>
            </a-tooltip>
            <a-tooltip placement="top" title="构件隐藏">
                <div class="footer-btn" @click="doMenu(4)" :class="activeMenu == 4 ? 'is-active' : ''">
                    <svg-icon icon-class="hide" />
                </div>
            </a-tooltip>
        </div>
        <div class="bim-setting-tools" v-show="activeMenu>0">
            <div class="tools-title">{{param.title }}</div>
            <el-icon @click="doToolsClose" style="color:#fff" class="tools-close">
                <Close />
            </el-icon>
            <person-roaming v-if="activeMenu===1"></person-roaming>
        </div>
    </div>
</template>

<script>
import useUserStore from '@/store/modules/user'
import { listBimModel } from '@/api/bim/bimModel'
import ModelFloorTree from './ModelFloorTree.vue'
import PersonRoaming from './PersonRoaming.vue'

import { h } from 'vue'
export default {
    components: {
        ModelFloorTree,
        PersonRoaming,
    },
    data() {
        return {
            userStore: {},
            isAdmin: false,
            projects: [],
            currentPrjId: null,
            currentComId: null,
            subDepts: [],
            models: [],
            isMobile: false,
            showTree: false,
            initSuccess: false,
            activeMenu: 0,
            showModels: [],
            param: {},
        }
    },
    beforeUnmount() {
        document.body.classList.remove('is-sapi')
    },
    mounted() {
        document.body.classList.add('is-sapi')
        this.userStore = useUserStore()
        this.isAdmin = this.userStore.isAdmin
        this.currentPrjId = this.userStore.currentPrjId
        this.currentComId = this.userStore.currentComId
        this.initLoadModel()
        this.initEngine()
    },
    methods: {
        doChange() {
            this.showModels = api.m_model.keys().toArray()
            console.log('--change--')
        },
        doMenu(n) {
            if (n == this.activeMenu) {
                return
            }
            this.activeMenu = n
            if (n == 0) {
                api.Model.location(api.m_model.keys().toArray()[0])
            }
            if (n == 1) {
                this.NotificationPopup({
                    title: '第一人称漫游',
                    //id: 'PersonRoaming',
                    //description: h('p', null, [h('span', null, 'Message can be '), h('i', { style: 'color: teal' }, 'VNode')]),
                    //description: h('p', null, [h(PersonRoaming)]),
                })
            }
        },
        NotificationPopup(parameter) {
            this.param = parameter
            // const that = this
            // that.$notification.open({
            //     key: 'EngineKey',
            //     message: parameter.title,
            //     description: parameter.description,
            //     class: 'engine-notification ' + (parameter.tips ? parameter.tips : ''),
            //     duration: null,
            //     placement: parameter.placement ? parameter.placement : that.isMobile ? 'bottomLeft' : 'topRight',
            //     style: {
            //         top: parameter.top ? parameter.top : '50px',
            //         width: parameter.width ? parameter.width : '360px',
            //         marginRight: `20px`,
            //         borderRadius: '0px',
            //     },
            //     onClose: this.notifClose,
            // })
        },
        doToolsClose() {
            this.activeMenu = -1
        },
        notifClose() {
            this.activeMenu = -1
        },
        initEngine() {
            window.api = new SAPI(
                {
                    serverIP: window.config.serverIP, //服务ip地址
                    port: window.config.port, //HTTP端口
                    useHttps: window.config.useHttps, //使用Https
                    container: 'bimSettingContainer', //[必须]容器id
                    secretKey: window.config.secretKey,
                    openEarth: window.config.openEarth, //[可选]开启Gis场景
                    bgColor: window.config.bgColor, //[可选]bim场景背景色, 传值即为纯色天空盒
                    tintColor: window.config.tintColor, //[可选]osgb单体化颜色
                    sceneTime: window.config.sceneTime, //[可选]分别为当前时间、日出时间、日落时间
                    cadMode: window.config.cadMode, // 是否是Cad图纸预览模式
                },
                () => {
                    this.initSuccess = true
                    console.log('初始化成功')
                    let mapOptions = {
                        imgs: {
                            // 六面图片
                            top: './img/top.png',
                            bottom: './img/under.png',
                            east: './img/east.png',
                            south: './img/south.png',
                            west: './img/west.png',
                            north: './img/north.png',
                        },
                        offset: {
                            // 屏幕坐标偏移
                            corner: GLENavigationCube.RightTop,
                            x: 25,
                            y: 20,
                        },
                        cube: {
                            hoverColor: '#7193dc', // 立方导航快鼠标移过显示颜色
                            size: 75, // 导航立方尺寸
                            hotPointSize: 7, // 导航立方棱角热点区域尺寸
                            cubeTextColor: '#4c4c4ccc', // cube 各个面文字颜色
                            cubeStrokeColor: '#374769cc', // cube 各个面边框颜色
                            cubeFillColor: '#374769cc', // cube 各个面填充颜色
                        },
                        zoomRatios: 1, // 缩放倍率
                        show: true, // 是否显示
                        showAxes: true, // 是否显示XYZ轴线
                    }
                    api.Plugin.initNavCube(mapOptions)
                }
            )
        },
        initLoadModel() {
            listBimModel({
                pageNum: 1,
                pageSize: 10,
                comId: this.currentComId,
                projectId: this.currentPrjId,
            }).then((d) => {
                this.models = d.rows || []
                if (this.models.length == 0) {
                    this.$model.msgError('暂无模型，请先关联模型')
                } else {
                    this.showTree = true
                }
            })
        },
    },
}
</script>

<style lang="scss">
.bim-setting-page {
    position: relative;
    height: 100%;
    #bimSettingContainer {
        height: 100%;
    }
    .footer-box {
        position: absolute;
        bottom: 10vh;
        left: 50%;
        margin-left: -75px;
        background: #274754;
        border-radius: 4px;
        .footer-btn {
            display: inline-flex;
            width: 40px;
            height: 40px;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            svg {
                width: 20px;
                height: 20px;
                fill: #fff;
            }
            &:hover {
                background: #408edb97;
            }
            &.is-active {
                svg {
                    fill: rgb(0, 255, 174);
                }
            }
        }
    }
    .bim-setting-tools {
        position: absolute;
        top: 10px;
        right: 10px;
        background: rgba(255, 255, 255, 0.5);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        .tools-title {
            padding: 10px;
            color: #114c5f;
            size: 24px;
        }
        .tools-close {
            position: absolute;
            top: 10px;
            right: 10px;
            cursor: pointer;
        }
    }
}
body.is-sapi {
    .app-main {
        height: calc(100vh - 84px);
    }
}
</style>