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

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

@ -1,22 +1,25 @@
<template> <template>
<!-- 窑炉进口水温 --> <!-- 窑炉进口水温 -->
<Container class="in-water" usage="NumberAndChart"> <Container class="in-water" usage="NumberAndChart">
<SubContainer title="进口实时水温" icon="inWater"> <SubContainer title="进口实时水温" icon="inWater">
<div class="pic" style=""></div> <!-- <div class="pic" style=""></div> -->
<div class="content flex flex-col"> <div class="content flex">
<div class="realtime"> <div class="realtime">
<div class="time flex flex-center"> <div class="time flex flex-center">
<span class="temp-data">{{ waterInTemp }}</span> <span class="temp-data">{{ waterInTemp }}</span>
<span class="unit">℃</span> <span class="unit">℃</span>
</div> </div>
</div> </div>
<div class="wave"></div> <div class="graph flex-1">
<div class="graph flex-1"> <HistoryTrend
<HistoryTrend key="water-in" title="窑炉进口水温历史" :series="kilnWaterIn" /> key="water-in"
</div> title="窑炉进口水温历史"
</div> :series="kilnWaterIn"
</SubContainer> />
</Container> </div>
</div>
</SubContainer>
</Container>
</template> </template>
<script> <script>
@ -28,17 +31,17 @@ import HistoryTrend from "./HistoryTemp.vue";
import { mapState } from "vuex"; import { mapState } from "vuex";
export default { export default {
name: "InWater", name: "InWater",
props: {}, props: {},
components: { Container, SubContainer, LineChart, DigitalBox, HistoryTrend }, components: { Container, SubContainer, LineChart, DigitalBox, HistoryTrend },
data() { data() {
return { return {
chartConfig: {}, chartConfig: {},
}; };
}, },
computed: { computed: {
...mapState(["kilnWaterIn", "waterInTemp"]), ...mapState(["kilnWaterIn", "waterInTemp"]),
}, },
}; };
</script> </script>
@ -46,68 +49,58 @@ export default {
@import "../../assets/styles/functions"; @import "../../assets/styles/functions";
.in-water { .in-water {
position: absolute; position: absolute;
top: adjust(h(430px)); top: -200px;
left: adjust(w(5630px)); left: 27px;
height: adjust(h(620px)); height: 509px;
width: adjust(w(880px)); width: 1323px;
} background: url(../../assets/in-water.png) top 0 left 0 / cover no-repeat,
#0068ff33;
.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));
} }
.content { .content {
height: 100%; height: 100%;
} }
.wave { .realtime {
transform: translateX(adjust(-8px)); width: 530px;
width: adjust(w(852px)); // height: 337px;
height: adjust(h(76px)); background: url(../../assets/inwater.png) top 90% left 0 / 100% 80% no-repeat,
background: url(../../assets/inwater.png) no-repeat; url(../../assets/i-water.png) top 24px right 24px / 40% 70% no-repeat;
background-size: 100% 100%;
} }
.graph { .graph {
// background: #ccc3; // background: #ccc3;
} }
.flex-1 { .flex-1 {
flex: 1; flex: 1;
// background: #eee; // background: #eee;
} }
.time { .time {
// background: #eee; transform: translate(56px, 80px);
margin: adjust(6px) 0 0; // background: #eee;
padding-left: adjust(14px);
} }
.time--item:not(:last-child) { .time--item:not(:last-child) {
margin-right: adjust(5px); margin-right: adjust(5px);
} }
.temp-data { .temp-data {
color: #0068ff; color: #0068ff;
font-size: adjust(h(88px)); font-size: 80px;
letter-spacing: 1px; letter-spacing: 2px;
} }
.unit { .unit {
font-family: sans-serif !important; font-family: sans-serif !important;
font-size: adjust(h(48px)); font-size: 48px;
font-weight: 400; font-weight: 400;
letter-spacing: 1px; letter-spacing: 1px;
align-self: flex-end; align-self: flex-end;
margin-bottom: 4px; margin-bottom: 4px;
margin-left: 4px; margin-left: 4px;
color: #0068ff; color: #0068ff;
} }
</style> </style>

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

