FE-V2-XCX/pages/emergencyEvacuationBigFullScreen.vue

<template>
	<view id="emergencyEvacuationBigFullScreen" >
		<!-- :style="'width:'+mapWidth+'px;height:'+mapHeight+'px;'" -->
		<view class="emergencyEvacuationBigFullScreen-page" :style="'width:'+mapWidth+'px;height:'+mapHeight+'px;transform: scale('+zoomData+');margin-top:-'+mapHeight/2+'px;margin-left:-'+mapWidth/2+'px;'">
			<view class="map-max-box" :style="'width:'+mapWidth+'px;height:'+mapHeight+'px;'">
				<!-- :style="'width:'+mapW+'px;height:'+mapH+'px;'" -->
				<view class="map-max-for-box"
				v-for="(item,index) in mapList" :key="index" :class="item.type == 2?'for-map-box-one':''"
				:style="'top:'+item.y+'px;left:'+item.x+'px;width:'+item.w+'px;height:'+item.h+'px;'">
					<view class="map-max-for-left-box"></view>
					<view class="map-max-for-center-box">
						<view class="map-max-for-center-min-left"></view>
						<view class="map-max-for-center-min-center"
						:class="item.type == 2?'for-map-box-one':(item.type == 1?'for-map-box':(item.type == 3?'for-map-box-two':''))">
							<view src="@/images/evacuation3_2/icon_sysbjt_m.png"
								:class="minItem.toward=='top'?'center-move-door-p-t':(minItem.toward=='bottom'?'center-move-door-p-b':(minItem.toward=='left'?'center-move-door-p-l':(minItem.toward=='right'?'center-move-door-p-r':'')))"
								v-for="(minItem,minIndex) in item.doorList" :key="minIndex"
								:style="'top:'+minItem.y+'px;left:'+minItem.x+'px;width:'+minItem.w+'px;height:'+minItem.h+'px;'"></view>
							<view src="@/images/evacuation3_2/icon_sjt.png"
								@click="lighButton(minItem)"
								:class="minItem.state=='1'?'lightTop':(minItem.state=='2'?'lightBottom':(minItem.state=='3'?'lightLeft':(minItem.state=='4'?'lightRight':'')))"
								v-for="(minItem,minIndex) in item.lightList" :key="minIndex"
								:style="'top:'+minItem.y+'px;left:'+minItem.x+'px;width:'+minItem.w+'px;height:'+minItem.h+'px;'"></view>
						</view>
						<view class="map-max-for-center-min-right"></view>
					</view>
					<view class="map-max-for-right-box"></view>
				</view>
			</view>
		</view>
		<view class="position-button">退出全屏</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				zoomData: null,
				mapList:[{"x":1,"y":1,"w":162,"h":271,"type":"1","direction":"1","doorList":[{"type":"door","toward":"bottom","w":25,"h":25,"x":63.5,"y":244}]},{"x":1,"y":274,"w":800,"h":100,"type":"2","direction":"1","lightList":[{"type":"light","state":"3","w":20,"h":20,"x":243,"y":40},{"type":"light","state":"3","w":20,"h":20,"x":451,"y":40},{"type":"light","state":"4","w":20,"h":20,"x":551,"y":40},{"type":"light","state":"3","w":20,"h":20,"x":652,"y":40},{"type":"light","state":"4","w":20,"h":20,"x":737,"y":40},{"type":"light","state":"4","w":20,"h":20,"x":110,"y":40},{"type":"light","state":"4","w":20,"h":20,"x":335,"y":40}]},{"x":1,"y":374,"w":139,"h":204,"type":"1","direction":"1","doorList":[{"type":"door","toward":"top","w":25,"h":25,"x":55.5,"y":2}]},{"x":163,"y":101,"w":100,"h":173,"type":"2","direction":"1","lightList":[{"type":"light","state":"1","w":20,"h":20,"x":40,"y":126}]},{"x":263,"y":1,"w":100,"h":273,"type":"1","direction":"1","doorList":[{"type":"door","toward":"bottom","w":25,"h":25,"x":37.5,"y":246}]},{"x":363,"y":1,"w":100,"h":273,"type":"1","direction":"1","doorList":[{"type":"door","toward":"bottom","w":25,"h":25,"x":33.5,"y":246}]},{"x":463,"y":2,"w":100,"h":272,"type":"1","direction":"1","doorList":[{"type":"door","toward":"bottom","w":25,"h":25,"x":39.5,"y":245}]},{"x":563,"y":1,"w":100,"h":273,"type":"1","direction":"1","doorList":[{"type":"door","toward":"bottom","w":25,"h":25,"x":32.5,"y":246}]},{"x":663,"y":3,"w":140,"h":271,"type":"1","direction":"1","doorList":[{"type":"door","toward":"bottom","w":25,"h":25,"x":56.5,"y":244}]},{"x":698,"y":374,"w":104,"h":205,"type":"1","direction":"1","doorList":[{"type":"door","toward":"top","w":25,"h":25,"x":19.5,"y":2}]},{"x":240,"y":375,"w":107,"h":204,"type":"1","direction":"1","doorList":[{"type":"door","toward":"top","w":25,"h":25,"x":40.5,"y":2}]},{"x":347,"y":375,"w":100,"h":204,"type":"1","direction":"1","doorList":[{"type":"door","toward":"top","w":25,"h":25,"x":37.5,"y":2}]},{"x":447,"y":375,"w":123,"h":204,"type":"1","direction":"1","doorList":[{"type":"door","toward":"top","w":25,"h":25,"x":52.5,"y":2}]},{"x":570,"y":375,"w":128,"h":204,"type":"1","direction":"1","doorList":[{"type":"door","toward":"top","w":25,"h":25,"x":47.5,"y":2}]},{"x":801,"y":274,"w":100,"h":100,"type":"3","direction":"1","doorList":[{"type":"door","toward":"left","w":25,"h":25,"x":2,"y":36.5}]},{"x":163,"y":1,"w":100,"h":100,"type":"3","direction":"1","doorList":[{"type":"door","toward":"bottom","w":25,"h":25,"x":38.5,"y":73}]},{"x":140,"y":374,"w":100,"h":203,"type":"1","direction":"1","doorList":[{"type":"door","toward":"top","w":25,"h":25,"x":40.5,"y":2}]}],
				mapWidth:903+40,//40边框距离
				mapHeight:581+40,//40边框距离
			}
		},
		onLoad(option) {

		},
		onShow() {
			this.zoomCalculate();
		},
		methods: {
			//灯点击事件
			lighButton(item){
				console.log(item);
			},
			//计算缩放率
			zoomCalculate() {
				let self = this;
				wx.getSystemInfo({
					success: function(res) {
						if (res.windowHeight > self.mapHeight) {
							self.$set(self, 'zoomData', self.mapHeight / (res.windowHeight / 1));
						} else {
							self.$set(self, 'zoomData', (res.windowHeight/ 1) / self.mapHeight);
						}
					}
				})
			},
		}
	}
