zhgdyunapp/pages/projectEnd/safeSame/hiddenTroubleComponents/hiddenTroubleDetail.vue

<template>
	<view class="deetailPage">
		<view class="fixedheader">
			<headers :showBack="true" :themeType="true">
				<view class="headerName">
					{{hiddendangerFlag == 'hiddendanger' ? '隐患记录详情' : '记录详情'}}
				</view>
			</headers>
		</view>
		<view class="content record" :style="{paddingTop: mobileTopHeight + 44 + 'px'}">
			<view class="content_main">
				<view class="box-item">
					<view>隐患部位:</view>
					<view>
						{{basicInfo.detailPlace ? basicInfo.detailPlace : '--'}}
					</view>
				</view>
				<view class="box-item">
					<view>隐患描述:</view>
					<view>
						{{basicInfo.addedDescription ? basicInfo.addedDescription : '--'}}
					</view>
				</view>
				<view class="box-item">
					<view>上报时间:</view>
					<view>
						{{basicInfo.inspectTime ? basicInfo.inspectTime : '--'}}
					</view>
				</view>
				<template v-if="hiddendangerFlag == 'hiddendanger'">
					<view class="box-item">
						<view>上报单位:</view>
						<view>
							{{basicInfo.reportEnterpriseName ? basicInfo.reportEnterpriseName : '--'}}
						</view>
					</view>
					<view class="box-item">
						<view>班组/部门:</view>
						<view>
							{{basicInfo.reportDepartmentTeamName ? basicInfo.reportDepartmentTeamName : '--'}}
						</view>
					</view>
					<view class="box-item">
						<view>上报人:</view>
						<view>
							{{basicInfo.inspectManName ? basicInfo.inspectManName : '--'}}
						</view>
					</view>
				</template>
				<view class="box-img">
					<view>隐患图片:</view>
					<view class="imgBox_wrap">
						<view class="imgBox" v-show="imgFileList.length>0" v-for="(item,index) in imgFileList"
							:key="index">
							<image :src="url_config+'image/'+ item.url" class="img"
								@click="previewImage(url_config+'image/'+ item.url)">
							</image>
						</view>
					</view>
				</view>
				<view class="box-item">
					<view>现场整改:</view>
					<view>
						{{basicInfo.status==2||basicInfo.status==3||basicInfo.status==4||basicInfo.status==6?'未完成':basicInfo.status==5?'已完成':''}}
					</view>
				</view>
				<view class="box-img">
					<view>整改后:</view>
					<view class="imgBox_wrap">
						<view class="imgBox" v-show="rectifyAfterImageList.length>0"
							v-for="(item,index) in rectifyAfterImageList" :key="index">
							<image :src="url_config+'image/'+ item.url" class="img"
								@click="previewImage(url_config+'image/'+ item.url)">
							</image>
						</view>
					</view>
				</view>
			</view>
			<view class="confrim-btn">
				<view @click="onNavigateBack">无需生成隐患</view>
				<view @click="onNavigateToDetail">生成隐患单</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		isJSON
	} from "@/utils/tool.js"

	export default {
		data() {
			return {
				mobileTopHeight: 0,
				imgFileList: [],
				rectifyAfterImageList: [],
				basicInfo: {},
				userInfo: {},
				id: '',
				projectSn: "",
				hiddendangerFlag: '',
			}
		},
		onLoad(option) {
			this.id = option.id;
			this.hiddendangerFlag = option.type;
			this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
			this.projectSn = JSON.parse(uni.getStorageSync('projectDetail')).projectSn;
		},
		onShow() {
			this.getBasicInfo();
		},
		mounted() {
			var that = this
			uni.getSystemInfo({
				success(res) {
					that.mobileTopHeight = res.statusBarHeight ? res.statusBarHeight : 0;
					uni.setStorageSync('systemInfo', res)
					console.log(res)
				}
			})
			console.log('this.mobileTopHeight', this.mobileTopHeight)
		},
		methods: {
			// 打开详情
			onNavigateToDetail() {
				uni.navigateTo({
					url: `./addHazardousWorkDistribution?id=${this.basicInfo.id}`
				})
			},
			// 取消
			onNavigateBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			//获取基本信息
			getBasicInfo() {
				let that = this;
				this.sendRequest({
					url: 'xmgl/xzSecurityQualityInspectionRecordDraft/queryById',
					method: 'post',
					data: {
						id: that.id
					},
					success: res => {
						console.log(res.result, this.userInfo)
						that.basicInfo = res.result;
						console.log('获取基本信息---', that.basicInfo);
						if (res.result.imageUrl) {
							that.imgFileList = isJSON(res.result.imageUrl) &&
								Array.isArray(JSON.parse(res.result.imageUrl)) ?
								JSON.parse(res.result.imageUrl) : [];
						}
						if (res.result.rectifyAfterImage) {
							that.rectifyAfterImageList = isJSON(res.result.rectifyAfterImage) &&
								Array.isArray(JSON.parse(res.result.rectifyAfterImage)) ?
								JSON.parse(res.result.rectifyAfterImage) : [];
						}
					}
				})
			},
			//预览图片
			previewImage(url) {
				uni.previewImage({
					urls: [url]
				})
			}

		}
	}
