Skip to content

Commit 82e9b1b

Browse files
author
puhui999
committed
【功能完善】IoT: 数据桥梁配置
1 parent e38b96c commit 82e9b1b

File tree

9 files changed

+374
-7
lines changed

9 files changed

+374
-7
lines changed

‎src/api/iot/rule/databridge/index.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,19 @@ export interface RedisStreamMQConfig extends Config {
7979
topic: string
8080
}
8181

82+
/** 数据桥梁类型 */
83+
export const IoTDataBridgeConfigType = {
84+
HTTP: 'HTTP',
85+
TCP: 'TCP',
86+
WEBSOCKET: 'WEBSOCKET',
87+
MQTT: 'MQTT',
88+
DATABASE: 'DATABASE',
89+
REDIS_STREAM: 'REDIS_STREAM',
90+
ROCKETMQ: 'ROCKETMQ',
91+
RABBITMQ: 'RABBITMQ',
92+
KAFKA: 'KAFKA'
93+
} as const
94+
8295
// IoT 数据桥梁 API
8396
export const DataBridgeApi = {
8497
// 查询IoT 数据桥梁分页

‎src/views/iot/rule/databridge/IoTDataBridgeForm.vue

Lines changed: 39 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,24 @@
3333
</el-radio-group>
3434
</el-form-item>
3535
<el-form-item label="桥梁配置" prop="config">
36-
<!-- <el-input v-model="formData.config" placeholder="请输入桥梁配置" />-->
36+
<HttpConfigForm v-if="showConfig(IoTDataBridgeConfigType.HTTP)" v-model="formData.config" />
37+
<MqttConfigForm v-if="showConfig(IoTDataBridgeConfigType.MQTT)" v-model="formData.config" />
38+
<RocketMQConfigForm
39+
v-if="showConfig(IoTDataBridgeConfigType.ROCKETMQ)"
40+
v-model="formData.config"
41+
/>
42+
<KafkaMQConfigForm
43+
v-if="showConfig(IoTDataBridgeConfigType.KAFKA)"
44+
v-model="formData.config"
45+
/>
46+
<RabbitMQConfigForm
47+
v-if="showConfig(IoTDataBridgeConfigType.RABBITMQ)"
48+
v-model="formData.config"
49+
/>
50+
<RedisStreamMQConfigForm
51+
v-if="showConfig(IoTDataBridgeConfigType.REDIS_STREAM)"
52+
v-model="formData.config"
53+
/>
3754
</el-form-item>
3855
<el-form-item label="桥梁描述" prop="description">
3956
<el-input v-model="formData.description" height="150px" type="textarea" />
@@ -57,8 +74,16 @@
5774
</Dialog>
5875
</template>
5976
<script lang="ts" setup>
60-
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
61-
import { DataBridgeApi, DataBridgeVO } from '@/api/iot/rule/databridge'
77+
import { DICT_TYPE, getDictLabel, getIntDictOptions } from '@/utils/dict'
78+
import { DataBridgeApi, DataBridgeVO, IoTDataBridgeConfigType } from '@/api/iot/rule/databridge'
79+
import {
80+
HttpConfigForm,
81+
KafkaMQConfigForm,
82+
MqttConfigForm,
83+
RabbitMQConfigForm,
84+
RedisStreamMQConfigForm,
85+
RocketMQConfigForm
86+
} from './config'
6287
6388
/** IoT 数据桥梁 表单 */
6489
defineOptions({ name: 'IoTDataBridgeForm' })
@@ -73,16 +98,22 @@ const formType = ref('') // 表单的类型：create - 新增；update - 修改
7398
const formData = ref<DataBridgeVO>({
7499
status: 0,
75100
direction: 1,
76-
type: 1
101+
type: 1,
102+
config: {} as any
77103
})
78104
const formRules = reactive({
79105
name: [{ required: true, message: '桥梁名称不能为空', trigger: 'blur' }],
80106
status: [{ required: true, message: '桥梁状态不能为空', trigger: 'blur' }],
81107
direction: [{ required: true, message: '桥梁方向不能为空', trigger: 'blur' }],
82-
type: [{ required: true, message: '桥梁类型不能为空', trigger: 'change' }]
108+
type: [{ required: true, message: '桥梁类型不能为空', trigger: 'change' }],
109+
'config.bootstrapServers': [{ required: true, message: '服务地址不能为空', trigger: 'blur' }],
110+
'config.topic': [{ required: true, message: '主题不能为空', trigger: 'blur' }]
83111
})
84112
const formRef = ref() // 表单 Ref
85-
113+
const showConfig = computed(() => (val: string) => {
114+
const label = getDictLabel(DICT_TYPE.IOT_DATA_BRIDGE_TYPE_ENUM, formData.value.type)
115+
return label && label === val
116+
}) // 显示对应的 Config 配置项
86117
/** 打开弹窗 */
87118
const open = async (type: string, id?: number) => {
88119
dialogVisible.value = true
@@ -130,7 +161,8 @@ const resetForm = () => {
130161
formData.value = {
131162
status: 0,
132163
direction: 1,
133-
type: 1
164+
type: 1,
165+
config: {} as any
134166
}
135167
formRef.value?.resetFields()
136168
}

‎src/views/iot/rule/databridge/config/HttpConfigForm.vue

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<template>
2+
<el-form-item label="请求地址" prop="config.url">
3+
<el-input v-model="config.url" placeholder="请输入请求地址" />
4+
</el-form-item>
5+
<el-form-item label="请求方法" prop="config.method">
6+
<el-select v-model="config.method" placeholder="请选择请求方法">
7+
<el-option label="GET" value="GET" />
8+
<el-option label="POST" value="POST" />
9+
<el-option label="PUT" value="PUT" />
10+
<el-option label="DELETE" value="DELETE" />
11+
</el-select>
12+
</el-form-item>
13+
<el-form-item label="请求头" prop="config.headers">
14+
<el-input
15+
v-model="headersStr"
16+
placeholder="请输入请求头，格式为 JSON"
17+
type="textarea"
18+
@input="handleHeadersChange"
19+
/>
20+
</el-form-item>
21+
<el-form-item label="请求参数" prop="config.query">
22+
<el-input
23+
v-model="queryStr"
24+
placeholder="请输入请求参数，格式为 JSON"
25+
type="textarea"
26+
@input="handleQueryChange"
27+
/>
28+
</el-form-item>
29+
<el-form-item label="请求体" prop="config.body">
30+
<el-input v-model="config.body" placeholder="请输入请求体" type="textarea" />
31+
</el-form-item>
32+
</template>
33+
<script lang="ts" setup>
34+
import { HttpConfig, IoTDataBridgeConfigType } from '@/api/iot/rule/databridge'
35+
import { useVModel } from '@vueuse/core'
36+
37+
defineOptions({ name: 'HttpConfigForm' })
38+
39+
const props = defineProps<{
40+
modelValue: HttpConfig
41+
}>()
42+
const emit = defineEmits(['update:modelValue'])
43+
const config = useVModel(props, 'modelValue', emit) as Ref<HttpConfig>
44+
45+
const headersStr = ref('{}')
46+
const queryStr = ref('{}')
47+
48+
/** 组件初始化 */
49+
onMounted(() => {
50+
config.value = {
51+
type: IoTDataBridgeConfigType.HTTP,
52+
url: '',
53+
method: 'GET',
54+
headers: {},
55+
query: {},
56+
body: ''
57+
}
58+
59+
// 初始化字符串形式
60+
headersStr.value = JSON.stringify(config.value.headers || {}, null, 2)
61+
queryStr.value = JSON.stringify(config.value.query || {}, null, 2)
62+
})
63+
64+
// 处理headers输入变化
65+
const handleHeadersChange = (val: string) => {
66+
try {
67+
config.value.headers = JSON.parse(val)
68+
} catch (e) {
69+
// 解析失败，保留原始字符串
70+
}
71+
}
72+
73+
// 处理query输入变化
74+
const handleQueryChange = (val: string) => {
75+
try {
76+
config.value.query = JSON.parse(val)
77+
} catch (e) {
78+
// 解析失败，保留原始字符串
79+
}
80+
}
81+
</script>

‎src/views/iot/rule/databridge/config/KafkaMQConfigForm.vue

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<template>
2+
<el-form-item label="服务地址" prop="config.bootstrapServers">
3+
<el-input v-model="config.bootstrapServers" placeholder="请输入服务地址，如：localhost:9092" />
4+
</el-form-item>
5+
<el-form-item label="用户名" prop="config.username">
6+
<el-input v-model="config.username" placeholder="请输入用户名" />
7+
</el-form-item>
8+
<el-form-item label="密码" prop="config.password">
9+
<el-input v-model="config.password" placeholder="请输入密码" show-password type="password" />
10+
</el-form-item>
11+
<el-form-item label="启用SSL" prop="config.ssl">
12+
<el-switch v-model="config.ssl" />
13+
</el-form-item>
14+
<el-form-item label="主题" prop="config.topic">
15+
<el-input v-model="config.topic" placeholder="请输入主题" />
16+
</el-form-item>
17+
</template>
18+
<script lang="ts" setup>
19+
import { IoTDataBridgeConfigType, KafkaMQConfig } from '@/api/iot/rule/databridge'
20+
import { useVModel } from '@vueuse/core'
21+
22+
defineOptions({ name: 'KafkaMQConfigForm' })
23+
24+
const props = defineProps<{
25+
modelValue: KafkaMQConfig
26+
}>()
27+
const emit = defineEmits(['update:modelValue'])
28+
const config = useVModel(props, 'modelValue', emit) as Ref<KafkaMQConfig>
29+
30+
/** 组件初始化 */
31+
onMounted(() => {
32+
config.value = {
33+
type: IoTDataBridgeConfigType.KAFKA,
34+
bootstrapServers: '',
35+
username: '',
36+
password: '',
37+
ssl: false,
38+
topic: ''
39+
}
40+
})
41+
</script>

‎src/views/iot/rule/databridge/config/MqttConfigForm.vue

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<template>
2+
<el-form-item label="MQTT服务地址" prop="config.url">
3+
<el-input v-model="config.url" placeholder="请输入MQTT服务地址，如：mqtt://localhost:1883" />
4+
</el-form-item>
5+
<el-form-item label="用户名" prop="config.username">
6+
<el-input v-model="config.username" placeholder="请输入用户名" />
7+
</el-form-item>
8+
<el-form-item label="密码" prop="config.password">
9+
<el-input v-model="config.password" placeholder="请输入密码" show-password type="password" />
10+
</el-form-item>
11+
<el-form-item label="客户端ID" prop="config.clientId">
12+
<el-input v-model="config.clientId" placeholder="请输入客户端ID" />
13+
</el-form-item>
14+
<el-form-item label="主题" prop="config.topic">
15+
<el-input v-model="config.topic" placeholder="请输入主题" />
16+
</el-form-item>
17+
</template>
18+
<script lang="ts" setup>
19+
import { IoTDataBridgeConfigType, MqttConfig } from '@/api/iot/rule/databridge'
20+
import { useVModel } from '@vueuse/core'
21+
22+
defineOptions({ name: 'MqttConfigForm' })
23+
24+
const props = defineProps<{
25+
modelValue: MqttConfig
26+
}>()
27+
const emit = defineEmits(['update:modelValue'])
28+
const config = useVModel(props, 'modelValue', emit) as Ref<MqttConfig>
29+
30+
/** 组件初始化 */
31+
onMounted(() => {
32+
config.value = {
33+
type: IoTDataBridgeConfigType.MQTT,
34+
url: '',
35+
username: '',
36+
password: '',
37+
clientId: '',
38+
topic: ''
39+
}
40+
})
41+
</script>

‎src/views/iot/rule/databridge/config/RabbitMQConfigForm.vue

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<template>
2+
<el-form-item label="主机地址" prop="config.host">
3+
<el-input v-model="config.host" placeholder="请输入主机地址，如：localhost" />
4+
</el-form-item>
5+
<el-form-item label="端口" prop="config.port">
6+
<el-input-number v-model="config.port" :max="65535" :min="1" placeholder="请输入端口" />
7+
</el-form-item>
8+
<el-form-item label="虚拟主机" prop="config.virtualHost">
9+
<el-input v-model="config.virtualHost" placeholder="请输入虚拟主机" />
10+
</el-form-item>
11+
<el-form-item label="用户名" prop="config.username">
12+
<el-input v-model="config.username" placeholder="请输入用户名" />
13+
</el-form-item>
14+
<el-form-item label="密码" prop="config.password">
15+
<el-input v-model="config.password" placeholder="请输入密码" show-password type="password" />
16+
</el-form-item>
17+
<el-form-item label="交换机" prop="config.exchange">
18+
<el-input v-model="config.exchange" placeholder="请输入交换机" />
19+
</el-form-item>
20+
<el-form-item label="路由键" prop="config.routingKey">
21+
<el-input v-model="config.routingKey" placeholder="请输入路由键" />
22+
</el-form-item>
23+
<el-form-item label="队列" prop="config.queue">
24+
<el-input v-model="config.queue" placeholder="请输入队列" />
25+
</el-form-item>
26+
</template>
27+
<script lang="ts" setup>
28+
import { IoTDataBridgeConfigType, RabbitMQConfig } from '@/api/iot/rule/databridge'
29+
import { useVModel } from '@vueuse/core'
30+
31+
defineOptions({ name: 'RabbitMQConfigForm' })
32+
33+
const props = defineProps<{
34+
modelValue: RabbitMQConfig
35+
}>()
36+
const emit = defineEmits(['update:modelValue'])
37+
const config = useVModel(props, 'modelValue', emit) as Ref<RabbitMQConfig>
38+
39+
/** 组件初始化 */
40+
onMounted(() => {
41+
config.value = {
42+
type: IoTDataBridgeConfigType.RABBITMQ,
43+
host: '',
44+
port: 5672,
45+
virtualHost: '/',
46+
username: '',
47+
password: '',
48+
exchange: '',
49+
routingKey: '',
50+
queue: ''
51+
}
52+
})
53+
</script>

‎src/views/iot/rule/databridge/config/RedisStreamMQConfigForm.vue

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<template>
2+
<el-form-item label="主机地址" prop="config.host">
3+
<el-input v-model="config.host" placeholder="请输入主机地址，如：localhost" />
4+
</el-form-item>
5+
<el-form-item label="端口" prop="config.port">
6+
<el-input-number v-model="config.port" :max="65535" :min="1" placeholder="请输入端口" />
7+
</el-form-item>
8+
<el-form-item label="密码" prop="config.password">
9+
<el-input v-model="config.password" placeholder="请输入密码" show-password type="password" />
10+
</el-form-item>
11+
<el-form-item label="数据库" prop="config.database">
12+
<el-input-number v-model="config.database" :max="15" :min="0" placeholder="请输入数据库索引" />
13+
</el-form-item>
14+
<el-form-item label="主题" prop="config.topic">
15+
<el-input v-model="config.topic" placeholder="请输入主题" />
16+
</el-form-item>
17+
</template>
18+
<script lang="ts" setup>
19+
import { IoTDataBridgeConfigType, RedisStreamMQConfig } from '@/api/iot/rule/databridge'
20+
import { useVModel } from '@vueuse/core'
21+
22+
defineOptions({ name: 'RedisStreamMQConfigForm' })
23+
24+
const props = defineProps<{
25+
modelValue: RedisStreamMQConfig
26+
}>()
27+
const emit = defineEmits(['update:modelValue'])
28+
const config = useVModel(props, 'modelValue', emit) as Ref<RedisStreamMQConfig>
29+
30+
/** 组件初始化 */
31+
onMounted(() => {
32+
config.value = {
33+
type: IoTDataBridgeConfigType.REDIS_STREAM,
34+
host: '',
35+
port: 6379,
36+
password: '',
37+
database: 0,
38+
topic: ''
39+
}
40+
})
41+
</script>

0 commit comments

Comments
 (0)