优化样式

src/assets/styles/variable.scss

@@ -4,4 +4,4 @@ $danger-color: #DF1515;
 $warn-color: #EE8223;
 $info-color: #909399;
 $gradient-color: linear-gradient(185deg, rgb(175 216 255) -90%, #fff 24%);
-$main-container-height: calc(100vh - 14vh)
+$main-container-height: calc(100vh - 17vh)

src/components/common/DatePicker/index.vue

@@ -22,7 +22,9 @@ const props = defineProps({
 
 const emits = defineEmits(['update:modelValue', 'change'])
 const dateText = ref()
-const hoursOptions = ref([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23])
+const hoursOptions = ref(Array.from({ length: 24 }, (_, i) => i))
+const minuteOptions = ref(Array.from({ length: 60 }, (_, i) => i))
+const secondOptions = ref(Array.from({ length: 60 }, (_, i) => i))
 // 初始化日期时间
 const selectedDate = ref<Date | null>(null)
 const currentYear = ref(0)
@@ -36,7 +38,6 @@ const selectedSecond = ref('00')
 
 // 格式化显示值
 const displayValue = () => {
-  console.log('-----------------')
   if (!selectedDate.value) {
     return ''
   }
@@ -183,7 +184,6 @@ const updateTime = () => {
 
 // 确认选择
 const confirmSelection = () => {
-  console.log('selectedDate.value---', selectedDate.value)
   if (selectedDate.value) {
     const dateValue = formatDate(selectedDate.value, props.format)
     emits('update:modelValue', dateValue)
@@ -351,13 +351,13 @@ onUnmounted(() => {
           </el-select>
           <span class="time-separator">:</span>
           <el-select v-model="selectedMinute" @change="updateTime" class="time-select">
-            <el-option v-for="i in 60" :key="i" :value="i.toString().padStart(2, '0')" style="font-size: 20px;line-height: 2px;height: 5rem;display: flex; align-items: center;">
+            <el-option v-for="i in minuteOptions" :key="i" :value="i.toString().padStart(2, '0')" style="font-size: 20px;line-height: 2px;height: 5rem;display: flex; align-items: center;">
               {{ i.toString().padStart(2, '0') }}
             </el-option>
           </el-select>
           <span class="time-separator">:</span>
           <el-select v-model="selectedSecond" @change="updateTime" class="time-select">
-            <el-option v-for="i in 60" :key="i" :value="i.toString().padStart(2, '0')"  style="font-size: 20px;line-height: 2px;height: 5rem;display: flex; align-items: center;">
+            <el-option v-for="i in secondOptions" :key="i" :value="i.toString().padStart(2, '0')"  style="font-size: 20px;line-height: 2px;height: 5rem;display: flex; align-items: center;">
               {{ i.toString().padStart(2, '0') }}
             </el-option>
           </el-select>
@@ -516,7 +516,7 @@ $fontSize: 1.5rem;
     margin-right: 4px;
     /* 最大高度限制，溢出滚动 */
     max-height: 3rem;
-    width: 6rem;
+    width: 8rem;
     border: none;
   }
 }
@@ -530,6 +530,7 @@ select option {
   margin-right: 12px;
   font-size: $fontSize;
   color: #334155;
+  width: 5rem;
 }
 
 .select-option{

src/components/common/SoftKeyboard/index.vue

@@ -167,8 +167,8 @@ const handleTouchEnd = () => {
       :style="{
         transform: `translate(${x}px, ${y}px)`,
         transition: isDragging ? 'none' : 'transform 0.3s ease',
-        width: keyboardType === 'number' ? '50vw' : '',
-        height: keyboardType === 'number' ? '45vh' : '50vh',
+        width: keyboardType === 'number' ? '50vw' : '66vw',
+        height: keyboardType === 'number' ? '46vh' : '46vh',
       }"
     >
       <div>
@@ -195,7 +195,7 @@ const handleTouchEnd = () => {
               'key-number': keyboardType === 'number',
               'key-text': key !== ' ' && keyboardType === 'text',
             }"
-            :style="keyboardType === 'number' ? 'height: 10vh' : 'height:4rem'"
+            :style="keyboardType === 'number' ? 'height: 10vh' : 'height:3rem;'"
             @click="(e) => {
               e.stopPropagation()
               handleKeyPress(key)
@@ -247,12 +247,16 @@ const handleTouchEnd = () => {
   .pinyin-container{
     display: flex;
     width: 80%;
-    height: 4rem;
+    height: 3rem;
+    padding-left: 2rem;
     .pinyin-cn{
+      color: #1890ff;
+      padding-left: 1rem;
       display: flex;
       width: 1rem;
       position: relative;
       gap:5px;
+      font-family: fangsong;
       .cn-name{
         font-size: 2.5rem;
       }

src/components/formula/FormulaConfig.vue

@@ -188,7 +188,6 @@ const handleSubmit = () => {
  * 根据是否有formula_id决定是添加新配方还是编辑已有配方
  */
 const onSaveFormula = () => {
-  console.log('formData.value.formula_id---', formData.value.formula_id)
   if (formData.value.formula_id) {
     const formulaForm: Record<string, any> = convertValuesToString(formData.value, 'name')
     onEditFormula(formulaForm.formula_id, formulaForm as Formula.FormulaItem)
@@ -269,7 +268,8 @@ const onEditFormula = (formula_id: string, formulaForm: Formula.FormulaItem) =>
   syncSendCmd(editParams).then(() => {
     FtMessage.success('操作成功')
     formulaStore.initFormulaList()
-    formData.value = formulaForm
+    // formData.value = formulaForm
+    formulaStore.updateSelectedFormulaData(formulaForm)
   })
 }
 

src/components/home/HomeLogLevel.vue

@@ -70,7 +70,7 @@ $input-height: 3rem;
   font-family: Source Han Sans;
   font-size: 24px;
   .input{
-    width: 15vw;
+    width: 14vw;
     height: $input-height
   }
   .input-log{

src/components/home/HomeOperation.vue

@@ -26,7 +26,7 @@ const systemStore = useSystemStore()
 const curStateRemainTimeS = ref<string>('') // 当前状态剩余时间（字符串格式）
 const disinfectionState = ref(homeStore.disinfectionState) // 消毒状态
 const btnStyle = {
-  width: '27vw',
+  width: '25vw',
   height: '7vh',
   textSize: '24px',
   borderRadius: '12px',

src/components/home/HomeSetting.vue

@@ -4,8 +4,6 @@ import { useFormulaStore } from '@/stores/formulaStore'
 import { useHomeStore } from '@/stores/homeStore'
 import { sendCmd, syncSendCmd } from 'apis/system'
 // import homeChart from 'assets/images/home/home-chart.svg'
-import homeRunSvg from 'assets/images/home/home-run.svg'
-import homeSettingSvg from 'assets/images/home/home-setting.svg'
 import BtButton from 'components/common/BTButton/index.vue'
 import CascadingSelectModal from 'components/common/CascadingSelectModal/index.vue'
 import Config from 'components/home/Config.vue'
@@ -225,11 +223,7 @@ const onClose = () => {
           text-color="#1989fa"
           height="3rem"
           @click="onSetPressure"
-        >
-          <template #icon>
-            <el-icon><Sort /></el-icon>
-          </template>
-        </BtButton>
+        />
       </div>
       <div class="home-opt-ml">
         <BtButton
@@ -241,11 +235,7 @@ const onClose = () => {
           text-color="#1989fa"
           :disabled="deviceState"
           @click="onShowChart"
-        >
-          <template #icon>
-            <el-icon><Picture /></el-icon>
-          </template>
-        </BtButton>
+        />
       </div>
       <div class="home-opt-ml">
         <BtButton
@@ -257,11 +247,7 @@ const onClose = () => {
           text-color="#1989fa"
           height="3rem"
           @click="onDisinfectConfig"
-        >
-          <template #icon>
-            <img :src="homeSettingSvg" width="12" style="margin-right: 5px" alt="">
-          </template>
-        </BtButton>
+        />
         <BtButton
           v-else
           button-text="运行参数"
@@ -271,11 +257,7 @@ const onClose = () => {
           text-color="#1989fa"
           height="3rem"
           @click="onDisinfectConfig"
-        >
-          <template #icon>
-            <img :src="homeRunSvg" width="15" alt="">
-          </template>
-        </BtButton>
+        />
       </div>
     </div>
   </div>
@@ -327,6 +309,7 @@ const onClose = () => {
   bottom: 0;
   margin: 0.5rem;
   gap: 5px;
+  width: 100%;
   .home-opt-flex{
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;

src/components/home/config.vue

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

src/components/seal/DashboardChart.vue

@@ -75,6 +75,6 @@ onUnmounted(() => {
 <style>
   canvas{
     width: 60vw !important;
-    height: 60vh !important;
+    height: 70vh !important;
   }
 </style>

src/components/setting/History.vue

@@ -115,7 +115,7 @@ const onClose = () => {
       <el-table :data="tableData" stripe style="width: 100%" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" />
         <el-table-column prop="name" label="消毒日期" />
-        <el-table-column prop="detail" label="操作" width="60">
+        <el-table-column prop="detail" label="操作" width="100">
           <template #default="scoped">
             <el-link type="primary" @click="showDetail(scoped.row)">
               查看

src/components/setting/SystemDate.vue

@@ -4,7 +4,6 @@ import DatePicker from '@/components/common/DatePicker/index.vue'
 import { FtMessage } from '@/libs/message'
 
 const onChangeDate = async (value: string) => {
-  console.log('value---', value)
   if (value) {
     const splitDate = value.split(' ') // 先以空格分隔
     const YMD = splitDate[0].split('-')

src/components/setting/User.vue

@@ -83,7 +83,7 @@ const handleSelectionChange = (users: User.UserItem[]) => {
       <el-table :data="tableData" stripe style="width: 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">
+        <el-table-column prop="detail" label="操作" width="150">
           <template #default="scoped">
             <el-link type="primary" @click="updatePwd(scoped.row)">
               修改密码

src/layouts/default.vue

@@ -337,7 +337,7 @@ const toggleLanguage = () => {
   }
 }
 .el-main {
-  padding: 0 15px;
+  padding: 0 1px;
   height: 100%;
   position: relative;
 }
@@ -394,13 +394,13 @@ const toggleLanguage = () => {
   }
 
   .ip-info{
-    font-size: 1.5rem;
-    width: 20vw;
+    font-size: 1.3rem;
+    width: 22vw;
     padding-left: 1.3vw;
   }
   .alarm-info {
     font-size: 1.5rem;
-    width: 55vw;
+    width: 53vw;
     padding-left: 1.3vw;
     background: #F5F5F5;
     height: 5vh;
@@ -415,10 +415,11 @@ const toggleLanguage = () => {
     height: 100%;
     display: flex;
     align-items: center;
+    justify-content: end;
     border-radius: 5px;
-    margin-left: 3vw;
     padding: 1vw;
-    font-size: 1.5rem;
+    font-size: 1.3rem;
+    width: 22.5vw;
   }
 }
 .aside-item {

src/views/audit/index.vue

@@ -107,7 +107,7 @@ const handleSelectionChange = (users: Audit.AuditItem[]) => {
           <el-table-column type="selection" width="55" />
           <el-table-column prop="usrName" label="操作人" width="150" />
           <el-table-column prop="behaviorinfo" label="操作内容" />
-          <el-table-column prop="date" label="操作时间" width="150" />
+          <el-table-column prop="date" label="操作时间" width="250" />
         </el-table>
         <div class="audit-pagination">
           <el-pagination layout="prev, pager, next" :total="totle" @current-change="handleCurrentChange" />
@@ -127,7 +127,7 @@ const handleSelectionChange = (users: Audit.AuditItem[]) => {
     margin: 2vw;
   }
   .audit-pagination{
-    bottom: 2rem;
+    bottom: 1rem;
     position: absolute;
     right: 2rem;
   }

src/views/formula/index.vue

@@ -25,6 +25,7 @@ const onAddFormula = () => {
           <bt-button
             type="primary"
             button-text="新增配方"
+            text-size="1.5rem"
             class="formula-add-btn"
             @click="onAddFormula"
           >
@@ -62,7 +63,7 @@ const onAddFormula = () => {
     .formula-add-btn{
       display: flex;
       align-items: center;
-      height: 3.5rem;
+      height: 3rem;
       border-radius: 5px;
     }
     .formula-list{

src/views/home/index.vue

@@ -132,7 +132,7 @@ const nowLiquid = computed(() => {
   .home-grid-container {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    gap: 1.5rem;
+    gap: 0.5rem;
   }
   .home-merged-cell {
     grid-column: 1 / 2;
@@ -145,7 +145,7 @@ const nowLiquid = computed(() => {
     gap:1.5rem;
     .card {
       text-align: center;
-      height: 41.5vh;
+      height: 40.5vh;
       width: 30.5vw;
       border: 1px solid rgb(225, 225, 225);
       position: relative;
@@ -184,7 +184,7 @@ const nowLiquid = computed(() => {
   }
 
   .home-right{
-    width: 31vw;
+    width: 34.5vw;
     background: $gradient-color;
     position: relative;
   }

src/views/liquid/index.vue

@@ -32,7 +32,7 @@ const disinfectionState = ref(homeStore.disinfectionState)
 const sealInfo = ref(sealStore.sealInfo)
 const loading = ref(false)
 const btnStyle = {
-  width: '27vw',
+  width: '25vw',
   height: '7vh',
   textSize: '24px',
   borderRadius: '12px',
@@ -298,7 +298,7 @@ const onStopDrainLiquid = async () => {
     .liquid-surplus-title{
       height: 10vh;
       display: flex;
-      padding-left: 2rem;
+      padding-left: 2.5rem;
       align-items: center;
       font-size: 24px;
       font-weight: 400;
@@ -310,8 +310,8 @@ const onStopDrainLiquid = async () => {
     }
     .liquid-input{
       display: flex;
-      padding-left: 2rem;
       align-items: center;
+      justify-content: center;
       .input{
         width: 25vw;
       }
@@ -323,7 +323,7 @@ const onStopDrainLiquid = async () => {
       margin-top: 5vh;
     }
     .liquid-add-btn{
-      width: 27vw;
+      width: 25vw;
       height: 8vh;
       border-radius: 12px;
       color: #FFFFFF;

src/views/seal/index.vue

@@ -278,7 +278,8 @@ const stopDisabled = computed(() => {
 .seal-opt{
   display: flex;
   gap: 2rem;
-  margin-left: 8rem;
+  margin-left: 9rem;
+  margin-top: -2rem;
   .seal-status{
     display: flex;
     justify-content: center;
@@ -349,10 +350,10 @@ const stopDisabled = computed(() => {
   .seal-right-btn{
     height: 30vh;
     grid-row: 2 / 4;
-    margin-top: -2rem;
+    margin-top: -4rem;
     .seal-input{
       padding-left: 2rem;
-      height: 10rem;
+      height: 8rem;
       font-size: 2.143vw;
       font-weight: 400;
       .inflation-time{
@@ -366,7 +367,7 @@ const stopDisabled = computed(() => {
       }
     }
     .seal-add-btn{
-      width: 24vw;
+      width: 25vw;
       height: 8vh;
       border-radius: 12px;
       color: #FFFFFF;