fix

virgo.wzfrontend/console/public/icon/font.css

@@ -23,7 +23,7 @@
 @font-face {
 	font-family: "hanyiyaku";
 	font-weight: 400;
-	src: url("./hanyiyaku.ttf") format("truetype");
+	src: url("https://file-node.oss-cn-shanghai.aliyuncs.com/youji/9b17ffe981814397b4eb2daa3af3627d") format("truetype");
 	font-display: swap;
 }
 

virgo.wzfrontend/console/src/components/common/projectItemTree.vue

@@ -1,90 +1,126 @@
-<template>
-	<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">{{title}}</span>
-		</div>
-		<div class="hui-left-tree-content">
-			<el-collapse>
-				<el-collapse-item v-for="item in treeData" :key="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.projectItemTargetList" :props="defaultProps">
-							<div class="custom-tree-node" slot-scope="{ node, data }">
-								<div class="label">{{node.label}}</div>
-								<div :class="nowData.id === data.id ? 'active':''" @click.stop="nodeClick(data)">
-									<i :class="iconfontClass"></i>
-								</div>
-							</div>
-						</el-tree>
-					</div>
-				</el-collapse-item>
-			</el-collapse>
-		</div>
-	</div>
-
-</template>
-
-<script>
-	import {
-		getProjectDetailById,
-	} from '@/httpApi/space'
-	export default {
-		props: {
-			title: {
-				type: String,
-				default: '空间列表'
-			},
-			iconfontClass: {
-				type: String,
-				default: 'iconfont huifont-shexiangtou'
-			},
-			type: {
-				type: String,
-				default: ''
-			}
-		},
-		data() {
-			return {
-				treeData: [],
-				defaultProps: {
-					children: 'children',
-					label: 'name'
-				},
-				nowData: {}
-			}
-		},
-		mounted() {
-			this.init();
-		},
-		methods: {
-			init() {
-				getProjectDetailById(this.$store.getters.project.id).then(res => {
-					if (res.state) {
-						this.treeData = res.data.projectItemList.map(node => {
-							node.projectItemTargetList = node.projectItemTargetList.map(target => {
-								target['bimIntegrateId'] = node.bimIntegrateId;
-								target['projectItemName'] = node.name;
-								if (this.type === 'isInit' && !this.nowData.id) {
-									this.nodeClick(target, 'isInit');
-								}
-								return target;
-							})
-							return node;
-						});
-						if (this.treeData.length === 0) this.nodeClick({}, 'isInit');
-					}
-				})
-			},
-			nodeClick(item, type) {
-				this.nowData = this.nowData.id === item.id ? {} : item;
-				this.$emit('treeclick', this.nowData, type);
-			}
-		}
-	}
-</script>
-
+<template>
+	<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">{{title}}</span>
+		</div>
+		<div class="hui-left-tree-content">
+			<el-collapse>
+				<el-collapse-item v-for="item in treeData" :key="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.projectItemTargetList" :props="defaultProps">
+							<div class="custom-tree-node" slot-scope="{ node, data }">
+								<div class="label">{{node.label}}</div>
+								<div :class="nowData.id === data.id ? 'active':''" @click.stop="nodeClick(data)"
+									v-if="hasRoom ? data.roomId : true">
+									<i :class="iconfontClass"></i>
+								</div>
+							</div>
+						</el-tree>
+					</div>
+				</el-collapse-item>
+			</el-collapse>
+		</div>
+	</div>
+
+</template>
+
+<script>
+	import {
+		getHouseTree,
+	} from '@/httpApi/space'
+	import {
+		roomList
+	} from '@/uitls'
+	export default {
+		props: {
+			title: {
+				type: String,
+				default: '空间列表'
+			},
+			iconfontClass: {
+				type: String,
+				default: 'iconfont huifont-shexiangtou'
+			},
+			type: {
+				type: String,
+				default: ''
+			},
+			hasRoom: {
+				type: Boolean,
+				default: false
+			},
+			isCancel: {
+				type: Boolean,
+				default: true
+			}
+		},
+		data() {
+			return {
+				treeData: [],
+				defaultProps: {
+					children: 'children',
+					label: 'name'
+				},
+				nowData: {}
+			}
+		},
+		mounted() {
+			this.init();
+		},
+		methods: {
+			init() {
+				getHouseTree(this.$store.getters.project.id).then(res => {
+					if (res.state) {
+						if (!this.hasRoom) {
+							this.defaultProps['label'] = 'name';
+							this.treeData = res.data.projectItemList.map(node => {
+								node.projectItemTargetList = node.projectItemTargetList.map(target => {
+									target['bimIntegrateId'] = node.bimIntegrateId;
+									target['projectItemName'] = node.name;
+									if (this.type === 'isInit' && !this.nowData.id) {
+										this.nodeClick(target, 'isInit');
+									}
+									return target;
+								})
+								return node;
+							});
+							if (this.treeData.length === 0) this.nodeClick({}, 'isInit');
+						} else {
+							this.defaultProps['label'] = 'optionName';
+							this.treeData = roomList(res.data.projectItemList || []);
+							let roomData = [];
+							for (let i = 0; i < this.treeData.length; i++) {
+								if (this.treeData[i].projectItemTargetList) {
+									for (let k = 0; k < this.treeData[i].projectItemTargetList.length; k++) {
+										if (this.treeData[i].projectItemTargetList[k].projectItemTargetRoomList) {
+											roomData = roomData.concat(this.treeData[i].projectItemTargetList[k]
+												.projectItemTargetRoomList);
+										}
+									}
+								}
+							}
+							if (this.type === 'isInit' && !this.nowData.id) this.nodeClick(roomData[0], 'isInit');
+						}
+					}
+				})
+			},
+			nodeClick(item, type) {
+				if (this.isCancel) {
+					this.nowData = this.nowData.id === item.id ? {} : item;
+					this.$emit('treeclick', this.nowData, type);
+				} else {
+					if (this.nowData.id === item.id) return;
+					this.nowData = item;
+					this.$emit('treeclick', this.nowData, type);
+				}
+			}
+		}
+	}
+</script>
+
 <style></style>

virgo.wzfrontend/console/src/components/common/svgIcon.vue

@@ -22,7 +22,7 @@
 				svgName: ''
 			}
 		},
