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

<template>
	<div id="distribution" class="distribution-index">
		<div class="left-button" v-if="!isWalk">
			<div :class="'menu-item pangmenzhengdao' + (node.id == pathNode.id ? ' active' :'')"
				v-for="(node,index) in titleList" :key="node.id" @click="selectItem(node)">
				{{node.name}}
			</div>
			<!-- <div class="menu-item pangmenzhengdao" @click="getWalk">记录</div>
			<div class="menu-item pangmenzhengdao" @click="getCamera">视角</div> -->
		</div>
		<div class="walk-box" v-else>
			<div class="walk-box-item">
				<i :class="'iconfont '+ (stop ? 'huifont-bofang':'huifont-bofangzanting')" @click="startWalk"></i>
			</div>
			<div>
				<el-button type="primary" size="medium" @click="stopWalkFunc">退出</el-button>
			</div>
		</div>
		<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">
				<div class="user-list">
					<div class="user-item" v-for="(item,index) in detail.list">
						<div class="user-key">{{item.name}}</div>
						<div class="user-value" v-if="item.value === 'operation'">
							<el-switch v-model="value" active-color="#13ce66">
							</el-switch>
						</div>
						<div class="user-value" :title="item.value" v-else>{{item.value}}</div>
					</div>
				</div>
			</div>
			<div class="image-box" v-if="detail.imageUrl">
				<img :src="detail.imageUrl" alt="aa.png" />
			</div>
			<div style="padding: 5px;" v-else></div>
		</div>
	</div>
</template>

