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

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

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

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

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

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

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

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

@ -1,51 +1,52 @@
<template> <template>
<div class="separator" :style="{width: zoom+'px', height: zoom*20+'px'}"> <div class="separator" :style="{width: w+'px', height: h+'px'}">
<div class="point-box"> <point class="point" :color="color" :zoom="zoom" :fine="fine" :style="{top: zoom*3+'px'}" />
<point :color="color" :zoom="zoom" :fine="fine" :top="-2*zoom"></point> <point class="point" :color="color" :zoom="zoom" :fine="fine" :style="{top: zoom*5+p*2+'px' }" />
<point :color="color" :zoom="zoom" :fine="fine" :top="-12*zoom"></point> </div>
</div>
</div>
</template> </template>
<script> <script>
import Point from './point'; import Point from './point';
export default { export default {
name: 'separator', name: 'separator',
props: { props: {
zoom: { zoom: {
type: Number, type: Number,
required: true, required: true,
}, },
fine: { fine: {
type: Number, type: Number,
required: true, required: true,
}, },
color: { color: {
type: String, type: String,
required: true, required: true,
} }
}, },
components: { components: {
Point 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> </script>
<style rel="stylesheet/scss" lang="scss" scoped> <style rel="stylesheet/scss" lang="scss" scoped>
.separator { .separator {
position: relative; display: inline-block;
display: inline-block; text-align: center;
left: -2px; .point {
position: relative;
.point-box { }
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
justify-content: center;
}
} }
</style> </style>

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

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