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

<template>
	<view>
		<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" style="width: 60%;">
					报警内容
				</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 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,
				reasonList: ['错误告警','设备已自动恢复','不需要上门解决','平台移桩，可忽视','其他'],
				current: 0,
				myLineChart: null
			}
		},
		onLoad(op) {
			if(op.id) {
				this.id = op.id;
				this.getAlarmRecordDetails(this.id);
			}
		},
		onReady() {
			// this.getLineCharts();
		},
		methods: {
			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.remoteMonitorMeter;
					this.alarmRecord = response.data.alarmRecord;
					this.alarmConfig = response.data.alarmConfig;
				}).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);
			}

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

				.reason {
					display: inline-block;
					width: 160rpx;
					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);
			}
		}
	}
</style>