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" v-if="false">
					<view class="title">
						查询数量
					</view>
					<view >
						 
						<span v-for="(item,i) in queryNumSz"
						 @click="queryNum=item,getAlarmRecordTPUDetails(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"
							  v-show="(item1[keySz[0].value]>5)&&j!=0||j==0"
							:key="j" :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: {},
				createTime: "",
				orderByList: [{
					value: "0",
					label: "按A与B的差值排序"
				}, {
					value: "1",
					label: "按B与C的差值排序"
				}, {
					value: "2",
					label: "按C与A的差值排序"
				}, ],
				queryNum:10,
				queryNumSz:[5,8,10,15],
				keySz:[],
			}
		},
		onLoad(op) {
			if (op.id) {
				this.id = op.id;
				//	this.getAlarmRecordDetails(this.id);
				this.getAlarmRecordTPUDetails()
			}
		
			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: this.id,
					queryNum:this.queryNum
					//	id:id,
				}).then((response) => {
					this.createTime = new Date().toLocaleString()
					uni.hideLoading();
					this.childDcMap = response.data.childDcMap;
					this.companyInfo = response.data.companyInfo;
					this.remoteMonitorMeter = response.data.meter;
					var sz=response.data.sort;
					if(sz.length==0){
						sz=["A相,dcAA","B相,dcBa","C相,dcCa"]
					}
					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) {
				
			},
			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>