<script>
	import {
		getBimViewToken,
	} from '@/httpApi/bim'
	import bimView from '@/uitls/controls'
	// import bimData from '@/config/demo'//新华医院
	import bimData from '@/config/demo1'
	export default {
		data() {
			return {
				roomId: 1,
				bimViewer: null,
				positionData: [],
				titleList: [{
					id: 1,
					name: '企业'
				}, {
					id: 2,
					name: '监控'
				}, {
					id: 3,
					name: '设备'
				}, {
					id: 4,
					name: '灯光'
				}, {
					id: 5,
					name: '漫游'
				}],
				pathNode: {
					id: 1,
					name: '企业'
				},
				renderSuccess: false,
				isWalk: false,
				walk: [{
					"id": "45989e46-5279-4256-b956-4134968f229f",
					"position": {
						"x": 28807.993915330604,
						"y": 27399.352876051573,
						"z": 16738.5117384898
					},
					"target": {
						"x": -65426.025574263804,
						"y": 30224.66289488717,
						"z": 16738.522116432978
					},
					"coordinateSystem": "world",
					"stayTime": 0,
					"timeBetweenFrames": 4
				}, {
					"id": "932ba4e5-8e61-47a9-9e95-106eb68b6179",
					"position": {
						"x": 23429.310851444443,
						"y": 27560.61573240541,
						"z": 16738.51233084135
					},
					"target": {
						"x": -70804.70863814997,
						"y": 30385.92575124101,
						"z": 16738.522708784523
					},
					"coordinateSystem": "world",
					"stayTime": 0,
					"timeBetweenFrames": 2
				}, {
					"id": "d6a69146-0fa4-4b96-8823-5a6acb93df10",
					"position": {
						"x": 21270.373381191373,
						"y": 27944.435752543206,
						"z": 16738.513740691003
					},
					"target": {
						"x": 11449.311926122491,
						"y": -64824.15181454667,
						"z": 16738.152764310379
					},
					"coordinateSystem": "world",
					"stayTime": 1,
					"timeBetweenFrames": 6
				}, {
					"id": "6f76a823-5b9a-478b-88d1-8cc701f48d91",
					"position": {
						"x": 20792.50087657239,
						"y": 13841.412598430225,
						"z": 16738.461937394382
					},
					"target": {
						"x": 18038.03011945137,
						"y": -79397.87720835117,
						"z": 16738.0364486589156
					},
					"coordinateSystem": "world",
					"stayTime": 0,
					"timeBetweenFrames": 2
				}, {
					"id": "9afa7778-a500-4707-8576-a25cec8710b3",
					"position": {
						"x": 20653.4160327832,
						"y": 13408.877024051308,
						"z": 16738.460348602504
					},
					"target": {
						"x": 112398.1176970292,
						"y": 2548.198234651193,
						"z": 16738.5192830622163
					},
					"coordinateSystem": "world",
					"stayTime": 1,
					"timeBetweenFrames": 4
				}, {
					"id": "bd51d05f-287d-45b9-addc-9da32d0e79f8",
					"position": {
						"x": 30968.639340308415,
						"y": 13085.285430882526,
						"z": 16738.459159984213
					},
					"target": {
						"x": 122900.33170996535,
						"y": 19518.523647883958,
						"z": 16738.434953464723
					},
					"coordinateSystem": "world",
					"stayTime": 0,
					"timeBetweenFrames": 2
				}, {
					"id": "bf6e4d38-74e2-4f51-83d3-20a7f16cdf56",
					"position": {
						"x": 32211.266434023968,
						"y": 13275.842610296175,
						"z": 16738.459859939816
					},
					"target": {
						"x": 30902.284349220965,
						"y": 105501.28094759125,
						"z": 16738.3274521968156
					},
					"coordinateSystem": "world",
					"stayTime": 1,
					"timeBetweenFrames": 12
				}, {
					"id": "6b309ba7-6044-41fb-815e-e878692fc437",
					"position": {
						"x": 32401.761864596003,
						"y": 44931.81365916862,
						"z": 16738.57613881422
					},
					"target": {
						"x": 33065.36397610181,
						"y": 137450.0034069327,
						"z": 16738.5592527883905
					},
					"coordinateSystem": "world",
					"stayTime": 1,
					"timeBetweenFrames": 2
				}],
				wt: null,
				stop: true,
				drapShow: false,
				detail: {
					title: '',
					list: [],
					imageUrl: ''
				},
				value: true
			}
		},
		mounted() {
			let width = document.getElementById('distribution').clientWidth;
			document.getElementById('distribution-drap').style.left = (width - 330) + 'px';
			document.getElementById('distribution-drap').style.top = '30px';
			this.init();
		},
		beforeDestroy() {
			if (this.bimViewer) this.bimViewer.destroy();
		},
		methods: {
			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) {

				this.detail = bimData[type];
				this.drapShow = true;
			},
			getWalk() {
				let walk = this.bimViewer.getWalkthroughData();
				this.walk.push(walk);
			},
			startWalk() {
				if (!this.bimViewer) return;
				if (!this.stop) return this.pauseWalk();
				if (this.wt) {
					this.stop = false;
					this.wt.play();
					return;
				}
				this.wt = this.bimViewer.walkthrough();
				this.wt.setKeyFrames(this.walk);
				this.wt.setKeyFrameCallback(this.keyFrameCallback);
				this.wt.stopCallback(() => {
					this.wt = null;
					this.stop = true;
					this.bimViewer.clearDrawable();
				});
				this.wt.play();
				this.stop = false;
			},
			pauseWalk() { //暂停漫游
				if (!this.wt) return;
				this.wt.pause();
				this.stop = true;
			},
			stopWalk() {
				if (!this.wt) return;
				this.wt.stop();
			},
			keyFrameCallback(idx) {
				this.bimViewer.clearDrawable();
				switch (idx) {
					case 0:
						this.setWalkTip([{
								"x": 24050.411537689757,
								"y": 29350.017590535575,
								"z": 17302.099026757893
							}, {
								"x": 23995.61377426047,
								"y": 25650.002239992325,
								"z": 17335.244453548836
							}],
							`<div class="tips-11">
								<div class="title">
									<img src="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/34e112ef844245d79d500d120d256fbf" alt="">
									<div class="name">电梯</div>
								</div>
								<div class="content">
									<div class="item">
										<div class="label">状态:</div>
										<div class="value">运行中</div>
									</div>
									<div class="item">
										<div class="label">维护:</div>
										<div class="value">今日已检修</div>
									</div>
								</div>
							</div>`,
							-220, -40, 3
						);
						break;
					case 2:
						this.setWalkTip([{
								"x": 22000.02194219269,
								"y": 18556.11888764512,
								"z": 16860.98452689552
							}],
							`<div class="tips-9">
								<div class="line" style="width:48px;"><img src="https://static.bimface.com/attach/24ce9654e88a4218908f46279e5c4b04_line.png" height="35" width="49"/></div>
								<div class="article">
									<div class="title">
										<i class="iconfont huifont-shuzhuangcaidanxiala"></i>
										1202
									</div>
								<div class="content">
									<div class="item">
										<div class="label">温度</div>
										<div class="value">16°C</div>
									</div>
									<div class="item">
										<div class="label">湿度</div>
										<div class="value">30%</div>
									</div>
									<div class="item">
										<div class="label">CO2</div>
										<div class="value">15ppm</div>
									</div>
									<div class="item">
										<div class="label">Tvoc</div>
										<div class="value">1.5ppm</div>
									</div>
									<div class="item">
										<div class="label">PM2.5</div>
										<div class="value">2.3ug/m3</div>
									</div>
								</div>
							</div>`,
							0, -40, 2
						);
						this.setWalkTip([{
								"x": 22000.02194219269,
								"y": 21593.121086217907,
								"z": 16482.919997783156
							}],
							`<div class="tips-5" style="width:180px;">
								<div class="title"><i class="iconfont huifont-shuzhuangcaidanxiala"></i>照明设备</div>
								<div class="content">
									<div class="tips-6">
										<div class="item">
											<div class="label">灯光名称</div>
											<div class="value">1号照明</div>
										</div>
										<div class="item">
											<div class="label">灯光位置</div>
											<div class="value">走廊</div>
										</div>
										<div class="item">
											<div class="label">灯光操作</div>
											<div class="value">
												<label class="hui-switch">
													<input type="checkbox" id="myCheckbox">
													<span class="slider round"></span>
												</label>
											</div>
										</div>
									</div>
								</div>
							</div>
							`,
							0, -40, 1
						);
						break;
					case 4:
						this.setWalkTip([{
								"x": 24409.083286761037,
								"y": 14149.986899588841,
								"z": 16842.24504298319
							}, {
								"x": 28737.64383719606,
								"y": 14149.986899588841,
								"z": 16881.492220074306
							}],
							`<div class="tips-9">
								<div class="line" style="width:48px;"><img src="https://static.bimface.com/attach/24ce9654e88a4218908f46279e5c4b04_line.png" height="35" width="49"/></div>
								<div class="article">
									<div class="title">
										<i class="iconfont huifont-shuzhuangcaidanxiala"></i>
										1202
									</div>
								<div class="content">
									<div class="item">
										<div class="label">温度</div>
										<div class="value">16°C</div>
									</div>
									<div class="item">
										<div class="label">湿度</div>
										<div class="value">30%</div>
									</div>
									<div class="item">
										<div class="label">CO2</div>
										<div class="value">15ppm</div>
									</div>
									<div class="item">
										<div class="label">Tvoc</div>
										<div class="value">1.5ppm</div>
									</div>
									<div class="item">
										<div class="label">PM2.5</div>
										<div class="value">2.3ug/m3</div>
									</div>
								</div>
							</div>`,
							0, -40, 2
						);
						break;
					case 6:
						this.setWalkTip([{
								"x": 31000.028548922273,
								"y": 19920.593446388877,
								"z": 16869.840184958644
							}, {
								"x": 31000.024545155615,
								"y": 24661.86466740186,
								"z": 16875.88203316609
							}],
							`<div class="tips-9">
								<div class="line" style="width:48px;"><img src="https://static.bimface.com/attach/24ce9654e88a4218908f46279e5c4b04_line.png" height="35" width="49"/></div>
								<div class="article">
									<div class="title">
										<i class="iconfont huifont-shuzhuangcaidanxiala"></i>
										1202
									</div>
								<div class="content">
									<div class="item">
										<div class="label">温度</div>
										<div class="value">16°C</div>
									</div>
									<div class="item">
										<div class="label">湿度</div>
										<div class="value">30%</div>
									</div>
									<div class="item">
										<div class="label">CO2</div>
										<div class="value">15ppm</div>
									</div>
									<div class="item">
										<div class="label">Tvoc</div>
										<div class="value">1.5ppm</div>
									</div>
									<div class="item">
										<div class="label">PM2.5</div>
										<div class="value">2.3ug/m3</div>
									</div>
								</div>
							</div>`,
							0, -40, 2
						);
						break;
					default:
						break;
				}
			},
			init() {
				getBimViewToken(bimData.fileId).then(this.successFunc);
			},
			selectItem(item) {
				this.drapShow = false;
				this.clearAll();
				if (item.id === 5) return this.setWalk();
				this.bimViewer.setStatus(bimData.cameraState);
				if (this.pathNode.id == item.id) return this.pathNode = {};
				this.pathNode = item;
				if (item.id === 1) this.setFloor();
				if (item.id === 2) this.setMonitor();
				if (item.id === 3) this.setDevice();
				if (item.id === 4) this.setLight();
			},
			clearAll() {
				if (!this.bimViewer) return;
				this.clearFloor();
				this.bimViewer.clear3DMaker();
			},
			setFloor() { //设置房间
				for (var i = 0; i < bimData.roomList.length; i++) {
					if (bimData.roomList[i].name) {
						this.bimViewer.addDrawable({
							position: bimData.roomList[i].position,
							offsetX: -75,
							offsetY: -40,
							html: `	<div class="tips-4">${bimData.roomList[i].name}<i class="iconfont huifont-sanjiaojiantou-xia"></i></div>`,
							id: 'room' + bimData.roomList[i].roomId
						}, data => {
							this.showDrap('roomDetail');
						})
					}
				}
			},
			clearFloor() { //清除房间
				let ids = bimData.roomList.filter(node => node.name).map(node => 'room' + node.roomId);
				this.bimViewer.clearDrawable(ids);
			},
			setMonitor() { //设置摄像头
				for (var i = 0; i < bimData.monitorList.length; i++) {
					this.bimViewer.add3DMaker('image', bimData.monitorList[i],
						'./assets/shexiangtou.png', (data) => {
							this.showDrap('monitorDetail');
						}, 'monitor' + i);
				}
			},
			setDevice() {
				for (var i = 0; i < bimData.deviceList.length; i++) {
					this.bimViewer.add3DMaker('image', bimData.deviceList[i],
						'http://static.bimface.com/resources/3DMarker/warner/warner_red.png', (data) => {
							this.showDrap('deviceDetail');
						}, 'device' + i);
				}
			},
			setLight() {
				for (var i = 0; i < bimData.deviceList.length; i++) {
					this.bimViewer.add3DMaker('image', bimData.deviceList[i],
						'./assets/zhaoming.png', (data) => {
							this.showDrap('lightDetail');
						}, 'light' + i);
				}
			},
			setWalk() {
				this.isWalk = true;
				if (!this.bimViewer) return;
				this.bimViewer.setCamera({
					isPan: false,
					isRotate: false,
					isZoom: false
				})
				this.bimViewer.clearAllRooms();
				this.bimViewer.clearDrawable();
				this.bimViewer.setStatus({
					"name": "persp",
					"position": {
						"x": 28807.993915330604,
						"y": 27399.352876051566,
						"z": 16738.511738489797
					},
					"target": {
						"x": -65426.025574263804,
						"y": 30224.662894887166,
						"z": 16738.522116432974
					},
					"up": {
						"x": 0,
						"y": -0.0000036732051114073575,
						"z": 0.9999999999932537
					},
					"near": 9.86184145967756,
					"far": 26059.687483045527,
					"zoom": 3.075280565913524,
					"version": 1,
					"fov": 45,
					"aspect": 1.6274768824306474,
					"coordinateSystem": "world"
				});
			},
			stopWalkFunc() {
				this.bimViewer.setCamera({
					isPan: true,
					isRotate: true,
					isZoom: true
				})
				this.bimViewer.clearDrawable();
				this.isWalk = false;
				this.stopWalk();
				this.bimViewer.setStatus(bimData.cameraState);
				this.initFloor();
				if (this.pathNode.id === 1) this.setFloor();
				if (this.pathNode.id === 2) this.setMonitor();
				if (this.pathNode.id === 3) this.setDevice();
				if (this.pathNode.id === 4) this.setLight();
			},
			setWalkTip(data, html, x, y, type) {
				for (let i = 0; i < data.length; i++) {
					this.bimViewer.addDrawable({
						position: data[i],
						offsetX: x,
						offsetY: y,
						html: html,
						id: 'walktip' + type + i
					}, data => {
						if (type === 1) {
							this.showDrap('lightDetail');
						} else if (type === 2) {
							this.showDrap('roomDetail');
						} else if (type === 3) {
							this.showDrap('deviceDetail');
						}
					})
				}
			},
			returnRGBA(color) {
				let [r, g, b, a] = color.match(/\d+(\.\d+)?/g).map(Number);
				return {
					r,
					g,
					b,
					a
				}
			},
			getCamera() {
				if (!this.bimViewer) return;
				console.log(this.bimViewer.getCameraState());
			},
			setRoom(data) {
				let point = data.worldPosition;
				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.roomId,
						boundary: {
							"outer": this.positionData
						},
						height: 500,
						roomColor: this.returnRGBA('rgba(19, 206, 102, 0.6)')
					})
					this.bimViewer.clear3DMaker();
					this.positionData = [];
					this.bimViewer.editRoom({
						roomId: this.roomId
					})
					this.roomId++;
				}
			},
			successFunc(res) {
				if (res.state) {
					this.bimViewer = new bimView({
						dom: document.getElementById('previewBim' + this._uid),
						viewToken: res.data,
						roamAngle: bimData.roamAngle,
						initHomeViewer: bimData.cameraState,
						renderSuccess: () => {
							this.renderSuccess = true;
							this.bimViewer.setStatus(bimData.cameraState);
							// this.bimViewer.setToolbars(true);
							if (bimData.fileId == '10000892771892') this.modelRenderSuccess();
						},
						roomSaved: data => {
							console.log(data);
						},
						click: data => {
							console.log(data);
							// this.setRoom(data);
						}
					})
				}
			},
			modelRenderSuccess() {
				this.bimViewer.HideOthers();
				this.bimViewer.hideComponentsByObjectData([{
					"family": "TJ双扇平开门",
					"levelName": "A_4F(14.500)"
				}, {
					"family": "单扇推拉门",
					"levelName": "A_4F(14.500)"
				}, {
					"family": "TJ单扇平开门",
					"levelName": "A_4F(14.500)"
				}, {
					"family": "TJ子母门",
					"levelName": "A_4F(14.500)"
				}])
				this.bimViewer.overrideComponentsColorByObjectData([{
					"family": "楼板",
					"levelName": "A_4F(14.500)"
				}, {
					"family": "幕墙",
					"levelName": "A_4F(14.500)"
				}, {
					"family": "基本墙",
					"levelName": "A_4F(14.500)"
				}, {
					"family": "常规模型 39",
					"levelName": "A_4F(14.500)"
				}])
				this.initFloor();
				this.setFloor();
			},
			initFloor() {
				for (var i = 0; i < bimData.roomList.length; i++) {
					this.bimViewer.insertRooms({
						id: bimData.roomList[i].roomId,
						boundary: {
							"outer": bimData.roomList[i].boundary
						},
						height: bimData.roomList[i].height,
						roomColor: this.returnRGBA(bimData.roomList[i].color)
					})
					if (bimData.roomList[i].floorName) {
						this.bimViewer.addDrawable({
							position: bimData.roomList[i].position,
							offsetX: -30,
							offsetY: 5,
							html: `	<div class="floor-name">${bimData.roomList[i].floorName}</div>`,
							id: 'floor' + bimData.roomList[i].roomId
						}, data => {
							let floor = data.id.split('floor');
							let item = bimData.roomList.find(node => node.roomId == floor[floor.length - 1]);
							console.log(item);
							if (item.floorName === '卫生间' || item.floorName === '公共区域' || item.floorName ===
								'楼梯间' || item.floorName === '电梯间' || item.floorName === '设备间') return;
							this.showDrap('roomDetail');
						})
					}
				}
			}
		}
	}
</script>

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

		.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-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;

				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}
		}

		.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>