github/yudao-ui-admin-vue3
1
0
Fork 0
mirror of https://github.com/yudaocode/yudao-ui-admin-vue3.git synced 2026-03-30 04:20:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat（iot）：Modbus 支持 Master/Slave 双模式，配置表单和详情按协议类型区分展示

Browse Source
This commit is contained in:
YunaiV
2026-02-13 15:35:41 +08:00
parent 155edc41a9
commit deed7eaff2
4 changed files with 21 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/api/iot/product/product/index.ts
View File

@@ -37,8 +37,8 @@ export enum ProtocolTypeEnum {
MQTT = 'mqtt',
EMQX = 'emqx',
COAP = 'coap',
MODBUS_TCP_MASTER = 'modbus_tcp_master',
MODBUS_TCP_SLAVE = 'modbus_tcp_slave'
MODBUS_TCP_CLIENT = 'modbus_tcp_client',
MODBUS_TCP_SERVER = 'modbus_tcp_server'
}
// IoT 序列化类型枚举

16
src/views/iot/device/device/detail/DeviceModbusConfig.vue
View File

@@ -12,8 +12,8 @@
<!-- 详情展示 -->
<el-descriptions :column="3" border direction="horizontal">
<!-- Master 模式专有字段 -->
<template v-if="isMaster">
<!-- Client 模式专有字段 -->
<template v-if="isClient">
<el-descriptions-item label="IP 地址">
{{ modbusConfig.ip || '-' }}
</el-descriptions-item>
@@ -25,8 +25,8 @@
<el-descriptions-item label="从站地址">
{{ modbusConfig.slaveId || '-' }}
</el-descriptions-item>
<!-- Master 模式专有字段 -->
<template v-if="isMaster">
<!-- Client 模式专有字段 -->
<template v-if="isClient">
<el-descriptions-item label="连接超时">
{{ modbusConfig.timeout ? `${modbusConfig.timeout} ms` : '-' }}
</el-descriptions-item>
@@ -34,8 +34,8 @@
{{ modbusConfig.retryInterval ? `${modbusConfig.retryInterval} ms` : '-' }}
</el-descriptions-item>
</template>
<!-- Slave 模式专有字段 -->
<template v-if="isSlave">
<!-- Server 模式专有字段 -->
<template v-if="isServer">
<el-descriptions-item label="工作模式">
<dict-tag :type="DICT_TYPE.IOT_MODBUS_MODE" :value="modbusConfig.mode" />
</el-descriptions-item>
@@ -197,8 +197,8 @@ const props = defineProps<{
const message = useMessage()
// ======================= 连接配置 =======================
const isMaster = computed(() => props.product.protocolType === ProtocolTypeEnum.MODBUS_TCP_MASTER) // 是否为 Master 模式
const isSlave = computed(() => props.product.protocolType === ProtocolTypeEnum.MODBUS_TCP_SLAVE) // 是否为 Slave 模式
const isClient = computed(() => props.product.protocolType === ProtocolTypeEnum.MODBUS_TCP_CLIENT) // 是否为 Client 模式
const isServer = computed(() => props.product.protocolType === ProtocolTypeEnum.MODBUS_TCP_SERVER) // 是否为 Server 模式
const modbusConfig = ref<DeviceModbusConfigVO>({} as DeviceModbusConfigVO)
/** 获取连接配置 */

20
src/views/iot/device/device/detail/DeviceModbusConfigForm.vue
View File

@@ -8,8 +8,8 @@
label-width="120px"
v-loading="formLoading"
>
<!-- Master 模式专有字段：IP、端口、超时、重试 -->
<template v-if="isMaster">
<!-- Client 模式专有字段：IP、端口、超时、重试 -->
<template v-if="isClient">
<el-form-item label="IP 地址" prop="ip">
<el-input v-model="formData.ip" placeholder="请输入 Modbus 服务器 IP 地址" />
</el-form-item>
@@ -35,8 +35,8 @@
class="!w-full"
/>
</el-form-item>
<!-- Master 模式专有字段：超时、重试 -->
<template v-if="isMaster">
<!-- Client 模式专有字段：超时、重试 -->
<template v-if="isClient">
<el-form-item label="连接超时(ms)" prop="timeout">
<el-input-number
v-model="formData.timeout"
@@ -58,8 +58,8 @@
/>
</el-form-item>
</template>
<!-- Slave 模式专有字段：模式、帧格式 -->
<template v-if="isSlave">
<!-- Server 模式专有字段：模式、帧格式 -->
<template v-if="isServer">
<el-form-item label="工作模式" prop="mode">
<el-radio-group v-model="formData.mode">
<el-radio
@@ -124,8 +124,8 @@ const emit = defineEmits<{
const message = useMessage()
const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) // 表单提交 loading 状态
const isMaster = computed(() => props.protocolType === ProtocolTypeEnum.MODBUS_TCP_MASTER) // 是否为 Master 模式
const isSlave = computed(() => props.protocolType === ProtocolTypeEnum.MODBUS_TCP_SLAVE) // 是否为 Slave 模式
const isClient = computed(() => props.protocolType === ProtocolTypeEnum.MODBUS_TCP_CLIENT) // 是否为 Client 模式
const isServer = computed(() => props.protocolType === ProtocolTypeEnum.MODBUS_TCP_SERVER) // 是否为 Server 模式
const formData = ref<DeviceModbusConfigVO>({
deviceId: props.deviceId,
ip: '',
@@ -141,13 +141,13 @@ const formRules = computed(() => {
const rules: Record<string, any[]> = {
slaveId: [{ required: true, message: '请输入从站地址', trigger: 'blur' }]
}
if (isMaster.value) {
if (isClient.value) {
rules.ip = [{ required: true, message: '请输入 IP 地址', trigger: 'blur' }]
rules.port = [{ required: true, message: '请输入端口', trigger: 'blur' }]
rules.timeout = [{ required: true, message: '请输入连接超时时间', trigger: 'blur' }]
rules.retryInterval = [{ required: true, message: '请输入重试间隔', trigger: 'blur' }]
}
if (isSlave.value) {
if (isServer.value) {
rules.mode = [{ required: true, message: '请选择工作模式', trigger: 'change' }]
rules.frameFormat = [{ required: true, message: '请选择帧格式', trigger: 'change' }]
}

2
src/views/iot/device/device/detail/index.vue
View File

@@ -46,7 +46,7 @@
label="Modbus 配置"
name="modbus"
v-if="
[ProtocolTypeEnum.MODBUS_TCP_MASTER, ProtocolTypeEnum.MODBUS_TCP_SLAVE].includes(
[ProtocolTypeEnum.MODBUS_TCP_CLIENT, ProtocolTypeEnum.MODBUS_TCP_SERVER].includes(
product.protocolType as ProtocolTypeEnum
)
"