SHZHJCYJPTYWXTAPP/pages-yj/yjxt/warn/yjwarndetail.vue

<template>
	<view class="wrap">
		<uni-nav-bar dark :fixed="true" backgroundColor="#3F9EFF" statusBar="false" left-icon="left" left-text="返回"
			@clickLeft="toBack">
			<view class="nav-title">
				<text>{{title}}</text>
			</view>
		</uni-nav-bar>
		<view class="container" style="padding-left: 10px;padding-right: 10px;padding-top: 10px;">
			<view v-if="data.warnResponseStatus==1">
				<view class="point">
					<view class="dot">
						4
					</view>
					<view class="time-title">响应反馈【{{data.replyTm}}】</view>
				</view>
				<view class="time-info">
					<view class="time-line">
						<uni-list style="width: 100%;">
							<uni-list-item v-for="(item,index) in data.warnResponseInfoList" :key="index"
								direction="column">
								<template v-slot:body>
									<view class="list-item-block">
										<view class="line">
											<view class="text">责任人：<span
													style="color: deepskyblue;">{{item.pcaName}}</span></view>
										</view>
										<view class="line">
											<view class="text">责任人类型：<span
													style="color: deepskyblue;">{{item.commType}}</span></view>
										</view>
										<view class="line">
											<view class="text">反馈情况：<span
													style="color: deepskyblue;">{{item.repltStatus}}</span></view>
										</view>
										<view class="line">
											<view class="text">反馈时间：<span
													style="color: deepskyblue;">{{item.replyTm}}</span></view>
										</view>
										<!-- 	<view>反馈内容：<span style="color: skyblue;"></span></view> -->
										<view class="line">
											<view class="text">是否收到预警短信：<span
													style="color: deepskyblue;">{{item.dxjs}}</span></view>
										</view>
										<view class="line">
											<view class="text">是否发生山洪：<span
													style="color: deepskyblue;">{{item.gdsh}}</span></view>
										</view>
										<view class="line">
											<view class="text">山洪是否已进村：<span
													style="color: deepskyblue;">{{item.sfcg}}</span></view>
										</view>
										<view class="line">
											<view class="text">降雨是否持续：<span
													style="color: deepskyblue;">{{item.isRainContu}}</span></view>
										</view>
										<view class="line">
											<view class="text">是否人员转移：<span
													style="color: deepskyblue;">{{item.ryzy}}</span></view>
										</view>
										<view class="line">
											<view class="text">有无人员伤亡：<span
													style="color: deepskyblue;">{{item.rysw}}</span></view>
										</view>
									</view>
								</template>
							</uni-list-item>
						</uni-list>
					</view>
				</view>
			</view>
			<view v-if="data.ousideWarnStatus==1">
				<view class="point">
					<view class="dot">
						3
					</view>
					<view class="time-title">外部预警【{{data.extTime}}】</view>
				</view>
				<view class="time-info">
					<view class="time-line">
						<uni-list style="width: 100%;">
							<uni-list-item v-for="(item,index) in data.outsideWarnInfoList" :key="index"
								direction="column">
								<template v-slot:body>
									<view class="list-item-block">
										<view class="line">
											<view class="text ">发布单位：<span
													style="color: deepskyblue;">{{item.deptName}}</span></view>
										</view>
										<view class="line">
											<view class="text ">发布人：<span
													style="color: deepskyblue;">{{item.senderName}}</span></view>
										</view>
										<view class="line">
											<view class="text">发布内容：<span
													style="color: deepskyblue;">{{item.messageInfo}}</span></view>
										</view>
									</view>
								</template>
							</uni-list-item>
						</uni-list>
					</view>
				</view>
			</view>
			<view>
				<view class="point">
					<view class="dot">
						2
					</view>
					<view class="time-title">内部预警【{{data.warnTime}}】</view>
				</view>
				<view class="time-info">
					<view class="time-line">
						<uni-list style="width: 100%;">
							<uni-list-item direction="column">
								<template v-slot:body>
									<view class="list-item-block">
										<view class="line">
											<view class="text">发布单位：<span style="color: deepskyblue;">系统自动</span></view>
										</view>
									</view>
								</template>
							</uni-list-item>
							<uni-list-item direction="column">
								<template v-slot:body>
									<view class="list-item-block">

										<view class="line">
											<view class="text">预警名称：<span
													style="color: deepskyblue;">{{data.warnName}}</span>
											</view>
										</view>
									</view>
								</template>
							</uni-list-item>
							<uni-list-item v-for="(item,index) in data.insideWarnInfoList" :key="index"
								direction="column">
								<template v-slot:body>
									<view class="list-item-block">
										<view class="line">
											<view class="text ">类型：<span
													style="color: deepskyblue;">{{item.sendObjectName}}</span></view>
										</view>
										<view class="line">
											<view class="text ">接收人：<span
													style="color: deepskyblue;">{{item.userName}}</span></view>
										</view>
										<view class="line">
											<view class="text">所在单位：<span
													style="color: deepskyblue;">{{item.deptName}}</span></view>
										</view>
										<view class="line">
											<view class="text">职务：<span
													style="color: deepskyblue;">{{item.posiTion}}</span></view>
										</view>
										<view class="line">
											<view class="text">电话：<span
													style="color: deepskyblue;">{{item.userTel}}</span></view>
										</view>
										<view class="line">
											<view class="text">短信内容：<span
													style="color: deepskyblue;">{{item.messageInfo}}</span></view>
										</view>
										<view class="line">
											<view class="text">发送时间：<span
													style="color: deepskyblue;">{{item.sendTime}}</span></view>
										</view>
										<view class="line">
											<view class="text">发送单位：<span style="color: deepskyblue;"></span></view>
										</view>
										<view class="line">
											<view class="text">发送人：<span
													style="color: deepskyblue;">{{item.senderName}}</span></view>
										</view>
										<view class="line">
											<view v-if="item.sendStatus ==0" class="text">发送状态：<span
													style="color: deepskyblue;">失败</span></view>
											<view v-else-if="item.sendStatus ==1" class="text">发送状态：<span
													style="color: deepskyblue;">成功</span></view>
										</view>
									</view>
								</template>
							</uni-list-item>
						</uni-list>
					</view>
				</view>
			</view>
			<view>
				<view class="point">
					<view class="dot">
						1
					</view>
					<view class="time-title">产生预警【{{data.warnTime}}】</view>
				</view>
				<view class="time-info">
					<view class="time-line">
						<uni-list style="width: 100%;">
							<uni-list-item direction="column">
								<template v-slot:body>
									<view class="list-item-block">
										<view class="line">
											<view class="text"><span
													style="color: deepskyblue;">{{data.warnInfo}}</span></view>
										</view>
									</view>
								</template>
							</uni-list-item>
						</uni-list>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import http from '@/http/api.js';
	export default {
		data() {
			return {
				title: '预警详情',
				warnId: '',
				data: {},
			}
		},
		onLoad(option) {
			this.warnId = option.id;
			this.getDetail();
		},
		computed: {

		},
		methods: {
			//返回上一页
			toBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			getDetail() {
				let that = this;
				http.request({
					url: '/galaxy-business/yj/warn/detail/all?id=' + this.warnId,
					method: 'GET'
				}).then(res => {
					if (res && res.success) {
						that.data = res.data;

					}
				}).catch(err => {
					console.log(JOSN.stringify(err))
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 0 0 100rpx;
	}

	.point {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 15rpx 0;
	}

	.dot {
		//margin-left: -22rpx;
		background-color: #19be6b;
		box-shadow: 0 0 5rpx 5rpx #71d5a1;
		color: white;
		width: 50rpx;
		height: 50rpx;
		padding: 5rpx;
		font-size: 28rpx;
		text-align: center;
		border-radius: 50rpx;
	}

	.time-title {
		font-size: 30rpx;
		margin-left: 15rpx;
		background-color: whitesmoke;
		padding: 12rpx 25rpx;
		border-radius: 50rpx;
		color: orangered;
	}

	.time-info {
		padding: 0rpx 0rpx 0rpx 25rpx;
	}

	.time-line {
		border-left: 3rpx solid #71d5a1;
		padding: 10rpx 10rpx 30rpx 20rpx;
	}
</style>