374 lines
7.1 KiB
Vue
374 lines
7.1 KiB
Vue
<template>
|
|
<main class="">
|
|
<div class="video-crash" v-if="false"></div>
|
|
|
|
<div class="eq-main absolute">
|
|
<div
|
|
class="arrow ar-top-left"
|
|
:class="topLeftArrowRolling ? 'ar-running' : ''"
|
|
></div>
|
|
<div
|
|
class="arrow ar-top-right"
|
|
:class="topRightArrowRolling ? 'ar-running' : ''"
|
|
></div>
|
|
<div
|
|
class="arrow ar-bottom-left"
|
|
:class="bottomLeftArrowRolling ? 'ar-running' : ''"
|
|
></div>
|
|
<div
|
|
class="arrow ar-bottom-right"
|
|
:class="bottomRightArrowRolling ? 'ar-running' : ''"
|
|
></div>
|
|
|
|
<div class="video-bottom" v-show="fireDirection === '北火'" style="">
|
|
<video
|
|
id="1"
|
|
preload="auto"
|
|
height="260"
|
|
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="260"
|
|
muted
|
|
autoplay
|
|
loop
|
|
disablepictureinpicture
|
|
src="../../assets/videos/fire-to-bottom.mp4"
|
|
></video>
|
|
</div>
|
|
</div>
|
|
|
|
<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>
|
|
</template>
|
|
|
|
<script>
|
|
import KilnRuntime from "../boxes/KilnRuntime.vue";
|
|
import KilnPressure from "../boxes/KilnPressure.vue";
|
|
import OilFlow from "../boxes/OilFlow.vue";
|
|
import GasFlow from "../boxes/GasFlow.vue";
|
|
import TopTemp from "../boxes/TopTemp.vue";
|
|
import BottomTemp from "../boxes/BottomTemp.vue";
|
|
import XicaoTemp from "../boxes/XicaoTemp.vue";
|
|
import InWater from "../boxes/InWater.vue";
|
|
import OutWater from "../boxes/OutWater.vue";
|
|
import FanRuntime from "../boxes/FanRuntime.vue";
|
|
import AreaOne from "../isolate-area-1/Area.vue";
|
|
// import Container from './Container.vue'
|
|
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",
|
|
"topLeftArrowRolling",
|
|
"topRightArrowRolling",
|
|
"bottomLeftArrowRolling",
|
|
"bottomRightArrowRolling",
|
|
]),
|
|
mounted() {
|
|
const wsc = new WsClient(this);
|
|
wsc.registerListeners();
|
|
// this.$store.commit("update", { target: "fire-direction", data: "南火" });
|
|
this.$store.commit("update", { target: "bottom-left-arrow", data: true });
|
|
},
|
|
methods: {
|
|
...mapMutations(["update"]),
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "../../assets/styles/functions";
|
|
|
|
main {
|
|
height: 1px;
|
|
flex: 1;
|
|
// background: #eee2;
|
|
}
|
|
|
|
.area-one {
|
|
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;
|
|
}
|
|
|
|
.video-bottom {
|
|
position: absolute;
|
|
bottom: adjust(200.5px);
|
|
left: adjust(48px);
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
.video-top {
|
|
position: absolute;
|
|
top: adjust(35px);
|
|
left: adjust(38px);
|
|
transform: scale(0.95, 0.9);
|
|
}
|
|
|
|
.arrow {
|
|
width: adjust(30px);
|
|
height: adjust(30px);
|
|
display: inline-block;
|
|
position: absolute;
|
|
}
|
|
|
|
.ar-top-left.arrow,
|
|
.ar-top-right.arrow {
|
|
animation: none;
|
|
background: url(../../assets/arrow-disabled.png) 100% 100% / contain no-repeat;
|
|
}
|
|
.ar-bottom-left.arrow,
|
|
.ar-bottom-right.arrow {
|
|
animation: none;
|
|
background: url(../../assets/arrow-r-disabled.png) 100% 100% / contain
|
|
no-repeat;
|
|
}
|
|
.ar-top-left.arrow.ar-running,
|
|
.ar-top-right.arrow.ar-running {
|
|
background: url(../../assets/arrow.png) 100% 100% / contain no-repeat;
|
|
animation: clock-direction 1.15s linear infinite forwards;
|
|
}
|
|
.ar-bottom-left.arrow.ar-running,
|
|
.ar-bottom-right.arrow.ar-running {
|
|
background: url(../../assets/arrow-r.png) 100% 100% / contain no-repeat;
|
|
animation: reverse-clock-direction 1.15s linear infinite forwards;
|
|
}
|
|
|
|
.ar-top-right {
|
|
top: 112px;
|
|
left: 56px;
|
|
}
|
|
.ar-top-left {
|
|
top: 175px;
|
|
left: 980px;
|
|
}
|
|
.ar-bottom-left {
|
|
top: 425px;
|
|
left: 955px;
|
|
}
|
|
.ar-bottom-right {
|
|
top: 492px;
|
|
left: 20px;
|
|
}
|
|
|
|
@keyframes clock-direction {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
@keyframes reverse-clock-direction {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(-360deg);
|
|
}
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.eq-main::before {
|
|
content: "";
|
|
position: absolute;
|
|
// right: adjust(1200px);
|
|
opacity: 0;
|
|
top: adjust(105px);
|
|
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(105px);
|
|
// 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);
|
|
}
|
|
}
|
|
|
|
@keyframes mirror-to-left-2 {
|
|
0% {
|
|
right: adjust(1200px);
|
|
opacity: 1;
|
|
}
|
|
90% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
right: adjust(60px);
|
|
}
|
|
}
|
|
|
|
.kiln-runtime {
|
|
top: adjust(h(200px));
|
|
// left: adjust(w(60px));
|
|
left: adjust(w(8110px));
|
|
}
|
|
|
|
.kiln-pressure {
|
|
top: adjust(h(610px));
|
|
// left: adjust(w(60px));
|
|
left: adjust(w(8110px));
|
|
}
|
|
|
|
.fan-runtime {
|
|
top: adjust(h(1020px));
|
|
// left: adjust(w(60px));
|
|
left: adjust(w(8110px));
|
|
}
|
|
|
|
.oil-flow {
|
|
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));
|
|
left: adjust(w(2500px));
|
|
}
|
|
|
|
.top-temp {
|
|
top: adjust(h(1588px));
|
|
// left: adjust(w(3260px));
|
|
left: adjust(w(4110px));
|
|
}
|
|
|
|
.bottom-temp {
|
|
top: adjust(h(1588px));
|
|
// left: adjust(w(4860px));
|
|
left: adjust(w(5720px));
|
|
}
|
|
|
|
.ou-temp {
|
|
top: adjust(h(1588px));
|
|
left: adjust(w(7330px));
|
|
// left: adjust(w(6460px));
|
|
}
|
|
|
|
.in-water {
|
|
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(40px));
|
|
// left: adjust(w(8096px));
|
|
// left: w(5096px);
|
|
z-index: 100;
|
|
}
|
|
</style>
|