yudao
/
admin-vue3
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vue3.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

!867 feat(iot): 前端新增 Database 数据目的配置表单 

Merge pull request !867 from puhui999/master
pull/864/MERGE
芋道源码 2026-05-03 01:19:11 +00:00 committed by Gitee
parent 7fd0a24ca5 dfee5b999d
commit a698cb1635
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
4 changed files with 299 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/api/iot/rule/data/sink/index.ts
View File

@ -13,6 +13,7 @@ export interface DataSinkVO {
| TcpConfig
| WebSocketConfig
| MqttConfig
| DatabaseConfig
| RocketMQConfig
| KafkaMQConfig
| RabbitMQConfig
@ -73,6 +74,14 @@ export interface MqttConfig extends Config {
topic: string
}
/** Database 配置 */
export interface DatabaseConfig extends Config {
jdbcUrl: string
username: string
password: string
tableName: string
}
/** RocketMQ 配置 */
export interface RocketMQConfig extends Config {
nameServer: string

8
src/views/iot/rule/data/sink/DataSinkForm.vue
View File

@ -30,6 +30,10 @@
v-model="formData.config"
/>
<MqttConfigForm v-if="IotDataSinkTypeEnum.MQTT === formData.type" v-model="formData.config" />
<DatabaseConfigForm
v-if="IotDataSinkTypeEnum.DATABASE === formData.type"
v-model="formData.config"
/>
<RocketMQConfigForm
v-if="IotDataSinkTypeEnum.ROCKETMQ === formData.type"
v-model="formData.config"
@ -69,6 +73,7 @@ import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { CommonStatusEnum } from '@/utils/constants'
import { DataSinkApi, DataSinkVO, IotDataSinkTypeEnum } from '@/api/iot/rule/data/sink'
import {
DatabaseConfigForm,
HttpConfigForm,
KafkaMQConfigForm,
MqttConfigForm,
@ -116,6 +121,9 @@ const formRules = reactive({
'config.password': [{ required: true, message: '密码不能为空', trigger: 'blur' }],
'config.clientId': [{ required: true, message: '客户端 ID 不能为空', trigger: 'blur' }],
'config.topic': [{ required: true, message: '主题不能为空', trigger: 'blur' }],
// Database 配置
'config.jdbcUrl': [{ required: true, message: 'JDBC 连接地址不能为空', trigger: 'blur' }],
'config.tableName': [{ required: true, message: '目标表名不能为空', trigger: 'blur' }],
// RocketMQ 配置
'config.nameServer': [{ required: true, message: 'NameServer 地址不能为空', trigger: 'blur' }],
'config.accessKey': [{ required: true, message: 'AccessKey 不能为空', trigger: 'blur' }],

280
src/views/iot/rule/data/sink/config/DatabaseConfigForm.vue Normal file
View File

@ -0,0 +1,280 @@
<template>
<el-form-item label="JDBC 地址" prop="config.jdbcUrl">
<el-input
v-model="config.jdbcUrl"
placeholder="请输入JDBC连接地址，如：jdbc:mysql://localhost:3306/iot_data"
/>
</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.tableName">
<div style="display: flex; align-items: center; gap: 12px; width: 100%">
<el-input v-model="config.tableName" placeholder="目标表名" style="width: 240px" />
<el-button type="primary" link @click="toggleSqlTip">
<el-icon class="mr-1"><component :is="showSqlTip ? 'ArrowUp' : 'Document'" /></el-icon>
{{ showSqlTip ? '收起表结构提示' : '查看表结构提示' }}
</el-button>
</div>
</el-form-item>
<!-- Redesigned Terminal-style SQL snippet -->
<el-collapse-transition>
<div v-show="showSqlTip" class="terminal-card">
<div class="terminal-header">
<div class="terminal-dots">
<div class="dot red"></div>
<div class="dot yellow"></div>
<div class="dot green"></div>
</div>
<div class="terminal-title">Initialization Required</div>
<button class="terminal-copy-btn" type="button" @click="handleCopySQL">
<el-icon class="copy-icon"><Check v-if="isCopied" /><DocumentCopy v-else /></el-icon>
{{ isCopied ? '已复制' : 'Copy SQL' }}
</button>
</div>
<div class="terminal-body">
<div class="terminal-desc">
✨ 目标数据库必须包含以下结构的表，才能正常接收数据流转的消息：
</div>
<div class="terminal-code-wrapper">
<pre
class="terminal-code"
><code><span class="kw">CREATE</span> <span class="kw">TABLE</span> <span class="identifier">iot_device_message_sink</span> (
<span class="identifier">id</span> <span class="type">VARCHAR</span>(64) <span class="kw">NOT NULL COMMENT</span> <span class="string">'消息ID'</span>,
<span class="identifier">device_id</span> <span class="type">BIGINT</span> <span class="kw">NOT NULL COMMENT</span> <span class="string">'设备编号'</span>,
<span class="identifier">tenant_id</span> <span class="type">BIGINT</span> <span class="kw">NOT NULL DEFAULT</span> <span class="num">0</span> <span class="kw">COMMENT</span> <span class="string">'租户编号'</span>,
<span class="identifier">method</span> <span class="type">VARCHAR</span>(128) <span class="kw">COMMENT</span> <span class="string">'请求方法'</span>,
<span class="identifier">report_time</span> <span class="type">DATETIME</span> <span class="kw">COMMENT</span> <span class="string">'上报时间'</span>,
<span class="identifier">data</span> <span class="type">TEXT</span> <span class="kw">COMMENT</span> <span class="string">'完整消息JSON'</span>,
<span class="identifier">create_time</span> <span class="type">DATETIME</span> <span class="kw">NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT</span> <span class="string">'创建时间'</span>,
<span class="kw">PRIMARY KEY</span> (<span class="identifier">id</span>) <span class="kw">USING BTREE</span>,
<span class="kw">INDEX</span> <span class="identifier">idx_create_time</span> (<span class="identifier">create_time</span> <span class="kw">ASC</span>) <span class="kw">USING BTREE</span>
) <span class="kw">ENGINE</span> = <span class="identifier">InnoDB</span> <span class="kw">CHARACTER SET</span> = <span class="identifier">utf8mb4</span> <span class="kw">COLLATE</span> = <span class="identifier">utf8mb4_unicode_ci</span> <span class="kw">COMMENT</span> = <span class="string">'IoT 设备消息流转目标表'</span>;</code></pre>
</div>
</div>
</div>
</el-collapse-transition>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { Check, DocumentCopy } from '@element-plus/icons-vue'
import { DatabaseConfig, IotDataSinkTypeEnum } from '@/api/iot/rule/data/sink'
import { useClipboard, useVModel } from '@vueuse/core'
import { isEmpty } from '@/utils/is'
import { useMessage } from '@/hooks/web/useMessage'
defineOptions({ name: 'DatabaseConfigForm' })
const props = defineProps<{
modelValue: any
}>()
const emit = defineEmits(['update:modelValue'])
const config = useVModel(props, 'modelValue', emit) as Ref<DatabaseConfig>
const message = useMessage()
const rawSQL = `CREATE TABLE iot_device_message_sink (
id VARCHAR(64) NOT NULL COMMENT '消息ID',
device_id BIGINT NOT NULL COMMENT '设备编号',
tenant_id BIGINT NOT NULL DEFAULT 0 COMMENT '租户编号',
method VARCHAR(128) COMMENT '请求方法',
report_time DATETIME COMMENT '上报时间',
data TEXT COMMENT '完整消息JSON',
create_time DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
PRIMARY KEY (id) USING BTREE,
INDEX idx_create_time (create_time ASC) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_unicode_ci COMMENT = 'IoT 设备消息流转目标表';`
const isCopied = ref(false)
const showSqlTip = ref(false)
const { copy } = useClipboard()
const toggleSqlTip = () => {
showSqlTip.value = !showSqlTip.value
}
const handleCopySQL = async () => {
await copy(rawSQL)
isCopied.value = true
message.success('建表 SQL 已复制到剪贴板')
setTimeout(() => {
isCopied.value = false
}, 2000)
}
/** 组件初始化 */
onMounted(() => {
if (!isEmpty(config.value)) {
return
}
config.value = {
type: IotDataSinkTypeEnum.DATABASE + '', // 序列化成对应类型时使用
jdbcUrl: '',
username: '',
password: '',
tableName: 'iot_device_message_sink'
}
})
</script>
<style scoped>
/* 终端风卡片设计 (Tokyo Night 极客美学) */
.terminal-card {
margin-top: 32px;
margin-bottom: 8px;
border-radius: 12px;
background-color: #1a1b26;
box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.4);
border: 1px solid #24283b;
overflow: hidden;
font-family: 'Fira Code', 'JetBrains Mono', Consolas, Monaco, monospace;
}
.terminal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
background-color: #24283b;
border-bottom: 1px solid #16161e;
position: relative;
}
.terminal-dots {
display: flex;
gap: 8px;
}
.dot {
width: 12px;
height: 12px;
border-radius: 50%;
transition: transform 0.2s ease;
}
.dot:hover {
transform: scale(1.2);
}
.dot.red {
background-color: #f7768e;
box-shadow: 0 0 5px rgba(247, 118, 142, 0.4);
}
.dot.yellow {
background-color: #e0af68;
box-shadow: 0 0 5px rgba(224, 175, 104, 0.4);
}
.dot.green {
background-color: #9ece6a;
box-shadow: 0 0 5px rgba(158, 206, 106, 0.4);
}
.terminal-title {
color: #a9b1d6;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.8px;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.terminal-copy-btn {
background: transparent;
border: 1px solid #414868;
color: #a9b1d6;
border-radius: 6px;
padding: 6px 12px;
font-size: 12px;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
display: flex;
align-items: center;
gap: 6px;
font-family: inherit;
}
.terminal-copy-btn:hover {
background: #bb9af7;
border-color: #bb9af7;
color: #1a1b26;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(187, 154, 247, 0.3);
}
.terminal-copy-btn:active {
transform: translateY(0);
}
.copy-icon {
font-size: 14px;
}
.terminal-body {
padding: 20px;
color: #c0caf5;
font-size: 13px;
line-height: 1.6;
}
.terminal-desc {
color: #7dcfff;
margin-bottom: 16px;
font-family: var(--el-font-family);
font-size: 13px;
padding-bottom: 16px;
border-bottom: 1px dashed #292e42;
}
.terminal-code-wrapper {
overflow-x: auto;
border-radius: 8px;
}
.terminal-code {
margin: 0;
white-space: pre;
min-width: max-content;
}
.terminal-code code {
font-family: inherit;
}
/* 手工实现的轻量级 SQL 语法高亮 (Tokyo Night Color Palette) */
.kw {
color: #bb9af7;
} /* 紫色 - 关键字 */
.type {
color: #2ac3de;
} /* 青色 - 数据类型 */
.string {
color: #9ece6a;
} /* 绿色 - 字符串/注释 */
.identifier {
color: #c0caf5;
} /* 浅蓝 - 变量名/默认字色 */
.num {
color: #ff9e64;
} /* 橙色 - 数字 */
/* 定制代码块的滚动条 */
.terminal-code-wrapper::-webkit-scrollbar {
height: 8px;
}
.terminal-code-wrapper::-webkit-scrollbar-thumb {
background: #414868;
border-radius: 4px;
}
.terminal-code-wrapper::-webkit-scrollbar-thumb:hover {
background: #565f89;
}
.terminal-code-wrapper::-webkit-scrollbar-track {
background: transparent;
}
</style>

2
src/views/iot/rule/data/sink/config/index.ts
View File

@ -2,6 +2,7 @@ import HttpConfigForm from './HttpConfigForm.vue'
import TcpConfigForm from './TcpConfigForm.vue'
import WebSocketConfigForm from './WebSocketConfigForm.vue'
import MqttConfigForm from './MqttConfigForm.vue'
import DatabaseConfigForm from './DatabaseConfigForm.vue'
import RocketMQConfigForm from './RocketMQConfigForm.vue'
import KafkaMQConfigForm from './KafkaMQConfigForm.vue'
import RabbitMQConfigForm from './RabbitMQConfigForm.vue'
@ -12,6 +13,7 @@ export {
TcpConfigForm,
WebSocketConfigForm,
MqttConfigForm,
DatabaseConfigForm,
RocketMQConfigForm,
KafkaMQConfigForm,
RabbitMQConfigForm,