简单键盘

package-lock.json

@@ -12,6 +12,7 @@
         "echarts": "^5.4.3",
         "moment": "^2.29.4",
         "pinia": "^2.0.32",
+        "simple-keyboard": "^3.6.40",
         "vant": "^4.6.3",
         "vue": "^3.2.45",
         "vue-router": "^4.0.13"
@@ -707,6 +708,11 @@
         "node": ">=12.0.0"
       }
     },
+    "node_modules/simple-keyboard": {
+      "version": "3.6.40",
+      "resolved": "https://registry.npmmirror.com/simple-keyboard/-/simple-keyboard-3.6.40.tgz",
+      "integrity": "sha512-4QmY9lpGhEIPeSUbUVnyLaYZBm9akR8z40c3ReSIij0h/oGaUxmVfcQIfG/Yvydym9m+PIWXdcquRv9fR+g/1w=="
+    },
     "node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -1352,6 +1358,11 @@
         "source-map-js": ">=0.6.2 <2.0.0"
       }
     },
+    "simple-keyboard": {
+      "version": "3.6.40",
+      "resolved": "https://registry.npmmirror.com/simple-keyboard/-/simple-keyboard-3.6.40.tgz",
+      "integrity": "sha512-4QmY9lpGhEIPeSUbUVnyLaYZBm9akR8z40c3ReSIij0h/oGaUxmVfcQIfG/Yvydym9m+PIWXdcquRv9fR+g/1w=="
+    },
     "source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",

package.json

@@ -13,6 +13,7 @@
     "echarts": "^5.4.3",
     "moment": "^2.29.4",
     "pinia": "^2.0.32",
+    "simple-keyboard": "^3.6.40",
     "vant": "^4.6.3",
     "vue": "^3.2.45",
     "vue-router": "^4.0.13"

src/components/LoginForm.vue

@@ -6,12 +6,14 @@
       type="text"
       v-model="username"
       class="username"
+      @focus="handleFocus(1)"
       placeholder="请输入用户名"
     />
     <input
       :type="showPassword ? 'text' : 'password'"
       class="password"
       v-model="password"
+      @focus="handleFocus(2)"
       placeholder="请输入设备密码"
     />
     <div class="login_btn" @click="handleLogin"></div>
@@ -22,10 +24,32 @@
 import Eye from '@/assets/img/login/eye.png'
 import Open from '@/assets/img/login/open.png'
 import { useWebSocketStore, useUserStore } from '@/store'
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { loginJSON } from '@/mock/command'
 
+const props = defineProps({
+  handleShowKey: {
+    type: Function,
+  },
+  handleHideKey: {
+    type: Function,
+  },
+  clearInput: {
+    type: Function,
+  },
+  input: {
+    type: String,
+  },
+})
+
+const activeInput = ref(1)
+const handleFocus = flag => {
+  props.handleShowKey()
+  props.clearInput()
+  activeInput.value = flag
+}
+
 const router = useRouter()
 const userStore = useUserStore()
 const webSocketStore = useWebSocketStore()
@@ -37,8 +61,17 @@ const tip = ref('')
 const handleEye = () => {
   showPassword.value = !showPassword.value
 }
