fix

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

@@ -0,0 +1,194 @@
+<template>
+	<div class="hui-flex operation-room">
+		<div class="hui-flex-box hui-no-tips" v-if="list.length === 0">
+			<empty description="暂未设置房间"></empty>
+		</div>
+		<div class="hui-flex-box operation-room-list" v-else>
+			<div class="operation-room-item" v-for="(item,index) in list" :key="index">
+				<div class="operation-room-box">
+					<div class="operation-room-title">
+						<i class="iconfont huifont-shouye"></i>
+						<span class="label">{{item.name}}</span>
+						<div>
+							<div v-if="item.state == 1" class="hui-state">
+								<span class="hui-state-bage hui-state-primary"></span>
+								<span class="hui-state-label">空闲</span>
+							</div>
+							<div v-if="item.state == 2" class="hui-state">
+								<span class="hui-state-bage hui-state-common"></span>
+								<span class="hui-state-label">即将到期</span>
+							</div>
+							<div v-if="item.state == 3" class="hui-state">
+								<span class="hui-state-bage hui-state-success"></span>
+								<span class="hui-state-label">租赁中</span>
+							</div>
+						</div>
+					</div>
+					<div class="operation-room-content">
+						<div class="room-title">
+							<div class="iconfont-box">
+								<i class="iconfont huifont-moxingguanli"></i>
+							</div>
+							<span class="label">面积</span>
+						</div>
+						<div class="room-content">{{item.area}}</div>
+						<div class="room-title">
+							<div class="iconfont-box">
+								<i class="iconfont huifont-zuzhiguanli"></i>
+							</div>
+							<span class="label">入驻公司</span>
+						</div>
+						<div class="room-content">{{item.organizationName}}</div>
+						<div class="room-title">
+							<div class="iconfont-box">
+								<i class="iconfont huifont-shijian" style="font-size: 13px;"></i>
+							</div>
+							<span class="label">入驻时间</span>
+						</div>
+						<div class="room-content">{{item.time}}</div>
+						<div class="room-title">
+							<div class="iconfont-box">
+								<i class="iconfont huifont-shebeiguanli"></i>
+							</div>
+							<span class="label">合同日期</span>
+						</div>
+						<div class="room-content" style="font-size: 13px;">{{item.contractTime}}</div>
+						<div class="room-title">
+							<div class="iconfont-box">
+								<i class="iconfont huifont-guanlipingtai"></i>
+							</div>
+							<span class="label">负责人</span>
+						</div>
+						<div class="room-content">{{item.person}}</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				list: [{
+					name: '101',
+					area: '120平方米',
+					organizationName: '公司名称',
+					time: '2025-01-01',
+					contractTime: '2025-01-01至2026-01-01',
+					person: '负责人',
+					state: 1
+				}, {
+					name: '102',
+					area: '120平方米',
+					organizationName: '公司名称',
+					time: '2025-01-01',
+					contractTime: '2025-01-01至2026-01-01',
+					person: '负责人',
+					state: 2
+				}, {
+					name: '103',
+					area: '120平方米',
+					organizationName: '公司名称',
+					time: '2025-01-01',
+					contractTime: '2025-01-01至2026-01-01',
+					person: '负责人',
+					state: 3
+				}, {
+					name: '104',
+					area: '120平方米',
+					organizationName: '公司名称',
+					time: '2025-01-01',
+					contractTime: '2025-01-01至2026-01-01',
+					person: '负责人',
+					state: 1
+				}, {
+					name: '105',
+					area: '120平方米',
+					organizationName: '公司名称',
+					time: '2025-01-01',
+					contractTime: '2025-01-01至2026-01-01',
+					person: '负责人',
+					state: 2
+				}, {
+					name: '106',
+					area: '120平方米',
+					organizationName: '公司名称',
+					time: '2025-01-01',
+					contractTime: '2025-01-01至2026-01-01',
+					person: '负责人',
+					state: 3
+				}]
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.operation-room {
+		background: $--box-background;
+
+		.operation-room-list {
+			display: flex;
+			flex-wrap: wrap;
+			padding: 10px;
+			align-content: flex-start;
+		}
+
+		.operation-room-title {
+			height: 40px;
+			display: flex;
+			align-items: center;
+			background: #2B3446;
+			padding: 0 13px;
+			border-bottom: 1px solid $--color-border;
+
+			.label {
+				flex: 1;
+			}
+
+			.huifont-shouye {
+				font-size: 22px;
+				margin-right: 4px;
+			}
+
+			.hui-state-label {
+				font-size: 12px;
+			}
+		}
+
+		.operation-room-item {
+			padding: 10px;
+		}
+
+		.operation-room-box {
+			width: 220px;
+			background: #232A37;
+		}
+
+		.operation-room-content {
+			padding: 10px 10px 5px 10px;
+
+			.iconfont-box {
+				width: 20px;
+				text-align: center;
+			}
+
+			.room-title {
+				opacity: 0.8;
+				display: flex;
+				align-items: center;
+
+				.label {
+					font-size: 12px;
+				}
+			}
+
+			.room-content {
+				padding: 5px 0 10px 0;
+				padding-left: 20px;
+			}
+		}
+	}
+</style>

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

