中文输入

.env

@@ -1,5 +1,5 @@
-# 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://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/
+# VITE_BASE_WS1_URL=ws://127.0.0.1:19001/
+# VITE_BASE_WS2_URL=ws://127.0.0.1:19002/

src/components/Setting/components/History.vue

@@ -0,0 +1,161 @@
+<template>
+  <div class="histrory_container">
+    <div class="header_wrap">
+      <p class="title_text">消毒名称</p>
+      <p class="operator_text">操作</p>
+    </div>
+    <div class="content_wrap">
+      <div class="data_line">
+        <p class="title">2023-0824-234048</p>
+        <div class="btns">
+          <div class="btn" @click="showDetailModal">详情</div>
+        </div>
+      </div>
+    </div>
+    <div class="detail_modal" v-if="showDetailVisible">
+      <div class="table_wrap">
+        <div class="table_title_wrap"></div>
+      </div>
+      <div class="bottom_line">
+        <div class="return_btn" @click="showDetailVisible = false">返回</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const showDetailVisible = ref(false)
+const showDetailModal = () => {
+  showDetailVisible.value = true
+}
+</script>
+
+<style lang="scss" scoped>
+.histrory_container {
+  display: flex;
+  flex-direction: column;
+  height: 580px;
+  box-sizing: border-box;
+  width: 766px;
+  position: relative;
+  .header_wrap {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    width: 766px;
+    height: 80px;
+    background: #f6f6f6;
+    padding: 0 90px;
+    .title_text {
+      font-family: Source Han Sans CN;
+      font-size: 18px;
+      font-weight: normal;
+      line-height: normal;
+      letter-spacing: 0.07em;
+      color: #999999;
+    }
+    .operator_text {
+      font-family: Source Han Sans CN;
+      font-size: 18px;
+      font-weight: normal;
+      line-height: normal;
+      letter-spacing: 0.07em;
+      color: #999999;
+    }
+  }
+  .content_wrap {
+    flex: 1;
+    overflow: scroll;
+    .data_line {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      box-sizing: border-box;
+      width: 766px;
+      height: 80px;
+      padding: 0 64px 0 90px;
+      .title {
+        font-size: 22px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        text-align: center;
+        font-family: Source Han Sans CN;
+        font-weight: normal;
+        line-height: normal;
+        letter-spacing: 0.07em;
+        color: #191919;
+      }
+      .btns {
+        display: flex;
+        align-items: center;
+        .btn {
+          width: 87px;
+          height: 45px;
+          border-radius: 23px;
+          background: #06518b;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-family: Source Han Sans CN;
+          font-size: 20px;
+          font-weight: normal;
+          line-height: normal;
+          letter-spacing: 0.1em;
+          color: #ffffff;
+        }
+      }
+    }
+  }
+  .detail_modal {
+    position: fixed;
+    left: 30px;
+    top: 129px;
+    width: 1220px;
+    height: 580px;
+    border-radius: 16px;
+    background: #ffffff;
+    box-sizing: border-box;
+    z-index: 3;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    .table_wrap {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      .table_title_wrap {
+        width: 1224px;
+        height: 80.29px;
+        box-sizing: border-box;
+        border-radius: 16px 16px 0px 0px;
+        background: #f6f6f6;
+      }
+    }
+    .bottom_line {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      padding: 20px 30px;
+      .return_btn {
+        width: 91px;
+        height: 40px;
+        border-radius: 245px;
+        background: #06518b;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-family: Source Han Sans CN;
+        font-size: 18px;
+        font-weight: normal;
+        line-height: normal;
+        letter-spacing: 0.1em;
+        color: #ffffff;
+      }
+    }
+  }
+}
+</style>

src/components/Setting/index.vue

@@ -31,6 +31,11 @@
         <p :class="activeTab == 6 ? 'title active' : 'title'">消毒记录管理</p>
         <div :class="activeTab == 6 ? 'btn style-btn' : 'dis_btn'">操作</div>
       </div>
+      <div class="tab_wrap" @click="changeActiveTab(7)">
+        <p class="active_line" v-show="activeTab == 7"></p>
+        <p :class="activeTab == 6 ? 'title active' : 'title'">历史记录</p>
+        <div :class="activeTab == 6 ? 'btn style-btn' : 'dis_btn'">查看</div>
+      </div>
     </div>
     <div class="right_container">
       <Admin v-if="activeTab == 2" />
@@ -39,6 +44,7 @@
       <User v-if="activeTab == 3" />
       <ExportExcel :exportType="1" v-if="activeTab == 5" />
       <ExportExcel :exportType="2" v-if="activeTab == 6" />
+      <History v-if="activeTab == 7" />
     </div>
   </div>
 </template>
@@ -50,6 +56,7 @@ import Date from './components/Date.vue'
 import Device from './components/Device.vue'
 import User from './components/User.vue'
 import ExportExcel from './components/ExportExcel.vue'
+import History from './components/History.vue'
 import { getAllUserJSON } from '@/mock/command'
 import { useWebSocketStore } from '@/store'
 

src/components/UpdatePreSetting.vue

@@ -109,11 +109,11 @@
       <div>
         <input
           id="id_formula"
-          type="text"
           v-model="formula_id"
           class="formula_input"
           placeholder="请输入配方名称"
-          @focus="handleShowKeyBoard"
+          type="text"
+          name=""
         />
       </div>
     </div>
@@ -797,6 +797,7 @@ onMounted(() => {
       showkeyboard.value = false
     }
   })
+  $('#id_formula').virtualkeyboard()
 })
 </script>
 

src/public/virtualkeyboard.css

@@ -10,7 +10,7 @@
   width: 750px;
   border: 1px solid #999;
   z-index: 99999;
-  top: 50%;
+  top: 45%;
   left: 50%;
   transform: translate(-50%, -50%);
   user-select: none;
@@ -56,7 +56,7 @@
 .keyboardOp > .slideDown {
   float: right;
   font-weight: bold;
-  color: darkviolet;
+  color: #06518b;
   cursor: pointer;
   padding: 0 20px;
   border-left: 1px solid #dbdbdb;
@@ -137,5 +137,5 @@
 
 .virtualkeyboard .func {
   font-size: 20px;
-  color: #fd910a;
+  color: #06518b;
 }