done
This commit is contained in:
parent
1214eb5c7d
commit
ae1ecdced1
@ -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 {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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%;
|
||||
|
||||
@ -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
src/components/layout/BottomBar.vue
Normal file
139
src/components/layout/BottomBar.vue
Normal 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>
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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>
|
||||
Loading…
Reference in New Issue
Block a user