mac地址,推送调整

This commit is contained in:
sjl
2025-10-20 09:42:01 +08:00
parent 448d450936
commit 177e50de75
3 changed files with 117 additions and 186 deletions

View File

@@ -1,25 +1,22 @@
<template>
<div class="mac-address-input" :class="{ disabled: disabled }">
<template v-for="n in 6" :key="n">
<el-input
ref="inputRefs"
v-model="segments[n - 1]"
ref="inputRef"
v-model="macValue"
type="text"
maxlength="2"
maxlength="17"
:disabled="disabled"
@input="handleInput(n - 1)"
@keydown="handleKeydown(n - 1,$event)"
@focus="handleFocus(n - 1)"
@input="handleInput"
@keydown="handleKeydown"
@focus="handleFocus"
@blur="handleBlur"
@paste="handlePaste(n - 1, $event)"
@paste="handlePaste"
/>
<span v-if="n < 6" class="separator">:</span>
</template>
</div>
</template>
<script setup lang="ts">
import { ref, watch, nextTick } from 'vue'
import { ref, watch } from 'vue'
interface Props {
modelValue?: string
@@ -37,117 +34,85 @@ const props = withDefaults(defineProps<Props>(), {
const emit = defineEmits<Emits>()
// 创建6个输入框的引用
const inputRefs = ref<InstanceType<typeof import('element-plus').ElInput>[]>([])
// 创建个输入框的引用
const inputRef = ref<InstanceType<typeof import('element-plus').ElInput> | null>(null)
// MAC地址的6个段
const segments = ref<string[]>(Array(6).fill(''))
// MAC地址
const macValue = ref<string>('')
// 解析传入的MAC地址
const parseMacAddress = (mac: string): string[] => {
if (!mac) return Array(6).fill('')
const parseMacAddress = (mac: string): string => {
if (!mac) return ''
// 移除非十六进制字符并转为大写
const cleanMac = mac.replace(/[^0-9a-fA-F]/g, '').toUpperCase()
// 分割成6段每段2个字符
const result: string[] = []
for (let i = 0; i < 6; i++) {
result.push(cleanMac.substr(i * 2, 2))
// 按每2个字符分割并用冒号连接
let result = ''
for (let i = 0; i < cleanMac.length; i += 2) {
if (i > 0) result += ':'
result += cleanMac.substr(i, 2)
}
return result
return result.substring(0, 17) // 最多17个字符 (12个数字+5个冒号)
}
// 格式化MAC地址
const formatSegment = (value: string): string => {
// 只保留前两个十六进制字符并转为大写
return value.replace(/[^0-9a-fA-F]/g, '').toUpperCase().substr(0, 2)
// 格式化MAC地址 - 改进版
const formatMac = (value: string): string => {
// 移除所有冒号
const cleanValue = value.replace(/:/g, '')
// 只保留十六进制字符并转为大写
const hexOnly = cleanValue.replace(/[^0-9a-fA-F]/g, '').toUpperCase()
// 按每两个字符添加冒号最多6段
let formatted = ''
for (let i = 0; i < Math.min(hexOnly.length, 12); i += 2) {
if (i > 0) formatted += ':'
formatted += hexOnly.substr(i, 2)
}
return formatted
}
// 当前聚焦的输入框索引
const focusedIndex = ref<number | null>(null)
// 处理输入事件
const handleInput = (index: number) => {
// 格式化输入值
const formatted = formatSegment(segments.value[index])
segments.value[index] = formatted
// 如果当前段已满2个字符且不是最后一段自动跳转到下一个输入框
if (formatted.length === 2 && index < 5) {
// 获取下一个输入框的DOM元素
setTimeout(() => {
const nextInput = inputRefs.value[index + 1]
if (nextInput) {
const inputEl = nextInput.$el.querySelector('input')
if (inputEl) {
inputEl.focus()
inputEl.select()
}
}
}, 0)
}
// 更新v-model值
updateModelValue()
const handleInput = (value: string) => {
const formatted = formatMac(value)
macValue.value = formatted
// 发出不带冒号的纯净值
emit('update:modelValue', formatted.replace(/:/g, ''))
}
// 处理键盘事件
const handleKeydown = (index: number, event: KeyboardEvent) => {
const handleKeydown = (event: KeyboardEvent) => {
const target = event.target as HTMLInputElement
// 处理退格键
if (event.key === 'Backspace' && target.selectionStart === 0 && target.selectionEnd === 0) {
if (segments.value[index] === '' && index > 0) {
// 如果当前段为空,跳转到前一个输入框
if (event.key === 'Backspace') {
// 处理在冒号前删除的情况
const cursorPos = target.selectionStart || 0
if (cursorPos > 0 && macValue.value[cursorPos - 1] === ':' &&
target.selectionStart === target.selectionEnd) {
event.preventDefault()
const prevInput = inputRefs.value[index - 1]
if (prevInput) {
const inputEl = prevInput.$el.querySelector('input')
if (inputEl) {
inputEl.focus()
// 将光标移到末尾
// 删除冒号前的两个字符
const newValue = macValue.value.substring(0, cursorPos - 3) +
macValue.value.substring(cursorPos)
macValue.value = newValue
// 设置光标位置
setTimeout(() => {
inputEl.selectionStart = inputEl.value.length
inputEl.selectionEnd = inputEl.value.length
if (target.setSelectionRange) {
target.setSelectionRange(cursorPos - 3, cursorPos - 3)
}
}, 0)
}
}
}
}
// 处理左箭头键
if (event.key === 'ArrowLeft' && target.selectionStart === 0) {
if (index > 0) {
event.preventDefault()
const prevInput = inputRefs.value[index - 1]
if (prevInput) {
const inputEl = prevInput.$el.querySelector('input')
if (inputEl) {
inputEl.focus()
}
}
}
}
// 处理右箭头键和制表符
if ((event.key === 'ArrowRight' && target.selectionStart === target.value.length) || event.key === 'Tab') {
if (index < 5) {
event.preventDefault()
const nextInput = inputRefs.value[index + 1]
if (nextInput) {
const inputEl = nextInput.$el.querySelector('input')
if (inputEl) {
inputEl.focus()
}
}
emit('update:modelValue', newValue.replace(/:/g, ''))
}
}
}
// 处理焦点事件
const handleFocus = (index: number) => {
focusedIndex.value = index
const handleFocus = () => {
focusedIndex.value = 0
}
// 处理失焦事件
@@ -156,56 +121,26 @@ const handleBlur = () => {
}
// 处理粘贴事件
const handlePaste = (index: number, event: ClipboardEvent) => {
const handlePaste = (event: ClipboardEvent) => {
event.preventDefault()
const pastedText = event.clipboardData?.getData('text') || ''
// 清理粘贴的文本
const cleanText = parseMacAddress(pastedText)
// 填充各段
for (let i = 0; i < 6; i++) {
segments.value[i] = cleanText[i] || ''
}
// 更新v-model值
updateModelValue()
// 聚焦到最后一个非空段或最后一个段
setTimeout(() => {
let focusIndex = 5
for (let i = 5; i >= 0; i--) {
if (segments.value[i] !== '') {
focusIndex = i
break
}
}
const inputToFocus = inputRefs.value[focusIndex]
if (inputToFocus) {
const inputEl = inputToFocus.$el.querySelector('input')
if (inputEl) {
inputEl.focus()
inputEl.select()
}
}
}, 0)
}
// 更新v-model值
const updateModelValue = () => {
// 过滤掉空段,然后用冒号连接
const nonEmptySegments = segments.value.filter(s => s !== '')
const mac = nonEmptySegments.join(':')
emit('update:modelValue', mac)
const cleanPastedText = pastedText.replace(/[^0-9a-fA-F]/g, '').toUpperCase()
const formatted = formatMac(cleanPastedText)
macValue.value = formatted
emit('update:modelValue', formatted.replace(/:/g, ''))
}
// 监听modelValue变化
watch(
() => props.modelValue,
(newVal) => {
if (newVal !== segments.value.filter(s => s !== '').join(':')) {
segments.value = parseMacAddress(newVal || '')
const cleanNewVal = (newVal || '').replace(/[^0-9a-fA-F]/g, '').toUpperCase()
const currentCleanValue = macValue.value.replace(/:/g, '')
if (cleanNewVal !== currentCleanValue) {
macValue.value = parseMacAddress(cleanNewVal)
}
},
{ immediate: true }
@@ -214,37 +149,17 @@ watch(
<style scoped lang="scss">
.mac-address-input {
display: flex;
align-items: center;
gap: 4px;
width: 100%;
&.disabled {
opacity: 0.7;
}
:deep(.el-input__wrapper) {
input {
width: 40px;
height: 32px;
text-align: center;
border: 1px solid #dcdfe6;
border-radius: 4px;
outline: none;
font-size: 14px;
text-transform: uppercase;
&:focus {
border-color: #409eff;
font-family: inherit; // 使用继承的字体而不是等宽字体
}
&:disabled {
background-color: #f5f7fa;
cursor: not-allowed;
}
}
.separator {
user-select: none;
font-weight: 500;
}
}
</style>

View File

@@ -309,6 +309,7 @@
</el-form-item>
<el-form-item
class="form-item"
label="装置mac地址:"
:rules="{ required: true, message: '请输入装置mac地址', trigger: 'blur' }"
@@ -694,7 +695,7 @@ interface DeviceInfo {
nodeId: string
cntractNo: string
sort: number
nodeProcess:number
nodeProcess:string
}
// 设备信息列表
const deviceInfoList = ref<DeviceInfo[]>([])
@@ -841,7 +842,6 @@ const handleDialogClose = () => {
countdown.value = 0
}
//台账推送
const onAdd = async () => {
resultDialogVisible.value = true
pushResult.value = null
@@ -859,8 +859,23 @@ const onAdd = async () => {
try {
// 调用推送日志接口
await pushLog()
const pushLogResponse = await pushLog()
// 检查返回的data是否为"暂无需要推送的数据"
if (pushLogResponse.data != "成功") {
// 直接提示用户没有数据推送
pushResult.value = {
success: false,
message: '暂无需要推送的数据',
logs: [{
message: '暂无需要推送的数据'
}]
}
return;
}
// 如果data不是"暂无需要推送的数据",则继续执行
if (pushLogResponse.data === "成功") {
// 等待30秒
await new Promise(resolve => setTimeout(resolve, 30000))
@@ -878,6 +893,7 @@ const onAdd = async () => {
message: item.message || JSON.stringify(item)
}))
}
}
} catch (error: any) {
pushResult.value = {
success: false,
@@ -1028,7 +1044,7 @@ const add = () => {
nodeId: '',
cntractNo: '',
sort: 0,
nodeProcess: 1,
nodeProcess: '自动分配',
})
busBarIndex.value = (deviceInfoList.value.length - 1).toString()
// 清理监测点数据
@@ -1381,7 +1397,7 @@ const next = async () => {
nodeId: '',
cntractNo: '',
sort: 0,
nodeProcess: 1,
nodeProcess: '自动分配',
})
busBarIndex.value = (deviceInfoList.value.length - 1).toString()
nextfalg.value = false
@@ -2080,7 +2096,7 @@ const handleBusBarTabsEdit = (targetName: any, action: any) => {
nodeId: '',
cntractNo: '',
sort: 0,
nodeProcess: 1,
nodeProcess: '自动分配',
})
busBarIndex.value = (deviceInfoList.value.length - 1).toString()
} else if (action === 'remove') {

View File

@@ -61,7 +61,7 @@
<span v-if="data.processState != null">
{{ node.label }}
</span>
<span v-else>{{ data.subName }}_{{ data.name }}</span>
<span v-else>{{ data.name }}</span>
<span
v-if="data.processState != null"
class="iconSpan"