ybxf-security-uniapp/pagesA/fire/hidden_trouble/trouble_xf_deetails/trouble_xf_deetails.vue

<template>
	<view class="">
		<navInfo :title="'隐患详情'"></navInfo>
		<view class="bgTopImg">
			<image slot="right" :src="`${urls}/navBg@2x.png`" class="bgTopImg"></image>
		</view>
		<view class="  uni-container">
			<view class=" flex  flex-direction width100">
				<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
				<u--form ref="uForm" :model="formData" labelPosition="left" labelWidth="70" labelAlign="left">
					<view class="">
						<view class="itemunirow">
							<uni-row class="demo-uni-row " :gutter="20" width="100%">
								<uni-col :span="16">
									<text class="text-df text-1cut  ">检查项名称：{{formData.inspName}}</text>
								</uni-col>
								<!-- <uni-col :span="8">
									<text class="text-df text-1cut  ">检查人:{{formData.avatar}}</text>
								</uni-col> -->
							</uni-row>
							<uni-row class="demo-uni-row " :gutter="20" width="100%">
								<uni-col :span="16">
									<!-- 	<uni-row class="demo-uni-row " :gutter="20" width="100%">
									<uni-col :span="24">
										<text class="text-df text-1cut  ">处理时间：{{formData.handleTime}}</text>
									</uni-col>
								</uni-row> -->
									<uni-row class="demo-uni-row " :gutter="20" width="100%">
										<uni-col :span="24">
											<text class="text-df text-1cut  ">检查内容：{{formData.inspContent}} </text>
										</uni-col>
									</uni-row>
								</uni-col>
								<!-- <uni-col :span="8">
									<u--image :showLoading="true" :src="formData.url" width="80px" height="80px">
									</u--image>
								</uni-col> -->
							</uni-row>
						</view>
						<view class="dashedBox">
							<view class="dashedLine">
							</view>
						</view>
						<view class="padding-top-sm">
							<view class="">
								<text>设施情况：</text>
								<u-list>
									<u-list-item v-for="(item,index) in formData.fpdList" :key="index" link>
										<uni-row class="demo-uni-row " :gutter="20" width="100%">
											<uni-col :span="16">
												<text class="text-df text-1cut ">设备名称：{{item.fpdName}}</text>
											</uni-col>
											<uni-col :span="8">
												<text class="text-df text-1cut ">设备二维码:</text>
											</uni-col>
										</uni-row>
										<uni-row class="demo-uni-row " :gutter="20" width="100%">
											<uni-col :span="16">
												<uni-row class="demo-uni-row " :gutter="20" width="100%">
													<uni-col :span="24">
														<text class="text-df text-1cut ">设备编号：{{item.fpdCode}}</text>
													</uni-col>
												</uni-row>
												<uni-row class="demo-uni-row " :gutter="20" width="100%">
													<uni-col :span="24">
														<text
															class="text-df text-1cut ">隐患描述：{{item.dangerDescribe}}</text>
													</uni-col>
												</uni-row>
												<uni-row class="demo-uni-row " :gutter="20" width="100%">
													<uni-col :span="24">
														<text class="padding-tb-sm">检查结果：</text>
														<view class="flex flex-wrap" style="margin-top: 20rpx;">
															<view v-for="(items,indexs) in item.hisFpdResultList"
																:key="indexs"
																class="flex flex-direction-row align-center padding-lr-sm">
																<u--image :showLoading="true" v-if="items.resValue=='1'"
																	:src="zhengchang" width="34rpx" height="34rpx">
																</u--image>
																<text class="text-1cut padding-left-sm "
																	v-if="items.resValue=='1'">{{items.resLable}}</text>
															</view>
														</view>
														<!-- <text class="text-df text-1cut ">设备位置：{{item.fpdLocal}}</text> -->
													</uni-col>
												</uni-row>
											</uni-col>
											<uni-col :span="8">
												<u--image :showLoading="true" :src="item.fpdQcode" width="80px"
													height="80px"></u--image>
											</uni-col>
										</uni-row>
										<!-- <view class="padding-tb-sm">
										<view class="  ">
											<view class="dashedLine">
											</view>
										</view>
									</view> -->

										<view class="padding-tb-sm">
											<view class="  ">
												<view class="dashedLine">
												</view>
											</view>
										</view>

										<text>现场照片：</text>
										<view  class="padding-lr-lg flex flex-direction-row" style="justify-content: space-around;margin-top: 10px;">
											<u--image v-if="item.imgUrl1" :showLoading="true" :src="item.imgUrl1"
												width="80px" height="80px"></u--image>
											<u--image v-if="item.imgUrl2" :showLoading="true"
												:src="item.imgUrl2" width="80px" height="80px"></u--image>
											<u--image v-if="item.imgUrl3" :showLoading="true"
												:src="item.imgUrl3" width="80px" height="80px"></u--image>
											<!-- <view class="padding-lr-lg flex flex-direction-row">
											<u--image v-if="item.hisFpd.imgUrl1" :showLoading="true"
												:src="item.hisFpd.imgUrl1" width="80px" height="80px"></u--image>
											<u--image v-if="item.hisFpd.imgUrl2" :showLoading="true"
												:src="item.hisFpd.imgUrl2" width="80px" height="80px"></u--image>
											<u--image v-if="item.hisFpd.imgUrl3" :showLoading="true"
												:src="item.hisFpd.imgUrl3" width="80px" height="80px"></u--image> -->
											<!-- <u-album :urls="formData.imgurl"></u-album> -->
											<!-- </view> -->
										</view>
									</u-list-item>
								</u-list>
							</view>
						</view>
					</view>
				</u--form>
			</view>
			<!-- 加载中 -->
			<isLodingModel></isLodingModel>
		</view>
	</view>

