uniapp/pages/processedDetail1/processedDetail1.vue

<template>
	<view class="dealDetail">
		<view class="timeBox flex justify-between align-center padding-lr-sm">
			<view class="time">{{type==1?detailMessage.time:detailMessage2.time}}</view>
			<button class="cu-btn radius bg-green sm">已处理</button>
		</view>
		<view v-if="type==1">
			<!-- 基本信息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">
					<view class="info-one-info ">
						<text>站点名称：</text>
						<text>{{detailMessage.siteName}}</text>
					</view>
					<view class="info-one-info ">
						<text>台区展示：</text>
						<text>等待对接中.....</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">
				<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 -->
		</view>
		
		<view v-else>
			<!-- 基本信息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">
					<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>
			<!-- 基本信息end -->
			<!-- 报警当前情况截图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="info-content">
					<view class="info-one-info ">
						<text>是否误报：</text>
						<text>{{detailMessage2.alarmStatus?'误报':'非误报'}}</text>
					</view>
					<view>
						<text>处理人：</text>
						<text>{{detailMessage2.handler}}</text>
					</view>
					<view>
						<text>处理时间：</text>
						<text>{{detailMessage2.handlerTime}}</text>
					</view>
					<view>
						<text>处理内容：</text>
						<text>{{detailMessage2.handlerContent}}</text>
					</view>
				</view>
			</view>
			<!-- 处理状态end -->
		</view>
		

	</view>
</template>

<script>
	//引入js sdk的封装
	import * as jwx from '../../util/jssdk.js'
	
	export default {
		data() {
			return {
				radio: 'A',
				radio: 'B',
				modalName: null,
				type: '0',
				detailMessage:{},
				detailMessage2:{}
			}
		},
		mounted(){
			document.querySelector('.uni-page-head-hd').style.display = 'none'
		},
		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.getVideoDetail({"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 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)
				
				
				// window.location.href =  'http://apis.map.qq.com/uri/v1/marker?marker=coord:'+parseFloat(this.detailMessage.latitude)+','+parseFloat(this.detailMessage.longitude)+''
			
				// uni.openLocation({
				// 	latitude: parseInt(this.detailMessage.latitude),
				// 	longitude: parseInt(this.detailMessage.longitude),
				// 	success: function() {
				// 		console.log('success');
				// 	}
				// });
				
				
				// 微信公众号导航
				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',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			RadioChange(e) {
				this.radio = e.detail.value
			},
			textareaAInput(e) {
				this.textareaAValue = 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
	}
</style>