加液排液

src/components/LiquidHandle.vue

@@ -12,13 +12,25 @@
         />
         <p class="title">设置加液</p>
       </div>
-      <div class="btn mr" v-if="tabType == 1">暂停加液</div>
-      <div class="btn active" v-if="tabType == 1">开始加液</div>
+      <div
+        :class="isAddLiquidStatus ? 'btn mr active' : 'btn mr '"
+        v-if="tabType == 1"
+        @click="stopAdd"
+      >
+        暂停加液
+      </div>
+      <div
+        :class="isAddLiquidStatus ? 'btn' : 'btn active'"
+        v-if="tabType == 1"
+        @click="startAdd"
+      >
+        开始加液
+      </div>
       <div class="btn active" v-if="tabType == 2" @click="startTabLiquid">
         开始排液
       </div>
     </div>
-    <div class="add_liquid">
+    <!-- <div class="add_liquid">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -37,7 +49,7 @@
         </g>
       </svg>
       <p class="text">{{ tabType == 1 ? '加液完成' : '排液完成' }}</p>
-    </div>
+    </div> -->
     <div class="chart">
       <div
         class="liquid_column"
@@ -55,22 +67,44 @@
 
 <script setup>
 import LiquidModal from './dialogs/LiquidModal.vue'
-import { useDeviceStore } from '@/store'
+import { useDeviceStore, useWebSocketStore } from '@/store'
 import { ref } from 'vue'
 import { storeToRefs } from 'pinia'
+import {
+  startReplenishingFluidsJSON,
+  stopReplenishingFluidsJSON,
+} from '@/mock/command'
+
 const props = defineProps({
   tabType: {
     type: Number,
   },
 })
+
 const addLiquidVal = ref(0)
 const tipModalVisible = ref(false)
+const webSocketStore = useWebSocketStore()
+
+const isAddLiquidStatus = ref(false)
+
+const startAdd = () => {
+  isAddLiquidStatus.value = true
+  webSocketStore.sendCommandMsg(startReplenishingFluidsJSON)
+}
+
+const stopAdd = () => {
+  isAddLiquidStatus.value = false
+  webSocketStore.sendCommandMsg(stopReplenishingFluidsJSON)
+}
 
 const startTabLiquid = () => {
   tipModalVisible.value = true
 }
 
 const formatter = value => {
+  if (value > 500) {
+    return '500/g'
+  }
   if (value != 0) {
     var newVal = value.replace(/\b(0+)/gi, '')
     return newVal + '/g'

src/components/dialogs/LiquidModal.vue

@@ -33,6 +33,11 @@
 </template>
 
 <script setup>
+import { useWebSocketStore } from '@/store'
+import { startDrainingJSON } from '@/mock/command'
+
+const webSocketStore = useWebSocketStore()
+
 const props = defineProps({
   hideTabLiquid: {
     type: Function,
@@ -40,7 +45,8 @@ const props = defineProps({
 })
 
 const tapLiquid = () => {
-  console.log('排液体')
+  webSocketStore.sendCommandMsg(startDrainingJSON)
+  props?.hideTabLiquid()
 }
 
 const cancelTap = () => {

src/mock/command.js

@@ -98,3 +98,18 @@ export const someAirSwitchJSON = (num, flag) => {
     cancmd: `writeio ${num} ${flag}`,
   }
 }
+
+export const startReplenishingFluidsJSON = {
+  command: 'startReplenishingFluids',
+  messageId: 'startReplenishingFluids',
+}
+
+export const stopReplenishingFluidsJSON = {
+  command: 'stopReplenishingFluids',
+  messageId: 'stopReplenishingFluids',
+}
+
+export const startDrainingJSON = {
+  command: 'startDraining',
+  messageId: 'startDraining',
+}

src/pages/Home.vue

@@ -165,14 +165,14 @@
         </g>
       </svg>
     </div>
-    <van-overlay :show="settingStore.initLoading">
+    <!-- <van-overlay :show="settingStore.initLoading">
       <div class="wrapper" @click.stop>
         <div class="block">
           <van-loading />
           <p class="shutdown_text">初始化系统参数...</p>
         </div>
       </div>
-    </van-overlay>
+    </van-overlay> -->
   </div>
 </template>
 

src/pages/Login.vue

@@ -12,10 +12,10 @@
         <img :src="Shutdown" class="icon" alt="" />
         <p class="text">关机</p>
       </div>
-      <div class="group" @click="reboot">
+      <!-- <div class="group" @click="reboot">
         <img :src="Restart" class="icon" alt="" />
         <p class="text">重新启动</p>
-      </div>
+      </div> -->
     </div>
     <van-overlay :show="showShutdown">
       <div class="wrapper" @click.stop>