小键盘

.env

@@ -1 +1,5 @@
-VITE_BASE_URL=http://127.0.0.1:8080/
+VITE_BASE_WS1_URL=ws://192.168.8.10:19001/
+VITE_BASE_WS2_URL=ws://192.168.8.10:19002/
+
+# VITE_BASE_WS1_URL=ws://127.0.0.1:19001/
+# VITE_BASE_WS2_URL=ws://127.0.0.1:19002/

src/components/LiquidHandle.vue

@@ -17,7 +17,7 @@
         v-if="tabType == 1"
         @click="stopAdd"
       >
-        暂停加液
+        停止加液
       </div>
       <div
         :class="isAddLiquidStatus ? 'btn' : 'btn active'"
@@ -26,7 +26,18 @@
       >
         开始加液
       </div>
-      <div class="btn active" v-if="tabType == 2" @click="startTabLiquid">
+      <div
+        :class="isPopLiquidStatus ? 'btn mr active' : 'btn mr '"
+        v-if="tabType == 2"
+        @click="stopPop"
+      >
+        停止排液
+      </div>
+      <div
+        :class="isPopLiquidStatus ? 'btn' : 'btn active'"
+        v-if="tabType == 2"
+        @click="startTabLiquid"
+      >
         开始排液
       </div>
     </div>
@@ -61,6 +72,8 @@
     <LiquidModal
       v-if="tabType == 2 && tipModalVisible"
       :hideTabLiquid="hideTabLiquid"
+      :startPopFlag="startPopFlag"
+      :isPopLiquidStatus="isPopLiquidStatus"
     />
   </div>
 </template>
