优化加液样式

server/index.js

@@ -3,7 +3,7 @@ import express from 'express'
 
 const app = express()
 
-const PORT = 8080 // 可根据需要更改端口号
+const PORT = 8088 // 可根据需要更改端口号
 app.listen(PORT, () => {
   console.log(`服务器已启动，正在监听端口 ${PORT}`)
 })

src/assets/styles/common.scss

@@ -1,6 +1,6 @@
 /* CSS Document */
 html {
-  font-family: serif !important;
+  font-family: 'PingFangSC-Regular', 'PingFang SC', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
   height: 100vh;
   font-size: 14px;
 }

src/assets/styles/element.scss

@@ -1,8 +1,6 @@
 :root {
   --el-font-size-base: 18px;
   // --el-button-size: 80px;
-
-  --el-font-family-base: serif;
    --el-color-primary:  #1989fa;
   //--el-button-active-bg-color: linear-gradient(90deg, #0657C0 24%, #096AE0 101%);
   --text-color-primary: #17213c;
@@ -35,4 +33,11 @@
 }
 .el-card__body{
   padding: 0;
+}
+
+.el-table__header {
+  th {
+    background-color: rgba(0,0,0,0.02 ) !important;
+    color: rgba(0, 0, 0, 0.85)
+  }
 }

src/components/common/BTButton/index.vue

@@ -113,6 +113,6 @@ const handleClick = (event: MouseEvent) => {
     padding-left: 5px;
   }
   .button{
-    font-family: serif;
+
   }
 </style>

src/components/formula/FormulaConfig.vue

