mt-fe-group/dezhou-screen
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update inwater

Browse Source
This commit is contained in:
lb 2023-06-07 17:03:15 +08:00
parent 7cdf283aca
commit 1778ac8848
6 changed files with 85 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/box-number.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 127 KiB

BIN
src/assets/box-right.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 331 KiB

After

Width:  |  Height:  |  Size: 49 KiB

57
src/components/boxes/InWater.vue
View File

@ -1,44 +1,19 @@
<template>
<!-- 窑炉进口水温 -->
<Container usage="NumberAndChart">
<SubContainer title="窑炉进口水温" icon="inWater" padding="34px">
<Container class="in-water" usage="NumberAndChart">
<SubContainer title="窑炉进口水温" icon="inWater" padding="20px">
<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="temp-data">{{ waterInTemp }}</span>
<span class="unit">℃</span>
</div>
<div class="text">进口实时水温</div>
</div>
<div class="wave"></div>
<div class="graph flex-1">
<HistoryTrend
key="water-in"
title="窑炉进口水温历史"
:series="kilnWaterIn"
/>
<HistoryTrend key="water-in" title="窑炉进口水温历史" :series="kilnWaterIn" />
</div>
</div>
</SubContainer>
@ -71,6 +46,14 @@ export default {
<style scoped lang="scss">
@import "../../assets/styles/functions";
.in-water {
position: absolute;
top: adjust(h(430px));
left: adjust(w(5660px));
height: adjust(h(665px));
width: adjust(w(780px));
}
.pic {
background: url(../../assets/in-water.png) no-repeat;
background-size: 100% 100%;
@ -143,14 +126,12 @@ export default {
height: adjust(4px);
width: 100%;
/* 渐变色 */
background: radial-gradient(
ellipse at center,
#6fe2ff,
#6fe2ffc0,
#52cbef80,
#52cbef30,
#52cbef00,
transparent
);
background: radial-gradient(ellipse at center,
#6fe2ff,
#6fe2ffc0,
#52cbef80,
#52cbef30,
#52cbef00,
transparent);
}
</style>

49
src/components/layout/Container.vue
View File

@ -33,8 +33,8 @@ export default {
},
};
},
created() {},
mounted() {},
created() { },
mounted() { },
methods: {},
};
</script>
@ -44,39 +44,34 @@ export default {
@import "../../assets/styles/variables";
.number-or-date {
display: inline-block;
width: adjust(w(800px));
height: adjust(h(375px));
background: url(../../assets/box-number.png);
background-position: 0 0; /** top left */
background-size: 100% 100%;
display: inline-block;
// background: url(../../assets/box-number.png) 0 0 / 100% 100% no-repeat;
}
.tables {
display: inline-block;
width: adjust(w(800px));
height: adjust(h(528px));
background: url(../../assets/box-table.png);
background-position: 0 0; /** top left */
background-size: 100% 100%;
display: inline-block;
width: adjust(w(800px));
height: adjust(h(528px));
background: url(../../assets/box-table.png);
background-position: 0 0;
/** top left */
background-size: 100% 100%;
}
.charts {
display: inline-block;
width: adjust(w(1580px));
height: adjust(h(520px));
background: url(../../assets/box-chart.png);
background-position: 0 0; /** top left */
background-size: 100% 100%;
display: inline-block;
width: adjust(w(1580px));
height: adjust(h(520px));
background: url(../../assets/box-chart.png);
background-position: 0 0;
/** top left */
background-size: 100% 100%;
}
.number-and-chart {
display: inline-block;
width: adjust(w(800px));
height: adjust(h(931px));
background: url(../../assets/box-right.png);
background-position: 0 0; /** top left */
background-size: 100% 100%;
display: inline-block;
width: adjust(w(800px));
height: adjust(h(931px));
background: url(../../assets/box-right.png) 0 0 / 100% 100% no-repeat;
}
</style>

83
src/components/layout/Main.vue
View File

@ -2,13 +2,13 @@
<main class="">
<!-- 监控组 -->
<MonitorGroup />
<!-- 缺陷分析 -->
<FaultAnalysis />
<FaultAnalysis />
<!-- 环境浓度 -->
<Environ />
<Environ />
<!-- 监控组 2 -->
<MonitorGroup2 />
@ -41,25 +41,25 @@
<div class="swd onekb">
<div class="swd-box">
<p>1#卡脖</p>
<p class="swd-value">{{Number(onekb).toFixed(1)}}℃</p>
<p class="swd-value">{{ Number(onekb).toFixed(1) }}℃</p>
</div>
</div>
<div class="swd onesp">
<div class="swd-box">
<p>1#搅拌</p>
<p class="swd-value">{{Number(onesp).toFixed(1)}}℃</p>
<p class="swd-value">{{ Number(onesp).toFixed(1) }}℃</p>
</div>
</div>
<div class="swd twokb">
<div class="swd-box">
<p>2#卡脖</p>
<p class="swd-value">{{Number(twokb).toFixed(1)}}℃</p>
<p class="swd-value">{{ Number(twokb).toFixed(1) }}℃</p>
</div>
</div>
<div class="swd twosp">
<div class="swd-box">
<p>2#搅拌</p>
<p class="swd-value">{{Number(twosp).toFixed(1)}}℃</p>
<p class="swd-value">{{ Number(twosp).toFixed(1) }}℃</p>
</div>
</div>
@ -116,13 +116,12 @@
</div>
<div class="absolute left ou-temp">
<XicaoTemp />
</div>
<div class="absolute in-water">
<InWater />
</div>
<div class="absolute out-water">
<OutWater />
</div> -->
<InWater />
<OutWater />
</main>
</template>
@ -134,8 +133,8 @@
// 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 OutWater from "../boxes/OutWater.vue";
import InWater from "../boxes/InWater.vue";
import OutWater from "../boxes/OutWater.vue";
// import FanRuntime from "../boxes/FanRuntime.vue";
import AreaOne from "../isolate-area-1/Area.vue";
import MonitorGroup from '../groups/monitor.vue'
@ -167,8 +166,8 @@ export default {
// TopTemp,
// BottomTemp,
// XicaoTemp,
// InWater,
// OutWater,
InWater,
OutWater,
},
props: {},
data() {
@ -255,14 +254,17 @@ main {
top: 145px;
left: 65px;
}
.ar-top-left {
top: 175px;
left: 985px;
}
.ar-bottom-left {
top: 445px;
left: 960px;
}
.ar-bottom-right {
top: 460px;
left: 20px;
@ -274,43 +276,56 @@ main {
height: adjust(h(218px));
position: absolute;
transform: rotateY(180deg);
p {
margin: 0;
color: #0008;
margin-top: adjust(8px);
}
.swd-box {
margin-left: adjust(8px);
font-size: adjust(8px);
.swd-value {
color: #ff2020;
margin-top: adjust(3px);
font-size: adjust(14px);
overflow: hidden; /*超出部分隐藏*/
white-space: nowrap; /*禁止换行*/
text-overflow: ellipsis; /*省略号*/
overflow: hidden;
/*超出部分隐藏*/
white-space: nowrap;
/*禁止换行*/
text-overflow: ellipsis;
/*省略号*/
}
}
}
.onekb, .onesp{
.onekb,
.onesp {
background: url(../../assets/tem-bottom.png) top 0 left 0 / 100% no-repeat;
}
.onekb {
top: adjust(158px);
left: adjust(180px)
}
.onesp {
top: adjust(135px);
left: adjust(275px)
}
.twokb, .twosp{
.twokb,
.twosp {
background: url(../../assets/tem-top.png) top 0 left 0 / 100% no-repeat;
}
.twokb {
top: adjust(-10px);
left: adjust(188px)
}
.twosp {
top: adjust(6px);
left: adjust(275px)
@ -359,9 +374,11 @@ main {
right: adjust(1200px);
opacity: 1;
}
90% {
opacity: 1;
}
100% {
right: adjust(60px);
}
@ -372,9 +389,11 @@ main {
right: adjust(1200px);
opacity: 1;
}
90% {
opacity: 1;
}
100% {
right: adjust(60px);
}
@ -428,20 +447,4 @@ main {
left: adjust(w(7330px));
// left: adjust(w(6460px));
}
.in-water {
top: adjust(h(200px));
left: adjust(w(40px));
// left: adjust(w(8096px));
// // left: w(5096px);
z-index: 100;
}
.out-water {
top: adjust(h(1177px));
left: adjust(w(40px));
// left: adjust(w(8096px));
// left: w(5096px);
z-index: 100;
}
</style>

4
src/components/layout/SubContainer.vue
View File

@ -102,9 +102,7 @@ export default {
}
.title {
/* margin: 12px 0; */
margin-bottom: adjust(12px);
font-size: adjust(17px);
font-size: adjust(h(52px));
color: #72f2ff;
font-family: sans-serif;
user-select: none;