|
|
@@ -1,69 +1,69 @@ |
|
|
|
<template> |
|
|
|
<main class=""> |
|
|
|
<div class="video-crash" v-if="false"></div> |
|
|
|
<main class=""> |
|
|
|
<div class="video-crash" v-if="false"></div> |
|
|
|
|
|
|
|
<div class="eq-main absolute"> |
|
|
|
<div class="video-bottom" v-show="fireDirection === '北火'" style=""> |
|
|
|
<video |
|
|
|
id="1" |
|
|
|
preload="auto" |
|
|
|
height="200" |
|
|
|
muted |
|
|
|
autoplay |
|
|
|
loop |
|
|
|
disablepictureinpicture |
|
|
|
src="../../assets/videos/fire-to-top.mp4" |
|
|
|
></video> |
|
|
|
</div> |
|
|
|
<div class="eq-main absolute"> |
|
|
|
<div class="video-bottom" v-show="fireDirection === '北火'" style=""> |
|
|
|
<video |
|
|
|
id="1" |
|
|
|
preload="auto" |
|
|
|
height="200" |
|
|
|
muted |
|
|
|
autoplay |
|
|
|
loop |
|
|
|
disablepictureinpicture |
|
|
|
src="../../assets/videos/fire-to-top.mp4" |
|
|
|
></video> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="video-top" v-show="fireDirection === '南火'" style=""> |
|
|
|
<video |
|
|
|
id="2" |
|
|
|
class="video-top" |
|
|
|
preload="auto" |
|
|
|
height="200" |
|
|
|
muted |
|
|
|
autoplay |
|
|
|
loop |
|
|
|
disablepictureinpicture |
|
|
|
src="../../assets/videos/fire-to-bottom.mp4" |
|
|
|
></video> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="video-top" v-show="fireDirection === '南火'" style=""> |
|
|
|
<video |
|
|
|
id="2" |
|
|
|
class="video-top" |
|
|
|
preload="auto" |
|
|
|
height="200" |
|
|
|
muted |
|
|
|
autoplay |
|
|
|
loop |
|
|
|
disablepictureinpicture |
|
|
|
src="../../assets/videos/fire-to-bottom.mp4" |
|
|
|
></video> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<AreaOne class="area-one" /> |
|
|
|
<AreaOne class="area-one" /> |
|
|
|
|
|
|
|
<div class="absolute left kiln-runtime"> |
|
|
|
<KilnRuntime /> |
|
|
|
</div> |
|
|
|
<div class="absolute left kiln-pressure"> |
|
|
|
<KilnPressure /> |
|
|
|
</div> |
|
|
|
<div class="absolute left fan-runtime"> |
|
|
|
<FanRuntime /> |
|
|
|
</div> |
|
|
|
<div class="absolute left oil-flow"> |
|
|
|
<OilFlow /> |
|
|
|
</div> |
|
|
|
<div class="absolute left gas-flow"> |
|
|
|
<GasFlow /> |
|
|
|
</div> |
|
|
|
<div class="absolute left top-temp"> |
|
|
|
<TopTemp /> |
|
|
|
</div> |
|
|
|
<div class="absolute left bottom-temp"> |
|
|
|
<BottomTemp /> |
|
|
|
</div> |
|
|
|
<div class="absolute left ou-temp"> |
|
|
|
<XicaoTemp /> |
|
|
|
</div> |
|
|
|
<div class="absolute in-water"> |
|
|
|
<InWater /> |
|
|
|
</div> |
|
|
|
<div class="absolute out-water"> |
|
|
|
<OutWater /> |
|
|
|
</div> |
|
|
|
</main> |
|
|
|
<div class="absolute left kiln-runtime"> |
|
|
|
<KilnRuntime /> |
|
|
|
</div> |
|
|
|
<div class="absolute left kiln-pressure"> |
|
|
|
<KilnPressure /> |
|
|
|
</div> |
|
|
|
<div class="absolute left fan-runtime"> |
|
|
|
<FanRuntime /> |
|
|
|
</div> |
|
|
|
<div class="absolute left oil-flow"> |
|
|
|
<OilFlow /> |
|
|
|
</div> |
|
|
|
<div class="absolute left gas-flow"> |
|
|
|
<GasFlow /> |
|
|
|
</div> |
|
|
|
<div class="absolute left top-temp"> |
|
|
|
<TopTemp /> |
|
|
|
</div> |
|
|
|
<div class="absolute left bottom-temp"> |
|
|
|
<BottomTemp /> |
|
|
|
</div> |
|
|
|
<div class="absolute left ou-temp"> |
|
|
|
<XicaoTemp /> |
|
|
|
</div> |
|
|
|
<div class="absolute in-water"> |
|
|
|
<InWater /> |
|
|
|
</div> |
|
|
|
<div class="absolute out-water"> |
|
|
|
<OutWater /> |
|
|
|
</div> |
|
|
|
</main> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
@@ -84,38 +84,38 @@ import { mapMutations, mapState } from "vuex"; |
|
|
|
import WsClient from "../../utils/wsClass"; |
|
|
|
|
|
|
|
export default { |
|
|
|
name: "Main", |
|
|
|
components: { |
|
|
|
AreaOne, |
|
|
|
KilnRuntime, |
|
|
|
KilnPressure, |
|
|
|
FanRuntime, |
|
|
|
OilFlow, |
|
|
|
GasFlow, |
|
|
|
TopTemp, |
|
|
|
BottomTemp, |
|
|
|
XicaoTemp, |
|
|
|
InWater, |
|
|
|
OutWater, |
|
|
|
}, |
|
|
|
props: {}, |
|
|
|
data() { |
|
|
|
return {}; |
|
|
|
}, |
|
|
|
computed: mapState(["kilnPressure", "fireDirection"]), |
|
|
|
mounted() { |
|
|
|
const wsc = new WsClient(this); |
|
|
|
wsc.registerListeners(); |
|
|
|
}, |
|
|
|
// watch: { |
|
|
|
// // works |
|
|
|
// 'kilnTop1': val => { |
|
|
|
// console.log('val', val) |
|
|
|
// } |
|
|
|
// }, |
|
|
|
methods: { |
|
|
|
...mapMutations(["update"]), |
|
|
|
}, |
|
|
|
name: "Main", |
|
|
|
components: { |
|
|
|
AreaOne, |
|
|
|
KilnRuntime, |
|
|
|
KilnPressure, |
|
|
|
FanRuntime, |
|
|
|
OilFlow, |
|
|
|
GasFlow, |
|
|
|
TopTemp, |
|
|
|
BottomTemp, |
|
|
|
XicaoTemp, |
|
|
|
InWater, |
|
|
|
OutWater, |
|
|
|
}, |
|
|
|
props: {}, |
|
|
|
data() { |
|
|
|
return {}; |
|
|
|
}, |
|
|
|
computed: mapState(["kilnPressure", "fireDirection"]), |
|
|
|
mounted() { |
|
|
|
const wsc = new WsClient(this); |
|
|
|
wsc.registerListeners(); |
|
|
|
}, |
|
|
|
// watch: { |
|
|
|
// // works |
|
|
|
// 'kilnTop1': val => { |
|
|
|
// console.log('val', val) |
|
|
|
// } |
|
|
|
// }, |
|
|
|
methods: { |
|
|
|
...mapMutations(["update"]), |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
@@ -123,152 +123,167 @@ export default { |
|
|
|
@import "../../assets/styles/functions"; |
|
|
|
|
|
|
|
main { |
|
|
|
height: 1px; |
|
|
|
flex: 1; |
|
|
|
// background: #eee2; |
|
|
|
height: 1px; |
|
|
|
flex: 1; |
|
|
|
// background: #eee2; |
|
|
|
} |
|
|
|
|
|
|
|
.area-one { |
|
|
|
position: absolute; |
|
|
|
top: adjust(160px); |
|
|
|
left: adjust(1588px); |
|
|
|
position: absolute; |
|
|
|
top: adjust(160px); |
|
|
|
left: adjust(1588px); |
|
|
|
} |
|
|
|
|
|
|
|
.video-crash { |
|
|
|
height: adjust(h(424px)); |
|
|
|
width: adjust(w(800px)); |
|
|
|
background: url(../../assets/tv.png) no-repeat; |
|
|
|
background-size: 100%; |
|
|
|
display: inline-block; |
|
|
|
position: absolute; |
|
|
|
top: 356px; |
|
|
|
left: 1580px; |
|
|
|
height: adjust(h(424px)); |
|
|
|
width: adjust(w(800px)); |
|
|
|
background: url(../../assets/tv.png) no-repeat; |
|
|
|
background-size: 100%; |
|
|
|
display: inline-block; |
|
|
|
position: absolute; |
|
|
|
top: 356px; |
|
|
|
left: 1580px; |
|
|
|
} |
|
|
|
|
|
|
|
.video-bottom { |
|
|
|
position: absolute; |
|
|
|
bottom: adjust(178px); |
|
|
|
left: adjust(16px); |
|
|
|
transform: scale(.9, .57); |
|
|
|
position: absolute; |
|
|
|
bottom: adjust(178px); |
|
|
|
left: adjust(16px); |
|
|
|
transform: scale(0.9, 0.57); |
|
|
|
} |
|
|
|
|
|
|
|
.video-top { |
|
|
|
position: absolute; |
|
|
|
top: adjust(44px); |
|
|
|
left: adjust(22px); |
|
|
|
transform: scale(.95, .9); |
|
|
|
position: absolute; |
|
|
|
top: adjust(44px); |
|
|
|
left: adjust(22px); |
|
|
|
transform: scale(0.95, 0.9); |
|
|
|
} |
|
|
|
|
|
|
|
.eq-main { |
|
|
|
width: adjust(w(7150px)); |
|
|
|
height: adjust(h(960px)); |
|
|
|
background: url(../../assets/eq.png) no-repeat; |
|
|
|
background-size: 100%; |
|
|
|
top: adjust(170px); |
|
|
|
left: adjust(380px); |
|
|
|
position: relative; |
|
|
|
transform: rotateY(0.5turn); |
|
|
|
width: adjust(w(7150px)); |
|
|
|
height: adjust(h(960px)); |
|
|
|
background: url(../../assets/eq.png) no-repeat; |
|
|
|
background-size: 100%; |
|
|
|
top: adjust(170px); |
|
|
|
left: adjust(380px); |
|
|
|
position: relative; |
|
|
|
transform: rotateY(0.5turn); |
|
|
|
} |
|
|
|
|
|
|
|
.eq-main::before { |
|
|
|
content: ""; |
|
|
|
position: absolute; |
|
|
|
// right: adjust(1200px); |
|
|
|
opacity: 0; |
|
|
|
top: adjust(125px); |
|
|
|
width: adjust(150px); |
|
|
|
height: adjust(150px); |
|
|
|
background: url(../../assets/mirror.png) no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
animation: 10s linear 0.3s infinite mirror-to-left-2; |
|
|
|
content: ""; |
|
|
|
position: absolute; |
|
|
|
// right: adjust(1200px); |
|
|
|
opacity: 0; |
|
|
|
top: adjust(125px); |
|
|
|
width: adjust(150px); |
|
|
|
height: adjust(150px); |
|
|
|
background: url(../../assets/mirror.png) no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
animation: 10s linear 0.3s infinite mirror-to-left-2; |
|
|
|
} |
|
|
|
|
|
|
|
.eq-main::after { |
|
|
|
content: ""; |
|
|
|
position: absolute; |
|
|
|
// right: adjust(1200px); |
|
|
|
opacity: 0; |
|
|
|
top: adjust(125px); |
|
|
|
width: adjust(150px); |
|
|
|
height: adjust(150px); |
|
|
|
background: url(../../assets/mirror.png) no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
animation: 10s linear 5s infinite mirror-to-left; |
|
|
|
content: ""; |
|
|
|
position: absolute; |
|
|
|
// right: adjust(1200px); |
|
|
|
opacity: 0; |
|
|
|
top: adjust(125px); |
|
|
|
width: adjust(150px); |
|
|
|
height: adjust(150px); |
|
|
|
background: url(../../assets/mirror.png) no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
animation: 10s linear 5s infinite mirror-to-left; |
|
|
|
} |
|
|
|
|
|
|
|
@keyframes mirror-to-left { |
|
|
|
0% { |
|
|
|
right: adjust(1200px); |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
90% { |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
100% { |
|
|
|
right: adjust(60px); |
|
|
|
} |
|
|
|
0% { |
|
|
|
right: adjust(1200px); |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
90% { |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
100% { |
|
|
|
right: adjust(60px); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@keyframes mirror-to-left-2 { |
|
|
|
0% { |
|
|
|
right: adjust(1200px); |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
90% { |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
100% { |
|
|
|
right: adjust(60px); |
|
|
|
} |
|
|
|
0% { |
|
|
|
right: adjust(1200px); |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
90% { |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
100% { |
|
|
|
right: adjust(60px); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.kiln-runtime { |
|
|
|
top: adjust(h(200px)); |
|
|
|
left: adjust(w(60px)); |
|
|
|
top: adjust(h(200px)); |
|
|
|
// left: adjust(w(60px)); |
|
|
|
left: adjust(w(8110px)); |
|
|
|
} |
|
|
|
|
|
|
|
.kiln-pressure { |
|
|
|
top: adjust(h(610px)); |
|
|
|
left: adjust(w(60px)); |
|
|
|
top: adjust(h(610px)); |
|
|
|
// left: adjust(w(60px)); |
|
|
|
left: adjust(w(8110px)); |
|
|
|
} |
|
|
|
|
|
|
|
.fan-runtime { |
|
|
|
top: adjust(h(1020px)); |
|
|
|
left: adjust(w(60px)); |
|
|
|
top: adjust(h(1020px)); |
|
|
|
// left: adjust(w(60px)); |
|
|
|
left: adjust(w(8110px)); |
|
|
|
} |
|
|
|
|
|
|
|
.oil-flow { |
|
|
|
top: adjust(h(1588px)); |
|
|
|
left: adjust(w(60px)); |
|
|
|
top: adjust(h(1588px)); |
|
|
|
// left: adjust(w(60px)); |
|
|
|
// left: adjust(w(460px)); |
|
|
|
left: adjust(w(880px)); |
|
|
|
} |
|
|
|
|
|
|
|
.gas-flow { |
|
|
|
top: adjust(h(1588px)); |
|
|
|
left: adjust(w(1660px)); |
|
|
|
top: adjust(h(1588px)); |
|
|
|
// left: adjust(w(1660px)); |
|
|
|
left: adjust(w(2500px)); |
|
|
|
} |
|
|
|
|
|
|
|
.top-temp { |
|
|
|
top: adjust(h(1588px)); |
|
|
|
left: adjust(w(3260px)); |
|
|
|
top: adjust(h(1588px)); |
|
|
|
// left: adjust(w(3260px)); |
|
|
|
left: adjust(w(4110px)); |
|
|
|
} |
|
|
|
|
|
|
|
.bottom-temp { |
|
|
|
top: adjust(h(1588px)); |
|
|
|
left: adjust(w(4860px)); |
|
|
|
top: adjust(h(1588px)); |
|
|
|
// left: adjust(w(4860px)); |
|
|
|
left: adjust(w(5720px)); |
|
|
|
} |
|
|
|
|
|
|
|
.ou-temp { |
|
|
|
top: adjust(h(1588px)); |
|
|
|
left: adjust(w(6460px)); |
|
|
|
top: adjust(h(1588px)); |
|
|
|
left: adjust(w(7330px)); |
|
|
|
// left: adjust(w(6460px)); |
|
|
|
} |
|
|
|
|
|
|
|
.in-water { |
|
|
|
top: adjust(h(200px)); |
|
|
|
left: adjust(w(8096px)); |
|
|
|
// left: w(5096px); |
|
|
|
z-index: 100; |
|
|
|
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(8096px)); |
|
|
|
// left: w(5096px); |
|
|
|
z-index: 100; |
|
|
|
top: adjust(h(1177px)); |
|
|
|
left: adjust(w(40px)); |
|
|
|
// left: adjust(w(8096px)); |
|
|
|
// left: w(5096px); |
|
|
|
z-index: 100; |
|
|
|
} |
|
|
|
</style> |