realty/virgo.wzfrontend/console/src/components/work/bim/operationModels.vue

<template>
	<div id="distribution" class="distribution-index">
		<div :id="'previewBim'+_uid" class="previewBim"></div>
		<div id="distribution-drap" class="distribution-drap" v-show="drapShow" @mousedown="dragStart"
			@touchstart="dragStart">
			<div class="distribution-drap-title">
				<div id="title" class="distribution-drap-title-content">{{detail.title}}</div>
				<i id="close" class="el-icon-circle-close" @click="drapShow = false"></i>
			</div>
			<div class="distribution-drap-content">
				<organization v-if="type === 'organizationDetail'" :detail="detail" @clickName="clickName">
				</organization>
				<house v-else-if="type === 'roomDetail'" :detail="detail"></house>
			</div>
			<div class="image-box" v-if="detail.imageBox">
				<el-carousel trigger="click" height="130px">
					<el-carousel-item v-for="item in detail.imageBox" :key="item.id">
						<img :src="item.url" :alt="item.url" />
					</el-carousel-item>
				</el-carousel>
			</div>
			<div style="padding: 5px;" v-else></div>
		</div>
		<el-dialog :close-on-click-modal="false" :title="noticeBoardType === '1' ? '企业看板':'设备看板'"
			:visible.sync="modelVisible" width="1100px" :append-to-body="true">
			<notice-board v-if="modelVisible" :type="noticeBoardType" :detailId="detail.id"></notice-board>
		</el-dialog>
	</div>
</template>

