From b3479543c42f9527c79d71557ebf680f4178cb93 Mon Sep 17 00:00:00 2001
From: haha <lj7788@126.com>
Date: Tue, 27 May 2025 00:14:58 +0800
Subject: [PATCH] =?UTF-8?q?=E6=BC=AB=E6=B8=B8=E5=8A=9F=E8=83=BD=E5=BC=80?=
 =?UTF-8?q?=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 yanzhu-bigscreen/src/components/header.vue    |   5 +
 yanzhu-ui-vue3/src/main.js                    |   1 -
 .../views/bim/bimSetting/PersonRoaming.vue    | 475 +++++++++++++++++-
 .../src/views/bim/bimSetting/index.vue        |  70 ++-
 4 files changed, 527 insertions(+), 24 deletions(-)

diff --git a/yanzhu-bigscreen/src/components/header.vue b/yanzhu-bigscreen/src/components/header.vue
index 5f17925e..5a86ceb7 100644
--- a/yanzhu-bigscreen/src/components/header.vue
+++ b/yanzhu-bigscreen/src/components/header.vue
@@ -156,6 +156,8 @@ export default {
     },
     mounted() {
         window.xapp = this
+        let prjTitle = localStorage.getItem('prj_title')
+        document.title = prjTitle || document.title
         this.$api.project.findMyProjectList().then((d) => {
             this.projects = d.rows || []
             if (this.projects.length > 0) {
@@ -178,11 +180,14 @@ export default {
             if (tmps.length > 0) {
                 this.$store.dispatch('SetSelProject', tmps[0])
                 this.selProject = tmps[0]
+                document.title = this.selProject.projectName + ' - 大屏'
             } else {
                 this.$store.dispatch('SetSelProject', null)
                 this.selProject = null
+                document.title = '大屏'
             }
             localStorage.setItem('selProj', this.selProjectId)
+            localStorage.setItem('prj_title', document.title)
         },
         doNav(n) {
             if (this.nav == n) {
diff --git a/yanzhu-ui-vue3/src/main.js b/yanzhu-ui-vue3/src/main.js
index d79e4a6d..c17ca256 100644
--- a/yanzhu-ui-vue3/src/main.js
+++ b/yanzhu-ui-vue3/src/main.js
@@ -106,7 +106,6 @@ app.component("ImageUpload", ImageUpload);
 app.component("ImagePreview", ImagePreview);
 app.component("RightToolbar", RightToolbar);
 app.component("Editor", Editor);
-
 app.use(router);
 app.use(store);
 app.use(plugins);
diff --git a/yanzhu-ui-vue3/src/views/bim/bimSetting/PersonRoaming.vue b/yanzhu-ui-vue3/src/views/bim/bimSetting/PersonRoaming.vue
index 69519cf3..69d415e9 100644
--- a/yanzhu-ui-vue3/src/views/bim/bimSetting/PersonRoaming.vue
+++ b/yanzhu-ui-vue3/src/views/bim/bimSetting/PersonRoaming.vue
@@ -1,10 +1,477 @@
 <template>
-    <div>1111</div>
+    <div class="roaming-settings">
+        <el-tabs v-model="tab" size="small" @tab-click="ChangeTab">
+            <el-tab-pane label="漫游设置" name="1" class="scroll-box roam-history">
+                <el-form ref="ruleForm" :model="form" :rules="rules" label-width="30%" @reset="handleCancel">
+                    <el-form-item label="漫游名称" prop="name">
+                        <el-input v-model="form.name" style="width: 100%"></el-input>
+                    </el-form-item>
+                    <el-form-item label="漫游类型" prop="roamType">
+                        <el-select v-model="form.roamType" placeholder="请选择">
+                            <el-option label="第一人称漫游" value="First"></el-option>
+                            <el-option label="第三人称漫游" value="Third"></el-option>
+                            <el-option label="飞行漫游" value="Flight"></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="移动速度" prop="moveRate">
+                        <el-input-number v-model="form.moveRate" :precision="2" :step="0.01" :min="0" placeholder="0.00" style="width: 100%"></el-input-number>
+                    </el-form-item>
+                    <el-form-item label="旋转速度" prop="lookFactor">
+                        <el-input-number v-model="form.turnRate" :precision="2" :step="0.01" :min="0" placeholder="0.00" style="width: 100%"></el-input-number>
+                    </el-form-item>
+                    <el-form-item>
+                        <el-button @click="startImmersionRoaming" ghost>开始漫游</el-button>
+                        <el-button @click="endImmersionRoaming" ghost>结束漫游</el-button>
+                    </el-form-item>
+                </el-form>
+                <el-table :data="data" border style="width: 100%" class="op-table">
+                    <el-table-column prop="option" label="操作" width="180"></el-table-column>
+                    <el-table-column prop="title" label="说明"></el-table-column>
+                </el-table>
+                <el-table :data="data1" border style="width: 100%" class="op-table" :show-header="false">
+                    <el-table-column prop="option" label="操作" width="180"></el-table-column>
+                    <el-table-column prop="title" label="说明"></el-table-column>
+                </el-table>
+            </el-tab-pane>
+            <el-tab-pane label="漫游历史" name="2" class="scroll-box roam-history roam-list-scroll">
+                <el-table :data="historys" :empty-text="`暂无漫游历史`" :loading="loading" style="width: 100%">
+                    <el-table-column prop="name" label="名称"></el-table-column>
+                    <el-table-column label="操作">
+                        <template #default="scope">
+                            <el-tooltip v-if="scope.row.play === 0" content="播放" placement="top">
+                                <el-button icon="el-icon-video-play" circle @click="playIR(scope.row)"></el-button>
+                            </el-tooltip>
+                            <el-tooltip v-else-if="scope.row.play === 1" content="暂停" placement="top">
+                                <el-button icon="el-icon-video-pause" circle @click="playIRPause(scope.row)"></el-button>
+                            </el-tooltip>
+                            <el-tooltip v-else-if="scope.row.play === 2" content="继续" placement="top">
+                                <el-button icon="el-icon-video-play" circle @click="playContinue(scope.row)"></el-button>
+                            </el-tooltip>
+                            <el-tooltip content="取消" placement="top">
+                                <el-button icon="el-icon-video-close" circle @click="playCancle(scope.row)"></el-button>
+                            </el-tooltip>
+                            <el-tooltip content="重命名" placement="top">
+                                <el-button icon="el-icon-edit" circle @click="renamed(scope.row)"></el-button>
+                            </el-tooltip>
+                            <el-tooltip content="删除" placement="top">
+                                <el-button icon="el-icon-delete" circle @click="delCamera(scope.row, scope.$index)"></el-button>
+                            </el-tooltip>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </el-tab-pane>
+        </el-tabs>
+
+        <el-dialog title="漫游重命名" :visible="visibleRenamed" width="280px" :before-close="() => visibleRenamed = false">
+            <el-form :model="formRenamed" label-width="80px">
+                <el-form-item label="漫游名称">
+                    <el-input v-model="formRenamed.name"></el-input>
+                </el-form-item>
+                <el-form-item label="备注" v-show="false">
+                    <el-input type="textarea" v-model="formRenamed.remark" :rows="4" placeholder="备注"></el-input>
+                </el-form-item>
+            </el-form>
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="visibleRenamed = false">取消</el-button>
+                    <el-button type="primary" @click="handSaveRenamed">确定</el-button>
+                </span>
+            </template>
+        </el-dialog>
+    </div>
 </template>
 
 <script>
-export default {}
-</script>
+const data = [
+    {
+        option: '鼠标左键',
+        title: '前进、后退、旋转',
+    },
+    {
+        option: '鼠标滚轮',
+        title: '上扬、下俯',
+    },
+    {
+        option: '按键(↑)或(↓)',
+        title: '前后平移',
+    },
+    {
+        option: '按键(←)或(→)',
+        title: '左右旋转',
+    },
+]
 
-<style>
+const data1 = [
+    {
+        option: '按键(W)',
+        title: '上浮',
+    },
+    {
+        option: '按键(S)',
+        title: '下沉',
+    },
+]
+export default {
+    data() {
+        return {
+            visibleRenamed: false,
+            isRoaming: false,
+            isRoamingHistory: false,
+            tab: 1,
+            data,
+            data1,
+            historys: [],
+            form: {
+                name: '',
+                moveRate: 0.5, //移动速度系数
+                turnRate: 1, //视角旋转速度(3°)
+                roamType: 'Third',
+            },
+            rules: {
+                name: [
+                    {
+                        required: true,
+                        message: '请输入漫游名称',
+                    },
+                ],
+                moveRate: [
+                    {
+                        required: true,
+                        message: '请输入移动速度系数',
+                    },
+                ],
+                turnRate: [
+                    {
+                        required: true,
+                        message: '请输入旋转速度系数',
+                    },
+                ],
+            },
+            formRenamed: {},
+            visibleRenamed: false, //重命名显示
+            modelRenamed: null,
+            pagination: {
+                current: 1,
+                pageSize: 10,
+            },
+            loading: true,
+            isMobile: false,
+        }
+    },
+    mounted() {
+        window.xapp = this
+        //初始化漫游历史
+        api.Plugin.addMiniMap()
+        let options = {
+            Anchor: 3,
+            Offset: [70, -380],
+            Size: 300,
+            // Height: 1200
+        }
+        api.Plugin.updateMiniMap(options)
+    },
+    methods: {
+        ChangeTab(data) {
+            const that = this
+            if (data == 2) {
+                that.historys = []
+                that.pagination.current = 1
+                that.pagination.pageSize = Math.ceil(document.getElementsByClassName('roam-history')[0].offsetHeight / 40) + 1
+                that.getRoamingList()
+            }
+        },
+        async getRoamingList() {
+            const that = this
+            await getRoamingTrack({
+                MaxResultCount: that.pagination.pageSize,
+                SkipCount: (that.pagination.current - 1) * that.pagination.pageSize,
+                ModelId: that.projectMessage.modelList[0].id,
+            }).then((res) => {
+                that.loading = false
+                const pagination = {
+                    ...that.pagination,
+                }
+                pagination.total = res.totalCount
+                //
+                if (res.items.length > 0) res.items.forEach((x) => (x.play = 0))
+                that.historys = that.historys.concat(res.items)
+                that.pagination = pagination
+                if (res.totalCount > that.pagination.current * that.pagination.pageSize) {
+                    that.updated()
+                }
+            })
+        },
+        updated() {
+            const that = this
+            that.$nextTick(() => {
+                const el = document.querySelector('.roam-list-scroll')
+                const offsetHeight = el.offsetHeight
+                el.onscroll = () => {
+                    const scrollTop = el.scrollTop
+                    const scrollHeight = el.scrollHeight
+                    if (offsetHeight + scrollTop - scrollHeight >= -1) {
+                        // 需要执行的代码
+                        if (that.pagination.total > that.pagination.current * that.pagination.pageSize) {
+                            that.pagination.current++
+                            that.getRoamingList()
+                        }
+                    }
+                }
+            })
+        },
+        startImmersionRoaming(e) {
+            //开始漫游
+            e.preventDefault()
+            const that = this
+            if (!that.form.name) {
+                that.$message.warning('请输入漫游名称!')
+                return
+            }
+            that.$refs.ruleForm.validate((valid) => {
+                if (valid) {
+                    that.$message.info('请点击选择漫游起始点')
+                    store.dispatch('GetObtainCoordinates', {
+                        clickStatus: true,
+                        callback: (data) => {
+                            store.dispatch('GetObtainCoordinates', {
+                                clickStatus: false,
+                            })
+                            //配置漫游
+                            api.Camera.setImmersiveRoamConfig({
+                                roamingMode: that.form.roamType,
+                                moveRate: that.form.moveRate,
+                                turnRate: that.form.turnRate,
+                                bRecordLocus: true,
+                                onIREnd: function (result) {
+                                    that.$message.success('漫游结束')
+                                    if (result) {
+                                        setRoamingTrack({
+                                            name: that.form.name,
+                                            modelId: that.projectMessage.modelList[0].id,
+                                            projectId: that.projectMessage.projectId,
+                                            time: 0,
+                                            remark: that.form.roamType,
+                                            sort: 0,
+                                            roamingPoints: result,
+                                        }).then((res) => {
+                                            res.record = result
+                                            res.play = 0
+                                            that.historys.push(res) //play 0未播放 1播放 2暂停
+                                            that.form = {
+                                                name: '',
+                                                moveRate: 0.5,
+                                                turnRate: 1,
+                                                roamType: that.form.roamType,
+                                            }
+                                        })
+                                    }
+                                },
+                            })
+                            //启动漫游
+                            that.isRoaming = true
+                            api.Camera.startImmersiveRoam(data)
+                        },
+                    })
+                }
+            })
+        },
+        endImmersionRoaming() {
+            if (this.isRoaming) {
+                this.isRoaming = false
+                api.Camera.stopImmersiveRoam()
+                this.projectMessage.camera
+                    ? api.Camera.setViewPort(this.projectMessage.camera)
+                    : api.Model.location(this.projectMessage.modelId)
+            } else {
+                this.$message.warning('请先开启漫游')
+            }
+        },
+        handleCancel() {
+            this.endImmersionRoaming()
+            this.$notification.destroy()
+        },
+        playIR(data) {
+            //播放 play 0未播放 1播放 2暂停
+            const that = this
+            that.isRoamingHistory = true
+            if (that.historys.findIndex((x) => x.play === 1) > -1) {
+                //暂停正在播放的
+                that.historys.find((x) => x.play === 1).play = 0
+            }
+            data.play = 1
+            let record = typeof data.record == 'string' ? JSON.parse(data.record) : data.record
+            api.Camera.setImmersiveRoamConfig({
+                roamingMode: data.remark,
+            })
+            api.Camera.playImmersiveRoam({
+                records: record, //轨迹数据>
+                isLoopPlay: false,
+                complete: function () {
+                    data.play = 0
+                },
+            })
+        },
+        playIRPause(data) {
+            //暂停播放
+            data.play = 2
+            api.Camera.pauseImmersiveRoam(false)
+        },
+        playContinue(data) {
+            //继续播放
+            data.play = 1
+            api.Camera.pauseImmersiveRoam(true)
+            if (this.historys.findIndex((x) => x.play === 1) > -1) {
+                this.historys.find((x) => x.play === 1).play = 0
+            }
+        },
+        playCancle(data) {
+            //取消播放
+            if (data.play === 1) {
+                data.play = 0
+            }
+            api.Camera.cancelPlayImmersiveRoam() //取消播放
+            this.isRoamingHistory = false
+            this.projectMessage.camera
+                ? api.Camera.setViewPort(this.projectMessage.camera)
+                : api.Model.location(this.projectMessage.modelId)
+        },
+        //重命名
+        renamed(record) {
+            this.visibleRenamed = true
+            this.modelRenamed = record
+            this.$nextTick(() => {
+                this.formRenamed.setFieldsValue({
+                    name: record.name,
+                    remark: record.remark,
+                }) //,
+            })
+        },
+        //重命名保存
+        handSaveRenamed() {
+            const that = this
+            that.formRenamed.validateFields((err, values) => {
+                if (!err) {
+                    var data = Object.assign(that.modelRenamed, values)
+                    updateRoamingTrack(data).then((res) => {
+                        if (res) {
+                            that.visibleRenamed = false
+                            that.$message.success('保存成功')
+                        } else {
+                            that.$message.error('保存失败')
+                        }
+                    })
+                }
+            })
+        },
+        delCamera(data, index) {
+            //删除漫游
+            const that = this
+            that.$confirm({
+                cancelText: '取消',
+                okText: '确定',
+                title: `确定要删除漫游 “${data.name}” 吗？`,
+                onOk() {
+                    if (that.historys.find((x) => x.id === data.id).play != 0) {
+                        api.Camera.cancelPlayImmersiveRoam()
+                    }
+                    that.historys.splice(index, 1)
+                    deleteRoamingTrack(data.id).then((res) => {})
+                    that.$message.success('删除成功！')
+                },
+            })
+        },
+        handleKeydown(event) {
+            if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+                event.preventDefault()
+                // 在这里添加你的上下键逻辑
+            }
+        },
+    },
+    destroyed() {
+        const that = this
+        if (that.isRoaming) {
+            api.Camera.stopImmersiveRoam()
+        }
+        if (that.isRoamingHistory) {
+            api.Camera.cancelPlayImmersiveRoam()
+        }
+        api.Plugin.deleteMiniMap()
+        that.projectMessage.camera ? api.Camera.setViewPort(that.projectMessage.camera) : api.Model.location(that.projectMessage.modelId)
+    },
+    methods22: {
+        doNav(n) {
+            this.navIndex = n
+        },
+        endImmersionRoaming() {
+            ;(this.romingVisible = !0), (this.roamName = '')
+        },
+        GetObtainCoordinates({ clickStatus, callback }) {
+            api.Public.pickupCoordinate(false)
+            setTimeout(() => {
+                api.Public.pickupCoordinate(true, function (data) {
+                    api.Public.convertWorldToCartographicLocation(data, (position) => {
+                        if (clickStatus && callback) {
+                            callback(data)
+                        }
+                    })
+                })
+            })
+        },
+        doRoaming() {
+            debugger
+            let e = this
+            let that = this
+            e.$message.warning('请点击模型选择漫游起点！')
+            this.GetObtainCoordinates({
+                clickStatus: true,
+                callback: (data) => {
+                    this.GetObtainCoordinates({
+                        clickStatus: false,
+                    })
+                    //配置漫游
+                    api.Camera.setImmersiveRoamConfig({
+                        roamingMode: that.form.roamType,
+                        moveRate: that.form.moveRate,
+                        turnRate: that.form.turnRate,
+                        bRecordLocus: true,
+                        onIREnd: function (result) {
+                            that.$message.success('漫游结束')
+                            if (result) {
+                                setRoamingTrack({
+                                    name: that.name,
+                                    modelId: that.projectMessage.modelList[0].id,
+                                    projectId: that.projectMessage.projectId,
+                                    time: 0,
+                                    remark: that.form.roamType,
+                                    sort: 0,
+                                    roamingPoints: result,
+                                }).then((res) => {
+                                    res.record = result
+                                    res.play = 0
+                                    that.historys.push(res) //play 0未播放 1播放 2暂停
+                                    that.form = {
+                                        name: '',
+                                        moveRate: 0.5,
+                                        turnRate: 1,
+                                        roamType: that.form.roamType,
+                                    }
+                                })
+                            }
+                        },
+                    })
+                },
+            })
+        },
+    },
+}
+</script>
+<style lang="scss">
+.roaming-settings {
+    padding: 0px 10px;
+    .op-table {
+        .cell {
+            font-size: 12px;
+        }
+    }
+}
 </style>
\ No newline at end of file
diff --git a/yanzhu-ui-vue3/src/views/bim/bimSetting/index.vue b/yanzhu-ui-vue3/src/views/bim/bimSetting/index.vue
index 73561c5c..b39d5595 100644
--- a/yanzhu-ui-vue3/src/views/bim/bimSetting/index.vue
+++ b/yanzhu-ui-vue3/src/views/bim/bimSetting/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="bim-setting-page">
+    <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">
@@ -29,6 +29,13 @@
                 </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>
 
@@ -37,6 +44,7 @@ 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: {
@@ -57,6 +65,7 @@ export default {
             initSuccess: false,
             activeMenu: 0,
             showModels: [],
+            param: {},
         }
     },
     beforeUnmount() {
@@ -87,28 +96,33 @@ export default {
             if (n == 1) {
                 this.NotificationPopup({
                     title: '第一人称漫游',
-                    id: 'PersonRoaming',
-                    description: h('PersonRoaming'),
+                    //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) {
-            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 : '280px',
-                    marginRight: `20px`,
-                    borderRadius: '0px',
-                },
-                onClose: this.notifClose,
-            })
+            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
@@ -217,6 +231,24 @@ export default {
             }
         }
     }
+    .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 {