This commit is contained in:
g7hoo 2023-05-13 15:59:41 +08:00
parent c838b4ebb1
commit ab3575b596
3 changed files with 137 additions and 101 deletions

View File

@ -1,28 +1,44 @@
<template>
<!-- 窑炉进口水温 -->
<Container usage="NumberAndChart">
<SubContainer title="窑炉进口水温" icon="inWater" padding="34px">
<div class="pic" style=""></div>
<div class="content flex flex-col">
<div class="realtime">
<div class="time flex flex-center">
<DigitalBox
class="time--item"
v-for="(item, index) in waterInTemp.split('')"
:key="index"
:value="item"
/>
<span class="unit"></span>
</div>
<div class="text">进口实时水温</div>
</div>
<div class="wave"></div>
<div class="graph flex-1">
<HistoryTrend key="water-in" :series="kilnWaterIn" />
</div>
</div>
</SubContainer>
</Container>
<!-- 窑炉进口水温 -->
<Container usage="NumberAndChart">
<SubContainer title="窑炉进口水温" icon="inWater" padding="34px">
<div class="pic" style=""></div>
<div class="content flex flex-col">
<div class="realtime">
<div class="time flex flex-center">
<template v-for="(item, index) in waterInTemp.split('')">
<DigitalBox
v-if="item !== '.'"
class="time--item"
:key="index"
:value="item"
:wider="true"
/>
<span
:key="index"
v-else
style="
background: #fff;
width: 10px;
height: 10px;
align-self: flex-end;
margin-bottom: 9px;
margin-right: 8px;
"
></span>
<!-- <span :key="index" v-else style="background: red; margin-right: 8px; line-height: 1; font-size: 88px; font-family: 'zcoolqingkehuangyouti-Regular'"></span> -->
</template>
<span class="unit"></span>
</div>
<div class="text">进口实时水温</div>
</div>
<div class="wave"></div>
<div class="graph flex-1">
<HistoryTrend key="water-in" :series="kilnWaterIn" />
</div>
</div>
</SubContainer>
</Container>
</template>
<script>
@ -34,17 +50,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>
@ -52,85 +68,85 @@ export default {
@import "../../assets/styles/functions";
.pic {
background: url(../../assets/in-water.png) no-repeat;
background-size: 100% 100%;
background-position: center;
position: absolute;
top: adjust(24px);
right: 0;
width: adjust(w(440px));
height: adjust(h(380px));
background: url(../../assets/in-water.png) no-repeat;
background-size: 100% 100%;
background-position: center;
position: absolute;
top: adjust(24px);
right: 0;
width: adjust(w(440px));
height: adjust(h(380px));
}
.content {
height: 100%;
height: 100%;
}
.wave {
transform: translateX(adjust(-16px));
width: adjust(w(793px));
height: adjust(h(76px));
background: url(../../assets/inwater.png) no-repeat;
background-size: 100% 100%;
transform: translateX(adjust(-16px));
width: adjust(w(793px));
height: adjust(h(76px));
background: url(../../assets/inwater.png) no-repeat;
background-size: 100% 100%;
}
.graph {
// background: #ccc3;
// background: #ccc3;
}
.flex-1 {
flex: 1;
// background: #eee;
flex: 1;
// background: #eee;
}
.time {
// background: #eee;
margin: adjust(12px) 0;
padding-left: adjust(14px);
// background: #eee;
margin: adjust(12px) 0;
padding-left: adjust(14px);
}
.time--item:not(:last-child) {
margin-right: adjust(5px);
margin-right: adjust(5px);
}
.unit {
font-family: Ubuntu, monospace, sans-serif !important;
font-size: adjust(20px);
letter-spacing: adjust(1px);
align-self: flex-end;
font-family: Ubuntu, monospace, sans-serif !important;
font-size: adjust(20px);
letter-spacing: adjust(1px);
align-self: flex-end;
}
.text {
display: inline-block;
margin-left: adjust(24px);
margin-bottom: adjust(10px);
padding: adjust(12px) 0;
text-align: center;
font-size: adjust(22px);
letter-spacing: adjust(1px);
position: relative;
z-index: 10;
user-select: none;
display: inline-block;
margin-left: adjust(24px);
margin-bottom: adjust(10px);
padding: adjust(12px) 0;
text-align: center;
font-size: adjust(22px);
letter-spacing: adjust(1px);
position: relative;
z-index: 10;
user-select: none;
}
.text::after {
content: "";
display: block;
position: absolute;
z-index: 0;
left: 0;
bottom: adjust(10px);
height: adjust(4px);
width: 100%;
/* 渐变色 */
background: radial-gradient(
ellipse at center,
#6fe2ff,
#6fe2ffc0,
#52cbef80,
#52cbef30,
#52cbef00,
transparent
);
content: "";
display: block;
position: absolute;
z-index: 0;
left: 0;
bottom: adjust(10px);
height: adjust(4px);
width: 100%;
/* 渐变色 */
background: radial-gradient(
ellipse at center,
#6fe2ff,
#6fe2ffc0,
#52cbef80,
#52cbef30,
#52cbef00,
transparent
);
}
</style>

View File

@ -4,13 +4,17 @@
<SubContainer title="窑炉压力" icon="docs" padding="34px">
<div class="pressure flex flex-col flex-start">
<div class="time flex flex-center">
<DigitalBox
class="time--item"
v-for="(item, index) in kilnPressure.split('')"
:key="index"
:value="item"
:wider="true"
/>
<template v-for="(item, index) in kilnPressure.split('')">
<DigitalBox
v-if="item !== '.'"
class="time--item"
:key="index"
:value="item"
:wider="true"
/>
<span :key="index" v-else style="background: #fff; width: 10px; height: 10px; align-self: flex-end; margin-bottom: 9px; margin-right: 8px;"></span>
<!-- <span :key="index" v-else style="background: red; margin-right: 8px; line-height: 1; font-size: 88px; font-family: 'zcoolqingkehuangyouti-Regular'"></span> -->
</template>
<span class="unit">Pa</span>
</div>
<div class="text">窑炉压力值</div>

View File

@ -6,12 +6,28 @@
<div class="content flex flex-col">
<div class="realtime">
<div class="time flex flex-center">
<DigitalBox
class="time--item"
v-for="(item, index) in waterOutTemp.split('')"
:key="index"
:value="item"
/>
<template v-for="(item, index) in waterOutTemp.split('')">
<DigitalBox
v-if="item !== '.'"
class="time--item"
:key="index"
:value="item"
:wider="true"
/>
<span
:key="index"
v-else
style="
background: #fff;
width: 10px;
height: 10px;
align-self: flex-end;
margin-bottom: 9px;
margin-right: 8px;
"
></span>
<!-- <span :key="index" v-else style="background: red; margin-right: 8px; line-height: 1; font-size: 88px; font-family: 'zcoolqingkehuangyouti-Regular'"></span> -->
</template>
<span class="unit"></span>
</div>
<div class="text">出口实时水温</div>