zhanghan11/tzipc
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 滚动字幕

Browse Source
This commit is contained in:
Tony 2024-04-09 15:37:17 +08:00
parent 6cdd1daecb
commit 58a4c57bbe
1 changed files with 43 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
tzipc-ui/src/views/zf/bigscreen/index.vue
View File

@ -5,7 +5,10 @@
<div class="card-item-wrapper">
<div class="card-big-title">{{ title1 }}数据监控</div>
<div class="card-sub-title">油膜轴承振动监测</div>
<div class="card-main-item-wrapper" id="chart1" style="height:calc(100% - 6.4rem);"></div>
<div class="card-main-item-wrapper" id="chart1" style="height:calc(100% - 8.1rem);"></div>
<div class="scroll-text-wrapper" style="height: 1.7rem;">
<div class="scroll-inner"></div>
</div>
</div>
</div>
<div class="grid-item-wrapper" style="grid-row: span 2;grid-column: span 2;padding: 2rem;">
@ -20,19 +23,28 @@
<div class="card-item-wrapper">
<div class="card-big-title">{{ title2 }}数据监控</div>
<div class="card-sub-title">油膜轴承振动监测</div>
<div class="card-main-item-wrapper" id="chart2" style="height:calc(100% - 6.4rem);"></div>
<div class="card-main-item-wrapper" id="chart2" style="height:calc(100% - 8.1rem);"></div>
<div class="scroll-text-wrapper" style="height: 1.7rem;">
<div class="scroll-inner"></div>
</div>
</div>
</div>
<div class="grid-item-wrapper">
<div class="card-item-wrapper">
<div class="card-sub-title">油液颗粒度特性</div>
<div class="card-main-item-wrapper" id="chart3" style="height:calc(100% - 2.8rem);"></div>
<div class="card-main-item-wrapper" id="chart3" style="height:calc(100% - 4.5rem);"></div>
<div class="scroll-text-wrapper" style="height: 1.7rem;">
<div class="scroll-inner"></div>
</div>
</div>
</div>
<div class="grid-item-wrapper">
<div class="card-item-wrapper">
<div class="card-sub-title">油液颗粒度特性</div>
<div class="card-main-item-wrapper" id="chart4" style="height:calc(100% - 2.8rem);"></div>
<div class="card-main-item-wrapper" id="chart4" style="height:calc(100% - 4.5rem);"></div>
<div class="scroll-text-wrapper" style="height: 1.7rem;">
<div class="scroll-inner"></div>
</div>
</div>
</div>
<div class="grid-item-wrapper" style="grid-column: span 2;">
@ -192,7 +204,6 @@ export default {
this.initBottomR2(ov)
this.initBottomR3(owc)
console.log('ssat', ssat);
this.r1 = ssat
this.r2 = rot
}
@ -250,6 +261,9 @@ export default {
data: vz,
},
],
grid: {
bottom: "20%",
}
}), true, true);
window.addEventListener("resize", () => {
chartIns && chartIns.resize();
@ -291,6 +305,9 @@ export default {
data: vz,
},
],
grid: {
bottom: "20%",
}
}), true, true);
window.addEventListener("resize", () => {
chartIns && chartIns.resize();
@ -852,4 +869,25 @@ export default {
flex-direction: column-reverse;
}
}
.scroll-text-wrapper {
border: 1px solid #ff0000b5;
background-color: #eb16161a;
display: flex;
justify-content: center;
align-items: center;
font-size: .8rem;
position: relative;
overflow: hidden;
.scroll-inner {
position: absolute;
width: 100%;
animation: scrollAnimation 10s linear infinite;
}
}
@keyframes scrollAnimation {
0% { left: 100%; }
100% { left: -100%; }
}
</style>