realty/virgo.wzfrontend/console/src/views/work/bim/distribution.vue

<template>
	<div class="distribution-index">
		<div class="">
			<el-button @click="getCamera" size="medium">恢复视角</el-button>
		</div>
		<div :id="'previewBim'+_uid" class="previewBim"></div>
	</div>
</template>

<script>
	import {
		getBimViewToken,
	} from '@/httpApi/bim'
	import bimView from '@/uitls/controls'
	import list from '@/config/demo'
	export default {
		data() {
			return {
				room: {
					id: 10
				},
				form: {
					color: 'rgba(19, 206, 102, 0.6)'
				},
				bimViewer: {},
				positionData: [],
				roomList: [],
				cameraState: {
					"name": "persp",
					"position": {
						"x": 50517.95896971393,
						"y": 18087.393345876066,
						"z": 103831.28504386776
					},
					"target": {
						"x": 50179.33289519571,
						"y": 18085.315836337795,
						"z": 48242.8852979743
					},
					"up": {
						"x": 0.9999587456475146,
						"y": 0.006737846700867504,
						"z": -0.006091668481171846
					},
					"near": 47374.75658240926,
					"far": 52908.82272199217,
					"zoom": 0.8936346625264161,
					"version": 1,
					"fov": 45,
					"aspect": 2.0664819944598336,
					"coordinateSystem": "world"
				}
			}
		},
		created() {
			this.roomList = list;
			this.init();
		},
		beforeDestroy() {
			if (this.bimViewer) this.bimViewer.destroy();
		},
		methods: {
			init() {
				getBimViewToken(10000890570651).then(this.successFunc);
			},
			returnRGBA(color) {
				let [r, g, b, a] = color.match(/\d+(\.\d+)?/g).map(Number);
				return {
					r,
					g,
					b,
					a
				}
			},
			getCamera() {
				if (!this.bimViewer) return;
				this.bimViewer.setStatus(this.cameraState);
				// console.log(this.bimViewer.getCameraState());
			},
			successFunc(res) {
				if (res.state) {
					this.bimViewer = new bimView({
						dom: document.getElementById('previewBim' + this._uid),
						viewToken: res.data,
						renderSuccess: () => {
							this.bimViewer.setStatus(this.cameraState);
							this.bimViewer.setToolbars(true)
							for (var i = 0; i < this.roomList.length; i++) {
								this.bimViewer.insertRooms({
									id: this.roomList[i].id,
									boundary: {
										"outer": this.roomList[i].boundary
									},
									height: this.roomList[i].height,
									roomColor: this.returnRGBA(this.roomList[i].color)
								})
								this.bimViewer.addDrawable({
									position: this.roomList[i].position,
									offsetX: -75,
									offsetY: -40,
									html: `	<div class="tips-4">
											${this.roomList[i].name}
											<i class="iconfont huifont-sanjiaojiantou-xia"></i>
										</div>`,
								}, data => {})
							}
						},
						roomSaved: data => {
							console.log(data);
						},
						click: data => {
							let point = data.worldPosition;
							// console.log(point);
							// if (!point) return this.$message.warning('请点击模型范围内的点');
							// this.positionData.push(point);
							// this.bimViewer.add3DMaker('image', point);
							// if (this.positionData.length == 3) {
							// 	this.bimViewer.insertRooms({
							// 		id: this.room.id,
							// 		boundary: {
							// 			"outer": this.positionData
							// 		},
							// 		height: 500,
							// 		roomColor: this.returnRGBA(this.form.color)
							// 	})
							// 	this.bimViewer.clear3DMaker();
							// 	this.positionData = [];
							// 	this.bimViewer.editRoom({
							// 		roomId: this.room.id
							// 	})
							// 	this.room.id++;
							// }
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.distribution-index {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;

		.previewBim {
			flex: 1;
			height: 0;
		}
	}
</style>