mt-fe-group/dezhou-screen
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update reverse page left to right

Browse Source
This commit is contained in:
lb 2023-05-15 14:28:07 +08:00
parent a3e5119206
commit 70803f2604
1 changed files with 202 additions and 187 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

389
src/components/layout/Main.vue
View File

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