jp-housekeep-electric/pages/abnormal/abnormalContrastDetails.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">
					查询设备
				</view>
				<view class="value equipment">
					{{companyInfo.name}}-{{remoteMonitorMeter.name}}
				</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">
					{{createTime}}
				</view>
			</view>

			<view>


				<view class="item" @click="orderByShow=true">
					<view class="title">
						三项电流详情（A）
					</view>
					<view>
						{{orderByIndex.label}}
						<u-icon name="arrow-down"></u-icon>
					</view>
				</view>
				<view class="item">
					<table class="border-table ">
							  <tr>
							    <td>设备名称</td>
							   
								<td  :class="{
									orderByIndex:(orderByIndex.value==0||orderByIndex.value==2)
								}">A相</td>
								 <td  :class="{
									orderByIndex:(orderByIndex.value==0||orderByIndex.value==1)
								}">B相</td>
								<td  :class="{
									orderByIndex:(orderByIndex.value==1||orderByIndex.value==2)
								}">C相</td>
								
							  </tr> 
							   <tr v-for="(item,i) in childDcMap" :key="i" :class="{
								   childDcMap:i==0
							   }">
								 <td >{{item.meterName}}</td>
							     <td  :class="{
									orderByIndex:(orderByIndex.value==0||orderByIndex.value==2)
								}">{{item.dcAA}}</td>
							     <td  :class="{
									orderByIndex:(orderByIndex.value==0||orderByIndex.value==1)
								}">{{item.dcBa}}</td>
							   	<td  :class="{
									orderByIndex:(orderByIndex.value==1||orderByIndex.value==2)
								}">{{item.dcCa}}</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: {},
				createTime: "",
				orderByList: [{
					value: "0",
					label: "按A与B的差值排序"
				}, {
					value: "1",
					label: "按B与C的差值排序"
				}, {
					value: "2",
					label: "按C与A的差值排序"
				}, ]
			}
		},
		onLoad(op) {
			if (op.id) {
				this.id = op.id;
				//	this.getAlarmRecordDetails(this.id);
				this.getAlarmRecordTPUDetails()
			}
			this.createTime = new Date().toLocaleString()
			this.orderByIndex = this.orderByList[0]
		},
		onReady() {
			// this.getLineCharts();
		},
		methods: {
			childDcMapsort() {
				var value = this.orderByIndex.value
				var childDcMap = []
				var id = this.remoteMonitorMeter.id;
				if (it1.meterId == id) {

					return -1
				}
				if (it2.meterId == id) {

					return 1
				}
				this.childDcMap.sort((it1, it2) => {
					if (value == '0') {
						return it1.abDifference < it2.abDifference ? 1 : -1
					} else if (value == '1') {
						return it1.bcDifference < it2.bcDifference ? 1 : -1
					} else if (value == '2') {
						return it1.acDifference < it2.acDifference ? 1 : -1
					}
				})
			},
			orderconfirm(e) {
				console.log(e)
				this.orderByIndex = e[0]
				this.childDcMapsort()
			},
			getAlarmRecordTPUDetails(id, meterId) {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.alarmRecordTPUDetails({
					meterId: this.id,
					//	id:id,
				}).then((response) => {
					uni.hideLoading();
					this.childDcMap = response.data.childDcMap;
					this.companyInfo = response.data.companyInfo;
					this.remoteMonitorMeter = response.data.meter;

					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.remoteMonitorMeter = response.data.meter;

					this.remoteMonitorRecord = response.data.remoteMonitorRecord;
					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;
		}
	}

	.orderByIndex {
		font-weight: bold;
		background-color: #CDDC39;
	}

	.childDcMap td {
		background-color: #1677FF !important;
		color: #fff !important;
	}
</style>