fix

virgo.wzfrontend/console/src/assets/scss/index.scss

@@ -575,6 +575,62 @@
 		background: #A20001;
 	}
 }
+
+.hui-switch {
+	position: relative;
+	display: inline-block;
+	width: 40px;
+	height: 20px;
+	
+	input {
+		opacity: 0;
+		width: 0;
+		height: 0;
+	}
+	
+	.slider {
+		position: absolute;
+		cursor: pointer;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background-color: rgba(255, 255, 255, 0.2);
+		-webkit-transition: .4s;
+		transition: .4s;
+		border: 1px solid #DCDFE6;
+	}
+	
+	.slider:before {
+		position: absolute;
+		content: "";
+		height: 16px;
+		width: 16px;
+		left: 1px;
+		bottom: 1px;
+		background-color: white;
+		-webkit-transition: .4s;
+		transition: .4s;
+	}
+	
+	input:checked+.slider {
+		background-color: rgb(19, 206, 102);
+	}
+	
+	input:checked+.slider:before {
+		-webkit-transform: translateX(20px);
+		-ms-transform: translateX(20px);
+		transform: translateX(20px);
+	}
+	
+	.slider.round {
+		border-radius: 20px;
+	}
+	
+	.slider.round:before {
+		border-radius: 50%;
+	}
+}
 
 .box-background {
 	background: $--box-background;

virgo.wzfrontend/console/src/assets/scss/tips.scss

@@ -410,7 +410,9 @@
 		padding-left: 10px;
 		font-size: 12px;
 		color: #D2E4FF;
-		overflow: hidden;
+		overflow: hidden;
+		display: flex;
+		align-items: center;
 	}
 
 	.label {

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

@@ -90,7 +90,9 @@
 						"y": 30224.66289488717,
 						"z": 16738.522116432978
 					},
