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