@ -1,22 +1,24 @@
<template> <template>
<!-- 窑炉出口水温 --> <!-- 窑炉出口水温 -->
<Container class="out-water" usage="NumberAndChart"> <Container class="out-water" usage="NumberAndChart">
<SubContainer title="出口实时水温" icon="inWater"> <SubContainer title="出口实时水温" icon="inWater">
<div class="pic" style=""></div> <div class="content flex">
<div class="content flex flex-col"> <div class="realtime">
<div class="realtime"> <div class="time flex flex-center">
<div class="time flex flex-center"> <span class="temp-data">{{ waterOutTemp }}</span>
<span class="temp-data">{{ waterOutTemp }}</span> <span class="unit">℃</span>
<span class="unit">℃</span> </div>
</div> </div>
</div> <div class="graph flex-1">
<div class="wave"></div> <HistoryTrend
<div class="graph flex-1"> key="water-out"
<HistoryTrend key="water-out" title="窑炉出口水温历史" :series="kilnWaterOut" /> title="窑炉出口水温历史"
</div> :series="kilnWaterOut"
</div> />
</SubContainer> </div>
</Container> </div>
</SubContainer>
</Container>
</template> </template>
<script> <script>
@ -28,85 +30,74 @@ import HistoryTrend from "./HistoryTemp.vue";
import { mapState } from "vuex"; import { mapState } from "vuex";
export default { export default {
name: "OutWater", name: "OutWater",
props: {}, props: {},
components: { Container, SubContainer, LineChart, DigitalBox, HistoryTrend }, components: { Container, SubContainer, LineChart, DigitalBox, HistoryTrend },
data() { data() {
return { return {
chartConfig: {}, chartConfig: {},
}; };
}, },
computed: { computed: {
...mapState(["kilnWaterOut", "waterOutTemp"]), ...mapState(["kilnWaterOut", "waterOutTemp"]),
}, },
}; };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@import "../../assets/styles/functions"; @import "../../assets/styles/functions";
.out-water { .out-water {
position: absolute; position: absolute;
top: adjust(h(1065px)); top: -200px;
left: adjust(w(5630px)); left: 1350px;
height: adjust(h(620px)); height: 509px;
width: adjust(w(880px)); width: 1323px;
} background: url(../../assets/out-water.png) top 0 left 0 / cover no-repeat,
#ff68ff33;
.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));
} }
.content { .content {
height: 100%; height: 100%;
} }
.wave { .realtime {
transform: translateX(adjust(-8px)); width: 530px;
width: adjust(w(852px)); // height: 337px;
height: adjust(h(76px)); background: url(../../assets/outwater.png) top 90% left 0 / 100% 80% no-repeat,
background: url(../../assets/outwater.png) no-repeat; url(../../assets/o-water.png) top 24px right 24px / 40% 70% no-repeat;
background-size: 100% 100%;
} }
.graph { .graph {
// background: #ccc3; // background: #ccc3;
} }
.flex-1 { .flex-1 {
flex: 1; flex: 1;
// background: #eee; // background: #eee;
} }
.time { .time {
// background: #eee; transform: translate(56px, 80px);
margin: adjust(4px) 0 0;
padding-left: adjust(14px);
} }
.time--item:not(:last-child) { .time--item:not(:last-child) {
margin-right: adjust(5px); margin-right: adjust(5px);
} }
.temp-data { .temp-data {
color: #0068ff; color: #0068ff;
font-size: adjust(h(88px)); font-size: 80px;
letter-spacing: 1px; letter-spacing: 2px;
} }
.unit { .unit {
font-family: sans-serif !important; font-family: sans-serif !important;
font-size: adjust(h(48px)); font-size: 48px;
font-weight: 400; font-weight: 400;
letter-spacing: 1px; letter-spacing: 1px;
align-self: flex-end; align-self: flex-end;
margin-bottom: 4px; margin-bottom: 4px;
margin-left: 4px; margin-left: 4px;
color: #0068ff; color: #0068ff;
} }
</style> </style>