</script>

<style>
	.confrim-btn {
		padding: 18rpx 26rpx;
		background-color: #FFFFFF;
		box-shadow: 0rpx -8rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
		display: flex;
		width: 100%;
		position: fixed;
		bottom: 0;

		>view {
			width: 50%;
			height: 76rpx;
			font-weight: 500;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		>view:first-child {
			background-color: rgba(81, 129, 246, 0.1);
			border-radius: 6rpx 0rpx 0rpx 6rpx;
			color: #5181F6;
		}

		>view:last-child {
			background-color: #5181F6;
			border-radius: 0rpx 6rpx 6rpx 0rpx;
			color: #FFFFFF;
		}
	}

	.bg-white {
		background-color: white;
	}

	.new-nodata {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		>view {
			width: 300rpx;
			height: 300rpx;
			background-image: url('@/static/staffAttendance/nodata.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}

		>text {
			font-size: 22rpx;
			color: #808080;
			margin-top: 60rpx;
		}
	}

	.fixedheader {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 2;

		.headerName {
			z-index: 1;
		}
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.flex2 {
		display: flex;
		align-items: center;
		/* justify-content: space-between; */
	}

	.flex3 {
		display: flex;
	}

	.deetailPage {
		width: 100%;
		height: 100%;
	}

	.tab {
		width: 100%;
		height: 45px;
		text-align: center;
		box-shadow: 0 0 10px rgba(194, 194, 194, 0.5);
	}

	.tabType {
		width: 50%;
		line-height: 43px;
		border-bottom: 1px solid rgba(194, 194, 194, 0.2);

	}

	.checkedTab {
		color: #4181FE;
		border-bottom: 2px solid #4181FE;

	}

	.noCheckTab {
		padding-bottom: 2px;
	}

	.content {
		width: 100%;
		box-sizing: border-box;
		background-color: #EFF3F7;
		/* padding: 30rpx 28rpx; */
	}

	.content_main {
		padding: 30rpx 28rpx;
		background-color: white;
		// border-radius: 18rpx;
		position: relative;
		padding-bottom: 138rpx;

		.box-bottom {
			width: 100%;
			padding: 0 26rpx;
			height: 112rpx;
			display: flex;
			align-items: center;
			background-color: #FFFFFF;
			box-shadow: 0rpx -8rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
			border-radius: 0 0 18rpx 18rpx;
			justify-content: flex-end;
			position: absolute;
			left: 0;
			bottom: 0;

			>view {
				padding: 10rpx 18rpx;
				border-radius: 6rpx;
				border: 2rpx solid #3E89FD;
				font-size: 28rpx;
				color: #3E89FD;
			}

			>view:not(:first-child) {
				margin-left: 20rpx;
			}

			.btn-error {
				border-color: #ED2B29;
				color: #ED2B29;
			}

			.btn-start {
				background-color: #3E89FD;
				border-color: #3E89FD;
				color: #FFFFFF;
			}
		}

		.box-content_detail {
			font-size: 28rpx;
			color: #4D4D4D;
			margin-top: 4rpx;
		}

		.webkit-clamp_2 {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			/* 限制为两行 */
			overflow: hidden;
		}

		.box-content {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 26rpx;
			font-size: 28rpx;

			>view:first-child {
				color: #808080;
			}

			>view:last-child {
				font-size: 24rpx;
				color: #4D8EEC;
			}
		}

		.box-content1 {
			margin-top: 26rpx;
			font-size: 28rpx;

			>view:first-child {
				color: #808080;
			}

			>view:last-child {
				margin-top: 20rpx;
				font-size: 28rpx;
				color: #4D4D4D;
			}
		}

		.box-img {
			display: flex;
			flex-direction: column;
			margin-top: 26rpx;
			font-size: 28rpx;

			>view:first-child {
				width: 192rpx;
				margin-right: 26rpx;
				color: #808080;
			}

			.imgBox_wrap_list {
				flex-direction: column;
				align-items: flex-start !important;

				.imgBox_list {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 14rpx 26rpx 14rpx 40rpx;

					>view:first-child {
						display: flex;
						align-items: center;

						.u-icon {
							font-size: 40rpx;
							color: #B3B3B3;
						}

						>view:last-child {
							margin-left: 14rpx;
							width: 320rpx;
							font-size: 24rpx;
							color: #808080;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}

					>view:last-child {
						font-weight: 500;
						font-size: 24rpx;
						color: #4D8EEC;
					}
				}

				.imgBox_list:nth-child(even) {
					background-color: #FBFBFB;
				}

				.imgBox_list:nth-child(odd) {
					background-color: #FFFFFF;
				}
			}

			.imgBox_wrap {
				display: flex;
				flex-wrap: wrap;
				margin-left: calc(192rpx + 28rpx);
				flex: 1;

				>view:not(:last-child) {
					margin-right: 26rpx;
				}

				>view {
					margin-bottom: 20rpx;
				}

				.imgBox {
					width: 164rpx;
					height: 164rpx;
					display: inline-flex;
					position: relative;
					border-radius: 8rpx;

					.img {
						width: 100%;
						height: 100%;
						border-radius: 8rpx;
					}

				}
			}
		}

		.box-item {
			display: flex;
			align-items: center;
			margin-top: 26rpx;
			font-size: 28rpx;

			>view:first-child {
				width: 192rpx;
				margin-right: 26rpx;
				color: #808080;
			}

			>view:last-child {
				flex: 1;
				color: #4D4D4D;
				word-break: break-all;
				// display: -webkit-box;
				// -webkit-box-orient: vertical;
				// -webkit-line-clamp: 1;
				// /* 限制为两行 */
				// overflow: hidden;
			}

			.color-error {
				color: #FF0000 !important;
			}

			.color-49 {
				color: #498CEC !important;
			}
		}

		.box-header {
			display: flex;
			align-items: center;
			justify-content: space-between;

			>view:first-child {
				display: flex;
				align-items: center;
				flex: 1;

				>view:last-child {
					font-weight: 800;
					font-size: 30rpx;
					color: #171717;
				}
			}

			// >view:last-child {
			// 	padding: 4rpx 20rpx;
			// 	border-radius: 4rpx;
			// 	border: 2rpx solid #F1F1F1;
			// 	font-weight: 500;
			// 	font-size: 22rpx;
			// }

			.wks_active {
				background-color: #898989;
				color: #1A1A1A;
			}

			.sgz_active {
				background-color: #BED0FA;
				color: #5181F6;
			}

			.ztz_active {
				background-color: #C38100;
				color: #FFFFFF;
			}

			.ywg_acitve {
				background-color: #88CF65;
				color: #1A1A1A;
			}
		}
	}

	.type {
		font-size: 30rpx;
		line-height: 40px;
		border-bottom: 1px solid rgba(194, 194, 194, 0.2);
	}

	.pre {
		padding: 10px 30rpx;
		background-color: rgba(194, 194, 194, 0.2);
		min-height: 50px;
		width: 100%;
		white-space: pre-wrap;
		word-wrap: break-word;
		box-sizing: border-box;
		line-height: initial;
	}

	.accessory {
		width: 100%;
		height: 70px;
		padding: 0 10px;
		box-sizing: border-box;
	}

	.accessoryImg {
		width: 110rpx;
		height: 60px;
		margin-right: 8px;
	}

	.userImg {
		width: 25px;
		height: 25px;
		border-radius: 50%;
		box-shadow: 0px 0 15px rgba(194, 194, 194, 0.5);
		margin-top: 5px;
	}

	.bubble {
		margin-left: 18px;
		width: 90%;
		box-sizing: border-box;
	}

	.bubble .bubble_content {
		width: 90%;
		background-color: #fff;
		padding: 10px 15px;
		display: inline-block;
		border-radius: 6px;
		position: relative;
		box-shadow: -2px 0 15px rgba(194, 194, 194, 0.5);
		position: relative;

	}

	.bubble .bubble_content::after {
		content: '';
		border: 8px solid #ffffff00;
		border-right: 8px solid #fff;
		position: absolute;
		top: 10px;
		left: -16px;
	}

	.record {
		/* background-color: rgba(234, 234, 234, 0.4); */
		/* padding-bottom: 60px; */
	}

	.bubble_content .name {
		font-size: 30rpx;
		margin: 10px 0;
	}

	.time {
		color: rgba(153, 153, 153, 1);
		font-size: 24rpx;
		font-family: PingFangSC-Regular;

	}

	.item_title {
		margin: 10px 0;
		font-family: PingFangSC-Regular;
		font-size: 28rpx;
		opacity: 0.8;
	}

	.approveBtn {
		position: fixed;
		bottom: 15px;
		width: calc(100% - 30px);
		box-sizing: border-box;
		z-index: 99;
	}

	.approveBtn .btn {
		width: 70%;
		line-height: 40px;
		background-color: #4181FE;
		color: #fff;
		text-align: center;
		border-radius: 30px;
		margin: 0 auto;
		box-shadow: 0 5px 5px rgba(65, 129, 254, 0.3);
	}

	.approveBtn .btn:active {
		background-color: rgba(65, 129, 254, 0.8);
	}

	.backBtn {
		position: fixed;
		bottom: 0px;
		left: 0px;
		width: 100%;
		box-sizing: border-box;
		z-index: 99;
	}

	.backBtn .btn-option {
		width: 100%;
		line-height: 40px;
		background-color: #4181FE;
		color: #fff;
		text-align: center;
	}

	.backBtn .btn-option:active {
		background-color: rgba(65, 129, 254, 0.8);
	}

	.editBtn {
		position: fixed;
		bottom: 0px;
		left: 0px;
		width: 100%;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		z-index: 99;
	}

	.editBtn .btn-delete {
		width: 50%;
		line-height: 40px;
		background-color: #D51C1C;
		color: #fff;
		text-align: center;
	}

	.editBtn .btn-resubmit {
		width: 50%;
		line-height: 40px;
		background-color: #5382F6;
		color: #fff;
		text-align: center;
	}

	.pass_wrap {
		position: absolute;
		top: 100px;
		right: 20px;
		z-index: 10;
	}

	.pass_icon {
		width: 80px;
		height: 80px;
	}

	.noData {
		text-align: center;
		font-size: 32rpx;
		margin-top: 120px;
		color: #bed0fb;
	}

	.noDataImg {
		width: 125px;
		height: 98px;
	}

	.table_title {
		list-style: none;
		justify-content: space-between;
		padding-left: 0;
		align-items: center;
		height: 56rpx;
		border-bottom: 1px solid #f1f1f1;
	}

	.table_title li {
		flex: 1;
		text-align: center;
		line-height: 56rpx;
	}

	.table_index {
		display: block;
		border-radius: 50%;
		color: #fff;
		background: #488DEC;
		width: 32rpx;
		height: 36rpx;
		text-align: center;
		line-height: 36rpx;
		margin-right: 10rpx;
	}

	.table_success {
		display: block;
		color: #13B98C;
		background: rgba(19, 185, 140, 0.2);
		line-height: 32rpx;
		padding: 6rpx;
	}

	.table_error {
		display: block;
		color: #EA3941;
		background: rgba(234, 57, 65, 0.2);
		line-height: 32rpx;
		padding: 6rpx;
	}

	.table_item {
		list-style: none;
		justify-content: space-between;
		padding-left: 0;
		align-items: center;
		height: 100rpx;
		border-bottom: 1px solid #f1f1f1;
	}

	.table_item li {
		flex: 1;
		text-align: center;
		font-size: 12px;
		line-height: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* .table_item li:last-child {
		justify-content: flex-end;
	} */

	.table_item li:nth-child(1) {
		flex: none;
		width: 136rpx;
	}

	.table_title li:nth-child(1) {
		flex: none;
		width: 136rpx;
	}

	.icon-down {
		height: 8px;
		width: 8px;
		background: url("@/static/icon-down-black.png") center no-repeat;
		background-size: 100%;
		margin-left: 4rpx;
	}

	.icon-right {
		height: 8px;
		width: 8px;
		background: url("@/static/icon-right.png") center no-repeat;
		background-size: 100%;
		margin-left: 8rpx;
	}

	.table_content {
		/* background: #f1f1f1; */
		padding: 28rpx;
	}

	.imgList {
		margin-bottom: 20rpx;
	}

	.imgList ul {
		list-style: none;
		padding: 0;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.imgList ul li {
		width: 30%;
		height: 100px;
		margin: 0 10rpx;
		margin-bottom: 20rpx;
	}

	.imgList ul li image {
		width: 100%;
		height: 100%;
	}

	.textRight {
		margin-left: 20px;
		width: 80%;
	}

	.textColor {
		color: gray;
		width: 68px;
	}
</style>