小键盘

2 years ago · dbda496e50
9 changed files with 157 additions and 20 deletions
--- a/.env
+++ b/.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/
--- a/src/components/LiquidHandle.vue
+++ b/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 => {
--- a/src/components/Operator.vue
+++ b/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;
--- a/src/components/Progress.vue
+++ b/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()
--- a/src/components/SimpleKeyboard.vue
+++ b/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,
--- a/src/components/dialogs/LiquidModal.vue
+++ b/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 = () => {
--- a/src/mock/command.js
+++ b/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',
+}
--- a/src/pages/Home.vue
+++ b/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;
--- a/src/store/modules/websocket.js
+++ b/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()