mirror of
https://gitee.com/myxzgzs/boyue-ui-admin-vue3
synced 2025-08-08 08:22:41 +08:00
【功能完善】IoT: 数据桥梁配置
This commit is contained in:
puhui999
parent
e38b96c959
commit
82e9b1bcff
@ -79,6 +79,19 @@ export interface RedisStreamMQConfig extends Config {
|
||||
topic: string
|
||||
}
|
||||
|
||||
/** 数据桥梁类型 */
|
||||
export const IoTDataBridgeConfigType = {
|
||||
HTTP: 'HTTP',
|
||||
TCP: 'TCP',
|
||||
WEBSOCKET: 'WEBSOCKET',
|
||||
MQTT: 'MQTT',
|
||||
DATABASE: 'DATABASE',
|
||||
REDIS_STREAM: 'REDIS_STREAM',
|
||||
ROCKETMQ: 'ROCKETMQ',
|
||||
RABBITMQ: 'RABBITMQ',
|
||||
KAFKA: 'KAFKA'
|
||||
} as const
|
||||
|
||||
// IoT 数据桥梁 API
|
||||
export const DataBridgeApi = {
|
||||
// 查询IoT 数据桥梁分页
|
||||
|
||||
@ -33,7 +33,24 @@
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="桥梁配置" prop="config">
|
||||
<!-- <el-input v-model="formData.config" placeholder="请输入桥梁配置" />-->
|
||||
<HttpConfigForm v-if="showConfig(IoTDataBridgeConfigType.HTTP)" v-model="formData.config" />
|
||||
<MqttConfigForm v-if="showConfig(IoTDataBridgeConfigType.MQTT)" v-model="formData.config" />
|
||||
<RocketMQConfigForm
|
||||
v-if="showConfig(IoTDataBridgeConfigType.ROCKETMQ)"
|
||||
v-model="formData.config"
|
||||
/>
|
||||
<KafkaMQConfigForm
|
||||
v-if="showConfig(IoTDataBridgeConfigType.KAFKA)"
|
||||
v-model="formData.config"
|
||||
/>
|
||||
<RabbitMQConfigForm
|
||||
v-if="showConfig(IoTDataBridgeConfigType.RABBITMQ)"
|
||||
v-model="formData.config"
|
||||
/>
|
||||
<RedisStreamMQConfigForm
|
||||
v-if="showConfig(IoTDataBridgeConfigType.REDIS_STREAM)"
|
||||
v-model="formData.config"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="桥梁描述" prop="description">
|
||||
<el-input v-model="formData.description" height="150px" type="textarea" />
|
||||
@ -57,8 +74,16 @@
|
||||
</Dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
||||
import { DataBridgeApi, DataBridgeVO } from '@/api/iot/rule/databridge'
|
||||
import { DICT_TYPE, getDictLabel, getIntDictOptions } from '@/utils/dict'
|
||||
import { DataBridgeApi, DataBridgeVO, IoTDataBridgeConfigType } from '@/api/iot/rule/databridge'
|
||||
import {
|
||||
HttpConfigForm,
|
||||
KafkaMQConfigForm,
|
||||
MqttConfigForm,
|
||||
RabbitMQConfigForm,
|
||||
RedisStreamMQConfigForm,
|
||||
RocketMQConfigForm
|
||||
} from './config'
|
||||
|
||||
/** IoT 数据桥梁 表单 */
|
||||
defineOptions({ name: 'IoTDataBridgeForm' })
|
||||
@ -73,16 +98,22 @@ const formType = ref('') // 表单的类型：create - 新增；update - 修改
|
||||
const formData = ref<DataBridgeVO>({
|
||||
status: 0,
|
||||
direction: 1,
|
||||
type: 1
|
||||
type: 1,
|
||||
config: {} as any
|
||||
})
|
||||
const formRules = reactive({
|
||||
name: [{ required: true, message: '桥梁名称不能为空', trigger: 'blur' }],
|
||||
status: [{ required: true, message: '桥梁状态不能为空', trigger: 'blur' }],
|
||||
direction: [{ required: true, message: '桥梁方向不能为空', trigger: 'blur' }],
|
||||
type: [{ required: true, message: '桥梁类型不能为空', trigger: 'change' }]
|
||||
type: [{ required: true, message: '桥梁类型不能为空', trigger: 'change' }],
|
||||
'config.bootstrapServers': [{ required: true, message: '服务地址不能为空', trigger: 'blur' }],
|
||||
'config.topic': [{ required: true, message: '主题不能为空', trigger: 'blur' }]
|
||||
})
|
||||
const formRef = ref() // 表单 Ref
|
||||
|
||||
const showConfig = computed(() => (val: string) => {
|
||||
const label = getDictLabel(DICT_TYPE.IOT_DATA_BRIDGE_TYPE_ENUM, formData.value.type)
|
||||
return label && label === val
|
||||
}) // 显示对应的 Config 配置项
|
||||
/** 打开弹窗 */
|
||||
const open = async (type: string, id?: number) => {
|
||||
dialogVisible.value = true
|
||||
@ -130,7 +161,8 @@ const resetForm = () => {
|
||||
formData.value = {
|
||||
status: 0,
|
||||
direction: 1,
|
||||
type: 1
|
||||
type: 1,
|
||||
config: {} as any
|
||||
}
|
||||
formRef.value?.resetFields()
|
||||
}
|
||||
|
||||
81
src/views/iot/rule/databridge/config/HttpConfigForm.vue
Normal file
81
src/views/iot/rule/databridge/config/HttpConfigForm.vue
Normal file
@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<el-form-item label="请求地址" prop="config.url">
|
||||
<el-input v-model="config.url" placeholder="请输入请求地址" />
|
||||
</el-form-item>
|
||||
<el-form-item label="请求方法" prop="config.method">
|
||||
<el-select v-model="config.method" placeholder="请选择请求方法">
|
||||
<el-option label="GET" value="GET" />
|
||||
<el-option label="POST" value="POST" />
|
||||
<el-option label="PUT" value="PUT" />
|
||||
<el-option label="DELETE" value="DELETE" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="请求头" prop="config.headers">
|
||||
<el-input
|
||||
v-model="headersStr"
|
||||
placeholder="请输入请求头，格式为 JSON"
|
||||
type="textarea"
|
||||
@input="handleHeadersChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="请求参数" prop="config.query">
|
||||
<el-input
|
||||
v-model="queryStr"
|
||||
placeholder="请输入请求参数，格式为 JSON"
|
||||
type="textarea"
|
||||
@input="handleQueryChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="请求体" prop="config.body">
|
||||
<el-input v-model="config.body" placeholder="请输入请求体" type="textarea" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { HttpConfig, IoTDataBridgeConfigType } from '@/api/iot/rule/databridge'
|
||||
import { useVModel } from '@vueuse/core'
|
||||
|
||||
defineOptions({ name: 'HttpConfigForm' })
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: HttpConfig
|
||||
}>()
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
const config = useVModel(props, 'modelValue', emit) as Ref<HttpConfig>
|
||||
|
||||
const headersStr = ref('{}')
|
||||
const queryStr = ref('{}')
|
||||
|
||||
/** 组件初始化 */
|
||||
onMounted(() => {
|
||||
config.value = {
|
||||
type: IoTDataBridgeConfigType.HTTP,
|
||||
url: '',
|
||||
method: 'GET',
|
||||
headers: {},
|
||||
query: {},
|
||||
body: ''
|
||||
}
|
||||
|
||||
// 初始化字符串形式
|
||||
headersStr.value = JSON.stringify(config.value.headers || {}, null, 2)
|
||||
queryStr.value = JSON.stringify(config.value.query || {}, null, 2)
|
||||
})
|
||||
|
||||
// 处理headers输入变化
|
||||
const handleHeadersChange = (val: string) => {
|
||||
try {
|
||||
config.value.headers = JSON.parse(val)
|
||||
} catch (e) {
|
||||
// 解析失败，保留原始字符串
|
||||
}
|
||||
}
|
||||
|
||||
// 处理query输入变化
|
||||
const handleQueryChange = (val: string) => {
|
||||
try {
|
||||
config.value.query = JSON.parse(val)
|
||||
} catch (e) {
|
||||
// 解析失败，保留原始字符串
|
||||
}
|
||||
}
|
||||
</script>
|
||||
41
src/views/iot/rule/databridge/config/KafkaMQConfigForm.vue
Normal file
41
src/views/iot/rule/databridge/config/KafkaMQConfigForm.vue
Normal file
@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<el-form-item label="服务地址" prop="config.bootstrapServers">
|
||||
<el-input v-model="config.bootstrapServers" placeholder="请输入服务地址，如：localhost:9092" />
|
||||
</el-form-item>
|
||||
<el-form-item label="用户名" prop="config.username">
|
||||
<el-input v-model="config.username" placeholder="请输入用户名" />
|
||||
</el-form-item>
|
||||
<el-form-item label="密码" prop="config.password">
|
||||
<el-input v-model="config.password" placeholder="请输入密码" show-password type="password" />
|
||||
</el-form-item>
|
||||
<el-form-item label="启用SSL" prop="config.ssl">
|
||||
<el-switch v-model="config.ssl" />
|
||||
</el-form-item>
|
||||
<el-form-item label="主题" prop="config.topic">
|
||||
<el-input v-model="config.topic" placeholder="请输入主题" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { IoTDataBridgeConfigType, KafkaMQConfig } from '@/api/iot/rule/databridge'
|
||||
import { useVModel } from '@vueuse/core'
|
||||
|
||||
defineOptions({ name: 'KafkaMQConfigForm' })
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: KafkaMQConfig
|
||||
}>()
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
const config = useVModel(props, 'modelValue', emit) as Ref<KafkaMQConfig>
|
||||
|
||||
/** 组件初始化 */
|
||||
onMounted(() => {
|
||||
config.value = {
|
||||
type: IoTDataBridgeConfigType.KAFKA,
|
||||
bootstrapServers: '',
|
||||
username: '',
|
||||
password: '',
|
||||
ssl: false,
|
||||
topic: ''
|
||||
}
|
||||
})
|
||||
</script>
|
||||
41
src/views/iot/rule/databridge/config/MqttConfigForm.vue
Normal file
41
src/views/iot/rule/databridge/config/MqttConfigForm.vue
Normal file
@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<el-form-item label="MQTT服务地址" prop="config.url">
|
||||
<el-input v-model="config.url" placeholder="请输入MQTT服务地址，如：mqtt://localhost:1883" />
|
||||
</el-form-item>
|
||||
<el-form-item label="用户名" prop="config.username">
|
||||
<el-input v-model="config.username" placeholder="请输入用户名" />
|
||||
</el-form-item>
|
||||
<el-form-item label="密码" prop="config.password">
|
||||
<el-input v-model="config.password" placeholder="请输入密码" show-password type="password" />
|
||||
</el-form-item>
|
||||
<el-form-item label="客户端ID" prop="config.clientId">
|
||||
<el-input v-model="config.clientId" placeholder="请输入客户端ID" />
|
||||
</el-form-item>
|
||||
<el-form-item label="主题" prop="config.topic">
|
||||
<el-input v-model="config.topic" placeholder="请输入主题" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { IoTDataBridgeConfigType, MqttConfig } from '@/api/iot/rule/databridge'
|
||||
import { useVModel } from '@vueuse/core'
|
||||
|
||||
defineOptions({ name: 'MqttConfigForm' })
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: MqttConfig
|
||||
}>()
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
const config = useVModel(props, 'modelValue', emit) as Ref<MqttConfig>
|
||||
|
||||
/** 组件初始化 */
|
||||
onMounted(() => {
|
||||
config.value = {
|
||||
type: IoTDataBridgeConfigType.MQTT,
|
||||
url: '',
|
||||
username: '',
|
||||
password: '',
|
||||
clientId: '',
|
||||
topic: ''
|
||||
}
|
||||
})
|
||||
</script>
|
||||
53
src/views/iot/rule/databridge/config/RabbitMQConfigForm.vue
Normal file
53
src/views/iot/rule/databridge/config/RabbitMQConfigForm.vue
Normal file
@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<el-form-item label="主机地址" prop="config.host">
|
||||
<el-input v-model="config.host" placeholder="请输入主机地址，如：localhost" />
|
||||
</el-form-item>
|
||||
<el-form-item label="端口" prop="config.port">
|
||||
<el-input-number v-model="config.port" :max="65535" :min="1" placeholder="请输入端口" />
|
||||
</el-form-item>
|
||||
<el-form-item label="虚拟主机" prop="config.virtualHost">
|
||||
<el-input v-model="config.virtualHost" placeholder="请输入虚拟主机" />
|
||||
</el-form-item>
|
||||
<el-form-item label="用户名" prop="config.username">
|
||||
<el-input v-model="config.username" placeholder="请输入用户名" />
|
||||
</el-form-item>
|
||||
<el-form-item label="密码" prop="config.password">
|
||||
<el-input v-model="config.password" placeholder="请输入密码" show-password type="password" />
|
||||
</el-form-item>
|
||||
<el-form-item label="交换机" prop="config.exchange">
|
||||
<el-input v-model="config.exchange" placeholder="请输入交换机" />
|
||||
</el-form-item>
|
||||
<el-form-item label="路由键" prop="config.routingKey">
|
||||
<el-input v-model="config.routingKey" placeholder="请输入路由键" />
|
||||
</el-form-item>
|
||||
<el-form-item label="队列" prop="config.queue">
|
||||
<el-input v-model="config.queue" placeholder="请输入队列" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { IoTDataBridgeConfigType, RabbitMQConfig } from '@/api/iot/rule/databridge'
|
||||
import { useVModel } from '@vueuse/core'
|
||||
|
||||
defineOptions({ name: 'RabbitMQConfigForm' })
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: RabbitMQConfig
|
||||
}>()
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
const config = useVModel(props, 'modelValue', emit) as Ref<RabbitMQConfig>
|
||||
|
||||
/** 组件初始化 */
|
||||
onMounted(() => {
|
||||
config.value = {
|
||||
type: IoTDataBridgeConfigType.RABBITMQ,
|
||||
host: '',
|
||||
port: 5672,
|
||||
virtualHost: '/',
|
||||
username: '',
|
||||
password: '',
|
||||
exchange: '',
|
||||
routingKey: '',
|
||||
queue: ''
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<el-form-item label="主机地址" prop="config.host">
|
||||
<el-input v-model="config.host" placeholder="请输入主机地址，如：localhost" />
|
||||
</el-form-item>
|
||||
<el-form-item label="端口" prop="config.port">
|
||||
<el-input-number v-model="config.port" :max="65535" :min="1" placeholder="请输入端口" />
|
||||
</el-form-item>
|
||||
<el-form-item label="密码" prop="config.password">
|
||||
<el-input v-model="config.password" placeholder="请输入密码" show-password type="password" />
|
||||
</el-form-item>
|
||||
<el-form-item label="数据库" prop="config.database">
|
||||
<el-input-number v-model="config.database" :max="15" :min="0" placeholder="请输入数据库索引" />
|
||||
</el-form-item>
|
||||
<el-form-item label="主题" prop="config.topic">
|
||||
<el-input v-model="config.topic" placeholder="请输入主题" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { IoTDataBridgeConfigType, RedisStreamMQConfig } from '@/api/iot/rule/databridge'
|
||||
import { useVModel } from '@vueuse/core'
|
||||
|
||||
defineOptions({ name: 'RedisStreamMQConfigForm' })
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: RedisStreamMQConfig
|
||||
}>()
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
const config = useVModel(props, 'modelValue', emit) as Ref<RedisStreamMQConfig>
|
||||
|
||||
/** 组件初始化 */
|
||||
onMounted(() => {
|
||||
config.value = {
|
||||
type: IoTDataBridgeConfigType.REDIS_STREAM,
|
||||
host: '',
|
||||
port: 6379,
|
||||
password: '',
|
||||
database: 0,
|
||||
topic: ''
|
||||
}
|
||||
})
|
||||
</script>
|
||||
50
src/views/iot/rule/databridge/config/RocketMQConfigForm.vue
Normal file
50
src/views/iot/rule/databridge/config/RocketMQConfigForm.vue
Normal file
@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<el-form-item label="命名服务地址" prop="config.nameServer">
|
||||
<el-input v-model="config.nameServer" placeholder="请输入命名服务地址，如：127.0.0.1:9876" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Access Key" prop="config.accessKey">
|
||||
<el-input v-model="config.accessKey" placeholder="请输入Access Key" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Secret Key" prop="config.secretKey">
|
||||
<el-input
|
||||
v-model="config.secretKey"
|
||||
placeholder="请输入Secret Key"
|
||||
show-password
|
||||
type="password"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="消费组" prop="config.group">
|
||||
<el-input v-model="config.group" placeholder="请输入消费组" />
|
||||
</el-form-item>
|
||||
<el-form-item label="主题" prop="config.topic">
|
||||
<el-input v-model="config.topic" placeholder="请输入主题" />
|
||||
</el-form-item>
|
||||
<el-form-item label="标签" prop="config.tags">
|
||||
<el-input v-model="config.tags" placeholder="请输入标签" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { IoTDataBridgeConfigType, RocketMQConfig } from '@/api/iot/rule/databridge'
|
||||
import { useVModel } from '@vueuse/core'
|
||||
|
||||
defineOptions({ name: 'RocketMQConfigForm' })
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: RocketMQConfig
|
||||
}>()
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
const config = useVModel(props, 'modelValue', emit) as Ref<RocketMQConfig>
|
||||
|
||||
/** 组件初始化 */
|
||||
onMounted(() => {
|
||||
config.value = {
|
||||
type: IoTDataBridgeConfigType.ROCKETMQ,
|
||||
nameServer: '',
|
||||
accessKey: '',
|
||||
secretKey: '',
|
||||
group: '',
|
||||
topic: '',
|
||||
tags: ''
|
||||
}
|
||||
})
|
||||
</script>
|
||||
15
src/views/iot/rule/databridge/config/index.ts
Normal file
15
src/views/iot/rule/databridge/config/index.ts
Normal file
@ -0,0 +1,15 @@
|
||||
import HttpConfigForm from './HttpConfigForm.vue'
|
||||
import MqttConfigForm from './MqttConfigForm.vue'
|
||||
import RocketMQConfigForm from './RocketMQConfigForm.vue'
|
||||
import KafkaMQConfigForm from './KafkaMQConfigForm.vue'
|
||||
import RabbitMQConfigForm from './RabbitMQConfigForm.vue'
|
||||
import RedisStreamMQConfigForm from './RedisStreamMQConfigForm.vue'
|
||||
|
||||
export {
|
||||
HttpConfigForm,
|
||||
MqttConfigForm,
|
||||
RocketMQConfigForm,
|
||||
KafkaMQConfigForm,
|
||||
RabbitMQConfigForm,
|
||||
RedisStreamMQConfigForm
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user