<script>
	import {
		getIntegrateViewToken,
	} from '@/httpApi/bim'
	import {
		getHouseListByPage
	} from '@/httpApi/space'
	import {
		getOrganizationListByPage
	} from '@/httpApi/business'
	import bimView from '@/uitls/controls'
	import noticeBoard from '@/components/work/common/noticeBoard'
	import organization from '@/components/work/bim/modelDetail/organization'
	import house from '@/components/work/bim/modelDetail/house'
	export default {
		props: ['target'],
		data() {
			return {
				bimViewer: null,
				noticeBoardType: '1',
				modelVisible: false,
				drapShow: false,
				detail: {},
				roomList: [],
				organizationObj: {},
				type: '',
				item: {}
			}
		},
		created() {
			this.item = this.target;
		},
		mounted() {
			let width = document.getElementById('distribution').clientWidth;
			document.getElementById('distribution-drap').style.left = (width - 330) + 'px';
			document.getElementById('distribution-drap').style.top = '30px';
			getOrganizationListByPage({
				currPage: 1,
				pageSize: 100,
				organizationId: this.$store.getters.organization.id,
				projectId: this.$store.getters.project.id
			}).then(res => {
				if (res.state) {
					let list = res.data.dataList,
						obj = {};
					for (let i = 0; i < list.length; i++) {
						if (list[i].roomIds) {
							let roomIds = list[i].roomIds.split(',');
							for (let k = 0; k < roomIds.length; k++) {
								obj[roomIds[k]] = list[i];
							}
						}
					}
					this.organizationObj = obj;
					this.init();
				}
			})
		},
		beforeDestroy() {
			if (this.bimViewer) this.bimViewer.destroy();
		},
		components: {
			noticeBoard,
			organization,
			house
		},
		methods: {
			clickName(noticeBoardType) {
				this.modelVisible = true;
				this.noticeBoardType = noticeBoardType;
			},
			init(type) {
				if (type != '1') this.$loading();
				let postData = {
					currPage: 1,
					pageSize: 100,
					projectItemTargetId: this.item.id
				}
				getHouseListByPage(postData).then(res => {
					if (res.state) {
						this.roomList = res.data.dataList.filter(node => node.dataValue).map(node => {
							let nodes = JSON.parse(node.dataValue);
							nodes['name'] = node.roomNumber;
							nodes['id'] = node.roomNumber;
							nodes['data'] = node;
							return nodes;
						});
						if (type == '1') {
							this.initFloor();
							this.setFloor();
						} else {
							getIntegrateViewToken(this.item.bimIntegrateId).then(this.successFunc);
						}
					} else {
						this.$loading.close();
					}
				})
			},
			changeTarget(data) {
				this.clearFloor();
				this.item = data;
				this.init('1');
			},
			successFunc(res) {
				if (res.state) {
					this.bimViewer = new bimView({
						dom: document.getElementById('previewBim' + this._uid),
						viewToken: res.data,
						renderSuccess: () => {
							this.$loading.close();
							if (this.item.bimIntegrateId === '3102248339366592') this.modelRenderSuccess();
							this.initFloor();
							this.setFloor();
						}
					})
				} else {
					this.$loading.close();
				}
			},
			modelRenderSuccess() {
				this.bimViewer.hideComponentsByObjectData([{
					categoryId: "-2000038",
					levelName: "标高 1"
				}])
				this.bimViewer.overrideComponentsColorByObjectData([{
					family: "楼板",
					levelName: "标高 1"
				}], "#cecece")
				this.bimViewer.overrideComponentsColorByObjectData([{
					family: "基本墙",
					levelName: "标高 1"
				}], "#afa6ab");

			},
			initFloor() {
				for (var i = 0; i < this.roomList.length; i++) {
					this.bimViewer.insertRooms({
						id: this.roomList[i].roomId,
						boundary: {
							"outer": this.roomList[i].boundary
						},
						height: this.roomList[i].height,
						roomColor: this.returnRGBA(this.roomList[i].roomColor)
					})
				}
			},
			clearFloor() { //清除房间
				let ids = this.roomList.filter(node => node.name).map(node => node.roomId);
				let arr1 = ids.map(id => 'room' + id);
				let arr2 = ids.map(id => 'floor' + id);
				this.bimViewer.clearDrawable(arr1.concat(arr2));
				this.bimViewer.clearAllRooms();
			},
			dragStart(evt) {
				let oEvent = evt || event; //获取事件对象，这个是兼容写法
				if (oEvent.target.id !== 'title') return;
				let div = document.getElementById('distribution-drap');
				let disX = oEvent.clientX - parseInt(div.style.left || 0);
				let disY = oEvent.clientY - parseInt(div.style.top || 0);
				div.style.left = oEvent.clientX - disX + 'px';
				div.style.top = oEvent.clientY - disY + 'px';
				document.onmousemove = function(evt) { //实时改变目标元素obox的位置
					let oEvent = evt || event;
					div.style.left = oEvent.clientX - disX + 'px';
					div.style.top = oEvent.clientY - disY + 'px';
				}
				//停止拖动
				document.onmouseup = function() {
					document.onmousemove = null;
					document.onmouseup = null;
				}
			},
			showDrap(type, data) {
				this.type = type;
				this.detail = data;
				this.drapShow = true;
			},
			setFloor() { //设置房间
				for (var i = 0; i < this.roomList.length; i++) {
					let boundary = this.roomList[i].boundary;
					let arrX = boundary.map(node => node.x);
					let arrY = boundary.map(node => node.y);
					let maxX = Math.max(...arrX);
					let minX = Math.min(...arrX);
					let maxY = Math.max(...arrY);
					let minY = Math.min(...arrY);
					let x = (maxX - minX) / 2 + minX;
					let y = (maxY - minY) / 2 + minY;
					if (this.roomList[i].name) {
						let house = this.roomList[i].data;
						house['title'] = this.roomList[i].name;
						house['imageBox'] = house.picture ? JSON.parse(house.picture) : [];
						this.bimViewer.addDrawable({
							position: {
								x: x,
								y: y,
								z: boundary[0].z + this.roomList[i].height
							},
							offsetX: -30,
							offsetY: 5,
							html: `	<div class="floor-name">${this.roomList[i].name}</div>`,
							id: 'floor' + this.roomList[i].roomId
						}, data => {
							this.showDrap('roomDetail', house);
						})
					}
					if (this.organizationObj[this.roomList[i].roomId]) {
						let organization = this.organizationObj[this.roomList[i].roomId];
						organization['title'] = this.roomList[i].name;
						this.bimViewer.addDrawable({
							position: {
								x: x,
								y: y,
								z: boundary[0].z + this.roomList[i].height
							},
							offsetX: -75,
							offsetY: -40,
							html: `	<div class="tips-4"><div class="name">${organization.name}</div><i class="iconfont huifont-sanjiaojiantou-xia"></i></div>`,
							id: 'room' + this.roomList[i].roomId,
							visibleDistance: parseInt(this.roomList[i].distance)
						}, data => {
							this.showDrap('organizationDetail', organization);
						})

					}
				}
			},
			open(type) {
				this.type = type;
				this.modelVisible = true;
			},
			returnRGBA(color) {
				let [r, g, b, a] = color.match(/\d+(\.\d+)?/g).map(Number);
				return {
					r,
					g,
					b,
					a
				}
			},

		}
	}
