xiaomeng
/
wszhyWx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

实时数据status加入了3s请求

pull/36/head
孙萌 2023-11-16 11:03:04 +08:00
parent 09b4d0a0cb
commit 80a985e06e
5 changed files with 92 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/assets/css/main.css
View File

@ -1717,10 +1717,29 @@
margin: 10px 8px 0 !important;
}
.realTime .page-content .status-view .status-view-content .status-true .status-fan > div > span {
margin-left: 5px;
}
.realTime .page-content .status-view .status-view-content .status-true .status-fan > div > img {
width: 16px;
height: 16px;
margin-right: 5px;
margin-right: 0px;
}
.realTime .page-content .status-view .status-view-content .status-true .status-fan > div > img.fan-img {
animation: rotate 5s linear infinite;
/* 持续时间为 5 秒，线性缓动，无限循环 */
/* 定义旋转动画 */
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.realTime .page-content .status-view .status-view-content .status-true .status-true-sel {

2
src/assets/css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

17
src/assets/css/main.scss
View File

@ -1814,10 +1814,25 @@
font-size: 14px;
height: 30px;
margin: 10px 8px 0 !important;
>span{
margin-left: 5px;
}
>img{
width: 16px;
height:16px;
margin-right: 5px;
margin-right: 0px;
&.fan-img{
animation: rotate 5s linear infinite; /* 持续时间为 5 秒，线性缓动，无限循环 */
/* 定义旋转动画 */
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
}
}
}

BIN
src/assets/img/fan-on.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 19 KiB

97
src/views/page/realTime.vue
View File

@ -107,25 +107,25 @@
</div>
<div class="status-fan">
<div class="btn" :class="fanStatus.status[0] == 1 ? 'blue' : 'off'">
<img v-if="fanStatus.status[0] == 1" src="../../assets/img/fan-on.png" alt="">
<img class="fan-img" v-if="fanStatus.status[0] == 1" src="../../assets/img/fan-on.png" alt="">
<img v-else src="../../assets/img/fan-off.png" alt="">
1#风机
<span>1#风机</span>
</div>
<div class="btn" :class="fanStatus.status[1] == 1 ? 'blue' : 'off'">
<img v-if="fanStatus.status[1] == 1" src="../../assets/img/fan-on.png" alt="">
<img v-else src="../../assets/img/fan-off.png" alt=""> 2#风机
<img class="fan-img" v-if="fanStatus.status[1] == 1" src="../../assets/img/fan-on.png" alt="">
<img v-else src="../../assets/img/fan-off.png" alt=""> <span>2#风机</span>
</div>
<div class="btn" :class="fanStatus.status[2] == 1 ? 'blue' : 'off'">
<img v-if="fanStatus.status[2] == 1" src="../../assets/img/fan-on.png" alt="">
<img v-else src="../../assets/img/fan-off.png" alt=""> 3#风机
<img class="fan-img" v-if="fanStatus.status[2] == 1" src="../../assets/img/fan-on.png" alt="">
<img v-else src="../../assets/img/fan-off.png" alt=""> <span>3#风机</span>
</div>
<div class="btn" :class="fanStatus.status[3] == 1 ? 'blue' : 'off'">
<img v-if="fanStatus.status[3] == 1" src="../../assets/img/fan-on.png" alt="">
<img v-else src="../../assets/img/fan-off.png" alt=""> 4#风机
<img class="fan-img" v-if="fanStatus.status[3] == 1" src="../../assets/img/fan-on.png" alt="">
<img v-else src="../../assets/img/fan-off.png" alt=""> <span>4#风机</span>
</div>
<div class="btn" :class="fanStatus.status[4] == 1 ? 'blue' : 'off'">
<img v-if="fanStatus.status[4] == 1" src="../../assets/img/fan-on.png" alt="">
<img v-else src="../../assets/img/fan-off.png" alt=""> 5#风机
<img class="fan-img" v-if="fanStatus.status[4] == 1" src="../../assets/img/fan-on.png" alt="">
<img v-else src="../../assets/img/fan-off.png" alt=""> <span>5#风机</span>
</div>
</div>
</div>
@ -243,6 +243,8 @@ export default {
timer: null,
deviceName: 1,
controlList: [],
statusInterval:null,//status状态的Interval
statusTime:3,//status状态的秒数
}
},
watch: {
@ -251,6 +253,7 @@ export default {
const store = this.$store.state
this.indexs = this.$route.query.index ? this.$route.query.index : store.equipmentIndex;
this.deviceName = store.equipmentList[this.indexs - 1].deviceName
clearInterval(this.statusInterval)&&this.statusInterval
setTimeout(() => {
if (this.player) {
@ -289,6 +292,7 @@ export default {
this.player.destroy()
this.player = null
}
clearInterval(this.statusInterval)&&this.statusInterval
that.timer && clearInterval(that.timer)
this.$bus.$off('refreshTime')
},
@ -541,39 +545,13 @@ export default {
// console.log(this.controlList);
})
var TargetValue = {
deviceId: store.equipmentList[this.indexs - 1].deviceId
}
this.api.getControlGetState(TargetValue).then(res => {
if (res.data.code == 200) {
console.log(res.data.data, 123123);
this.fanStatus.open = res.data.data['1023']
this.fanStatus.status = []
var num = res.data.data['1024']
var num1 = this.padString(num.toString(2), 5)
var openListNew = []
openListNew = num1.split("")
this.fanStatus.status = openListNew.reverse()
this.statusList = []
for (var i = 0; i < 4; i++) {
var statusData = { name: `顶卷膜${i + 1}`, open: res.data.data[(1025 + (i * 3))], progress: res.data.data[(1027 + (i * 3))], index: res.data.data[(1026 + (i * 3))] }
this.statusList.push(statusData)
}
this.$forceUpdate();
setTimeout(() => {
this.statusList.forEach((el,index)=>{
if(el.open!=0){
statusCharts(`statusCharts${index}`,el.progress)
}
})
}, 10);
} else {
// this.$message.error(res.data.msg);
this.getStatus()
clearInterval(this.statusInterval)&&this.statusInterval
this.statusInterval = setInterval(() => {
if(this.deviceName==10){
this.getStatus()
}
})
}, this.statusTime*1000);
var data1 = store.equipmentList[this.indexs - 1].deviceId
this.api.getControlFsdata(data1).then(res => {
@ -607,6 +585,41 @@ export default {
}
},
getStatus(){
var store = this.$store.state
var TargetValue = {
deviceId: store.equipmentList[this.indexs - 1].deviceId
}
this.api.getControlGetState(TargetValue).then(res => {
if (res.data.code == 200) {
this.fanStatus.open = res.data.data['1023']
this.fanStatus.status = []
var num = res.data.data['1024']
var num1 = this.padString(num.toString(2), 5)
var openListNew = []
openListNew = num1.split("")
this.fanStatus.status = openListNew.reverse()
this.statusList = []
for (var i = 0; i < 4; i++) {
var statusData = { name: `顶卷膜${i + 1}`, open: res.data.data[(1025 + (i * 3))], progress: res.data.data[(1027 + (i * 3))], index: res.data.data[(1026 + (i * 3))] }
this.statusList.push(statusData)
}
this.$forceUpdate();
setTimeout(() => {
this.statusList.forEach((el,index)=>{
if(el.open!=0){
statusCharts(`statusCharts${index}`,el.progress)
}
})
}, 10);
} else {
// this.$message.error(res.data.msg);
}
})
},
getTime() {
this.time = getnowtime()
const that = this