@@ -73,6 +86,7 @@ import { storeToRefs } from 'pinia'
 import {
   startReplenishingFluidsJSON,
   stopReplenishingFluidsJSON,
+  stopDrainingJSON,
 } from '@/mock/command'
 
 const props = defineProps({
@@ -86,19 +100,37 @@ const tipModalVisible = ref(false)
 const webSocketStore = useWebSocketStore()
 
 const isAddLiquidStatus = ref(false)
+const isPopLiquidStatus = ref(false)
 
 const startAdd = () => {
-  isAddLiquidStatus.value = true
-  webSocketStore.sendCommandMsg(startReplenishingFluidsJSON)
+  if (!isAddLiquidStatus.value) {
+    isAddLiquidStatus.value = true
+    webSocketStore.sendCommandMsg(startReplenishingFluidsJSON)
+  }
 }
 
 const stopAdd = () => {
-  isAddLiquidStatus.value = false
-  webSocketStore.sendCommandMsg(stopReplenishingFluidsJSON)
+  if (isAddLiquidStatus.value) {
+    isAddLiquidStatus.value = false
+    webSocketStore.sendCommandMsg(stopReplenishingFluidsJSON)
+  }
+}
+
+const stopPop = () => {
+  if (isPopLiquidStatus.value) {
+    webSocketStore.sendCommandMsg(stopDrainingJSON)
+    isPopLiquidStatus.value = false
+  }
+}
+
+const startPopFlag = () => {
+  isPopLiquidStatus.value = true
 }
 
 const startTabLiquid = () => {
-  tipModalVisible.value = true
+  if (!isPopLiquidStatus.value) {
+    tipModalVisible.value = true
+  }
 }
 
 const formatter = value => {

src/components/Operator.vue

@@ -37,6 +37,8 @@
           :disabled="operatorStore.disinfectStatus"
           v-model="roomSize"
           class="room_size"
+          id="room_size"
+          @focus="handleShowKeyBoard"
         />
         <div class="log" @click="showLogPicker">{{ logVal }}</div>
       </div>
@@ -47,8 +49,8 @@
         开始消毒
       </div>
       <div class="progress">
-        <p class="title">消毒进度</p>
-        <div class="tube">
+        <p class="title">剩余时间</p>
+        <!-- <div class="tube">
           <div
             class="pro"
             :style="{
@@ -56,7 +58,14 @@
             }"
           ></div>
         </div>
-        <div class="num">000/100</div>
+        <div class="num">000/100</div> -->
+        <div class="time">
+          {{
+            operatorStore.disinfectStatus
+              ? `${operatorStore.estimatedRemainingTimeS} S`
+              : '未开始'
+          }}
+        </div>
       </div>
     </div>
     <!-- <WarnModal /> -->
@@ -73,9 +82,9 @@ import LogPicker from 'cpns/dialogs/LogPicker'
 import WarnModal from 'cpns/dialogs/WarnModal'
 import DisinfectantLiquidInfo from 'cpns/info/DisinfectantLiquidInfo'
 import EnvironmentInfo from 'cpns/info/EnvironmentInfo'
-import { ref } from 'vue'
+import { ref, watch, onMounted, onUnmounted } from 'vue'
 import { useOperatorStore, useWebSocketStore } from '@/store'
-import { startDisinfectionJSON } from '@/mock/command'
+import { startDisinfectionJSON, getStateJSON } from '@/mock/command'
 import { showSuccessToast, showFailToast } from 'vant'
 
 const operatorStore = useOperatorStore()
@@ -85,6 +94,15 @@ const props = defineProps({
   changeShowOperator: {
     type: Function,
   },
+  handleShowKeyBoard: {
+    type: Function,
+  },
+  hideKeyBoard: {
+    type: Function,
+  },
+  input: {
+    type: String,
+  },
 })
 
 const toDetail = () => {
@@ -98,6 +116,11 @@ const logVisible = ref(false)
 const logVal = ref(1)
 const roomSize = ref(0)
 
+watch(() => {
+  console.log(props.input)
+  roomSize.value = props.input.match(/\d+/g)
+})
+
 const changeLogVal = val => {
   logVal.value = val
   logVisible.value = false
@@ -123,6 +146,16 @@ const showLogPicker = () => {
     logVisible.value = true
   }
 }
+
+const timer = ref(null)
+onMounted(() => {
+  timer.value = setInterval(() => {
+    webSocketStore.sendCommandMsg(getStateJSON)
+  }, 1000)
+})
+onUnmounted(() => {
+  timer.value = null
+})
 </script>
 
 <style lang="scss" scoped>
@@ -285,6 +318,10 @@ const showLogPicker = () => {
         color: #9e9e9e;
         margin-bottom: 13px;
       }
+      .time {
+        text-align: center;
+        padding: 10px;
+      }
       .tube {
         width: 292px;
         height: 14px;

src/components/Progress.vue

@@ -50,7 +50,11 @@
 
 <script setup>
 import { useOperatorStore, useWebSocketStore } from '@/store'
-import { stopDisinfectionJSON, getStateJSON } from '@/mock/command'
+import {
+  stopDisinfectionJSON,
+  getStateJSON,
+  getAllRecordsJSON,
+} from '@/mock/command'
 import { onMounted, onUnmounted, ref } from 'vue'
 
 const operatorStore = useOperatorStore()

src/components/SimpleKeyboard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="keyboardClass"></div>
+  <div :class="keyboardClass" id="keyboard"></div>
 </template>
 
 <script>
@@ -16,6 +16,10 @@ export default {
     input: {
       type: String,
     },
+    hideKeyBoard: {
+      type: Function,
+      default: () => {},
+    },
   },
   data: () => ({
     keyboard: null,

src/components/dialogs/LiquidModal.vue

@@ -42,11 +42,20 @@ const props = defineProps({
   hideTabLiquid: {
     type: Function,
   },
+  startPopFlag: {
+    type: Function,
+  },
+  isPopLiquidStatus: {
+    type: Boolean,
+  },
 })
 
 const tapLiquid = () => {
-  webSocketStore.sendCommandMsg(startDrainingJSON)
-  props?.hideTabLiquid()
+  if (!props.isPopLiquidStatus) {
+    props.startPopFlag()
+    webSocketStore.sendCommandMsg(startDrainingJSON)
+    props?.hideTabLiquid()
+  }
 }
 
 const cancelTap = () => {

src/mock/command.js

@@ -63,7 +63,7 @@ export const getAllSettingJSON = {
   messageId: 'getAllSetting',
 }
 
-export const getAllRecords = disinfection_id => {
+export const getAllRecordsJSON = disinfection_id => {
   return {
     command: 'getAllRecords',
     messageId: 'getAllRecords',
@@ -113,3 +113,8 @@ export const startDrainingJSON = {
   command: 'startDraining',
   messageId: 'startDraining',
 }
+
+export const stopDrainingJSON = {
+  command: 'stopDraining',
+  messageId: 'stopDraining',
+}

src/pages/Home.vue

@@ -123,6 +123,9 @@
     <Operator
       v-if="activeTab == 1 && showOpertor"
       :changeShowOperator="changeShowOperator"
+      :handleShowKeyBoard="handleShowKeyBoard"
+      :hideKeyBoard="hideKeyBoard"
+      :input="input"
     />
     <Progress
       v-if="activeTab == 1 && !showOpertor"
@@ -173,11 +176,19 @@
         </div>
       </div>
     </van-overlay> -->
+    <div class="key_wrap" v-if="showkeyboard">
+      <SimpleKeyboard
+        :hideKeyBoard="hideKeyBoard"
+        @onChange="onChange"
+        :input="input"
+      />
+    </div>
   </div>
 </template>
 
 <script setup>
 import { ref, onMounted, onBeforeUnmount } from 'vue'
+import SimpleKeyboard from 'cpns/SimpleKeyboard'
 import moment from 'moment'
 import Operator from 'cpns/Operator'
 import Progress from 'cpns/Progress'
@@ -203,6 +214,16 @@ const { socketCommandInstance } = storeToRefs(webSocketStore)
 webSocketStore.initCommandSocket()
 webSocketStore.initEventSocket()
 
+const showkeyboard = ref(false)
+
+const handleShowKeyBoard = () => {
+  showkeyboard.value = true
+}
+
+const hideKeyBoard = () => {
+  showkeyboard.value = false
+}
+
 const showOpertor = ref(true)
 
 const operatorStore = useOperatorStore()
@@ -214,6 +235,11 @@ const changeShowOperator = flag => {
   showOpertor.value = flag
 }
 
+const input = ref('')
+const onChange = a => {
+  input.value = a
+}
+
 const changeTab = index => {
   activeTab.value = index
   if (index == 5) {
@@ -234,6 +260,13 @@ onMounted(() => {
   setTimeout(() => {
     webSocketStore.sendCommandMsg(getStateJSON)
   }, 1000)
+  document.addEventListener('click', e => {
+    let box = document.getElementById('keyboard')
+    let room = document.getElementById('room_size')
+    if (!box?.contains(e.target) && e.target != room) {
+      hideKeyBoard()
+    }
+  })
 })
 
 onBeforeUnmount(() => {
@@ -253,6 +286,13 @@ const handleLogout = () => {
   height: 800px;
   box-sizing: border-box;
   padding: 30px;
+  .key_wrap {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 230px;
+  }
   .header_menu {
     width: 100%;
     height: 80px;

src/store/modules/websocket.js

@@ -20,7 +20,7 @@ export const useWebSocketStore = defineStore({
   // actions
   actions: {
     initCommandSocket() {
-      const url = 'ws://192.168.8.115:19001/'
+      const url = import.meta.env.VITE_BASE_WS1_URL
       const init = new Socket(url)
       const settingStore = useSettingStore()
       const userStore = useUserStore()
@@ -105,6 +105,8 @@ export const useWebSocketStore = defineStore({
               break
             case 'login':
               break
+            case 'getAllRecords':
+              break
             case 'getAllSetting':
               const { dbval: allSetting } = JSON.parse(ev.data)
               settingStore.updateAllSettingList(allSetting)
@@ -120,7 +122,7 @@ export const useWebSocketStore = defineStore({
       this.socketCommandInstance?.msg(message)
     },
     initEventSocket() {
-      const url = 'ws://192.168.8.115:19002/'
+      const url = import.meta.env.VITE_BASE_WS2_URL
       const init = new Socket(url)
       init.connect()
       const deviceStore = useDeviceStore()