Files
app-cannengyun/pages/information/information.vue
2023-11-16 15:13:28 +08:00

798 lines
22 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="data-body" >
<view class="title-padding">
</view>
<view class="data-title">
<view class="data-title-text">
实时信息
</view>
</view>
<!-- tab选项 -->
<view class="data-tab">
<view class="tab-click" v-if="tabNum==1">
暂态事件消息
<view class="tab-noread-num-transient" v-if="transientShowNum!=0">
{{transientShowNum}}
</view>
</view>
<view class="tab" v-else @click='changeTab(1)'>
暂态事件消息
<view class="tab-noread-num-transient" v-if="transientShowNum!=0">
{{transientShowNum}}
</view>
</view>
<view class="tab-click" v-if="tabNum==2">
稳态越限消息
<view class="tab-noread-num-steady" v-if="steadyShowNum!=0">
{{steadyShowNum}}
</view>
</view>
<view class="tab" v-else @click='changeTab(2)'>
稳态越限消息
<view class="tab-noread-num-steady" v-if="steadyShowNum!=0">
{{steadyShowNum}}
</view>
</view>
<view class="tab-click" v-if="tabNum==3">
终端状态消息
<view class="tab-noread-num-terminal" v-if="terminalShowNum!=0">
{{terminalShowNum}}
</view>
</view>
<view class="tab" v-else @click='changeTab(3)'>
终端状态消息
<view class="tab-noread-num-terminal" v-if="terminalShowNum!=0">
{{terminalShowNum}}
</view>
</view>
</view>
<view class="pull-block" :style="{height:pullHeight}" v-if="pullFlag==1">
{{pullText}}
</view>
<swiper :style="{height:scrollHeight}" :current="current" @change="changeTabBySwiper" duration="300" skip-hidden-item-layout="true">
<swiper-item>
<view class="transient-block" :style="{height:scrollHeight}" @touchmove="transientTouchmove" @touchstart="transientTouchstart" @touchend="transientTouchend">
<scroll-view :scroll-y="scrollFlag" @scrolltolower="queryTransientList()" @lower-threshold='0' :style="{height:scrollHeight}" @scroll='transientScrollMove' v-if="transientList.length>0">
<view class="transient-event-block" @click="jumpToTransientDetails(transient.eventDetailIndex,transient.eventMsgIndex,transientListIndex,transient.state)" v-for="(transient,transientListIndex) in transientList">
<view class="transient-event">
<image src="/static/pic/transient.png" class="transient-event-pic"></image>
<image src="/static/pic/dot.png" class="transient-event-noread" v-if="transient.state==0"></image>
<view class="transient-event-content">
<view class="line-one">
<view class="">
{{transient.lineName}}
</view>
<view class="">
{{transient.showTime}}发生暂降事件
</view>
<view class="">
特征幅值:{{transient.eventValue}}%,持续时间:{{transient.persistTime}}s
</view>
</view>
<view class="line-two">
<view class="line-two-left">
台账信息
</view>
<view class="line-two-right">
{{transient.lineInfo}}
</view>
</view>
</view>
</view>
</view>
</scroll-view>
<view class="no-data" :style="{height:scrollHeight}" v-else>
{{noTransient}}
</view>
</view>
</swiper-item>
<swiper-item>
<view class="transient-block" :style="{height:scrollHeight}" @touchmove="steadyTouchmove" @touchstart="steadyTouchstart" @touchend="steadyTouchend">
<scroll-view :scroll-y="scrollFlag" style="" @scrolltolower="querySteadyList" :style="{height:scrollHeight}" @scroll='steadyScrollMove' v-if="steadyList.length>0">
<view class="steady-event-block" @click="jumpToSteady(steady.showTime,steady.steadyIndex,steadyListIndex,steady.state)" v-for="(steady,steadyListIndex) in steadyList">
<view class="steady-event">
<image src="/static/pic/steady.png" class="steady-event-pic"></image>
<image src="/static/pic/dot.png" class="transient-event-noread" v-if="steady.state==0"></image>
<view class="transient-event-content">
<view class="">
{{steady.showTime}}
</view>
<view class="">
发生稳态越限监测点{{steady.lineNum}}
</view>
</view>
</view>
</view>
</scroll-view>
<view class="no-data" :style="{height:scrollHeight}" v-else>
{{noSteady}}
</view>
</view>
</swiper-item>
<swiper-item>
<view class="transient-block" :style="{height:scrollHeight}" @touchmove="terminalTouchmove" @touchstart="terminalTouchstart" @touchend="terminalTouchend">
<scroll-view :scroll-y="scrollFlag" @scrolltolower="queryTerminalList()" :style="{height:scrollHeight}" @scroll='terminalScrollMove' v-if="terminalList.length>0">
<view class="steady-event-block" @click="jumpToTerminal(terminal.showTime,terminal.devMsgIndex,terminalListIndex,terminal.state)" v-for="(terminal,terminalListIndex) in terminalList">
<view class="steady-event">
<image src="/static/pic/terminal.png" class="steady-event-pic"></image>
<image src="/static/pic/dot.png" class="transient-event-noread" v-if="terminal.state==0"></image>
<view class="transient-event-content">
<view class="">
{{terminal.showTime}}
</view>
<view class="">
终端异常共{{terminal.limitNum}}
</view>
</view>
</view>
</view>
</scroll-view>
<view class="no-data" :style="{height:scrollHeight}" v-else>
{{noTerminal}}
</view>
</view>
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
data() {
return {
tabNum:1,//1-暂态 2-稳态 3-终端状态
terminalNum:0,
terminalShowNum:0,
steadyNum:0,
steadyShowNum:0,
transientNum:0,
transientShowNum:0,
transientPage:1,
steadyPage:1,
terminalPage:1,
transientList:[],
steadyList:[],
terminalList:[],
scrollHeight:'',
eventMsgIndexList:[],
steadyIndexList:[],
devMsgIndexList:[],
allNum:0,
transientScrollTop:0,
steadyScrollTop:0,
terminalScrollTop:0,
pullHeight:'',
pullFlag:0,
startY:0,
pullText:'下拉刷新',
transientRefreshFlag:0,
steadyRefreshFlag:0,
terminalRefreshFlag:0,
current:0,
scrollFlag:true,
noTransient:'',
noSteady:'',
noTerminal:''
}
},
methods: {
transientScrollMove(e){
this.transientScrollTop = e.detail.scrollTop;
},
transientTouchstart(e){
this.startY = e.touches[0].clientY;
},
transientTouchmove(e){
var that= this;
if(that.transientScrollTop<2){
var h = e.changedTouches[0].clientY - that.startY;
if(h>66||h<0){
return;
}else if(h<33){
that.pullText='下拉刷新';
that.pullHeight =h+'px';
that.pullFlag=1;
}else{
that.pullText = '加载中...';
that.pullHeight =h+'px';
that.pullFlag=1;
that.transientRefreshFlag=1;
that.communicateState();
}
}
},
transientTouchend(e){
var that = this;
that.scrollFlag=false;
setTimeout(function(){
that.scrollFlag=true;
},30)
that.transientScrollTop=0;
that.pullHeight='';
that.startY=0;
that.pullText='下拉刷新';
that.pullFlag=0;
if(that.transientRefreshFlag==1){
that.transientRefreshFlag=0;
that.transientList=[];
that.noTransient = '';
that.transientNum=0;
that.transientPage=1;
that.queryTransientList();
}
},
steadyScrollMove(e){
this.steadyScrollTop = e.detail.scrollTop;
},
steadyTouchstart(e){
this.startY = e.touches[0].clientY;
},
steadyTouchmove(e){
var that= this;
if(that.steadyScrollTop<2){
var h = e.changedTouches[0].clientY - that.startY;
if(h>66||h<0){
return;
}else if(h<33){
that.pullText='下拉刷新';
that.pullHeight =h+'px';
that.pullFlag=1;
}else{
that.pullText = '加载中...';
that.pullHeight =h+'px';
that.pullFlag=1;
that.steadyRefreshFlag=1;
that.communicateState();
}
}
},
steadyTouchend(e){
var that = this;
that.scrollFlag=false;
setTimeout(function(){
that.scrollFlag=true;
},30)
that.steadyScrollTop=0;
that.pullHeight='';
that.startY=0;
that.pullText='下拉刷新';
that.pullFlag=0;
if(that.steadyRefreshFlag==1){
that.steadyRefreshFlag=0;
that.steadyList=[];
that.noSteady = '';
that.steadyNum=0;
that.steadyPage=1;
that.querySteadyList();
}
},
terminalScrollMove(e){
this.terminalScrollTop = e.detail.scrollTop;
},
terminalTouchstart(e){
this.startY = e.touches[0].clientY;
},
terminalTouchmove(e){
var that= this;
if(that.terminalScrollTop<2){
var h = e.changedTouches[0].clientY - that.startY;
if(h>66||h<0){
return;
}else if(h<33){
that.pullText='下拉刷新';
that.pullHeight =h+'px';
that.pullFlag=1;
}else{
that.pullText = '加载中...';
that.pullHeight =h+'px';
that.pullFlag=1;
that.terminalRefreshFlag=1;
that.communicateState();
}
}
},
terminalTouchend(e){
var that= this;
that.scrollFlag=false;
setTimeout(function(){
that.scrollFlag=true;
},30)
that.terminalScrollTop=0;
that.pullHeight='';
that.startY=0;
that.pullText='下拉刷新';
that.pullFlag=0;
if(that.terminalRefreshFlag==1){
that.terminalRefreshFlag=0;
that.terminalList=[];
that.noTerminal = '';
that.terminalNum=0;
that.terminalPage=1;
that.queryTerminalList();
}
},
scrollH(){
var that =this;
var sys = uni.getSystemInfoSync();
var winWidth = sys.windowWidth;
var winrate = 750/winWidth;
var winHeight= sys.windowHeight;
var statusBarHeight = sys.statusBarHeight;
that.scrollHeight = parseInt((winHeight-statusBarHeight)*winrate-152)+'rpx';
},
changeTab(tabNum){
var that=this;
that.current=tabNum-1;
that.tabNum=tabNum;
},
changeTabBySwiper(e){
this.tabNum=e.detail.current+1;
this.current=e.detail.current;
},
jumpToTransientDetails(eventDetailIndex,eventMsgIndex,transientListIndex,state){
var that =this;
if(that.transientNum>0&&state==0){
that.transientNum--;
that.eventMsgIndexList.push(eventMsgIndex);
that.transientList[transientListIndex].state=1;
}
that.judgeTransientNum();
that.setAllNum();
that.communicateState();
uni.navigateTo({
url:'../transientDetails/transientDetails?eventDetailIndex='+eventDetailIndex+"&eventMsgIndex="+eventMsgIndex
})
},
jumpToSteady(showTime,steadyIndex,steadyListIndex,state){
var that = this;
if(that.steadyNum>0&&state==0){
that.steadyNum--;
that.steadyIndexList.push(steadyIndex);
that.steadyList[steadyListIndex].state=1;
}
that.judgeSteadyNum();
that.setAllNum();
that.communicateState();
uni.navigateTo({
url:'../steady/steady?steadyIndex='+steadyIndex+"&showTime="+showTime
})
},
jumpToTerminal(showTime,devMsgIndex,terminalListIndex,state){
var that = this;
if(that.terminalNum>0&&state==0){
that.terminalNum--;
that.devMsgIndexList.push(devMsgIndex);
that.terminalList[terminalListIndex].state=1;
}
that.judgeTerminalNum();
that.setAllNum();
that.communicateState();
uni.navigateTo({
url:'../terminal/terminal?devMsgIndex='+devMsgIndex+"&showTime="+showTime
})
},
// 同步读取状态
communicateState(){
var that = this;
uni.request({
url: that.serverUrl+'/cleanmsg/clearMsg',
method:'POST',
data: {
eventMsgList:that.eventMsgIndexList,
steadyMsgList:that.steadyIndexList,
deviceMsgList:that.devMsgIndexList
},
header: {
'content-type': 'application/x-www-form-urlencoded'
},
sslVerify:false,
success: (res) => {
if(res.data.resultCode=='10000'){
console.log('同步成功')
}else{
console.log('同步失败')
}
},
fail:(re)=>{
console.log('同步网络异常')
}
});
},
// 暂态
queryTransientList(){
var that = this;
if(that.judgeLogin()){
uni.request({
url: that.serverUrl+'/eventmsg/eventDetailList',
method:'POST',
data: {
userId:uni.getStorageSync('userInfo').userId,
page:that.transientPage++,
num:20
},
header: {
'content-type': 'application/x-www-form-urlencoded'
},
sslVerify:false,
success: (res) => {
uni.hideLoading();
if(res.data.resultCode=='10000'){
that.transientNum=res.data.unstate;
that.judgeTransientNum();
var list =[];
list = that.countTransientNum(eval(res.data.data),1);
if(that.transientPage==2){
that.transientList = []
}
if(list!=null&&list!=undefined&&list!=''&&list!=[]){
that.transientList = that.transientList.concat(list);
}
if(that.transientList.length==0){
that.noTransient = '暂无暂态消息'
}
}else{
uni.showModal({
title: '提示',
content: '查询失败,请重试',
confirmText:'重试',
success: function (res) {
if (res.confirm) {
that.transientPage--;
that.queryTransientList();
} else if (res.cancel) {
console.log('用户点击取消');
}
},
});
}
},
fail:(re)=>{
uni.hideLoading();
uni.showModal({
title: '提示',
content: '网络或服务器异常,请稍后再试',
showCancel:false,
success: function (res) {
if (res.confirm) {
console.log('用户点击确定');
} else if (res.cancel) {
console.log('用户点击取消');
}
},
});
}
});
}
},
countTransientNum(list,type){
var that = this;
if(type==1){
for(var i=0;i<list.length;i++){
// if(list[i].state==0&&that.transientNum!='99+'){
// that.transientNum++;
// }
list[i].showTime = that.formatTime_mills(list[i].timeID);
}
}else{
var num=0
for(var i=0;i<list.length;i++){
if(list[i].state==0){
num++;
}
that.transientNum=num;
}
}
that.setAllNum();
// if(that.transientNum>99){
// that.transientNum='99+'
// }
return list;
},
judgeTransientNum(){
var that= this;
if(that.transientNum>99){
that.transientShowNum='99+'
}else{
that.transientShowNum=that.transientNum
}
},
//稳态
querySteadyList(){
var that = this;
if(that.judgeLogin()){
uni.request({
url: that.serverUrl+'/steadymsg/steadyState',
method:'POST',
data: {
userId:uni.getStorageSync('userInfo').userId,
page:that.steadyPage++,
num:20
},
header: {
'content-type': 'application/x-www-form-urlencoded'
},
sslVerify:false,
success: (res) => {
uni.hideLoading();
if(res.data.resultCode=='10000'){
that.steadyNum=res.data.unstate;
that.judgeSteadyNum();
var list =[];
list = that.countSteadyNum(eval(res.data.data),1);
if(that.steadyPage==2){
that.steadyList =[]
}
if(list!=null&&list!=undefined&&list!=''&&list!=[]){
that.steadyList = that.steadyList.concat(list);
}
if(that.steadyList.length == 0){
that.noSteady = '暂无稳态越限消息'
}
}else{
uni.showModal({
title: '提示',
content: '查询失败,请重试',
confirmText:'重试',
success: function (res) {
if (res.confirm) {
that.steadyPage--;
that.querySteadyList();
} else if (res.cancel) {
console.log('用户点击取消');
}
},
});
}
},
fail:(re)=>{
uni.hideLoading();
uni.showModal({
title: '提示',
content: '网络或服务器异常,请稍后再试',
showCancel:false,
success: function (res) {
if (res.confirm) {
console.log('用户点击确定');
} else if (res.cancel) {
console.log('用户点击取消');
}
},
});
}
});
}
},
countSteadyNum(list,type){
var that = this;
if(type==1){
for(var i=0;i<list.length;i++){
// if(list[i].state==0&&that.steadyNum!='99+'){
// that.steadyNum++;
// }
list[i].showTime = that.formatTime(list[i].timeID);
}
}else{
var num=0
for(var i=0;i<list.length;i++){
if(list[i].state==0){
num++;
}
that.steadyNum=num;
}
}
that.setAllNum();
// if(that.steadyNum>99){
// that.steadyNum='99+'
// }
return list;
},
judgeSteadyNum(){
var that= this;
if(that.steadyNum>99){
that.steadyShowNum='99+'
}else{
that.steadyShowNum=that.steadyNum
}
},
//终端
queryTerminalList(){
var that = this;
if(that.judgeLogin()){
uni.request({
url: that.serverUrl+'/deviceMsg/deviceMsgList',
method:'POST',
data: {
userId:uni.getStorageSync('userInfo').userId,
page:that.terminalPage++,
num:20
},
header: {
'content-type': 'application/x-www-form-urlencoded'
},
sslVerify:false,
success: (res) => {
uni.hideLoading();
if(res.data.resultCode=='10000'){
that.terminalNum=res.data.unstate;
that.judgeTerminalNum();
var list =[];
list= that.countTerminalNum(eval(res.data.data),1);
if(that.terminalPage==2){
that.terminalList=[]
}
if(list!=null&&list!=undefined&&list!=''&&list!=[]){
that.terminalList = that.terminalList.concat(list);
}
if(that.terminalList.length==0){
that.noTerminal='暂无终端越限消息'
}
}else{
uni.showModal({
title: '提示',
content: '查询失败,请重试',
confirmText:'重试',
success: function (res) {
if (res.confirm) {
that.terminalPage--;
that.queryTerminalList();
} else if (res.cancel) {
console.log('用户点击取消');
}
},
});
}
},
fail:(re)=>{
uni.hideLoading();
uni.showModal({
title: '提示',
content: '网络或服务器异常,请稍后再试',
showCancel:false,
success: function (res) {
if (res.confirm) {
console.log('用户点击确定');
} else if (res.cancel) {
console.log('用户点击取消');
}
},
});
}
});
}
},
countTerminalNum(list,type){
var that = this;
if(type==1){
for(var i=0;i<list.length;i++){
// if(list[i].state==0&&that.terminalNum!='99+'){
// that.terminalNum++;
// }
list[i].showTime = that.formatTime(list[i].timeID);
}
}else{
var num=0
for(var i=0;i<list.length;i++){
if(list[i].state==0){
num++;
}
that.terminalNum=num;
}
}
// if(that.terminalNum>99){
// that.terminalNum='99+'
// }
that.setAllNum();
return list;
},
judgeTerminalNum(){
var that= this;
if(that.terminalNum>99){
that.terminalShowNum='99+'
}else{
that.terminalShowNum=that.terminalNum
}
},
setAllNum(){
var that = this;
var allNum=parseInt(that.steadyNum)+parseInt(that.terminalNum)+parseInt(that.transientNum);
// console.log("setAllNum")
uni.setStorageSync("allNum",allNum);
if(allNum>99){
allNum='99+'
}else{
allNum=''+allNum
}
if(allNum!=0){
uni.setTabBarBadge({
index: 0,
text: allNum
})
}else{
uni.removeTabBarBadge({
index: 0
})
}
},
refresh(){
this.communicateState();
this.transientList=[];
this.steadyList=[];
this.terminalList=[];
this.noTransient = '';
this.noSteady = '';
this.noTerminal = '';
this.steadyNum=0;
this.terminalNum=0;
this.transientNum=0;
this.terminalPage=1;
this.steadyPage=1;
this.transientPage=1;
this.$nextTick(function(){
this.queryTransientList();
this.querySteadyList();
this.queryTerminalList();
})
}
},
onShow() {
var that =this;
var tabNum = uni.getStorageSync("tabNum");
if(tabNum){
that.refresh();
that.tabNum = tabNum;
that.current=tabNum-1;
uni.removeStorageSync("tabNum");
// if(tabNum==1){
// that.transientList=[];
// that.transientNum=0;
// that.transientPage=1;
// that.communicateState();
// that.queryTransientList();
// }else if(tabNum==2){
// that.steadyList=[];
// that.steadyNum=0;
// that.steadyPage=1;
// that.communicateState();
// that.querySteadyList();
// }else{
// that.terminalList=[];
// that.terminalNum=0;
// that.terminalPage=1;
// that.communicateState();
// that.queryTerminalList();
// }
}
},
onLoad(e) {
var that = this;
// var userInfo = {};
// userInfo.userId = '00c37ea1-b5ff-4f35-ba15-51e1c7363e20';
// userInfo.roleCode=2;
// uni.setStorageSync('userInfo',userInfo);
that.queryTransientList();
that.querySteadyList();
that.queryTerminalList();
that.scrollH();
uni.$on("tabNum",function(data){
that.refresh();
that.tabNum=data;
that.current=data-1;
})
},
onPullDownRefresh(){
this.refresh();
setTimeout(function () {
uni.stopPullDownRefresh();
}, 2000);
}
}
</script>
<style>
@import url("information.css");
</style>