jp-housekeep-electric/pages/abnormal/abnormalAlarmDetails.vue

<template>
	<view>
		<u-select v-model="orderByShow" @confirm="orderconfirm" :default-value="[orderByIndex.value]"	 :list="orderByList" ></u-select>
		<u-navbar title="异常告警详情" title-color="#101010"></u-navbar>
		<view class="main">
			<view class="item">
				<view class="title">
					<!-- 告警单号：A100001 -->
					告警类型
				</view>
				<view class="value">
					<text class="reason">{{alarmConfig.name}}</text>
				</view>
			</view>
			<view class="item">
				<view class="title">
					告警设备
				</view>
				<view class="value equipment">
					{{companyInfo.name}}-{{remoteMonitorMeter.name}}
				</view>
			</view>
			<view class="item">
				<view class="title">
					告警内容
				</view>
				<view class="value warning">
					{{alarmRecord.content}}
				</view>
			</view>
			<view class="item">
				<view class="title">
					地址
				</view>
				<view class="value ">
					{{remoteMonitorMeter.installationAddress}}
				</view>
			</view>
			<view class="item">
				<view class="title">
					告警时间
				</view>
				<view class="value">
					{{alarmRecord.createTime}}
				</view>
			</view>
			
			<view v-if="alarmConfig.code=='TPU'&&childDcMap&&childDcMap.length">
				
		
				<view class="item">
					<view class="title">
						查询数量
					</view>
					<view >
						 
						<span v-for="(item,i) in queryNumSz"
						 @click="queryNum=item,getAlarmRecordTPUDetails(id,remoteMonitorMeter.id)"
						 :class="{
							queryNum:1,
							queryNumIndex:item==queryNum
						}">
							{{item}}
						</span>
					
					</view>
				</view>
				<view class="item">
					  <table class="border-table ">
						  <tr>
						    <td>设备名称</td>
						   
							 <td v-for="(item,i) in keySz" :key="i" :class="'keySz'+i">
								 {{item.name}}
							 </td>
							
						  </tr> 
						   <tr v-for="(item1,j) in childDcMap" :key="i" :class="{
							   childDcMap:j==0
						   }">
							 <td >{{item1.meterName}}</td>
						    <td v-for="(item,i) in keySz" :key="i" :class="'keySz'+i">
						    		 {{item1[item.value]}}
						    </td>
						  
						   </tr> 
						  
					  </table>
				</view>
			
			</view>
			
			<!-- 异常记录 -->
			<view class="record-chat" v-if="false">
				<view class="title">
					异常记录
				</view>
				<view class="chat-box">
					<view class="date">
						2月4日温度监控
					</view>
					<view class="chat">
						<view id="lineEcharts" style="min-height:400rpx;">
						
						</view>
						<!-- <image class="img" src="@/assets/img/recordChat.png" mode=""></image> -->
					</view>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<view class="bottom" v-if="false">
			<button class="close" @click="closeShow=true">关闭警报</button>
			<button class="create" @click="gotoUrl('/pages/workOrderManagement/faultReport')">创建工单</button>
		</view>

		<!-- 关闭原因 -->
		<u-popup v-model="closeShow" mode="bottom" closeable close-icon-size="24" close-icon-color="#101010"
			border-radius="24">
			<view class="close-reason">
				<view class="title">
					请选择关闭原因：
				</view>
				<view class="reason-content">
					<view class="reason-item" v-for="(item,index) in reasonList" :key="index">
						<view class="item-title">
							{{item}}
						</view>
						<view class="item-value" @click="reasonClick(item,index)">
							<label class="radio">
								<radio name="reason" :checked="index === current" /><text></text>
							</label>
						</view>
					</view>
				</view>
				<view class="button-box">
					<button class="think" @click="closeShow=false">我在想想</button>
					<button class="confirm" @click="closeWorkOrder">确认关闭</button>
				</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	import * as echarts from 'echarts';
	import * as API from '@/apis/pagejs/index.js'
	
	export default {
		data() {
			return {
				companyInfo: {}, //企业
				remoteMonitorRecord: {}, //设备详细
				remoteMonitorMeter: {}, //设备
				alarmRecord: {}, //异常详细
				alarmConfig: {}, //异常详细
				id: '', //异常id
				closeShow: false,
				childDcMap:[],
				reasonList: ['错误告警','设备已自动恢复','不需要上门解决','平台移桩，可忽视','其他'],
				current: 0,
				myLineChart: null,
				orderByShow:false,
				orderByIndex:{},
				
				orderByList:[
					{
						value:"0",label:"按A与B的差值排序"
					},{
						value:"1",label:"按B与C的差值排序"
					},{
						value:"2",label:"按C与A的差值排序"
					},
				],
				queryNum:5,
				queryNumSz:[5,8,10,15],
				keySz:[],
			}
		},
		onLoad(op) {
			if(op.id) {
				this.id = op.id;
				this.getAlarmRecordDetails(this.id);
			}
			this.orderByIndex=this.orderByList[0]
		},
		onReady() {
			// this.getLineCharts();
		},
		methods: {
			childDcMapsort(){
				
				
			},
			orderconfirm(e){
				console.log(e)
				this.orderByIndex=e[0]
				this.childDcMapsort()
			},
			getAlarmRecordTPUDetails(id,meterId) {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.alarmRecordTPUDetails({
					meterId:meterId,
					id:id,
					queryNum:this.queryNum,
				}).then((response) => {
				
					uni.hideLoading();
						this.childDcMap=response.data.childDcMap;
						var sz=response.data.sort;
							this.keySz=[]
						for(var i in sz){
							
							var obj=sz[i].split(',')
							this.keySz.push({
								name:obj[0],
								value:obj[1]
							})
						}
				this.childDcMapsort()
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			getAlarmRecordDetails(id) {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.alarmRecordDetails(id).then((response) => {
					uni.hideLoading();
					this.companyInfo = response.data.companyInfo;
					this.remoteMonitorRecord = response.data.remoteMonitorRecord;
					this.remoteMonitorMeter = response.data.meter;
					this.alarmRecord = response.data.alarmRecord;
					this.alarmConfig = response.data.alarmConfig;
					if(this.alarmConfig.code=='TPU'){
						//	this.childDcMap=response.data.childDcMap;
						this.getAlarmRecordTPUDetails(id,this.remoteMonitorMeter.id)
					}
				
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			getLineCharts() {
				if (!this.myLineChart) {
					this.myLineChart = echarts.init(document.getElementById('lineEcharts'), null, {
						width: uni.upx2px(686),
						height: uni.upx2px(400)
					});
				}
				this.myLineChart.clear();
				
				var data1 = ['0-2点', '3-4点', '5-6点', '7-8点', '9-10点', '11-12点', '13-14点', '15-16点',
					'17-18点', '19-20点', '21-22点', '23-24点'
				];
				var data2 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
				
				var option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					legend: {
						show: false
					},
					grid: {
						top: '6%',
						left: '3%',
						right: '8%',
						bottom: '8%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						data: data1,
						axisLabel: {
							rotate: 40,
							interval: 0,
							textStyle: {
								color: "#333"
							}
						},
					},
					yAxis: {
						type: 'value',
						axisLabel: {
							formatter: '{value} °C'
						}
					},
					series: [{
						name: '温度',
						type: 'line',
						data: data2,
						itemStyle: {
							color: '#F39423'
						}
					}]
				};
			
				this.myLineChart.setOption(option);
			},
			reasonClick(item,index) {
				this.current = index;
			},
			closeWorkOrder() {
				uni.navigateTo({
					url: '/pages/workOrderManagement/workOrderDetails'
				})
				this.closeShow = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		background-color: #fff;

		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 28rpx 32rpx;
			border-bottom: 1px solid rgba(242, 242, 242, 1);

			.title {
				color: rgba(51, 51, 51, 1);
				 white-space: pre;
				 padding-right: 20rpx;
			}

			.value {
				color: rgb(16, 16, 16);
				font-size: 32rpx;

				.reason {
					display: inline-block;
					 padding:0 20rpx;
					line-height: 48rpx;
					border-radius: 4px;
					color: rgba(255, 61, 0, 1);
					border: 1px solid rgba(255, 61, 0, 1);
					font-size: 24rpx;
					text-align: center;
				}
			}

			.equipment {
				font-weight: bold;
			}

			.warning {
				color: rgba(255, 61, 0, 1);

			}
		}

		// 异常记录
		.record-chat {
			padding: 40rpx 32rpx;

			.title {
				color: rgba(51, 51, 51, 1);
				font-size: 32rpx;
			}

			.chat-box {
				padding: 24rpx 0;
				margin-top: 24rpx;
				border-radius: 8px;
				background: linear-gradient(180deg, rgba(255, 243, 208, 1) 0%, rgba(208, 236, 236, 0) 100%);

				.date {
					padding: 0 40rpx;
					margin-bottom: 24rpx;
					color: rgba(16, 16, 16, 1);
					font-weight: bold;
				}

				.img {
					width: 100%;
					height: 400rpx;
				}

			}
		}
	}

	// 底部
	.bottom {
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		padding: 20rpx 32rpx;
		justify-content: space-between;

		.close {
			width: 328rpx;
			line-height: 80rpx;
			border-radius: 4px;
			background-color: rgba(222, 225, 228, 1);
			color: rgba(51, 51, 51, 1);
			font-size: 32rpx;
		}

		.create {
			width: 328rpx;
			line-height: 80rpx;
			border-radius: 4px;
			background-color: rgba(22, 119, 255, 1);
			color: rgba(255, 255, 255, 1);
			font-size: 32rpx;
		}
	}
	
	//关闭原因
	.close-reason{
		padding: 32rpx;
		.title{
			color: rgba(16,16,16,1);
			font-size: 36rpx;
			font-weight: bold;
		}
		.reason-content{
			margin-top: 60rpx;
			.reason-item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 56rpx;
				.item-title{
					color: rgba(16,16,16,1);
					font-size: 32rpx;
				}
			}
		}
		.button-box{
			display: flex;
			.think{
				width: 328rpx;
				
				line-height: 80rpx;
				font-size: 32rpx;
				border-radius: 4px;
				background-color: rgba(222,225,228,1);
				color: rgba(51,51,51,1);
				
			}
			.confirm{
				width: 328rpx;
				
				line-height: 80rpx;
				font-size: 32rpx;
				border-radius: 4px;
				background-color: rgba(255,68,68,1);
				color: rgba(255,255,255,1);
			}
		}
	}
	
	.table1,.border-table{
		margin: 8rpx 0;
		width: 100%;
		   border-collapse: collapse;
		td{
			border: 1px solid #e7e7e7;
			text-align: end;
			
			padding: 16rpx 16rpx;
		}
		
		tr{
			 background-color:#f5f5f6 
		}
		tr{
			td:first-child{
				  
				text-align: start;
				min-width: 20%;
				max-width: 30%;
			}
			td:last-child{
				white-space: pre;
			}
		}
		
		.tr1{
			text-align: end;
				font-weight: bold;
		}
		 tr:nth-child(even) {  
		    background-color: #fff;  
		  }  
	}
	.keySz0,.keySz1{
		font-weight: bold;
		background-color: #f8f0a6;
	}
	.childDcMap td{
		background-color: #1677FF !important ;
		color:#fff !important ;
	}
	.queryNum{
		border: 1px solid #9E9E9E;
		    padding: 4rpx 16rpx;
		    margin: 8rpx ;
	}
	.queryNumIndex{
		    color: #fff;
		    background: #1677FF;
	}
</style>