update
This commit is contained in:
@@ -1,19 +1,59 @@
|
||||
<template>
|
||||
<header class="header relative">
|
||||
<div>
|
||||
<span class="header--logo">
|
||||
<!-- <img src="../../assets/logo.png" alt="logo"> -->
|
||||
</span>
|
||||
<h1>凯盛晶华玻璃有限公司800t/d特种玻璃生产线大数据指挥中心</h1>
|
||||
</div>
|
||||
<span class="header--wing absolute company"></span>
|
||||
<span class="header--wing absolute datetime"></span>
|
||||
</header>
|
||||
<header class="header relative">
|
||||
<div>
|
||||
<span class="header--logo">
|
||||
<!-- <img src="../../assets/logo.png" alt="logo"> -->
|
||||
</span>
|
||||
<h1>凯盛晶华玻璃有限公司800t/d特种玻璃生产线大数据指挥中心</h1>
|
||||
</div>
|
||||
<span class="header--wing absolute company"></span>
|
||||
<span class="header--wing absolute datetime">
|
||||
{{ date }} {{ week }} {{ time }}
|
||||
</span>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Header",
|
||||
name: "Header",
|
||||
data() {
|
||||
return {
|
||||
today: new Date(),
|
||||
time: "00:00:00",
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
date() {
|
||||
return this.today.toLocaleDateString().replaceAll("/", ".");
|
||||
},
|
||||
week() {
|
||||
return [
|
||||
"星期日",
|
||||
"星期一",
|
||||
"星期二",
|
||||
"星期三",
|
||||
"星期四",
|
||||
"星期五",
|
||||
"星期六",
|
||||
][this.today.getDay()];
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.time = this.getTime().join(":");
|
||||
setInterval(() => {
|
||||
this.time = this.getTime().join(":");
|
||||
}, 1000);
|
||||
},
|
||||
methods: {
|
||||
getTime() {
|
||||
const now = new Date();
|
||||
return [
|
||||
now.getHours() < 10 ? "0" + now.getHours() : now.getHours() + "",
|
||||
now.getMinutes() < 10 ? "0" + now.getMinutes() : now.getMinutes() + "",
|
||||
now.getSeconds() < 10 ? "0" + now.getSeconds() : now.getSeconds() + "",
|
||||
];
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -22,56 +62,60 @@ export default {
|
||||
@import "../../assets/styles/variables";
|
||||
|
||||
header {
|
||||
background: url(../../assets/header.png) center/contain no-repeat;
|
||||
background-size: 100%;
|
||||
height: adjust(h(280px));
|
||||
width: adjust($actual_width);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: url(../../assets/header.png) center/contain no-repeat;
|
||||
background-size: 100%;
|
||||
height: adjust(h(280px));
|
||||
width: adjust($actual_width);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: adjust(10px);
|
||||
> div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: adjust(10px);
|
||||
|
||||
.header--logo {
|
||||
width: adjust(102px);
|
||||
height: adjust(56px);
|
||||
background: url(../../assets/logo.png) center/contain no-repeat;
|
||||
}
|
||||
.header--logo {
|
||||
width: adjust(102px);
|
||||
height: adjust(56px);
|
||||
background: url(../../assets/logo.png) center/contain no-repeat;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-left: adjust(20px);
|
||||
font-size: adjust(35px);
|
||||
// line-height: adjust(100px);
|
||||
// background: #eee;
|
||||
user-select: none;
|
||||
letter-spacing: adjust(8px);
|
||||
font-weight: 600;
|
||||
// color: #6bf2ff;
|
||||
color: $main-color;
|
||||
font-family: "微软雅黑", sans-serif;
|
||||
}
|
||||
}
|
||||
h1 {
|
||||
margin-left: adjust(20px);
|
||||
font-size: adjust(35px);
|
||||
// line-height: adjust(100px);
|
||||
// background: #eee;
|
||||
user-select: none;
|
||||
letter-spacing: adjust(8px);
|
||||
font-weight: 600;
|
||||
// color: #6bf2ff;
|
||||
color: $main-color;
|
||||
font-family: "微软雅黑", sans-serif;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header--wing {
|
||||
left: 0;
|
||||
bottom: adjust(10px);
|
||||
height: adjust(h(78px));
|
||||
left: 0;
|
||||
bottom: adjust(10px);
|
||||
height: adjust(h(78px));
|
||||
}
|
||||
|
||||
.company {
|
||||
margin-left: adjust(w(1460px));
|
||||
width: adjust(w(1320px));
|
||||
height: adjust(h(48px));
|
||||
background: url("../../assets/company.png") center/cover no-repeat;
|
||||
margin-left: adjust(w(1460px));
|
||||
width: adjust(w(1320px));
|
||||
height: adjust(h(48px));
|
||||
background: url("../../assets/company.png") center/cover no-repeat;
|
||||
}
|
||||
|
||||
.datetime {
|
||||
margin-left: adjust(w(6150px));
|
||||
width: adjust(w(1320px));
|
||||
height: adjust(h(48px));
|
||||
background: url("../../assets/date.png") center/cover no-repeat;
|
||||
color: $main-color;
|
||||
font-size: adjust(26px);
|
||||
text-align: center;
|
||||
// display: inline-block;
|
||||
margin-left: adjust(w(6150px));
|
||||
width: adjust(w(1320px));
|
||||
height: adjust(h(48px));
|
||||
background: url("../../assets/date.png") center/cover no-repeat;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,69 +1,69 @@
|
||||
<template>
|
||||
<main class="">
|
||||
<div class="video-crash" v-if="false"></div>
|
||||
<main class="">
|
||||
<div class="video-crash" v-if="false"></div>
|
||||
|
||||
<div class="eq-main absolute">
|
||||
<div class="video-bottom" style="">
|
||||
<video
|
||||
id="1"
|
||||
preload="auto"
|
||||
height="200"
|
||||
muted
|
||||
autoplay
|
||||
loop
|
||||
disablepictureinpicture
|
||||
src="../../assets/videos/fire-to-top.mp4"
|
||||
></video>
|
||||
</div>
|
||||
<div class="eq-main absolute">
|
||||
<div class="video-bottom" v-show="fireDirection === '北火'" style="">
|
||||
<video
|
||||
id="1"
|
||||
preload="auto"
|
||||
height="200"
|
||||
muted
|
||||
autoplay
|
||||
loop
|
||||
disablepictureinpicture
|
||||
src="../../assets/videos/fire-to-top.mp4"
|
||||
></video>
|
||||
</div>
|
||||
|
||||
<div class="video-top" style="">
|
||||
<video
|
||||
id="2"
|
||||
class="video-top"
|
||||
preload="auto"
|
||||
height="200"
|
||||
muted
|
||||
autoplay
|
||||
loop
|
||||
disablepictureinpicture
|
||||
src="../../assets/videos/fire-to-bottom.mp4"
|
||||
></video>
|
||||
</div>
|
||||
</div>
|
||||
<div class="video-top" v-show="fireDirection === '南火'" style="">
|
||||
<video
|
||||
id="2"
|
||||
class="video-top"
|
||||
preload="auto"
|
||||
height="200"
|
||||
muted
|
||||
autoplay
|
||||
loop
|
||||
disablepictureinpicture
|
||||
src="../../assets/videos/fire-to-bottom.mp4"
|
||||
></video>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AreaOne class="area-one" />
|
||||
<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>
|
||||
<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>
|
||||
@@ -84,52 +84,38 @@ 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",
|
||||
"oilTable1",
|
||||
"oilTable2",
|
||||
"gasTable1",
|
||||
"gasTable2",
|
||||
"kilnTop1",
|
||||
"kilnTop2",
|
||||
"kilnBtm1",
|
||||
"kilnBtm2",
|
||||
"xiCao1",
|
||||
"xiCao2",
|
||||
"kilnWaterIn",
|
||||
"kilnWaterOut",
|
||||
]),
|
||||
mounted() {
|
||||
const wsc = new WsClient(this);
|
||||
wsc.registerListeners();
|
||||
},
|
||||
// watch: {
|
||||
// // works
|
||||
// 'kilnTop1': val => {
|
||||
// console.log('val', val)
|
||||
// }
|
||||
// },
|
||||
methods: {
|
||||
...mapMutations(["update"]),
|
||||
},
|
||||
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();
|
||||
},
|
||||
// watch: {
|
||||
// // works
|
||||
// 'kilnTop1': val => {
|
||||
// console.log('val', val)
|
||||
// }
|
||||
// },
|
||||
methods: {
|
||||
...mapMutations(["update"]),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -137,124 +123,158 @@ export default {
|
||||
@import "../../assets/styles/functions";
|
||||
|
||||
main {
|
||||
height: 1px;
|
||||
flex: 1;
|
||||
// background: #eee2;
|
||||
height: 1px;
|
||||
flex: 1;
|
||||
// background: #eee2;
|
||||
}
|
||||
|
||||
.area-one {
|
||||
position: absolute;
|
||||
top: adjust(160px);
|
||||
left: adjust(1588px);
|
||||
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;
|
||||
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(153.5px);
|
||||
left: adjust(63.5px);
|
||||
transform: scale(1.02, 1.02);
|
||||
position: absolute;
|
||||
bottom: adjust(153.5px);
|
||||
left: adjust(63.5px);
|
||||
transform: scale(1.02, 1.02);
|
||||
}
|
||||
|
||||
.video-top {
|
||||
position: absolute;
|
||||
top: adjust(64px);
|
||||
left: adjust(35px);
|
||||
transform: scale(1.02, 1.02);
|
||||
position: absolute;
|
||||
top: adjust(64px);
|
||||
left: adjust(35px);
|
||||
transform: scale(1.02, 1.02);
|
||||
}
|
||||
|
||||
.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);
|
||||
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(164px);
|
||||
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);
|
||||
top: adjust(164px);
|
||||
width: adjust(150px);
|
||||
height: adjust(150px);
|
||||
background: url(../../assets/mirror.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
animation: 10s linear .3s infinite mirror-to-left;
|
||||
content: "";
|
||||
position: absolute;
|
||||
// right: adjust(1200px);
|
||||
opacity: 0;
|
||||
top: adjust(164px);
|
||||
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);
|
||||
}
|
||||
// 50% {
|
||||
// right: adjust(800px);
|
||||
// }
|
||||
100% {
|
||||
right: adjust(60px);
|
||||
}
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
1% {
|
||||
right: adjust(1200px);
|
||||
opacity: 1;
|
||||
}
|
||||
90% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
right: adjust(60px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes mirror-to-left-2 {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
1% {
|
||||
right: adjust(1200px);
|
||||
opacity: 1;
|
||||
}
|
||||
90% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
right: adjust(60px);
|
||||
}
|
||||
}
|
||||
|
||||
.kiln-runtime {
|
||||
top: adjust(h(200px));
|
||||
left: adjust(w(60px));
|
||||
top: adjust(h(200px));
|
||||
left: adjust(w(60px));
|
||||
}
|
||||
|
||||
.kiln-pressure {
|
||||
top: adjust(h(610px));
|
||||
left: adjust(w(60px));
|
||||
top: adjust(h(610px));
|
||||
left: adjust(w(60px));
|
||||
}
|
||||
|
||||
.fan-runtime {
|
||||
top: adjust(h(1020px));
|
||||
left: adjust(w(60px));
|
||||
top: adjust(h(1020px));
|
||||
left: adjust(w(60px));
|
||||
}
|
||||
|
||||
.oil-flow {
|
||||
top: adjust(h(1588px));
|
||||
left: adjust(w(60px));
|
||||
top: adjust(h(1588px));
|
||||
left: adjust(w(60px));
|
||||
}
|
||||
|
||||
.gas-flow {
|
||||
top: adjust(h(1588px));
|
||||
left: adjust(w(1660px));
|
||||
top: adjust(h(1588px));
|
||||
left: adjust(w(1660px));
|
||||
}
|
||||
.top-temp {
|
||||
top: adjust(h(1588px));
|
||||
left: adjust(w(3260px));
|
||||
top: adjust(h(1588px));
|
||||
left: adjust(w(3260px));
|
||||
}
|
||||
.bottom-temp {
|
||||
top: adjust(h(1588px));
|
||||
left: adjust(w(4860px));
|
||||
top: adjust(h(1588px));
|
||||
left: adjust(w(4860px));
|
||||
}
|
||||
.ou-temp {
|
||||
top: adjust(h(1588px));
|
||||
left: adjust(w(6460px));
|
||||
top: adjust(h(1588px));
|
||||
left: adjust(w(6460px));
|
||||
}
|
||||
.in-water {
|
||||
top: adjust(h(200px));
|
||||
left: adjust(w(8096px));
|
||||
// left: w(5096px);
|
||||
z-index: 100;
|
||||
top: adjust(h(200px));
|
||||
left: adjust(w(8096px));
|
||||
// left: w(5096px);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.out-water {
|
||||
top: adjust(h(1177px));
|
||||
left: adjust(w(8096px));
|
||||
// left: w(5096px);
|
||||
z-index: 100;
|
||||
top: adjust(h(1177px));
|
||||
left: adjust(w(8096px));
|
||||
// left: w(5096px);
|
||||
z-index: 100;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user