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>
		<!-- 电力start -->
		<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>{{detailMessage.siteName}}</text>
					</view>
					<view>
						<text>线路名称：</text>
						<text>{{detailMessage.deviceName}}</text>
					</view>
					<view>
						<text>警告信息：</text>
						<text>{{detailMessage.measValue}}</text>
					</view>
					<view>
						<text>警告状态：</text>
						<text>{{detailMessage.measValue?'动作':'复归'}}</text>
					</view>
					<view>
						<text>采集终端：</text>
						<text>{{detailMessage.deviceCode}}</text>
					</view>
					<view>
						<text>站点地址：</text>
						<text>{{detailMessage.address}}<text class="icon iconfont map" @click="mapLocation()">&#xe612;</text></text>
					</view>
					<view>
						<text>联系人：</text>
						<text>{{detailMessage.userName}}</text>
					</view>
					<view>
						<text>联系方式：</text>
						<text>
							{{detailMessage.phone}}
							<text class="phone icon iconfont" @click="submit()">&#xe61d;</text>
						</text>
					</view>
					<view>
						<text>运行数据：</text>
						<text class="checkMore" @tap="goOpeDataDetail(detailMessage)">点击查看</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="">
						<view class="cu-form-group">
							<!-- <textarea maxlength="-1" :disabled="modalName!=null" @input="textareaAInput" placeholder="备注信息,最多可输入50个字..."></textarea>-->
							<textarea class="JTxtArea lg" v-model="msg" placeholder="备注信息,最多可输入50个字..." :maxlength="50" :data-maxnum="reason.length+'/50'"
							 auto-height></textarea>
						</view>

						<view class="btn-area">
							<!-- <button class="bg-orange round missReport margin-top">误 报 </button> -->
							<button class="bg-blue round  missReport margin-top" @click="powerSubmit()">告警确认 </button>
						</view>

					</form>



				</view>
			</view>
			<!-- 处理状态end -->
		</view>
		<!-- 电力end-->


		<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>{{detailMessage2.deviceName}}</text>
					</view>

					<view>
						<text>设备地址：</text>
						<text>{{detailMessage2.deviceAddress}}</text>
					</view>
					<view>
						<text>告警信息：</text>
						<text>{{detailMessage2.alarmInformation}}</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="detailMessage2.alarmPicture" 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="">
						<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="msg2"></textarea>
						</view>
						<view class="btn-area">
							<button class="bg-orange round missReport margin-top" @click="videoMissSubmit()">误 报 </button>
							<button class="bg-blue round  missReport margin-top " @click="videoSubmit()">告警确认 </button>
						</view>
					</form>



				</view>
			</view>
			<!-- 处理状态end -->
		</view>





	</view>
</template>

<script>
	export default {
		data() {
			return {
				radio: 'A',
				radio: 'B',
				modalName: null,
				reason: '',
				type: '0',
				detailMessage: {},
				detailMessage2: {},
				msg: '',
				msg2: '',
				flag:false

			}
		},
		onLoad: function(option) {
			this.type = option.type;
			this.companyCode = option.companyCode;
			this.processingStatus = option.processingStatus;
			this.alarmId = option.id;
			if (this.type == 1) {
				this.getUnProcessDetail({
					"companyCode": option.companyCode,
					"processingStatus": option.processingStatus,
					"alarmId": option.id
				})
			} else {
				this.getUnProcessDetail2({
					"companyCode": option.companyCode,
					"processingStatus": option.processingStatus,
					"alarmId": option.id
				})

			}

		},
		methods: {

			async getUnProcessDetail(ming = {}) { 
				const res = await this.$myRequest({
					url: 'IntegratedAlarm/getPowerAlarmDetails',
					data: ming
				})
				console.log(res.data.data[0]);
				this.detailMessage = res.data.data[0]
			},

			async getUnProcessDetail2(ming = {}) { 
				const res = await this.$myRequest({
					url: 'IntegratedAlarm/getVideoAlarmDetails',
					data: ming
				})
				console.log(res.data.data[0]);
				this.detailMessage2 = res.data.data[0]
			},

			async powerSubmitRes(ming = {}) {
				const res = await this.$myRequest({
					url: 'IntegratedAlarm/setAlarmHandle',
					data: ming
				})
			   if(res.data.flag){
				  uni.showToast({
				  	title: "提交成功",
				  });
				  this.msg='',
				  this.msg2=''
			   }
				
			},

			powerSubmit() {
				if(!this.msg){
					uni.showToast({
						title: "请输入处理内容",
						icon:"none"
					});
				}else{
					this.powerSubmitRes({
						"type": 1,
						"deviceCode": this.detailMessage.deviceCode,
						"companyCode": this.companyCode,
						"id": this.detailMessage.id,
						"handlerContent": this.msg
					})
				}
			},
			
			videoSubmit() {
				if(!this.msg2){
					uni.showToast({
						title: "请输入处理内容",
						icon:"none"
					});
				}else{
					this.powerSubmitRes({
						"alarmStatus": 0,
						"type": 2,
						"deviceCode": this.detailMessage2.deviceCode,
						"companyCode": this.companyCode,
						"id": this.detailMessage2.id,
						"handlerContent": this.msg2
					})
					
				}
			
				
			},
			videoMissSubmit() {
				if(!this.msg2){
					uni.showToast({
						title: "请输入处理内容",
						icon:"none"
					});
				}else{
					this.powerSubmitRes({
						"alarmStatus": 1,
						"type": 2,
						"deviceCode": this.detailMessage2.deviceCode,
						"companyCode": this.companyCode,
						"id": this.detailMessage2.id,
						"handlerContent": this.msg2
					})
				}
				
				
			},


			submit() {
				uni.makePhoneCall({
					phoneNumber: '15122423833' //仅为示例
				});
			},

			mapLocation() {
				uni.openLocation({
					latitude: parseInt(this.detailMessage.latitude),
					longitude: parseInt(this.detailMessage.longitude),
					success: function() {
						console.log('success');
					}
				});
			},

			// 页面跳转
			goOpeDataDetail(detailMessage) {
				uni.navigateTo({
					url: '/pages/unprocessDetail/opeDataDetail/opeDataDetail?companyCode=' + this.companyCode + '&deviceCode=' +
						detailMessage.deviceCode + '&deviceType=' + this.type + '',
					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>