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

update baselayout

Browse Source
This commit is contained in:
lb 2023-07-12 13:44:18 +08:00
parent 86a606b177
commit a3bb68c81e
11 changed files with 233 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/top-middle.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 65 KiB

After

Width:  |  Height:  |  Size: 83 KiB

26
src/components/common/SmallBox2.vue
View File

@ -59,38 +59,38 @@ export default {
flex-shrink: 0;
padding: 0;
user-select: none;
width: adjust(w(820px));
height: adjust(h(350px));
width: 744px;
height: 366px;
display: flex;
background: url(../../assets/top-middle.png) no-repeat;
background-size: 100% 100%;
background-position: bottom;
.icon {
margin-top: adjust(h(56px));
margin-left: adjust(w(24px));
width: adjust(h(172px));
height: adjust(h(172px));
margin-top: 48px;
margin-left: 48px;
width: 172px;
height: 172px;
}
.info {
margin-top: adjust(h(56px));
margin-top: 56px;
flex: 1 auto;
font-family: "微软雅黑", sans-serif;
padding-left: adjust(5px);
padding-left: 12px;
h2 {
font-size: adjust(12px);
font-size: 54px;
line-height: 48px;
opacity: 0.7;
letter-spacing: adjust(1px);
letter-spacing: 2px;
font-weight: 400;
color: hsla(0, 0%, 0%, 0.9);
}
.value {
color: #030609;
font-size: adjust(18px);
line-height: adjust(22px);
font-size: 96px;
line-height: 98px;
}
}
}

68
src/components/groups/environ.vue
View File