-		mounted() {
+		created() {
 			let box = [
 				"dir",
 				"div",

virgo.wzfrontend/console/src/components/common/weatherIcon.vue

@@ -76,7 +76,7 @@
 				svgName: ''
 			}
 		},
-		mounted() {
+		created() {
 			if (weatherPinyinData.filter(node => node === this.name).length > 0) {
 				this.svgName = this.name;
 			} else if (repeat[this.name]) {

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

@@ -0,0 +1,535 @@
+<template>
+	<div class="operation-plan">
+		<div id="fabricContainer" class="fabric-container">
+			<div id="canvas-container">
+				<canvas id="myCanvas"></canvas>
+			</div>
+		</div>
+		<div class="left-button">
+			<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>
+		<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" v-if="drapShow">
+				<organization v-if="type === 'organizationDetail'" :detail="detail" @clickName="clickName">
+				</organization>
+				<house v-else-if="type === 'roomDetail'" :detail="detail"></house>
+				<device v-else-if="type === 'monitor' || type === 'lighting' || type === 'airConditioning'"
+					:detail="detail" :type="type" @clickName="clickName">
+				</device>
+			</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 {
+		updateProjectItemTarget,
+		getHouseListByPage
+	} from '@/httpApi/space'
+	import {
+		getOrganizationListByPage
+	} from '@/httpApi/business'
+	import * as fabric from 'fabric'
+	import noticeBoard from '@/components/work/common/noticeBoard'
+	import organization from '@/components/work/bim/modelDetail/organization'
+	import house from '@/components/work/bim/modelDetail/house'
+	import device from '@/components/work/bim/modelDetail/device'
+	export default {
+		props: ['target'],
+		data() {
+			return {
+				canvas: null,
+				backgroundImageUrl: '',
+				roomList: [],
+				floorPlanSize: {
+					width: '',
+					height: ''
+				},
+				detail: {},
+				noticeBoardType: '1',
+				modelVisible: false,
+				drapShow: false,
+				type: '',
+				organizationObj: {},
+				titleList: [{
+					id: 1,
+					name: '企业'
+				}, {
+					id: 2,
+					name: '监控',
+					type: 'monitor'
+				}, {
+					id: 3,
+					name: '照明',
+					type: 'lighting'
+				}, {
+					id: 4,
+					name: '空调',
+					type: 'airConditioning'
+				}],
+				pathNode: {
+					id: 1,
+					name: '企业'
+				},
+				signList: [{
+					id: 1,
+					name: '摄像头',
+					iconPath: './assets/shexiangtou.png'
+				}, {
+					id: 2,
+					name: '门禁',
+					iconPath: './assets/menjin.png'
+				}, {
+					id: 3,
+					name: '停车',
+					iconPath: './assets/car.png'
+				}, {
+					id: 4,
+					name: '照明',
+					iconPath: './assets/zhaoming.png'
+				}]
+			}
+		},
+		beforeDestroy() {
+			window.removeEventListener('resize', this.initResize);
+		},
+		components: {
+			noticeBoard,
+			organization,
+			house,
+			device
+		},
+		mounted() {
+			if (!this.target.floorPlan) return;
+			let width = document.getElementById('fabricContainer').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();
+				}
+			})
+			window.addEventListener('resize', this.initResize);
+		},
+		methods: {
+			init() {
+				this.backgroundImageUrl = JSON.parse(this.target.floorPlan)[0].url;
+				if (this.target.floorPlanSize) {
+					this.floorPlanSize = JSON.parse(this.target.floorPlanSize);
+					this.createCanvas();
+				} else {
+					this.initSize();
+				}
+			},
+			initSize() {
+				let box = document.getElementById('fabricContainer');
+				if (!box) return;
+				let boxWidth = box.offsetWidth,
+					boxHeight = box.offsetHeight;
+				let imgObj = new Image();
+				imgObj.src = this.backgroundImageUrl;
+				imgObj.onload = () => {
+					let imgWidth = imgObj.width,
+						imgHeight = imgObj.height;
+					let scale = imgWidth / imgHeight;
+					this.floorPlanSize.width = boxWidth >= boxHeight ? boxHeight * scale : boxWidth;
+					this.floorPlanSize.height = boxWidth < boxHeight ? boxWidth / scale : boxHeight;
+					updateProjectItemTarget({
+						id: this.target.projectItemTargetId,
+						floorPlanSize: JSON.stringify(this.floorPlanSize)
+					})
+					this.createCanvas();
+				}
+			},
+			clickName(noticeBoardType) {
+				this.modelVisible = true;
+				this.noticeBoardType = noticeBoardType;
+			},
+			createCanvas() {
+				this.canvas = new fabric.Canvas('myCanvas', {
+					fireRightClick: true, // 启用右键，button的数字为3
+					stopContextMenu: true, // 禁止默认右键菜单
+					controlsAboveOverlay: true, // 超出clipPath后仍然展示控制条
+					preserveObjectStacking: true, // 当选择画布中的对象时，让对象不在顶层。
+					width: this.floorPlanSize.width, // 设置画布宽度
+					height: this.floorPlanSize.height, // 设置画布高度
+				});
+				document.getElementById('canvas-container').style.width = this.floorPlanSize.width + 'px';
+				document.getElementById('canvas-container').style.hight = this.floorPlanSize.height + 'px';
+				this.initBackgroundImage();
+				this.clickFunction();
+			},
+			initResize() {
+				if (!this.canvas) return;
+				let box = document.getElementById('fabricContainer');
+				if (!box) return;
+				let boxWidth = box.offsetWidth,
+					container = document.getElementById('myCanvas').offsetWidth;
+				let scale = boxWidth / container >= 1 ? 1 : boxWidth / container;
+				document.getElementById('canvas-container').style.transform = 'scale(' + scale + ')';
+			},
+			clickFunction() {
+				this.canvas.on('mouse:down', options => {
+					if (!options.target.detailType) return;
+					this.showDrap(options.target.detailType, options.target.detailData)
+				});
+			},
+			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;
+			},
+			/**
+			 * 背景图片
+			 * 
+			 * */
+			initBackgroundImage() {
+				fabric.Image.fromURL(this.backgroundImageUrl).then(img => {
+					// 获取画布的宽度和高度
+					const canvasWidth = this.canvas.getWidth();
+					const canvasHeight = this.canvas.getHeight();
+					// 计算图片的缩放比例
+					const scaleX = canvasWidth / img.width;
+					const scaleY = canvasHeight / img.height;
+					const scale = scaleX < scaleY ? scaleX : scaleY;
+					// 设置图片的缩放比例
+					img.scale(scale * 0.9);
+					img.set({
+						left: (canvasWidth - (img.width * scale * 0.9)) / 2,
+						top: (canvasHeight - (img.height * scale * 0.9)) / 2,
+						selectable: false
+					})
+					this.canvas.add(img);
+					this.houseList()
+				});
+			},
+			houseList() {
+				let postData = {
+					currPage: 1,
+					pageSize: 100,
+					projectItemTargetId: this.target.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.id;
+							nodes['data'] = node;
+							return nodes;
+						});
+						this.initFloor();
+						this.setFloor();
+					}
+				})
+			},
+			initFloor() {
+				for (let i = 0; i < this.roomList.length; i++) {
+					const box = new fabric.Polygon(this.roomList[i].position, {
+						fill: this.roomList[i].roomColor,
+						stroke: 'rgba(113, 179, 255, 1.0)',
+						strokeWidth: 1,
+						selectable: false,
+						roomId: this.roomList[i].id
+					});
+					this.canvas.add(box);
+				}
+				this.canvas.renderAll();
+			},
+			initRenderRoom(position, color, ) {
+
+			},
+			setFloor() { //设置房间
+				for (var i = 0; i < this.roomList.length; i++) {
+					let boundary = this.roomList[i].position;
+					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;
+						this.addText(this.roomList[i].name, y, x, 'roomDetail', house);
+					}
+					if (this.organizationObj[this.roomList[i].id]) {
+						let organization = this.organizationObj[this.roomList[i].id];
+						organization['title'] = this.roomList[i].name;
+
+						this.addOrganizatedName(organization.name, y, x, 'organizationDetail', organization);
+					}
+				}
+			},
+			addText(name, top, left, detailType, detailData) {
+				// 创建文字对象
+				const text = new fabric.Text(name, {
+					fontSize: 16,
+					fill: 'white',
+					detailType: detailType,
+					detailData: detailData,
+					selectable: false
+				});
+				text.set({
+					top: (top - (text.height / 2) + 10),
+					left: (left - (text.width / 2))
+				})
+				this.canvas.add(text);
+			},
+			addOrganizatedName(name, top, left, detailType, detailData) {
+				// 创建文字对象
+				const text = new fabric.Text(name, {
+					top: 5,
+					left: 10,
+					fontSize: 14,
+					fill: 'white',
+					selectable: false
+				});
+				// 添加矩形
+				const rect = new fabric.Rect({
+					width: text.width + 20, // 矩形的宽度
+					height: text.height + 10, // 矩形的高度
+					fill: 'rgba(15, 70, 255, 0.6)', // 矩形的填充颜色
+					stroke: 'rgba(15, 70, 255, 0.8)', // 矩形的边框颜色
+					strokeWidth: 2, // 矩形的边框宽度
+				});
+				fabric.Image.fromURL('./assets/arrow.png').then(img => {
+					img.scale(0.1);
+					img.set({
+						top: text.height + 15,
+						left: (text.width + 20 - (img.width * 0.1)) / 2
+					})
+					const group = new fabric.Group([rect, text, img], {
+						detailType: detailType,
+						detailData: detailData,
+						selectable: false
+					});
+					group.set({
+						top: (top - group.height),
+						left: (left - (group.width / 2))
+					})
+					// 将文字添加到画布
+					this.canvas.add(group);
+				});
+			},
+		},
+	}
+</script>
+
+<style lang="scss">
+	.operation-plan {
+		width: 100%;
+		height: 100%;
+		background: $--box-background;
+		position: relative;
+
+		.fabric-container {
+			width: 100%;
+			height: 100%;
+			overflow: hidden;
+			position: relative;
+		}
+
+		#canvas-container {
+			transform-origin: 0% 0%;
+			margin: auto;
+		}
+
+		.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);
+		}
+
+		.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-content {
+				padding-bottom: 5px;
+			}
+
+			.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;
+				}
+			}
+
+			.user-item-image {
+				width: 100%;
+				height: 150px;
+				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;
+					}
+				}
+			}
+
+			.user-item-image:hover {
+				.video-mask {
+					opacity: 1;
+				}
+			}
+		}
+
+	}
+</style>

