uniapp2/pages/processDetailEle/processDetailEle.vue

<template>
	<view class="dealDetail">
		<view class="timeBox flex justify-between align-top padding-sm " style="height:auto;">
			<view >
				<view>发生时间：{{detailMessage.time}}</view>
				<view  v-if="handling_status!=0">告警历时：{{detailMessage.duration}}</view>
				<view  v-if="handling_status!=0">关联告警：{{detailMessage.handlerTime}}</view>
				<view  v-if="handling_status!=0" style="color:#4074E7">
					【{{detailMessage.route_name}}】设备低压-{{detailMessage.digitalValue=='1'?'动作':'复归'}}</view>
			</view>
			<button v-if="handling_status==0" class="cu-btn radius bg-red sm margin-top-sm">未处理</button>
			<button v-if="handling_status==1" class="cu-btn radius bg-green sm margin-top-sm">已处理</button>
			<button v-if="handling_status==2" class="cu-btn radius bg-orange sm margin-top-sm">待确认</button>
			<button v-if="handling_status==3" class="cu-btn radius bg-blue sm margin-top-sm">自动恢复</button>
			<button v-if="handling_status==4" class="cu-btn radius bg-gray sm margin-top-sm">过期失效</button>
			
			
			
		</view>


		<view>
			<!-- 基本信息start -->
			<view class="basic-info dealDetail">
				<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 class="info-one-info ">
						<text>台区展示：</text>
						<text>{{detailMessage.platform_area_name}}</text>
					</view>
					<view>
						<text>线路名称：</text>
						<text>{{detailMessage.deviceName}}</text>
					</view>
					<view>
						<text>警告信息：</text>
						<text>{{detailMessage.measValue}}</text>
					</view>
					<view>
						<text>警告状态：</text>
						<text>{{detailMessage.digitalValue=='1'?'动作':'复归'}}</text>
					</view>
					<view>
						<text>采集终端：</text>
						<text>{{detailMessage.deviceCode}}</text>
					</view>
					<view>
						<text>站点地址：</text>
						<text>{{detailMessage.address}}<i class="icon iconfont map"
								@click="mapLocation()">&#xe612;</i></text>
					</view>
					<view>
						<text>联系人：</text>
						<text>{{detailMessage.userName}}</text>
					</view>
					<view>
						<text>联系方式：</text>
						<text>{{detailMessage.phone}}<i class="phone icon iconfont"
								@click="submit()">&#xe61d;</i></text>
					</view>
					<view>
						<text>运行数据：</text>
						<text class="checkMore" @tap="goOpeDataDetail(detailMessage)">点击查看</text>
					</view>
					<view>
						<text>视频：</text>
						<text class="checkMore" @tap="goVideoDetail">点击查看</text>
					</view>
					<view>
						<text>现场档案：</text>
						<text class="checkMore" @tap="goArchiveDetail">点击查看</text>
					</view>
				</view>
			</view>
			<!-- 基本信息end -->
			
			
			<!-- 处理信息start -->
			<view class="processStatus" v-if="handling_status!=0">
				<view class="info-tit margin-left-xs">
					<text class="cuIcon-titles margin-right-xs"></text>
					处理信息
				</view>
				<view class="info-content">

					<view>
						<text>处理人：</text>
						<text>{{detailMessage.handler}}</text>
					</view>
					<view>
						<text>处理时间：</text>
						<text>{{detailMessage.handlerTime}}</text>
					</view>
					<view>
						<text>处理内容：</text>
						<text>{{detailMessage.handlerContent}}</text>
					</view>

				</view>


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

			<!-- 处理状态start -->
			<view class="processStatus" v-if="this.handling_status==2||this.handling_status==0">
				<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 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-blue round  missReport margin-top" @click="powerSubmit()">告警确认 </button>
						</view>
					</form>
				</view>
			</view>
			<!-- 处理状态end -->
		</view>
	</view>


	</view>
</template>

<script>
	//引入js sdk的封装
	import * as jwx from '../../util/jssdk.js'

	export default {
		data() {
			return {
				msg: '',
				reason: '',
				radio: 'A',
				radio: 'B',
				modalName: null,
				type: '0',
				detailMessage: {},
				handling_status: 0
			}
		},
		onLoad: function(option) {
			this.handling_status = option.handling_status;
			this.type = option.type;
			this.companyCode = option.companyCode;
			this.processingStatus = option.handling_status;
			this.alarmId = option.id;
			
			if (option.handling_status!=0) {
				uni.setNavigationBarTitle({
					title: '已处理'
				});
			} else {
				uni.setNavigationBarTitle({
					title: '未处理'
				});
			}

			this.getUnProcessDetail({
				"companyCode": option.companyCode,
				"processingStatus": option.handling_status,
				"alarmId": option.id
			})


		},
		methods: {

			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
					})
				}
			},

			async powerSubmitRes(params = {}) {
				const res = await this.$myRequest({
					url: 'IntegratedAlarm/setAlarmHandle',
					data: params
				})

				if (res.data.flag) {
					uni.showToast({
						title: "提交成功",
					});
				}

				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/processList/processList?companyCode=' + this.companyCode +
							'&type=' + this.type + '',

					});
				}, 1000);


			},

			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 getVideoDetail(ming = {}) {
				const res = await this.$myRequest({
					url: 'IntegratedAlarm/getVideoAlarmDetails',
					data: ming
				})
				console.log(res.data.data[0]);
				this.detailMessage2 = res.data.data[0]
			},

			submit() {
				uni.makePhoneCall({
					phoneNumber: this.detailMessage.phone
				});
			},

			mapLocation() {
				console.log(this.detailMessage)
				// 微信公众号导航
				jwx.configWeiXin(jweixin => {
					let shareInfo = {
						latitude: parseFloat(this.detailMessage.latitude), // 纬度，浮点数，范围为90 ~ -90
						longitude: parseFloat(this.detailMessage.longitude), // 经度，浮点数，范围为180 ~ -180。
						name: this.detailMessage.siteName, // 位置名
						address: this.detailMessage.address, // 地址详情说明
						scale: 15, // 地图缩放级别,整型值,范围从1~28。默认为最大
					};
					jweixin.openLocation(shareInfo);
				});
			},

			// 页面跳转
			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/videoList/videoList?deviceType=2&companyCode=' + this.detailMessage.siteId + '',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			goArchiveDetail() {
				uni.navigateTo({
					url: '/pages/siteArchive/archiveDetail/archiveDetail?siteId=' + this.detailMessage.siteId,
					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">
	.timeBox {
		height: 88rpx;
		background: #EFF4FF;
		line-height: 88rpx;

		.time {
			color: #333
		}
	}

	.info-tit {
		color: #4074E7;
		line-height: 90rpx;
		height: 90rpx;
	}

	// 基本信息
	.info-content>view {
		margin-left: 24rpx;
		border-bottom: 1px solid #EDEDED;
		line-height: 92rpx;
		color: #666;
	}

	.info-content view text:first-child {
		width: 160rpx;
		display: inline-block
	}

	/* // 处理内容 */
	.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>