自定义视点漫游功能实现

yanzhu-bigscreen/src/components/header.vue

@@ -180,6 +180,7 @@ export default {
             if (tmps.length > 0) {
                 this.$store.dispatch('SetSelProject', tmps[0])
                 this.selProject = tmps[0]
+                this.selProject.vendorsCode = 'uni'
                 document.title = this.selProject.projectName + ' - 大屏'
             } else {
                 this.$store.dispatch('SetSelProject', null)

yanzhu-ui-vue3/src/views/bim/bimSetting/CustomViewpoint.vue

@@ -0,0 +1,395 @@
+<template>
+    <div class="custom-viewpoint">
+        <el-tabs v-model="tab" size="small" @tab-click="ChangeTab">
+            <el-tab-pane label="漫游设置" name="tab1">
+                <el-form :model="form" :rules="rules" ref="ruleForm" label-width="30%">
+                    <el-form-item label="漫游名称" prop="name">
+                        <el-input v-model="form.name" style="width: 100%" />
+                    </el-form-item>
+                    <el-form-item label="漫游时长" prop="time">
+                        <el-input-number v-model="form.time" :step="1" :min="1" style="width: 100%" />
+                        <template #append>秒</template>
+                    </el-form-item>
+                    <el-form-item label="轨迹创建">
+                        <el-button @click="GetViewPort">添加轨迹点</el-button>
+                    </el-form-item>
+                    <div>
+                        <el-table :data="form.viewPortPoints" border style="width: 100%">
+                            <el-table-column prop="name" label="视点">
+                                <template #default="scope">{{'视点' + (++scope.$index) }}</template>
+                            </el-table-column>
+                            <el-table-column label="操作">
+                                <template #default="scope">
+                                    <el-button type="text" @click="DelViewPoint(scope.$index)">删除</el-button>
+                                </template>
+                            </el-table-column>
+                        </el-table>
+                    </div>
+                    <el-form-item style="margin-top: 10px">
+                        <el-button @click="StartViewPortRoam">开始漫游</el-button>
+                        <el-button @click="StopViewPortRoam">结束漫游</el-button>
+                    </el-form-item>
+                </el-form>
+            </el-tab-pane>
+            <el-tab-pane label="漫游历史" name="tab2">
+                <el-table :data="roamList" style="width: 100%">
+                    <el-table-column prop="name" label="名称" />
+                    <el-table-column label="操作" width="200px">
+                        <template #default="scope">
+                            <el-button v-if="scope.row.play === 0" type="primary" link @click="playIR(scope.row)">播放</el-button>
+                            <el-button v-else-if="scope.row.play === 1" type="primary" auto-insert-spacelink @click="playIRPause(scope.row)">暂停</el-button>
+                            <el-button v-else-if="scope.row.play === 2" type="primary" link @click="playContinue(scope.row)">继续</el-button>
+                            <el-button link @click="playCancel(scope.row)" type="primary">取消</el-button>
+                            <el-button link @click="delCamera(scope.row, scope.$index)" type="danger">删除</el-button>
+                            <el-button link @click="renamed(scope.row)" type="success">改名</el-button>
+                        </template>
+                    </el-table-column>
+                </el-table>
+                <div class="pagination-container">
+                    <el-pagination
+                        v-model:current-page="pagination.current"
+                        v-model:page-size="pagination.pageSize"
+                        :page-sizes="[10, 20, 30, 50]"
+                        :total="pagination.total"
+                        layout="total, prev, pager, next"
+                        @size-change="handleSizeChange"
+                        @current-change="handleCurrentChange"
+                    />
+                </div>
+            </el-tab-pane>
+        </el-tabs>
+        <el-dialog title="漫游重命名" v-model="visibleRenamed" width="280px" :before-close="() => visibleRenamed = false">
+            <el-form ref="formRenamedRef" :rules="rulesRenamed" :model="formRenamed" label-width="80px">
+                <el-form-item label="漫游名称" prop="name">
+                    <el-input v-model="formRenamed.name" maxlength="20" placeholder="请输入名称"></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>
+import { roamingAdd, roamingGet, roamingUpdateByName, roamingDeleteById } from '@/api/bim/bim.js'
+import { _isMobile } from '@/utils/public'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import useUserStore from '@/store/modules/user'
+export default {
+    props: {
+        me: {
+            type: Object,
+            default: () => ({}),
+        },
+    },
+    data() {
+        return {
+            tab: 'tab1',
+            roamList: [],
+            playState: false,
+            form: {
+                name: '', //移动速度系数
+                time: 10, //视角旋转速度(3°)
+                viewPortPoints: [],
+            },
+            rulesRenamed: {
+                name: [
+                    {
+                        required: true,
+                        message: '请输入漫游名称',
+                    },
+                ],
+            },
+            rules: {
+                name: [
+                    {
+                        required: true,
+                        message: '请输入漫游名称',
+                    },
+                ],
+                time: [
+                    {
+                        required: true,
+                        message: '请输入漫游时间',
+                    },
+                ],
+            },
+            sharedFatherState: false,
+            formRenamed: {},
+            visibleRenamed: false, //重命名显示
+            modelRenamed: null,
+            pagination: {
+                current: 1,
+                pageSize: 10,
+            },
+            isRoaming: false,
+            isRoamingHistory: false,
+            isMobile: false,
+            currentPrjId: null,
+            currentComId: null,
+        }
+    },
+    mounted() {
+        this.isMobile = _isMobile() ? true : false
+        const userStore = useUserStore()
+        this.currentPrjId = userStore.currentPrjId
+        this.currentComId = userStore.currentComId
+    },
+    methods: {
+        handSaveRenamed() {
+            this.$refs.formRenamedRef.validate((d) => {
+                if (d) {
+                    const data = {
+                        id: this.modelRenamed.id,
+                        name: this.formRenamed.name,
+                    }
+                    roamingUpdateByName(data).then((res) => {
+                        if (res.code === 0) {
+                            this.visibleRenamed = false
+                            this.modelRenamed.name = this.formRenamed.name
+                            ElMessage.success('保存成功')
+                        } else {
+                            ElMessage.error('保存失败')
+                        }
+                    })
+                }
+            })
+        },
+        renamed(record) {
+            this.visibleRenamed = true
+            this.modelRenamed = record
+            Object.assign(this.formRenamed, {
+                name: record.name,
+                remark: record.remark,
+            })
+        },
+        ChangeTab(data) {
+            const that = this
+            if (data.paneName === 'tab2') {
+                that.roamList = []
+                that.pagination.current = 1
+                that.GetRoamList()
+            }
+        },
+        //获取漫游列表
+        GetRoamList() {
+            const that = this
+            const params = {
+                roamingType: 2,
+                pageSize: this.pagination.pageSize,
+                pageNum: this.pagination.current,
+                projectId: this.currentPrjId,
+            }
+            roamingGet(params).then((res) => {
+                console.log(res)
+                this.pagination.total = res.data.pageInfo.totalCount
+                let datas = res.data.rows
+                if (datas.length > 0) datas.forEach((x) => (x.play = 0))
+                that.roamList = datas
+                that.updated()
+            })
+        },
+        updated() {},
+        //添加轨迹点
+        GetViewPort() {
+            const that = this
+            api.Camera.getViewPort((data) => {
+                that.form.viewPortPoints.push(data)
+                ElMessage.info('已添加')
+            })
+        },
+        //删除轨迹点
+        DelViewPoint(i) {
+            this.form.viewPortPoints.splice(i - 1, 1)
+        },
+        //开始漫游
+        StartViewPortRoam() {
+            const that = this
+            if (that.form.viewPortPoints.length < 2) {
+                ElMessage.warning('至少增加两个轨迹点!')
+                return
+            }
+            if (that.form.name.match(/^[ ]*$/)) {
+                ElMessage.warning('请输入漫游名称!')
+                return
+            }
+            if (that.form.time == '' || that.form.time == null) {
+                ElMessage.warning('请输入漫游时长!')
+                return
+            }
+            that.playState = true
+            that.isRoaming = true
+            api.Camera.startViewPortRoam(that.form.viewPortPoints, that.form.time, (res) => {
+                that.playState = false
+                ElMessage.success('漫游完成!')
+                that.SaveRoam()
+            })
+        },
+        //停止漫游
+        StopViewPortRoam() {
+            const that = this
+            if (that.form.viewPortPoints.length == 0) {
+                ElMessage.warning('请先录制漫游轨迹')
+                return false
+            }
+            if (that.form.name.match(/^[ ]*$/)) {
+                ElMessage.warning('请输入漫游名称!')
+                return
+            }
+            if (that.playState) {
+                that.SaveRoam()
+            }
+            ElMessage.success('漫游结束')
+            that.isRoaming = true
+            api.Camera.stopViewPortRoam()
+            this.resetScane()
+        },
+        //保存漫游
+        SaveRoam() {
+            if (this.saveTime && +new Date() - this.saveTime < 3000) {
+                return
+            }
+            this.saveTime = +new Date()
+            const params = {
+                roamingType: 2,
+                speed: 0,
+                sort: 0,
+                time: this.form.time,
+                name: this.form.name,
+                roamingMode: 0,
+                moveRate: 0,
+                turnRate: 0,
+                projectId: this.currentPrjId,
+                modelId: api.m_model.keys().toArray().join(','),
+                roamingMode: 0,
+                comId: this.currentComId,
+                points: JSON.stringify(this.form.viewPortPoints),
+                pointCount: this.form.viewPortPoints.length,
+            }
+            roamingAdd({ vo: params }).then((res) => {
+                if (res.code == 0) {
+                    ElMessage.success('已保存!')
+                    this.GetRoamList()
+                    this.form = {
+                        viewPortPoints: [],
+                        time: 10,
+                        name: '',
+                    }
+                    this.resetScane()
+                    this.$refs.ruleForm.resetFields()
+                } else {
+                    ElMessage.error('保存失败!')
+                }
+            })
+        },
+        //开始播放
+        playIR(data) {
+            this.isRoamingHistory = true
+            if (this.roamList.findIndex((x) => x.play === 1) > -1) {
+                api.Camera.stopViewPortRoam()
+                this.roamList.find((x) => x.play === 1).play = 0
+            }
+            data.play = 1
+            api.Camera.startViewPortRoam(JSON.parse(data.points), data.time, (res) => {
+                this.isRoamingHistory = false
+                data.play = 0
+                ElMessage.info('漫游结束!')
+                this.resetScane()
+            })
+        },
+        resetScane() {
+            api.Camera.stopViewPortRoam()
+            api.Model.location(api.m_model.keys().toArray()[0])
+        },
+        //暂停播放
+        playIRPause(data) {
+            data.play = 2
+            api.Camera.pauseViewPortRoam(false)
+        },
+        //继续播放
+        playContinue(data) {
+            data.play = 1
+            api.Camera.pauseViewPortRoam(true)
+            // this.$forceUpdate()
+        },
+        //取消播放
+        playCancel(data) {
+            if (data.play !== 0) {
+                data.play = 0
+                this.isRoamingHistory = false
+                api.Camera.stopViewPortRoam()
+                this.resetScane()
+            }
+        },
+        //删除漫游
+        delCamera(data, index) {
+            const that = this
+            ElMessageBox.confirm(`确定要删除漫游 “${data.name}” 吗？`, '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning',
+            })
+                .then(() => {
+                    data.play != 0 ? api.Camera.stopViewPortRoam() : null
+
+                    roamingDeleteById({ id: data.id }).then((res) => {
+                        if (res.code === 0) {
+                            that.roamList.splice(index, 1)
+                            ElMessage.success('删除成功！')
+                        } else {
+                            ElMessage.error('删除失败！')
+                        }
+                    })
+                })
+                .catch(() => {
+                    ElMessage.info('已取消删除')
+                })
+        },
+        handleSizeChange(val) {
+            this.pagination.pageSize = val
+            this.GetRoamList()
+        },
+        handleCurrentChange(val) {
+            this.pagination.current = val
+            this.GetRoamList()
+        },
+    },
+    destroyed() {
+        const that = this
+        if (that.isRoaming || that.isRoamingHistory) {
+            api.Camera.stopViewPortRoam()
+        }
+        api.Model.location(api.m_model.keys().toArray()[0])
+    },
+}
+</script>
+
+<style lang="scss">
+.custom-viewpoint {
+    width: 340px;
+    padding: 0px 10px 10px;
+    .el-tabs__content {
+        padding: 0px;
+    }
+    .pagination-container {
+        margin-top: 0px;
+        height: 32px;
+        display: flex;
+        justify-content: flex-end;
+        .el-pagination {
+            font-size: 12px;
+            .el-pagination__total,
+            .el-pagination__sizes {
+                margin-right: 16px;
+            }
+        }
+    }
+}
+</style>

yanzhu-ui-vue3/src/views/bim/bimSetting/PersonRoaming.vue

@@ -262,6 +262,7 @@ export default {
         getRoamingList() {
             this.loading = true
             roamingGet({
+                roamingType: 1,
                 pageSize: this.pagination.pageSize,
                 pageNum: this.pagination.current,
                 projectId: this.currentPrjId,
@@ -317,6 +318,10 @@ export default {
                                     }
                                     let data = {
                                         vo: {
+                                            roamingType: 1,
+                                            speed: 0,
+                                            sort: 0,
+                                            time: 0,
                                             projectId: this.currentPrjId,
                                             comId: this.currentComId,
                                             name: this.form.name,
@@ -329,8 +334,10 @@ export default {
                                         },
                                     }
                                     roamingAdd(data).then((res) => {
-                                        if (res.code == 1) {
+                                        if (res.code == 0) {
                                             ElMessage.success('保存成功！')
+                                        } else {
+                                            ElMessage.error('保存失败!')
                                         }
                                     })
                                 },

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

@@ -96,7 +96,6 @@ export default {
             api.Plugin.deleteMiniMap()
         },
         doMenu(n) {
-            debugger
             if (n == this.activeMenu) {
                 if (n == 0) {
                     this.resetScene()