mt-fe-group/dezhou-screen
8
0
Bifurcation 0
Code Tickets Demandes d'ajout Publications Wiki Activité

update 基本完成

Parcourir la source
Cette révision appartient à :
lb 2023-07-12 14:18:23 +08:00
Parent a3bb68c81e
révision f729af36c6
7 fichiers modifiés avec 122 ajouts et 127 suppressions
Voir les Statistiques Télécharger le Fichier Patch Télécharger le Fichier des Différences Développer tous les fichiers Réduire tous les fichiers

4
src/App.vue
Voir le fichier

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

2
src/components/groups/monitor2.vue
Voir le fichier

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

231
src/components/layout/Main.vue
Voir le fichier

@ -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.95);
bottom: 400px;
left: 268px;
transform: scale(1.25, 1.15);
}
.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: 66px;
left: 38px;
top: 190px;
left: 110px;
}
.ar-top-left {
top: 88px;
left: 515px;
top: 200px;
left: 1480px;
}
.ar-bottom-left {
top: 232px;
left: 500px;
top: 700px;
left: 1430px;
}
.ar-bottom-right {
top: 258px;
left: 14px;
top: 720px;
left: 40px;
}
.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>

6
src/main.js
Voir le fichier

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

2
src/views/HomeView.vue
Voir le fichier

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

2
src/views/LeftSide.vue
Voir le fichier

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

2
src/views/RightSide.vue
Voir le fichier

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