-					"coordinateSystem": "world"
+					"coordinateSystem": "world",
+					"stayTime": 0,
+					"timeBetweenFrames": 4
 				}, {
 					"id": "932ba4e5-8e61-47a9-9e95-106eb68b6179",
 					"position": {
@@ -103,7 +105,9 @@
 						"y": 30385.92575124101,
 						"z": 16738.522708784523
 					},
-					"coordinateSystem": "world"
+					"coordinateSystem": "world",
+					"stayTime": 0,
+					"timeBetweenFrames": 2
 				}, {
 					"id": "d6a69146-0fa4-4b96-8823-5a6acb93df10",
 					"position": {
@@ -114,9 +118,11 @@
 					"target": {
 						"x": 11449.311926122491,
 						"y": -64824.15181454667,
-						"z": 3116.152764310379
+						"z": 16738.152764310379
 					},
-					"coordinateSystem": "world"
+					"coordinateSystem": "world",
+					"stayTime": 1,
+					"timeBetweenFrames": 6
 				}, {
 					"id": "6f76a823-5b9a-478b-88d1-8cc701f48d91",
 					"position": {
@@ -127,9 +133,11 @@
 					"target": {
 						"x": 18038.03011945137,
 						"y": -79397.87720835117,
-						"z": 3068.0364486589156
+						"z": 16738.0364486589156
 					},
-					"coordinateSystem": "world"
+					"coordinateSystem": "world",
+					"stayTime": 0,
+					"timeBetweenFrames": 2
 				}, {
 					"id": "9afa7778-a500-4707-8576-a25cec8710b3",
 					"position": {
@@ -140,9 +148,11 @@
 					"target": {
 						"x": 112398.1176970292,
 						"y": 2548.198234651193,
-						"z": -2049.5192830622163
+						"z": 16738.5192830622163
 					},
-					"coordinateSystem": "world"
+					"coordinateSystem": "world",
+					"stayTime": 1,
+					"timeBetweenFrames": 4
 				}, {
 					"id": "bd51d05f-287d-45b9-addc-9da32d0e79f8",
 					"position": {
@@ -153,9 +163,11 @@
 					"target": {
 						"x": 122900.33170996535,
 						"y": 19518.523647883958,
-						"z": -3141.434953464723
+						"z": 16738.434953464723
 					},
-					"coordinateSystem": "world"
+					"coordinateSystem": "world",
+					"stayTime": 0,
+					"timeBetweenFrames": 2
 				}, {
 					"id": "bf6e4d38-74e2-4f51-83d3-20a7f16cdf56",
 					"position": {
@@ -166,9 +178,11 @@
 					"target": {
 						"x": 30902.284349220965,
 						"y": 105501.28094759125,
-						"z": -2775.3274521968156
+						"z": 16738.3274521968156
 					},
-					"coordinateSystem": "world"
+					"coordinateSystem": "world",
+					"stayTime": 1,
+					"timeBetweenFrames": 12
 				}, {
 					"id": "6b309ba7-6044-41fb-815e-e878692fc437",
 					"position": {
@@ -179,9 +193,11 @@
 					"target": {
 						"x": 33065.36397610181,
 						"y": 137450.0034069327,
-						"z": -1371.5592527883905
+						"z": 16738.5592527883905
 					},
-					"coordinateSystem": "world"
+					"coordinateSystem": "world",
+					"stayTime": 1,
+					"timeBetweenFrames": 2
 				}],
 				wt: null,
 				stop: true,
@@ -240,8 +256,13 @@
 					return;
 				}
 				this.wt = this.bimViewer.walkthrough();
-				this.wt.setWalkthroughTime(100);
 				this.wt.setKeyFrames(this.walk);
+				this.wt.setKeyFrameCallback(this.keyFrameCallback);
+				this.wt.stopCallback(() => {
+					this.wt = null;
+					this.stop = true;
+					this.bimViewer.clearDrawable();
+				});
 				this.wt.play();
 				this.stop = false;
 			},
@@ -254,6 +275,199 @@
 				if (!this.wt) return;
 				this.wt.stop();
 			},
+			keyFrameCallback(idx) {
+				this.bimViewer.clearDrawable();
+				switch (idx) {
+					case 0:
+						this.setWalkTip([{
+								"x": 24050.411537689757,
+								"y": 29350.017590535575,
+								"z": 17302.099026757893
+							}, {
+								"x": 23995.61377426047,
+								"y": 25650.002239992325,
+								"z": 17335.244453548836
+							}],
+							`<div class="tips-11">
+								<div class="title">
+									<img src="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/34e112ef844245d79d500d120d256fbf" alt="">
+									<div class="name">电梯</div>
+								</div>
+								<div class="content">
+									<div class="item">
+										<div class="label">状态:</div>
+										<div class="value">运行中</div>
+									</div>
+									<div class="item">
+										<div class="label">维护:</div>
+										<div class="value">今日已检修</div>
+									</div>
+								</div>
+							</div>`,
+							-220, -40, 3
+						);
+						break;
+					case 2:
+						this.setWalkTip([{
+								"x": 22000.02194219269,
+								"y": 18556.11888764512,
+								"z": 16860.98452689552
+							}],
+							`<div class="tips-9">
+								<div class="line" style="width:48px;"><img src="https://static.bimface.com/attach/24ce9654e88a4218908f46279e5c4b04_line.png" height="35" width="49"/></div>
+								<div class="article">
+									<div class="title">
+										<i class="iconfont huifont-shuzhuangcaidanxiala"></i>
+										1202
+									</div>
+								<div class="content">
+									<div class="item">
+										<div class="label">温度</div>
+										<div class="value">16°C</div>
+									</div>
+									<div class="item">
+										<div class="label">湿度</div>
+										<div class="value">30%</div>
+									</div>
+									<div class="item">
+										<div class="label">CO2</div>
+										<div class="value">15ppm</div>
+									</div>
+									<div class="item">
+										<div class="label">Tvoc</div>
+										<div class="value">1.5ppm</div>
+									</div>
+									<div class="item">
+										<div class="label">PM2.5</div>
+										<div class="value">2.3ug/m3</div>
+									</div>
+								</div>
+							</div>`,
+							0, -40, 2
+						);
+						this.setWalkTip([{
+								"x": 22000.02194219269,
+								"y": 21593.121086217907,
+								"z": 16482.919997783156
+							}],
+							`<div class="tips-5" style="width:180px;">
+								<div class="title"><i class="iconfont huifont-shuzhuangcaidanxiala"></i>照明设备</div>
+								<div class="content">
+									<div class="tips-6">
+										<div class="item">
+											<div class="label">灯光名称</div>
+											<div class="value">1号照明</div>
+										</div>
+										<div class="item">
+											<div class="label">灯光位置</div>
+											<div class="value">走廊</div>
+										</div>
+										<div class="item">
+											<div class="label">灯光操作</div>
+											<div class="value">
+												<label class="hui-switch">
+													<input type="checkbox" id="myCheckbox">
+													<span class="slider round"></span>
+												</label>
+											</div>
+										</div>
+									</div>
+								</div>
+							</div>
+							`,
+							0, -40, 1
+						);
+						break;
+					case 4:
+						this.setWalkTip([{
+								"x": 24409.083286761037,
+								"y": 14149.986899588841,
+								"z": 16842.24504298319
+							}, {
+								"x": 28737.64383719606,
+								"y": 14149.986899588841,
+								"z": 16881.492220074306
+							}],
+							`<div class="tips-9">
+								<div class="line" style="width:48px;"><img src="https://static.bimface.com/attach/24ce9654e88a4218908f46279e5c4b04_line.png" height="35" width="49"/></div>
+								<div class="article">
+									<div class="title">
+										<i class="iconfont huifont-shuzhuangcaidanxiala"></i>
+										1202
+									</div>
+								<div class="content">
+									<div class="item">
+										<div class="label">温度</div>
+										<div class="value">16°C</div>
+									</div>
+									<div class="item">
+										<div class="label">湿度</div>
+										<div class="value">30%</div>
+									</div>
+									<div class="item">
+										<div class="label">CO2</div>
+										<div class="value">15ppm</div>
+									</div>
+									<div class="item">
+										<div class="label">Tvoc</div>
+										<div class="value">1.5ppm</div>
+									</div>
+									<div class="item">
+										<div class="label">PM2.5</div>
+										<div class="value">2.3ug/m3</div>
+									</div>
+								</div>
+							</div>`,
+							0, -40, 2
+						);
+						break;
+					case 6:
+						this.setWalkTip([{
+								"x": 31000.028548922273,
+								"y": 19920.593446388877,
+								"z": 16869.840184958644
+							}, {
+								"x": 31000.024545155615,
+								"y": 24661.86466740186,
+								"z": 16875.88203316609
+							}],
+							`<div class="tips-9">
+								<div class="line" style="width:48px;"><img src="https://static.bimface.com/attach/24ce9654e88a4218908f46279e5c4b04_line.png" height="35" width="49"/></div>
+								<div class="article">
+									<div class="title">
+										<i class="iconfont huifont-shuzhuangcaidanxiala"></i>
+										1202
+									</div>
+								<div class="content">
+									<div class="item">
+										<div class="label">温度</div>
+										<div class="value">16°C</div>
+									</div>
+									<div class="item">
+										<div class="label">湿度</div>
+										<div class="value">30%</div>
+									</div>
+									<div class="item">
+										<div class="label">CO2</div>
+										<div class="value">15ppm</div>
+									</div>
+									<div class="item">
+										<div class="label">Tvoc</div>
+										<div class="value">1.5ppm</div>
+									</div>
+									<div class="item">
+										<div class="label">PM2.5</div>
+										<div class="value">2.3ug/m3</div>
+									</div>
+								</div>
+							</div>`,
+							0, -40, 2
+						);
+						break;
+					default:
+						break;
+				}
+			},
 			init() {
 				getBimViewToken(bimData.fileId).then(this.successFunc);
 			},
@@ -348,6 +562,7 @@
 				});
 			},
 			stopWalkFunc() {
+				this.bimViewer.clearDrawable();
 				this.isWalk = false;
 				this.stopWalk();
 				this.bimViewer.setStatus(bimData.cameraState);
@@ -357,6 +572,25 @@
 				if (this.pathNode.id === 3) this.setDevice();
 				if (this.pathNode.id === 4) this.setLight();
 			},
+			setWalkTip(data, html, x, y, type) {
+				for (let i = 0; i < data.length; i++) {
+					this.bimViewer.addDrawable({
+						position: data[i],
+						offsetX: x,
+						offsetY: y,
+						html: html,
+						id: 'walktip' + type + i
+					}, data => {
+						if (type === 1) {
+							this.showDrap('lightDetail');
+						} else if (type === 2) {
+							this.showDrap('roomDetail');
+						} else if (type === 3) {
+							this.showDrap('deviceDetail');
+						}
+					})
+				}
+			},
 			returnRGBA(color) {
 				let [r, g, b, a] = color.match(/\d+(\.\d+)?/g).map(Number);
 				return {

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

@@ -729,6 +729,11 @@ class bimView {
 		this.clearRingScanEffect = () => {
 			ringScanEffect.destroy();
 		}
+		this.addModel = (viewToken) => {
+			viewer3D.loadModel({
+				viewToken: viewToken
+			});
+		}
 		this.destroy = () => {
 			console.log('销毁场景');
 			app.destroy();