mt-fe-group/dezhou-screen
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update 进出口实时

Browse Source
This commit is contained in:
lb 2023-07-12 10:30:53 +08:00
parent 8a746794b1
commit 1c3be47344
6 changed files with 122 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/in-water.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 44 KiB

BIN
src/assets/inwater.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 21 KiB

BIN
src/assets/out-water.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 44 KiB

BIN
src/assets/outwater.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 21 KiB

51
src/components/boxes/InWater.vue
View File

@ -2,17 +2,20 @@
<!-- 窑炉进口水温 -->
<Container class="in-water" usage="NumberAndChart">
<SubContainer title="进口实时水温" icon="inWater">
<div class="pic" style=""></div>
<div class="content flex flex-col">
<!-- <div class="pic" style=""></div> -->
<div class="content flex">
<div class="realtime">
<div class="time flex flex-center">
<span class="temp-data">{{ waterInTemp }}</span>
<span class="unit">℃</span>
</div>
</div>
<div class="wave"></div>
<div class="graph flex-1">
<HistoryTrend key="water-in" title="窑炉进口水温历史" :series="kilnWaterIn" />
<HistoryTrend
key="water-in"
title="窑炉进口水温历史"
:series="kilnWaterIn"
/>
</div>
</div>
</SubContainer>
@ -47,31 +50,23 @@ export default {
.in-water {
position: absolute;
top: adjust(h(430px));
left: adjust(w(5630px));
height: adjust(h(620px));
width: adjust(w(880px));
}
.pic {
background: url(../../assets/in-water.png) top 0 left 0 / 90% no-repeat;
position: absolute;
top: adjust(10px);
right: 0;
width: adjust(w(440px));
height: adjust(h(380px));
top: -200px;
left: 27px;
height: 509px;
width: 1323px;
background: url(../../assets/in-water.png) top 0 left 0 / cover no-repeat,
#0068ff33;
}
.content {
height: 100%;
}
.wave {
transform: translateX(adjust(-8px));
width: adjust(w(852px));
height: adjust(h(76px));
background: url(../../assets/inwater.png) no-repeat;
background-size: 100% 100%;
.realtime {
width: 530px;
// height: 337px;
background: url(../../assets/inwater.png) top 90% left 0 / 100% 80% no-repeat,
url(../../assets/i-water.png) top 24px right 24px / 40% 70% no-repeat;
}
.graph {
@ -83,11 +78,9 @@ export default {
// background: #eee;
}
.time {
transform: translate(56px, 80px);
// background: #eee;
margin: adjust(6px) 0 0;
padding-left: adjust(14px);
}
.time--item:not(:last-child) {
@ -96,13 +89,13 @@ export default {
.temp-data {
color: #0068ff;
font-size: adjust(h(88px));
letter-spacing: 1px;
font-size: 80px;
letter-spacing: 2px;
}
.unit {
font-family: sans-serif !important;
font-size: adjust(h(48px));
font-size: 48px;
font-weight: 400;
letter-spacing: 1px;
align-self: flex-end;

51
src/components/boxes/OutWater.vue
View File

@ -2,17 +2,19 @@
<!-- 窑炉出口水温 -->
<Container class="out-water" usage="NumberAndChart">
<SubContainer title="出口实时水温" icon="inWater">
<div class="pic" style=""></div>
<div class="content flex flex-col">
<div class="content flex">
<div class="realtime">
<div class="time flex flex-center">
<span class="temp-data">{{ waterOutTemp }}</span>
<span class="unit">℃</span>
</div>
</div>
<div class="wave"></div>
<div class="graph flex-1">
<HistoryTrend key="water-out" title="窑炉出口水温历史" :series="kilnWaterOut" />
<HistoryTrend
key="water-out"
title="窑炉出口水温历史"
:series="kilnWaterOut"
/>
</div>
</div>
</SubContainer>
@ -46,31 +48,23 @@ export default {
.out-water {
position: absolute;
top: adjust(h(1065px));
left: adjust(w(5630px));
height: adjust(h(620px));
width: adjust(w(880px));
}
.pic {
background: url(../../assets/out-water.png) top 0 left 0 / 90% no-repeat;
position: absolute;
top: adjust(10px);
right: 0;
width: adjust(w(440px));
height: adjust(h(380px));
top: -200px;
left: 1350px;
height: 509px;
width: 1323px;
background: url(../../assets/out-water.png) top 0 left 0 / cover no-repeat,
#ff68ff33;
}
.content {
height: 100%;
}
.wave {
transform: translateX(adjust(-8px));
width: adjust(w(852px));
height: adjust(h(76px));
background: url(../../assets/outwater.png) no-repeat;
background-size: 100% 100%;
.realtime {
width: 530px;
// height: 337px;
background: url(../../assets/outwater.png) top 90% left 0 / 100% 80% no-repeat,
url(../../assets/o-water.png) top 24px right 24px / 40% 70% no-repeat;
}
.graph {
@ -82,11 +76,8 @@ export default {
// background: #eee;
}
.time {
// background: #eee;
margin: adjust(4px) 0 0;
padding-left: adjust(14px);
transform: translate(56px, 80px);
}
.time--item:not(:last-child) {
@ -95,13 +86,13 @@ export default {
.temp-data {
color: #0068ff;
font-size: adjust(h(88px));
letter-spacing: 1px;
font-size: 80px;
letter-spacing: 2px;
}
.unit {
font-family: sans-serif !important;
font-size: adjust(h(48px));
font-size: 48px;
font-weight: 400;
letter-spacing: 1px;
align-self: flex-end;