joylink/rt-sim-training-client
6
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

修改电子显示屏

Browse Source
This commit is contained in:
ival 2019-10-18 17:53:57 +08:00
parent 5e83d06250
commit 9a14de60ef
5 changed files with 85 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/views/components/systemTime/digit.vue
View File

@ -1,32 +1,32 @@
<template>
<div class="digit" :style="{width: 11*zoom+'px', height: 20*zoom+'px', top: top+'px'}">
<div class="digit" :style="{width: w+'px', height: h+'px'}">
<div
class="segment on"
:style="{ background: color, 'border-radius': zoom+'px', opacity: opacity(isShowOne), top: zoom+'px', left: zoom*2+'px', right: zoom*2+'px', height: zblod+'px'}"
:style="{ background: color, 'border-radius': z1+'px', opacity: opacity(isShowOne), top: p+'px', left: p+b1+'px', right: b1+'px', width: z1+b1+'px', height: b1+'px'}"
/>
<div
class="segment on"
:style="{ background: color, 'border-radius': zoom+'px', opacity: opacity(isShowTwo), top: zoom*2+'px', right: zoom+'px', width: zblod+'px', height: zoom*7.5+'px'}"
:style="{ background: color, 'border-radius': z1+'px', opacity: opacity(isShowTwo), top: p+b1+'px', left: p+z1+b2+'px', width: b1+'px', height:z1+'px'}"
/>
<div
class="segment on"
:style="{ background: color, 'border-radius': zoom+'px', opacity: opacity(isShowThee), bottom: zoom*2+'px', right: zoom+'px', width: zblod+'px', height: zoom*7.5+'px'}"
:style="{ background: color, 'border-radius': z1+'px', opacity: opacity(isShowThee), top: p+z1+b2+'px', left: p+z1+b2+'px', width: b1+'px', height: z1+'px'}"
/>
<div
class="segment on "
:style="{ background: color, 'border-radius': zoom+'px', opacity: opacity(isShowFour), bottom: zoom+'px', right: zoom*2+'px', height: zblod+'px', left: zoom*2+'px' }"
class="segment on"
:style="{ background: color, 'border-radius': z1+'px', opacity: opacity(isShowFour), top: p+z2+b2+'px', left: p+b1+'px', right: b1+'px', width: z1+b1+'px', height: b1+'px'}"
/>
<div
class="segment on "
:style="{ background: color, 'border-radius': zoom+'px', opacity: opacity(isShowFive), bottom: zoom*2+'px', left: zoom+'px', width: zblod+'px', height: zoom*7.5+'px'}"
class="segment on"
:style="{ background: color, 'border-radius': z1+'px', opacity: opacity(isShowFive), top: p+z1+b2+'px', left: p+'px', width: b1+'px', height: z1+'px'}"
/>
<div
class="segment on "
:style="{ background: color, 'border-radius': zoom+'px', opacity: opacity(isShowSix), top: zoom*2+'px', left: zoom+'px',width: zblod+'px', height: zoom*7.5+'px'}"
class="segment on"
:style="{ background: color, 'border-radius': z1+'px', opacity: opacity(isShowSix), top: p+b1+'px', left: p+'px', width: b1+'px', height:z1+'px'}"
/>
<div
class="segment "
:style="{ background: color, 'border-radius': zoom+'px', opacity: opacity(isShowSeven), left: zoom*2+'px', right: zoom*2+'px', height: zblod+'px', bottom: zoom*9.5+'px'}"
class="segment on"
:style="{ background: color, 'border-radius': z1+'px', opacity: opacity(isShowSeven), top: p+z1+b1+'px', left: p+b1+'px', right: b1+'px', width: z1+b1+'px', height: b1+'px'}"
/>
</div>
</template>
@ -35,10 +35,6 @@
export default {
name: 'Digit',
props: {
top: {
type: Number,
required: true
},
zoom: {
type: Number,
required: true
@ -57,9 +53,6 @@ export default {
}
},
computed: {
zblod() {
return parseInt(this.fine * this.zoom);
},
isShowOne() {
return [2, 3, 5, 6, 7, 8, 9, 0].indexOf(this.number) != -1;
},
@ -80,6 +73,27 @@ export default {
},
isShowSeven() {
return [2, 3, 4, 5, 6, 8, 9].indexOf(this.number) != -1;
},
b1() {
return this.fine * 2;
},
b2() {
return this.fine * 4;
},
z1() {
return this.zoom * 4;
},
z2() {
return this.zoom * 8;
},
p() {
return this.fine * 2;
},
w() {
return this.zoom * 4 + this.fine * 4 + this.p*2;
},
h() {
return this.zoom * 8 + this.fine * 4 + this.p*2;
}
},
methods: {
@ -92,9 +106,8 @@ export default {
<style rel="stylesheet/scss" lang="scss" scoped>
.digit {
display: inline-block;
position: relative;
display: inline-flex;
justify-content: center;
.segment {
position: absolute;
@ -114,6 +127,5 @@ export default {
-o-transition: opacity 0s;
}
}
}
</style>

28
src/views/components/systemTime/index.vue
View File

@ -1,8 +1,5 @@
<template>
<div
class="system-time-box"
:style="{background: background, width: width+'px', height: height+'px', 'line-height': height+'px'}"
>
<div class="system-time-box">
<template v-for="(item,index) in time">
<digit
v-if="Number.isInteger(parseInt(item))"
@ -10,8 +7,7 @@
:number="parseInt(item)"
:color="color"
:fine="fine"
:zoom="time.length - index > 2? zoom: zoom* 0.6"
:top="top"
:zoom="time.length - index > 2? zoom: zoom* 0.5"
/>
<separator v-if="!Number.isInteger(parseInt(item))" :key="index" :color="color" :zoom="zoom" :fine="fine" />
</template>
@ -53,28 +49,10 @@ export default {
return 4;
}
},
width: {
type: Number,
default() {
return 280;
}
},
height: {
type: Number,
default() {
return 80;
}
},
fine: {
type: Number,
default() {
return 1;
}
},
top: {
type: Number,
default() {
return 1;
return 2;
}
}
}

18
src/views/components/systemTime/point.vue
View File

@ -1,7 +1,7 @@
<template>
<div
class="point"
:style="{background: color, width: zblod+'px', height: zblod+'px', top: top+'px', 'border-radius': 0.5*zblod+'px'}"
:style="{background: color, width: fine*2+'px', height: fine*2+'px','border-radius': fine+'px'}"
/>
</template>
@ -9,10 +9,6 @@
export default {
name: 'Point',
props: {
top: {
type: Number,
required: true
},
zoom: {
type: Number,
required: true
@ -25,20 +21,10 @@ export default {
type: String,
required: true
}
},
computed: {
zblod() {
return parseInt(this.fine * this.zoom);
}
},
methods: {
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.point {
position: relative;
display: inline-block;
}
</style>

33
src/views/components/systemTime/separator.vue
View File

@ -1,16 +1,14 @@
<template>
<div class="separator" :style="{width: zoom+'px', height: zoom*20+'px'}">
<div class="point-box">
<point :color="color" :zoom="zoom" :fine="fine" :top="-2*zoom"></point>
<point :color="color" :zoom="zoom" :fine="fine" :top="-12*zoom"></point>
</div>
<div class="separator" :style="{width: w+'px', height: h+'px'}">
<point class="point" :color="color" :zoom="zoom" :fine="fine" :style="{top: zoom*3+'px'}" />
<point class="point" :color="color" :zoom="zoom" :fine="fine" :style="{top: zoom*5+p*2+'px' }" />
</div>
</template>
<script>
import Point from './point';
import Point from './point';
export default {
export default {
name: 'separator',
props: {
zoom: {
@ -29,23 +27,26 @@
components: {
Point
},
methods: {
computed: {
p() {
return this.fine * 1;
},
w() {
return this.fine * 3;
},
h() {
return this.zoom * 8 + this.fine * 6 + this.p*2;
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.separator {
position: relative;
display: inline-block;
left: -2px;
.point-box {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
justify-content: center;
.point {
position: relative;
}
}
</style>

8
src/views/display/menuSystemTime.vue
View File

@ -7,11 +7,8 @@
<system-time
class="display-time"
:time="time"
:zoom="1.3"
:width="110"
:height="32"
:fine="2"
:top="2"
:zoom="4"
:fine="1.5"
/>
</template>
@ -77,6 +74,7 @@ export default {
}
.display-time{
padding: 5px;
box-shadow: 0px 0px 5px #eee;
border-radius: 3px;
}