按钮三态

src/components/Test.vue

@@ -27,8 +27,26 @@
         <p>P</p>
       </div>
       <div class="btn_wrap">
-        <div class="open style-btn" @click="setAddLiquidConfig(1)">正转</div>
-        <div class="open style-btn" @click="setAddLiquidConfig(5)">反转</div>
+        <div
+          :class="
+            settingStore.addLiquidConfigVal > 0
+              ? 'open success style-btn'
+              : 'open style-btn'
+          "
+          @click="setAddLiquidConfig(1)"
+        >
+          正转
+        </div>
+        <div
+          :class="
+            settingStore.addLiquidConfigVal < 0
+              ? 'open success style-btn'
+              : 'open style-btn'
+          "
+          @click="setAddLiquidConfig(5)"
+        >
+          反转
+        </div>
         <div
           class="open style-btn"
           @click="setAddLiquidConfig(3)"
@@ -39,7 +57,7 @@
       </div>
     </div>
     <div class="common_set switch_wrap">
-      <p class="title">喷液蠕动泵</p>
+      <p class="title">注射蠕动泵</p>
       <div class="num">
         <van-field
           type="number"
@@ -65,8 +83,26 @@
         <p>P</p>
       </div>
       <div class="btn_wrap">
-        <div class="open style-btn" @click="setAddLiquidConfig(2)">正转</div>
-        <div class="open style-btn" @click="setAddLiquidConfig(6)">反转</div>
+        <div
+          :class="
+            settingStore.sprayLiquidConfigVal > 0
+              ? 'open success style-btn'
+              : 'open style-btn'
+          "
+          @click="setAddLiquidConfig(2)"
+        >
+          正转
+        </div>
+        <div
+          :class="
+            settingStore.sprayLiquidConfigVal < 0
+              ? 'open success style-btn'
+              : 'open style-btn'
+          "
+          @click="setAddLiquidConfig(6)"
+        >
+          反转
+        </div>
         <div
           class="open style-btn"
           @click="setAddLiquidConfig(4)"
@@ -226,7 +262,7 @@ import {
   getStateJSON,
   addLiquidCtrlJSON,
 } from '@/mock/command'
-
+import { showSuccessToast, showFailToast } from 'vant'
 const testStore = useTestStore()
 const deviceStore = useDeviceStore()
 const websocketStore = useWebSocketStore()
@@ -311,24 +347,30 @@ const setAddLiquidConfig = flag => {
     websocketStore.sendCommandMsg(
       addLiquidCtrlJSON(1, addLiquidVal.value, addLiquidPower.value),
     )
+    showSuccessToast('设置成功')
   } else if (flag == 2) {
     websocketStore.sendCommandMsg(
       addLiquidCtrlJSON(2, addLiquidVal2.value, addLiquidPower2.value),
     )
+    showSuccessToast('设置成功')
   } else if (flag == 3) {
     websocketStore.sendCommandMsg(addLiquidCtrlJSON(1, 0, addLiquidPower.value))
+    showSuccessToast('关闭加液蠕动泵成功')
   } else if (flag == 5) {
     websocketStore.sendCommandMsg(
       addLiquidCtrlJSON(1, '-' + addLiquidVal.value, addLiquidPower.value),
     )
+    showSuccessToast('设置成功')
   } else if (flag == 6) {
     websocketStore.sendCommandMsg(
       addLiquidCtrlJSON(2, '-' + addLiquidVal2.value, addLiquidPower2.value),
     )
+    showSuccessToast('设置成功')
   } else {
     websocketStore.sendCommandMsg(
       addLiquidCtrlJSON(2, 0, addLiquidPower2.value),
     )
+    showSuccessToast('关闭注射蠕动泵成功')
   }
 }
 
@@ -492,6 +534,9 @@ const changeDraughtStatus = flag => {
         letter-spacing: 0.1em;
         color: #ffffff;
       }
+      .success {
+        background: #1ad66e;
+      }
       .close {
         width: 87px;
         height: 45px;