Bläddra i källkod

update 基本完成

light-style__flexlayout
lb 1 år sedan
förälder
incheckning
f729af36c6
7 ändrade filer med 122 tillägg och 127 borttagningar
  1. +1
    -3
      src/App.vue
  2. +1
    -1
      src/components/groups/monitor2.vue
  3. +111
    -120
      src/components/layout/Main.vue
  4. +6
    -0
      src/main.js
  5. +1
    -1
      src/views/HomeView.vue
  6. +1
    -1
      src/views/LeftSide.vue
  7. +1
    -1
      src/views/RightSide.vue

+ 1
- 3
src/App.vue Visa fil

@@ -6,6 +6,4 @@

<script></script>

<style lang="scss">

</style>
<style lang="scss"></style>

+ 1
- 1
src/components/groups/monitor2.vue Visa fil

@@ -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;


+ 111
- 120
src/components/layout/Main.vue Visa fil

@@ -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
- 0
src/main.js Visa fil

@@ -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,


+ 1
- 1
src/views/HomeView.vue Visa fil

@@ -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;
}


+ 1
- 1
src/views/LeftSide.vue Visa fil

@@ -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;
}


+ 1
- 1
src/views/RightSide.vue Visa fil

@@ -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;
}


Laddar…
Avbryt
Spara