fix: 键盘加入

package.json

@@ -45,6 +45,8 @@
     "postcss-url": "^10.1.3",
     "postcss-viewport-units": "^0.1.6",
     "postcss-write-svg": "^3.0.1",
+    "simple-keyboard": "^3.8.71",
+    "simple-keyboard-layouts": "^3.4.114",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0",
     "ws": "^8.18.1"

src/assets/images/solutionSelect.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="8" height="17" viewBox="0 0 8 17"><g><path d="M5.81818,10.625L2.18182,10.625L2.18182,2.125L1.45455,2.125L1.45455,14.5208C1.45455,15.8879,2.59636,17,4,17C5.40364,17,6.54546,15.8879,6.54546,14.5208L6.54546,2.125L5.81818,2.125L5.81818,10.625ZM6.90909,2.125L1.09091,2.125C0.489454,2.125,0,1.64829,0,1.0625C0,0.476708,0.489454,0,1.09091,0L6.90909,0C7.51055,0,8,0.476708,8,1.0625C8,1.64829,7.51055,2.125,6.90909,2.125ZM1.09091,0.708333C0.890148,0.708429,0.72745,0.866967,0.72745,1.0625C0.72745,1.25803,0.890148,1.41657,1.09091,1.41667L6.90909,1.41667C7.10992,1.41667,7.27273,1.2581,7.27273,1.0625C7.27273,0.866899,7.10992,0.708333,6.90909,0.708333L1.09091,0.708333Z" fill="#FFFFFF" fill-opacity="1"/></g></svg>

src/components/common/FTInput/index.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import 'simple-keyboard/build/css/index.css'
-
 import Keyboard from 'simple-keyboard'
+
 import layout from 'simple-keyboard-layouts/build/layouts/chinese.js'
-import { useDeviceStore } from 'stores/deviceStore'
-import { computed, onUnmounted, ref } from 'vue'
+import { onUnmounted, ref } from 'vue'
+import 'simple-keyboard/build/css/index.css'
 
 defineOptions({
   inheritAttrs: false,
@@ -21,10 +20,6 @@ const props = defineProps({
   },
 })
 const emits = defineEmits(['onChange', 'enter', 'close', 'focus'])
-const deviceStore = useDeviceStore()
-const deviceType = computed(() => {
-  return __DEVICE_TYPE__
-})
 
 const model = defineModel()
 const keyboard = ref<any>(null)
@@ -69,7 +64,6 @@ const focusInput = (e: any) => {
   }
   if (visible.value)
     return
-  if (deviceType.value !== deviceStore.deviceTypeMap.LargeSpaceDM_B)
   visible.value = true
 }
 emits('focus')

src/components/home/Receive/index.vue

