zhgkpt-datav/app/src/views/H5/index.vue

<template>
	<div class="h5">
		<div class="top"></div>
		<div class="name">
			<div class="">{{detail.xq || '暂无'}}</div>
		</div>
		<div class="content" v-if="detail">
			<div class="contPlate">
				<div class="text">区域</div>
				<div class="txt">{{detail.qx || '-'}}</div>
			</div>
			<div class="contPlate">
				<div class="text">详细地址</div>
				<div class="txt">{{detail.xxdz || '-'}}</div>
			</div>
			<div class="contPlate">
				<div class="text">乡镇街道</div>
				<div class="txt">{{detail.xzjd || '-'}}</div>
			</div>
			<div class="contPlate">
				<div class="text">高度</div>
				<div class="txt">{{detail.gd || '-'}}m</div>
			</div>
			<div class="archText">建筑照片</div>
			<div class="attImg" v-if="detail">
				<el-image style="width: 75px; height: 51px; margin-right: 29px" :src="detail.jzzp1"
					:preview-src-list="srcList" v-if="detail.jzzp1">
				</el-image>
				<el-image style="width: 75px; height: 51px; margin-right: 29px" :src="detail.jzzp2"
					:preview-src-list="srcList" v-if="detail.jzzp2">
				</el-image>
				<el-image style="width: 75px; height: 51px; margin-right: 29px" :src="detail.jzzp3"
					:preview-src-list="srcList" v-if="detail.jzzp3">
				</el-image>
				<el-image style="width: 75px; height: 51px; margin-right: 29px" :src="detail.jzzp4"
					:preview-src-list="srcList" v-if="detail.jzzp4">
				</el-image>
				<el-image style="width: 75px; height: 51px; margin-right: 29px" :src="detail.jzzp5"
					:preview-src-list="srcList" v-if="detail.jzzp5">
				</el-image>
			</div>
			<div class="contPlate">
				<div class="text">建筑面积</div>
				<div class="txt">{{detail.jzmj  || '-'}}m2</div>
			</div>
			<div class="contPlate">
				<div class="text">地上楼层</div>
				<div class="txt">{{detail.dslc  || '-'}}</div>
			</div>
			<div class="contPlate">
				<div class="text">地下楼层</div>
				<div class="txt">{{detail.dxlc  || '-'}}</div>
			</div>
			<div class="contPlate">
				<div class="text">建筑年代</div>
				<div class="txt">{{detail.jcnd  || '-'}}</div>
			</div>
			<div class="contPlate">
				<div class="text">建筑定性</div>
				<div class="txt">{{detail.jzdx  || '-'}}</div>
			</div>
			<div class="contPlate">
				<div class="text">建筑内使用功能</div>
				<div class="txt">{{detail.jznsygn  || '-'}}</div>
			</div>
			<div class="contPlate">
				<div class="text">消防安全管理形式</div>
				<div class="txt">{{detail.xfaqglxs  || '-'}}</div>
			</div>
			<div class="contPlate">
				<div class="text">管理主体</div>
				<div class="txt">{{detail.glzthztjzd  || '-'}}</div>
			</div>
			<div class="contPlate">
				<div class="text">消防安全管理人</div>
				<div class="txt">{{detail.xfaqglr  || '-'}}</div>
			</div>
			<div class="contPlate">
				<div class="text">是否有维保单位</div>
				<div class="txt">{{detail.sfywbdw  || '-'}}</div>
			</div>
			<div class="contPlate">
				<div class="text">维保单位名称</div>
				<div class="txt">{{detail.wbdwzl || '-'}}</div>
			</div>
			<div class="contPlate">
				<div class="text">灭火和疏散预案</div>
				<div class="txt">附件下载</div>
			</div>
			<div class="contPlate">
				<div class="text">警示案列和宣传培训资料</div>
				<div class="txt">附件下载</div>
			</div>
		</div>
	</div>
</template>
<script>
	import {
		getGcjzjcxx
	} from '@/api/h5.js'
	export default {
		name: "H5",
		components: {},
		data() {
			return {
				params: {
					pageSize: 100,
					pageNum: 1,
					qy: null,
					id: null
				},
				detail: {},
				height: 1000,
				srcList: [],
			};
		},
		mounted() {
			// 获取屏幕高度
			const height = window.screen.height;
			console.log(height);
			this.height = height;
			document.title = "建筑信息";
			// 获取参数
			const id = this.getQueryString("id");
			console.log(id);
			if (!id) {
				return;
			}

			this.params.id = id;
			this.getData();
			this.srcList = [
				this.detail.jzzp1,
				this.detail.jzzp2,
				this.detail.jzzp3,
				this.detail.jzzp4,
				this.detail.jzzp5,
			];
		},
		methods: {
			getQueryString(name) {
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
				var r = window.location.search.substr(1).match(reg);
				if (r != null) {
					return unescape(r[2]);
				}
				return null;
			},
			getData() {
				const pId = {
					id: this.params.id
				}
				getGcjzjcxx(pId).then((res) => {
					this.detail = res.data.data;
				});
			},
		},
	};
</script>

<style scoped lang="less">
	.h5 {
		width: 100%;
		// height: 100vh;
		background-color: #f6f5f5;

		.top {
			width: 100%;
			height: 144px;
			background: linear-gradient(180deg,
					#5ba7ff 0%,
					rgba(0, 87, 255, 0.87) 100%);
		}

		.name {
			width: calc(100% - 14px);
			height: 56px;
			display: flex;
			justify-content: center;
			background-image: url(../../assets/images/jzimg.png);
			background-position: 20px center;
			background-size: 20px;
			background-repeat: no-repeat;
			background-color: #ffffff;
			margin: 0 7px;
			border-radius: 3px;
			margin-top: -28px;
			color: #000;
			line-height: 56px;
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 500;
			font-size: 18px;
		}

		.content {
			width: calc(100% - 14px);
			height: auto;
			background-color: #ffffff;
			margin: 0 7px;
			border-radius: 3px;
			margin-top: 6px;
			padding: 11px 11px 11px 14px;
			box-sizing: border-box;

			.row {
				width: 100%;
				height: 22px;
				margin-bottom: 17px;
				display: flex;

				.label {
					width: 65px;
					height: 100%;
					font-family: "PingFang SC";
					font-style: normal;
					font-weight: 400;
					font-size: 16px;
					line-height: 22px;
					color: #636262;
					margin-right: 22px;
				}

				.value {
					flex-grow: 1;
					height: 100%;
					font-family: "PingFang SC";
					font-style: normal;
					font-weight: 400;
					font-size: 16px;
					line-height: 22px;
					color: #1a1818;
				}
			}

			.contPlate {
				display: flex;
				align-items: center;
				margin-bottom: 17px;

				.text {
					color: #a5a5a5;
					font-size: 16px;
				}

				.txt {
					flex-grow: 1;
					color: #000;
					text-align: center;
					font-size: 16px;
				}
			}

			.contPlate:nth-last-child(1) {
				margin-bottom: 0;
			}

			.archText {
				color: #a5a5a5;
				font-size: 16px;
			}

			.attImg {
				display: flex;
				align-items: center;
				margin: 17px 0;

				.img {
					width: 50px;
					height: 50px;
					margin-right: 10px;

				}
			}
		}
	}
</style>