dezhou-screen/src/components/layout/Main.vue

<template>
	<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="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"]),
	mounted() {
		const wsc = new WsClient(this);
		wsc.registerListeners();
		// this.$store.commit("update", { target: "fire-direction", data: "北火" });
	},
	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(176.3px);
	left: adjust(38px);
	transform: scale(0.9);
}

.video-top {
	position: absolute;
	top: adjust(48px);
	left: adjust(33px);
	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);
}

.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;
}

.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;
}

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