Yaxin
/
Robot-Al-Platform-Web
28
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 事件模块切换逻辑开发

Browse Source
master
JINGYJ 2 weeks ago
parent 72ca24ba38
commit 56f94ed745
5 changed files with 1177 additions and 164 deletions
Show Stats Download Patch File Download Diff File

BIN
src/renderer/src/assets/images/common/table_addBtn.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 508 B

252
src/renderer/src/views/Design/CommManagement/commManagement.vue
Unescape Escape View File

@ -48,158 +48,24 @@
</div> </div>
<div class="commManagement-line-second" /> <div class="commManagement-line-second" />
<div class="commManagement-content"> <div class="commManagement-content">
<el-form <!-- 设备表单 -->
label-width="auto" <DeviceForm v-if="activeTab === 'device'" :form-data="formDeviceInfo" :options="options" />
size="default" <!-- 接收事件表单 -->
:model="formDeviceInfo" <ReceiveEventForm
style="max-width: 752px"
v-if="activeTab === 'device'"
>
<div>通信协议</div>
<el-row :gutter="24">
<el-col :span="12">
<el-form-item label="协议类型" label-position="top">
<!-- <el-input v-model="formDeviceInfo.protocol" /> -->
<el-select
v-model="formDeviceInfo.protocol"
placeholder="Select"
class="device-select"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="设备名称" label-position="top">
<el-input v-model="formDeviceInfo.deviceName" />
</el-form-item>
</el-col>
</el-row>
<div>通信参数</div>
<el-row :gutter="24">
<el-col :span="12">
<el-form-item label="目标IP" label-position="top">
<el-input v-model="formDeviceInfo.IP" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="目标端口" label-position="top">
<el-input v-model="formDeviceInfo.targetPort" />
</el-form-item>
</el-col>
</el-row>
<el-form-item label="数据上传" label-position="left">
<el-switch v-model="formDeviceInfo.dataUpload" />
</el-form-item>
<el-form-item label="自动重连" label-position="left">
<el-switch v-model="formDeviceInfo.reconnect" />
</el-form-item>
<el-form-item label="接受结束符" label-position="left">
<el-switch v-model="formDeviceInfo.acceptEnd" />
</el-form-item>
<el-form-item v-if="formDeviceInfo.acceptEnd">
<el-tabs v-model="dataTab" class="data-tabs" @tab-click="handleClick">
<el-tab-pane label="接收数据" name="receive">
<el-input
v-model="formDeviceInfo.endInfo"
type="textarea"
resize="none"
class="fixed-height-textarea"
:rows="4"
maxlength="350"
/>
</el-tab-pane>
<el-tab-pane label="发送数据" name="send">
<el-input
v-model="formDeviceInfo.endInfo"
type="textarea"
resize="none"
class="fixed-height-textarea"
:rows="4"
maxlength="350"
/>
</el-tab-pane>
</el-tabs>
</el-form-item>
<el-row :gutter="20" v-if="formDeviceInfo.acceptEnd">
<el-col :span="6">
<el-checkbox value="16radix" name="type"> 16进制 </el-checkbox>
</el-col>
<el-col :span="6" :offset="12">
<DSButton type="danger" class="mr-2 form-device-btn">清空内容</DSButton>
<DSButton type="danger" class="form-device-btn"> 接收数据</DSButton>
</el-col>
</el-row>
</el-form>
<el-form>
<el-form
label-width="auto"
size="default"
:model="formEventInfo"
style="max-width: 752px"
v-if="activeTab === 'receive'" v-if="activeTab === 'receive'"
> :form-data="formEventInfo"
<el-row :gutter="24"> :receive-event-type="receiveEventType"
<el-col :span="12"> :options="options"
<el-form-item label="绑定设备" label-position="top"> @addRow="handleTableAdd"
<el-select
v-model="formEventInfo.deviceName"
placeholder="Select"
class="device-select"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/> />
</el-select> <!-- 发送事件表单 -->
</el-form-item> <SendEventForm
</el-col> v-if="activeTab === 'send'"
<el-col :span="12"> :form-data="formSendEventInfo"
<el-form-item label="分隔符" label-position="top"> :send-event-type="sendEventType"
<el-select :options="options"
v-model="formEventInfo.separator" @addRow="handleTableAdd"
placeholder="Select"
class="device-select"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/> />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="字符长度比较" label-position="left">
<el-switch v-model="formEventInfo.lengthCompare" />
</el-form-item>
<el-row :gutter="24">
<el-col :span="12">
<el-form-item label="字符长度" label-position="top">
<el-input v-model="formEventInfo.characterLength" />
</el-form-item>
</el-col>
</el-row>
<div class="event-table">
<div class="mb-2">输出列表</div>
<el-table :data="formEventInfo.tableData" class="eventList-table">
<el-table-column fixed prop="date" label="序号" />
<el-table-column prop="name" label="名称" />
<el-table-column prop="state" label="类型" />
<el-table-column prop="city" label="结果" />
</el-table>
<div>添加数据</div>
</div>
</el-form>
</el-form>
</div> </div>
</div> </div>
</DSDialog> </DSDialog>
@ -215,6 +81,9 @@ import { DSButton } from '@/components/Button'
import { DSDialog } from '@/components/Dialog' import { DSDialog } from '@/components/Dialog'
import DeviceDialog from './deviceDialog.vue' import DeviceDialog from './deviceDialog.vue'
import EventDialog from './eventDialog.vue' import EventDialog from './eventDialog.vue'
import DeviceForm from './deviceForm.vue'
import ReceiveEventForm from './receiveEventForm.vue'
import SendEventForm from './sendEventForm.vue'
import DeviceIcon from '@/assets/images/common/device.png' import DeviceIcon from '@/assets/images/common/device.png'
import DeviceSelectedIcon from '@/assets/images/common/device_selected.png' import DeviceSelectedIcon from '@/assets/images/common/device_selected.png'
import SendIcon from '@/assets/images/common/send.png' import SendIcon from '@/assets/images/common/send.png'
@ -323,7 +192,7 @@ const receiveList = ref([
} }
}, },
{ name: '文本-协议组装', enabled: false }, { name: '文本-协议组装', enabled: false },
{ name: '字节匹配-协议组装', enabled: false }, { name: '字节-协议组装', enabled: false },
{ name: '脚本', enabled: false } { name: '脚本', enabled: false }
]) ])
// 发送事件列表 // 发送事件列表
@ -346,7 +215,9 @@ const sendList = ref([
{ name: '脚本', enabled: false } { name: '脚本', enabled: false }
]) ])
const dataTab = ref('receive') // 事件类型
const receiveEventType = ref('')
const sendEventType = ref('')
// 设备信息表单 // 设备信息表单
const formDeviceInfo = reactive({ const formDeviceInfo = reactive({
protocol: '', protocol: '',
@ -359,7 +230,22 @@ const formDeviceInfo = reactive({
endInfo: '' endInfo: ''
}) })
// 接收事件信息表单 // 接收事件信息表单
const formEventInfo = reactive({}) const formEventInfo = reactive({
deviceName: '',
separator: '',
lengthCompare: false,
characterLength: '',
tableData: []
})
// 发送事件信息表单
const formSendEventInfo = reactive({
deviceName: '',
separator: '',
lengthCompare: false,
characterLength: '',
tableData: []
})
interface CommBar { interface CommBar {
label: string label: string
@ -397,6 +283,32 @@ const selectDevice = (device: Device) => {
if (activeTab.value === 'device') { if (activeTab.value === 'device') {
Object.assign(formDeviceInfo, device.info) Object.assign(formDeviceInfo, device.info)
} else if (activeTab.value === 'receive') { } else if (activeTab.value === 'receive') {
switch (device.name) {
case '文本-协议解析':
receiveEventType.value = 'textParse'
break
case '文本-协议组装':
receiveEventType.value = 'textMake'
break
case '字节-协议组装':
receiveEventType.value = 'byteMake'
break
case '脚本':
receiveEventType.value = 'script'
break
}
} else if (activeTab.value === 'send') {
switch (device.name) {
case '文本-直接输出':
sendEventType.value = 'textParse'
break
case '文本-组装输出':
sendEventType.value = 'textMake'
break
case '脚本':
sendEventType.value = 'script'
break
}
} }
} }
@ -414,6 +326,24 @@ const addDevice = () => {
console.log(isDeviceDialog.value, 'isDeviceDialog.value') console.log(isDeviceDialog.value, 'isDeviceDialog.value')
} }
const handleTableAdd = () => {
if (activeTab.value === 'receive') {
formEventInfo.tableData.push({
num: formEventInfo.tableData.length + 1,
name: 'output1',
type: 'int',
result: ''
})
} else if (activeTab.value === 'send') {
formSendEventInfo.tableData.push({
num: formSendEventInfo.tableData.length + 1,
name: 'input',
type: 'int',
result: ''
})
}
}
// 接收事件内容 // 接收事件内容
const receiveData = ref('') const receiveData = ref('')
// 发送事件内容 // 发送事件内容
@ -537,6 +467,15 @@ const handleClose = () => {
height: 224px; height: 224px;
background: #363940; background: #363940;
} }
.table-add-btn {
box-sizing: border-box;
width: 128px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
} }
} }
.commManagement-line-first, .commManagement-line-first,
@ -551,14 +490,5 @@ const handleClose = () => {
.commManagement-line-second { .commManagement-line-second {
left: 372px; left: 372px;
} }
:deep(.eventList-table .el-table__header > thead th) {
color: #fff;
background-color: rgba(21, 77, 221, 0.8);
border-color: #4e5969;
}
:deep(.el-table--fit .el-table__inner-wrapper:before) {
background-color: #4e5969;
}
} }
</style> </style>

