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

<template>
	<view class="detail">
		<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 v-if="type==='dl'">
					<uni-list-item title="地质灾害点名称" :rightText="viewData.dlName"></uni-list-item>
					<uni-list-item title="地理位置" :rightText="viewData.dlAddress"></uni-list-item>
					<uni-list-item title="灾害类别" :rightText="viewData.disasterCatTitle"></uni-list-item>
					<uni-list-item title="规模等级" :rightText="viewData.disasterLevelTitle"></uni-list-item>
					<uni-list-item title="威胁人数" :rightText="viewData.dlPeopleNum"></uni-list-item>
					<uni-list-item title="威胁房屋" :rightText="viewData.dlHouseNum"></uni-list-item>		
					<uni-list-item title="备注" :note="viewData.remark"></uni-list-item>														
				</uni-list>	
				<uni-list v-if="type==='rd'">
					<uni-list-item title="监管单位" :rightText="viewData.groupName"></uni-list-item>
					<uni-list-item title="水库堤坝名称" :rightText="viewData.rdName"></uni-list-item>
					<uni-list-item title="地址" :rightText="viewData.rdAddress"></uni-list-item>
					<uni-list-item title="责任人" :rightText="viewData.respName"></uni-list-item>
					<uni-list-item title="责任人电话" :rightText="viewData.respPhone"></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>
		<CameraModal ref="camera"></CameraModal>		
	</view>
</template>

<script>
	import disasterApi from '@/api/disaster.js'
	import {getVideoInfo} from '@/api/system.js'
	import CameraModal from '@/components/CameraModal.vue'
	export default{
		name:"DisasteDetail",
		components:{
			CameraModal
		},
		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){
				// getVideoInfo(cameraId).then((res)=>{
				// 	let cameraHttp=res.data.cameraHttp;
				// 	if(cameraHttp){
				// 		this.$refs.camera.show({title:res.data.cameraTitle,src:cameraHttp})
				// 	}
				// })
				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(){
				const id=this.type==='dl'?this.viewData.dlId:this.viewData.rdId;
				disasterApi.getCameraByListWithLocation(id).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>