h5

app/src/api/h5.js

@@ -23,4 +23,28 @@ export function getGcjzjcxx(params) {
 		methods: 'get',
 		params
 	})
+}
+// 主要风险点
+export function getFxdj(params) {
+  return request({
+    url: "/system/zl/jcxxList/zyfxd",
+    methods: "get",
+    params
+  });
+}
+// 维保情况
+export function getWbqk(params) {
+  return request({
+    url: "/system/wbxx/list",
+    method: "get",
+    params,
+  });
+}
+// 生成二维码
+export function getQrcode(params) {
+  return request({
+    url: "/system/api/qrcode",
+    methods: "get",
+    params
+  });
 }

app/src/views/H5/index.vue

@@ -5,10 +5,33 @@
 			<div class="">{{detail.xq || '暂无'}}</div>
 		</div>
 		<div class="content" v-if="detail">
-			<div class="contPlate">
+			<div class="fxewm">
+				<div style="width: 60%;">
+					<div style="margin-bottom: 19px;">
+						<div class="fxdj">风险等级</div>
+						<div class="fxdjFlex">
+							<div class="fxTxt">{{detail.fxdj}}</div>
+						</div>
+					</div>
+					<div class="fxdj">主要风险点</div>
+					<div style="display: flex;
+				flex-wrap: wrap;">
+						<!-- <div class="gdst">疏通管道拥堵</div>
+						<div class="gdst">疏通管道</div>
+						<div class="gdst">疏通管道拥堵</div>
+						<div class="gdst">疏通管道拥堵</div> -->
+						<span class="gdst" v-for="(item, i) in fxd" :key="i">{{ item }},</span>
+					</div>
+				</div>
+				<div class="ewm">
+					<img class="ewmImg" :src="'data:image/png;base64,' + qrcode" alt="" v-if="qrcode" />
+				</div>
+			</div>
+			<div class="title">基础信息</div>
+			<!-- <div class="contPlate">
 				<div class="text">区域</div>
 				<div class="txt">{{detail.qx || '-'}}</div>
-			</div>
+			</div> -->
 			<div class="contPlate">
 				<div class="text">详细地址</div>
 				<div class="txt">{{detail.xxdz || '-'}}</div>
@@ -41,74 +64,101 @@
 			</div>
 			<div class="contPlate">
 				<div class="text">建筑面积</div>
-				<div class="txt">{{detail.jzmj  || '-'}}m2</div>
+				<div class="txt">{{detail.jzmj || '-'}}㎡</div>
 			</div>
 			<div class="contPlate">
 				<div class="text">地上楼层</div>
-				<div class="txt">{{detail.dslc  || '-'}}</div>
+				<div class="txt">{{detail.dslc || '-'}}</div>
 			</div>
 			<div class="contPlate">
 				<div class="text">地下楼层</div>
-				<div class="txt">{{detail.dxlc  || '-'}}</div>
+				<div class="txt">{{detail.dxlc || '-'}}</div>
 			</div>
 			<div class="contPlate">
 				<div class="text">建筑年代</div>
-				<div class="txt">{{detail.jcnd  || '-'}}</div>
+				<div class="txt">{{detail.jcnd || '-'}}</div>
 			</div>
 			<div class="contPlate">
 				<div class="text">建筑定性</div>
-				<div class="txt">{{detail.jzdx  || '-'}}</div>
+				<div class="txt">{{detail.jzdx || '-'}}</div>
 			</div>
 			<div class="contPlate">
 				<div class="text">建筑内使用功能</div>
-				<div class="txt">{{detail.jznsygn  || '-'}}</div>
+				<div class="txt">{{detail.jznsygn || '-'}}</div>
 			</div>
+			<div class="title">管理信息</div>
 			<div class="contPlate">
 				<div class="text">消防安全管理形式</div>
-				<div class="txt">{{detail.xfaqglxs  || '-'}}</div>
+				<div class="txt">{{detail.xfaqglxs || '-'}}</div>
 			</div>
 			<div class="contPlate">
 				<div class="text">管理主体</div>
-				<div class="txt">{{detail.glzthztjzd  || '-'}}</div>
+				<div class="txt">{{detail.glzthztjzd || '-'}}</div>
 			</div>
 			<div class="contPlate">
 				<div class="text">消防安全管理人</div>
