427 lines
8.1 KiB
Vue
427 lines
8.1 KiB
Vue
<template>
|
|
<main class="">
|
|
<!-- 监控组 -->
|
|
<MonitorGroup />
|
|
|
|
<!-- 缺陷分析 -->
|
|
<FaultAnalysis />
|
|
|
|
<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" 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 MonitorGroup from '../groups/monitor.vue'
|
|
import FaultAnalysis from '../groups/fault.vue'
|
|
// import Container from './Container.vue'
|
|
import { mapMutations, mapState } from "vuex";
|
|
|
|
import WsClient from "../../utils/wsClass";
|
|
|
|
export default {
|
|
name: "Main",
|
|
components: {
|
|
MonitorGroup,
|
|
FaultAnalysis,
|
|
AreaOne,
|
|
// KilnRuntime,
|
|
// KilnPressure,
|
|
// FanRuntime,
|
|
// OilFlow,
|
|
// GasFlow,
|
|
// TopTemp,
|
|
// BottomTemp,
|
|
// XicaoTemp,
|
|
// 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: #eee2;
|
|
}
|
|
|
|
.area-one {
|
|
position: absolute;
|
|
top: adjust(150px);
|
|
left: adjust(1340px);
|
|
}
|
|
|
|
.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(20px);
|
|
height: adjust(20px);
|
|
display: inline-block;
|
|
position: absolute;
|
|
background: #ff5757;
|
|
border-radius: adjust(10px);
|
|
}
|
|
|
|
.arrow.ar-running {
|
|
background: #1bff3a;
|
|
}
|
|
|
|
.ar-top-right {
|
|
top: 145px;
|
|
left: 65px;
|
|
}
|
|
.ar-top-left {
|
|
top: 175px;
|
|
left: 985px;
|
|
}
|
|
.ar-bottom-left {
|
|
top: 445px;
|
|
left: 960px;
|
|
}
|
|
.ar-bottom-right {
|
|
top: 460px;
|
|
left: 20px;
|
|
}
|
|
|
|
.swd {
|
|
background-size: 100%;
|
|
width: adjust(w(276px));
|
|
height: adjust(h(156px));
|
|
position: absolute;
|
|
transform: rotateY(180deg);
|
|
p {
|
|
margin: 0;
|
|
margin-top: adjust(12px);
|
|
}
|
|
.swd-box {
|
|
margin-left: adjust(21px);
|
|
font-size: adjust(15px);
|
|
.swd-value {
|
|
color: #00f4ff;
|
|
margin-top: adjust(6px);
|
|
font-size: adjust(26px);
|
|
overflow: hidden; /*超出部分隐藏*/
|
|
white-space: nowrap; /*禁止换行*/
|
|
text-overflow: ellipsis; /*省略号*/
|
|
}
|
|
}
|
|
}
|
|
|
|
.onekb, .onesp{
|
|
// background: url(../../assets/tem-bottom.png) no-repeat;
|
|
}
|
|
.onekb {
|
|
top: adjust(300px);
|
|
left: adjust(350px)
|
|
}
|
|
.onesp {
|
|
top: adjust(270px);
|
|
left: adjust(520px)
|
|
}
|
|
.twokb, .twosp{
|
|
// background: url(../../assets/tem-top.png) no-repeat;
|
|
}
|
|
.twokb {
|
|
top: adjust(-20px);
|
|
left: adjust(370px)
|
|
}
|
|
.twosp {
|
|
top: adjust(10px);
|
|
left: adjust(540px)
|
|
}
|
|
|
|
.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>
|