@@ -80,7 +80,7 @@ const channelMap = {
         el-select(v-model="form.solutionId" placeholder="请选择溶液")
           el-option(v-for="item in solutionList" :key="item.id" :label="item.name" :value="item.id")
       el-form-item(label="溶液浓度" prop="concentration")
-        el-input(v-model="form.concentration" placeholder="请输入溶液浓度")
+        ft-input(v-model="form.concentration" placeholder="请输入溶液浓度" layoutName="number")
           template(#append)
             span %
       el-form-item(label="发放人" prop="issuerId")
@@ -89,7 +89,7 @@ const channelMap = {
       el-form-item(label="领取人" prop="receiverId")
         el-tag {{systemStore.systemStatus.currentUser.nickname}}
       el-form-item(label="容量" prop="receivedVolume")
-        el-input(v-model="form.receivedVolume" placeholder="请输入容量")
+        ft-input(v-model="form.receivedVolume" placeholder="请输入容量" layoutName="number")
           template(#append)
             span mL
     template(#footer)

src/components/solution/Edit/index.vue

@@ -44,7 +44,7 @@ const cancel = () => {
   FtDialog(visible :title="data?.id ? '编辑' : '新增'" width="30%" :ok-handle="okHandle" @cancel="cancel")
     el-form(ref="formRef" label-width="auto" :model="form" :rules="rules")
       el-form-item(label="溶液名称" prop="name")
-        el-input(v-model="form.name" placeholder="请输入溶液名称")
+        ft-input(v-model="form.name" placeholder="请输入溶液名称")
 </template>
 
 <style lang="stylus" scoped>

src/components/systemConfig/Edit/index.vue

@@ -44,7 +44,7 @@ const cancel = () => {
       el-form-item(label="code")
         el-tag {{ form.code }}
       el-form-item(label="值" prop="value")
-        el-input(v-model="form.value" placeholder="请输入值")
+        ft-input(v-model="form.value" placeholder="请输入值")
 </template>
 
 <style scoped lang="stylus">

src/components/user/Edit/index.vue

@@ -126,16 +126,16 @@ const roleList = [
   FtDialog(visible :title="data.id ? '编辑用户' : '新增用户'" width="40%" :ok-handle="okHandle" @cancel="cancel")
     el-form(ref="formRef" :model="form" :rules="rules" label-width="auto")
       el-form-item(label="账号" prop="username")
-        el-input(v-model="form.username" maxlength="10" show-word-limit :disabled="data.id && form.fixedUser === 'ENABLE'" placeholder="请输入账号")
+        ft-input(v-model="form.username" maxlength="10" show-word-limit :disabled="data.id && form.fixedUser === 'ENABLE'" placeholder="请输入账号")
       el-form-item(label="用户名" prop="nickname")
-        el-input(v-model="form.nickname" maxlength="10" show-word-limit :disabled="data.id && form.fixedUser === 'ENABLE'" placeholder="请输入用户名")
+        ft-input(v-model="form.nickname" maxlength="10" show-word-limit :disabled="data.id && form.fixedUser === 'ENABLE'" placeholder="请输入用户名")
       el-form-item(label="角色" prop="role")
         el-select(v-model="form.role" placeholder="请选择角色")
             el-option( v-for="item in roleList" :key="item.value" :label="item.label" :value="item.value")
       el-form-item(label="密码" prop="password" v-if="useSystemStore().systemStatus.currentUser?.fixedUser === 'ENABLE'")
-        el-input(v-model="form.password" maxlength="6" autocomplete="new-password" show-word-limit show-password type="password" placeholder="请输入密码")
+        ft-input(v-model="form.password" maxlength="6" autocomplete="new-password" show-word-limit show-password type="password" placeholder="请输入密码")
       el-form-item(label="再次输入密码" prop="passwordAgain" v-if="useSystemStore().systemStatus.currentUser?.fixedUser === 'ENABLE'")
-        el-input(v-model="form.passwordAgain" maxlength="6" autocomplete="new-password" show-word-limit show-password type="password" placeholder="请输入密码")
+        ft-input(v-model="form.passwordAgain" maxlength="6" autocomplete="new-password" show-word-limit show-password type="password" placeholder="请输入密码")
 </template>
 
 <style scoped lang="stylus">

src/main.ts

@@ -3,6 +3,7 @@ import FtButton from 'components/common/FTButton/index.vue'
 import FtChart from 'components/common/FTChart/index.vue'
 import FtDatetime from 'components/common/FTDateTime/index.vue'
 import FtDialog from 'components/common/FTDialog/index.vue'
+import FtInput from 'components/common/FTInput/index.vue'
 import FtStream from 'components/common/FTStream/index.vue'
 import FtTable from 'components/common/FTTable/index.vue'
 import ElementPlus from 'element-plus'
@@ -25,6 +26,7 @@ app.component('FtDialog', FtDialog)
 app.component('FtStream', FtStream)
 app.component('FtChart', FtChart)
 app.component('FtDatetime', FtDatetime)
+app.component('FtInput', FtInput)
 app
   .use(router)
   .use(ElementPlus, { locale, zIndex: 3000 })

src/views/craft/index.vue

@@ -195,15 +195,15 @@ const pumpAddSolution = async () => {
           el-select(v-model="form.solutionId" placeholder="请选择溶液")
             el-option(v-for="item in solutionList" :key="item.id" :label="item.name" :value="item.id")
         el-form-item(label="溶液浓度" prop="concentration")
-          el-input(v-model="form.concentration" placeholder="请输入溶液浓度")
+          ft-input(v-model="form.concentration" placeholder="请输入溶液浓度" layoutName="number")
             template(#append)
               span %
         el-form-item(label="加液量" prop="volume")
-          el-input(v-model="form.volume" placeholder="请输入加液量")
+          ft-input(v-model="form.volume" placeholder="请输入加液量" layoutName="number")
             template(#append)
               span mL
         el-form-item(label="蠕动泵转数" prop="revolutions")
-          el-input(v-model="form.revolutions" placeholder="请输入蠕动泵转数")
+          ft-input(v-model="form.revolutions" placeholder="请输入蠕动泵转数" layoutName="number")
             template(#append)
               span r
       div.statistic-box

src/views/home/index.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { queryCraftList } from 'apis/crafts'
 import { getSolsList } from 'apis/solution'
+import { sync } from 'apis/system'
 import solutionIcon from 'assets/images/solution.svg'
+import solutionSelectIcon from 'assets/images/solutionSelect.svg'
 import Receive from 'components/home/Receive/index.vue'
 import { useSystemStore } from 'stores/systemStore'
 import { computed, onMounted, ref, watch } from 'vue'
@@ -69,11 +71,23 @@ const receiveOkHandle = async (data: Log.LogItem & { channelCode: 'CHANNEL_1' |
     concentration: data.concentration,
   })
 }
+
+const cardClick = async (item: System.ChannelState) => {
+  const channel = systemStore.systemStatus.channelState.find(channel => channel.channelCode === item.channelCode)
+  await sync({
+    channels: [
+      {
+        channelCode: item.channelCode,
+        selected: !channel?.selected,
+      },
+    ],
+  })
+}
 </script>
 
 <template lang="pug">
   div.home-container(v-loading="loading")
-    el-card(v-for="item in channelList.sort((a,b)=>a.channelCode.localeCompare(b.channelCode))" :key="item.channelCode")
+    el-card(v-for="item in channelList" :key="item.channelCode" :class="{'card-selected': item.selected }" @click.stop="() => cardClick(item)")
       div.top-box
         p.title {{channelMap[item.channelCode]}}
         div.solution-box(@click="() => receiveHandle(item)")
@@ -82,7 +96,7 @@ const receiveOkHandle = async (data: Log.LogItem & { channelCode: 'CHANNEL_1' |
 
       div.input-box
         p.label
-          img(:src="solutionIcon" alt="")
+          img(:src="item.selected ?  solutionSelectIcon: solutionIcon" alt="")
           span 每次加液体积
         div.solution-box
           el-select(v-model="item.targetVolume" placeholder="请选择" no-data-text="无数据, 请添加对应配方" :disabled="!item.solutionName")
@@ -107,6 +121,11 @@ const receiveOkHandle = async (data: Log.LogItem & { channelCode: 'CHANNEL_1' |
   display grid
   grid-template-columns 1fr 1fr 1fr 1fr
   gap 20px
+  .el-card
+    transform: all 0.3s;
+  .card-selected
+    background-color #1778D2
+    color #fff
   :deep(.el-card__body)
     height 100%
     display flex
@@ -140,6 +159,7 @@ const receiveOkHandle = async (data: Log.LogItem & { channelCode: 'CHANNEL_1' |
       border-left 1px solid #D1D1D1;
     .content
       width 100%
+      color: #3C445C;
       text-align center
       font-weight bold
       font-size 18px

src/views/login/index.vue

@@ -50,12 +50,12 @@ const loginHandle = async () => {
       el-form(ref="formRef", :model="sys.loginForm", :rules="rules", style="width: 100%")
         .input-title 用户名
         el-form-item
-          el-input(v-model="sys.loginForm.username", size="large", placeholder="请输入用户名")
+          ft-input(v-model="sys.loginForm.username", size="large", placeholder="请输入用户名")
             template(#prepend)
               img.input-icon(:src="user", alt="")
         .input-title 密码
         el-form-item
-          el-input(v-model="sys.loginForm.password", size="large", placeholder="请输入密码", type="password")
+          ft-input(v-model="sys.loginForm.password", size="large", placeholder="请输入密码", type="password")
             template(#prepend)
               img.input-icon(:src="password", alt="")
         el-form-item