emergencyManagement/packageA/pages/danger/components/Detail.vue

<template>
	<uni-popup ref="popup" type="top">
		<uni-section type="line"  :title="type==='dl'?'地质灾害点详情':'水库淤堤坝详情'">
			<template v-slot:right>
				<uni-icons type="closeempty" size="24" color="#999" @click="close"></uni-icons>
			</template>		
		</uni-section>
		<view class="detail-cont">
			<uni-list >
				<uni-list-item :rightText="viewData.groupName" title ="监管单位" ></uni-list-item>						
				<uni-list-item :rightText="viewData.entName" title ="企业单位" ></uni-list-item>
				<uni-list-item :rightText="viewData.dangerTitle" title ="隐患名称"></uni-list-item>		
				<uni-list-item :rightText="viewData.dangerTags" title ="分类标签" ></uni-list-item>						
				<uni-list-item :rightText="formatDangerLevel(viewData.dangerLevel)" title ="经营范围"></uni-list-item>													
				<uni-list-item :rightText="viewData.dangerLocation" title ="发现位置" v-if="viewData.dangerLocation"></uni-list-item>													
				<view class="attach-list-item" v-if="viewData.attachList&&viewData.attachList.length>0">
					<view class="title">现场照片</view>
					<view class="attachbox">
						<view class="attach"  v-for="(attach, index) in viewData.attachList" :key="index" @click="preview(viewData.attachList)">
							<image :src="attach.attachUrl"></image>
						</view>
					</view>
				</view>
				<uni-list-item :note="viewData.dangerDesc" title ="隐患描述" v-if="viewData.dangerDesc"></uni-list-item>																			
				<uni-list-item :note="viewData.submitRemark" title ="登记说明" v-if="viewData.submitRemark"></uni-list-item>						
				<uni-list-item :rightText="viewData.dangerDeadLine" title ="整改期限" v-if="viewData.dangerDeadLine"></uni-list-item>																																	
				<uni-list-item :rightText="viewData.rectifyTime" title ="整改时间" v-if="viewData.rectifyTime"></uni-list-item>																										
				<uni-list-item :note="viewData.dangerReason" title ="原因分析" v-if="viewData.dangerReason"></uni-list-item>						
				<uni-list-item :rightText="viewData.rectifyMeasure" title ="整改措施" v-if="viewData.rectifyMeasure"></uni-list-item>																																		
				<uni-list-item :rightText="formatRectifyCat(viewData.rectifyCat)" title ="整改方式" v-if="viewData.rectifyCat"></uni-list-item>																																																										
				<uni-list-item :note="viewData.rectifyRemark" title ="整改说明" v-if="viewData.rectifyRemark"></uni-list-item>		
				<uni-list-item :rightText="viewData.acceptTime" title ="验收时间" v-if="viewData.acceptTime"></uni-list-item>						
				<uni-list-item :note="viewData.acceptRemark" title ="验收说明" v-if="viewData.acceptRemark"></uni-list-item>	
				<uni-list-item title ="责任单位" v-if="viewData.supervisorList">
					<template v-slot:footer>
						<view class="supervisorList">
							<view class="supervisor" v-for="(supervisor,idx) in viewData.supervisorList">
								<view class="icon-item group">
									<image class="icon" src="/static/images/admin_icon.png" mode="widthFix"></image>
									<text class="word">{{supervisor.supervisorGroupName}}</text>
								</view>
								<view class="icon-item">
									<uni-icons type="person-filled" size="15" color="#999"></uni-icons>
									<text class="word">{{supervisor.supervisorName}}</text>
								</view>
								<view class="icon-item">
									<uni-icons type="phone-filled" size="15" color="#999"></uni-icons>
									<text class="word">{{supervisor.supervisorPhone}}</text>
								</view>
							</view>
						</view>
					</template>
				</uni-list-item>																																					
			</uni-list>			
		</view>
	</uni-popup>
</template>

<script>
	import dangerApi from '@/api/danger.js'	
	export default{
		name:"DisasteDetail",
		props:{
			type:{
				type:[String,Number],
				default:'dl'
			}
		},
		data(){
			return{
				viewData:{
					entId: undefined,
					dangerId: 0,
					dangerCatId: 1,
					dangerCatTitle: '',
					dangerTitle: '',
					dangerTags:'',
					dangerCode: '',
					dangerLocation: '',
					dangerLevel: 2,
					dangerDesc: '',
					submitTime: '',
					submitRemark: '',
					dangerDeadLine: '',
					rectifyTime: '',
					dangerReason: '',
					rectifyCat: 1,
					rectifyRemark: '',
					acceptTime: '',
					acceptRemark: '',
					finishTime: '',
					status: 0,
					attachList: [],
					supervisorList:[]
				}
			}
		},
		methods:{
			formatDangerLevel(val){
				let dangerLevelOptions=['末知','重大','较大','一般','较小'];
				return dangerLevelOptions[val]
			},
			formatRectifyCat(val){
				let dangerLevelOptions=['自行整改','外协整改'];
				return dangerLevelOptions[val]
			},
			show(item){
				this.$refs.popup.open('bottom')			
				dangerApi.getById(item.dangerId).then((res)=>{
					this.viewData={...res.data}
				})
			},
			preview(urls=[]){
				if(urls.length>0){
					urls=urls.map(item=>item.attachUrl);
					uni.previewImage({
						urls
					})	
				}
			},
			close(){
				this.$refs.popup.close()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.detail-cont{
		&{
			max-height: 80vh;
			overflow-y: auto;
		}
		.attach-list-item{
			padding: 13px 20rpx;
			.title{
				font-size: 14px;
				color: #3b4144;
				overflow: hidden;
				line-height: 1;
				padding-bottom: 20rpx;
			}
			.attachbox{
				display: flex;
				flex-wrap: wrap;
				.attach{
					padding: 20rpx;
					image{
						display: block;
						width: 100rpx;
						height: 100rpx;
						box-shadow: rgba(0,0,0,0.6);	
						border: 1rpx solid #ccc;	
						border-radius: 10px;
						overflow: hidden;											
					}
				}
			}
		}
		.supervisorList{
			 width: calc(100% - 70px);
			.supervisor{
				display: flex;
				align-items: center;
				justify-content: flex-end;
				flex-wrap: wrap;
				margin-bottom: 6rpx;
				border-bottom: 1px dashed #ccc;
				background-color: #f5f5f5;
				.icon-item{
					display: flex;
					align-items: center;
					width: 50%;
					.word{
						margin-left: 8rpx;
						font-size: 24rpx;
					}
					&.group{
						width: 100%;
					}
					image{
						display: block;
						width: 30rpx;
						height: 30rpx;
						flex-shrink: 0;
					}
				}
			}

		}
	}
</style>