|
|
@ -111,11 +111,11 @@
|
|
|
|
</el-footer>
|
|
|
|
</el-footer>
|
|
|
|
</el-container>
|
|
|
|
</el-container>
|
|
|
|
<el-aside
|
|
|
|
<el-aside
|
|
|
|
style="background-color: rgba(0,0,0,0.3);overflow: auto;margin-bottom: 0;height: calc(100vh - 84px);;padding:12px 0 "
|
|
|
|
style="background-color: rgba(0,0,0,0.3);overflow: hidden;margin-bottom: 0;height: calc(100vh - 84px);;padding:12px 0 "
|
|
|
|
width="350px">
|
|
|
|
width="350px">
|
|
|
|
<div ref="warningRefP" style="height:100%;padding:0 24px">
|
|
|
|
<div ref="warningRefP" style="height:100%;padding:0 24px">i
|
|
|
|
<TransitionGroup class="container" name="fade" tag="div">
|
|
|
|
<TransitionGroup class="container" name="fade" tag="div">
|
|
|
|
<div v-for="(i,index) in warringList" :key='index' ref="warningRef"
|
|
|
|
<div v-for="(i,index) in warringList" :key='i' ref="warningRef"
|
|
|
|
style="position:relative;color:#fff;height: 120px;">
|
|
|
|
style="position:relative;color:#fff;height: 120px;">
|
|
|
|
<img src="../assets/icons/highTemperature.png"
|
|
|
|
<img src="../assets/icons/highTemperature.png"
|
|
|
|
style="width: 40px;height: 40px;position: absolute;top: 10px;left: 0px">
|
|
|
|
style="width: 40px;height: 40px;position: absolute;top: 10px;left: 0px">
|
|
|
@ -230,7 +230,7 @@ export default {
|
|
|
|
first = true
|
|
|
|
first = true
|
|
|
|
clearInterval(timeout)
|
|
|
|
clearInterval(timeout)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if(this.warringWaitList.length > 0) {
|
|
|
|
if (this.warringWaitList.length > 0) {
|
|
|
|
this.warringList.splice(this.warringList.length, 0, this.warringWaitList.splice(0, 1)[0])
|
|
|
|
this.warringList.splice(this.warringList.length, 0, this.warringWaitList.splice(0, 1)[0])
|
|
|
|
}
|
|
|
|
}
|
|
|
|
i++
|
|
|
|
i++
|
|
|
@ -238,9 +238,14 @@ export default {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
timeoutF()
|
|
|
|
timeoutF()
|
|
|
|
setInterval(() => {
|
|
|
|
setInterval(() => {
|
|
|
|
|
|
|
|
console.log(1)
|
|
|
|
if (first && this.warringWaitList.length > 0) {
|
|
|
|
if (first && this.warringWaitList.length > 0) {
|
|
|
|
this.warringList.splice(1, 0)
|
|
|
|
if (this.warringList.length >= listLength) {
|
|
|
|
this.warringList.splice(this.warringList.length, 0, this.warringWaitList.splice(0, 1)[0])
|
|
|
|
this.warringList.splice(0, 1)
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
|
|
|
this.warringList.splice(this.warringList.length, 0, this.warringWaitList.splice(0, 1)[0])
|
|
|
|
|
|
|
|
}, 500)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}, 1000)
|
|
|
|
}, 1000)
|
|
|
|
|
|
|
|
|
|
|
@ -251,7 +256,7 @@ export default {
|
|
|
|
})
|
|
|
|
})
|
|
|
|
setInterval(() => {
|
|
|
|
setInterval(() => {
|
|
|
|
this.setInfo()
|
|
|
|
this.setInfo()
|
|
|
|
}, 6 * 1000 * 1000)
|
|
|
|
}, 10 * 1000)
|
|
|
|
// })
|
|
|
|
// })
|
|
|
|
},
|
|
|
|
},
|
|
|
|
beforeDestroy() {
|
|
|
|
beforeDestroy() {
|
|
|
@ -631,22 +636,18 @@ export default {
|
|
|
|
box-sizing: border-box;
|
|
|
|
box-sizing: border-box;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 1. 声明过渡效果 */
|
|
|
|
|
|
|
|
.fade-move,
|
|
|
|
.fade-move,
|
|
|
|
.fade-enter-active,
|
|
|
|
.fade-enter-active,
|
|
|
|
.fade-leave-active {
|
|
|
|
.fade-leave-active {
|
|
|
|
transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
|
|
|
|
transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 2. 声明进入和离开的状态 */
|
|
|
|
|
|
|
|
.fade-enter-from,
|
|
|
|
.fade-enter-from,
|
|
|
|
.fade-leave-to {
|
|
|
|
.fade-leave-to {
|
|
|
|
opacity: 0;
|
|
|
|
opacity: 0;
|
|
|
|
transform: scaleY(0.01) translate(30px, 0);
|
|
|
|
transform: scaleY(0.01) translate(30px, 0);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 3. 确保离开的项目被移除出了布局流
|
|
|
|
|
|
|
|
以便正确地计算移动时的动画效果。 */
|
|
|
|
|
|
|
|
.fade-leave-active {
|
|
|
|
.fade-leave-active {
|
|
|
|
position: absolute;
|
|
|
|
position: absolute;
|
|
|
|
}
|
|
|
|
}
|
|
|
|