|
|
@@ -0,0 +1,335 @@
|
|
|
+<template>
|
|
|
+ <div class="bim-roam">
|
|
|
+ <div class="roam-form">
|
|
|
+ <div class="page-header-content">
|
|
|
+ <div class="page-header-select">
|
|
|
+ <el-select v-model="roamId" placeholder="请选择" @change="changeRoam">
|
|
|
+ <el-option v-for="item in list" :key="item.id" :label="item.roamName" :value="item.id">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="page-header-button">
|
|
|
+ <el-button type="primary" size="mini" @click="insert">新增</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="roam-form-box">
|
|
|
+ <div class="hui-alert">
|
|
|
+ <div class="hui-alert-box">
|
|
|
+ <i class="iconfont huifont-yiwen"></i>
|
|
|
+ <span>将右侧视角设置漫游视角</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-form ref="form" :model="form">
|
|
|
+ <el-form-item label="漫游名称">
|
|
|
+ <el-input type="text" v-model="form.roamName" placeholder="请输入漫游名称"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="漫游时间">
|
|
|
+ <el-input type="number" v-model="form.roamTime" placeholder="请输入漫游时间"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div class="roam-form-title">漫游节点</div>
|
|
|
+ <div class="roam-item-box">
|
|
|
+ <div class="bim-iot-element-tag" v-for="(item,index) in walk" :key="item.id">
|
|
|
+ <div class="bim-iot-element-label">
|
|
|
+ <el-input type="text" size="small" v-model="item.name" placeholder="请输入节点名称"></el-input>
|
|
|
+ </div>
|
|
|
+ <div class="bim-iot-element-close">
|
|
|
+ <i class="iconfont huifont-shanchu" @click="deleteElement(index,item)"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="roam-item-box-insert">
|
|
|
+ <el-button type="primary" size="mini" @click="getWalk">记录视角</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="roam-form-submit">
|
|
|
+ <el-button size="mini" type="primary" @click="submit">保 存</el-button>
|
|
|
+ <el-button size="mini" @click="start">{{!stop?'暂 停':'预 览'}}</el-button>
|
|
|
+ <el-button size="mini" type="info" @click="delWalk" v-if="form.id">删 除</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div id="previewBim"></div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import bimView from '@/uitls/controls'
|
|
|
+ import {
|
|
|
+ getIntegrateViewToken,
|
|
|
+ getRoamList,
|
|
|
+ insertRoam,
|
|
|
+ updateRoam,
|
|
|
+ deleteRoam,
|
|
|
+ updateProjectItem
|
|
|
+ } from '@/httpApi/bim';
|
|
|
+ export default {
|
|
|
+ props: ['projectItem'],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ roamId: '',
|
|
|
+ list: [],
|
|
|
+ form: {
|
|
|
+ roamName: '',
|
|
|
+ roamTime: ''
|
|
|
+ },
|
|
|
+ walk: [],
|
|
|
+ bimViewer: null,
|
|
|
+ wt: null,
|
|
|
+ stop: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.init();
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.initBIM();
|
|
|
+ })
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ // 离开当前路由前的操作
|
|
|
+ if (this.bimViewer) this.bimViewer.destroy();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ deleteElement(index) {
|
|
|
+ this.walk.splice(index, 1);
|
|
|
+ },
|
|
|
+ init() {
|
|
|
+ if (!this.projectItem.bimIntegrateId) return;
|
|
|
+ getRoamList(this.projectItem.id, this.projectItem.bimIntegrateId).then(res => {
|
|
|
+ if (res.state) {
|
|
|
+ this.list = res.data;
|
|
|
+ if (this.list.length === 0) return this.insert();
|
|
|
+ if (!this.roamId) this.roamId = this.list[0].id;
|
|
|
+ this.changeRoam();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ insert() {
|
|
|
+ this.form = {
|
|
|
+ roamName: '',
|
|
|
+ roamTime: ''
|
|
|
+ }
|
|
|
+ this.walk = [];
|
|
|
+ this.roamId = '';
|
|
|
+ },
|
|
|
+ changeRoam() {
|
|
|
+ if (this.wt) this.pause();
|
|
|
+ this.form = this.list.filter(node => node.id == this.roamId)[0];
|
|
|
+ this.walk = JSON.parse(this.form.roamNode);
|
|
|
+ },
|
|
|
+ initBIM() {
|
|
|
+ document.getElementById('previewBim').innerHTML = '';
|
|
|
+ if (!this.projectItem.bimIntegrateId) return;
|
|
|
+ getIntegrateViewToken(this.projectItem.bimIntegrateId).then(this.successFunc)
|
|
|
+ },
|
|
|
+ changeBimViewer(type, data) {
|
|
|
+ if (!this.bimViewer) return;
|
|
|
+ this.bimViewer[type](data);
|
|
|
+ },
|
|
|
+ successFunc(res) {
|
|
|
+ if (res.state) {
|
|
|
+ if (!res.data) return;
|
|
|
+ this.bimViewer = new bimView({
|
|
|
+ dom: document.getElementById('previewBim'),
|
|
|
+ viewToken: res.data,
|
|
|
+ bimIntegrateId: this.projectItem.bimIntegrateId,
|
|
|
+ roamAngle: this.projectItem.roamAngle,
|
|
|
+ renderSuccess: () => {
|
|
|
+ this.bimViewer.setToolbars(true);
|
|
|
+ },
|
|
|
+ roomSaved: data => {},
|
|
|
+ click: data => {}
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ submit() {
|
|
|
+ if (this.wt) this.pause();
|
|
|
+ let postData = {
|
|
|
+ integrateId: this.projectItem.bimIntegrateId,
|
|
|
+ projectItemId: this.projectItem.id,
|
|
|
+ roamName: this.form.roamName,
|
|
|
+ roamTime: this.form.roamTime || 20,
|
|
|
+ roamNode: JSON.stringify(this.walk)
|
|
|
+ }
|
|
|
+ if (this.form.id) postData['id'] = this.form.id;
|
|
|
+ !this.form.id ? insertRoam(postData).then(this.success) : updateRoam(postData).then(this.success)
|
|
|
+ },
|
|
|
+ success(res) {
|
|
|
+ if (res.state) {
|
|
|
+ this.roamId = !res.data ? '' : res.data.id;
|
|
|
+ this.init();
|
|
|
+ this.$message.success('操作成功')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ lookRoamAngle() {
|
|
|
+ this.bimViewer.setStatus(this.projectItem.roamAngle);
|
|
|
+ },
|
|
|
+ setCamera() {
|
|
|
+ let data = JSON.stringify(this.bimViewer.getCameraState());
|
|
|
+ updateProjectItem({
|
|
|
+ id: this.projectItem.id,
|
|
|
+ roamAngle: data
|
|
|
+ }).then(res => {
|
|
|
+ if (res.state) {
|
|
|
+ this.projectItem.roamAngle = data;
|
|
|
+ this.bimViewer.setStatusValue(data);
|
|
|
+ this.$message.success('操作成功')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getWalk() {
|
|
|
+ let walk = this.bimViewer.getWalkthroughData();
|
|
|
+ this.walk.push(walk);
|
|
|
+ },
|
|
|
+ start() {
|
|
|
+ if (!this.bimViewer) return;
|
|
|
+ if (!this.stop) return this.pause();
|
|
|
+ this.wt = this.bimViewer.walkthrough();
|
|
|
+ this.wt.setWalkthroughTime(parseInt(this.form.roamTime));
|
|
|
+ this.wt.setKeyFrames(this.walk);
|
|
|
+ this.wt.play();
|
|
|
+ this.stop = false;
|
|
|
+ },
|
|
|
+ pause() {
|
|
|
+ if (!this.wt) return;
|
|
|
+ this.wt.pause();
|
|
|
+ this.stop = true;
|
|
|
+ },
|
|
|
+ delWalk() {
|
|
|
+ if (this.wt) this.pause();
|
|
|
+ this.$confirm('确定要删除该漫游?', () => {
|
|
|
+ deleteRoam(this.roamId).then(this.success)
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .bim-roam {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ #previewBim {
|
|
|
+ flex: 1;
|
|
|
+ width: 0;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .roam-form {
|
|
|
+ width: 300px;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ border-right: 1px solid $--color-border;
|
|
|
+
|
|
|
+
|
|
|
+ .el-input {
|
|
|
+ margin: 0;
|
|
|
+ font-size: 12px;
|
|
|
+
|
|
|
+ .el-input__inner {
|
|
|
+ border: none;
|
|
|
+ background: #191E28;
|
|
|
+ height: 24px;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-input__icon {
|
|
|
+ line-height: 24px;
|
|
|
+ color: #545F79;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .page-header-content {
|
|
|
+ position: relative;
|
|
|
+ border-bottom: 1px solid $--color-border;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 42px;
|
|
|
+ padding: 0 10px;
|
|
|
+
|
|
|
+ .page-header-select {
|
|
|
+ flex: 1;
|
|
|
+ width: 0;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .roam-form-box {
|
|
|
+ flex: 1;
|
|
|
+ height: 0;
|
|
|
+ overflow-y: auto;
|
|
|
+ padding-top: 10px;
|
|
|
+ font-size: 12px;
|
|
|
+ padding: 12px;
|
|
|
+
|
|
|
+ .el-form {
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-form-item {
|
|
|
+ width: 100%;
|
|
|
+ padding: 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 0;
|
|
|
+
|
|
|
+ .el-form-item__label {
|
|
|
+ font-size: 12px;
|
|
|
+ padding: 0;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-form-item__content {
|
|
|
+ flex: 1;
|
|
|
+ width: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .roam-form-title {
|
|
|
+ margin: 7px 0 10px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .roam-item-box {
|
|
|
+ background: #191E28;
|
|
|
+ padding: 10px;
|
|
|
+ border-radius: 2px;
|
|
|
+
|
|
|
+ .el-input__inner {
|
|
|
+ border: none;
|
|
|
+ background: #232A37;
|
|
|
+ height: 24px;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bim-iot-element-tag {
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .bim-iot-element-label {
|
|
|
+ flex: 1;
|
|
|
+ width: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bim-iot-element-close {
|
|
|
+ padding-left: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .roam-item-box-insert {
|
|
|
+ text-align: center;
|
|
|
+ padding: 10px 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .roam-form-submit {
|
|
|
+ padding: 12px;
|
|
|
+ border-top: 1px solid $--color-border;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
