APP/pages/670/History.vue

<template>
	<view class="content contentBg">
		<view class="topTip">
			<view class="item" @click="tabChange(0)" :class="Status.tabIndex===0?'active':''">开机</view>
			<view class="item" @click="tabChange(1)" :class="Status.tabIndex===1?'active':''">报警</view>
			<view class="item" @click="tabChange(2)" :class="Status.tabIndex===2?'active':''">故障</view>
		</view>
		<view class="tabs">

			<view class="tab" :class="Status.tabIndex===0?'active':''">
				<view class="li" v-for="item,index in SwithData">
					<view>
						<view class="label">开机时间</view>
						<view class="value">{{item['open']}}</view>
					</view>
					<view class="marginTop10">
						<view class="label">关机时间</view>
						<view class="value">{{item['close']}}</view>
					</view>

				</view>
			</view>
			<view class="tab" :class="Status.tabIndex===1?'active':''">
				<view class="li warn" v-for="item,index in WarnData">
					<view class="row">
						<view class="label">报警事项:</view>
						<view class="value red">{{item['evtName']}}</view>
					</view>
					<view class="marginTop10 row">
						<view class="label">报警地点:</view>
						<view class="value">{{item['address']}}</view>
					</view>
					<view class="marginTop10 row">
						<view class="label">报警时间:</view>
						<view class="value">{{item['open']}}</view>
					</view>
					<view class="marginTop10 row">
						<view class="label">解除时间:</view>
						<view class="value">{{item['close']}}</view>
					</view>
					<view class="marginTop10 row">
						<view class="label">报警时长:</view>
						<view class="value">{{item['time']}}</view>
					</view>
				</view>
			</view>
			<view class="tab" :class="Status.tabIndex===2?'active':''">

				<view class="li warn" v-for="item,index in FaultData">
					<view class="row">
						<view class="label">故障部位:</view>
						<view class="value red">{{item['evtName']}}</view>
					</view>

					<view class="marginTop10 row">
						<view class="label">故障时间:</view>
						<view class="value">{{item['open']}}</view>
					</view>
					<view class="marginTop10 row">
						<view class="label">处理时间:</view>
						<view class="value">{{item['close']}}</view>
					</view>

				</view>
			</view>
		</view>
		<global-loading ref="loading"></global-loading>
	</view>
</template>

<script>
	import Common from '@/utils/Common.js';
	import api from '@/api/670/History.js'
	import {
		showLoading,
		hideLoading,
		updateLoading
	} from '@/utils/loading.js'
	export default {
		data() {
			return {
				Status: {
					tabIndex: 1
				},
				device: {},
				SwithData: [], //开关机的数据
				FaultData: [], //故障数据
				WarnData: [], //报警数据
			}
		},
		onLoad() {
			var these = this;
			let channel = this.getOpenerEventChannel();
			channel.on('detailData', function(opt) {
				console.log("我收到你的数据了，谢谢你。", opt.data);
				these.device = opt.data;
				these.tabChange(these.Status.tabIndex, true);
			});
		},
		methods: {
			loadWarnData() { //加载报警数据
				var these = this;
				let promise1 = new Promise((resolve, reject) => {
					let arr = [];
					let endDate = new Date();

					arr.push({
						evtName: '环境存在漏电电源',
						address: '湖北省武汉市洪山区关山街道国际企业中心聚星楼',
						open: Common.DateFormat(endDate),
						time: '00:00:59'
					});
					for (var i = 1; i < 10; i++) {
						arr.push({
							evtName: '环境存在漏电电源',
							address: '湖北省武汉市洪山区关山街道国际企业中心聚星楼',
							open: Common.DateFormat(endDate.setHours(i * -24)),
							time: '00:00:59'
						});
					}


					for (var i = 0; i < arr.length; i++) {
						let item = new Date(arr[i].open);
						let close = Common.DateFormat(item.setHours(4));
						arr[i].close = close;

					}
					resolve(arr);
				});
				let promise2 = new Promise((resolve, reject) => {
					api.getWarnData(this.device).then((res) => {
						resolve(res);
					}).catch((ex) => {
						console.log("获取数据异常", ex);
						reject(ex);
					});
				});

				Promise.allSettled([promise1, promise2]).then(results => {
					if (results[1].status == 'fulfilled') {
						these.WarnData = results[1].value;
					} else {
						these.WarnData = results[0].value;
					}

				});
			},
			loadSwithData() { //加载开关机数据
				var these = this;
				let promise1 = new Promise((resolve, reject) => {
					let arr = [];
					let endDate = new Date();

					arr.push({
						open: Common.DateFormat(endDate)
					});
					for (var i = 1; i < 10; i++) {
						arr.push({
							open: Common.DateFormat(endDate.setHours(i * -24))
						});
					}


					for (var i = 0; i < arr.length; i++) {
						let item = new Date(arr[i].open);
						let close = Common.DateFormat(item.setHours(4));
						arr[i].close = close;

					}
					resolve(arr);
				});


				let promise2 = new Promise((resolve, reject) => {
					api.getSwithData(this.device).then((res) => {
						resolve(res);
					}).catch((ex) => {
						console.log("获取数据异常", ex);
						reject(ex);
					});
				});

				Promise.allSettled([promise1, promise2]).then(results => {
					if (results[1].status == 'fulfilled') {
						these.SwithData = results[1].value;
					} else {
						these.SwithData = results[0].value;
					}

				});


			},
			loadFaultData() { //加载故障数据
				var these = this;
				let promise1 = new Promise((resolve, reject) => {
					let arr = [];
					let endDate = new Date();

					let dic = ['报警灯', '蜂鸣器', '电池', '蓝牙模块', '定位器', '4G模块'];
					arr.push({
						evtName: '报警灯',

						open: Common.DateFormat(endDate),

					});
					for (var i = 1; i < 10; i++) {
						arr.push({
							evtName: dic[i % 6],

							open: Common.DateFormat(endDate.setHours(i * -24)),

						});
					}


					for (var i = 0; i < arr.length; i++) {
						let item = new Date(arr[i].open);
						let close = Common.DateFormat(item.setHours(72), "yyyy-MM-dd");
						arr[i].close = close;

					}
					resolve(arr);
				});

				let promise2 = new Promise((resolve, reject) => {
					api.getFaulData(this.device).then((res) => {
						resolve(res);
					}).catch((ex) => {
						console.log("获取数据异常", ex);
						reject(ex);
					});
				});

				Promise.allSettled([promise1, promise2]).then(results => {
					if (results[1].status == 'fulfilled') {
						these.FaultData = results[1].value;
					} else {
						these.FaultData = results[0].value;
					}

				});

			},
			tabChange(index, ispostback) {
				if (this.Status.tabIndex === index && !ispostback) {
					return;
				}
				this.Status.tabIndex = index;
				showLoading(this);
				let promise = new Promise((resolve, reject) => {
					try {
						if (index === 0) {
							this.loadSwithData();
						} else if (index === 1) {
							this.loadWarnData();
						} else if (index === 2) {
							this.loadFaultData();
						}
					} catch (error) {
						//TODO handle the exception
					} finally {
						hideLoading(this);
					}

				});


			}
		}
	}