</template>
<script>
	import {
		getOneDenger, // 获得单个隐患详情
	} from "@/api/hiddenTrouble";
	import {
		dangerDetailbyFpd, //   隐患查看详情(消防设施)  
		dangerDetail //  隐患查看详情 
	} from "@/api/hiddenTrouble";
	import {
		uploadAvatar
	} from "@/api/system/user"
	import {
		DICT_TYPE,
		getDictDatas
	} from "@/utils/dict";
	let that = null;
	import config from '@/config'
	const baseUrlImg = config.baseUrlImg
	import navInfo from '@/pagesA/components/my-nav/nav'
	export default {
		components: {
			navInfo
		},
		data() {
			return {
				urls: baseUrlImg,
				moren: `${baseUrlImg}/checkActive/moren.png`, //默认图片
				zhengchang: `${baseUrlImg}/checkActive/zhengchang.png`,
				// 数据加载中
				loading: false,
				// 自定义表单数据
				formData: {
					id: '',
					name: '',
					position: '',
					time: '',
					description: '',
					status: '',
					people: '',
					imgurl: [],
				},
			}
		},
		watch: {
			loading: {
				handler(newLength, oldLength) {
					this.$modal.isLoadingModel(this.loading)
				},
				immediate: true
			}
		},
		computed: {},
		//目的页面接收
		//这里用onshow()也可以
		onLoad(options) {
			console.log("options: ", options);
			var data = options.id;
			console.log(data)
			this.getData(data)
		},
		// onLoad: function(option) {
		// 	that = this;
		// 	const eventChannel = this.getOpenerEventChannel();
		// 	// eventChannel.emit('acceptDataFromOpenedPage', {
		// 	// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
		// 	eventChannel.on('acceptDataFromOpenerPage', function(val) {
		// 		console.log(' val', val) 
		// 		that.getData(val.id)
		// 	})
		// },
		onReady() {},
		methods: {
			// =================数据转换================== 
			// =============获取数据===================s
			// =============获取数据===================s
			// 获取数据
			getData(id) {
				console.log('id', id);
				this.loading = true
				dangerDetailbyFpd({
					dangerId: id
				}).then(response => {
					console.log(response);
					// 为数据赋值：通过展开运算符的形式，进行新旧数据的拼接 
					this.formData = response.data ? response.data : {}
					this.loading = false;
					// this.formData.imgurl = ['https://cdn.uviewui.com/uview/swiper/swiper3.png',
					// 	'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					// 	'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					// ]
					this.loading = false;
				});
			},
		}
	}
</script>
<style lang="scss" scoped>
	.buttomBorder {
		height: 0px;
		border: 1px dashed #CBD5E1;
	}

	.dashedBox {
		padding: 0px 30rpx;
	}

	.dashedLine {
		height: 3px;
		background-image: linear-gradient(to right, #d7d6d6 0%, #d7d6d6 50%, rgba(196, 196, 196, 0) 50%);
		background-size: 40px 2px;
		background-repeat: repeat-x;
	}

	.itemunirow {
		.uni-row {
			padding-bottom: 20px;
		}
	}

	.uni-container {
		padding: 10px;
		border-radius: 30px 30px 0px 0px;
		background: #fff;
		/*#ifdef H5*/
		margin-top: 50rpx;
		/* #endif */
		/* #ifdef  MP-WEIXIN*/
		margin-top: 100rpx;
		/* #endif */
		z-index: 9999999;
		position: relative;
	}
</style>