From ac9b5d3d64f72b808f83fbbed67f685f4d7acec4 Mon Sep 17 00:00:00 2001
From: guoapeng <GuoAnPeng@163.com>
Date: Thu, 31 Jul 2025 19:41:32 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E9=94=AE=E7=9B=98=E5=8A=A0=E5=85=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                               |  2 +
 src/assets/images/solutionSelect.svg       |  1 +
 src/components/common/FTInput/index.vue    | 14 ++---
 src/components/home/Receive/index.vue      |  4 +-
 src/components/solution/Edit/index.vue     |  2 +-
 src/components/systemConfig/Edit/index.vue |  2 +-
 src/components/user/Edit/index.vue         |  8 +--
 src/main.ts                                |  2 +
 src/views/craft/index.vue                  |  6 +-
 src/views/home/index.vue                   | 88 ++++++++++++++++++------------
 src/views/login/index.vue                  |  4 +-
 11 files changed, 76 insertions(+), 57 deletions(-)
 create mode 100644 src/assets/images/solutionSelect.svg

diff --git a/package.json b/package.json
index 4c6370f..4f68624 100644
--- a/package.json
+++ b/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"
diff --git a/src/assets/images/solutionSelect.svg b/src/assets/images/solutionSelect.svg
new file mode 100644
index 0000000..3b9d54a
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/common/FTInput/index.vue b/src/components/common/FTInput/index.vue
index 0c234c8..8da82da 100644
--- a/src/components/common/FTInput/index.vue
+++ b/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,8 +64,7 @@ const focusInput = (e: any) => {
   }
   if (visible.value)
     return
-  if (deviceType.value !== deviceStore.deviceTypeMap.LargeSpaceDM_B)
-    visible.value = true
+  visible.value = true
 }
 emits('focus')
 
diff --git a/src/components/home/Receive/index.vue b/src/components/home/Receive/index.vue
index 26b13ce..bc4998b 100644
--- a/src/components/home/Receive/index.vue
+++ b/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)
diff --git a/src/components/solution/Edit/index.vue b/src/components/solution/Edit/index.vue
index 0a9685d..15bf05c 100644
--- a/src/components/solution/Edit/index.vue
+++ b/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>
diff --git a/src/components/systemConfig/Edit/index.vue b/src/components/systemConfig/Edit/index.vue
index 871c3f5..c149c5d 100644
--- a/src/components/systemConfig/Edit/index.vue
+++ b/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">
diff --git a/src/components/user/Edit/index.vue b/src/components/user/Edit/index.vue
index 22310ae..c612ace 100644
--- a/src/components/user/Edit/index.vue
+++ b/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">
diff --git a/src/main.ts b/src/main.ts
index bcc90fd..9f426d1 100644
--- a/src/main.ts
+++ b/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 })
diff --git a/src/views/craft/index.vue b/src/views/craft/index.vue
index acd300e..1a2b14c 100644
--- a/src/views/craft/index.vue
+++ b/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
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index b556b36..2a28c5b 100644
--- a/src/views/home/index.vue
+++ b/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
@@ -120,41 +139,42 @@ const receiveOkHandle = async (data: Log.LogItem & { channelCode: 'CHANNEL_1' |
         font-size 18px
         font-weight 500
         margin-bottom 30px
-    .solution-box
+  .solution-box
+    width 100%
+    height 50px
+    background: #F8F8F8;
+    box-shadow: inset 1px 2px 6px 0 rgba(210, 210, 210, 0.3);
+    display flex
+    align-items center
+    .el-select
+      width 100%
+      height 100%
+    .unit
+      height 40px
+      line-height 40px
+      font-size 18px
+      font-weight 500
+      color: #3C445C;
+      padding 0 15px
+      border-left 1px solid #D1D1D1;
+    .content
+      width 100%
+      color: #3C445C;
+      text-align center
+      font-weight bold
+      font-size 18px
+  .input-box
+    width 100%
+
+    .label
       width 100%
-      height 50px
-      background: #F8F8F8;
-      box-shadow: inset 1px 2px 6px 0 rgba(210, 210, 210, 0.3);
       display flex
       align-items center
-      .el-select
-        width 100%
-        height 100%
-      .unit
-        height 40px
-        line-height 40px
-        font-size 18px
-        font-weight 500
-        color: #3C445C;
-        padding 0 15px
-        border-left 1px solid #D1D1D1;
-      .content
-        width 100%
-        text-align center
-        font-weight bold
-        font-size 18px
-    .input-box
-      width 100%
-
-      .label
-        width 100%
-        display flex
-        align-items center
-        justify-content flex-start
-        padding 10px
-        img
-          width 10px
-          margin-right 10px
+      justify-content flex-start
+      padding 10px
+      img
+        width 10px
+        margin-right 10px
 :deep(.el-select__wrapper) {
   height 100%
   line-height 100%
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index a233bac..71666ed 100644
--- a/src/views/login/index.vue
+++ b/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