add 进口水温

This commit is contained in:
lb 2023-05-10 16:37:56 +08:00
parent cdc8425cda
commit 7b7fed5e2d
3 changed files with 104 additions and 13 deletions

View File

@ -1,11 +1,23 @@
<template>
<!-- 窑炉进口水温 -->
<Container usage="Charts">
<SubContainer title="窑炉进口水温" icon="oil" padding="17px">
<div class="tables flex" style="height: 100%">
<LineChart key="1" id="line-chart-9" class="flex-1" :config="chartConfig" />
<div class="vertical-line"></div>
<LineChart key="2" id="line-chart-10" class="flex-1" :config="chartConfig" />
<Container usage="NumberAndChart">
<SubContainer title="窑炉进口水温" icon="inWater" padding="17px">
<div class="pic" style=""></div>
<div class="flex flex-col">
<div class="realtime">
<div class="time flex flex-center">
<DigitalBox
class="time--item"
v-for="(item, index) in '999'.split('')"
:key="index"
:value="item"
/>
<span class="unit"></span>
</div>
<div class="text">进口实时水温</div>
</div>
<div class="wave"></div>
<div class="graph flex-1"></div>
</div>
</SubContainer>
</Container>
@ -15,11 +27,12 @@
import LineChart from "../charts/LineChart.vue";
import Container from "../layout/Container.vue";
import SubContainer from "../layout/SubContainer.vue";
import DigitalBox from "../common/DigitalBox.vue";
export default {
name: "XicaoTemp",
props: {},
components: { Container, SubContainer, LineChart },
components: { Container, SubContainer, LineChart, DigitalBox },
data() {
return {
chartConfig: {},
@ -31,19 +44,81 @@ export default {
<style scoped lang="scss">
@import "../../assets/styles/functions";
.pic {
background: url(../../assets/in-water.png) no-repeat;
background-size: 100% 100%;
background-position: center;
position: absolute;
top: 24px;
right: 0;
width: w(386px);
height: h(364px);
}
.wave {
transform: translateX(-16px);
width: w(793px);
height: h(72px);
background: url(../../assets/inwater.png) no-repeat;
background-size: 100% 100%;
}
.graph {
background: #ccc3;
}
.flex-1 {
flex: 1;
// background: #eee;
}
.vertical-line {
margin: 0 3px;
width: 3px;
.time {
// background: #eee;
margin: 12px 0;
padding-left: 14px;
}
.time--item:not(:last-child) {
margin-right: 5px;
}
.unit {
font-family: Ubuntu, monospace, sans-serif !important;
font-size: 20px;
letter-spacing: 1px;
align-self: flex-end;
}
.text {
display: inline-block;
margin-left: 24px;
margin-bottom: 10px;
padding: 12px 0;
text-align: center;
font-size: 22px;
letter-spacing: 1px;
position: relative;
z-index: 10;
user-select: none;
}
.text::after {
content: "";
display: block;
position: absolute;
z-index: 0;
left: 0;
bottom: 10px;
height: 4px;
width: 100%;
/* 渐变色 */
background: radial-gradient(
ellipse at center,
#6fe2ff,
#6fe2ffc0,
#52cbef80,
transparent,
#52cbef30,
#52cbef00,
transparent
);
}

View File

@ -26,7 +26,9 @@
<div class="absolute left ou-temp">
<XicaoTemp />
</div>
<div class="right absolute"></div>
<div class="absolute in-water">
<InWater />
</div>
</main>
</template>
@ -38,6 +40,7 @@ import GasFlow from "../boxes/GasFlow.vue";
import TopTemp from "../boxes/TopTemp.vue";
import BottomTemp from "../boxes/BottomTemp.vue";
import XicaoTemp from "../boxes/XicaoTemp.vue";
import InWater from "../boxes/InWater.vue";
import FanRuntime from "../boxes/FanRuntime.vue";
import AreaOne from "../isolate-area-1/Area.vue";
// import Container from './Container.vue'
@ -54,6 +57,7 @@ export default {
TopTemp,
BottomTemp,
XicaoTemp,
InWater,
},
props: {},
data() {
@ -107,4 +111,10 @@ main {
top: h(1588px);
left: w(6460px);
}
.in-water {
top: h(200px);
// left: w(8096px);
left: w(5096px);
z-index: 100;
}
</style>

View File

@ -33,7 +33,8 @@ export default {
iconClass: {
clock: 'icon-clock',
docs: 'icon-docs',
oil: 'icon-oil'
oil: 'icon-oil',
inWater: 'icon-water-in'
}
};
}
@ -68,6 +69,11 @@ export default {
background-size: 100% 100%;
}
.icon-water-in {
background: url(../../assets/water-temp.png);
background-size: 100% 100%;
}
.title {
/* margin: 12px 0; */
margin-bottom: 12px;