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>
<!-- 窑炉进口水温 -->
<Container class="in-water" usage="NumberAndChart">
<SubContainer title="进口实时水温" icon="inWater">
<div class="pic" style=""></div>
<div class="content flex flex-col">
<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" />
</div>
</div>
</SubContainer>
</Container>
<!-- 窑炉进口水温 -->
<Container class="in-water" usage="NumberAndChart">
<SubContainer title="进口实时水温" icon="inWater">
<!-- <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="graph flex-1">
<HistoryTrend
key="water-in"
title="窑炉进口水温历史"
:series="kilnWaterIn"
/>
</div>
</div>
</SubContainer>
</Container>
</template>
<script>
@ -28,17 +31,17 @@ import HistoryTrend from "./HistoryTemp.vue";
import { mapState } from "vuex";
export default {
name: "InWater",
props: {},
components: { Container, SubContainer, LineChart, DigitalBox, HistoryTrend },
data() {
return {
chartConfig: {},
};
},
computed: {
...mapState(["kilnWaterIn", "waterInTemp"]),
},
name: "InWater",
props: {},
components: { Container, SubContainer, LineChart, DigitalBox, HistoryTrend },
data() {
return {
chartConfig: {},
};
},
computed: {
...mapState(["kilnWaterIn", "waterInTemp"]),
},
};
</script>
@ -46,68 +49,58 @@ export default {
@import "../../assets/styles/functions";
.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));
position: absolute;
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%;
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 {
// background: #ccc3;
// background: #ccc3;
}
.flex-1 {
flex: 1;
// background: #eee;
flex: 1;
// background: #eee;
}
.time {
// background: #eee;
margin: adjust(6px) 0 0;
padding-left: adjust(14px);
transform: translate(56px, 80px);
// background: #eee;
}
.time--item:not(:last-child) {
margin-right: adjust(5px);
margin-right: adjust(5px);
}
.temp-data {
color: #0068ff;
font-size: adjust(h(88px));
letter-spacing: 1px;
color: #0068ff;
font-size: 80px;
letter-spacing: 2px;
}
.unit {
font-family: sans-serif !important;
font-size: adjust(h(48px));
font-weight: 400;
letter-spacing: 1px;
align-self: flex-end;
margin-bottom: 4px;
margin-left: 4px;
color: #0068ff;
font-family: sans-serif !important;
font-size: 48px;
font-weight: 400;
letter-spacing: 1px;
align-self: flex-end;
margin-bottom: 4px;
margin-left: 4px;
color: #0068ff;
}
</style>

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

@ -1,22 +1,24 @@
<template>
<!-- 窑炉出口水温 -->
<Container class="out-water" usage="NumberAndChart">
<SubContainer title="出口实时水温" icon="inWater">
<div class="pic" style=""></div>
<div class="content flex flex-col">
<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" />
</div>
</div>
</SubContainer>
</Container>
<!-- 窑炉出口水温 -->
<Container class="out-water" usage="NumberAndChart">
<SubContainer title="出口实时水温" icon="inWater">
<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="graph flex-1">
<HistoryTrend
key="water-out"
title="窑炉出口水温历史"
:series="kilnWaterOut"
/>
</div>
</div>
</SubContainer>
</Container>
</template>
<script>
@ -28,85 +30,74 @@ import HistoryTrend from "./HistoryTemp.vue";
import { mapState } from "vuex";
export default {
name: "OutWater",
props: {},
components: { Container, SubContainer, LineChart, DigitalBox, HistoryTrend },
data() {
return {
chartConfig: {},
};
},
computed: {
...mapState(["kilnWaterOut", "waterOutTemp"]),
},
name: "OutWater",
props: {},
components: { Container, SubContainer, LineChart, DigitalBox, HistoryTrend },
data() {
return {
chartConfig: {},
};
},
computed: {
...mapState(["kilnWaterOut", "waterOutTemp"]),
},
};
</script>
<style scoped lang="scss">
@import "../../assets/styles/functions";
.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));
position: absolute;
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%;
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 {
// background: #ccc3;
// background: #ccc3;
}
.flex-1 {
flex: 1;
// background: #eee;
flex: 1;
// background: #eee;
}
.time {
// background: #eee;
margin: adjust(4px) 0 0;
padding-left: adjust(14px);
transform: translate(56px, 80px);
}
.time--item:not(:last-child) {
margin-right: adjust(5px);
margin-right: adjust(5px);
}
.temp-data {
color: #0068ff;
font-size: adjust(h(88px));
letter-spacing: 1px;
color: #0068ff;
font-size: 80px;
letter-spacing: 2px;
}
.unit {
font-family: sans-serif !important;
font-size: adjust(h(48px));
font-weight: 400;
letter-spacing: 1px;
align-self: flex-end;
margin-bottom: 4px;
margin-left: 4px;
color: #0068ff;
font-family: sans-serif !important;
font-size: 48px;
font-weight: 400;
letter-spacing: 1px;
align-self: flex-end;
margin-bottom: 4px;
margin-left: 4px;
color: #0068ff;
}
</style>