From 3d5d523da73dc757edee225c8d666a94e396d1e9 Mon Sep 17 00:00:00 2001
From: Lufaneng <Lufaneng@foxmail.com>
Date: Fri, 1 Aug 2025 23:36:13 +0800
Subject: [PATCH] 1

---
 src/utils/rpc.js                              |   2 +-
 src/views/AutomaticMode/BaseKeyboardInput.vue | 255 ++++++++++++++++++
 src/views/AutomaticMode/index.vue             |   7 +-
 src/views/HandleControl/index.vue             |  50 ++--
 src/views/Monitoring/index.vue                |  49 ++--
 5 files changed, 317 insertions(+), 46 deletions(-)
 create mode 100644 src/views/AutomaticMode/BaseKeyboardInput.vue

diff --git a/src/utils/rpc.js b/src/utils/rpc.js
index 1fba472..294fc8a 100644
--- a/src/utils/rpc.js
+++ b/src/utils/rpc.js
@@ -17,7 +17,7 @@ const guid = () => {
 }
 const instance = axios.create({
   baseURL: '/',
-  timeout: 100000,
+  timeout: 10000,
   responseType: 'json',
 })
 
diff --git a/src/views/AutomaticMode/BaseKeyboardInput.vue b/src/views/AutomaticMode/BaseKeyboardInput.vue
new file mode 100644
index 0000000..382985b
--- /dev/null
+++ b/src/views/AutomaticMode/BaseKeyboardInput.vue
@@ -0,0 +1,255 @@
+<template>
+    <div ref="keyboardWrapRef" class="keyboard-wrap" @click="focusInput">
+        <el-input ref="inputRef" v-model="model" @keyup.enter="handleEnter" :disabled="disabled" v-bind="$attrs">
+            <!-- <template v-for="(item, index) in $slots" :key="index" #[index]>
+                <slot :name="index"></slot>
+            </template> -->
+            <template #suffix>
+                <span>%</span>
+            </template>
+        </el-input>
+    </div>
+    <el-popover v-if="visible" :visible="true" :virtual-ref="inputRef" virtual-triggering placement="bottom" :width="width" :show-arrow="false" :hide-after="0" popper-style="padding: 0px;color:#000" popper-class="keyboard-popper" @after-enter="keyboardInit">
+        <div class="simple-keyboard"></div>
+    </el-popover>
+</template>
+
+<script setup lang="ts">
+import Keyboard from 'simple-keyboard'
+import 'simple-keyboard/build/css/index.css'
+import layout from 'simple-keyboard-layouts/build/layouts/chinese.js'
+defineOptions({
+    inheritAttrs: false
+})
+const model = defineModel<any>()
+const emits = defineEmits(['onChange', 'enter', 'close', 'focus'])
+const props = defineProps({
+    layoutName: {
+        type: String,
+        default: 'default'
+    },
+    // 保留几位小数 layoutName为number时生效
+    precision: {
+        type: Number,
+        default: 10
+    },
+    // 获取焦点打开键盘
+    isOpen: {
+        type: Boolean,
+        default: true
+    },
+    disabled: Boolean
+})
+
+const keyboard = ref<any>(null)
+const keyboardWrapRef = ref(null)
+const visible = ref(false)
+const inputRef = ref()
+const width = ref(1000)
+if (props.layoutName == 'number') width.value = 300
+
+const displayDefault = ref({
+    '{bksp}': 'backspace',
+    '{lock}': 'caps',
+    '{enter}': 'enter',
+    '{tab}': 'tab',
+    '{shift}': 'shift',
+    '{change}': 'en',
+    '{space}': 'space',
+    '{clear}': 'clear',
+    '{close}': 'close',
+    '{arrowleft}': '←',
+    '{arrowright}': '→'
+})
+
+const open = () => {
+    if (visible.value) return
+    inputRef.value.focus()
+    emits('focus')
+    visible.value = true
+}
+
+const focusInput = () => {
+    if (props.disabled) return
+    if (visible.value) return
+    emits('focus')
+    if (props.isOpen) visible.value = true
+}
+
+const lang: any = {
+    'zh-cn': {
+        // 默认布局
+        default: [
+            '` 1 2 3 4 5 6 7 8 9 0 - = {bksp}',
+            '{tab} q w e r t y u i o p [ ] \\',
+            "{lock} a s d f g h j k l ; ' {enter}",
+            '{change} z x c v b n m , . / {clear}',
+            '{arrowleft} {arrowright} {space} {close}'
+        ],
+        // 大小写
+        shift: [
+            '~ ! @ # $ % ^ & * ( ) _ + {bksp}',
+            '{tab} Q W E R T Y U I O P { } |',
+            '{lock} A S D F G H J K L : " {enter}',
+            '{change} Z X C V B N M < > ? {clear}',
+            '{arrowleft} {arrowright} {space} {close}'
+        ]
+    },
+    th: {
+        default: [
+            '\u005F \u0E45 \u002F \u002D \u0E20 \u0E16 \u0E38 \u0E36 \u0E04 \u0E15 \u0E08 \u0E02 \u0E0A {bksp}',
+            '{tab} \u0E46 \u0E44 \u0E33 \u0E1E \u0E30 \u0E31 \u0E35 \u0E23 \u0E19 \u0E22 \u0E1A \u0E25 \u0E03',
+            '{lock} \u0E1F \u0E2B \u0E01 \u0E14 \u0E40 \u0E49 \u0E48 \u0E32 \u0E2A \u0E27 \u0E07 {enter}',
+            '{shift} \u0E1C \u0E1B \u0E41 \u0E2D \u0E34 \u0E37 \u0E17 \u0E21 \u0E43 \u0E1D {clear}',
+            '{arrowleft} {arrowright} {space} {close}'
+        ],
+        shift: [
+            '% + \u0E51 \u0E52 \u0E53 \u0E54 \u0E39 \u0E3F \u0E55 \u0E56 \u0E57 \u0E58 \u0E59 {bksp}',
+            '{tab} \u0E50 \u0022 \u0E0E \u0E11 \u0E18 \u0E4D \u0E4A \u0E13 \u0E2F \u0E0D \u0E10 \u002C \u0E05',
+            '{lock} \u0E24 \u0E06 \u0E0F \u0E42 \u0E0C \u0E47 \u0E4B \u0E29 \u0E28 \u0E0B \u002E {enter}',
+            '{shift} ( ) \u0E09 \u0E2E \u0E3A \u0E4C \u003F \u0E12 \u0E2C \u0E26 {clear}',
+            '{arrowleft} {arrowright} {space} {close}'
+        ]
+    }
+}
+
+const keyboardInit = () => {
+    let keyboardLayout = {
+        // 数字布局
+        number: ['7 8 9', '4 5 6', '1 2 3', '. 0 {bksp}', '{arrowleft} {arrowright} {clear} {close}'],
+        ...lang['zh-cn']
+    }
+
+    // if (lang[useSession('lang').value]) {
+    //     keyboardLayout = { ...lang[useSession('lang').value], ...keyboardLayout }
+    // }
+    keyboard.value = new Keyboard('simple-keyboard', {
+        onChange: onChange,
+        onKeyPress: onKeyPress,
+        onInit: onInit,
+        layout: keyboardLayout,
+        layoutName: props.layoutName,
+        display: displayDefault.value
+        // theme: 'hg-theme-default init-keyboard' // 添加自定义class处理清空逻辑
+    })
+}
+
+const onInit = (keyboard: any) => {
+    keyboard.setInput(String(model.value || ''))
+    keyboard.setCaretPosition(inputRef.value?.ref.selectionEnd)
+    document.addEventListener('click', handlePopClose)
+}
+const onChange = (input: any) => {
+    model.value = input
+    emits('onChange', input)
+}
+
+const onKeyPress = (button: any) => {
+    if (button === '{lock}') return handleLock()
+    if (button === '{change}') return handleChange()
+    if (button === '{clear}') return handleClear()
+    if (button === '{enter}') return handleEnter()
+    if (button === '{close}') return close()
+    if (button === '{arrowleft}') return handleArrow(0)
+    if (button === '{arrowright}') return handleArrow(1)
+}
+const handleLock = () => {
+    let currentLayout = keyboard.value.options.layoutName
+    let shiftToggle = currentLayout === 'default' ? 'shift' : 'default'
+    keyboard.value.setOptions({
+        layoutName: shiftToggle
+    })
+}
+const handleChange = () => {
+    let layoutCandidates = keyboard.value.options.layoutCandidates
+    // 切换中英文输入法
+    if (layoutCandidates != null && layoutCandidates != undefined) {
+        displayDefault.value['{change}'] = 'en'
+        keyboard.value.setOptions({
+            layoutName: 'default',
+            layoutCandidates: null,
+            display: displayDefault.value
+        })
+    } else {
+        displayDefault.value['{change}'] = 'cn'
+        keyboard.value.setOptions({
+            layoutName: 'default',
+            layoutCandidates: (layout as any)?.layoutCandidates,
+            display: displayDefault.value
+        })
+    }
+}
+const handleClear = () => {
+    keyboard.value.clearInput()
+    model.value = ''
+}
+const handleEnter = () => {
+    emits('enter')
+}
+const close = () => {
+    if (props.layoutName == 'number') {
+        // 处理精度
+        // model.value = model.value?.replace(new RegExp(`(\\d+)\\.(\\d{${String(props.precision)}}).*$`), '$1.$2').replace(/\.$/, '')
+        model.value = Number(model.value)
+    }
+    document.removeEventListener('click', handlePopClose)
+    visible.value = false
+    emits('close')
+}
+const handleArrow = (num: number) => {
+    // 处理左右箭头下标位置
+    const index = keyboard.value.getCaretPositionEnd()
+    if (num == 0 && index - 1 >= 0) {
+        keyboard.value.setCaretPosition(index - 1)
+    } else if (num == 1 && index + 1 <= (model.value?.length || 0)) {
+        keyboard.value.setCaretPosition(index + 1)
+    }
+}
+
+const handlePopClose = (e: any) => {
+    // 虚拟键盘区域 输入框区域 中文选项区域
+    if (
+        (e.target as Element).closest('.keyboard-popper') ||
+        (e.target as Element).closest('.keyboard-wrap') == keyboardWrapRef.value ||
+        /hg-candidate-box/.test(e.target.className)
+    ) {
+        const index = keyboard.value.getCaretPositionEnd()
+        inputRef.value.ref.selectionStart = inputRef.value.ref.selectionEnd = index
+        inputRef.value.focus()
+    } else {
+        close()
+    }
+}
+
+onUnmounted(() => {
+    // 某些情况下未触发动画关闭时销毁事件。此处销毁做后备处理
+    document.removeEventListener('click', handlePopClose)
+})
+
+defineExpose({ inputRef, visible, open, close, keyboardInit })
+</script>
+
+<style scoped>
+.keyboard-wrap {
+    width: 100%;
+}
+</style>
+
+<style>
+.hg-theme-default .hg-button.hg-button-arrowleft,
+.hg-theme-default .hg-button.hg-button-arrowright {
+    max-width: 70px;
+}
+
+.hg-theme-default .hg-button.hg-button-close {
+    max-width: 100px;
+}
+
+.hg-layout-number .hg-button.hg-button-close {
+    max-width: none;
+}
+
+.hg-layout-number .hg-button.hg-button-bksp {
+    max-width: 92px;
+}
+</style>
diff --git a/src/views/AutomaticMode/index.vue b/src/views/AutomaticMode/index.vue
index d8921e3..652d32d 100644
--- a/src/views/AutomaticMode/index.vue
+++ b/src/views/AutomaticMode/index.vue
@@ -212,11 +212,12 @@
                 <div class="lightBox">
                     <div class="item" v-for="(item, index) in currentTask.loops">
                         <div class="title">调光通道{{ index + 1 }}</div>
