uniapp/pages/unprocessDetail/unprocessDetail.vue

<template>
	<view>
		<view class="timeBox flex justify-between align-center padding-lr-sm">
			<view class="time">2021-01-18 15:16:45</view>
			<button class="cu-btn radius bg-red sm">未处理</button>
		</view>
		<view v-if="type==1">
			<view class="basic-info" >
				<view class="info-tit margin-left-xs">
					<text class="cuIcon-titles margin-right-xs"></text>
					基本信息
				</view>
				<view class="info-content">
					<view class="info-one-info ">
						<text>站点名称：</text>
						<text>测试站点一</text>
					</view>
					<view>
						<text>线路名称：</text>
						<text>进线一</text>
					</view>
					<view>
						<text>警告信息：</text>
						<text>母线停电</text>
					</view>
					<view>
						<text>警告状态：</text>
						<text>复归</text>
					</view>
					<view>
						<text>采集终端：</text>
						<text>DA00012784</text>
					</view>
					<view>
						<text>站点地址：</text>
						<text>沪太路8786弄155号<text class="icon iconfont map" @click="mapLocation()">&#xe612;</text></text>
					</view>
					<view>
						<text>联系人：</text>
						<text>韩正义</text>
					</view>
					<view>
						<text>联系方式：</text>
						<text>
							15122423833
							<text class="phone icon iconfont" @click="submit()">&#xe61d;</text>
						</text>
					</view>
					<view>
						<text>运行数据：</text>
						<text class="checkMore" @tap="goOpeDataDetail">点击查看</text>
					</view>
					<view>
						<text>视频：</text>
						<text class="checkMore" @tap="goVideoDetail">点击查看</text>
					</view>
				</view>
			</view>
			<!-- 处理状态start -->
			<view class="processStatus">
				<view class="info-tit margin-left-xs">
					<text class="cuIcon-titles margin-right-xs"></text>
					处理内容
				</view>
				<view class="padding-lr padding-bottom-lg">
					<form action="">
						<!-- <radio-group class="block" @change="RadioChange">
							<view class=" flex align-center ">
								<radio class="blue mr-sm margin-right-xs" :class="radio=='A'?'checked':''" :checked="radio=='A'?true:false"
								 value="A"></radio>
								<view class="title">单个处理</view>
								<radio class="blue margin-left-lg margin-right-xs" :class="radio=='B'?'checked':''" :checked="radio=='B'?true:false"
								 value="B"></radio>
								<view class="title ">批量处理</view>
							</view>
						</radio-group> -->
			
						<view class="cu-form-group">
							<!-- <textarea maxlength="-1" :disabled="modalName!=null" @input="textareaAInput" placeholder="备注信息,最多可输入50个字..."></textarea>-->
							<textarea class="JTxtArea lg" placeholder="备注信息,最多可输入50个字..." :maxlength="50" :data-maxnum="reason.length+'/50'"
							 auto-height v-model="reason"></textarea>
						</view>
			
						<view class="btn-area">
							<!-- <button class="bg-orange round missReport margin-top">误 报 </button> -->
							<button class="bg-blue round  missReport margin-top ">告警确认 </button>
						</view>
			
					</form>
			
			
			
				</view>
			</view>
			<!-- 处理状态end -->
		</view>
		
		<view v-else>
			<view class="basic-info">
				<view class="info-tit margin-left-xs">
					<text class="cuIcon-titles margin-right-xs"></text>
					基本信息
				</view>
				<view class="info-content">
					<view class="info-one-info ">
						<text>设备名称：</text>
						<text>火点侦测摄像机</text>
					</view>
					
					<view>
						<text>设备地址：</text>
						<text>上海市虹口区塘沽路伍继办公室</text>
					</view>
					<view>
						<text>告警信息：</text>
						<text>火点/高温检测告警</text>
					</view>
				</view>
			</view>
			<!-- 报警当前情况截图start -->
			<view class="basic-info">
				<view class="info-tit margin-left-xs">
					<text class="cuIcon-titles margin-right-xs"></text>
					报警当前情况截图
				</view>
				<view class="info-content padding-lr-lg">
					<image src="../../static/video-img.png" style="width:100%"></image>
				</view>
			</view>
			<!-- 报警当前情况截图end -->
			<!-- 处理状态start -->
			<view class="processStatus">
				<view class="info-tit margin-left-xs">
					<text class="cuIcon-titles margin-right-xs"></text>
					处理内容
				</view>
				<view class="padding-lr padding-bottom-lg">
					<form action="">
						<!-- <radio-group class="block" @change="RadioChange">
							<view class=" flex align-center ">
								<radio class="blue mr-sm margin-right-xs" :class="radio=='A'?'checked':''" :checked="radio=='A'?true:false"
								 value="A"></radio>
								<view class="title">单个处理</view>
								<radio class="blue margin-left-lg margin-right-xs" :class="radio=='B'?'checked':''" :checked="radio=='B'?true:false"
								 value="B"></radio>
								<view class="title ">批量处理</view>
							</view>
						</radio-group> -->
			
						<view class="cu-form-group">
							<!-- <textarea maxlength="-1" :disabled="modalName!=null" @input="textareaAInput" placeholder="备注信息,最多可输入50个字..."></textarea>-->
							<textarea class="JTxtArea lg" placeholder="备注信息,最多可输入50个字..." :maxlength="50" :data-maxnum="reason.length+'/50'"
							 auto-height v-model="reason"></textarea>
						</view>
						<view class="btn-area">
							<button class="bg-orange round missReport margin-top">误 报 </button>
							<button class="bg-blue round  missReport margin-top ">告警确认 </button>
						</view>
					</form>
			
			
			
				</view>
			</view>
			<!-- 处理状态end -->
		</view>
		
		
		
		

	</view>
</template>

<script>
	export default {
		data() {
			return {
				radio: 'A',
				radio: 'B',
				modalName: null,
				reason: '',
				type: '0'
			}
		},
		onLoad: function(option) {
			console.log(option.type); //打印出上个页面传递的参数。
			this.type = option.type;
		},
		methods: {
			submit() {
				uni.makePhoneCall({
					phoneNumber: '15122423833' //仅为示例
				});
			},
			mapLocation() {
				uni.openLocation({
					latitude: 31.469465,
					longitude: 121.327514,
					success: function() {
						console.log('success');
					}
				});


			},

			// 页面跳转
			goOpeDataDetail() {
				uni.navigateTo({
					url: '/pages/unprocessDetail/opeDataDetail/opeDataDetail',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			goVideoDetail() {
				uni.navigateTo({
					url: '/pages/unprocessDetail/videoDetail/videoDetail',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});

			},


			RadioChange(e) {
				this.radio = e.detail.value
			},
			textareaAInput(e) {
				this.textareaAValue = e.detail.value
			},
			// textarea
			inputReason(e) {
				this.reason = e.detail.value;
			}


		}
	}
</script>

<style lang="scss">
	/* // 处理内容 */
	.cu-form-group {
		background: #f5f5f5;

	}

	.processStatus {
		textarea {
			background: #F5F5F5;
			color: #999999;
		}
	}
	// textarea
	.JTxtArea {
		position: relative;

		&.sm {
			min-height: 60rpx;
		}

		&.lg {
			min-height: 100rpx;
		}

		&:after {
			content: attr(data-maxnum);
			position: absolute;
			right: 10rpx;
			bottom: 0px;
		}
	}
</style>