114 lines
2.4 KiB
Vue
114 lines
2.4 KiB
Vue
<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>
|
|
</template>
|
|
|
|
<script>
|
|
import LineChart from "../charts/LineChart.vue";
|
|
import Container from "../layout/Container.vue";
|
|
import SubContainer from "../layout/SubContainer.vue";
|
|
import DigitalBox from "../common/DigitalBox.vue";
|
|
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"]),
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@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));
|
|
}
|
|
|
|
.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%;
|
|
}
|
|
|
|
.graph {
|
|
// background: #ccc3;
|
|
}
|
|
|
|
.flex-1 {
|
|
flex: 1;
|
|
// background: #eee;
|
|
}
|
|
|
|
|
|
.time {
|
|
// background: #eee;
|
|
margin: adjust(6px) 0 0;
|
|
padding-left: adjust(14px);
|
|
}
|
|
|
|
.time--item:not(:last-child) {
|
|
margin-right: adjust(5px);
|
|
}
|
|
|
|
.temp-data {
|
|
color: #0068ff;
|
|
font-size: adjust(h(88px));
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
</style>
|