新增灭蚊灯自动清扫功能

This commit is contained in:
Jay Huang 2023-12-02 16:26:09 +08:00
parent d423df4ad6
commit 30d5372b30
2 changed files with 72 additions and 15 deletions

View File

@ -60,24 +60,58 @@
</p>
</li>
<li>
<el-button type="primary" icon="el-icon-delete" size="mini" @click="handleCountClear">计数清零</el-button>
<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="dialogVisible"
width="30%"
:visible.sync="dialogCountVisible"
:width="dialogWidth"
center
>
<span>确定要清零计数器吗</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<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>
@ -95,7 +129,9 @@ export default {
data() {
return {
led: true,
dialogVisible: false
dialogCountVisible: false,
dialogMosqVisible: false,
cleanSpeed: 6
}
},
methods: {
@ -104,26 +140,41 @@ export default {
await this.sendRemoteControlCommand(action)
},
async handleCountClear() {
if (!this.dialogVisible) {
this.showConfirmationDialog()
if (!this.dialogCountVisible) {
this.showCountConfirmationDialog()
} else {
await this.sendRemoteControlCommand('countClear')
}
},
async sendRemoteControlCommand(command) {
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)
const response = await fetchRemoteControl(deviceID, { command: command })
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.dialogVisible = false
this.dialogCountVisible = false
this.dialogMosqVisible = false
}
},
showConfirmationDialog() {
this.dialogVisible = true
showCountConfirmationDialog() {
this.dialogCountVisible = true
},
showMosqConfirmationDialog() {
this.dialogMosqVisible = true
}
},
computed: {
@ -136,6 +187,13 @@ export default {
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
// 80030%100%
return windowWidth > 600 ? '30%' : '100%'
}
},

View File

@ -53,7 +53,6 @@
v-show="!showHumiture"
v-loading="listLoading"
:data="deviceLogs"
border="ture"
style="width: 100%">
<el-table-column
type="index"