@@ -13,13 +13,14 @@
 				boxWidth: 100,
 				boxHeight: 100,
 				canvas: null,
-				position: []
+				position: [],
+				backgroundImageUrl: 'https://file-node.oss-cn-shanghai.aliyuncs.com/youji/01a0120395b249ecbae565600f2fb3ce'
 			}
 		},
 		beforeDestroy() {
 			let _self = this;
 			window.removeEventListener('resize', function() {
-				_self.init();
+				_self.initResize();
 			});
 		},
 		mounted() {
@@ -28,73 +29,71 @@
 			_self.init();
 			// 监听窗口大小变化
 			window.addEventListener('resize', function() {
-				_self.init();
+				_self.initResize();
 			});
 		},
 		methods: {
 			init() {
 				let box = document.getElementById('fabricContainer');
 				if (!box) return;
-				let boxWidth = box.offsetWidth;
-				let boxHeight = box.offsetHeight;
-				if (!this.canvas) {
+				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;
+					let canvasWidth = boxWidth >= boxHeight ? boxHeight * scale : boxWidth,
+						canvasHeight = boxWidth < boxHeight ? boxWidth / scale : boxHeight;
 					this.canvas = new fabric.Canvas('myCanvas', {
 						fireRightClick: true, // 启用右键，button的数字为3
 						stopContextMenu: true, // 禁止默认右键菜单
 						controlsAboveOverlay: true, // 超出clipPath后仍然展示控制条
 						preserveObjectStacking: true, // 当选择画布中的对象时，让对象不在顶层。
-						width: boxWidth, // 设置画布宽度
-						height: boxHeight, // 设置画布高度
+						width: canvasWidth, // 设置画布宽度
+						height: canvasHeight, // 设置画布高度
 					});
-					// this.clickFunction()
+					document.getElementById('canvas-container').style.width = canvasWidth;
+					document.getElementById('canvas-container').style.hight = canvasWidth;
 					this.initBackgroundImage();
-				} else {
-					this.canvas.setWidth(boxWidth);
-					this.canvas.setHeight(boxHeight);
-					const canvasWidth = this.canvas.getWidth();
-					const canvasHeight = this.canvas.getHeight();
-					// 调整画布内容的大小
-					const objects = this.canvas.getObjects();
-					objects.forEach(obj => {
-						console.log(obj);
-						if (!obj.stroke) {
-							const scaleX = canvasWidth / obj.width;
-							const scaleY = canvasHeight / obj.height;
-							const scale = scaleX < scaleY ? scaleX : scaleY;
-							obj.scale(scale);
-							obj.set({
-								left: (canvasWidth - obj.width * scale) / 2,
-								top: (canvasHeight - obj.height * scale) / 2
-							});
-						}
-					});
-					this.canvas.renderAll(); // 重新渲染画布
+					this.clickFunction();
+
 				}
 			},
+			initResize() {
+				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() {
 				let _self = this;
 				// 监听点击事件
-				_self.canvas.on('mouse:down', function(options) {
-					// 获取点击位置的坐标
-					const pointer = _self.canvas.getPointer(options.e);
-					const x = pointer.x;
-					const y = pointer.y;
-					_self.position.push({
-						x: x,
-						y: y
-					})
-					console.log(_self.position);
+				_self.canvas.on('mouse:down', function(options) {
+					console.log(options);
+					// // 获取点击位置的坐标
+					// const pointer = _self.canvas.getPointer(options.e);
+					// const x = pointer.x;
+					// const y = pointer.y;
+					// _self.position.push({
+					// 	x: x,
+					// 	y: y
+					// })
+					// console.log(_self.position);
 
-					// 在点击位置添加一个圆形标记
-					const circle = new fabric.Circle({
-						radius: 5,
-						fill: 'red',
-						left: x,
-						top: y,
-						selectable: false // 禁止选中
-					});
-					_self.canvas.add(circle);
-					_self.canvas.renderAll();
+					// // 在点击位置添加一个圆形标记
+					// const circle = new fabric.Circle({
+					// 	radius: 5,
+					// 	fill: 'red',
+					// 	left: x,
+					// 	top: y,
+					// 	selectable: false // 禁止选中
+					// });
+					// _self.canvas.add(circle);
+					// _self.canvas.renderAll();
 				});
 			},
 			initBackgroundImage() {
@@ -111,8 +110,8 @@
 					// 设置图片的缩放比例
 					img.scale(scale);
 					img.set({
-						left: (canvasWidth - img.width * scale) / 2,
-						top: (canvasHeight - img.height * scale) / 2,
+						left: 0,
+						top: 0,
 						selectable: false
 					})
 					_self.canvas.add(img);
@@ -121,36 +120,27 @@
 			},
 			addPolygon() {
 				const starPoints = [{
-						"x": 127,
-						"y": 210
-					},
-					{
-						"x": 192,
-						"y": 208
-					},
-					{
-						"x": 193,
-						"y": 179
-					},
-					{
-						"x": 337,
-						"y": 179
-					},
-					{
-						"x": 335,
-						"y": 0
-					},
-					{
-						"x": 127,
-						"y": 1
-					}
-				];
+					"x": 705,
+					"y": 213
+				}, {
+					"x": 855,
+					"y": 216
+				}, {
+					"x": 855,
+					"y": 354
+				}, {
+					"x": 705,
+					"y": 354
+				}];
 				const star = new fabric.Polygon(starPoints, {
-					left: 300,
-					top: 100,
-					fill: 'yellow',
-					stroke: 'orange',
-					strokeWidth: 2
+					fill: 'rgba(113, 179, 255, 0.6)',
+					stroke: 'rgba(113, 179, 255, 1.0)',
+					strokeWidth: 1,
+					selectable: false,
+					id:1
+				});
+				star.on('click', function(e) {
+					console.log(e);
 				});
 				this.canvas.add(star);
 				this.canvas.renderAll();
@@ -164,5 +154,9 @@
 		width: 100%;
 		height: 100%;
 		overflow: hidden;
+
+		#canvas-container {
+			transform-origin: 0% 0%;
+		}
 	}
 </style>

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

@@ -1,38 +1,44 @@
-<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">
-			<operation-models ref="operationModels" v-if="target.bimIntegrateId === '3102248339366592'" :target="target">
-			</operation-models>
-			<operation-model v-else></operation-model>
-		</div>
-	</div>
-</template>
-
-<script>
-	import operationModel from '@/components/work/bim/operationModel'
-	import operationModels from '@/components/work/bim/operationModels'
-	import projectItemTree from '@/components/common/projectItemTree'
-	export default {
-		data() {
-			return {
-				target: {}
-			}
-		},
-		mounted() {},
-		methods: {
-			treeclick(e, type) {
-				this.target = e;
-				if (this.$refs.operationModels && type != 'isInit') this.$refs.operationModels.changeTarget(e);
-			}
-		},
-		components: {
-			operationModel,
-			operationModels,
-			projectItemTree
-		}
-	}
-</script>
-
-<style lang="scss">
+<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">
+			<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">
+			<operation-room></operation-room>
+		</div>
+	</div>
+</template>
+
+<script>
+	import operationModel from '@/components/work/bim/operationModel'
+	import operationModels from '@/components/work/bim/operationModels'
+	import operationRoom from '@/components/work/bim/operationRoom'
+	import projectItemTree from '@/components/common/projectItemTree'
+	export default {
+		data() {
+			return {
+				target: {}
+			}
+		},
+		mounted() {},
+		methods: {
+			treeclick(e, type) {
+				this.target = e;
+				if (this.$refs.operationModels && type != 'isInit') this.$refs.operationModels.changeTarget(e);
+			}
+		},
+		components: {
+			operationModel,
+			operationModels,
+			projectItemTree,
+			operationRoom
+		}
+	}
+</script>
+
+<style lang="scss">
 </style>