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

update 基本完成

Browse Source
This commit is contained in:
lb 2023-07-12 14:18:23 +08:00
parent a3bb68c81e
commit f729af36c6
7 changed files with 122 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.vue
View File

@ -6,6 +6,4 @@
<script></script> <script></script>
<style lang="scss"> <style lang="scss"></style>
</style>

2
src/components/groups/monitor2.vue
View File

@ -24,7 +24,7 @@ export default {
@import "../../assets/styles/functions"; @import "../../assets/styles/functions";
section { section {
background: rgba(47, 203, 255, 0.225); // background: rgba(47, 203, 255, 0.225);
width: 100%; width: 100%;
// height: 1178px; // height: 1178px;
height: 1469px; height: 1469px;

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

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

6
src/main.js
View File

@ -11,6 +11,12 @@ Vue.config.productionTip = false
Vue.directive('title', title) Vue.directive('title', title)
document.body.addEventListener('keydown', e => {
if (e.shiftKey && e.key === 'L') {
console.log('e', e.key)
}
})
new Vue({ new Vue({
router, router,
store, store,

2
src/views/HomeView.vue
View File

@ -49,7 +49,7 @@ export default {
// height: 300px; // height: 300px;
// width: 600px; // width: 600px;
overflow: hidden; overflow: hidden;
// background: url(../assets/bg.png) center/cover no-repeat, #e0e3f6; background: url(../assets/bg.png) center/cover no-repeat, #e0e3f6;
color: white; color: white;
display: flex; display: flex;
} }

2
src/views/LeftSide.vue
View File

@ -19,7 +19,7 @@ export default {
// import // import
.left-side { .left-side {
background: rgba(243, 54, 145, 0.166); // background: rgba(243, 54, 145, 0.166);
height: 4320px; height: 4320px;
width: 3840px; width: 3840px;
} }

2
src/views/RightSide.vue
View File

@ -19,7 +19,7 @@ export default {
// import // import
.right-side { .right-side {
background: rgba(30, 133, 244, 0.292); // background: rgba(30, 133, 244, 0.292);
height: 4320px; height: 4320px;
width: 3840px; width: 3840px;
} }