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

Compare commits

base: zhanghan11:6cdd1daecb370b32b202cfc553abc2ee1b17777a
Branches Tags
zhanghan11:main
zhanghan11:bh_child_tz
..
compare: zhanghan11:9b6df9e701b917507753a983ebf94e3310bc62bc
Branches Tags
zhanghan11:bh_child_tz
zhanghan11:main

2 Commits
6cdd1daecb ... 9b6df9e701

Author SHA1 Message Date
Tony
9b6df9e701 feat: 位置调整 2024-04-09 15:39:00 +08:00
Tony
58a4c57bbe feat: 滚动字幕 2024-04-09 15:37:17 +08:00
1 changed files with 44 additions and 6 deletions
Show Stats Expand all files Collapse all files

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

@ -5,14 +5,17 @@
<div class="card-item-wrapper"> <div class="card-item-wrapper">
<div class="card-big-title">{{ title1 }}数据监控</div> <div class="card-big-title">{{ title1 }}数据监控</div>
<div class="card-sub-title">油膜轴承振动监测</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> </div>
<div class="grid-item-wrapper" style="grid-row: span 2;grid-column: span 2;padding: 2rem;"> <div class="grid-item-wrapper" style="grid-row: span 2;grid-column: span 2;padding: 2rem;">
<div class="device-image"> <div class="device-image">
<div @click="handleTypeChange(['rtd', 'rto'])"></div> <div @click="handleTypeChange(['rtd', 'rto'])"></div>
<div @click="handleTypeChange(['rbd', 'rbo'])"></div>
<div @click="handleTypeChange(['ftd', 'fto'])"></div> <div @click="handleTypeChange(['ftd', 'fto'])"></div>
<div @click="handleTypeChange(['rbd', 'rbo'])"></div>
<div @click="handleTypeChange(['fbd', 'fbo'])"></div> <div @click="handleTypeChange(['fbd', 'fbo'])"></div>
</div> </div>
</div> </div>
@ -20,19 +23,28 @@
<div class="card-item-wrapper"> <div class="card-item-wrapper">
<div class="card-big-title">{{ title2 }}数据监控</div> <div class="card-big-title">{{ title2 }}数据监控</div>
<div class="card-sub-title">油膜轴承振动监测</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> </div>
<div class="grid-item-wrapper"> <div class="grid-item-wrapper">
<div class="card-item-wrapper"> <div class="card-item-wrapper">
<div class="card-sub-title">油液颗粒度特性</div> <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> </div>
<div class="grid-item-wrapper"> <div class="grid-item-wrapper">
<div class="card-item-wrapper"> <div class="card-item-wrapper">
<div class="card-sub-title">油液颗粒度特性</div> <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> </div>
<div class="grid-item-wrapper" style="grid-column: span 2;"> <div class="grid-item-wrapper" style="grid-column: span 2;">
@ -192,7 +204,6 @@ export default {
this.initBottomR2(ov) this.initBottomR2(ov)
this.initBottomR3(owc) this.initBottomR3(owc)
console.log('ssat', ssat);
this.r1 = ssat this.r1 = ssat
this.r2 = rot this.r2 = rot
} }
@ -250,6 +261,9 @@ export default {
data: vz, data: vz,
}, },
], ],
grid: {
bottom: "20%",
}
}), true, true); }), true, true);
window.addEventListener("resize", () => { window.addEventListener("resize", () => {
chartIns && chartIns.resize(); chartIns && chartIns.resize();
@ -291,6 +305,9 @@ export default {
data: vz, data: vz,
}, },
], ],
grid: {
bottom: "20%",
}
}), true, true); }), true, true);
window.addEventListener("resize", () => { window.addEventListener("resize", () => {
chartIns && chartIns.resize(); chartIns && chartIns.resize();
@ -852,4 +869,25 @@ export default {
flex-direction: column-reverse; 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> </style>