</script>

<style lang="stylus" scoped>
	#emergencyEvacuationBigFullScreen {
		height:100%;
		width:100%;
		display: flex;
		overflow: hidden;
		.emergencyEvacuationBigFullScreen-page{
			// overflow: scroll;
			overflow: hidden;
			position: absolute;
			top:50%;
			left:50%;
			.map-max-box {
				border:20px solid rgba(255,255,255,0);
				position: relative;
				.map-max-for-box{
					position: absolute;
					display: flex;
					flex-direction: column;
					.map-max-for-left-box{
						height:2px;
					}
					.map-max-for-center-box{
						flex:1;
						display: flex;
						.map-max-for-center-min-left{
							width:2px;
						}
						.map-max-for-center-min-center{
							flex:1;
							position: relative
							view{
								position: absolute
							}
							.center-move-door-p-t{
								background: url("../images/evacuation3_2/icon_sysbjt_m.png")!important;
								background-size: 100%!important;
								transform: rotate(180deg);
							}
							.center-move-door-p-b{
								background: url("../images/evacuation3_2/icon_sysbjt_m.png")!important;
								background-size: 100%!important;
							}
							.center-move-door-p-l{
								background: url("../images/evacuation3_2/icon_sysbjt_m.png")!important;
								background-size: 100%!important;
								transform: rotate(90deg);
							}
							.center-move-door-p-r{
								background: url("../images/evacuation3_2/icon_sysbjt_m.png")!important;
								background-size: 100%!important;
								transform: rotateZ(270deg);
							}
							.lightTop{
								background: url("../images/evacuation3_2/icon_sjt.png");
								background-size: 100%;
							}
							.lightBottom{
								background: url("../images/evacuation3_2/icon_xjt.png");
								background-size: 100%;
							}
							.lightLeft{
								background: url("../images/evacuation3_2/icon_zuo.png");
								background-size: 100%;
							}
							.lightRight{
								background: url("../images/evacuation3_2/icon_yuo.png");
								background-size: 100%;
							}
						}
						.map-max-for-center-min-right{
							width:2px;
						}
					}
					.map-max-for-right-box{
						height:2px;
					}
					.map-max-for-min-box{
						position: relative
						view{
							position: absolute
						}
					}
				}
				.for-map-box{
					background: #CEF2FD;
				}
				.for-map-box-one{
					background: #CEFDD5;
				}
				.for-map-box-two{
					background:url("../images/evacuation3_2/icon_yjtd.png") center center no-repeat #39AE36;
					background-size: 60px 60px;
				}
			}
		}
		.position-button {
			position: fixed;
			top: 20px;
			right: 17px;
			width: 120px;
			line-height: 35px;
			font-size: 18px;
			background: rgba(0, 0, 0, 0.5);
			color: #fff;
			text-align: center;
			border-radius: 18px;
			border: none;
		}
	}
</style>