virgo.wzfrontend/console/src/components/work/space/function/floorPlanSet.vue

@@ -0,0 +1,473 @@
+<template>
+	<div id="fabricContainer" class="fabric-container">
+		<div id="canvas-container">
+			<canvas id="myCanvas"></canvas>
+		</div>
+		<div id="distribution-drap" class="distribution-drap" @mousedown="dragStart" @touchstart="dragStart">
+			<div class="distribution-drap-title">
+				<div id="title" class="distribution-drap-title-content">房间设置</div>
+			</div>
+			<div class="distribution-drap-content">
+				<div class="space-function-item">
+					<div class="space-function-label">空间名称</div>
+					<div class="space-function-value">
+						<el-input v-model="room.roomNumber" disabled></el-input>
+					</div>
+				</div>
+				<div class="space-function-item">
+					<div class="space-function-label">房间名称</div>
+					<div class="space-function-value">
+						<el-button size="small" type="primary" @click="setRoom" v-if="!isSet">设置空间</el-button>
+						<el-button size="small" type="primary" @click="renderRoom" v-else>渲染空间</el-button>
+					</div>
+				</div>
+				<div class="space-function-item">
+					<div class="space-function-label">房间颜色</div>
+					<div class="space-function-value">
+						<el-color-picker show-alpha v-model="form.color" size="mini" @change="changeColor">
+						</el-color-picker>
+					</div>
+				</div>
+				<div class="space-function-button">
+					<el-button size="medium" type="primary" @click="submit">保 存</el-button>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	import {
+		getHouseDetailById,
+		updateHouse,
+		updateProjectItemTarget
+	} from '@/httpApi/space'
+	import * as fabric from 'fabric'
+	export default {
+		props: {
+			roomId: {
+				type: Number,
+				default: 0
+			},
+			target: {
+				type: Object,
+				default: () => {
+					return {}
+				}
+			}
+		},
+		data() {
+			return {
+				canvas: null,
+				backgroundImageUrl: '',
+				isSet: false,
+				position: [],
+				room: {},
+				form: {
+					color: 'rgba(52, 114, 211, 0.6)'
+				},
+				floorPlanSize: {
+					width: '',
+					height: ''
+				}
+			}
+		},
+		beforeDestroy() {
+			window.removeEventListener('resize', this.initResize);
+			document.removeEventListener('keydown', this.removeItem);
+		},
+		mounted() {
+			document.getElementById('distribution-drap').style.left = '20px';
+			document.getElementById('distribution-drap').style.top = '20px';
+			this.init();
+			window.addEventListener('resize', this.initResize);
+			document.addEventListener('keydown', this.removeItem);
+		},
+		methods: {
+			init() {
+				this.backgroundImageUrl = JSON.parse(this.target.floorPlan)[0].url;
+				getHouseDetailById(this.roomId).then(res => {
+					if (res.state) {
+						this.room = res.data;
+						if (res.data.dataValue) {
+							this.roomData = JSON.parse(res.data.dataValue);
+							this.form.color = this.roomData.roomColor;
+						} else {
+							this.roomData = {};
+							this.form.color = 'rgba(52, 114, 211, 0.6)';
+						}
+						if (this.target.floorPlanSize) {
+							this.floorPlanSize = JSON.parse(this.target.floorPlanSize);
+							this.createCanvas();
+						} else {
+							this.initSize();
+						}
+					}
+				});
+			},
+			initSize() {
+				let box = document.getElementById('fabricContainer');
+				if (!box) return;
+				let boxWidth = box.offsetWidth,
+					boxHeight = box.offsetHeight;
+				let imgObj = new Image();
+				imgObj.src = this.backgroundImageUrl;
+				imgObj.onload = () => {
+					let imgWidth = imgObj.width,
+						imgHeight = imgObj.height;
+					let scale = imgWidth / imgHeight;
+					this.floorPlanSize.width = boxWidth >= boxHeight ? boxHeight * scale : boxWidth;
+					this.floorPlanSize.height = boxWidth < boxHeight ? boxWidth / scale : boxHeight;
+					updateProjectItemTarget({
+						id: this.target.projectItemTargetId,
+						floorPlanSize: JSON.stringify(this.floorPlanSize)
+					})
+					this.createCanvas();
+				}
+			},
+			createCanvas() {
+				this.canvas = new fabric.Canvas('myCanvas', {
+					fireRightClick: true, // 启用右键，button的数字为3
+					stopContextMenu: true, // 禁止默认右键菜单
+					controlsAboveOverlay: true, // 超出clipPath后仍然展示控制条
+					preserveObjectStacking: true, // 当选择画布中的对象时，让对象不在顶层。
+					width: this.floorPlanSize.width, // 设置画布宽度
+					height: this.floorPlanSize.height, // 设置画布高度
+				});
+				document.getElementById('canvas-container').style.width = this.floorPlanSize.width + 'px';
+				document.getElementById('canvas-container').style.hight = this.floorPlanSize.height + 'px';
+				this.initBackgroundImage();
+				this.clickFunction();
+			},
+			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;
+				}
+			},
+			removeItem(event) {
+				if (!this.canvas) return;
+				if (event.keyCode === 8) {
+					const activeObject = this.canvas.getActiveObject();
+					if (activeObject) {
+						this.canvas.remove(activeObject);
+						this.canvas.requestRenderAll();
+					}
+				}
+			},
+			submit() {
+				if (this.position.length === 0) {
+					let setCircleList = this.canvas.getObjects().filter(node => node.canvasType === 'setIcon');
+					if (setCircleList.length === 0) this.$message.warning('请设置空间位置');
+					this.renderRoom();
+				}
+				this.submitRoom();
+			},
+			submitRoom() {
+				this.roomData['roomColor'] = this.form.color;
+				this.roomData['position'] = this.position;
+				updateHouse({
+					id: this.room.id,
+					dataValue: JSON.stringify(this.roomData)
+				}).then(res => {
+					if (res.state) {
+						this.$message.success('保存成功');
+					}
+				})
+			},
+			initResize() {
+				if (!this.canvas) return;
+				let box = document.getElementById('fabricContainer');
+				if (!box) return;
+				let boxWidth = box.offsetWidth,
+					container = document.getElementById('myCanvas').offsetWidth;
+				let scale = boxWidth / container >= 1 ? 1 : boxWidth / container;
+				document.getElementById('canvas-container').style.transform = 'scale(' + scale + ')';
+			},
+			clickFunction() {
+				this.canvas.on('mouse:down', options => {
+					if (!this.isSet) return;
+					if (!options.target) return this.$message.warning('该点击图形里面的位置');
+					if (options.target.canvasType === 'setIcon') return;
+					// 获取点击位置的坐标
+					const pointer = this.canvas.getPointer(options.e);
+					// 在点击位置添加一个圆形标记
+					const circle = new fabric.Circle({
+						canvasType: 'setIcon',
+						radius: 5,
+						fill: 'red',
+						left: pointer.x,
+						top: pointer.y,
+						lockScalingX: true, // 禁止水平缩放
+						lockScalingY: true, // 禁止垂直缩放
+					});
+					this.canvas.add(circle);
+					this.canvas.renderAll();
+				});
+			},
+			/**
+			 * 背景图片
+			 * 
+			 * */
+			initBackgroundImage() {
+				fabric.Image.fromURL(this.backgroundImageUrl).then(img => {
+					// 获取画布的宽度和高度
+					const canvasWidth = this.canvas.getWidth();
+					const canvasHeight = this.canvas.getHeight();
+					// 计算图片的缩放比例
+					const scaleX = canvasWidth / img.width;
+					const scaleY = canvasHeight / img.height;
+					const scale = scaleX < scaleY ? scaleX : scaleY;
+					// 设置图片的缩放比例
+					img.scale(scale * 0.9);
+					img.set({
+						left: (canvasWidth - (img.width * scale * 0.9)) / 2,
+						top: (canvasHeight - (img.height * scale * 0.9)) / 2,
+						selectable: false
+					})
+					this.canvas.add(img);
+					if (this.roomData.position) {
+						this.position = this.roomData.position;
+						this.form.color = this.roomData.roomColor;
+						this.initRenderRoom();
+					}
+				});
+			},
+			addOrganizatedName(name) {
+				// 创建文字对象
+				const text = new fabric.Text(name, {
+					top: 5,
+					left: 10,
+					fontSize: 16,
+					fill: 'white',
+				});
+				// 添加矩形
+				const rect = new fabric.Rect({
+					width: text.width + 20, // 矩形的宽度
+					height: text.height + 10, // 矩形的高度
+					fill: 'rgba(15, 70, 255, 0.6)', // 矩形的填充颜色
+					stroke: 'rgba(15, 70, 255, 0.8)', // 矩形的边框颜色
+					strokeWidth: 2, // 矩形的边框宽度
+				});
+				fabric.Image.fromURL('./assets/arrow.png').then(img => {
+					img.scale(0.3);
+					img.set({
+						top: text.height + 20,
+						left: (text.width + 20 - (img.width * 0.3)) / 2
+					})
+					const group = new fabric.Group([rect, text, img]);
+					// 将文字添加到画布
+					this.canvas.add(group);
+				});
+			},
+			addText(name) {
+				// 创建文字对象
+				const text = new fabric.Text(name, {
+					top: 5,
+					left: 10,
+					fontSize: 16,
+					fill: 'white',
+				});
+				this.canvas.add(text);
+			},
+			setRoom() {
+				if (this.position.length > 0) {
+					let room = this.canvas.getObjects().filter(node => node.roomId);
+					this.canvas.remove(...room)
+					for (let i = 0; i < this.position.length; i++) {
+						// 在点击位置添加一个圆形标记
+						const circle = new fabric.Circle({
+							canvasType: 'setIcon',
+							radius: 5,
+							fill: 'red',
+							left: this.position[i].x - 5,
+							top: this.position[i].y - 5,
+							lockScalingX: true, // 禁止水平缩放
+							lockScalingY: true, // 禁止垂直缩放
+						});
+						this.canvas.add(circle);
+						this.canvas.renderAll();
+					}
+					this.isSet = true;
+				} else {
+					this.$confirm('请在平面图上选择点位', () => {
+						this.isSet = true
+					});
+				}
+			},
+			changeColor(color) {
+				let room = this.canvas.getObjects().filter(node => node.roomId === this.roomId);
+				if (room.length > 0) {
+					room[0].set({
+						fill: this.form.color
+					})
+					this.canvas.renderAll();
+				}
+			},
+			initRenderRoom() {
+				const box = new fabric.Polygon(this.position, {
+					fill: this.form.color,
+					stroke: 'rgba(113, 179, 255, 1.0)',
+					strokeWidth: 1,
+					selectable: false,
+					roomId: this.roomId
+				});
+				this.canvas.add(box);
+				this.canvas.renderAll();
+			},
+			renderRoom() {
+				let setCircleList = this.canvas.getObjects().filter(node => node.canvasType === 'setIcon');
+				let position = this.sortCoordinatesClockwise(setCircleList.map(node => {
+					return {
+						x: node.left + (node.width / 2),
+						y: node.top + (node.height / 2)
+					}
+				}));
+				const box = new fabric.Polygon(position, {
+					fill: this.form.color,
+					stroke: 'rgba(113, 179, 255, 1.0)',
+					strokeWidth: 1,
+					selectable: false,
+					roomId: this.roomId
+				});
+				this.position = position;
+				this.isSet = false;
+				this.canvas.remove(...setCircleList)
+				this.canvas.add(box);
+				this.canvas.renderAll();
+			},
+			sortCoordinatesClockwise(coordinates) {
+				// 计算中心点
+				const center = coordinates.reduce((acc, coord) => {
+					return {
+						x: acc.x + coord.x,
+						y: acc.y + coord.y
+					};
+				}, {
+					x: 0,
+					y: 0
+				});
+
+				center.x /= coordinates.length;
+				center.y /= coordinates.length;
+
+				// 计算每个点相对于中心点的角度
+				const getAngle = (coord) => {
+					return Math.atan2(coord.y - center.y, coord.x - center.x);
+				};
+
+				// 按角度排序
+				coordinates.sort((a, b) => {
+					return getAngle(a) - getAngle(b);
+				});
+
+				return coordinates;
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.fabric-container {
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+		position: relative;
+
+		.distribution-drap {
+			position: absolute;
+			background: $--color-background;
+			width: 260px;
+			border-radius: 8px;
+			z-index: 998;
+			left: 20px;
+			top: 20px;
+
+			.distribution-drap-content {
+				padding: 15px;
+			}
+
+			.space-function-item {
+				display: flex;
+				align-items: center;
+				height: 48px;
+
+				.space-function-label {
+					padding-right: 10px;
+				}
+
+				.space-function-value {
+					width: 0;
+					flex: 1;
+					text-align: right;
+
+					.el-input.is-disabled .el-input__inner {
+						background: #475062;
+						border: none;
+						color: $--color-common;
+						opacity: 1;
+						border-radius: 6px;
+					}
+
+					.el-color-picker__trigger {
+						width: 22px;
+						height: 22px;
+						padding: 2px;
+						border-color: $--input-border
+					}
+
+					.el-color-picker {
+						height: 22px;
+					}
+				}
+			}
+
+			.space-function-button {
+				padding-top: 10px;
+
+				.el-button {
+					width: 100%;
+				}
+			}
+
+			.distribution-drap-title {
+				height: 40px;
+				display: flex;
+				align-items: center;
+				border-bottom: 1px solid $--color-border;
+
+				.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;
+				}
+			}
+		}
+
+		#canvas-container {
+			transform-origin: 0% 0%;
+			margin: auto;
+		}
+	}
+</style>

