446 lines
9.9 KiB
Vue
446 lines
9.9 KiB
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> |