108 lines
2.1 KiB
Vue
108 lines
2.1 KiB
Vue
<template>
|
|
<!-- 窑炉进口水温 -->
|
|
<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>
|
|
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: -200px;
|
|
left: 27px;
|
|
height: 509px;
|
|
width: 1323px;
|
|
background: url(../../assets/in-water.png) top 0 left 0 / cover no-repeat;
|
|
}
|
|
|
|
.content {
|
|
height: 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: #0cc3;
|
|
height: 436px;
|
|
transform: translate(0, -64px);
|
|
}
|
|
|
|
.flex-1 {
|
|
flex: 1;
|
|
// background: #eee;
|
|
}
|
|
|
|
.time {
|
|
transform: translate(56px, 80px);
|
|
// background: #eee;
|
|
}
|
|
|
|
.time--item:not(:last-child) {
|
|
margin-right: adjust(5px);
|
|
}
|
|
|
|
.temp-data {
|
|
color: #0068ff;
|
|
font-size: 80px;
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
.unit {
|
|
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>
|