h5

app/src/api/h5.js

@@ -47,4 +47,12 @@ export function getQrcode(params) {
     methods: "get",
     params
   });
-}
+}
+// 建筑照片
+export function getFile(params) {
+  return request({
+    url: "/system/gcjzjcxxcj/picUrl",
+    methods: "get",
+    params,
+  });
+}

app/src/views/H5/index.vue

@@ -2,7 +2,7 @@
 	<div class="h5">
 		<div class="top"></div>
 		<div class="name">
-			<div class="">{{detail.xq || '暂无'}}</div>
+			<div class="" v-if="detail">{{detail.xq || '暂无'}}</div>
 		</div>
 		<div class="content" v-if="detail">
 			<div class="fxewm">
@@ -10,7 +10,7 @@
 					<div style="margin-bottom: 19px;">
 						<div class="fxdj">风险等级</div>
 						<div class="fxdjFlex">
-							<div class="fxTxt">{{detail.fxdj}}</div>
+							<div class="fxTxt" :style="'background-color: ' + color">{{detail.fxdj}}</div>
 						</div>
 					</div>
 					<div class="fxdj">主要风险点</div>
@@ -45,22 +45,12 @@
 				<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 class="attImg">
+				<div v-for="(item,index) in img" :key="index">
+					<el-image style="width: 64px; height: 49px; margin-right: 4px" :src="item.url"
+						:preview-src-list="srcList">
+					</el-image>
+				</div>
 			</div>
 			<div class="contPlate">
 				<div class="text">建筑面积</div>
@@ -118,22 +108,18 @@
 				<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" style="text-align: left;">{{item.wbsj || '无'}}</div>
 							<div class="wbCont">{{item.xcjcr || '无'}}</div>
-							<div class="wbCont on">{{item.wbjg || '无'}}</div>
+							<div class="wbCont on">{{item.zyzt || '无'}}</div>
 						</div>
 					</div>
 				</div>
 			</div>
 			<div v-else class="wbwsj"></div>
 			<div class="title">消防安全资料</div>
-			<div class="contPlate">
-				<div class="textNe">灭火和疏散预案</div>
-				<div class="fjTxtOn">附件下载</div>
-			</div>
-			<div class="contPlate">
-				<div class="textEn">警示案列和宣传培训资料</div>
-				<div class="fjTxtNo">附件下载</div>
+			<div style="display: flex;margin-bottom: 17px;" v-for="(item,index) in files " :key="index">
+				<div class="textNe">{{item.name}}</div>
+				<a :href="item.url" target="_blank" class="fjTxtOn">附件下载</a>
 			</div>
 		</div>
 	</div>
@@ -143,13 +129,17 @@
 		getGcjzjcxx,
 		getFxdj,
 		getWbqk,
-		getQrcode
+		getQrcode,
+		getFile
 	} from '@/api/h5.js'
 	export default {
 		name: "H5",
 		components: {},
 		data() {
 			return {
+				img: [],
+				files: [],
+				color: null,
 				list4: [],
 				fxd: [],
 				params: {
@@ -179,13 +169,7 @@
 
 			this.params.id = id;
 			this.getData();
-			this.srcList = [
-				this.detail.jzzp1,
-				this.detail.jzzp2,
-				this.detail.jzzp3,
-				this.detail.jzzp4,
-				this.detail.jzzp5,
-			];
+			this.getFiles();
 		},
 		methods: {
 			getQueryString(name) {
@@ -202,45 +186,111 @@
 				}
 				getGcjzjcxx(pId).then((res) => {
 					this.detail = res.data.data;
+					let color = "";
+					let bgColor = "";
+					if (this.detail.fxdj.indexOf("低风险") >= 0) {
+						color = "#00D957";
+						bgColor = "#00A3FF";
+					} else if (this.detail.fxjd.indexOf("一般风险") >= 0) {
+						color = "#fbff3d";
+					} else if (
+						this.detail.fxjd.indexOf("较大风险") >= 0 ||
+						this.detail.fxjd.indexOf("较高风险") >= 0
+					) {
+						color = "#ff833d";
+						bgColor = "#ff833d";
+					} else if (this.detail.fxjd.indexOf("重大风险") >= 0) {
+						color = "#ff0b0b";
+						bgColor = "#ff0b0b";
+					} else {
+						color = "#35c2ff";
+						bgColor = "#35c2ff";
+					}
+					this.color = bgColor;
+					getQrcode({
+						url: window.location.origin + "/h5?id=" + this.detail.id,
+						color,
+					}).then((res) => {
+						const data = JSON.parse(res.data.data);
+						this.qrcode = data.qr_code;
+					});
 				});
-				getFxdj(pId).then((res) => {
+               const wbCs = {
+               	jzid:this.params.id,
+               	pageSize: 100,
+               	pageNum: 1,
+               }
+				getFxdj(wbCs).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;
+				
+				getWbqk(wbCs).then((res) => {
+					this.list4 = res.data.rows;
+					console.log(this.list4,987);
 				});
-				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
+			},
+			getFiles() {
+				getFile({
+					jzid: this.params.id,
+					ywid: ""
 				}).then((res) => {
-					const data = JSON.parse(res.data.data);
-					this.qrcode = data.qr_code;
+					const files = [];
+					if (res.data.data && res.data.data.length > 0) {
+						res.data.data.forEach((p) => {
+							files.push({
+								url: `http://183.66.101.53:8787/images/${this.detail.id}/${p.fjlj}`,
+								name: p.fjmc,
+							});
+						});
+					}
+					this.img = files.filter(i => i.name.indexOf(".jpg") >= 0)
+					this.files = files.filter(i => i.name.indexOf(".pdf") >= 0)
+					console.log(this.files, 123);
+					this.srcList = files
+						.filter((p) => p.name.indexOf(".jpg") >= 0)
+						.map((p) => p.url);
 				});
-
 			},
 		},
 	};
 </script>
 
 <style scoped lang="less">
+	.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;
+	}
+	.textNe {
+		color: #636262;
+		text-align: left;
+		font-size: 16px;
+	}
+	
+	.textEn {
+		width: 200px;
+		color: #636262;
+		text-align: left;
+		font-size: 16px;
+	}
 	.h5 {
 		width: 100%;
 		// height: 100vh;
@@ -390,6 +440,7 @@
 			.contPlate {
 				display: flex;
 				align-items: center;
+				// flex-wrap: wrap;
 				margin-bottom: 17px;
 
 				.text {
@@ -397,43 +448,6 @@
 					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;
@@ -455,6 +469,7 @@
 			.attImg {
 				display: flex;
 				align-items: center;
+				flex-wrap: wrap;
 				margin: 17px 0;
 
 				.img {