330 lines
6.9 KiB
Vue
330 lines
6.9 KiB
Vue
<template>
|
|
<view class="maincontent1 contentBg">
|
|
<!-- <view class="tab">
|
|
<view class="tabItem" :class="{active:Status.tabIndex===0}" @click.stop="tabChange(0)">报警</view>
|
|
<view class="tabItem" :class="{active:Status.tabIndex===1}" @click.stop="tabChange(1)">通话</view>
|
|
<view class="tabItem" :class="{active:Status.tabIndex===2}" @click.stop="tabChange(2)">开机</view>
|
|
<view class="tabItem" :class="{active:Status.tabIndex===3}" @click.stop="tabChange(3)">故障</view>
|
|
</view> -->
|
|
|
|
|
|
<view class="list">
|
|
<mescroll-uni class="device-list" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption"
|
|
:down="downOption" :fixed="false">
|
|
<view v-for="item,index in list" class="listItem">
|
|
|
|
<view v-if="Status.tabIndex==0">
|
|
<view class="row">
|
|
<view class="label">报警事项:</view>
|
|
<view class="red value">{{item.content}}</view>
|
|
</view>
|
|
<view class="row">
|
|
<view class="label">报警地点:</view>
|
|
<view class="value">{{item.location}}</view>
|
|
</view>
|
|
<view class="row">
|
|
<view class="label">报警时间:</view>
|
|
<view class="value">{{item.startTime}}</view>
|
|
</view>
|
|
<view class="row">
|
|
<view class="label">解除时间:</view>
|
|
<view class="value">{{item.finishTime}}</view>
|
|
</view>
|
|
<view class="row">
|
|
<view class="label">报警时长:</view>
|
|
<view class="value">{{item.durationTime}}</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="Status.tabIndex==1">
|
|
|
|
</view>
|
|
<view v-if="Status.tabIndex==2">
|
|
|
|
</view>
|
|
<view v-if="Status.tabIndex==3">
|
|
|
|
</view>
|
|
</view>
|
|
</mescroll-uni>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
var timeout = null;
|
|
import request from '@/utils/request.js';
|
|
export default {
|
|
data() {
|
|
return {
|
|
Status: {
|
|
tabIndex: 0
|
|
},
|
|
list: [],
|
|
mescroll: null,
|
|
downOption: {
|
|
auto: true,
|
|
autoShowLoading: false,
|
|
},
|
|
upOption: {
|
|
auto: false,
|
|
noMoreSize: 0,
|
|
offset: 10,
|
|
isLock: false,
|
|
empty: {
|
|
tip: '暂无数据',
|
|
hideScroll: false,
|
|
icon: '/static/images/common/empty.png'
|
|
},
|
|
textNoMore: '没有更多数据了'
|
|
},
|
|
device: {
|
|
|
|
}
|
|
}
|
|
},
|
|
onLoad() {
|
|
let eventChannel = this.getOpenerEventChannel();
|
|
eventChannel.on('detailData', (data) => {
|
|
debugger;
|
|
if (data) {
|
|
this.device = data;
|
|
}
|
|
|
|
});
|
|
},
|
|
methods: {
|
|
mescrollInit(mescroll) {
|
|
this.mescroll = mescroll;
|
|
},
|
|
// 下拉刷新
|
|
downCallback() {
|
|
|
|
|
|
if (this.mescroll) {
|
|
this.mescroll.resetUpScroll(false);
|
|
this.mescroll.scrollTo(0, 0);
|
|
}
|
|
this.getData();
|
|
|
|
|
|
},
|
|
// 上拉加载
|
|
upCallback() {
|
|
|
|
|
|
|
|
this.getData();
|
|
},
|
|
getWarList(data) {
|
|
return request({
|
|
url: '/app/device/AlarmList',
|
|
method: 'get',
|
|
data: data
|
|
});
|
|
},
|
|
getNotifyList() {
|
|
return new Promise((resolve, reject) => {
|
|
resolve({
|
|
code: 200,
|
|
total: 0,
|
|
rows: []
|
|
})
|
|
});
|
|
},
|
|
getTrun() {
|
|
return new Promise((resolve, reject) => {
|
|
resolve({
|
|
total: 0,
|
|
rows: []
|
|
})
|
|
});
|
|
},
|
|
getGuzhang() {
|
|
return new Promise((resolve, reject) => {
|
|
resolve({
|
|
total: 0,
|
|
rows: []
|
|
})
|
|
});
|
|
},
|
|
getData() {
|
|
let task = () => {
|
|
debugger;
|
|
let data = {
|
|
deviceId:(this.device&& this.device.id)?this.device.id:"00000000",
|
|
pageNum: this.mescroll.num,
|
|
pageSize: 10,
|
|
}
|
|
console.log("device=", JSON.stringify(this.device));
|
|
console.log("data", JSON.stringify(data));
|
|
if (!data.pageNum) {
|
|
this.mescroll.endSuccess(0, false);
|
|
|
|
return;
|
|
}
|
|
|
|
let arr = {
|
|
"0": this.getWarList.bind(this),
|
|
"1": this.getNotifyList.bind(this),
|
|
"2": this.getTrun.bind(this),
|
|
"3": this.getGuzhang.bind(this),
|
|
}
|
|
|
|
let apiCall = arr[this.Status.tabIndex + ''];
|
|
apiCall(data).then((res) => {
|
|
if (res.code == 200) {
|
|
|
|
|
|
if (data.pageNum === 1) {
|
|
this.list = res.rows;
|
|
} else {
|
|
this.list = this.list.concat(res.rows);
|
|
}
|
|
this.total = res.total;
|
|
let hasNext = true;
|
|
// 判断是否已加载全部数据
|
|
if (res.rows.length < this.size || this.list.length >= this.total) {
|
|
|
|
hasNext = false;
|
|
} else {
|
|
this.page++;
|
|
hasNext = true;
|
|
}
|
|
this.mescroll.endSuccess(res.rows.length, hasNext);
|
|
} else {
|
|
this.mescroll.endSuccess(0, false);
|
|
}
|
|
}).finally(() => {
|
|
this.loading = false;
|
|
});
|
|
}
|
|
|
|
clearTimeout(timeout);
|
|
timeout = setTimeout(task, 50);
|
|
},
|
|
tabChange(index) {
|
|
if (this.Status.tabIndex === index) {
|
|
return;
|
|
}
|
|
this.Status.tabIndex = index
|
|
this.downCallback();
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
/* #ifdef WEB|H5 */
|
|
.maincontent1 {
|
|
height: calc(100vh - 45px);
|
|
}
|
|
|
|
/* #endif */
|
|
.maincontent1 {
|
|
height: 100vh;
|
|
|
|
width: 100%;
|
|
padding: 30rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.listItem {
|
|
border-radius: 8px;
|
|
background: rgba(26, 26, 26, 1);
|
|
width: 100%;
|
|
height: auto;
|
|
margin-bottom: 20rpx;
|
|
padding: 15rpx 20rpx;
|
|
}
|
|
|
|
.listItem .label {
|
|
color: rgba(255, 255, 255, 0.6);
|
|
font-family: "PingFang SC";
|
|
font-style: Regular;
|
|
font-size: 26rpx;
|
|
font-weight: 400;
|
|
line-height: 30rpx;
|
|
letter-spacing: 0.14rpx;
|
|
width: 120rpx;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
|
|
}
|
|
|
|
.listItem .value {
|
|
color: rgba(255, 255, 255, 0.87);
|
|
|
|
font-family: "PingFang SC";
|
|
font-style: Regular;
|
|
font-size: 26rpx;
|
|
font-weight: 400;
|
|
line-height: 30rpx;
|
|
letter-spacing: 0.14rpx;
|
|
text-align: left;
|
|
}
|
|
|
|
.listItem .row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
align-content: flex-start;
|
|
justify-content: flex-start;
|
|
align-items: flex-start;
|
|
height: auto;
|
|
padding: 5rpx 0rpx;
|
|
|
|
}
|
|
|
|
|
|
|
|
.list {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
.tab {
|
|
width: 100%;
|
|
height: 40rpx;
|
|
line-height: 40rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
align-content: center;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
color: rgba(255, 255, 255, 0.87);
|
|
font-family: "PingFang SC";
|
|
font-style: Regular;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.tab .tabItem {
|
|
position: relative;
|
|
padding: 0rpx 30rpx;
|
|
}
|
|
|
|
.tab .tabItem::after {
|
|
position: absolute;
|
|
content: "";
|
|
width: 50%;
|
|
height: 8rpx;
|
|
border-radius: 30px;
|
|
top: 100%;
|
|
left: 25%;
|
|
margin-top: 5rpx;
|
|
background: #00000000;
|
|
}
|
|
|
|
.tab .tabItem.active::after {
|
|
background: rgba(187, 230, 0, 1);
|
|
}
|
|
|
|
.tab .tabItem.active {
|
|
color: rgba(174, 214, 0, 1);
|
|
font-style: Bold;
|
|
font-size: 32rpx;
|
|
|
|
}
|
|
</style> |