From 3ccaf621ceef389c4cd9ecead5b71d232ef5e60b Mon Sep 17 00:00:00 2001
From: guoapeng <GuoAnPeng@163.com>
Date: Thu, 31 Jul 2025 21:02:05 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E7=94=B5=E6=B1=A0=E7=94=B5=E9=87=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/power.svg |  1 +
 src/layouts/default.vue     | 44 +++++++++++++++++++++++++++++++++++++++++++-
 src/stores/systemStore.ts   | 10 ++++++++--
 src/types/system.d.ts       |  5 +++++
 4 files changed, 57 insertions(+), 3 deletions(-)
 create mode 100644 src/assets/images/power.svg

diff --git a/src/assets/images/power.svg b/src/assets/images/power.svg
new file mode 100644
index 0000000..24beb91
--- /dev/null
+++ b/src/assets/images/power.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1749353079688" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7537" width="48" height="48" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M467.301105 179.2821l-190.958547 373.403017h229.636774l-103.020311 291.911153 407.824207-452.827176h-255.422259l124.427129-212.486994H467.301105z" fill="#fff" p-id="7538"></path></svg>
\ No newline at end of file
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index e57ca6b..5ba3dec 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -3,6 +3,7 @@ import { getStatus, sync } from 'apis/system'
 import autoIcon from 'assets/images/auto.svg'
 import logoutIcon from 'assets/images/logout.svg'
 import manualIcon from 'assets/images/manual.svg'
+import powerIcon from 'assets/images/power.svg'
 import FtDatetime from 'components/common/FTDatetime/index.vue'
 import Check from 'components/system/Check/index.vue'
 import Delay from 'components/system/Delay/index.vue'
@@ -163,6 +164,15 @@ const delayVisible = ref(false)
 const changeDelay = () => {
   delayVisible.value = true
 }
+
+const remoteControlState = computed(() => {
+  return systemStore.systemStatus.remoteControlState
+  // return {
+  //   connected: true, // 链接状态
+  //   batteryLevel: 100, // 当前电量 %
+  //   charging: true, // 是否正在充电
+  // }
+})
 </script>
 
 <template lang="pug">
@@ -180,6 +190,11 @@ const changeDelay = () => {
         )
           | {{ item?.meta?.title }}
       div(class="header-right")
+        div.power-box(v-if="remoteControlState.connected")
+          div.bg-box(:style="`width: ${remoteControlState.batteryLevel}%; background: ${remoteControlState.batteryLevel === 100 ? '#1dbb1d' : remoteControlState.batteryLevel >20 ? '#1989FA' : 'red'} `")
+          span.power-num {{remoteControlState.batteryLevel}}
+          img(:src="powerIcon" alt="" v-show="remoteControlState.charging")
+
         el-dropdown(class="wifi-dropdown" trigger="click")
           div(class="wifi-icon")
             img(v-if="isClose" src="../assets/images/wifi.svg" alt="")
@@ -243,6 +258,31 @@ const changeDelay = () => {
 </template>
 
 <style scoped lang="stylus">
+.power-box
+  height 20px
+  width 45px
+  background-color rgba(0,0,0,0.1)
+  border-radius 5px
+  position relative
+  display flex
+  align-items center
+  justify-content center
+  padding 0 2px
+  color #fff
+  overflow hidden
+  .bg-box
+    height 100%
+    background-color green
+    position absolute
+    top 0
+    left 0
+  .power-num
+    z-index 10
+  img
+    z-index: 10;
+    height 80%
+    margin-top 1px
+    margin-left 2px
 .main
   box-sizing border-box
   height 100%
@@ -275,13 +315,15 @@ const changeDelay = () => {
         transform rotate(90deg)
         transition all 0.3s
     .menu-box
-      width 100%
+      width 70%
       display flex
       justify-content center
     .header-right
       display flex
       align-items center
+      justify-content flex-end
       height 100%
+      width 200px
       .wifi-dropdown
         height 100%
         .wifi-icon
diff --git a/src/stores/systemStore.ts b/src/stores/systemStore.ts
index 048a7f6..ce7f471 100644
--- a/src/stores/systemStore.ts
+++ b/src/stores/systemStore.ts
@@ -12,18 +12,24 @@ export const useSystemStore = defineStore('system', {
           channelCode: 'CHANNEL_1', // CHANNEL_1,CHANNEL_2,CHANNEL_3,CHANNEL_4,
           stateCode: 'IDLE', // ADD,PRE,DRAIN,IDLE,BAD,
           pre: false, // 是否已预充
-          remainingVolume: 5000, // 剩余容量（单位：mL）如果没有显示未领取
           solutionId: 1, // 溶液id
           solutionName: '盐酸', // 溶液名称 前端展示使用这个名称即可
-          concentration: '15%', // 溶液浓度 前端展示使用这个浓度即可
+          concentration: '15', // 单位% 溶液浓度 前端展示使用这个浓度即可
           selected: false, // 是否选中
           targetVolume: 10, // 目标加液量（单位：mL）
+          currentVolume: 10, // 当前溶液量 单位：mL）
+          receivedVolume: 10, // 领取溶液量（单位：mL）
         },
       ],
       mode: 'AUTO', // 加液模式 AUTO, CLICK
       delay: 0, // 加液间隔
       virtual: false, // 当前是否是虚拟模式
       emergencyStop: false, // 是否是急停状态
+      remoteControlState: { // 遥控手柄状态
+        connected: false, // 链接状态
+        batteryLevel: 0, // 当前电量 %
+        charging: false, // 是否正在充电
+      },
       currentUser: { // 当前登录用户
       },
     },
diff --git a/src/types/system.d.ts b/src/types/system.d.ts
index cea79eb..715898b 100644
--- a/src/types/system.d.ts
+++ b/src/types/system.d.ts
@@ -38,6 +38,11 @@ declare namespace System {
     virtual: boolean // 当前是否是虚拟模式
     emergencyStop: boolean // 是否是急停状态
     currentUser: User.User
+    remoteControlState: {
+      connected: boolean // 链接状态
+      batteryLevel: number // 当前电量 %
+      charging: boolean // 是否正在充电
+    }
   }
   interface Tray {
     uuid: string