简单键盘

2 years ago · 10966267c6
12 changed files with 228 additions and 31 deletions
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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"
--- a/src/components/LoginForm.vue
+++ b/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
--- a/src/components/Progress.vue
+++ b/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)
--- a/src/components/SimpleKeyboard.vue
+++ b/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>
--- a/src/components/Test.vue
+++ b/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) {
--- a/src/pages/Home.vue
+++ b/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()
--- a/src/pages/Login.vue
+++ b/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;
--- a/src/store/modules/operator.js
+++ b/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
+    },
  },
 })
--- a/src/store/modules/websocket.js
+++ b/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
    },
--- a/src/utils/index.js
+++ b/src/utils/index.js
--- a/yarn.lock
+++ b/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"