-                        <el-input-number style="width: 95%;" v-model="item.pwm" :min="0" :max="100">
+                        <BaseKeyboardInput style="width: 95%;" v-model="item.pwm" layout-name="number"></BaseKeyboardInput>
+                        <!-- <el-input-number style="width: 95%;" v-model="item.pwm" :min="0" :max="100">
                             <template #suffix>
                                 <span>%</span>
                             </template>
-                        </el-input-number>
+                        </el-input-number> -->
                     </div>
                 </div>
                 <div class="timeBox">
@@ -243,7 +244,9 @@ import { ref, onMounted, onUnmounted, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import RPC from '@/utils/rpc'
 import dayjs from 'dayjs'
+import BaseKeyboardInput from './BaseKeyboardInput.vue';
 const commit_uid = sessionStorage.getItem('central_control_comm_uid')
+// const commit_uid = '868656077692382'
 
 const switchValue = ref(true)
 const selectBoxValue = ref([])
diff --git a/src/views/HandleControl/index.vue b/src/views/HandleControl/index.vue
index 2b24edc..6193321 100644
--- a/src/views/HandleControl/index.vue
+++ b/src/views/HandleControl/index.vue
@@ -215,6 +215,7 @@ import RPC from '@/utils/rpc'
 import dayjs from 'dayjs'
 
 const commit_uid = sessionStorage.getItem('central_control_comm_uid')
+// const commit_uid = '868656077692382'
 
 const router = useRouter()
 const currentTime = ref('')
@@ -226,25 +227,7 @@ const selectedChannelName = ref(null)
 const week = ref('')
 const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
 
-RPC.post('/adl400/readPhaseData', { comm_uid: commit_uid }).then(res => {
-    powerPhases.value[0].voltage = res.aVoltage + 'V'
-    powerPhases.value[0].current = res.aElectricCurrent + 'A'
-    powerPhases.value[0].power = res.aPower + 'kW'
-    powerPhases.value[0].factor = res.aPowerFactor
 
-    powerPhases.value[1].voltage = res.bVoltage + 'V'
-    powerPhases.value[1].current = res.bElectricCurrent + 'A'
-    powerPhases.value[1].power = res.bPower + 'kW'
-    powerPhases.value[1].factor = res.bPowerFactor
-
-    powerPhases.value[2].voltage = res.cVoltage + 'V'
-    powerPhases.value[2].current = res.cElectricCurrent + 'A'
-    powerPhases.value[2].power = res.cPower + 'kW'
-    powerPhases.value[2].factor = res.cPowerFactor
-
-    energyParams.value.activeEnergy = res.activeEnergy + 'A'
-    energyParams.value.powerFactor = res.powerFactor
-})
 
 // 电力参数数据
 const powerPhases = ref([
@@ -273,7 +256,7 @@ const powerPhases = ref([
 
 const energyParams = ref({
     dcVoltage: '0.0V',
-    activeEnergy: '0kwh',
+    activeEnergy: '0kW·h',
     activePower: '0kW',
     powerFactor: '0'
 })
@@ -388,7 +371,6 @@ const getInfo = () => {
         isInitData.value = false
     })
 }
-getInfo()
 
 const oldInfo = ref('')
 watch(info, () => {
@@ -409,6 +391,34 @@ const sunsetTime = ref('')
 RPC.post('/m9z/getDeviceSunRiseTime', { comm_uid: commit_uid }).then(res => {
     sunriseTime.value = res.Sunrise ? dayjs(res.Sunrise).format('HH:mm:ss') : ''
     sunsetTime.value = res.Sunset ? dayjs(res.Sunset).format('HH:mm:ss') : ''
+}).finally(() => {
+    RPC.post('/m9z/getDeviceManualInfo', { comm_uid: commit_uid }).then(res => {
+        info.value = res
+        setTimeout(() => {
+            isSync.value = false
+        }, 1000);
+    }).finally(() => {
+        RPC.post('/adl400/readPhaseData', { comm_uid: commit_uid }).then(res => {
+            powerPhases.value[0].voltage = res.aVoltage + 'V'
+            powerPhases.value[0].current = res.aElectricCurrent + 'A'
+            powerPhases.value[0].power = res.aPower + 'kW'
+            powerPhases.value[0].factor = res.aPowerFactor
+
+            powerPhases.value[1].voltage = res.bVoltage + 'V'
+            powerPhases.value[1].current = res.bElectricCurrent + 'A'
+            powerPhases.value[1].power = res.bPower + 'kW'
+            powerPhases.value[1].factor = res.bPowerFactor
+
+            powerPhases.value[2].voltage = res.cVoltage + 'V'
+            powerPhases.value[2].current = res.cElectricCurrent + 'A'
+            powerPhases.value[2].power = res.cPower + 'kW'
+            powerPhases.value[2].factor = res.cPowerFactor
+
+            energyParams.value.activeEnergy = res.activeEnergy + 'kW·h'
+            energyParams.value.activePower = res.activePower + "kW"
+            energyParams.value.powerFactor = res.powerFactor
+        })
+    })
 })
 
 // 更新时间
diff --git a/src/views/Monitoring/index.vue b/src/views/Monitoring/index.vue
index b16f8e3..ff37cb2 100644
--- a/src/views/Monitoring/index.vue
+++ b/src/views/Monitoring/index.vue
@@ -79,7 +79,7 @@
                     <div class="circuit-section">
                         <!-- 上排回路 -->
                         <div class="circuit-row">
-                            <div v-for="(circuit, index) in info.Loops.slice(0, 5)" :key="circuit.name" class="circuit-item">
+                            <div v-for="(circuit, index) in info?.Loops?.slice(0, 5)" :key="circuit.name" class="circuit-item">
                                 <div class="circuit-status" :class="{ active: circuit.is_open }">
                                     回路{{ index + 1 }}：{{ circuit.is_open ? '打开' : '关闭' }}
                                 </div>
@@ -100,7 +100,7 @@
 
                         <!-- 下排回路 -->
                         <div class="circuit-row">
-                            <div v-for="(circuit, index) in info.Loops.slice(5, 10)" :key="circuit.name" class="circuit-item">
+                            <div v-for="(circuit, index) in info?.Loops?.slice(5, 10)" :key="circuit.name" class="circuit-item">
                                 <div class="circuit-status" :class="{ active: circuit.is_open }">
                                     回路{{ index + 6 }}：{{ circuit.is_open ? '打开' : '关闭' }}
                                 </div>
@@ -122,7 +122,7 @@
                     <div class="dimming-section">
                         <!-- 上排调光通道 -->
                         <div class="dimming-row">
-                            <div v-for="(channel, index) in info.Loops.slice(0, 5)" :key="channel.name" class="dimming-item">
+                            <div v-for="(channel, index) in info?.Loops?.slice(0, 5)" :key="channel.name" class="dimming-item">
                                 <div class="channel-label">调光通道{{ index + 1 }}</div>
                                 <div class="brightness-display" :class="{ active: channel.pwm > 0 }">
                                     {{ channel.pwm }}%
@@ -132,7 +132,7 @@
 
                         <!-- 下排调光通道 -->
                         <div class="dimming-row">
-                            <div v-for="(channel, index) in info.Loops.slice(5, 10)" :key="channel.name" class="dimming-item">
+                            <div v-for="(channel, index) in info?.Loops?.slice(5, 10)" :key="channel.name" class="dimming-item">
                                 <div class="channel-label">调光通道{{ index + 6 }}</div>
                                 <div class="brightness-display" :class="{ active: channel.pwm > 0 }">
                                     {{ channel.pwm }}%
@@ -204,6 +204,7 @@ import RPC from '@/utils/rpc'
 import dayjs from 'dayjs'
 import Linechart from '@/components/Linechart.vue';
 
+// const commit_uid = '868656077692382'
 const commit_uid = sessionStorage.getItem('central_control_comm_uid')
 
 const router = useRouter()
@@ -377,28 +378,30 @@ const getInfo = () => {
     // RPC.post('/m9z/getDeviceManualInfo', { comm_uid: commit_uid }).then(res => {
     //     info.value = res
     // })
-    RPC.post('/adl400/readPhaseData', { comm_uid: commit_uid }).then(res => {
-        powerPhases.value[0].voltage = res.aVoltage + 'V'
-        powerPhases.value[0].current = res.aElectricCurrent + 'A'
-        powerPhases.value[0].power = res.aPower + 'kW'
-        powerPhases.value[0].factor = res.aPowerFactor
-
-        powerPhases.value[1].voltage = res.bVoltage + 'V'
-        powerPhases.value[1].current = res.bElectricCurrent + 'A'
-        powerPhases.value[1].power = res.bPower + 'kW'
-        powerPhases.value[1].factor = res.bPowerFactor
-
-        powerPhases.value[2].voltage = res.cVoltage + 'V'
-        powerPhases.value[2].current = res.cElectricCurrent + 'A'
-        powerPhases.value[2].power = res.cPower + 'kW'
-        powerPhases.value[2].factor = res.cPowerFactor
-
-        energyParams.value.activeEnergy = res.activeEnergy + 'A'
-        energyParams.value.powerFactor = res.powerFactor
-    })
     RPC.post('/m9z/getDeviceStatus2', { comm_uid: commit_uid }).then((res) => {
         // 直流电流、电源、功率
         info.value = res
+    }).finally(() => {
+        RPC.post('/adl400/readPhaseData', { comm_uid: commit_uid }).then(res => {
+            powerPhases.value[0].voltage = res.aVoltage + 'V'
+            powerPhases.value[0].current = res.aElectricCurrent + 'A'
+            powerPhases.value[0].power = res.aPower + 'kW'
+            powerPhases.value[0].factor = res.aPowerFactor
+
+            powerPhases.value[1].voltage = res.bVoltage + 'V'
+            powerPhases.value[1].current = res.bElectricCurrent + 'A'
+            powerPhases.value[1].power = res.bPower + 'kW'
+            powerPhases.value[1].factor = res.bPowerFactor
+
+            powerPhases.value[2].voltage = res.cVoltage + 'V'
+            powerPhases.value[2].current = res.cElectricCurrent + 'A'
+            powerPhases.value[2].power = res.cPower + 'kW'
+            powerPhases.value[2].factor = res.cPowerFactor
+
+            energyParams.value.activeEnergy = res.activeEnergy + 'kW·h'
+            energyParams.value.activePower = res.activePower + 'kW'
+            energyParams.value.powerFactor = res.powerFactor
+        })
     })
 
     // RPC.post('/m9z/getDeviceSunRiseTime', { comm_uid: commit_uid }).then(res => {