-				<div class="txt">{{detail.xfaqglr  || '-'}}</div>
+				<div class="txt">{{detail.xfaqglr || '-'}}</div>
 			</div>
+			<div class="title">维保信息</div>
 			<div class="contPlate">
 				<div class="text">是否有维保单位</div>
-				<div class="txt">{{detail.sfywbdw  || '-'}}</div>
+				<div class="txt">{{detail.sfywbdw || '-'}}</div>
 			</div>
 			<div class="contPlate">
 				<div class="text">维保单位名称</div>
 				<div class="txt">{{detail.wbdwzl || '-'}}</div>
 			</div>
+			<div class="title on">维保记录</div>
+			<div v-if="list4 && list4.length > 0">
+				<div class="wbjl">
+					<div>维保日期</div>
+					<div>现场巡查人</div>
+					<div>维保结果</div>
+				</div>
+				<div class="wbWb">
+					<div class="wbjlList" v-for="(item,index) in list4" :key="index">
+						<div class="wbBox">
+							<div class="wbCont">{{item.wbsj || '无'}}</div>
+							<div class="wbCont">{{item.xcjcr || '无'}}</div>
+							<div class="wbCont on">{{item.wbjg || '无'}}</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div v-else class="wbwsj"></div>
+			<div class="title">消防安全资料</div>
 			<div class="contPlate">
-				<div class="text">灭火和疏散预案</div>
-				<div class="txt">附件下载</div>
+				<div class="textNe">灭火和疏散预案</div>
+				<div class="fjTxtOn">附件下载</div>
 			</div>
 			<div class="contPlate">
-				<div class="text">警示案列和宣传培训资料</div>
-				<div class="txt">附件下载</div>
+				<div class="textEn">警示案列和宣传培训资料</div>
+				<div class="fjTxtNo">附件下载</div>
 			</div>
 		</div>
 	</div>
 </template>
 <script>
 	import {
-		getGcjzjcxx
+		getGcjzjcxx,
+		getFxdj,
+		getWbqk,
+		getQrcode
 	} from '@/api/h5.js'
 	export default {
 		name: "H5",
 		components: {},
 		data() {
 			return {
+				list4: [],
+				fxd: [],
 				params: {
 					pageSize: 100,
 					pageNum: 1,
 					qy: null,
 					id: null
 				},
+				qrcode: null,
 				detail: {},
 				height: 1000,
 				srcList: [],
@@ -153,6 +203,38 @@
 				getGcjzjcxx(pId).then((res) => {
 					this.detail = res.data.data;
 				});
+				getFxdj(pId).then((res) => {
+					this.fxd = res.data.rows.map((p) => p.yhxmmc);
+				});
+				getWbqk(pId).then((res) => {
+					const list = [];
+					if (res.data.rows) {
+						res.data.rows.forEach((p) => {
+							list.push([p.wbsj, p.xcjcr, p.zyzt]);
+						});
+					}
+					this.list4 = list;
+				});
+				let color = '';
+				if (this.fxd.indexOf('低风险') >= 0) {
+					color = '#00D957';
+				} else if (this.fxd.indexOf('一般风险') >= 0) {
+					color = '#fbff3d';
+				} else if (this.fxd.indexOf('较大风险') >= 0 || this.fxd.indexOf('较高风险') >= 0) {
+					color = '#ff833d';
+				} else if (this.fxd.indexOf('重大风险') >= 0) {
+					color = '#ff0b0b';
+				} else {
+					color = '#35c2ff';
+				}
+				getQrcode({
+					url: window.location.origin + "/h5?id=" + this.params.id,
+					color
+				}).then((res) => {
+					const data = JSON.parse(res.data.data);
+					this.qrcode = data.qr_code;
+				});
+
 			},
 		},
 	};
@@ -200,9 +282,81 @@
 			margin: 0 7px;
 			border-radius: 3px;
 			margin-top: 6px;
-			padding: 11px 11px 11px 14px;
+			padding: 11px 11px 50px 14px;
 			box-sizing: border-box;
 
