fix

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

@@ -0,0 +1,641 @@
+<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"
+				}, {
+					"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"
+				}, {
+					"id": "d6a69146-0fa4-4b96-8823-5a6acb93df10",
+					"position": {
+						"x": 21270.373381191373,
+						"y": 27944.435752543206,
+						"z": 16738.513740691003
+					},
+					"target": {
+						"x": 11449.311926122491,
+						"y": -64824.15181454667,
+						"z": 3116.152764310379
+					},
+					"coordinateSystem": "world"
+				}, {
+					"id": "6f76a823-5b9a-478b-88d1-8cc701f48d91",
+					"position": {
+						"x": 20792.50087657239,
+						"y": 13841.412598430225,
+						"z": 16738.461937394382
+					},
+					"target": {
+						"x": 18038.03011945137,
+						"y": -79397.87720835117,
+						"z": 3068.0364486589156
+					},
+					"coordinateSystem": "world"
+				}, {
+					"id": "9afa7778-a500-4707-8576-a25cec8710b3",
+					"position": {
+						"x": 20653.4160327832,
+						"y": 13408.877024051308,
+						"z": 16738.460348602504
+					},
+					"target": {
+						"x": 112398.1176970292,
+						"y": 2548.198234651193,
+						"z": -2049.5192830622163
+					},
+					"coordinateSystem": "world"
+				}, {
+					"id": "bd51d05f-287d-45b9-addc-9da32d0e79f8",
+					"position": {
+						"x": 30968.639340308415,
+						"y": 13085.285430882526,
+						"z": 16738.459159984213
+					},
+					"target": {
+						"x": 122900.33170996535,
+						"y": 19518.523647883958,
+						"z": -3141.434953464723
+					},
+					"coordinateSystem": "world"
+				}, {
+					"id": "bf6e4d38-74e2-4f51-83d3-20a7f16cdf56",
+					"position": {
+						"x": 32211.266434023968,
+						"y": 13275.842610296175,
+						"z": 16738.459859939816
+					},
+					"target": {
+						"x": 30902.284349220965,
+						"y": 105501.28094759125,
+						"z": -2775.3274521968156
+					},
+					"coordinateSystem": "world"
+				}, {
+					"id": "6b309ba7-6044-41fb-815e-e878692fc437",
+					"position": {
+						"x": 32401.761864596003,
+						"y": 44931.81365916862,
+						"z": 16738.57613881422
+					},
+					"target": {
+						"x": 33065.36397610181,
+						"y": 137450.0034069327,
+						"z": -1371.5592527883905
+					},
+					"coordinateSystem": "world"
+				}],
+				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.setWalkthroughTime(100);
+				this.wt.setKeyFrames(this.walk);
+				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();
+			},
+			init() {
+				getBimViewToken(bimData.fileId).then(this.successFunc);
+			},
+			selectItem(item) {
+				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('organizationDetail');
+						})
+					}
+				}
+			},
+			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.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.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();
+			},
+			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 => {
+							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>

virgo.wzfrontend/console/src/config/demo1.js

@@ -3,26 +3,26 @@ export default {
 	cameraState: {
 		"name": "persp",
 		"position": {
-			"x": -22141.531113529338,
-			"y": 51441.68060477911,
-			"z": 77452.54228464924
+			"x": -22128.504146307874,
+			"y": 52853.71988895382,
+			"z": 89193.34115485626
 		},
 		"target": {
-			"x": 37166.973458913795,
-			"y": 51242.13867304171,
-			"z": 4168.886028524924
+			"x": 30641.13155446061,
+			"y": 52676.22527061965,
+			"z": 11069.293323625228
 		},
 		"up": {
-			"x": 0.7773235680316928,
-			"y": -0.002621123933633849,
-			"z": 0.6290955414655256
+			"x": 0.8286658555571681,
+			"y": -0.0027938419937244595,
+			"z": 0.55973662938977
 		},
-		"near": 30339.697668008135,
-		"far": 106243.592467016,
-		"zoom": 1.1509040217079742,
+		"near": 39036.529841904565,
+		"far": 115087.4975594089,
+		"zoom": 1.0299624234908134,
 		"version": 1,
 		"fov": 45,
-		"aspect": 2.0607734806629834,
+		"aspect": 1.6274768824306474,
 		"coordinateSystem": "world"
 	},
 	roamAngle: {},
@@ -68,22 +68,165 @@ export default {
 		"z": 18500
 	}],
 	deviceList: [{
-		"x": 16282,
-		"y": 63917,
-		"z": 14500
+		"x": 39000,
+		"y": 63567.76113487003,
+		"z": 18500
+	}, {
+		"x": 39000,
+		"y": 50931.52053656608,
+		"z": 18500
+	}, {
+		"x": 39000,
+		"y": 38896.136235233185,
+		"z": 18500
+	}, {
+		"x": 39000,
+		"y": 24623.89962333094,
+		"z": 18500
+	}, {
+		"x": 39000,
+		"y": 10503.378123087425,
+		"z": 18500
+	}, {
+		"x": 14277.809212661703,
+		"y": 10974.475324874935,
+		"z": 18500
+	}, {
+		"x": 14277,
+		"y": 25377.087874417703,
+		"z": 18500
 	}, {
-		"x": 16282,
-		"y": 51469,
-		"z": 14500
+		"x": 14277,
+		"y": 38658.98888696544,
+		"z": 18500
 	}, {
-		"x": 15334,
-		"y": 38614,
-		"z": 14500
+		"x": 14277,
+		"y": 52501.217954382904,
+		"z": 18500
 	}, {
-		"x": 15334,
-		"y": 23849,
-		"z": 14500
+		"x": 14277,
+		"y": 63853.4809260422,
+		"z": 18500
+	}, {
+		"x": 17810,
+		"y": 89831.93105801607,
+		"z": 18500
+	}, {
+		"x": 29168.464592779244,
+		"y": 40046.771130985515,
+		"z": 18500
+	}, {
+		"x": 29168.182239375663,
+		"y": 33844.90749548337,
+		"z": 18500
+	}, {
+		"x": 29168.267816189586,
+		"y": 27712.110246362194,
+		"z": 18500
+	}, {
+		"x": 29168.013419449322,
+		"y": 19264.82157305417,
+		"z": 18500
 	}],
+	roomDetail: {
+		title: '房间信息',
+		list: [{
+			name: '房间编号',
+			value: '1202'
+		}, {
+			name: '房屋状态',
+			value: '精装'
+		}, {
+			name: '租赁状态',
+			value: '已租'
+		}, {
+			name: '建筑面积',
+			value: '200平方米'
+		}, {
+			name: '入驻公司',
+			value: '元重构人工智能科技(上海)有限公司'
+		}, {
+			name: '合同期限',
+			value: '2024/11/28-2026/11/28'
+		}, {
+			name: '房屋租金',
+			value: '23.04万 正常付费'
+		}, {
+			name: '物业费用',
+			value: '3.36万 正常付费'
+		}, {
+			name: '水电费用',
+			value: '2024/12月欠费中'
+		}, {
+			name: '联系人员',
+			value: '陈先生'
+		}, {
+			name: '联系方式',
+			value: '13818185678'
+		}],
+		imageUrl: 'https://file-node.oss-cn-shanghai.aliyuncs.com/youji/d8f0a8b4bd2043dfb8058d92763e57b0'
+	},
+	organizationDetail: {
+		title: '公司信息',
+		list: [{
+			name: '公司名称',
+			value: '元重构人工智能科技(上海)有限公司'
+		}, {
+			name: '公司行业',
+			value: '金融业'
+		}, {
+			name: '公司规模',
+			value: '500人以上'
+		}, {
+			name: '联系人员',
+			value: '陈先生'
+		}, {
+			name: '联系方式',
+			value: '13818185678'
+		}],
+		imageUrl: 'https://file-node.oss-cn-shanghai.aliyuncs.com/youji/d8f0a8b4bd2043dfb8058d92763e57b0'
+	},
+	monitorDetail: {
+		title: '监控信息',
+		list: [{
+			name: '监控名称',
+			value: '1号监控'
+		}, {
+			name: '监控位置',
+			value: '1201'
+		}, {
+			name: '监控状态',
+			value: '在线'
+		}],
+		imageUrl: 'https://file-node.oss-cn-shanghai.aliyuncs.com/youji/d8f0a8b4bd2043dfb8058d92763e57b0'
+	},
+	deviceDetail: {
+		title: '设备信息',
+		list: [{
+			name: '设备名称',
+			value: '烟感报警器'
+		}, {
+			name: '设备位置',
+			value: '1201'
+		}, {
+			name: '设备状态',
+			value: '在线'
+		}],
+		imageUrl: 'https://file-node.oss-cn-shanghai.aliyuncs.com/youji/d8f0a8b4bd2043dfb8058d92763e57b0'
+	},
+	lightDetail: {
+		title: '灯光信息',
+		list: [{
+			name: '灯光名称',
+			value: '1号照明'
+		}, {
+			name: '灯光位置',
+			value: '1201'
+		}, {
+			name: '灯光操作',
+			value: 'operation'
+		}]
+	},
 	roomList: [{
 		"roomId": 1,
 		"boundary": [{

virgo.wzfrontend/console/src/uitls/controls.js

@@ -114,7 +114,7 @@ class bimView {
 			})
 			viewer3D.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.SelectionChanged, data => {
 				if (data.length == 1) {
-					let elementData = data[0].split('.');
+					let elementData = String(data[0]).split('.');
 					elementObject.fileId = elementData.length == 2 ? elementData[0] : '';
 					elementObject.objectId = elementData.length == 2 ? elementData[1] : elementData[0];
 				} else {
@@ -191,6 +191,9 @@ class bimView {
 				drawableConfig.viewer = viewer3D;
 				drawableContainer = new Glodon.Bimface.Plugins.Drawable.DrawableContainer(drawableConfig);
 			}
+			if (option.id && drawableContainer.getItemById(option.id)) return drawableContainer.showItemsById([
+				option.id
+			]);
 			// 创建自定义元素，可以是一个dom element，也可以是个字符串
 			let config = new Glodon.Bimface.Plugins.Drawable.CustomItemConfig();
 			config.content = option.html;
@@ -207,8 +210,14 @@ class bimView {
 			drawableContainer.addItem(customItem);
 			customItem.onClick(successCallback);
 		}
-		this.clearDrawable = () => {
-			if (drawableContainer) drawableContainer.clear();
+		this.clearDrawable = (ids) => {
+			if (drawableContainer) {
+				if (ids) {
+					drawableContainer.hideItemsById(ids)
+				} else {
+					drawableContainer.clear();
+				}
+			}
 		}
 		this.setNavigationMode = () => {
 			viewer3D.setNavigationMode(Glodon.Bimface.Viewer.NavigationMode3D.Walk);

virgo.wzfrontend/console/src/uitls/index.js

@@ -405,15 +405,16 @@ export function roomList(data) {
 			target['projectItem'] = item;
 			target['optionName'] = target['name'];
 			index++;
-			target['children'] = target.projectItemTargetRoomList.map(room => {
-				room['roomId'] = room['id'];
-				room['id'] = index;
-				room['projectItem'] = item;
-				room['projectItemTarget'] = target;
-				room['optionName'] = room['roomNumber'];
-				index++;
-				return room;
-			})
+			if (target.projectItemTargetRoomList) target['children'] = target.projectItemTargetRoomList
+				.map(room => {
+					room['roomId'] = room['id'];
+					room['id'] = index;
+					room['projectItem'] = item;
+					room['projectItemTarget'] = target;
+					room['optionName'] = room['roomNumber'];
+					index++;
+					return room;
+				})
 			return target
 		})
 		return item;

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

@@ -1,490 +1,76 @@
 <template>
-	<div id="distribution" class="distribution-index">
-		<div class="left-button" v-if="renderSuccess">
-			<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 class="yui-tree-box">
+		<div class="hui-left-tree">
+			<div class="hui-left-tree-title">
+				<svg-icon name="zhuangshi" width="16" height="20"></svg-icon>
+				<span class="hui-left-tree-sub">空间位置</span>
 			</div>
+			<div class="hui-left-tree-content">
+				<el-collapse v-model="activeName">
+					<el-collapse-item v-for="item in treeData" :key="item.id" :name="item.id">
+						<template slot="title">
+							<i class="iconfont huifont-shuzhuangcaidantubiao"></i>
+							<span class="el-collapse-name">{{item.name}}</span>
+						</template>
+						<div>
+							<el-tree :data="item.children" :props="defaultProps" @node-click="selectItem">
+								<div :class="'tree-node' + (data.id == nowItem.id ? ' active':'')"
+									slot-scope="{ node, data }">
+									<span class="tree-node-label">{{ node.label }}</span>
+									<i class="iconfont huifont-shexiangtou"></i>
+								</div>
+							</el-tree>
+						</div>
+					</el-collapse-item>
+				</el-collapse>
+			</div>
+		</div>
+		<div class="hui-tree-content">
+			<operation-model></operation-model>
 		</div>
-		<div :id="'previewBim'+_uid" class="previewBim"></div>
 	</div>
 </template>
 
 <script>
 	import {
-		getBimViewToken,
-	} from '@/httpApi/bim'
-	import bimView from '@/uitls/controls'
-	// import bimData from '@/config/demo'//新华医院
-	import bimData from '@/config/demo1'
+		getProjectTreeList
+	} from '@/httpApi/space';
+	import {
+		roomList
+	} from '@/uitls';
+	import operationModel from '@/components/work/bim/operationModel'
 	export default {
 		data() {
 			return {
-				roomId: 1,
-				form: {
-					color: 'rgba(19, 206, 102, 0.6)'
+				treeData: [],
+				nowItem: {},
+				defaultProps: {
+					label: 'name'
 				},
-				bimViewer: null,
-				positionData: [],
-				roomList: bimData.roomList,
-				monitorList: bimData.monitorList,
-				deviceList: bimData.deviceList,
-				cameraState: bimData.cameraState,
-				isRender: false,
-				roamAngle: bimData.roamAngle,
-				titleList: [{
-					id: 1,
-					name: '楼层'
-				}, {
-					id: 2,
-					name: '监控'
-				}, {
-					id: 3,
-					name: '设备'
-				}, {
-					id: 4,
-					name: '灯光'
-				}, {
-					id: 5,
-					name: '漫游'
-				}],
-				pathNode: {},
-				renderSuccess: false
+				activeName: []
 			}
 		},
 		created() {
-			this.init();
-		},
-		mounted() {
-			this.isRender = true;
-		},
-		beforeDestroy() {
-			if (this.bimViewer) this.bimViewer.destroy();
+			this.initList();
 		},
 		methods: {
-			init() {
-				getBimViewToken(bimData.fileId).then(this.successFunc);
-			},
-			selectItem(item) {
-				this.bimViewer.setStatus(this.cameraState);
-				if (this.pathNode.id === item.id) return;
-				if (this.pathNode.id === 1) this.clearFloor();
-				if (this.pathNode.id === 2) this.clearMonitor();
-				if (this.pathNode.id === 3) this.clearDevice();
-				this.pathNode = item;
-				if (item.id === 1) this.setFloor();
-				if (item.id === 2) this.setMonitor();
-				if (item.id === 3) this.setDevice();
-			},
-			clearFloor() { //清楚房间
-				this.bimViewer.clearAllRooms();
-				this.bimViewer.clearDrawable();
-			},
-			setFloor() { //设置房间
-				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].color)
-					})
-					if (this.roomList[i].name) {
-						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>`,
-							id: this.roomList[i].roomId
-						}, data => {
-							this.insertDom(data.id, data.clientPosition.x,
-								data.clientPosition
-								.y);
-						})
-					}
-					if (this.roomList[i].floorName) {
-						this.bimViewer.addDrawable({
-							position: this.roomList[i].position,
-							offsetX: -30,
-							offsetY: 5,
-							html: `	<div class="floor-name">${this.roomList[i].floorName}</div>`,
-							id: this.roomList[i].roomId
-						}, data => {
-							this.insertDom(data.id, data.clientPosition.x,
-								data.clientPosition
-								.y);
-						})
+			initList() {
+				getProjectTreeList(this.$store.getters.project.id).then(res => {
+					if (res.state) {
+						this.treeData = roomList(res.data.projectItemList);
+						this.activeName = this.treeData.map(node => node.id);
 					}
-				}
-			},
-			setMonitor() {
-				for (var i = 0; i < this.monitorList.length; i++) {
-					this.bimViewer.add3DMaker('image', this.monitorList[i],
-						'./assets/shexiangtou.png', (data) => {
-							console.log(data);
-						}, i);
-					this.bimViewer.insertExternalObject('./assets/model/yuanzhui.fbx', this.monitorList[i], i, 'monitor');
-				}
-			},
-			clearMonitor() {
-				this.bimViewer.clear3DMaker();
-				this.bimViewer.clearALlPlane();
+				})
 			},
-			setDevice() {
-				for (var i = 0; i < this.deviceList.length; i++) {
-					this.bimViewer.add3DMaker('image', this.deviceList[i],
-						'http://static.bimface.com/resources/3DMarker/warner/warner_red.png', (data) => {
-							console.log(data);
-						}, i);
-					this.bimViewer.insertExternalObject('./assets/model/yuanzhui.fbx', this.deviceList[i], i, 'device');
-				}
-			},
-			clearDevice() {
-				this.bimViewer.clear3DMaker();
-			},
-			insertDom(roomId, left, top) {
-				let _self = this;
-				let box = document.getElementById('distribution');
-				let data = this.roomList.find(node => node.roomId == roomId) || {
-					floorName: '-'
-				};
-				if (document.getElementById('distribution-drap')) box.removeChild(document.getElementById(
-					'distribution-drap'))
-				let div = document.createElement('div');
-				div.style.left = (left || 0) + 'px';
-				div.style.top = (top || 0) + 'px';
-				div.className = 'distribution-drap'
-				div.id = 'distribution-drap'
-				div.innerHTML = `<div class="distribution-drap-box">
-										<div class="distribution-drap-title">
-											<div id="title" class="distribution-drap-title-content">房间信息</div>
-											<i id="close" class="el-icon-circle-close"></i>
-										</div>
-										<div class="distribution-drap-content">
-											<div class="user-list">
-												<div class="user-item">
-													<div class="user-key">房间编号</div>
-													<div class="user-value">${data.floorName}</div>
-												</div>
-												<div class="user-item">
-													<div class="user-key">房屋状态</div>
-													<div class="user-value">精装</div>
-												</div>
-												<div class="user-item">
-													<div class="user-key">租赁状态</div>
-													<div class="user-value">已租</div>
-												</div>
-												<div class="user-item">
-													<div class="user-key">建筑面积</div>
-													<div class="user-value">200平方米</div>
-												</div>
-												<div class="user-item">
-													<div class="user-key">入驻公司</div>
-													<div class="user-value">元重构人工智能科技(上海)有限公司</div>
-												</div>
-												<div class="user-item">
-													<div class="user-key">合同期限</div>
-													<div class="user-value">2024/11/28-2026/11/28</div>
-												</div>
-												<div class="user-item">
-													<div class="user-key">房屋租金</div>
-													<div class="user-value">23.04万 正常付费</div>
-												</div>
-												<div class="user-item">
-													<div class="user-key">物业费用</div>
-													<div class="user-value">3.36万 正常付费</div>
-												</div>
-												<div class="user-item">
-													<div class="user-key">水电费用</div>
-													<div class="user-value">2024/12月欠费中</div>
-												</div>
-												<div class="user-item">
-													<div class="user-key">联系人员</div>
-													<div class="user-value">陈先生</div>
-												</div>
-												<div class="user-item">
-													<div class="user-key">联系方式</div>
-													<div class="user-value">13818185678</div>
-												</div>
-											</div>
-										</div>
-										<div class="image-box">
-											<img src="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/d8f0a8b4bd2043dfb8058d92763e57b0"
-												alt="aa.png" />
-										</div>
-									</div>`
-				div.onmousedown = function(evt) {
-					let oEvent = evt || event; //获取事件对象，这个是兼容写法
-					if (oEvent.target.id === 'close') return box.removeChild(this);
-					if (oEvent.target.id !== 'title') return;
-					let disX = oEvent.clientX - parseInt(div.style.left || 0);
-					let disY = oEvent.clientY - parseInt(div.style.top || 0);
-					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;
-					}
-				}
-				box.appendChild(div);
-			},
-			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());
-				// this.bimViewer.setStatus(this.cameraState);
-			},
-			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(this.form.color)
-					})
-					this.bimViewer.clear3DMaker();
-					this.positionData = [];
-					this.bimViewer.editRoom({
-						roomId: this.roomId
-					})
-					this.roomId++;
-				}
+			selectItem(item) {
+				if (item.projectItemTargetId) this.nowItem = item;
 			},
-			successFunc(res) {
-				if (res.state) {
-					this.bimViewer = new bimView({
-						dom: document.getElementById('previewBim' + this._uid),
-						viewToken: res.data,
-						roamAngle: this.roamAngle,
-						initHomeViewer: this.cameraState,
-						renderSuccess: () => {
-							this.renderSuccess = true;
-							this.bimViewer.setStatus(this.cameraState);
-							// this.bimViewer.setToolbars(true);
-							if (bimData.fileId == '10000892771892') {
-								this.bimViewer.HideOthers();
-								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)"
-								}])
-							}
-						},
-						roomSaved: data => {
-							console.log(data);
-						},
-						click: data => {
-							console.log(data);
-							// this.setRoom(data);
-						}
-					})
-				}
-			}
+		},
+		components: {
+			operationModel
 		}
 	}
 </script>
 
 <style lang="scss">
-	.distribution-index {
-		width: 100%;
-		height: 100%;
-		display: flex;
-		flex-direction: column;
-		position: relative;
-		overflow: hidden;
-
-		.tips-4 {
-			cursor: pointer;
-		}
-
-		.yuanzhui {
-			margin: auto;
-			position: relative;
-			width: 200px;
-			height: 300px;
-		}
-
-		.yuanzhui::before {
-			position: absolute;
-			content: "";
-			width: 0;
-			height: 0;
-			border-bottom: 200px solid #9dc831;
-			border-left: 80px solid transparent;
-			border-top: 80px solid transparent;
-			transform: skewY(20deg);
-			filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, .5));
-		}
-
-		.yuanzhui::after {
-			position: absolute;
-			content: "";
-			left: 80px;
-			width: 0;
-			height: 0;
-			border-bottom: 200px solid #669300;
-			border-right: 80px solid transparent;
-			border-top: 80px solid transparent;
-			transform: skewY(-20deg);
-			filter: drop-shadow(6px 6px 5px rgba(0, 0, 0, .5));
-		}
-
-		.yuanzhui div {
-			position: absolute;
-			bottom: 7px;
-			left: 78px;
-			width: 4px;
-			height: 192px;
-			background: #fff;
-			z-index: 9;
-			opacity: .3;
-			box-shadow: 0px -2px 4px 1px #fff;
-		}
-
-		.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: 0;
-			left: 0;
-			background: $--color-background;
-			width: 300px;
-			border-radius: 8px;
-			z-index: 998;
-
-			.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;
-				}
-			}
-		}
-
-		.bf-house,
-		.bf-tree-toolbar {
-			display: none;
-		}
-	}
 </style>