171 lines
4.0 KiB
Vue
171 lines
4.0 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<div class="base-wrapper">
|
|
<div class="device-base">
|
|
<p class="item"><span class="keyword">{{$t('counter.device')}}: </span><el-tag>{{deviceID}}</el-tag></p>
|
|
<p class="item" v-if="lastItem.device_name"><span class="keyword">{{$t('counter.deviceName')}}: </span><el-tag>{{lastItem.device_name}}</el-tag></p>
|
|
<p class="item" v-else><span class="keyword">{{$t('counter.deviceName')}}: </span><el-tag>未命名</el-tag></p>
|
|
</div>
|
|
</div>
|
|
<div class="screen-wrapper">
|
|
<div class="device-screen">
|
|
<table cellspacing="0">
|
|
<tbody>
|
|
<tr>
|
|
<td v-for="(item, index) of lastTime" :key="index">
|
|
{{item}}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td v-for="(item, index) of lastCount" :key="index">
|
|
{{item}}
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="device-status">
|
|
<ul>
|
|
<li>Status:
|
|
<span
|
|
:class="lastItem.status ? 'text-success' : 'text-danger'"
|
|
v-if="lastItem.status == 0"
|
|
>
|
|
Offline
|
|
</span>
|
|
<span
|
|
:class="lastItem.status ? 'text-success' : 'text-danger'"
|
|
v-if="lastItem.status == 1"
|
|
>
|
|
Online
|
|
</span>
|
|
</li>
|
|
<li class="signal">Signal: <span>{{lastItem.signal}}/31</span></li>
|
|
<li>Power: <span>{{powerPrecentages}}%</span></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import moment from 'moment'
|
|
export default {
|
|
name: 'screen',
|
|
props: {
|
|
deviceID: String,
|
|
lastItem: Object
|
|
},
|
|
data() {
|
|
return {
|
|
}
|
|
},
|
|
methods: {
|
|
//
|
|
},
|
|
computed: {
|
|
lastTime() {
|
|
const curTime = moment().format('YYYY-MM-DD HH:mm')
|
|
return curTime.split('')
|
|
// return this.lastItem.calc_time.substr(0, 16).split('')
|
|
},
|
|
lastCount() {
|
|
const count = this.lastItem.count
|
|
const qty = 'Qty.' + ' '.repeat(10 - count.length) + '00' + count
|
|
return qty.split('')
|
|
},
|
|
powerPrecentages() {
|
|
const powerMin = 3000
|
|
const powerMax = 4950
|
|
return parseFloat((this.lastItem.energy - powerMin) / (powerMax - powerMin) * 100).toFixed(1)
|
|
}
|
|
|
|
},
|
|
mounted() {
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.text-success {
|
|
color: #67C23A
|
|
}
|
|
.text-danger {
|
|
color: #F56C6C
|
|
}
|
|
.base-wrapper {
|
|
overflow: auto;
|
|
.device-base {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
min-width: 400px;
|
|
.item {
|
|
width: 300px;
|
|
margin: 0 0 5px 0;
|
|
}
|
|
.keyword {
|
|
display: inline-block;
|
|
width: 100px;
|
|
font-size: 0.9em;
|
|
}
|
|
}
|
|
}
|
|
.screen-wrapper {
|
|
background: #F2F6FC;
|
|
.device-screen {
|
|
display: flex;
|
|
justify-content: center;
|
|
table {
|
|
font-size: 1.2rem;
|
|
font-family: 'Courier New', Courier, monospace;
|
|
border: 1px solid #666;
|
|
border-collapse: collapse;
|
|
text-align: center;
|
|
margin: 2rem 0 2rem 0;
|
|
td {
|
|
border: 1px solid #666;
|
|
width: 1rem;
|
|
height: 1.5rem;
|
|
line-height: 1.5rem;
|
|
font-weight: 600;
|
|
padding: .2rem;
|
|
}
|
|
}
|
|
}
|
|
.device-status {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin: -2rem 0 1rem 0;
|
|
ul {
|
|
padding: 0;
|
|
li {
|
|
font-size: .85rem;
|
|
list-style-type: none;
|
|
display: inline-block;
|
|
}
|
|
.signal {
|
|
margin: 0 2rem 0 2rem
|
|
}
|
|
}
|
|
}
|
|
@media only screen and (max-width: 768px) {
|
|
.device-screen {
|
|
table {
|
|
margin: 1rem 0 1rem 0;
|
|
td {
|
|
font-size: 1rem;
|
|
}
|
|
}
|
|
}
|
|
.device-status {
|
|
margin: -1rem 0 1.5rem 0;
|
|
font-size: 1rem;
|
|
}
|
|
.signal {
|
|
margin: 0 1rem 0 1rem
|
|
}
|
|
}
|
|
}
|
|
</style>
|