@@ -473,7 +473,7 @@ const openKeyboardType = (labelName: string) => {
     font-size: 20px !important;
     padding: 5px;
     padding-left: 15px;
-    height: 81vh;
+    //height: 81vh;
     overflow: auto;
     .formulaFormItem{
       display: grid;
@@ -509,7 +509,7 @@ const openKeyboardType = (labelName: string) => {
     margin-right: 0;
   }
   ::v-deep .el-input__inner{
-    height: 45px;
+    height: 40px;
   }
   ::v-deep .el-form-item{
     align-items: center;

src/components/formula/FormulaTable.vue

@@ -128,7 +128,7 @@ const deleteRecipe = (item: Formula.FormulaItem) => {
 
 <style scoped>
 .recipe-management {
-  font-family: serif;
+
   border: 1px solid #ccc;
   padding: 10px;
   border-radius: 5px;
@@ -136,22 +136,6 @@ const deleteRecipe = (item: Formula.FormulaItem) => {
   width: 30vw;
 }
 
-.add-recipe-button {
-  background-color: #e6f7ff;
-  color: #1890ff;
-  border: none;
-  padding: 6px 12px;
-  border-radius: 3px;
-  cursor: pointer;
-  margin-bottom: 10px;
-  transition: all 0.3s;
-}
-
-.add-recipe-button:hover {
-  background-color: #1890ff;
-  color: white;
-}
-
 .recipe-list {
   list-style: none;
   padding: 0;
@@ -196,7 +180,6 @@ const deleteRecipe = (item: Formula.FormulaItem) => {
   cursor: pointer;
   margin-right: 5px;
   transition: all 0.3s;
-  font-family: serif;
 }
 
 .view-button {

src/components/home/HomeLogLevel.vue

@@ -82,5 +82,6 @@ $input-height: 3rem;
 }
 .el-button {
   background-color: #2892F3 !important;
+  border-radius: 0  var(--el-border-radius-base) var(--el-border-radius-base)  0;
 }
 </style>

src/components/home/HomeSetting.vue

@@ -272,8 +272,8 @@ const settingWidth = computed(() => {
       </div>
     </div>
   </div>
-  <ft-dialog v-model="disinfectFormulaVisible" width="80vw" title="消毒设置">
-    <div>
+  <ft-dialog v-model="disinfectFormulaVisible" title="消毒设置" width="80vw">
+    <div style="height: 80vh;overflow: auto">
       <Config ref="configRef" />
     </div>
     <template #footer>
@@ -332,6 +332,6 @@ const settingWidth = computed(() => {
    border: 1px solid red;
  }
  .config-btn{
-   margin-top: -4rem
+   //margin-top: -3rem
  }
 </style>

src/components/home/config.vue

@@ -151,7 +151,7 @@ const onDefaultFormula = () => {
 <style lang="scss" scoped>
   .main-content{
     overflow: hidden;
-    height: $main-container-height;
+    height: auto;
     //background: $gradient-color;
     padding: 15px;
     .formula-config{

src/components/liquid/LiquidLevel.vue

@@ -3,10 +3,19 @@ import liquidLevelSvg from 'assets/images/liquid/liquid-container.svg'
 import ScaleRuler from 'components/liquid/ScaleRuler.vue'
 // import liquidScaleSvg from 'assets/images/liquid/liquid-scale.svg'
 import { roundNumber } from 'libs/utils'
-import { computed, ref, watchEffect } from 'vue'
+import { computed, onMounted, ref, watchEffect } from 'vue'
 
 import { useLiquidStore } from '@/stores/liquidStore'
 
+const elementHeight = ref(200)
+
+onMounted(() => {
+  const element = document.querySelector('.liquid-level-img')
+  if (element) {
+    elementHeight.value = element.clientHeight
+    console.log('元素高度:', elementHeight.value)
+  }
+})
 const liquidStore = useLiquidStore()
 const liquidStateData = ref(liquidStore.liquidStateData)
 const liquidTotal = ref(liquidStore.liquidTotal)
@@ -30,7 +39,8 @@ const liquidHeight = computed(() => {
   <div class="liquid-level-main">
     <ScaleRuler :max-scale="liquidTotal" />
     <div class="liquid-level-contailner">
-      <img :src="liquidLevelSvg" alt="液位图" class="liquid-level-img">
+      <div class="liquid-level" :style="{ height: `${liquidHeight}%` }" />
+      <img :src="liquidLevelSvg" alt="液位图" class="liquid-level-img-r">
       <!-- <div class="liquid-level-middle" :style="{ height: `${liquidHeight}px` }" /> -->
       <div class="liquid-level" :style="{ height: `${liquidHeight}%` }" />
       <div class="current-level">
@@ -51,9 +61,11 @@ const liquidHeight = computed(() => {
   position: relative;
   height: 60vh;; /* 根据实际调整 */
 }
-.liquid-level-img {
-  /* width: 100%;
-  height: 100%; */
+.liquid-level-img-l {
+  height: 62.5vh;
+  margin-top: -1.5vh;
+}
+.liquid-level-img-r {
   height: 60vh;
 }
 .liquid-level {
@@ -61,9 +73,9 @@ const liquidHeight = computed(() => {
   bottom: 0;
   left: 0;
   width: 100%;
-  background: linear-gradient(to top, #0099ff, #e6f7ff); /* 颜色渐变，可按需调整 */
-  border-radius: 10px;
-  min-height: 1.5rem;
+  background: linear-gradient(to top, #0099ff, #7fc8fa); /* 颜色渐变，可按需调整 */
+  min-height: .8rem;
+  border-radius: 0 0 20px 20px;
 }
 .liquid-level-middle{
     background: linear-gradient(352deg, #0093f5, #effafe);

src/components/seal/DashboardChart.vue

@@ -27,8 +27,9 @@ const initChart = () => {
   if (!chartRef.value) {
     return
   }
-  myChart = echarts.init(chartRef.value)
+  myChart = echarts.init(chartRef.value, null, { renderer: 'svg' })
   const option = {
+    silent: true,
     tooltip: {
       formatter: '{a} <br/>{b} : {c}%',
     },
@@ -70,7 +71,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div ref="chartRef" style="width: 40vw; height: 30vw" />
+  <div ref="chartRef" style="width: 100%; height: 100%" />
 </template>
 
 <style>

src/components/setting/AddUser.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import { syncSendCmd } from 'apis/system'
 import SoftKeyboard from 'components/common/SoftKeyboard/index.vue'
-import type { FormInstance } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
 import { FtMessage } from 'libs/message'
-import { ref, watchEffect } from 'vue'
+import { reactive, ref, watchEffect } from 'vue'
 
 import { useSettingStore } from '@/stores/settingStore'
 
@@ -114,21 +114,66 @@ const onClose = () => {
 const handleConfirm = (value: string) => {
   console.log('确认输入:', value)
 }
+interface UserForm {
+  name: string
+  passwd: string
+  confirmPasswd: string
+  roleType: string
+}
+// 用户名
+const validateUser = (rule: any, value: string, callback: any) => {
+  if (/[\u4E00-\u9FA5]/.test(value)) {
+    callback(new Error('账号不能包含汉字！'))
+  }
+  else if (!value) {
+    callback(new Error('请输入账号'))
+  }
+  else {
+    callback()
+  }
+}
+// 密码
+const validatePasswd = (rule: any, value: string, callback: any) => {
+  if (/[\u4E00-\u9FA5]/.test(value)) {
+    callback(new Error('密码不能包含汉字！'))
+  }
+  else if (!value) {
+    callback(new Error('请输入密码'))
+  }
+  else {
+    callback()
+  }
+}
+// 确认密码
+const validateConfirmPasswd = (rule: any, value: string, callback: any) => {
+  if (/[\u4E00-\u9FA5]/.test(value)) {
+    callback(new Error('确认密码不能包含汉字！'))
+  }
+  else if (!value) {
+    callback(new Error('请再次输入密码'))
+  }
+  else if (value !== userForm.value.passwd) {
+    callback(new Error('两次输入密码不一致!'))
+  }
+  else {
+    callback()
+  }
+}
+const rules = reactive<FormRules<UserForm>>({
+  name: [{ required: true, message: '输入登录名', trigger: 'blur' }, { min: 4, max: 10, message: '长度4-10', trigger: 'blur' }, { validator: validateUser, trigger: 'blur' }],
+  passwd: [{ required: true, message: '输入密码', trigger: 'blur' }, { min: 4, max: 10, message: '长度4-10', trigger: 'blur' }, { validator: validatePasswd, trigger: 'blur' }],
+  confirmPasswd: [{ required: true, message: '输入密码', trigger: 'blur' }, { min: 4, max: 10, message: '长度4-10', trigger: 'blur' }, { validator: validateConfirmPasswd, trigger: 'blur' }],
+})
 </script>
 
 <template>
   <FtDialog v-if="visible" v-model="visible" :title="modalTitle" :ok-handle="() => { onSave(userFormRef) }" @cancel="onClose">
     <div>
-      <el-form ref="userFormRef" :model="userForm" label-width="auto" style="max-width: 400px">
+      <el-form ref="userFormRef" :model="userForm" :rules="rules" label-width="auto" style="max-width: 400px">
         <el-form-item
           v-if="!userForm.id"
           label="登录名："
           prop="name"
-          :rules="[{
-            required: true,
-            message: '输入登录名',
-            trigger: ['blur', 'change'],
-          }]"
         >
           <el-input v-model="userForm.name" v-prevent-keyboard name="name" placeholder="登录名" @focus="openKeyboard" />
         </el-form-item>
@@ -136,24 +181,14 @@ const handleConfirm = (value: string) => {
           <el-form-item
             label="密码："
             prop="passwd"
-            :rules="{
-              required: true,
-              message: '输入密码',
-              trigger: ['blur', 'change'],
-            }"
           >
             <el-input v-model="userForm.passwd" v-prevent-keyboard name="passwd" type="password" placeholder="密码" @focus="openKeyboard" />
           </el-form-item>
           <el-form-item
             label="确认密码："
             prop="confirmPasswd"
-            :rules="{
-              required: true,
-              message: '输入密码',
-              trigger: ['blur', 'change'],
-            }"
           >
-            <el-input v-model="userForm.confirmPasswd" v-prevent-keyboard name="confirmPasswd" placeholder="确认密码" @focus="openKeyboard" />
+            <el-input v-model="userForm.confirmPasswd" v-prevent-keyboard name="confirmPasswd" type="password" placeholder="确认密码" @focus="openKeyboard" />
           </el-form-item>
         </div>
         <el-form-item

src/components/setting/Device.vue

@@ -33,7 +33,7 @@ const screenHeight = ref(height)
       <div>初始化状态：{{ deviceInfo.deviceTypeInited ? '已初始化' : '未初始化' }}</div>
     </div>
     <div class="device-ul">
-      <div>设备屏幕尺寸：宽：{{ screenWidth }} 高：{{ screenHeight }}</div>
+      <div>设备屏幕尺寸：{{ screenWidth }} x {{ screenHeight }}</div>
     </div>
   </div>
 </template>

src/components/setting/History.vue

@@ -114,7 +114,7 @@ const onClose = () => {
       />
     </div>
     <div class="history-table">
-      <el-table :data="tableData" stripe style="width: 100%" @selection-change="handleSelectionChange">
+      <el-table :data="tableData"  style="width: 100%;" height="100%" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" />
         <el-table-column prop="name" label="消毒日期" />
         <el-table-column prop="detail" label="操作" width="100">
@@ -140,10 +140,10 @@ const onClose = () => {
   padding: 10px;
   background: $gradient-color;
   .history-export{
-    margin: 2vw;
+    margin: 10px;
   }
   .history-table{
-    max-height: 73vh;
+    height: 73vh;
     overflow: auto;
   }
 }

src/components/setting/HistoryDetail.vue

@@ -48,7 +48,7 @@ const tableColumns = computed(() => {
 
 <template>
   <div class="data-table-container">
-    <el-table :data="tableData" stripe style="width: 100%">
+    <el-table :data="tableData"  style="width: 100%">
       <el-table-column
         v-for="column in tableColumns"
         :key="column.prop"

src/components/setting/User.vue

@@ -54,9 +54,14 @@ const onDelUser = (user: User.UserItem) => {
     FtMessage.warning('自己不可删除自己')
     return
   }
-  if (user.roleType === 'admin' && userInfo.roleType !== 'admin') {
+  /*  if (user.roleType === 'admin' && userInfo.roleType !== 'admin') {
     FtMessage.warning('不可删除管理员用户')
     return
+  } */
+  // 禁止删除超级管理员
+  if (userInfo.name === 'admin') {
+    FtMessage.warning('不可删除超级管理员用户')
+    return
   }
   FtMessageBox.warning('请确认是否删除?').then(() => {
     const delParams = {
@@ -89,17 +94,17 @@ const handleSelectionChange = (users: User.UserItem[]) => {
       />
     </div>
     <div class="user-table">
-      <el-table :data="tableData" stripe style="width: 100%" @selection-change="handleSelectionChange">
+      <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
         <el-table-column prop="name" label="用户名" />
         <el-table-column prop="detail" label="操作" width="250" align="center">
           <template #default="scoped">
             <div class="user-opera">
-              <el-link type="primary" @click="updatePwd(scoped.row)">
+              <el-button class="view-button" @click.stop="updatePwd(scoped.row)">
                 修改密码
-              </el-link>
-              <el-link type="primary" @click="onDelUser(scoped.row)">
+              </el-button>
+              <el-button class="delete-button" @click.stop="onDelUser(scoped.row)">
                 删 除
-              </el-link>
+              </el-button>
             </div>
           </template>
         </el-table-column>
@@ -130,7 +135,35 @@ const handleSelectionChange = (users: User.UserItem[]) => {
 }
 .user-opera{
   display: flex;
-  gap: 10px;
-  justify-content: center;
+  align-items: center;
+}
+.view-button, .delete-button {
+  border: none;
+  padding: 4px 8px;
+  border-radius: 3px;
+  cursor: pointer;
+  margin-right: 5px;
+  transition: all 0.3s;
+  font-family: serif;
+}
+
+.view-button {
+  background-color: #e6f0ff;
+  color: #1890ff;
+}
+
+.view-button:hover {
+  background-color: #1890ff;
+  color: white;
+}
+
+.delete-button {
+  background-color: #ffe6e6;
+  color: #ff4d4f;
+}
+
+.delete-button:hover {
+  background-color: #ff4d4f;
+  color: white;
 }
 </style>

src/stores/settingStore.ts

@@ -17,7 +17,7 @@ export const useSettingStore = defineStore('setting', () => {
     name: '用户管理',
     code: 'user',
   }, {
-    name: '日期/时间设置',
+    name: '日期设置',
     code: 'date',
   }, {
     name: '设备信息',

src/stores/systemStore.ts

@@ -18,7 +18,7 @@ export const useSystemStore = defineStore('system', () => {
     name: '中文',
     value: 'zh-cn',
   }, {
-    name: '英文',
+    name: 'English',
     value: 'en',
   }]
 

src/views/audit/index.vue

@@ -105,7 +105,7 @@ const handleSelectionChange = (users: Audit.AuditItem[]) => {
         />
       </div>
       <div class="audit-table">
-        <el-table :data="tableData" stripe style="width: 100%" @selection-change="handleSelectionChange">
+        <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
           <el-table-column type="selection" width="55" />
           <el-table-column prop="usrName" label="操作人" width="250" />
           <el-table-column prop="behaviorinfo" label="操作内容" />

src/views/home/index.vue

@@ -146,10 +146,10 @@ const nowLiquid = computed(() => {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     grid-template-rows: repeat(2, auto);
-    gap:1rem;
+    gap:.5rem;
     .card {
       text-align: center;
-      height: 40.5vh;
+      height: 41.5vh;
       width: 30.5vw;
       border: 1px solid rgb(225, 225, 225);
       position: relative;
@@ -188,9 +188,10 @@ const nowLiquid = computed(() => {
   }
 
   .home-right{
-    width: 34.5vw;
+    width: 36vw;
     background: $gradient-color;
     position: relative;
+    border-radius: 10px
   }
   .el-button {
     background-color: #2892F3 !important;

src/views/liquid/index.vue

@@ -183,7 +183,7 @@ const onStopDrainLiquid = async () => {
                 type="primary"
                 :button-text="`${liquidTotoal}g`"
                 bg-color="#2892F3"
-                border-radius="0 5px 5px 0"
+                border-radius="0  var(--el-border-radius-base) var(--el-border-radius-base)  0"
                 text-color="#ffffff"
                 height="4rem"
                 text-size="24px"

src/views/setting/index.vue

@@ -87,7 +87,6 @@ const selectItem = (menuCode: string) => {
     display: flex;
     align-items: center;
     border-radius: 10px;
-    font-family: serif;
     height: 5rem;
   }
   li.active {