@@ -14,11 +14,23 @@
<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="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="swd onekb">
<div class="swd-box">
@@ -45,22 +57,47 @@
</div>
</div>
<div class="video-bottom--wrapper" v-show="true || fireDirection === '北火'" style="">
<video class="video-bottom" id="1" preload="auto" height="130" muted autoplay loop disablepictureinpicture
src="../../assets/videos/fire-to-top.mp4"></video>
<div
class="video-bottom--wrapper"
v-show="true || fireDirection === '北火'"
style=""
>
<video
class="video-bottom"
id="1"
preload="auto"
height=""
muted
autoplay
loop
disablepictureinpicture
src="../../assets/videos/fire-to-top.mp4"
></video>
</div>
<div class="video-top--wrapper" v-show="true || fireDirection === '南火'" style="">
<video id="2" class="video-top" preload="auto" height="130" muted autoplay loop disablepictureinpicture
src="../../assets/videos/fire-to-bottom.mp4"></video>
<div
class="video-top--wrapper"
v-show="true || fireDirection === '南火'"
style=""
>
<video
id="2"
class="video-top"
preload="auto"
height=""
muted
autoplay
loop
disablepictureinpicture
src="../../assets/videos/fire-to-bottom.mp4"
></video>
</div>
</div> -->
</div>
<AreaOne class="area-one" />
<Runtime class="runtime" />
<InWater />
<OutWater />
</main>
</template>
@@ -69,10 +106,10 @@ 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'
import DataGroup from '../groups/data.vue'
import FaultAnalysis from '../groups/fault.vue'
import Environ from '../groups/environ.vue'
import MonitorGroup2 from "../groups/monitor2.vue";
import DataGroup from "../groups/data.vue";
import FaultAnalysis from "../groups/fault.vue";
import Environ from "../groups/environ.vue";
import { mapMutations, mapState } from "vuex";
import WsClient from "../../utils/wsClass";
@@ -103,7 +140,7 @@ export default {
"onekb",
"twokb",
"onesp",
"twosp"
"twosp",
]),
mounted() {
const wsc = new WsClient(this);
@@ -139,8 +176,8 @@ main {
}
.video-crash {
height: adjust(h(424px)) ;
width: adjust(w(800px)) ;
height: 640px ;
background: #fcc2 ;
// background: url(../../assets/tv.png) no-repeat;
background-size: 100%;
display: inline-block;
@@ -151,25 +188,25 @@ main {
.video-bottom {
position: absolute;
bottom: adjust(207px) ;
left: adjust(29px) ;
transform: scale(0.9 5);
bottom: 400px ;
left: 268px ;
transform: scale(1.25, 1.1 5);
}
.video-top {
position: absolute;
top: adjust(35px) ;
left: adjust(38px) ;
transform: scale(0.95, 0.9 );
top: 250px ;
left: 320px ;
transform: scale(1.25 );
}
.arrow {
width: adjust(12px);
height: adjust(12px);
display: inline-block;
width: 64px;
height: 64px;
border-radius: 100%;
position: absolute;
background: #ff5757;
border-radius: adjust(10px);
}
.arrow.ar-running {
@@ -177,53 +214,56 @@ main {
}
.ar-top-right {
top: 66 px;
left: 38 px;
top: 190 px;
left: 110 px;
}
.ar-top-left {
top: 88 px;
left: 515 px;
top: 200 px;
left: 1480 px;
}
.ar-bottom-left {
top: 232 px;
left: 50 0px;
top: 700 px;
left: 143 0px;
}
.ar-bottom-right {
top: 258 px;
left: 1 4px;
top: 720 px;
left: 40 px;
}
.swd {
// background-size: 100% 10px;
width: adjust(w(376px)) ;
height: adjust(h(218px)) ;
width: 350px ;
height: 202px ;
position: absolute;
transform: rotateY(180deg);
p {
margin: 0;
color: #0008 ;
margin-top: adjust(8px) ;
color: #000;
margin-top: 16px ;
}
.swd-box {
margin-left: adjust(8px);
font-size: adjust(8px);
font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, "微软雅黑", Arial, Helvetica, sans-serif;
margin-left: 54px;
margin-top: 44px;
font-size: 30px;
letter-spacing: 2px;
color: #000;
font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC,
Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei,
"微软雅黑", Arial, Helvetica, sans-serif;
.swd-value {
color: #ff2020;
margin-top: adjust(3px);
font-size: adjust(14px);
margin-top: 12px ;
font-size: 64px ;
overflow: hidden;
/*超出部分隐藏*/
white-space: nowrap;
/*禁止换行*/
text-overflow: ellipsis;
/*省略号*/
font-weight: 700;
}
}
}
@@ -234,13 +274,13 @@ main {
}
.onekb {
top: adjust(158px) ;
left: adjust(180px)
top: 760px ;
left: 1560px;
}
.onesp {
top: adjust(135px) ;
left: adjust(275px)
top: 860px ;
left: 1100px;
}
.twokb,
@@ -249,22 +289,22 @@ main {
}
.twokb {
top: adjust(-10px) ;
left: adjust(188px)
top: 72px ;
left: 1580px;
}
.twosp {
top: adjust(6px) ;
left: adjust(275px)
top: -32px ;
left: 1080px;
}
.eq-main {
width: adjust(w(8800px)) ;
height: adjust(h(1400px)) ;
width: 9162px ;
height: 1178px ;
background: url(../../assets/eq.png) no-repeat;
background-size: 100%;
top: adjust(h(220px)) ;
left: adjust(w(6600px)) ;
top: 256px ;
left: 2172px ;
position: relative;
transform: rotateY(0.5turn);
}
@@ -273,9 +313,9 @@ main {
content: "";
position: absolute;
opacity: 0;
top: adjust(55px) ;
width: adjust(75px) ;
height: adjust(75px) ;
top: 56px ;
width: 72px ;
height: 72px ;
background: url(../../assets/mirror.png) no-repeat;
background-size: 100% 100%;
// animation: 10s linear 0.3s infinite mirror-to-left-2;
@@ -285,9 +325,9 @@ main {
content: "";
position: absolute;
opacity: 0;
top: adjust(55px) ;
width: adjust(75px) ;
height: adjust(75px) ;
top: 56px ;
width: 72px ;
height: 72px ;
background: url(../../assets/mirror.png) no-repeat;
background-size: 100% 100%;
// animation: 10s linear 5s infinite mirror-to-left;
@@ -295,7 +335,7 @@ main {
@keyframes mirror-to-left {
0% {
right: adjust( 700px) ;
right: 700px;
opacity: 1;
}
@@ -304,13 +344,13 @@ main {
}
100% {
right: adjust(30px) ;
right: 32px ;
}
}
@keyframes mirror-to-left-2 {
0% {
right: adjust( 700px) ;
right: 700px;
opacity: 1;
}
@@ -319,56 +359,7 @@ main {
}
100% {
right: adjust(30px) ;
right: 32px ;
}
}
.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));
}
</style>