287 lines
7.7 KiB
Vue
287 lines
7.7 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>{{$t('counter.noName')}}</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>{{lastItem.energy.replace('%','')}}%</span></li>
|
||
</ul>
|
||
</div>
|
||
<div class="device-status"
|
||
v-if="lastItem.chip_type === 'AIR-V2'"
|
||
>
|
||
<ul>
|
||
<li>
|
||
<p>LED开关
|
||
<el-switch
|
||
v-model="led"
|
||
active-color="#13ce66"
|
||
inactive-color="#ff4949"
|
||
@change="handleLedSwitchChange"
|
||
>
|
||
</el-switch>
|
||
</p>
|
||
</li>
|
||
<li>
|
||
<el-button type="primary" icon="el-icon-refresh" size="mini" @click="handleCountClear">计数清零</el-button>
|
||
</li>
|
||
<!-- <li>
|
||
<el-button type="primary" icon="el-icon-delete" size="mini" @click="handleMosqClean">自动清扫</el-button>
|
||
</li> -->
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- 计数器清零确认弹窗 -->
|
||
<el-dialog
|
||
title="确认"
|
||
:visible.sync="dialogCountVisible"
|
||
:width="dialogWidth"
|
||
center
|
||
>
|
||
<span>确定要清零计数器吗？</span>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="dialogCountVisible = false">取消</el-button>
|
||
<el-button type="primary" @click="handleCountClear">确定</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
|
||
<!-- 清理速度选择、确认弹窗 -->
|
||
<el-dialog
|
||
title="请选择清理速度，并确定！"
|
||
:visible.sync="dialogMosqVisible"
|
||
:width="dialogWidth"
|
||
center
|
||
>
|
||
|
||
<div class="block">
|
||
<el-row>
|
||
<el-col :span="12"><div class="grid-content bg-purple">
|
||
<span style="display: flex; justify-content: flex-start;">慢🐢</span>
|
||
</div></el-col>
|
||
<el-col :span="12"><div class="grid-content bg-purple">
|
||
<span style="display: flex; justify-content: flex-end;">🐰快</span>
|
||
</div></el-col>
|
||
</el-row>
|
||
<el-slider
|
||
v-model="cleanSpeed"
|
||
:step="1"
|
||
:min="1"
|
||
:max="9"
|
||
show-stops>
|
||
</el-slider>
|
||
</div>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="dialogMosqVisible = false">取消</el-button>
|
||
<el-button type="primary" @click="handleMosqClean">确定</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import moment from 'moment'
|
||
import { fetchRemoteControl } from '@/api/counter'
|
||
|
||
export default {
|
||
name: 'screen',
|
||
props: {
|
||
deviceID: String,
|
||
lastItem: Object
|
||
},
|
||
data() {
|
||
return {
|
||
led: true,
|
||
dialogCountVisible: false,
|
||
dialogMosqVisible: false,
|
||
cleanSpeed: 6
|
||
}
|
||
},
|
||
methods: {
|
||
async handleLedSwitchChange() {
|
||
const action = this.led ? 'ledOn' : 'ledOff'
|
||
await this.sendRemoteControlCommand(action)
|
||
},
|
||
async handleCountClear() {
|
||
if (!this.dialogCountVisible) {
|
||
this.showCountConfirmationDialog()
|
||
} else {
|
||
await this.sendRemoteControlCommand('countClear')
|
||
}
|
||
},
|
||
async handleMosqClean() {
|
||
if (!this.dialogMosqVisible) {
|
||
this.showMosqConfirmationDialog()
|
||
} else {
|
||
await this.sendRemoteControlCommand('mosqClean', { speed: this.cleanSpeed })
|
||
}
|
||
},
|
||
async sendRemoteControlCommand(command, options = {}) {
|
||
try {
|
||
const { speed } = options
|
||
const deviceID = this.deviceID
|
||
console.log(deviceID, command, speed)
|
||
|
||
const requestData = { command, speed }
|
||
|
||
const response = await fetchRemoteControl(deviceID, requestData)
|
||
console.log('Command sent successfully:', response.data)
|
||
} catch (error) {
|
||
console.error('Error sending command:', error)
|
||
} finally {
|
||
this.dialogCountVisible = false
|
||
this.dialogMosqVisible = false
|
||
}
|
||
},
|
||
showCountConfirmationDialog() {
|
||
this.dialogCountVisible = true
|
||
},
|
||
showMosqConfirmationDialog() {
|
||
this.dialogMosqVisible = true
|
||
}
|
||
},
|
||
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('')
|
||
},
|
||
dialogWidth() {
|
||
// 获取当前浏览器窗口宽度
|
||
const windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
|
||
|
||
// 如果窗口宽度大于800像素，设置对话框宽度为30%，否则设置为100%
|
||
return windowWidth > 600 ? '30%' : '100%'
|
||
}
|
||
|
||
},
|
||
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: 350px;
|
||
.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>
|