</script>

<style lang="scss">
	.distribution-index {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		position: relative;
		overflow: hidden;
		background: $--box-background;

		.video-toggle {
			position: fixed;
			width: 700px;
			height: 500px;
			background: #000;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			display: flex;
			flex-direction: column;
			z-index: 999;

			.chart-title {
				display: flex;
				justify-content: space-between;
				width: 100%;
				background-size: contain;
				position: relative;
				background-color: $--background;
				padding-left: 15px;
				align-items: center;

				.el-icon-close {
					padding: 8px;
					font-size: 24px;
					cursor: pointer;
				}
			}

			.chart-title:before {
				content: "";
				position: absolute;
				height: 2px;
				left: 0px;
				right: 0;
				border-bottom: 2px solid;
				-o-border-image: linear-gradient(315deg, rgba(167, 208, 255, 0), rgba(110, 163, 255, .3)) 2 2;
				border-image: linear-gradient(315deg, rgba(167, 208, 255, 0), rgba(110, 163, 255, .3)) 2 2;
				bottom: .5px;
			}

			.video-toggle-box {
				flex: 1;
				height: 0;
				display: flex;
				align-items: center;
				padding: 20px;
				box-sizing: border-box;
			}

			video {
				max-height: 100%;
			}
		}

		.tips-4 {
			cursor: pointer;
		}

		.floor-name {
			cursor: pointer;
			width: 60px;
			text-align: center;
			color: #fff;
		}

		.left-button {
			position: absolute;
			z-index: 998;
			display: flex;
			justify-content: center;
			left: 0;
			bottom: 30px;
			width: 100%;
		}

		.menu-item {
			width: 100px;
			height: 32px;
			font-size: 16px;
			color: #AAB5C7;
			line-height: 30px;
			letter-spacing: 2px;
			text-align: center;
			background-image: url(../../../assets/image/common/tab.png);
			background-size: 100% 100%;
			margin: 0 15px;
			cursor: pointer;
		}

		.menu-item.active,
		.menu-item:hover {
			color: #fff;
			background-image: url(../../../assets/image/common/tab_active.png);
		}

		.previewBim {
			flex: 1;
			height: 0;
		}

		.distribution-drap {
			position: absolute;
			top: 30px;
			right: 30px;
			background: $--color-background;
			width: 300px;
			border-radius: 8px;
			z-index: 998;
			right: 30px;
			top: 30px;

			.distribution-drap-title {
				height: 40px;
				display: flex;
				align-items: center;

				.distribution-drap-title-content {
					flex: 1;
					width: 0;
					font-weight: 500;
					cursor: move;
					padding-left: 10px;
				}

				.el-icon-circle-close {
					font-size: 20px;
					cursor: pointer;
					padding-right: 10px;
				}
			}

			.user-list {
				padding: 0 10px 0px 10px;
				font-size: 13px;

				.user-item {
					display: flex;
					margin-bottom: 2px;

					.user-key {
						width: 84px;
					}

					.user-value {
						flex: 1;
						width: 0;
						margin-left: 2px;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}

				.user-item>div {
					background: #232A37;
					line-height: 34px;
					padding: 0 16px;
				}

				.user-item:last-child {
					margin-bottom: 0;
				}
			}

			.image-box {
				width: 100%;
				height: 150px;
				padding: 10px;
				box-sizing: border-box;
				position: relative;

				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
					user-select: none;
					-webkit-user-drag: none;
				}

				.video-mask {
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background: rgba(0, 0, 0, 0.5);
					z-index: 2;
					display: flex;
					justify-content: center;
					align-items: center;
					opacity: 0;
					transition: 300ms;
					cursor: pointer;

					i {
						font-size: 24px;
					}
				}
			}

			.image-box:hover {
				.video-mask {
					opacity: 1;
				}
			}
		}

		.walk-box {
			position: absolute;
			bottom: 30px;
			left: 50%;
			margin-left: -80px;
			display: flex;
			align-items: center;
			z-index: 998;

			.walk-box-item {
				width: 80px;
				height: 80px;
				border-radius: 80px;
				background: #232A37;
				text-align: center;
				line-height: 80px;
				cursor: pointer;
				margin-right: 20px;

				&:hover {
					opacity: 0.7;
				}

			}

			.iconfont {
				font-size: 36px;
			}
		}

		// .bf-house,
		// .bf-tree-toolbar {
		// 	display: none;
		// }
	}
</style>