375 lines
7.1 KiB
Vue
375 lines
7.1 KiB
Vue
<template>
|
|
<main class="relative">
|
|
<!-- 缺陷分析 -->
|
|
<FaultAnalysis />
|
|
|
|
<!-- 环境浓度 -->
|
|
<Environ />
|
|
|
|
<!-- 监控组 2 -->
|
|
<MonitorGroup2 />
|
|
|
|
<!-- 数据组 -->
|
|
<DataGroup />
|
|
|
|
<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="swd onekb">
|
|
<div class="swd-box">
|
|
<p>1#卡脖</p>
|
|
<p class="swd-value">{{ Number(onekb).toFixed(1) }}℃</p>
|
|
</div>
|
|
</div>
|
|
<div class="swd onesp">
|
|
<div class="swd-box">
|
|
<p>1#搅拌</p>
|
|
<p class="swd-value">{{ Number(onesp).toFixed(1) }}℃</p>
|
|
</div>
|
|
</div>
|
|
<div class="swd twokb">
|
|
<div class="swd-box">
|
|
<p>2#卡脖</p>
|
|
<p class="swd-value">{{ Number(twokb).toFixed(1) }}℃</p>
|
|
</div>
|
|
</div>
|
|
<div class="swd twosp">
|
|
<div class="swd-box">
|
|
<p>2#搅拌</p>
|
|
<p class="swd-value">{{ Number(twosp).toFixed(1) }}℃</p>
|
|
</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>
|
|
|
|
<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>
|
|
</div> -->
|
|
|
|
<AreaOne class="area-one" />
|
|
<Runtime class="runtime" />
|
|
<InWater />
|
|
<OutWater />
|
|
|
|
</main>
|
|
</template>
|
|
|
|
<script>
|
|
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 { mapMutations, mapState } from "vuex";
|
|
|
|
import WsClient from "../../utils/wsClass";
|
|
|
|
export default {
|
|
name: "Main",
|
|
components: {
|
|
Runtime,
|
|
DataGroup,
|
|
MonitorGroup2,
|
|
Environ,
|
|
FaultAnalysis,
|
|
AreaOne,
|
|
InWater,
|
|
OutWater,
|
|
},
|
|
props: {},
|
|
data() {
|
|
return {};
|
|
},
|
|
computed: mapState([
|
|
"kilnPressure",
|
|
"fireDirection",
|
|
"topLeftArrowRolling",
|
|
"topRightArrowRolling",
|
|
"bottomLeftArrowRolling",
|
|
"bottomRightArrowRolling",
|
|
"onekb",
|
|
"twokb",
|
|
"onesp",
|
|
"twosp"
|
|
]),
|
|
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: #f2e2;
|
|
}
|
|
|
|
.area-one {
|
|
position: absolute;
|
|
top: 124px;
|
|
left: 3910px;
|
|
}
|
|
|
|
.runtime {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.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(207px);
|
|
left: adjust(29px);
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
.video-top {
|
|
position: absolute;
|
|
top: adjust(35px);
|
|
left: adjust(38px);
|
|
transform: scale(0.95, 0.9);
|
|
}
|
|
|
|
.arrow {
|
|
width: adjust(12px);
|
|
height: adjust(12px);
|
|
display: inline-block;
|
|
position: absolute;
|
|
background: #ff5757;
|
|
border-radius: adjust(10px);
|
|
}
|
|
|
|
.arrow.ar-running {
|
|
background: #1bff3a;
|
|
}
|
|
|
|
.ar-top-right {
|
|
top: 66px;
|
|
left: 38px;
|
|
}
|
|
|
|
.ar-top-left {
|
|
top: 88px;
|
|
left: 515px;
|
|
}
|
|
|
|
.ar-bottom-left {
|
|
top: 232px;
|
|
left: 500px;
|
|
}
|
|
|
|
.ar-bottom-right {
|
|
top: 258px;
|
|
left: 14px;
|
|
}
|
|
|
|
.swd {
|
|
// background-size: 100% 10px;
|
|
width: adjust(w(376px));
|
|
height: adjust(h(218px));
|
|
position: absolute;
|
|
transform: rotateY(180deg);
|
|
|
|
p {
|
|
margin: 0;
|
|
color: #0008;
|
|
margin-top: adjust(8px);
|
|
}
|
|
|
|
.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;
|
|
|
|
.swd-value {
|
|
color: #ff2020;
|
|
margin-top: adjust(3px);
|
|
font-size: adjust(14px);
|
|
overflow: hidden;
|
|
/*超出部分隐藏*/
|
|
white-space: nowrap;
|
|
/*禁止换行*/
|
|
text-overflow: ellipsis;
|
|
/*省略号*/
|
|
}
|
|
}
|
|
}
|
|
|
|
.onekb,
|
|
.onesp {
|
|
background: url(../../assets/tem-bottom.png) top 0 left 0 / 100% no-repeat;
|
|
}
|
|
|
|
.onekb {
|
|
top: adjust(158px);
|
|
left: adjust(180px)
|
|
}
|
|
|
|
.onesp {
|
|
top: adjust(135px);
|
|
left: adjust(275px)
|
|
}
|
|
|
|
.twokb,
|
|
.twosp {
|
|
background: url(../../assets/tem-top.png) top 0 left 0 / 100% no-repeat;
|
|
}
|
|
|
|
.twokb {
|
|
top: adjust(-10px);
|
|
left: adjust(188px)
|
|
}
|
|
|
|
.twosp {
|
|
top: adjust(6px);
|
|
left: adjust(275px)
|
|
}
|
|
|
|
.eq-main {
|
|
width: adjust(w(8800px));
|
|
height: adjust(h(1400px));
|
|
background: url(../../assets/eq.png) no-repeat;
|
|
background-size: 100%;
|
|
top: adjust(h(220px));
|
|
left: adjust(w(6600px));
|
|
position: relative;
|
|
transform: rotateY(0.5turn);
|
|
}
|
|
|
|
.eq-main::before {
|
|
content: "";
|
|
position: absolute;
|
|
opacity: 0;
|
|
top: adjust(55px);
|
|
width: adjust(75px);
|
|
height: adjust(75px);
|
|
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;
|
|
opacity: 0;
|
|
top: adjust(55px);
|
|
width: adjust(75px);
|
|
height: adjust(75px);
|
|
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(700px);
|
|
opacity: 1;
|
|
}
|
|
|
|
90% {
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
right: adjust(30px);
|
|
}
|
|
}
|
|
|
|
@keyframes mirror-to-left-2 {
|
|
0% {
|
|
right: adjust(700px);
|
|
opacity: 1;
|
|
}
|
|
|
|
90% {
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
right: adjust(30px);
|
|
}
|
|
}
|
|
|
|
.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>
|