virgo.wzfrontend/console/src/components/work/space/function/modelSet.vue

@@ -0,0 +1,340 @@
+<template>
+	<div class="model-room-set">
+		<div :id="'previewBim'+_uid" class="previewBim"></div>
+		<div id="distribution-drap" class="distribution-drap" @mousedown="dragStart" @touchstart="dragStart">
+			<div class="distribution-drap-title">
+				<div id="title" class="distribution-drap-title-content">房间设置</div>
+			</div>
+			<div class="distribution-drap-content">
+				<div class="space-function-item">
+					<div class="space-function-label">空间名称</div>
+					<div class="space-function-value">
+						<el-input v-model="room.roomNumber" disabled></el-input>
+					</div>
+				</div>
+				<div class="space-function-item">
+					<div class="space-function-label">房间名称</div>
+					<div class="space-function-value">
+						<el-button size="small" type="primary" @click="setSpace">设置空间</el-button>
+					</div>
+				</div>
+				<div class="space-function-item">
+					<div class="space-function-label">房间颜色</div>
+					<div class="space-function-value">
+						<el-color-picker show-alpha v-model="form.color" size="mini" @change="changeColor">
+						</el-color-picker>
+					</div>
+				</div>
+				<div class="space-function-item">
+					<div class="space-function-label">可见距离</div>
+					<div class="space-function-value">
+						<el-input v-model="form.distance"></el-input>
+					</div>
+				</div>
+				<div class="space-function-button">
+					<el-button size="medium" type="primary" @click="submit">保 存</el-button>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	import {
+		getHouseDetailById,
+		updateHouse
+	} from '@/httpApi/space'
+	import bimView from '@/uitls/controls'
+	export default {
+		props: {
+			viewToken: {
+				type: String,
+				default: ''
+			},
+			bimIntegrateId: {
+				type: String,
+				default: ''
+			},
+			roomId: {
+				type: Number,
+				default: 0
+			}
+		},
+		data() {
+			return {
+				bimViewer: null,
+				renderSuccess: false,
+				room: {},
+				roomData: {},
+				form: {
+					color: 'rgba(52, 114, 211, 0.6)',
+					distance: ''
+				},
+				positionData: [],
+				isSet: false
+			}
+		},
+		beforeDestroy() {
+			if (this.bimViewer && this.renderSuccess) this.bimViewer.destroy();
+		},
+		mounted() {
+			this.init();
+			document.getElementById('distribution-drap').style.left = '30px';
+			document.getElementById('distribution-drap').style.top = '75px';
+		},
+		methods: {
+			init(type, id) {
+				let roomId = type == 'update' ? id : this.roomId;
+				getHouseDetailById(roomId).then(res => {
+					if (res.state) {
+						this.room = res.data;
+						if (res.data.dataValue) {
+							this.roomData = JSON.parse(res.data.dataValue);
+							this.form.color = this.roomData.roomColor;
+							this.form.distance = this.roomData.distance;
+						} else {
+							this.roomData = {};
+							this.form.color = 'rgba(52, 114, 211, 0.6)';
+							this.form.distance = '';
+						}
+						if (type == 'update') {
+							this.initRoomBIM();
+						} else {
+							this.createBIM();
+						}
+					}
+				});
+			},
+			createBIM() {
+				if (this.bimViewer) return this.bimViewer.changeView({
+					newToken: this.viewToken,
+					bimIntegrateId: this.bimIntegrateId
+				});
+				this.bimViewer = new bimView({
+					dom: document.getElementById('previewBim' + this._uid),
+					viewToken: this.viewToken,
+					bimIntegrateId: this.bimIntegrateId,
+					renderSuccess: this.bimRenderSuccess,
+					roomSaved: data => {
+						this.roomData = data;
+						this.positionData = [];
+					},
+					click: this.clickBimViewer
+				})
+			},
+			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;
+				}
+			},
+			clickBimViewer(data) {
+				if (!this.isSet) return;
+				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.isSet = false;
+					this.bimViewer.insertRooms({
+						id: this.room.id,
+						boundary: {
+							"outer": this.positionData
+						},
+						height: 500,
+						roomColor: this.returnRGBA(this.form.color)
+					})
+					this.bimViewer.clear3DMaker();
+					this.bimViewer.editRoom({
+						roomId: this.room.id
+					})
+				}
+			},
+			bimRenderSuccess() {
+				this.renderSuccess = true;
+				this.initRoomBIM();
+				if (this.bimIntegrateId === '3102248339366592') {
+					this.bimViewer.hideComponentsByObjectData([{
+						categoryId: "-2000038",
+						levelName: "标高 1"
+					}])
+					this.bimViewer.overrideComponentsColorByObjectData([{
+						family: "楼板",
+						levelName: "标高 1"
+					}], "#cecece")
+					this.bimViewer.overrideComponentsColorByObjectData([{
+						family: "基本墙",
+						levelName: "标高 1"
+					}], "#afa6ab")
+				}
+			},
+			setSpace() {
+				if (this.roomData.roomId) {
+					this.bimViewer.editRoom({
+						roomId: this.roomData.roomId
+					});
+					return;
+				}
+				if (this.positionData.length >= 3) return this.bimViewer.editRoom({
+					roomId: this.room.id
+				})
+				this.$confirm('请在模型上选择空间的3个点', () => {
+					this.isSet = true
+				});
+			},
+			initRoomBIM() {
+				if (!this.renderSuccess) return;
+				this.bimViewer.clearAllRooms();
+				this.bimViewer.exitRoom();
+				if (!this.roomData.boundary) return;
+				this.bimViewer.insertRooms({
+					id: this.roomData.roomId,
+					boundary: {
+						"outer": this.roomData.boundary
+					},
+					height: this.roomData.height,
+					roomColor: this.returnRGBA(this.roomData.roomColor)
+				});
+			},
+			changeColor(color) {
+				if (!this.renderSuccess) return;
+				if (!this.roomData.boundary) return;
+				this.bimViewer.colorRoomById({
+					id: this.roomData.roomId,
+					roomColor: this.returnRGBA(this.form.color)
+				});
+			},
+			returnRGBA(color) {
+				let [r, g, b, a] = color.match(/\d+(\.\d+)?/g).map(Number);
+				return {
+					r,
+					g,
+					b,
+					a
+				}
+			},
+			submit() {
+				if (!this.roomData.roomId) return this.$message.warning('请设置空间位置');
+				this.roomData['roomColor'] = this.form.color;
+				this.roomData['distance'] = this.form.distance;
+				updateHouse({
+					id: this.room.id,
+					dataValue: JSON.stringify(this.roomData)
+				}).then(res => {
+					if (res.state) {
+						this.$message.success('保存成功');
+					}
+				})
+			},
+		},
+		watch: {
+			viewToken() {
+				this.init();
+			}
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	.model-room-set {
+		width: 100%;
+		height: 100%;
+		position: relative;
+
+		.previewBim {
+			width: 100%;
+			height: 100%;
+		}
+
+		.distribution-drap {
+			position: absolute;
+			background: $--color-background;
+			width: 260px;
+			border-radius: 8px;
+			z-index: 998;
+			left: 30px;
+			top: 75px;
+
+			.distribution-drap-content {
+				padding: 15px;
+			}
+
+			.space-function-item {
+				display: flex;
+				align-items: center;
+				height: 48px;
+
+				.space-function-label {
+					padding-right: 10px;
+				}
+
+				.space-function-value {
+					width: 0;
+					flex: 1;
+					text-align: right;
+
+					.el-input.is-disabled .el-input__inner {
+						background: #475062;
+						border: none;
+						color: $--color-common;
+						opacity: 1;
+						border-radius: 6px;
+					}
+
+					.el-color-picker__trigger {
+						width: 22px;
+						height: 22px;
+						padding: 2px;
+						border-color: $--input-border
+					}
+
+					.el-color-picker {
+						height: 22px;
+					}
+				}
+			}
+
+			.space-function-button {
+				padding-top: 10px;
+
+				.el-button {
+					width: 100%;
+				}
+			}
+
+			.distribution-drap-title {
+				height: 40px;
+				display: flex;
+				align-items: center;
+				border-bottom: 1px solid $--color-border;
+
+				.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;
+				}
+			}
+		}
+	}
+</style>