</script>

<style>
	.tab .warn .value {
		padding-left: 10rpx;
	}

	.tab .warn .value.red {
		color: rgba(224, 52, 52, 1) !important;
	}

	.tab .warn .row {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: flex-start;
		align-items: flex-start;
	}

	.marginTop10 {
		margin-top: 20rpx;
	}

	.tab .li .value {
		color: rgba(255, 255, 255, 0.87);
		width: calc(100% - 110rpx);
		height: auto;
		box-sizing: border-box;
	}

	.tab .li .label {
		color: rgba(255, 255, 255, 0.6);
		white-space: nowrap;
		width: 110rpx;

	}

	.tab .li {
		font-family: 'PingFang SC';
		font-size: 24rpx;
		font-weight: 400;
		line-height: 35rpx;
		letter-spacing: 0.14rpx;

		width: 100%;
		border-radius: 16rpx;
		margin-top: 24rpx;
		background: rgba(26, 26, 26, 1);
		box-sizing: border-box;
		padding: 20rpx 30rpx;
	}

	.tab.active {
		display: block;
	}

	.tab {
		width: 100%;
		height: auto;
		display: none;
	}

	.tabs {
		width: 100%;
		height: auto;
	}

	.topTip .item.active {
		color: rgba(187, 230, 0, 1) !important;
		font-size: 36rpx !important;

	}

	.topTip .item.active::before {
		background: rgba(187, 230, 0, 1);
	}

	.topTip .item::before {
		content: "";
		width: 50%;
		height: 4px;
		border-radius: 31px;
		position: absolute;
		background: #00000000;
		bottom: -10px;
		left: 25%;
	}

	.topTip .item {
		color: rgba(255, 255, 255, 0.87);
		font-family: 'PingFang SC';
		font-size: 28rpx;
		font-weight: 400;
		letter-spacing: 0.14rpx;
		position: relative;

	}

	.topTip {
		padding: 30rpx 0rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: space-between;
		align-items: center;
		position: sticky;
		background-color: #121212;
		height: 110rpx;
		z-index: 9999;
		margin-top: -30rpx;
	}

	/* #ifdef H5 */
	/* 仅在 H5 平台生效的样式 */
	.topTip {
		top: 44px;

	}

	/* #endif */

	/* #ifdef APP-PLUS */
	/* 仅在 App 平台生效的样式 */
	.topTip {
		top: 0rpx;
	}

	/* #endif */

	.content {
		padding: 30rpx;
		box-sizing: border-box;
		width: 100%;
		min-height: 100vh;
		height: auto;
	}

	.contentBg {
		background-color: #121212;
		color: #ffffffde;
	}

	.fleft {
		float: left;
	}

	.fright {
		float: right;
	}

	.clear {
		clear: both;
	}

	.displayNone {
		display: none !important;
	}

	.p100 {
		width: 100%;
		height: 100%;
	}

	.center {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: center;
		align-items: center;
	}
</style>