emergencyManagement/packageA/pages/industry/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.entName" title ="企业名称" ></uni-list-item>						
				<uni-list-item :rightText="viewData.entCatTitle" title ="企业分类" ></uni-list-item>
				<uni-list-item :rightText="viewData.entUscc" title ="统一信用编码"></uni-list-item>		
				<uni-list-item :rightText="viewData.entLegalRepresentative" title ="法定代表人"></uni-list-item>						
				<uni-list-item :rightText="viewData.entBusinessScope" title ="经营范围"></uni-list-item>													
				<uni-list-item :rightText="viewData.entAddress" title ="生产经营地址"></uni-list-item>													
				<uni-list-item :rightText="viewData.charger" title ="负责人"></uni-list-item>																		
				<uni-list-item :rightText="viewData.chargerPhone" title ="负责人电话"></uni-list-item>																			
				<uni-list-item :rightText="viewData.safetyManager" title ="安全负责人"></uni-list-item>						
				<uni-list-item :rightText="viewData.safetyManagerPhone" title ="安全负责人电话"></uni-list-item>																																	
				<uni-list-item :rightText="viewData.staffNum" title ="从业人员数量"></uni-list-item>																										
				<uni-list-item :rightText="viewData.staffSpecialNum" title ="特种作业人员数量"></uni-list-item>						
				<uni-list-item :rightText="viewData.staffSafetyNum" title ="专职安全生产管理人员数量"></uni-list-item>																																		
				<uni-list-item :rightText="viewData.staffCertifiedEngineerNum" title ="注册安全工程师人员数"></uni-list-item>																																																							
<!-- 				<uni-list-item :rightText="viewData.safetyStandardLevel" title ="安全标准化等级">	</uni-list-item>	 -->				
				<uni-list-item :rightText="viewData.staffSafetyNum" title ="安全许可证号码"></uni-list-item>												
				<uni-list-item title="备注" :note="viewData.remark"></uni-list-item>														
			</uni-list>	
			<view class="camerasbox">
				<view class="item" v-for="item in cameras" :key="item.cameraId">
					<view class="item-card">
						<view class="title" v-if="item.cameraTitle">{{item.cameraTitle}}</view>
						<uni-icons type="videocam-filled" size="40" color="#999" @click="showCamera(item)"></uni-icons>
					</view>		
				</view>		
			</view>			
		</view>
	</uni-popup>
</template>

<script>
	import industry from '@/api/industry.js'
	export default{
		name:"DisasteDetail",
		props:{
			type:{
				type:[String,Number],
				default:'dl'
			}
		},
		data(){
			return{
				viewData:{
					groupId: 0,
					groupName: '',
					dlName: '',
					dlAddress: '',
					dlCatId: 1,
					dlLevelId: 1,
					dlPeopleNum: 0,
					dlHouseNum: 0,
					remark: '',
					//水库淤堤坝详情
					rdId: 0,
					rdName: '',
					rdAddress: '',
					respName: '',
					respPhone: ''
				},
				cameras:[]
			}
		},
		methods:{
			showCamera(item){
				uni.navigateTo({
					url:`/pages/webview/webview?id=${item.cameraId}&title=${item.cameraTitle}`
				})
			},
			show(item){
				this.$refs.popup.open('bottom')
				this.viewData={...item}
				if(item.cameraNum>0){
					this.getCameras()
				}
			},
			getCameras(){
				industry.getCameraByListWithEnt(this.viewData.entId).then((res)=>{
					this.cameras=res.data;
				})
			},
			close(){
				this.$refs.popup.close()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.detail-cont{
		&{
			max-height: 80vh;
			overflow-y: auto;
		}
		.camerasbox{
			width:100%;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			background-color: #fff;
			.item{
				width: 33.33%;		
				padding: 20rpx;
				background-color: #fff;
				box-sizing: border-box;
				.item-card{
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					box-shadow: 0 0 1px rgba(0,0,0,0.6);
					padding: 20rpx;
					.title{
						width: 100%;
						font-size: 24rpx;
						color: #424242;
						line-height: 1.4;
						padding-bottom: 15rpx;
						overflow:hidden;
						text-overflow:ellipsis;
						white-space:nowrap;
					}
				}
			}
		}		
	}
</style>