virgo.wzfrontend/console/src/components/work/space/set/projectItemTargetForm.vue

@@ -1,75 +1,96 @@
-<template>
-	<div class="hui-flex hui-dialog">
-		<div class="hui-flex-box hui-dialog-content">
-			<el-form ref="form" :model="form" label-position="top">
-				<el-form-item label="楼层名称">
-					<el-input type="text" v-model="form.name" placeholder="请输入楼层名称"></el-input>
-				</el-form-item>
-				<el-form-item label="房源数量">
-					<el-input type="number" v-model="form.roomNumber" placeholder="请输入房源数量"></el-input>
-				</el-form-item>
-				<el-form-item label="产权证书/不动产权证号">
-					<el-input type="text" v-model="form.propertyCertificateNumber" placeholder="请输入产权证书/不动产权证号">
-					</el-input>
-				</el-form-item>
-				<el-form-item label="排序">
-					<el-input type="number" v-model="form.sequence" placeholder="请输入排序"></el-input>
-				</el-form-item>
-			</el-form>
-		</div>
-		<div class="hui-dialog-submit">
-			<el-button size="medium" @click="$emit('callback')">取 消</el-button>
-			<el-button size="medium" type="primary" @click="submit" :loading="loading">保 存</el-button>
-		</div>
-	</div>
-</template>
-
-<script>
-	import {
-		insertProjectItemTarget,
-		getProjectItemTargetDetailById,
-		updateProjectItemTarget
-	} from '@/httpApi/space'
-	export default {
-		props: ['isUpdate', 'projectItemId', 'detailId'],
-		data() {
-			return {
-				form: {
-					name: '',
-					sequence: '',
-					roomNumber: '',
-					propertyCertificateNumber: ''
-				},
-				loading: false
-			}
-		},
-		mounted() {
-			this.form['projectId'] = this.$store.getters.project.id;
-			this.form['projectItemId'] = this.projectItemId;
-			if (this.isUpdate) {
-				getProjectItemTargetDetailById(this.detailId).then(res => {
-					if (res.state) this.form = res.data;
-				})
-			}
-		},
-		methods: {
-			submit() {
-				this.loading = true;
-				if (this.isUpdate) {
-					updateProjectItemTarget(this.form).then(this.successFunc);
-				} else {
-					insertProjectItemTarget(this.form).then(this.successFunc);
-				}
-			},
-			successFunc(res) {
-				this.loading = false;
-				if (res.state) {
-					this.$message.success('操作成功');
-					this.$emit('callback', 'init');
-				}
-			}
-		}
-	}
-</script>
-
+<template>
+	<div class="hui-flex hui-dialog">
+		<div class="hui-flex-box hui-dialog-content">
+			<el-form ref="form" :model="form" label-position="top">
+				<el-form-item label="楼层名称" prop="name" :rules="[{required: true, message: '请输入楼层名称'}]">
+					<el-input type="text" v-model="form.name" placeholder="请输入楼层名称"></el-input>
+				</el-form-item>
+				<el-form-item label="楼层类型">
+					<el-select v-model="form.floorPlanType" placeholder="请选择类型">
+						<el-option :label="item.name" :value="item.id"
+							v-for="(item,index) in $field.field.floorPlanType" :key="item.id">
+						</el-option>
+					</el-select>
+				</el-form-item>
+				<el-form-item label="房源数量">
+					<el-input type="number" v-model="form.roomNumber" placeholder="请输入房源数量"></el-input>
+				</el-form-item>
+				<el-form-item label="产权证书/不动产权证号">
+					<el-input type="text" v-model="form.propertyCertificateNumber" placeholder="请输入产权证书/不动产权证号">
+					</el-input>
+				</el-form-item>
+				<el-form-item label="排序">
+					<el-input type="number" v-model="form.sequence" placeholder="请输入排序"></el-input>
+				</el-form-item>
+				<el-form-item label="平面户型图" class="hui-textarea" v-if="form.floorPlanType === 2">
+					<upload ref="upload" :list="responsibility" type="insert" :maxLen="1" text="平面户型图"></upload>
+				</el-form-item>
+			</el-form>
+		</div>
+		<div class="hui-dialog-submit">
+			<el-button size="medium" @click="$emit('callback')">取 消</el-button>
+			<el-button size="medium" type="primary" @click="submit" :loading="loading">保 存</el-button>
+		</div>
+	</div>
+</template>
+
+<script>
+	import {
+		insertProjectItemTarget,
+		getProjectItemTargetDetailById,
+		updateProjectItemTarget
+	} from '@/httpApi/space'
+	import upload from '@/components/common/upload'
+	export default {
+		props: ['isUpdate', 'projectItemId', 'detailId'],
+		data() {
+			return {
+				form: {
+					name: '',
+					sequence: '',
+					roomNumber: '',
+					propertyCertificateNumber: '',
+					floorPlanType: 1
+				},
+				loading: false,
+				responsibility: []
+			}
+		},
+		mounted() {
+			this.form['projectId'] = this.$store.getters.project.id;
+			this.form['projectItemId'] = this.projectItemId;
+			if (this.isUpdate) {
+				getProjectItemTargetDetailById(this.detailId).then(res => {
+					if (res.state) {
+						this.form = res.data;
+						if (this.form.floorPlan) this.responsibility = JSON.parse(this.form.floorPlan);
+					}
+				})
+			}
+		},
+		methods: {
+			submit() {
+				this.loading = true;
+				let postData = JSON.parse(JSON.stringify(this.form));
+				postData['floorPlan'] = JSON.stringify(this.$refs.upload.fileList);
+				if (this.isUpdate) {
+					updateProjectItemTarget(postData).then(this.successFunc);
+				} else {
+					insertProjectItemTarget(postData).then(this.successFunc);
+				}
+			},
+			successFunc(res) {
+				this.loading = false;
+				if (res.state) {
+					this.$message.success('操作成功');
+					this.$emit('callback', 'init');
+				}
+			}
+		},
+		components: {
+			upload
+		}
+	}
+</script>
+
 <style lang="scss"></style>

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

