mt-fe-group
/
dezhou-screen
7
0
Vork 0
Code Kwesties 0 Pull-aanvragen 0 Publicaties 0 Wiki Activiteit
Bladeren bron

done

dezhou-v2
lb 10 maanden geleden
bovenliggende
1214eb5c7d
commit
ae1ecdced1
7 gewijzigde bestanden met toevoegingen van 228 en 80 verwijderingen
Zij-aan-zij weergave
Diff opties
Statistieken weergeven Download Patch-bestand Download Diff-bestand
  1. +12
    -11
      src/components/boxes/InWater.vue
  2. +10
    -10
      src/components/boxes/OutWater.vue
  3. +2
    -2
      src/components/common/SmallBox2.vue
  4. +30
    -29
      src/components/isolate-area-1/Area.vue
  5. +139
    -0
      src/components/layout/BottomBar.vue
  6. +30
    -27
      src/components/layout/Main.vue
  7. +5
    -1
      src/views/MainContent.vue

+ 12
- 11
src/components/boxes/InWater.vue Bestand weergeven

@@ -49,12 +49,13 @@ export default {
@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;
// position: absolute;
// top: -200px;
// left: 27px;
height: 100%;
width: 100%;
background: url(../../assets/in-water.png) top 0 left 0 / 100% 100% no-repeat;
overflow: hidden;
}

