ROBOT-APP/code/HBX/pages/webview/newsDetail.vue

<template>
	<view class="page">
		<view class="newsDetail">
			<view class="n-d1">
				<text class="t1"></text>
				<text class="t2">告警信息</text>
			</view>
			<view class="n-d2">
				<text>告警对象</text>
				<text class="t2">{{dataObj.alarmFor}}</text>
			</view>
			<view class="n-d2">
				<text>告警内容</text>
				<text class="t2">{{dataObj.discernResult}}</text>
			</view>
			<view class="n-d2">
				<text>告警等级</text>
				<text class="t2">{{dataObj.alarmLevel | alarmLevel}}</text>
			</view>
			<view class="n-d2">
				<text>告警时间</text>
				<text class="t2">{{dataObj.createTime}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {readMsg} from '@/common/api.js'
	export default {
		data() {
			return {
				dataObj:{}
			}
		},
		filters:{
			alarmLevel(val){
				return val == 1 ? '预警' :val == 2 ?'一般告警': val == 3 ? '严重告警' : val == 4 ?'危急告警' :'正常'
			}
		},
		mounted() {
			this.dataObj = uni.getStorageSync("newsDetailxjapp")
			readMsg({
				msgId:this.dataObj.id
			}).then(res =>{
				console.log(res)
			}).catch(e =>{
				console.log(e)
			})
			
		},
		methods: {

		}
	}
</script>
<style scoped lang="scss">
	.page {
		background: #F9F9F9;
		height:calc(100vh - 30rpx);
		padding-top:30rpx ;
	}
	.newsDetail {
		background: #fff;
		margin:0rpx 18rpx 50rpx 18rpx;
		border-radius: 20rpx;
		padding: 38rpx 38rpx 0 38rpx;
		.n-d2{
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 30rpx;
			height: 90rpx;
			line-height: 90rpx;
			border-bottom: 1rpx solid #E5E5E5;
			color: #666666;
			.t2{
				font-weight: bold;
				color: #333;
			}
			&:last-child{
				border: none;
			}
		}
		.n-d1 {
			margin-bottom: 20rpx;
			.t1 {
				width: 7rpx;
				height: 24rpx;
				background: #0581FD;
				border-radius: 3px;
				display: inline-block;
				margin-right: 10rpx;
			}

			.t2 {
				font-size: 32rpx;
				color: #000;
				font-weight: bold;
			}
		}
	}
</style>