@@ -353,7 +353,16 @@ const organizationTagList = [{
 	icon: 'iconfont huifont-yuanshigongzuozhan',
 	size: '16'
 }]
-
+const floorPlanType = [{
+	id: 1,
+	name: 'BIM模型'
+}, {
+	id: 2,
+	name: '平面图'
+}, {
+	id: 3,
+	name: '系统列表'
+}]
 const findItem = (type, id) => {
 	return eval(type).find(node => node.id == id) || {
 		id: 0,
@@ -390,7 +399,8 @@ export default {
 		sealType,
 		contractType,
 		remindType,
-		organizationTagList
+		organizationTagList,
+		floorPlanType
 	},
 	findTypeName(type, id) {
 		return findItem(type, id).name;

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

@@ -308,8 +308,6 @@ export function findParentIds(dataSource, nodeId) {
  */
 export function findParentLabel(dataSource, nodeId) {
 	const parentIds = []; // 用于存储所有父节点ID的数组
-	console.log(dataSource);
-	console.log(nodeId);
 	// 定义一个递归函数，用于遍历整棵树并查找子节点的所有父节点
 	function traverse(node, nodeId) {
 		if (node.label === nodeId) { // 如果当前节点的ID等于子节点的ID，则表示已经找到了子节点，可以开始向上查找父节点

virgo.wzfrontend/console/src/views/common/ui.vue

@@ -201,7 +201,9 @@
 				this.position = position;
 				this.isSet = false;
 				this.canvas.remove(...setCircleList)
-				this.canvas.add(star);
+				this.canvas.add(star);
+				this.addOrganizatedName('博仕瀚道(上海)信息科技有限公司');
+				this.addText('1102');
 				this.canvas.renderAll();
 			}
 		}

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

@@ -1,14 +1,16 @@
 <template>
 	<div class="yui-tree-box">
-		<project-item-tree @treeclick="treeclick" type="isInit" iconfontClass="el-icon-place"></project-item-tree>
-		<div class="hui-tree-content" v-if="target.bimIntegrateId">
+		<project-item-tree @treeclick="treeclick" type="isInit" iconfontClass="el-icon-place" :isCancel="false">
+		</project-item-tree>
+		<div class="hui-tree-content" v-if="target.bimIntegrateId && target.id">
 			<operation-models ref="operationModels" v-if="target.bimIntegrateId === '3102248339366592'"
 				:target="target">
 			</operation-models>
 			<operation-model v-else></operation-model>
 		</div>
-		<div class="hui-tree-content" v-else>
-			<operation-room></operation-room>
+		<div class="hui-tree-content" v-else-if="target.id">
+			<operation-plan v-if="target.floorPlanType === 2" :target="target"></operation-plan>
+			<operation-room v-else></operation-room>
 		</div>
 	</div>
 </template>
@@ -17,6 +19,7 @@
 	import operationModel from '@/components/work/bim/operationModel'
 	import operationModels from '@/components/work/bim/operationModels'
 	import operationRoom from '@/components/work/bim/operationRoom'
+	import operationPlan from '@/components/work/bim/operationPlan'
 	import projectItemTree from '@/components/common/projectItemTree'
 	export default {
 		data() {
@@ -28,6 +31,7 @@
 		methods: {
 			treeclick(e, type) {
 				this.target = e;
+				console.log(this.target);
 				if (this.$refs.operationModels && type != 'isInit') this.$refs.operationModels.changeTarget(e);
 			}
 		},
@@ -35,7 +39,8 @@
 			operationModel,
 			operationModels,
 			projectItemTree,
-			operationRoom
+			operationRoom,
+			operationPlan
 		}
 	}
 </script>

virgo.wzfrontend/console/src/views/work/space/function.vue

@@ -1,389 +1,168 @@
-<template>
-	<div class="hui-flex space-function">
-		<div class="hui-flex-box 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="activeNames">
-						<el-collapse-item v-for="item in treeData" :key="item.id" :name="item.id">
-							<template slot="title">
-								<i class="iconfont huifont-moxingguanli"></i>
-								<span class="el-collapse-name">{{item.name}}</span>
-							</template>
-							<div>
-								<el-tree class="node-tree" v-if="item.id === -1" :data="item.children"
-									:props="defaultProps" @node-click="selectTree">
-								</el-tree>
-								<div class="space-function-form" v-else>
-									<div class="space-function-item">
-										<div class="space-function-label">空间名称</div>
-										<div class="space-function-value">
-											<el-input v-model="room.roomNumber" disabled></el-input>
-										</div>
-									</div>
-									<div class="space-function-item">
-										<div class="space-function-label">空间名称</div>
-										<div class="space-function-value">
-											<el-button size="small" type="primary" @click="setSpace">设置空间</el-button>
-										</div>
-									</div>
-									<div class="space-function-item">
-										<div class="space-function-label">空间颜色</div>
-										<div class="space-function-value">
-											<el-color-picker show-alpha v-model="form.color" size="mini"
-												@change="changeColor">
-											</el-color-picker>
-										</div>
-									</div>
-									<div class="space-function-item">
-										<div class="space-function-label">可见距离</div>
-										<div class="space-function-value">
-											<el-input v-model="form.distance"></el-input>
-										</div>
-									</div>
-									<div class="space-function-button">
-										<el-button size="medium" type="primary" @click="submit">保 存</el-button>
-									</div>
-								</div>
-							</div>
-						</el-collapse-item>
-					</el-collapse>
-				</div>
-			</div>
-			<div class="hui-tree-content">
-				<div class="hui-flex hui-content box-background">
-					<div class="hui-content-title">
-						<div class="hui-title-item active">功能分区</div>
-					</div>
-					<div class="hui-flex-box hui-flex">
-						<div class="space-null" v-if="nullType === 1">
-							<img :src="nullImage" alt="" />
-							<div class="space-null-text">您还未进行空间设置，请先设置空间！</div>
-						</div>
-						<div class="space-null" v-if="nullType === 2">
-							<img :src="nullImage" alt="" />
-							<div class="space-null-text">该单位工程暂未集成模型</div>
-						</div>
-						<div class="space-null" v-if="nullType === 3">
-							<img :src="nullImage" alt="" />
-							<div class="space-null-text">模型集成中，请稍后再试</div>
-						</div>
-						<div :id="'previewBim'+_uid" class="previewBim" v-show="nullType === 4"></div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script>
-	import {
-		getProjectRoomTreeList,
-		getHouseDetailById,
-		updateHouse
-	} from '@/httpApi/space'
-	import {
-		getIntegrateViewToken
-	} from '@/httpApi/bim'
-	import {
-		roomList
-	} from '@/uitls';
-	import bimView from '@/uitls/controls'
-	export default {
-		data() {
-			return {
-				nullImage: require('../../../assets/img/work/common/dataNull.png'),
-				undefinedImage: require('../../../assets/img/work/common/dataUndefined.png'),
-				activeNames: [-1, -2],
-				treeData: [],
-				defaultProps: {
-					children: 'children',
-					label: 'optionName'
-				},
-				projectItem: {},
-				nullType: '',
-				room: {},
-				form: {
-					color: 'rgba(52, 114, 211, 0.6)',
-					distance: ''
-				},
-				bimViewer: null,
-				positionData: [],
-				isSet: false,
-				roomData: {},
-				renderSuccess: false
-			}
-		},
-		mounted() {
-			this.init();
-		},
-		beforeDestroy() {
-			if (this.bimViewer && this.renderSuccess) this.bimViewer.destroy();
-		},
-		methods: {
-			init() {
-				getProjectRoomTreeList(this.$store.getters.project.id).then(res => {
-					if (res.state) {
-						let list = roomList(res.data.projectItemList);
-						let item = list.filter(item => {
-							if (!item.projectItemTargetList) return false;
-							item.projectItemTargetList = item.projectItemTargetList.filter(target => {
-								if (!target.projectItemTargetRoomList) return false;
-								if (target.projectItemTargetRoomList.length === 0) return false;
-								return true;
-							})
-							if (item.projectItemTargetList.length === 0) return false;
-							return item.projectItemTargetList.length > 0
-						})
-						this.treeData = [{
-							id: -1,
-							name: '空间结构',
-							children: list
-						}, {
-							id: -2,
-							name: '空间设置'
-						}];
-						if (item.length === 0) this.nullType = 1;
-						this.selectRoom(item[0].projectItemTargetList[0].projectItemTargetRoomList[0]);
-					}
-				})
-			},
-			selectTree(item) {
-				if (!item.roomId) return;
-				this.selectRoom(item);
-			},
-			selectRoom(item) {
-				if (this.projectItem.id != item.projectItem.id) {
-					this.projectItem = item.projectItem;
-					if (!this.projectItem.bimIntegrateId) {
-						this.nullType = 2;
-					} else {
-						this.$nextTick(() => {
-							getIntegrateViewToken(this.projectItem.bimIntegrateId).then(this.successFunc);
-						})
-					}
-				}
-				getHouseDetailById(item.roomId).then(res => {
-					if (res.state) {
-						this.room = res.data;
-						if (res.data.dataValue) {
-							this.roomData = JSON.parse(res.data.dataValue);
-							this.form.color = this.roomData.roomColor;
-							this.form.distance = this.roomData.distance;
-						} else {
-							this.roomData = {};
-							this.form.color = 'rgba(52, 114, 211, 0.6)';
-							this.form.distance = '';
-						}
-						this.initRoomBIM();
-					}
-				});
-			},
-			setSpace() {
-				if (this.roomData.roomId) {
-					this.bimViewer.editRoom({
-						roomId: this.roomData.roomId
-					});
-					return;
-				}
-				if (this.positionData.length >= 3) return this.bimViewer.editRoom({
-					roomId: this.room.id
-				})
-				this.$confirm('请在模型上选择空间的3个点', () => {
-					this.isSet = true
-				});
-			},
-			initRoomBIM() {
-				if (!this.renderSuccess) return;
-				this.bimViewer.clearAllRooms();
-				this.bimViewer.exitRoom();
-				if (!this.roomData.boundary) return;
-				this.bimViewer.insertRooms({
-					id: this.roomData.roomId,
-					boundary: {
-						"outer": this.roomData.boundary
-					},
-					height: this.roomData.height,
-					roomColor: this.returnRGBA(this.roomData.roomColor)
-				});
-			},
-			changeColor(color) {
-				if (!this.renderSuccess) return;
-				if (!this.roomData.boundary) return;
-				this.bimViewer.colorRoomById({
-					id: this.roomData.roomId,
-					roomColor: this.returnRGBA(this.form.color)
-				});
-			},
-			returnRGBA(color) {
-				let [r, g, b, a] = color.match(/\d+(\.\d+)?/g).map(Number);
-				return {
-					r,
-					g,
-					b,
-					a
-				}
-			},
-			submit() {
-				if (!this.roomData.roomId) return this.$message.warning('请设置空间位置');
-				this.roomData['roomColor'] = this.form.color;
-				this.roomData['distance'] = this.form.distance;
-				updateHouse({
-					id: this.room.id,
-					dataValue: JSON.stringify(this.roomData)
-				}).then(res => {
-					if (res.state) {
-						this.$message.success('保存成功');
-					}
-				})
-			},
-			successFunc(res) {
-				if (res.state) {
-					if (!res.data) return this.nullType = 3;
-					this.nullType = 4;
-					if (this.bimViewer) return this.bimViewer.changeView({
-						newToken: res.data,
-						bimIntegrateId: this.projectItem.bimIntegrateId
-					});
-
-					this.bimViewer = new bimView({
-						dom: document.getElementById('previewBim' + this._uid),
-						viewToken: res.data,
-						bimIntegrateId: this.projectItem.bimIntegrateId,
-						renderSuccess: () => {
-							this.renderSuccess = true;
-							this.initRoomBIM();
-							if (this.projectItem.bimIntegrateId === '3102248339366592') {
-								this.bimViewer.hideComponentsByObjectData([{
-									categoryId: "-2000038",
-									levelName: "标高 1"
-								}])
-								this.bimViewer.overrideComponentsColorByObjectData([{
-									family: "楼板",
-									levelName: "标高 1"
-								}], "#cecece")
-								this.bimViewer.overrideComponentsColorByObjectData([{
-									family: "基本墙",
-									levelName: "标高 1"
-								}], "#afa6ab")
-							}
-						},
-						roomSaved: data => {
-							this.roomData = data;
-							this.positionData = [];
-						},
-						click: data => {
-							if (!this.isSet) return;
-							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.isSet = false;
-								this.bimViewer.insertRooms({
-									id: this.room.id,
-									boundary: {
-										"outer": this.positionData
-									},
-									height: 500,
-									roomColor: this.returnRGBA(this.form.color)
-								})
-								this.bimViewer.clear3DMaker();
-								this.bimViewer.editRoom({
-									roomId: this.room.id
-								})
-							}
-						}
-					})
-				} else {
-					this.nullType === 3
-				}
-			}
-		},
-	}
-</script>
-
-<style lang="scss">
-	.space-function {
-		.node-tree {
-			max-height: 300px;
-			overflow-y: auto;
-		}
-
-		.space-null {
-			width: 100%;
-			height: 100%;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			flex-direction: column;
-
-			img {
-				width: 420px;
-			}
-
-			.space-null-text {
-				padding: 30px 0 20px 0;
-			}
-		}
-
-		.previewBim {
-			width: 100%;
-			height: 100%;
-
-			.bf-house {
-				display: none !important;
-			}
-		}
-
-		.space-function-form {
-			padding: 20px;
-
-			.space-function-item {
-				display: flex;
-				align-items: center;
-				height: 48px;
-
-				.space-function-label {
-					padding-right: 10px;
-				}
-
-				.space-function-value {
-					width: 0;
-					flex: 1;
-					text-align: right;
-
-					.el-input.is-disabled .el-input__inner {
-						background: #475062;
-						border: none;
-						color: $--color-common;
-						opacity: 1;
-						border-radius: 6px;
-					}
-
-					.el-color-picker__trigger {
-						width: 22px;
-						height: 22px;
-						padding: 2px;
-						border-color: $--input-border
-					}
-
-					.el-color-picker {
-						height: 22px;
-					}
-				}
-			}
-
-			.space-function-button {
-				padding-top: 10px;
-
-				.el-button {
-					width: 100%;
-				}
-			}
-		}
-	}
+<template>
+	<div class="hui-flex space-function">
+		<div class="hui-flex-box yui-tree-box">
+			<project-item-tree @treeclick="treeclick" :hasRoom="true" type="isInit"
+				:isCancel="false"></project-item-tree>
+			<div class="hui-tree-content">
+				<div class="hui-flex hui-content box-background">
+					<div class="hui-content-title">
+						<div class="hui-title-item active">功能分区</div>
+					</div>
+					<div class="hui-flex-box">
+						<div class="space-null" v-if="!target.id">
+							<img :src="nullImage" alt="aa.png" />
+							<div class="space-null-text">您还未进行空间设置，请先设置空间！</div>
+						</div>
+						<div class="space-null" v-else-if="target.projectItemTarget.floorPlanType === 1">
+							<div class="space-null" v-if="!projectItem.bimIntegrateId">
+								<img :src="nullImage" alt="aa.png" />
+								<div class="space-null-text">该单位工程暂未集成模型</div>
+							</div>
+							<div class="space-null" v-else-if="!viewToken">
+								<img :src="nullImage" alt="" />
+								<div class="space-null-text">模型集成中，请稍后再试</div>
+							</div>
+							<model-set ref="modelSet" v-else :viewToken="viewToken"
+								:bimIntegrateId="projectItem.bimIntegrateId" :roomId="target.roomId">
+							</model-set>
+						</div>
+						<div class="space-null" v-else-if="target.projectItemTarget.floorPlanType === 2">
+							<div class="space-null"
+								v-if="!target.projectItemTarget.floorPlan || target.projectItemTarget.floorPlan === '[]' ">
+								<img :src="nullImage" alt="" />
+								<div class="space-null-text">请上传楼层平面图</div>
+							</div>
+							<floor-plan-set :roomId="target.roomId" :target="target.projectItemTarget" :key="target.roomId"></floor-plan-set>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	import projectItemTree from '@/components/common/projectItemTree'
+	import {
+		getIntegrateViewToken
+	} from '@/httpApi/bim'
+	import floorPlanSet from '@/components/work/space/function/floorPlanSet.vue';
+	import modelSet from '@/components/work/space/function/modelSet.vue';
+	export default {
+		data() {
+			return {
+				nullImage: require('../../../assets/img/work/common/dataNull.png'),
+				target: {},
+				projectItem: {},
+				viewToken: '',
+				bimIntegrateId: ''
+			}
+		},
+		components: {
+			projectItemTree,
+			floorPlanSet,
+			modelSet
+		},
+		methods: {
+			treeclick(e, type) {
+				this.target = e;
+				if (e.projectItemTarget.floorPlanType === 1) {
+					if (e.projectItem.bimIntegrateId === this.projectItem.bimIntegrateId) {
+						console.log(this.$refs.modelSet);
+						if (this.$refs.modelSet) this.$refs.modelSet.init('update', e.roomId);
+						return;
+					}
+					this.projectItem = e.projectItem;
+					getIntegrateViewToken(this.projectItem.bimIntegrateId).then(res => {
+						if (res.state) this.viewToken = res.data;
+					});
+				} else if (e.projectItemTarget.floorPlanType === 2) {
+
+				}
+
+			}
+		},
+	}
+</script>
+
+<style lang="scss">
+	.space-function {
+		.node-tree {
+			max-height: 300px;
+			overflow-y: auto;
+		}
+
+		.space-null {
+			width: 100%;
+			height: 100%;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			flex-direction: column;
+
+			img {
+				width: 420px;
+			}
+
+			.space-null-text {
+				padding: 30px 0 20px 0;
+			}
+		}
+
+		.previewBim {
+			width: 100%;
+			height: 100%;
+
+			.bf-house {
+				display: none !important;
+			}
+		}
+
+		.space-function-form {
+			padding: 20px;
+
+			.space-function-item {
+				display: flex;
+				align-items: center;
+				height: 48px;
+
+				.space-function-label {
+					padding-right: 10px;
+				}
+
+				.space-function-value {
+					width: 0;
+					flex: 1;
+					text-align: right;
+
+					.el-input.is-disabled .el-input__inner {
+						background: #475062;
+						border: none;
+						color: $--color-common;
+						opacity: 1;
+						border-radius: 6px;
+					}
+
+					.el-color-picker__trigger {
+						width: 22px;
+						height: 22px;
+						padding: 2px;
+						border-color: $--input-border
+					}
+
+					.el-color-picker {
+						height: 22px;
+					}
+				}
+			}
+
+			.space-function-button {
+				padding-top: 10px;
+
+				.el-button {
+					width: 100%;
+				}
+			}
+		}
+	}
 </style>

virgo.wzfrontend/src/main/resources/static/console/icon/font.css

@@ -23,7 +23,7 @@
 @font-face {
 	font-family: "hanyiyaku";
 	font-weight: 400;
-	src: url("./hanyiyaku.ttf") format("truetype");
+	src: url("https://file-node.oss-cn-shanghai.aliyuncs.com/youji/9b17ffe981814397b4eb2daa3af3627d") format("truetype");
 	font-display: swap;
 }