+watch(() => {
+  // 需要有个逻辑判断
+  if (activeInput.value == 1) {
+    username.value = props.input
+  } else {
+    password.value = props.input
+  }
+})
 
 const handleLogin = () => {
+  props.handleHideKey()
   if (username.value == '') {
     tip.value = '用户名不能为空'
     return

src/components/Progress.vue

@@ -3,7 +3,7 @@
     <div class="header_wrap">
       <div class="left_progress">
         <div class="left_time_tag">剩余时间</div>
-        <p class="time">1000:00:00</p>
+        <p class="time">{{ operatorStore.estimatedRemainingTimeS }}</p>
         <div class="progress_bg">
           <div
             class="pro"
@@ -50,7 +50,8 @@
 
 <script setup>
 import { useOperatorStore, useWebSocketStore } from '@/store'
-import { stopDisinfectionJSON } from '@/mock/command'
+import { stopDisinfectionJSON, getStateJSON } from '@/mock/command'
+import { onMounted } from 'vue'
 
 const operatorStore = useOperatorStore()
 const webSocketStore = useWebSocketStore()
@@ -63,6 +64,10 @@ const showDetail = () => {
   props.changeShowOperator(true)
 }
 
+onMounted(() => {
+  webSocketStore.sendCommandMsg(getStateJSON)
+})
+
 const pauseDisinfect = () => {
   if (operatorStore.disinfectStatus) {
     webSocketStore.sendCommandMsg(stopDisinfectionJSON)

src/components/SimpleKeyboard.vue

@@ -0,0 +1,59 @@
+<template>
+  <div :class="keyboardClass"></div>
+</template>
+
+<script>
+import Keyboard from 'simple-keyboard'
+import 'simple-keyboard/build/css/index.css'
+
+export default {
+  name: 'SimpleKeyboard',
+  props: {
+    keyboardClass: {
+      default: 'simple-keyboard',
+      type: String,
+    },
+    input: {
+      type: String,
+    },
+  },
+  data: () => ({
+    keyboard: null,
+  }),
+  mounted() {
+    this.keyboard = new Keyboard(this.keyboardClass, {
+      onChange: this.onChange,
+      onKeyPress: this.onKeyPress,
+    })
+  },
+  methods: {
+    onChange(input) {
+      this.$emit('onChange', input)
+    },
+    onKeyPress(button) {
+      this.$emit('onKeyPress', button)
+
+      /**
+       * If you want to handle the shift and caps lock buttons
+       */
+      if (button === '{shift}' || button === '{lock}') this.handleShift()
+    },
+    handleShift() {
+      let currentLayout = this.keyboard.options.layoutName
+      let shiftToggle = currentLayout === 'default' ? 'shift' : 'default'
+
+      this.keyboard.setOptions({
+        layoutName: shiftToggle,
+      })
+    },
+  },
+  watch: {
+    input(input) {
+      this.keyboard.setInput(input)
+    },
+  },
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped></style>

src/components/Test.vue

@@ -2,7 +2,7 @@
   <div class="test_container">
     <div class="common_set switch_wrap">
       <p class="title">加液蠕动泵</p>
-      <p class="num">000/000</p>
+      <p class="num">000 RPM</p>
       <div class="btn_wrap">
         <div
           :class="testStore.feedingPeristalticPumpStatus ? 'close' : 'open'"
@@ -20,7 +20,7 @@
     </div>
     <div class="common_set switch_wrap">
       <p class="title">喷液蠕动泵</p>
-      <p class="num">000/000</p>
+      <p class="num">000 RPM</p>
       <div class="btn_wrap">
         <div
           :class="testStore.sprayPeristalticPump ? 'close' : 'open'"
@@ -38,7 +38,7 @@
     </div>
     <div class="common_set switch_wrap">
       <p class="title">空压机</p>
-      <p class="num">000/000</p>
+      <p class="num">000 A</p>
       <div class="btn_wrap">
         <div
           :class="testStore.airCompressor ? 'close' : 'open'"
@@ -56,7 +56,7 @@
     </div>
     <div class="common_set switch_wrap">
       <p class="title">风机</p>
-      <p class="num">000/000</p>
+      <p class="num">000 RPM</p>
       <div class="btn_wrap">
         <div
           :class="testStore.draughtFan ? 'close' : 'open'"
@@ -74,40 +74,41 @@
     </div>
     <div class="common_set update_wrap">
       <p class="title">水浸</p>
-      <p class="num">000/000</p>
+      <p class="num">有水</p>
       <div class="btn_wrap">更新读取水浸状态</div>
     </div>
     <div class="common_set update_wrap">
       <p class="title">液位</p>
-      <p class="num">000/000</p>
+      <p class="num">000 kPa/100g</p>
       <div class="btn_wrap">更新读取液位状态</div>
     </div>
     <div class="common_set info_wrap">
       <p class="title">仓内</p>
-      <p class="info">温度 100 ℃</p>
-      <p class="info">湿度 100 ℃</p>
-      <p class="info">过氧化氢浓度 100 PPM</p>
+      <p class="info">温度 {{ deviceStore.binTemperature }} ℃</p>
+      <p class="info">湿度 {{ deviceStore.binHumidity }} ℃</p>
+      <p class="info">过氧化氢浓度 {{ deviceStore.binHP }} PPM</p>
     </div>
     <div class="common_set info_wrap">
       <p class="title">环境1</p>
-      <p class="info">温度 100 ℃</p>
-      <p class="info">湿度 100 ℃</p>
-      <p class="info">过氧化氢浓度 100 PPM</p>
+      <p class="info">温度 {{ deviceStore.envirTemperature1 }} ℃</p>
+      <p class="info">湿度 {{ deviceStore.envirHumidity1 }} ℃</p>
+      <p class="info">过氧化氢浓度 {{ deviceStore.envirHP1 }} PPM</p>
     </div>
     <div class="common_set info_wrap">
       <p class="title">环境2</p>
-      <p class="info">温度 100 ℃</p>
-      <p class="info">湿度 100 ℃</p>
-      <p class="info">过氧化氢浓度 100 PPM</p>
+      <p class="info">温度 {{ deviceStore.envirTemperature2 }} ℃</p>
+      <p class="info">湿度 {{ deviceStore.envirHumidity2 }} ℃</p>
+      <p class="info">过氧化氢浓度 {{ deviceStore.envirHP2 }} PPM</p>
     </div>
   </div>
 </template>
 
 <script setup>
 import { ref } from 'vue'
-import { useTestStore } from '@/store'
+import { useTestStore, useDeviceStore } from '@/store'
 
 const testStore = useTestStore()
+const deviceStore = useDeviceStore()
 
 const changeFeedingStatus = flag => {
   if (flag == 1) {

src/pages/Home.vue

@@ -192,6 +192,7 @@ import {
   useUserStore,
 } from '@/store'
 import { logoutJSON, getStateJSON, getAllSettingJSON } from '@/mock/command'
+
 import { useRouter } from 'vue-router'
 
 const router = useRouter()

src/pages/Login.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="login_container">
-    <LoginForm />
+    <LoginForm
+      :handleShowKey="handleShowKey"
+      :clearInput="clearInput"
+      :input="input"
+      :handleHideKey="handleHideKey"
+    />
     <p class="copyright">CopyRight@ xxxxxx公司</p>
     <div class="shutdown">
       <div class="group" @click="shutdown">
@@ -20,10 +25,14 @@
         </div>
       </div>
     </van-overlay>
+    <div class="key_wrap" v-if="showkeyboard">
+      <SimpleKeyboard @onChange="onChange" :input="input" />
+    </div>
   </div>
 </template>
 
 <script setup>
+import SimpleKeyboard from 'cpns/SimpleKeyboard'
 import Restart from '@/assets/img/login/restart.png'
 import Shutdown from '@/assets/img/login/shutdown.png'
 import LoginForm from 'cpns/LoginForm.vue'
@@ -37,6 +46,23 @@ webSocketStore.initEventSocket()
 const showShutdown = ref(false)
 const shutSecond = ref(5)
 const timer = ref(null)
+const showkeyboard = ref(false)
+
+const handleShowKey = () => {
+  showkeyboard.value = true
+}
+const handleHideKey = () => {
+  showkeyboard.value = false
+}
+
+const input = ref('')
+const onChange = a => {
+  input.value = a
+}
+
+const clearInput = () => {
+  input.value = ''
+}
 
 const shutdown = () => {
   showShutdown.value = true
@@ -112,6 +138,13 @@ const reboot = () => {}
       }
     }
   }
+  .key_wrap {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 230px;
+  }
 }
 .wrapper {
   display: flex;

src/store/modules/operator.js

@@ -6,12 +6,20 @@ export const useOperatorStore = defineStore({
     return {
       // 是否开始消毒
       disinfectStatus: false,
+      estimatedRemainingTimeS: 0,
+      disinfection_id: '',
     }
   },
   // actions
   actions: {
+    updateDisinfectionId(disinfection_id) {
+      this.disinfection_id = disinfection_id
+    },
     updateDisinfectStatus(val) {
       this.disinfectStatus = val
     },
+    updateEstimatedRemainingTimeS(estimatedRemainingTimeS) {
+      this.estimatedRemainingTimeS = estimatedRemainingTimeS
+    },
   },
 })

src/store/modules/websocket.js

@@ -2,6 +2,8 @@ import { defineStore } from 'pinia'
 import Socket from '@/socket'
 import { useSettingStore } from './setting'
 import { useUserStore } from './user'
+import { useOperatorStore } from './operator'
+import { useDeviceStore } from './device'
 
 export const useWebSocketStore = defineStore({
   id: 'websocket', // id必填，且需要唯一
@@ -21,6 +23,7 @@ export const useWebSocketStore = defineStore({
       const init = new Socket(url)
       const settingStore = useSettingStore()
       const userStore = useUserStore()
+      const operatorStore = useOperatorStore()
       init.connect()
       init.ws.onmessage = function (ev) {
         console.log(JSON.parse(ev.data))
@@ -30,7 +33,23 @@ export const useWebSocketStore = defineStore({
           switch (messageId) {
             case 'getState':
               // 初始化完毕
+              const { state } = JSON.parse(ev.data)
+              const {
+                workState,
+                estimatedRemainingTimeS,
+                disinfection_id,
+                isLogin,
+              } = state || {}
+              if (!isLogin) {
+                window.location.href = '/login'
+                return
+              }
               settingStore.updateInitLoading()
+              operatorStore.updateDisinfectStatus(workState)
+              operatorStore.updateEstimatedRemainingTimeS(
+                estimatedRemainingTimeS,
+              )
+              operatorStore.updateDisinfectionId(disinfection_id)
               // 将sensor_data中的数据更新到store中
               break
             case 'getAllUser':
@@ -63,17 +82,38 @@ export const useWebSocketStore = defineStore({
       const url = 'ws://192.168.8.115:19002/'
       const init = new Socket(url)
       init.connect()
-      init.ws.onmessage = function (data) {
-        // console.log(data)
-        // const { command } = data
-        // switch (command) {
-        //   case 'RealtimeSensorDataReport':
-        //     const { sensor_data } = data || {}
-        //     // 将sensor_data中的数据更新到store中
-        //     break
-        //   default:
-        //     break
-        // }
+      const deviceStore = useDeviceStore()
+      init.ws.onmessage = function (ev) {
+        console.log(JSON.parse(ev.data))
+        const { command } = JSON.parse(ev.data)
+        switch (command) {
+          case 'RealtimeSensorDataReport':
+            const { sensor_data } = JSON.parse(ev.data)
+            const {
+              h2o2_1,
+              h2o2_2,
+              h2o2_3,
+              humid_1,
+              humid_2,
+              humid_3,
+              temp_1,
+              temp_2,
+              temp_3,
+            } = sensor_data
+            // 将sensor_data中的数据更新到store中
+            deviceStore.updateBinTemperature(temp_1)
+            deviceStore.updateBinHumidity(humid_1)
+            deviceStore.updateBinHP(h2o2_1)
+            deviceStore.updateEnvirTemperature1(temp_2)
+            deviceStore.updateEnvirHumidity1(humid_2)
+            deviceStore.updateEnvirHP1(h2o2_2)
+            deviceStore.updateEnvirTemperature2(temp_3)
+            deviceStore.updateEnvirHumidity2(humid_3)
+            deviceStore.updateEnvirHP2(h2o2_3)
+            break
+          default:
+            break
+        }
       }
       this.socketEventInstance = init
     },

yarn.lock

@@ -518,6 +518,11 @@ sass@^1.58.3:
     immutable "^4.0.0"
     source-map-js ">=0.6.2 <2.0.0"
 
+simple-keyboard@^3.6.40:
+  version "3.6.40"
+  resolved "https://registry.npmmirror.com/simple-keyboard/-/simple-keyboard-3.6.40.tgz"
+  integrity sha512-4QmY9lpGhEIPeSUbUVnyLaYZBm9akR8z40c3ReSIij0h/oGaUxmVfcQIfG/Yvydym9m+PIWXdcquRv9fR+g/1w==
+
 "source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz"