标签：stl rda interval 定时器 lse eva nbsp view string
store->mapContainer.js
state:
largePassengerFlow: null,//大客流的定时器 largePassengerData: [],//大客流的定时器(动态+-10假数据) largePassengerSlowData: [],//大客流缓动5*5s后的数据 largePassengerSlowDataFlow: [],//大客流缓动5*5s后的数据定时器 twoState: false,//缓动5次之内为false,第五次为true
set_largePassengerFlow(_state, obj) { _state.largePassengerFlow = obj; }, set_largePassengerData(_state, obj) { _state.largePassengerData = obj; }, set_largePassengerSlowData(_state, obj) { _state.largePassengerSlowData = obj; }, set_largePassengerSlowDataFlow(_state, obj) { _state.largePassengerSlowDataFlow = obj; }, set_twoState(_state, obj) { _state.twoState = obj; },
selectBox.vue
主要为，勾选之后，静态restful接口的数据进行定时器加减10
// 大客流 getLatestList() { this.$api.getLatestList({}).then(dl => { let sk = JSON.parse(JSON.stringify(dl)); this.bus.$emit(‘passengerSocket‘, sk); let largeTime = setInterval(() => { sk.forEach(res => { res.average += parseInt(Math.random() * 10 + 1) + parseInt(-Math.random() * 10 + 1); }); this.set_largePassengerData(sk); this.bus.$emit(‘passengerSocket‘, sk); }, 5000); this.set_largePassengerFlow(largeTime); }); },
home.vue(websocket组件)
mounted() { socket.on(‘hz_passenger‘, data => { this.newReVal = JSON.parse(data); let sk = JSON.parse(JSON.stringify(this.newReVal)); clearInterval(this.largePassengerSlowDataFlow); clearInterval(this.largePassengerFlow); this.changeTime(this.largePassengerData,this.newReVal,this.largePassengerFlow) }); },
/**** sk1为old数组， sk2为New数组, sTime为定时器 ***/ changeTime(sk1=[],sk2=[],sTime = null){ let sk4 = JSON.parse(JSON.stringify(sk1)); let sk4List=[],sk5List = [],sk3=null,timeNum = 0; for (let i = 0; i < sk1.length; i++) { if(sk1[i].average - sk2[i].average>0){ sk3 = -Math.round(Math.abs(sk1[i].average - sk2[i].average) / 5); }else{ sk3 = Math.round(Math.abs(sk1[i].average - sk2[i].average) / 5); } sk4List.push({ id: i + 1, average: sk3 }); } console.log(‘sk4List‘,sk4List) sTime = setInterval(() => { sk5List = []; timeNum += 1; for (let j = 0; j < sk1.length; j++) { let sk5 = (sk1[j].average += sk4List[j].average); sk4[j].average = sk5; sk5List.push({ id: j + 1, num: sk5 }); } //前4次为平均缓动，最后一次为真实数据 if(timeNum<5){ this.bus.$emit(‘passengerSocket‘, sk4); this.set_largePassengerSlowData(sk4); this.set_twoState(false) }else if (timeNum == 5) { this.bus.$emit(‘passengerSocket‘, sk2); this.set_largePassengerSlowData(sk2); clearInterval(sTime); this.set_twoState(true) }else{ this.set_twoState(false) } }, 3000); }
watch:{ /***** 整个效果实现逻辑 1.selectBox页面静态接口获取后，实现定时器随机数加减, 2.socket数据推过来后,实现5(次)*5s，25s后数据波动到正确值(延缓25s)， 3.然后通过监听twoState状态位的更新，在watch里面去实现上一步25s后数据的随机数加减, 4.关闭页面的时候，去注销定时器 */ twoState(val,oldval){ if(val === true){ let sk =this.largePassengerSlowData; let largeTime = setInterval(() => { sk.forEach(res => { res.average += parseInt(Math.random() * 10 + 1) + parseInt(-Math.random() * 10 + 1); }); this.set_largePassengerData(sk); this.bus.$emit(‘passengerSocket‘, sk); }, 5000); this.set_largePassengerSlowDataFlow(largeTime) } } }
标签：stl rda interval 定时器 lse eva nbsp view string
原文地址：https://www.cnblogs.com/lsc-boke/p/12912064.html