@ -1,22 +1,20 @@
<template>
<section class="environ-analysis">
</section>
<section class="environ-analysis"></section>
</template>
<script>
// import { mapState } from "vuex";
export default {
name: "EnviroAnalysis",
props: {},
components: {},
data() {
return {};
},
computed: {
// ...mapState(["kilnWaterIn", "waterInTemp"]),
},
name: "EnviroAnalysis",
props: {},
components: {},
data() {
return {};
},
computed: {
// ...mapState(["kilnWaterIn", "waterInTemp"]),
},
};
</script>
@ -24,24 +22,38 @@ export default {
@import "../../assets/styles/functions";
section {
background: url('../../assets/fault-analysis.png') left 144px top 4px / 79% 54% no-repeat, #ccc7;
width: adjust(w(1900px));
height: adjust(h(1260px));
position: absolute;
top: adjust(h(430px));
// left: adjust(w(15300px));
left: adjust(w(15500px));
width: 1920px;
height: 1080px;
position: absolute;
top: 490px;
right: 0;
background: #ccc3;
}
section::before {
content: '环境浓度';
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: adjust(h(64px));
font-weight: 400;
letter-spacing: 1px;
position: absolute;
color: $main-color;
top: 0;
left: 0;
content: "环境浓度";
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: 80px;
font-weight: 400;
letter-spacing: 2px;
position: absolute;
color: $main-color;
top: -128px;
left: 0;
}
section::after {
content: "";
display: inline-block;
width: 100%;
height: 100%;
background: url("../../assets/fault-analysis.png") left 360px top 18px / 90%
no-repeat;
position: absolute;
color: $main-color;
top: -128px;
left: 0;
}
</style>

2
src/components/icons/clockSvg.vue
View File

@ -1,7 +1,5 @@
<template>
<svg
:width="adjust('64px')"
:height="adjust('64px')"
viewBox="0 0 95 96"
version="1.1"
xmlns="http://www.w3.org/2000/svg"

2
src/components/icons/fireSvg.vue
View File

@ -1,7 +1,5 @@
<template>
<svg
:width="adjust('46px')"
:height="adjust('46px')"
viewBox="0 0 96 96"
version="1.1"
xmlns="http://www.w3.org/2000/svg"

2
src/components/icons/sandSvg.vue
View File

@ -1,7 +1,5 @@
<template>
<svg
:width="adjust('46px')"
:height="adjust('46px')"
viewBox="0 0 95 96"
version="1.1"
xmlns="http://www.w3.org/2000/svg"

2
src/components/icons/switchSvg.vue
View File

@ -1,7 +1,5 @@
<template>
<svg
:width="adjust('46px')"
:height="adjust('46px')"
viewBox="0 0 122 122"
version="1.1"
xmlns="http://www.w3.org/2000/svg"

2
src/components/icons/tempSvg.vue
View File

@ -1,7 +1,5 @@
<template>
<svg
:width="adjust('46px')"
:height="adjust('46px')"
viewBox="0 0 94 96"
version="1.1"
xmlns="http://www.w3.org/2000/svg"

189
src/components/isolate-area-1/Area.vue
View File

@ -1,21 +1,31 @@
<template>
<DragabbleContainer class="isolate-area-1">
<div class="data pressure">
<span>压</span>
<span>力</span>
<span v-for="press, index in pressure" :key="index"
:class="{ 'digit': true, 'dot': press == '.' ? true : false }">{{ press
}}</span>
<span>Pa</span>
</div>
<SmallBox2 class="data-center" v-for="rd in rdata" :key="rd.icon" :icon="rd.icon" :title="rd.title" :value="rd.value"></SmallBox2>
<div class="data runtime">
<DragabbleContainer class="isolate-area-1">
<div class="data pressure">
<span>压</span>
<span>力</span>
<span
v-for="(press, index) in pressure"
:key="index"
:class="{ digit: true, dot: press == '.' ? true : false }"
>{{ press }}</span
>
<span>Pa</span>
</div>
<SmallBox2
class="data-center"
v-for="rd in rdata"
:key="rd.icon"
:icon="rd.icon"
:title="rd.title"
:value="rd.value"
></SmallBox2>
<!-- <div class="data runtime">
<span>运</span>
<span>行</span>
<span v-for="val, index in runtime" :key="index" :class="{ 'digit': true, 'dot': press == '.' ? true : false }">{{ val }}</span>
<span>天</span>
</div>
</DragabbleContainer>
</div> -->
</DragabbleContainer>
</template>
<script>
@ -23,50 +33,50 @@ import DragabbleContainer from "../layout/DragableContainer.vue";
import SmallBox2 from "../common/SmallBox2.vue";
import { mapState } from "vuex";
let timeFun = null
let timeFun = null;
export default {
name: "IsolateArea--1",
components: { DragabbleContainer, SmallBox2 },
data() {
return {
pressure: '10.1'.split(''),
runtime: '0012'.split(''),
rdata: [
// { icon: "temp", title: "车间温度", value: "27℃" },
{ icon: "fire", title: "当前火向", value: "" },
{ icon: "clock", title: "换火时间", value: "20分" },
{ icon: "sand", title: "剩余时间", value: "19分20秒" },
],
};
},
watch: {
fireDirection: function (val) {
this.$set(this.rdata[0], 'value', val)
},
fireChangeTime: function (val) {
this.$set(this.rdata[1], 'value', val)
},
lastFireChangeTime: function (val) {
let [_, min, sec] = /(\d+)分(\d+)秒/.exec(val || '0分0秒')
if (timeFun) clearInterval(timeFun)
timeFun = setInterval(() => {
if (sec > 0) sec -= 1
else {
if (min > 0) {
sec = 59
min -= 1
} else {
if (timeFun) clearInterval(timeFun)
}
}
this.$set(this.rdata[2], 'value', `${min}分${sec}秒`)
}, 1000)
},
},
computed: {
...mapState(["fireDirection", "lastFireChangeTime", "fireChangeTime"]),
},
name: "IsolateArea--1",
components: { DragabbleContainer, SmallBox2 },
data() {
return {
pressure: "10.1".split(""),
runtime: "0012".split(""),
rdata: [
// { icon: "temp", title: "车间温度", value: "27℃" },
{ icon: "fire", title: "当前火向", value: "" },
{ icon: "clock", title: "换火时间", value: "20分" },
{ icon: "sand", title: "剩余时间", value: "19分20秒" },
],
};
},
watch: {
fireDirection: function (val) {
this.$set(this.rdata[0], "value", val);
},
fireChangeTime: function (val) {
this.$set(this.rdata[1], "value", val);
},
lastFireChangeTime: function (val) {
let [_, min, sec] = /(\d+)分(\d+)秒/.exec(val || "0分0秒");
if (timeFun) clearInterval(timeFun);
timeFun = setInterval(() => {
if (sec > 0) sec -= 1;
else {
if (min > 0) {
sec = 59;
min -= 1;
} else {
if (timeFun) clearInterval(timeFun);
}
}
this.$set(this.rdata[2], "value", `${min}分${sec}秒`);
}, 1000);
},
},
computed: {
...mapState(["fireDirection", "lastFireChangeTime", "fireChangeTime"]),
},
};
</script>
@ -74,43 +84,44 @@ export default {
@import "../../assets/styles/functions";
.isolate-area-1 {
display: flex;
color: $main-color;
min-width: 300px;
align-items: center;
display: flex;
color: $main-color;
min-width: 300px;
align-items: flex-end;
> *:not(:last-child) {
margin: {
right: adjust(10px);
}
}
> *:not(:last-child) {
margin: {
right: 128px;
}
}
> .data {
flex-shrink: 0;
font-family: zcoolqingkehuangyouti-Regular, sans-serif;
display: flex;
align-items: flex-end;
}
> .data {
flex-shrink: 0;
font-family: zcoolqingkehuangyouti-Regular, sans-serif;
display: flex;
align-items: flex-end;
}
> .data > span:not(.dot) {
/** 边框 */
background: url('../../assets/digitbox1.png') no-repeat;
background-size: 100% 100%;
display: inline-block;
width: adjust(w(220px));
height: adjust(h(260px));
color: #0068ffaa;
font-size: h(200px);
line-height: h(600px);
text-align: center;
vertical-align: bottom;
}
> .data > span:not(.dot) {
/** 边框 */
background: url("../../assets/digitbox1.png") no-repeat;
background-size: 100% 100%;
display: inline-block;
width: 228px;
height: 299px;
color: #0068ffaa;
font-size: 142px;
line-height: 328px;
text-align: center;
vertical-align: bottom;
user-select: none;
}
> .data > span.digit {
/** 数字字体大小 */
color: #0071ff;
font-size: h(360px);
line-height: h(540px);
}
> .data > span.digit {
/** 数字字体大小 */
color: #0071ff;
font-size: 242px;
line-height: 286px;
}
}
</style>

66
src/components/isolate-area-1/Runtime.vue Normal file
View File

@ -0,0 +1,66 @@
<template>
<div class="data runtime">
<span>运</span>
<span>行</span>
<span
v-for="(val, index) in runtime"
:key="index"
:class="{ digit: true, dot: press == '.' ? true : false }"
>{{ val }}</span
>
<span>天</span>
</div>
</template>
<script>
export default {
name: "RuntimeComp",
props: {},
data() {
return {
runtime: "0012".split(""),
};
},
created() {},
mounted() {},
methods: {},
};
</script>
<style scoped lang="scss">
@import "../../assets/styles/functions";
.runtime {
width: 1920px;
}
.data {
padding: 0 32px;
font-family: zcoolqingkehuangyouti-Regular, sans-serif;
display: flex;
align-items: center;
justify-content: space-between;
}
.data > span:not(.dot) {
/** 边框 */
background: url("../../assets/digitbox1.png") no-repeat;
background-size: 100% 100%;
display: inline-block;
width: 280px;
height: 360px;
color: #0068ffaa;
font-size: 160px;
line-height: 380px;
text-align: center;
vertical-align: bottom;
user-select: none;
}
.data > span.digit {
/** 数字字体大小 */
color: #0071ff;
font-size: 280px;
line-height: 350px;
}
</style>

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

@ -14,7 +14,7 @@
<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 class="arrow ar-top-right" :class="topRightArrowRolling === '运行' ? 'ar-running' : ''"></div>
<div class="arrow ar-bottom-left" :class="bottomLeftArrowRolling === '运行' ? 'ar-running' : ''"></div>
@ -54,9 +54,10 @@
<video id="2" class="video-top" preload="auto" height="130" muted autoplay loop disablepictureinpicture
src="../../assets/videos/fire-to-bottom.mp4"></video>
</div>
</div>
</div> -->
<AreaOne class="area-one" />
<Runtime class="runtime" />
<InWater />
<OutWater />
@ -67,6 +68,7 @@
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'
@ -78,6 +80,7 @@ import WsClient from "../../utils/wsClass";
export default {
name: "Main",
components: {
Runtime,
DataGroup,
MonitorGroup2,
Environ,
@ -125,8 +128,14 @@ main {
.area-one {
position: absolute;
top: adjust(150px);
left: adjust(1310px);
top: 124px;
left: 3910px;
}
.runtime {
position: absolute;
top: 0;
right: 0;
}
.video-crash {