134
src/renderer/src/views/Design/CommManagement/deviceForm.vue
Unescape Escape View File

@ -0,0 +1,134 @@
<template>
<el-form label-width="auto" size="default" :model="formData" style="max-width: 752px">
<div>通信协议</div>
<el-row :gutter="24">
<el-col :span="12">
<el-form-item label="协议类型" label-position="top">
<el-select v-model="formData.protocol" placeholder="Select" class="device-select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="设备名称" label-position="top">
<el-input v-model="formData.deviceName" />
</el-form-item>
</el-col>
</el-row>
<!-- 其他设备表单内容（通信参数、开关等） -->
<div>通信参数</div>
<el-row :gutter="24">
<el-col :span="12">
<el-form-item label="目标IP" label-position="top">
<el-input v-model="formData.IP" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="目标端口" label-position="top">
<el-input v-model="formData.targetPort" />
</el-form-item>
</el-col>
</el-row>
<el-form-item label="数据上传" label-position="left">
<el-switch v-model="formData.dataUpload" />
</el-form-item>
<el-form-item label="自动重连" label-position="left">
<el-switch v-model="formData.reconnect" />
</el-form-item>
<el-form-item label="接受结束符" label-position="left">
<el-switch v-model="formData.acceptEnd" />
</el-form-item>
<el-form-item v-if="formData.acceptEnd">
<el-tabs v-model="dataTab" class="data-tabs" @tab-click="handleClick">
<el-tab-pane label="接收数据" name="receive">
<el-input
v-model="formData.endInfo"
type="textarea"
resize="none"
class="fixed-height-textarea"
:rows="4"
maxlength="350"
/>
</el-tab-pane>
<el-tab-pane label="发送数据" name="send">
<el-input
v-model="formData.endInfo"
type="textarea"
resize="none"
class="fixed-height-textarea"
:rows="4"
maxlength="350"
/>
</el-tab-pane>
</el-tabs>
</el-form-item>
<el-row :gutter="20" v-if="formData.acceptEnd">
<el-col :span="6">
<el-checkbox value="16radix" name="type"> 16进制 </el-checkbox>
</el-col>
<el-col :span="6" :offset="12">
<DSButton type="danger" class="mr-2 form-device-btn">清空内容</DSButton>
<DSButton type="danger" class="form-device-btn"> 接收数据</DSButton>
</el-col>
</el-row>
<!-- 省略剩余设备表单内容（与原代码一致） -->
</el-form>
</template>
<script setup lang="ts">
import { DSButton } from '@/components/Button'
// 接收父组件传入的表单数据（双向绑定）
const props = defineProps({
formData: {
type: Object,
required: true
},
options: {
type: Array,
default: () => []
}
})
const dataTab = ref('receive')
// 暴露表单数据修改事件（可选，用于复杂场景）
const emit = defineEmits(['update:formData'])
</script>
<style scoped lang="scss">
// 复用原有的设备表单样式
.device-select {
color: #fff;
:deep(.el-select__wrapper) {
background: #303136;
.el-select__selected-item {
color: #fff;
}
}
}
.data-tabs {
width: 100%;
:deep(.el-tabs__item) {
color: #fff;
}
:deep(.fixed-height-textarea) {
margin-bottom: 8px;
height: 110px !important;
min-height: 110px !important;
max-height: 110px !important;
.el-textarea__inner {
height: 110px !important;
background: #303136;
color: #fff;
}
}
}
.form-device-btn {
width: 80px;
padding: 0 12px;
}
/* 其他设备表单相关样式 */
</style>

