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

done

Browse Source
This commit is contained in:
lb 2023-10-27 17:39:36 +08:00
parent 1214eb5c7d
commit ae1ecdced1
7 changed files with 228 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -49,12 +49,13 @@ export default {
@import "../../assets/styles/functions"; @import "../../assets/styles/functions";
.in-water { .in-water {
position: absolute; // position: absolute;
top: -200px; // top: -200px;
left: 27px; // left: 27px;
height: 509px; height: 100%;
width: 1323px; width: 100%;
background: url(../../assets/in-water.png) top 0 left 0 / cover no-repeat; background: url(../../assets/in-water.png) top 0 left 0 / 100% 100% no-repeat;
overflow: hidden;
} }
.content { .content {
@ -62,16 +63,16 @@ export default {
} }
.realtime { .realtime {
width: 530px; width: 620px;
// height: 337px; // height: 337px;
background: url(../../assets/inwater.png) top 90% left 0 / 100% 80% no-repeat, background: url(../../assets/inwater.png) top 88% left 0 / 100% 100% no-repeat,
url(../../assets/i-water.png) top 24px right 24px / 40% 70% no-repeat; url(../../assets/i-water.png) top 24px right 24px / 45% 70% no-repeat;
} }
.graph { .graph {
// background: #0cc3; // background: #0cc3;
height: 436px; height: 100%;
transform: translate(0, -64px); transform: translate(0, -48px);
} }
.flex-1 { .flex-1 {

20
src/components/boxes/OutWater.vue
View File

@ -48,12 +48,12 @@ export default {
@import "../../assets/styles/functions"; @import "../../assets/styles/functions";
.out-water { .out-water {
position: absolute; // position: absolute;
top: -200px; // top: -200px;
left: 1350px; // left: 1350px;
height: 509px; height: 100%;
width: 1323px; width: 100%;
background: url(../../assets/out-water.png) top 0 left 0 / cover no-repeat; background: url(../../assets/out-water.png) top 0 left 0 / 100% 100% no-repeat;
} }
.content { .content {
@ -61,16 +61,16 @@ export default {
} }
.realtime { .realtime {
width: 530px; width: 620px;
// height: 337px; // height: 337px;
background: url(../../assets/outwater.png) top 90% left 0 / 100% 80% no-repeat, background: url(../../assets/outwater.png) top 88% left 0 / 100% 100% no-repeat,
url(../../assets/o-water.png) top 24px right 24px / 40% 70% no-repeat; url(../../assets/o-water.png) top 24px right 24px / 40% 70% no-repeat;
} }
.graph { .graph {
// background: #0cc3; // background: #0cc3;
height: 436px; height: 100%;
transform: translate(0, -64px); transform: translate(0, -48px);
} }
.flex-1 { .flex-1 {
flex: 1; flex: 1;

4
src/components/common/SmallBox2.vue
View File

@ -59,8 +59,8 @@ export default {
flex-shrink: 0; flex-shrink: 0;
padding: 0; padding: 0;
user-select: none; user-select: none;
width: 744px; width: 750px;
height: 366px; height: 340px;
display: flex; display: flex;
background: url(../../assets/top-middle.png) no-repeat; background: url(../../assets/top-middle.png) no-repeat;
background-size: 100% 100%; background-size: 100% 100%;

59
src/components/isolate-area-1/Area.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DragabbleContainer class="isolate-area-1"> <DragabbleContainer class="isolate-area-1">
<div class="data pressure"> <!-- <div class="data pressure">
<span>压</span> <span>压</span>
<span>力</span> <span>力</span>
<span <span
@ -10,7 +10,7 @@
>{{ press }}</span >{{ press }}</span
> >
<span>Pa</span> <span>Pa</span>
</div> </div> -->
<SmallBox2 <SmallBox2
class="data-center" class="data-center"
v-for="rd in rdata" v-for="rd in rdata"
@ -87,6 +87,7 @@ export default {
@import "../../assets/styles/functions"; @import "../../assets/styles/functions";
.isolate-area-1 { .isolate-area-1 {
// background: #000c;
display: flex; display: flex;
color: $main-color; color: $main-color;
min-width: 300px; min-width: 300px;
@ -94,37 +95,37 @@ export default {
> *:not(:last-child) { > *:not(:last-child) {
margin: { margin: {
right: 128px; right: 160px;
} }
} }
> .data { // > .data {
flex-shrink: 0; // flex-shrink: 0;
font-family: zcoolqingkehuangyouti-Regular, sans-serif; // font-family: zcoolqingkehuangyouti-Regular, sans-serif;
display: flex; // display: flex;
align-items: flex-end; // align-items: flex-end;
} // }
> .data > span:not(.dot) { // > .data > span:not(.dot) {
/** 边框 */ // /** 边框 */
background: url("../../assets/digitbox1.png") no-repeat; // background: url("../../assets/digitbox1.png") no-repeat;
background-size: 100% 100%; // background-size: 100% 100%;
display: inline-block; // display: inline-block;
width: 228px; // width: 228px;
height: 299px; // height: 299px;
color: #0068ffaa; // color: #0068ffaa;
font-size: 142px; // font-size: 100px;
line-height: 328px; // line-height: 1;
text-align: center; // text-align: center;
vertical-align: bottom; // vertical-align: bottom;
user-select: none; // user-select: none;
} // }
> .data > span.digit { // > .data > span.digit {
/** 数字字体大小 */ // /** 数字字体大小 */
color: #0071ff; // color: #0071ff;
font-size: 242px; // font-size: 242px;
line-height: 286px; // line-height: 286px;
} // }
} }
</style> </style>

139
src/components/layout/BottomBar.vue Normal file
View File

@ -0,0 +1,139 @@
<template>
<div class="bottom-bar">
<section class="realtime-water-temp-in">
<InWater />
</section>
<section class="realtime-water-temp-out">
<OutWater />
</section>
<section class="dynamic-data">
<div class="top">
<div class="data pressure">
<span>压</span>
<span>力</span>
<span v-for="(press, index) in pressure" :key="index"
:class="{ digit: true, dot: press == '.' ? true : false }">{{ press }}</span>
<span>Pa</span>
</div>
</div>
<div class="bottom">
<div class="data runtime">
<span>运</span>
<span>行</span>
<span v-for="val, index in runtime" :key="index"
:class="{ 'digit': true, 'dot': val == '.' ? true : false }">{{ val }}</span>
<span>天</span>
</div>
</div>
</section>
</div>
</template>
<script>
import { mapState } from "vuex";
import InWater from "../boxes/InWater.vue";
import OutWater from "../boxes/OutWater.vue";
export default {
name: 'BottomBar',
components: { InWater, OutWater },
data() {
return {
pressure: "10.1".split(""),
runtime: "0012".split(""),
}
},
watch: {
fireDirection: function (val) {
this.$set(this.rdata[0], "value", val);
},
fireChangeTime: function (val) {
this.$set(this.rdata[1], "value", val);
},
lastFireChangeTime: function (val) {
let [_, min, sec] = /(\d+)分(\d+)秒/.exec(val || "0分0秒");
if (timeFun) clearInterval(timeFun);
timeFun = setInterval(() => {
if (sec > 0) sec -= 1;
else {
if (min > 0) {
sec = 59;
min -= 1;
} else {
if (timeFun) clearInterval(timeFun);
}
}
this.$set(this.rdata[2], "value", `${min}分${sec}秒`);
}, 1000);
},
kilnPressure: function (val) {
this.pressure = val.split("")
}
},
computed: {
...mapState(["fireDirection", "lastFireChangeTime", "fireChangeTime", "kilnPressure"]),
},
}
</script>
<style lang="scss" scoped>
.bottom-bar {
height: 600px;
// background: #0003;
display: flex;
justify-content: space-between;
>section {
flex: 1;
}
}
.realtime-water-temp-in,
.realtime-water-temp-out {
padding-right: 20px;
}
.dynamic-data {
display: flex;
flex-direction: column;
.top {
// margin: 12px 0;
// background: #f001;
}
.bottom {
// margin: 12px 0;
// background: #0f01;
}
.data {
flex-shrink: 0;
font-family: zcoolqingkehuangyouti-Regular, sans-serif;
display: flex;
align-items: flex-end;
}
.data>span:not(.dot) {
/** 边框 */
background: url("../../assets/digitbox1.png") no-repeat;
background-size: 100% 100%;
display: inline-block;
width: 228px;
height: 280px;
color: #0068ffaa;
font-size: 144px;
line-height: 2.35;
text-align: center;
vertical-align: bottom;
user-select: none;
}
.data>span.digit {
/** 数字字体大小 */
color: #0071ff;
font-size: 240px;
line-height: 1.25;
}
}
</style>

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

@ -59,7 +59,7 @@
<div <div
class="video-bottom--wrapper" class="video-bottom--wrapper"
v-show="fireDirection === '北火'" v-show="1 || fireDirection === '北火'"
style="" style=""
> >
<video <video
@ -77,7 +77,7 @@
<div <div
class="video-top--wrapper" class="video-top--wrapper"
v-show="fireDirection === '南火'" v-show="1 || fireDirection === '南火'"
style="" style=""
> >
<video <video
@ -94,16 +94,16 @@
</div> </div>
</div> </div>
<!-- <AreaOne class="area-one" /> <AreaOne class="area-one" />
<Runtime class="runtime" /> <!-- <Runtime class="runtime" />
<InWater /> <InWater />
<OutWater /> --> <OutWater /> -->
</main> </main>
</template> </template>
<script> <script>
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 AreaOne from "../isolate-area-1/Area.vue"; import AreaOne from "../isolate-area-1/Area.vue";
import Runtime from "../isolate-area-1/Runtime.vue"; import Runtime from "../isolate-area-1/Runtime.vue";
// import MonitorGroup2 from "../groups/monitor2.vue"; // import MonitorGroup2 from "../groups/monitor2.vue";
@ -123,15 +123,15 @@ export default {
Environ, Environ,
FaultAnalysis, FaultAnalysis,
AreaOne, AreaOne,
InWater, // InWater,
OutWater, // OutWater,
}, },
props: {}, props: {},
data() { data() {
return {}; return {};
}, },
computed: mapState([ computed: mapState([
"kilnPressure", // "kilnPressure",
"fireDirection", "fireDirection",
"topLeftArrowRolling", "topLeftArrowRolling",
"topRightArrowRolling", "topRightArrowRolling",
@ -165,8 +165,10 @@ main {
.area-one { .area-one {
position: absolute; position: absolute;
top: 124px; top: 110px;
left: 3910px; left: 1450px;
// left: 50%;
// transform: translateX(-50%);
} }
.runtime { .runtime {
@ -188,16 +190,17 @@ main {
.video-bottom { .video-bottom {
position: absolute; position: absolute;
bottom: 400px; bottom: 212px;
left: 268px; right: 85px;
transform: scale(1.25, 1.15); transform: scale(0.8) rotateY(180deg)
} }
.video-top { .video-top {
position: absolute; position: absolute;
top: 250px; top: 125px;
left: 320px; right: 125px;
transform: scale(1.25); // height: 200px;
transform: scale(0.8);
} }
.arrow { .arrow {
@ -214,23 +217,23 @@ main {
} }
.ar-top-right { .ar-top-right {
top: 190px; top: 160px;
left: 110px; right: 100px;
} }
.ar-top-left { .ar-top-left {
top: 200px; top: 120px;
left: 1480px; right: 960px;
} }
.ar-bottom-left { .ar-bottom-left {
top: 700px; bottom: 280px;
left: 1430px; right: 930px;
} }
.ar-bottom-right { .ar-bottom-right {
top: 720px; bottom: 290px;
left: 40px; right: 54px;
} }
.swd { .swd {
@ -302,9 +305,9 @@ main {
.eq-main { .eq-main {
width: 100%; width: 100%;
height: 800px; height: 800px;
background: url(../../assets/eq.png) no-repeat, #0003; background: url(../../assets/eq.png) no-repeat;
background-size: 100%; background-size: 100%;
top: 256px; top: 320px;
position: relative; position: relative;
} }

6
src/views/MainContent.vue
View File

@ -2,16 +2,18 @@
<div class="main-content"> <div class="main-content">
<AHeader /> <AHeader />
<Main /> <Main />
<BottomBar />
</div> </div>
</template> </template>
<script> <script>
import AHeader from "../components/layout/Header.vue"; import AHeader from "../components/layout/Header.vue";
import Main from "../components/layout/Main.vue"; import Main from "../components/layout/Main.vue";
import BottomBar from "../components/layout/BottomBar.vue";
export default { export default {
name: 'MainContent', name: 'MainContent',
components: { AHeader, Main}, components: { AHeader, Main, BottomBar },
data() { data() {
return { return {
@ -25,5 +27,7 @@ export default {
width: 1px; width: 1px;
flex: 1; flex: 1;
background: #f001; background: #f001;
display: flex;
flex-direction: column;
} }
</style> </style>