.content {
@@ -62,16 +63,16 @@ export default {
}

.realtime {
width: 530px;
width: 620px;
// 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;
background: url(../../assets/inwater.png) top 88% left 0 / 100% 100% no-repeat,
url(../../assets/i-water.png) top 24px right 24px / 45% 70% no-repeat;
}

.graph {
// background: #0cc3;
height: 436px;
transform: translate(0, -64px);
height: 100%;
transform: translate(0, -48px);
}

.flex-1 {


+ 10
- 10
src/components/boxes/OutWater.vue Bestand weergeven

@@ -48,12 +48,12 @@ export default {
@import "../../assets/styles/functions";

.out-water {
position: absolute;
top: -200px;
left: 1350px;
height: 509px;
width: 1323px;
background: url(../../assets/out-water.png) top 0 left 0 / cover no-repeat;
// position: absolute;
// top: -200px;
// left: 1350px;
height: 100%;
width: 100%;
background: url(../../assets/out-water.png) top 0 left 0 / 100% 100% no-repeat;
}

.content {
@@ -61,16 +61,16 @@ export default {
}

.realtime {
width: 530px;
width: 620px;
// 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;
}

.graph {
// background: #0cc3;
height: 436px;
transform: translate(0, -64px);
height: 100%;
transform: translate(0, -48px);
}
.flex-1 {
flex: 1;


+ 2
- 2
src/components/common/SmallBox2.vue Bestand weergeven

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


+ 30
- 29
src/components/isolate-area-1/Area.vue Bestand weergeven

@@ -1,6 +1,6 @@
<template>
<DragabbleContainer class="isolate-area-1">
<div class="data pressure">
<!-- <div class="data pressure">
<span>压</span>
<span>力</span>
<span
@@ -10,7 +10,7 @@
>{{ press }}</span
>
<span>Pa</span>
</div>
</div> -->
<SmallBox2
class="data-center"
v-for="rd in rdata"
@@ -87,6 +87,7 @@ export default {
@import "../../assets/styles/functions";

.isolate-area-1 {
// background: #000c;
display: flex;
color: $main-color;
min-width: 300px;
@@ -94,37 +95,37 @@ export default {

> *:not(:last-child) {
margin: {
right: 128px;
right: 160px;
}
}

> .data {
flex-shrink: 0;
font-family: zcoolqingkehuangyouti-Regular, sans-serif;
display: flex;
align-items: flex-end;
}
// > .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: 299px;
color: #0068ffaa;
font-size: 142px;
line-height: 328px;
text-align: center;
vertical-align: bottom;
user-select: none;
}
// > .data > span:not(.dot) {
// /** 边框 */
// background: url("../../assets/digitbox1.png") no-repeat;
// background-size: 100% 100%;
// display: inline-block;
// width: 228px;
// height: 299px;
// color: #0068ffaa;
// font-size: 100px;
// line-height: 1;
// text-align: center;
// vertical-align: bottom;
// user-select: none;
// }

> .data > span.digit {
/** 数字字体大小 */
color: #0071ff;
font-size: 242px;
line-height: 286px;
}
// > .data > span.digit {
// /** 数字字体大小 */
// color: #0071ff;
// font-size: 242px;
// line-height: 286px;
// }
}
</style>

+ 139
- 0
src/components/layout/BottomBar.vue Bestand weergeven

@@ -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>

+ 30
- 27
src/components/layout/Main.vue Bestand weergeven

@@ -59,7 +59,7 @@

<div
class="video-bottom--wrapper"
v-show="fireDirection === '北火'"
v-show="1 || fireDirection === '北火'"
style=""
>
<video
@@ -77,7 +77,7 @@

<div
class="video-top--wrapper"
v-show="fireDirection === '南火'"
v-show="1 || fireDirection === '南火'"
style=""
>
<video
@@ -94,16 +94,16 @@
</div>
</div>

<!-- <AreaOne class="area-one" />
<Runtime class="runtime" />
<AreaOne class="area-one" />
<!-- <Runtime class="runtime" />
<InWater />
<OutWater /> -->
</main>
</template>

<script>
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 AreaOne from "../isolate-area-1/Area.vue";
import Runtime from "../isolate-area-1/Runtime.vue";
// import MonitorGroup2 from "../groups/monitor2.vue";
@@ -123,15 +123,15 @@ export default {
Environ,
FaultAnalysis,
AreaOne,
InWater,
OutWater,
// InWater,
// OutWater,
},
props: {},
data() {
return {};
},
computed: mapState([
"kilnPressure",
// "kilnPressure",
"fireDirection",
"topLeftArrowRolling",
"topRightArrowRolling",
@@ -165,8 +165,10 @@ main {

.area-one {
position: absolute;
top: 124px;
left: 3910px;
top: 110px;
left: 1450px;
// left: 50%;
// transform: translateX(-50%);
}

.runtime {
@@ -188,16 +190,17 @@ main {

.video-bottom {
position: absolute;
bottom: 400px;
left: 268px;
transform: scale(1.25, 1.15);
bottom: 212px;
right: 85px;
transform: scale(0.8) rotateY(180deg)
}

.video-top {
position: absolute;
top: 250px;
left: 320px;
transform: scale(1.25);
top: 125px;
right: 125px;
// height: 200px;
transform: scale(0.8);
}

.arrow {
@@ -214,23 +217,23 @@ main {
}

.ar-top-right {
top: 190px;
left: 110px;
top: 160px;
right: 100px;
}

.ar-top-left {
top: 200px;
left: 1480px;
top: 120px;
right: 960px;
}

.ar-bottom-left {
top: 700px;
left: 1430px;
bottom: 280px;
right: 930px;
}

.ar-bottom-right {
top: 720px;
left: 40px;
bottom: 290px;
right: 54px;
}

.swd {
@@ -302,9 +305,9 @@ main {
.eq-main {
width: 100%;
height: 800px;
background: url(../../assets/eq.png) no-repeat, #0003;
background: url(../../assets/eq.png) no-repeat;
background-size: 100%;
top: 256px;
top: 320px;
position: relative;
}



+ 5
- 1
src/views/MainContent.vue Bestand weergeven

@@ -2,16 +2,18 @@
<div class="main-content">
<AHeader />
<Main />
<BottomBar />
</div>
</template>

<script>
import AHeader from "../components/layout/Header.vue";
import Main from "../components/layout/Main.vue";
import BottomBar from "../components/layout/BottomBar.vue";

export default {
name: 'MainContent',
components: { AHeader, Main},
components: { AHeader, Main, BottomBar },
data() {
return {

@@ -25,5 +27,7 @@ export default {
width: 1px;
flex: 1;
background: #f001;
display: flex;
flex-direction: column;
}
</style>

Schrijf Voorbeeld
Laden…
Annuleren
Opslaan