508
src/renderer/src/views/Design/CommManagement/receiveEventForm.vue
Unescape Escape View File

@ -0,0 +1,508 @@
<template>
<el-form label-width="auto" size="default" :model="formData" style="max-width: 752px">
<!-- 文本协议解析 -->
<template v-if="receiveEventType === 'textParse'">
<el-row :gutter="24">
<el-col :span="12">
<el-form-item label="绑定设备" label-position="top">
<el-select v-model="formData.deviceName" placeholder="Select" class="device-select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="分隔符" label-position="top">
<el-select v-model="formData.separator" placeholder="Select" class="device-select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="字符长度比较" label-position="left">
<el-switch v-model="formData.lengthCompare" />
</el-form-item>
<el-row :gutter="24" v-if="formData.lengthCompare">
<el-col :span="12">
<el-form-item label="字符长度" label-position="top">
<el-input v-model="formData.characterLength" />
</el-form-item>
</el-col>
</el-row>
<div class="event-table">
<div class="mb-2">输出列表</div>
<el-table :data="formData.tableData" class="eventList-table">
<el-table-column fixed prop="num" label="序号" />
<el-table-column prop="name" label="名称">
<template #default="scope">
<el-input v-model="scope.row.name" />
</template>
</el-table-column>
<el-table-column prop="type" label="类型">
<template #default="scope">
<el-select v-model="scope.row.type" placeholder="Select" class="device-select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</template>
</el-table-column>
<el-table-column prop="result" label="结果" />
</el-table>
<div class="table-add-btn" @click="handleTableAdd">
<img
src="@/assets/images/common/table_addBtn.png"
alt=""
class="w-[16px] h-[16px] mr-2"
/>添加数据
</div>
</div>
</template>
<!-- 文本协议组装 -->
<template v-if="receiveEventType === 'textMake'">
<el-tabs v-model="dataTab" class="data-tabs" @tab-click="handleClick">
<el-tab-pane label="输入配置" name="inputConfig"> </el-tab-pane>
<el-tab-pane label="组装配置" name="makeConfig"> </el-tab-pane>
</el-tabs>
<el-form-item label="回复给设备" label-position="left" v-if="dataTab === 'makeConfig'">
<el-switch v-model="formData.reply" @change="handleSwitch" />
</el-form-item>
<el-row :gutter="24">
<el-col :span="12" v-if="dataTab == 'inputConfig'">
<el-form-item label="绑定设备" label-position="top">
<el-select v-model="formData.deviceName" placeholder="Select" class="device-select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col
:span="12"
v-if="
// 条件1：输入配置标签页 → 始终显示
dataTab === 'inputConfig' ||
// 条件2：组装配置标签页 + 回复给设备开关打开 → 显示
(dataTab === 'makeConfig' && formData.reply)
"
>
<el-form-item label="分隔符" label-position="top">
<el-select v-model="formData.separator" placeholder="Select" class="device-select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="字符长度比较" label-position="left" v-if="dataTab == 'inputConfig'">
<el-switch v-model="formData.lengthCompare" />
</el-form-item>
<el-row :gutter="24" v-if="formData.lengthCompare">
<el-col :span="12">
<el-form-item label="字符长度" label-position="top">
<el-input v-model="formData.characterLength" />
</el-form-item>
</el-col>
</el-row>
<div class="event-table">
<div class="mb-2">输出列表</div>
<el-table :data="formData.tableData" class="eventList-table">
<el-table-column fixed prop="num" label="序号" width="60" />
<el-table-column prop="name" label="名称" width="120">
<template #default="scope">
<el-input v-model="scope.row.name" />
</template>
</el-table-column>
<el-table-column prop="type" label="类型" width="120">
<template #default="scope">
<el-select v-model="scope.row.type" placeholder="Select" class="device-select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</template>
</el-table-column>
<el-table-column prop="result" label="比较规则配置" v-if="dataTab == 'inputConfig'">
<template #default="scope">
<el-select
v-model="scope.row.type"
placeholder="Select"
class="device-select"
style="width: 100px"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-input
v-model="scope.row.name"
style="width: 100px; margin-left: 12px; margin-right: 12px"
/>
<el-input v-model="scope.row.name" style="width: 100px" />
</template>
</el-table-column>
<el-table-column prop="name" label="内容" v-if="dataTab == 'makeConfig'">
<template #default="scope">
<el-input v-model="scope.row.name" />
</template>
</el-table-column>
<el-table-column prop="result" width="60"></el-table-column>
</el-table>
<div class="table-add-btn" @click="handleTableAdd">
<img
src="@/assets/images/common/table_addBtn.png"
alt=""
class="w-[16px] h-[16px] mr-2"
/>添加数据
</div>
</div>
</template>
<!-- 字节协议组装 -->
<template v-if="receiveEventType === 'byteMake'">
<el-tabs v-model="dataTab" class="data-tabs" @tab-click="handleClick">
<el-tab-pane label="解析配置" name="inputConfig"> </el-tab-pane>
<el-tab-pane label="组装配置" name="makeConfig"> </el-tab-pane>
</el-tabs>
<el-form-item label="回复给设备" label-position="left" v-if="dataTab === 'makeConfig'">
<el-switch v-model="formData.reply" @change="handleSwitch" />
</el-form-item>
<el-row :gutter="24">
<el-col :span="12" v-if="dataTab == 'inputConfig'">
<el-form-item label="绑定设备" label-position="top">
<el-select v-model="formData.deviceName" placeholder="Select" class="device-select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12" v-if="dataTab === 'makeConfig' && formData.reply">
<el-form-item label="分隔符" label-position="top">
<el-select v-model="formData.separator" placeholder="Select" class="device-select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="字符长度比较" label-position="left" v-if="dataTab == 'inputConfig'">
<el-switch v-model="formData.lengthCompare" />
</el-form-item>
<el-row :gutter="24" v-if="formData.lengthCompare">
<el-col :span="12">
<el-form-item label="字符长度" label-position="top">
<el-input v-model="formData.characterLength" />
</el-form-item>
</el-col>
</el-row>
<el-form-item label="ASCII数据" label-position="left" v-if="dataTab == 'inputConfig'">
<el-switch v-model="formData.ASCII" />
</el-form-item>
<el-row :gutter="24">
<el-col :span="12" v-if="dataTab == 'inputConfig'">
<el-form-item label="规则匹配逻辑" label-position="top">
<el-select v-model="formData.ruleMatch" placeholder="Select" class="device-select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<div class="event-table">
<div class="mb-2">输出列表</div>
<el-table :data="formData.tableData" class="eventList-table">
<el-table-column fixed prop="num" label="序号" width="60" />
<template v-if="dataTab == 'inputConfig'">
<el-table-column prop="name" label="名称" width="80">
<template #default="scope">
<el-input v-model="scope.row.name" />
</template>
</el-table-column>
<el-table-column prop="name" label="字节起始位置" width="150">
<template #default="scope">
<el-input v-model="scope.row.name" style="width: 50px; margin-right: 12px" />
<el-input v-model="scope.row.name" style="width: 50px" />
</template>
</el-table-column>
<el-table-column prop="type" label="类型" width="90">
<template #default="scope">
<el-select v-model="scope.row.type" placeholder="int" class="device-select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</template>
</el-table-column>
<el-table-column prop="type" label="顺序" width="90">
<template #default="scope">
<el-select v-model="scope.row.type" placeholder="int" class="device-select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</template>
</el-table-column>
<el-table-column prop="result" label="比较规则配置">
<template #default="scope">
<el-select
v-model="scope.row.type"
placeholder="不比较"
class="device-select"
style="width: 70px"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-input
v-model="scope.row.name"
style="width: 50px; margin-left: 12px; margin-right: 12px"
/>
<el-input v-model="scope.row.name" style="width: 50px" />
</template>
</el-table-column>
</template>
<template v-if="dataTab == 'makeConfig'">
<el-table-column prop="name" label="名称" width="120">
<template #default="scope">
<el-input v-model="scope.row.name" />
</template>
</el-table-column>
<el-table-column prop="type" label="类型" width="120">
<template #default="scope">
<el-select v-model="scope.row.type" placeholder="Select" class="device-select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</template>
</el-table-column>
<el-table-column prop="name" label="内容">
<template #default="scope">
<el-input v-model="scope.row.name" />
</template>
</el-table-column>
<el-table-column prop="result" label="结果"></el-table-column>
</template>
<el-table-column prop="result" width="60"></el-table-column>
</el-table>
<div class="table-add-btn" @click="handleTableAdd">
<img
src="@/assets/images/common/table_addBtn.png"
alt=""
class="w-[16px] h-[16px] mr-2"
/>添加数据
</div>
</div>
</template>
<!-- 脚本 -->
<template v-if="receiveEventType === 'script'">
<el-row :gutter="24">
<el-col :span="12">
<el-form-item label="绑定设备" label-position="top">
<el-select v-model="formData.deviceName" placeholder="Select" class="device-select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="回复给设备" label-position="left" v-if="dataTab === 'makeConfig'">
<el-switch v-model="formData.reply" @change="handleSwitch" />
</el-form-item>
<el-row :gutter="24" v-if="formData.reply">
<el-col :span="12">
<el-form-item label="分隔符" label-position="top">
<el-select v-model="formData.separator" placeholder="Select" class="device-select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="载入路径" label-position="top">
<el-select v-model="formData.loadingPath" placeholder="Select" class="device-select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<div class="event-table">
<div class="mb-2">组装列表</div>
<el-table :data="formData.tableData" class="eventList-table">
<el-table-column fixed prop="num" label="序号" width="60" />
<el-table-column prop="name" label="名称">
<template #default="scope">
<el-input v-model="scope.row.name" />
</template>
</el-table-column>
<el-table-column prop="type" label="类型">
<template #default="scope">
<el-select v-model="scope.row.type" placeholder="Select" class="device-select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</template>
</el-table-column>
<el-table-column prop="result" label="结果"></el-table-column>
</el-table>
</div>
</template>
</el-form>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
const props = defineProps({
formData: {
type: Object,
required: true
},
receiveEventType: {
type: String,
required: true
},
options: {
type: Array,
default: () => []
}
})
const dataTab = ref('inputConfig')
// 表格添加数据方法
const emit = defineEmits(['addRow'])
const handleTableAdd = () => {
emit('addRow') // 通知父组件添加行（或直接在组件内处理）
}
const handleClick = (tab: any) => {
dataTab.value = tab.props.name
}
const handleSwitch = (val: any) => {
console.log(val)
}
</script>
<style scoped lang="scss">
// 复用原有的接收事件表单样式
.device-select {
color: #fff;
:deep(.el-select__wrapper) {
background: #303136;
.el-select__selected-item {
color: #fff;
}
}
}
.data-tabs {
width: 100%;
:deep(.el-tabs__item) {
color: #fff;
}
}
.event-table {
.eventList-table {
width: 100%;
height: 240px;
background: #363940;
}
.table-add-btn {
/* 按钮样式 */
box-sizing: border-box;
width: 128px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
}
:deep(.eventList-table .el-table__header > thead th) {
color: #fff;
background-color: rgba(21, 77, 221, 0.1);
border-color: #4e5969;
}
:deep(.eventList-table .el-table__header > thead tr) {
background: transparent;
}
:deep(.eventList-table .el-table__body > tbody tr) {
color: #fff;
background-color: transparent;
& > td {
border: none;
}
}
:deep(.eventList-table .el-table__body .hover-row) {
& > td {
background: #303136;
}
}
:deep(.el-table--fit .el-table__inner-wrapper:before) {
background-color: #4e5969;
}
</style>

441
src/renderer/src/views/Design/CommManagement/sendEventForm.vue
Unescape Escape View File

@ -0,0 +1,441 @@
<template>
<el-form label-width="auto" size="default" :model="formData" style="max-width: 752px">
<!-- 文本直接输出 -->
<template v-if="sendEventType === 'textParse'">
<el-row :gutter="24">
<el-col :span="12">
<el-form-item label="绑定设备" label-position="top">
<el-select v-model="formData.deviceName" placeholder="Select" class="device-select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="分隔符" label-position="top">
<el-select v-model="formData.separator" placeholder="Select" class="device-select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="字符长度比较" label-position="left">
<el-switch v-model="formData.lengthCompare" />
</el-form-item>
<el-row :gutter="24" v-if="formData.lengthCompare">
<el-col :span="12">
<el-form-item label="字符长度" label-position="top">
<el-input v-model="formData.characterLength" />
</el-form-item>
</el-col>
</el-row>
<div class="event-table">
<div class="mb-2">输出列表</div>
<el-table :data="formData.tableData" class="eventList-table">
<el-table-column fixed prop="num" label="序号" />
<el-table-column prop="name" label="名称">
<template #default="scope">
<el-input v-model="scope.row.name" />
</template>
</el-table-column>
<el-table-column prop="type" label="类型">
<template #default="scope">
<el-select v-model="scope.row.type" placeholder="Select" class="device-select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</template>
</el-table-column>
<el-table-column prop="result" />
</el-table>
<div class="table-add-btn" @click="handleTableAdd">
<img
src="@/assets/images/common/table_addBtn.png"
alt=""
class="w-[16px] h-[16px] mr-2"
/>添加数据
</div>
</div>
</template>
<!-- 文本组装输出 -->
<template v-if="sendEventType === 'textMake'">
<el-tabs v-model="dataTab" class="data-tabs" @tab-click="handleClick">
<el-tab-pane label="输入配置" name="inputConfig"> </el-tab-pane>
<el-tab-pane label="组装配置" name="makeConfig"> </el-tab-pane>
</el-tabs>
<el-row :gutter="24">
<el-col :span="12" v-if="dataTab == 'inputConfig'">
<el-form-item label="绑定设备" label-position="top">
<el-select v-model="formData.deviceName" placeholder="Select" class="device-select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12" v-if="dataTab === 'makeConfig'">
<el-form-item label="分隔符" label-position="top">
<el-select v-model="formData.separator" placeholder="Select" class="device-select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<div class="event-table">
<div class="mb-2">输出列表</div>
<el-table :data="formData.tableData" class="eventList-table">
<el-table-column fixed prop="num" label="序号" width="60" />
<el-table-column prop="name" label="名称">
<template #default="scope">
<el-input v-model="scope.row.name" />
</template>
</el-table-column>
<el-table-column prop="type" label="类型">
<template #default="scope">
<el-select v-model="scope.row.type" placeholder="Select" class="device-select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</template>
</el-table-column>
<el-table-column prop="result"></el-table-column>
</el-table>
<div class="table-add-btn" @click="handleTableAdd">
<img
src="@/assets/images/common/table_addBtn.png"
alt=""
class="w-[16px] h-[16px] mr-2"
/>添加数据
</div>
</div>
</template>
<!-- 字节协议组装 -->
<template v-if="sendEventType === 'byteMake'">
<el-tabs v-model="dataTab" class="data-tabs" @tab-click="handleClick">
<el-tab-pane label="解析配置" name="inputConfig"> </el-tab-pane>
<el-tab-pane label="组装配置" name="makeConfig"> </el-tab-pane>
</el-tabs>
<el-form-item label="回复给设备" label-position="left" v-if="dataTab === 'makeConfig'">
<el-switch v-model="formData.reply" @change="handleSwitch" />
</el-form-item>
<el-row :gutter="24">
<el-col :span="12" v-if="dataTab == 'inputConfig'">
<el-form-item label="绑定设备" label-position="top">
<el-select v-model="formData.deviceName" placeholder="Select" class="device-select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12" v-if="dataTab === 'makeConfig' && formData.reply">
<el-form-item label="分隔符" label-position="top">
<el-select v-model="formData.separator" placeholder="Select" class="device-select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="字符长度比较" label-position="left" v-if="dataTab == 'inputConfig'">
<el-switch v-model="formData.lengthCompare" />
</el-form-item>
<el-row :gutter="24" v-if="formData.lengthCompare">
<el-col :span="12">
<el-form-item label="字符长度" label-position="top">
<el-input v-model="formData.characterLength" />
</el-form-item>
</el-col>
</el-row>
<el-form-item label="ASCII数据" label-position="left" v-if="dataTab == 'inputConfig'">
<el-switch v-model="formData.ASCII" />
</el-form-item>
<el-row :gutter="24">
<el-col :span="12" v-if="dataTab == 'inputConfig'">
<el-form-item label="规则匹配逻辑" label-position="top">
<el-select v-model="formData.ruleMatch" placeholder="Select" class="device-select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<div class="event-table">
<div class="mb-2">输出列表</div>
<el-table :data="formData.tableData" class="eventList-table">
<el-table-column fixed prop="num" label="序号" width="60" />
<template v-if="dataTab == 'inputConfig'">
<el-table-column prop="name" label="名称" width="80">
<template #default="scope">
<el-input v-model="scope.row.name" />
</template>
</el-table-column>
<el-table-column prop="name" label="字节起始位置" width="150">
<template #default="scope">
<el-input v-model="scope.row.name" style="width: 50px; margin-right: 12px" />
<el-input v-model="scope.row.name" style="width: 50px" />
</template>
</el-table-column>
<el-table-column prop="type" label="类型" width="90">
<template #default="scope">
<el-select v-model="scope.row.type" placeholder="int" class="device-select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</template>
</el-table-column>
<el-table-column prop="type" label="顺序" width="90">
<template #default="scope">
<el-select v-model="scope.row.type" placeholder="int" class="device-select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</template>
</el-table-column>
<el-table-column prop="result" label="比较规则配置">
<template #default="scope">
<el-select
v-model="scope.row.type"
placeholder="不比较"
class="device-select"
style="width: 70px"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-input
v-model="scope.row.name"
style="width: 50px; margin-left: 12px; margin-right: 12px"
/>
<el-input v-model="scope.row.name" style="width: 50px" />
</template>
</el-table-column>
</template>
<template v-if="dataTab == 'makeConfig'">
<el-table-column prop="name" label="名称" width="120">
<template #default="scope">
<el-input v-model="scope.row.name" />
</template>
</el-table-column>
<el-table-column prop="type" label="类型" width="120">
<template #default="scope">
<el-select v-model="scope.row.type" placeholder="Select" class="device-select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</template>
</el-table-column>
<el-table-column prop="name" label="内容">
<template #default="scope">
<el-input v-model="scope.row.name" />
</template>
</el-table-column>
<el-table-column prop="result" label="结果"></el-table-column>
</template>
<el-table-column prop="result" width="60"></el-table-column>
</el-table>
<div class="table-add-btn" @click="handleTableAdd">
<img
src="@/assets/images/common/table_addBtn.png"
alt=""
class="w-[16px] h-[16px] mr-2"
/>添加数据
</div>
</div>
</template>
<!-- 脚本 -->
<template v-if="sendEventType === 'script'">
<el-row :gutter="24">
<el-col :span="12">
<el-form-item label="绑定设备" label-position="top">
<el-select v-model="formData.deviceName" placeholder="Select" class="device-select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="载入路径" label-position="top">
<el-select v-model="formData.loadingPath" placeholder="Select" class="device-select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<div class="event-table">
<div class="mb-2">组装列表</div>
<el-table :data="formData.tableData" class="eventList-table">
<el-table-column fixed prop="num" label="序号" width="60" />
<el-table-column prop="name" label="名称">
<template #default="scope">
<el-input v-model="scope.row.name" />
</template>
</el-table-column>
<el-table-column prop="type" label="类型">
<template #default="scope">
<el-select v-model="scope.row.type" placeholder="Select" class="device-select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</template>
</el-table-column>
<el-table-column prop="result" label="数据结果"></el-table-column>
</el-table>
</div>
</template>
</el-form>
</template>
<script setup lang="ts">
const props = defineProps({
formData: {
type: Object,
required: true
},
sendEventType: {
type: String,
required: true
},
options: {
type: Array,
default: () => []
}
})
const dataTab = ref('inputConfig')
// 表格添加数据方法
const emit = defineEmits(['addRow'])
const handleTableAdd = () => {
emit('addRow') // 通知父组件添加行（或直接在组件内处理）
}
const handleClick = (tab: any) => {
dataTab.value = tab.props.name
}
const handleSwitch = (val: any) => {
console.log(val)
}
</script>
<style scoped lang="scss">
// 复用原有的接收事件表单样式
.device-select {
color: #fff;
:deep(.el-select__wrapper) {
background: #303136;
.el-select__selected-item {
color: #fff;
}
}
}
.data-tabs {
width: 100%;
:deep(.el-tabs__item) {
color: #fff;
}
}
.event-table {
.eventList-table {
width: 100%;
height: 240px;
background: #363940;
}
.table-add-btn {
/* 按钮样式 */
box-sizing: border-box;
width: 128px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
}
:deep(.eventList-table .el-table__header > thead th) {
color: #fff;
background-color: rgba(21, 77, 221, 0.1);
border-color: #4e5969;
}
:deep(.eventList-table .el-table__header > thead tr) {
background: transparent;
}
:deep(.eventList-table .el-table__body > tbody tr) {
color: #fff;
background-color: transparent;
& > td {
border: none;
}
}
:deep(.eventList-table .el-table__body .hover-row) {
& > td {
background: #303136;
}
}
:deep(.el-table--fit .el-table__inner-wrapper:before) {
background-color: #4e5969;
}
</style>
Write Preview
Loading…
Cancel
Save