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

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

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

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

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

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

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