From 30d5372b309e714752941b45460a6337f8da99c7 Mon Sep 17 00:00:00 2001
From: Jay Huang <vijay.huang@gmail.com>
Date: Sat, 2 Dec 2023 16:26:09 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E7=81=AD=E8=9A=8A=E7=81=AF?=
 =?UTF-8?q?=E8=87=AA=E5=8A=A8=E6=B8=85=E6=89=AB=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/counter/components/screen.vue | 86 +++++++++++++++++++++----
 src/views/counter/detail.vue            |  1 -
 2 files changed, 72 insertions(+), 15 deletions(-)

diff --git a/src/views/counter/components/screen.vue b/src/views/counter/components/screen.vue
index 7608f3c..a22df40 100644
--- a/src/views/counter/components/screen.vue
+++ b/src/views/counter/components/screen.vue
@@ -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
+
+      // 如果窗口宽度大于800像素，设置对话框宽度为30%，否则设置为100%
+      return windowWidth > 600 ? '30%' : '100%'
     }
 
   },
diff --git a/src/views/counter/detail.vue b/src/views/counter/detail.vue
index f99ffce..6e17e4b 100644
--- a/src/views/counter/detail.vue
+++ b/src/views/counter/detail.vue
@@ -53,7 +53,6 @@
       v-show="!showHumiture"
       v-loading="listLoading"
       :data="deviceLogs"
-      border="ture"
       style="width: 100%">
       <el-table-column
         type="index"