emergencyManagement/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.dangerCatTitle" title ="分类"></uni-list-item>						
				<uni-list-item :rightText="formatDangerLevel(viewData.dangerLevel)" title ="经营范围"></uni-list-item>													
				<uni-list-item :rightText="viewData.dangerLocation" title ="发现位置"></uni-list-item>													
				<uni-list-item  title ="现场照片" v-if="viewData.attachList&&viewData.attachList.length>0">
					<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>
				</uni-list-item>																		
				<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>			
		</view>
	</uni-popup>
</template>

<script>
	export default{
		name:"DisasteDetail",
		props:{
			type:{
				type:[String,Number],
				default:'dl'
			}
		},
		data(){
			return{
				viewData:{
					entId: undefined,
					dangerId: 0,
					dangerCatId: 1,
					dangerCatTitle: '',
					dangerTitle: '',
					dangerCode: '',
					dangerLocation: '',
					dangerLevel: 2,
					dangerDesc: '',
					submitTime: '',
					submitRemark: '',
					dangerDeadLine: '',
					rectifyTime: '',
					dangerReason: '',
					rectifyCat: 1,
					rectifyRemark: '',
					acceptTime: '',
					acceptRemark: '',
					finishTime: '',
					status: 0,
					attachList: []
				}
			}
		},
		methods:{
			formatDangerLevel(val){
				let dangerLevelOptions=['末知','重大','较大','一般','较小'];
				return dangerLevelOptions[val]
			},
			formatRectifyCat(val){
				let dangerLevelOptions=['自行整改','外协整改'];
				return dangerLevelOptions[val]
			},
			show(item){
				this.$refs.popup.open('bottom')
				this.viewData={...item}
			},
			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;
		}
		.attachbox{
			display: flex;
			flex-wrap: wrap;
			.attach{
				border: 1rpx solid #ccc;
				padding: 20rpx;
				box-shadow: rgba(0,0,0,0.6);
				border-radius: 10px;
				overflow: hidden;
				image{
					display: block;
					width: 200rpx;
					height: 200rpx;
				}
			}
		}
	}
</style>