+			.title {
+				width: 375px;
+				height: 38px;
+				background: #56B1E3;
+				margin-left: -12px;
+				font-family: 'PingFang SC';
+				font-style: normal;
+				font-weight: 400;
+				font-size: 16px;
+				line-height: 38px;
+				padding-left: 13px;
+				box-sizing: border-box;
+				margin-bottom: 17px;
+			}
+
+			.title.on {
+				margin-bottom: 0;
+			}
+
+			.wbjl {
+				background: #527391;
+				height: 29px;
+				display: flex;
+				align-content: center;
+				justify-content: space-between;
+				font-family: 'PingFang SC';
+				font-style: normal;
+				font-weight: 400;
+				font-size: 14px;
+				color: #FFF;
+				line-height: 29px;
+				padding: 0 16px;
+				box-sizing: border-box;
+			}
+
+			.wbWb {
+				background: #DCEEFF;
+				height: 107px;
+				overflow: auto;
+
+				.wbjlList {
+					background: #DCEEFF;
+					padding: 10px 20px;
+					box-sizing: border-box;
+					color: #000;
+					border-bottom: 1px solid #FFF;
+
+					.wbBox {
+						display: flex;
+						align-items: center;
+
+						.wbCont {
+							flex-grow: 1;
+							text-align: center;
+						}
+
+						.wbCont.on {
+							text-align: right;
+						}
+					}
+				}
+			}
+
+			.wbwsj {
+				width: 100%;
+				height: 107px;
+				background-image: url(../../assets/images/null2.png);
+				background-size: 120px;
+				background-repeat: no-repeat;
+				background-position: center;
+			}
+
 			.row {
 				width: 100%;
 				height: 22px;
@@ -239,13 +393,51 @@
 				margin-bottom: 17px;
 
 				.text {
-					color: #a5a5a5;
+					color: #636262;
 					font-size: 16px;
 				}
 
+				.textNe {
+					width: 120px;
+					color: #636262;
+					text-align: left;
+					font-size: 16px;
+				}
+
+				.textEn {
+					width: 200px;
+					color: #636262;
+					text-align: left;
+					font-size: 16px;
+				}
+
+				.fjTxtOn {
+					width: 120px;
+					color: #1A1818;
+					text-align: center;
+					font-size: 16px;
+					color: #0085FF;
+					background-image: url(../../../src/assets/images/jt.png);
+					background-repeat: no-repeat;
+					background-position: 100px center;
+					background-size: 20px;
+				}
+
+				.fjTxtNo {
+					width: 120px;
+					color: #1A1818;
+					text-align: center;
+					font-size: 16px;
+					color: #0085FF;
+					background-image: url(../../../src/assets/images/jt.png);
+					background-repeat: no-repeat;
+					background-position: 100px center;
+					background-size: 20px;
+				}
+
 				.txt {
 					flex-grow: 1;
-					color: #000;
+					color: #1A1818;
 					text-align: center;
 					font-size: 16px;
 				}
@@ -273,5 +465,69 @@
 				}
 			}
 		}
+
+		.fxewm {
+			padding: 19px 0 19px 0;
+			box-sizing: border-box;
+			// border: 1px solid red;
+			color: #000;
+			display: flex;
+			// margin-bottom: 28px;
+			display: flex;
+			justify-content: space-between;
+
+			.ewm {
+				width: 137px;
+				height: 121px;
+				// border: 1px solid red;
+			}
+
+			.ewmImg {
+				width: 137px;
+				height: 121px;
+			}
+
+			.fxdj {
+
+				font-family: 'PingFang SC';
+				font-style: normal;
+				font-weight: 400;
+				font-size: 16px;
+				color: #636262;
+				margin-bottom: 9px;
+
+			}
+
+			.gdst {
+				// padding: 5px 13px;
+				box-sizing: border-box;
+				// background: #F18787;
+				font-family: 'Abel';
+				font-style: normal;
+				font-weight: 400;
+				font-size: 12px;
+				color: #454545;
+				margin: 0 3px;
+				margin-bottom: 9px;
+			}
+
+			.fxdjFlex {
+
+				.fxTxt {
+					width: 108px;
+					height: 22px;
+					background: #35C2FF;
+					font-family: 'PingFang SC';
+					font-style: normal;
+					font-weight: 400;
+					font-size: 16px;
+					line-height: 22px;
+					text-align: center;
+					color: #FFFFFF;
+					margin-bottom: 5px;
+				}
+
+			}
+		}
 	}
 </style>