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 cc21e18330
commit 72ca24ba38
2 changed files with 345 additions and 14 deletions
Show Stats Download Patch File Download Diff File

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

@ -1,6 +1,12 @@
<template>
<!-- 通信管理弹框 -->
<DSDialog title="通信管理" v-model="show" width="1200" class="commManagement-dialog ds-dialog">
<DSDialog
title="通信管理"
v-model="show"
width="1200"
class="commManagement-dialog ds-dialog"
@close="handleClose"
>
<div class="commManagement-container">
<div class="commManagement-siderBar">
<div
@ -25,7 +31,7 @@
<div
class="commManagement-infoList-item"
:class="{ active: deviceTab === item.name }"
v-for="(item, index) in deviceList"
v-for="(item, index) in deviceBars"
:key="index"
@click="selectDevice(item)"
>
@ -36,18 +42,36 @@
:image-size="54"
:image="NoDataIcon"
style="margin-top: 130px"
v-if="deviceList.length === 0"
v-if="deviceBars.length === 0"
/>
</div>
</div>
<div class="commManagement-line-second" />
<div class="commManagement-content">
<el-form label-width="auto" size="default" :model="formInfoDevice" style="max-width: 752px">
<el-form
label-width="auto"
size="default"
:model="formDeviceInfo"
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-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">
@ -102,7 +126,7 @@
</el-tab-pane>
</el-tabs>
</el-form-item>
<el-row :gutter="20">
<el-row :gutter="20" v-if="formDeviceInfo.acceptEnd">
<el-col :span="6">
<el-checkbox value="16radix" name="type"> 16进制 </el-checkbox>
</el-col>
@ -112,10 +136,75 @@
</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'"
>
<el-row :gutter="24">
<el-col :span="12">
<el-form-item label="绑定设备" label-position="top">
<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>
</el-col>
<el-col :span="12">
<el-form-item label="分隔符" label-position="top">
<el-select
v-model="formEventInfo.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="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>
</DSDialog>
<DeviceDialog v-model:value="isDeviceDialog" />
<EventDialog v-model:value="isEventDialog" :title="eventDialogTitle" />
</template>
<script setup lang="ts">
@ -125,6 +214,7 @@ defineOptions({
import { DSButton } from '@/components/Button'
import { DSDialog } from '@/components/Dialog'
import DeviceDialog from './deviceDialog.vue'
import EventDialog from './eventDialog.vue'
import DeviceIcon from '@/assets/images/common/device.png'
import DeviceSelectedIcon from '@/assets/images/common/device_selected.png'
import SendIcon from '@/assets/images/common/send.png'
@ -151,6 +241,8 @@ const emit = defineEmits<Emits>()
const show = computed({
get() {
Object.assign(deviceBars, deviceList)
activeTab.value = 'device'
return props.value
},
set(val: boolean) {
@ -158,9 +250,13 @@ const show = computed({
}
})
const isDeviceDialog = ref(false)
const isEventDialog = ref(false)
const eventDialogTitle = ref('')
// 左侧菜单激活状态
const activeTab = ref('device') // device/receive/send/heartbeat/response
// 中间tab
const deviceTab = ref('') // device/receive/send/heartbeat/response
const deviceBars = ref([])
// 根据 activeTab 匹配对应的中文 label
const currentTabLabel = computed(() => {
@ -170,8 +266,30 @@ const currentTabLabel = computed(() => {
return matched ? matched.label : ''
})
const options = [
{
value: 'Option1',
label: 'Option1'
},
{
value: 'Option2',
label: 'Option2'
},
{
value: 'Option3',
label: 'Option3'
},
{
value: 'Option4',
label: 'Option4'
},
{
value: 'Option5',
label: 'Option5'
}
]
// 设备列表
const deviceList = reactive([
const deviceList = ref([
{
name: '1.TCP客户端',
enabled: false,
@ -188,9 +306,48 @@ const deviceList = reactive([
},
{ name: '2.UDP客户端', enabled: false }
])
// 接收事件列表
const receiveList = ref([
{
name: '文本-协议解析',
enabled: false,
info: {
protocol: '1',
deviceName: '1',
IP: '1',
targetPort: '1',
dataUpload: false,
reconnect: false,
acceptEnd: false,
endInfo: '1'
}
},
{ name: '文本-协议组装', enabled: false },
{ name: '字节匹配-协议组装', enabled: false },
{ name: '脚本', enabled: false }
])
// 发送事件列表
const sendList = ref([
{
name: '文本-直接输出',
enabled: false,
info: {
protocol: '1',
deviceName: '1',
IP: '1',
targetPort: '1',
dataUpload: false,
reconnect: false,
acceptEnd: false,
endInfo: '1'
}
},
{ name: '文本-组装输出', enabled: false },
{ name: '脚本', enabled: false }
])
const dataTab = ref('receive')
// 设备信息表单
const formDeviceInfo = reactive({
protocol: '',
deviceName: '',
@ -201,6 +358,8 @@ const formDeviceInfo = reactive({
acceptEnd: false,
endInfo: ''
})
// 接收事件信息表单
const formEventInfo = reactive({})
interface CommBar {
label: string
@ -221,22 +380,36 @@ const commBars: CommBar[] = [
{ label: '响应配置', value: 'response', icon: ResponseIcon, iconSelected: ResponseSelectedIcon }
]
const setActiveTab = (tab: SettingItem) => {
deviceTab.value = ''
activeTab.value = tab.value
console.log(activeTab.value)
if (activeTab.value === 'device') {
Object.assign(deviceBars, deviceList)
} else if (activeTab.value === 'receive') {
Object.assign(deviceBars, receiveList)
} else if (activeTab.value === 'send') {
Object.assign(deviceBars, sendList)
}
}
const selectDevice = (device: Device) => {
deviceTab.value = device.name
if (activeTab.value === 'device') {
Object.assign(formDeviceInfo, device.info)
} else if (activeTab.value === 'receive') {
}
}
// 添加设备
const addDevice = () => {
if (isDeviceDialog.value) {
isDeviceDialog.value = false
} else {
// 弹窗显隐
isDeviceDialog.value = true
if (activeTab.value === 'device') {
isDeviceDialog.value = !isDeviceDialog.value
} else if (activeTab.value === 'receive') {
isEventDialog.value = !isEventDialog.value
eventDialogTitle.value = '接收事件'
} else if (activeTab.value === 'send') {
isEventDialog.value = !isEventDialog.value
eventDialogTitle.value = '发送事件'
}
console.log(isDeviceDialog.value, 'isDeviceDialog.value')
}
@ -247,6 +420,11 @@ const receiveData = ref('')
const sendData = ref('')
// 16进制显示
const hexDisplay = ref(true)
// 处理对话框关闭事件
const handleClose = () => {
activeTab.value = ''
}
</script>
<style scoped lang="scss">
@ -323,6 +501,15 @@ const hexDisplay = ref(true)
flex: 1;
box-sizing: border-box;
padding: 16px 24px 24px;
.device-select {
color: #fff;
:deep(.el-select__wrapper) {
background: #303136;
.el-select__selected-item {
color: #fff;
}
}
}
.data-tabs {
width: 100%;
:deep(.el-tabs__item) {
@ -344,6 +531,13 @@ const hexDisplay = ref(true)
width: 80px;
padding: 0 12px;
}
.event-table {
.eventList-table {
width: 100%;
height: 224px;
background: #363940;
}
}
}
.commManagement-line-first,
.commManagement-line-second {
@ -357,5 +551,14 @@ const hexDisplay = ref(true)
.commManagement-line-second {
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>

128
src/renderer/src/views/Design/CommManagement/eventDialog.vue
Unescape Escape View File

@ -0,0 +1,128 @@
<template>
<!-- 设备管理弹框 -->
<el-dialog
:title="props.title"
v-model="show"
width="520"
class="eventManagement-dialog ds-dialog"
style="margin-top: 244px"
>
<div class="eventManagement-container">
<el-form label-width="auto" size="default" :model="formEventInfo" style="max-width: 472px">
<el-form-item label="处理方式" label-position="top">
<el-select v-model="formEventInfo.way" placeholder="Select" class="event-select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="事件类型" label-position="top">
<el-select v-model="formEventInfo.eventType" placeholder="Select" class="event-select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<div class="event-tips">
<el-icon class="mr-2"><InfoFilled /></el-icon>按照配置的规则解析收到的数据
</div>
</el-form>
</div>
<template #footer>
<div class="dialog-footer mr-[24px] pb-[24px] pt-[16px] flex justify-end">
<DSButton type="primary" class="">创建</DSButton>
</div>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { computed } from 'vue'
import { DSButton } from '@/components/Button'
import { InfoFilled } from '@element-plus/icons-vue'
// 接收父组件传递的显隐状态（v-model:value 对应 props.value）
interface Props {
value: boolean
title: string
}
interface Emits {
(e: 'update:value', val: boolean): void
}
const props = withDefaults(defineProps<Props>(), {
value: false,
title: ''
})
const emit = defineEmits<Emits>()
const formEventInfo = reactive({
way: '',
eventType: ''
})
const options = [
{
value: 'Option1',
label: 'Option1'
},
{
value: 'Option2',
label: 'Option2'
},
{
value: 'Option3',
label: 'Option3'
},
{
value: 'Option4',
label: 'Option4'
},
{
value: 'Option5',
label: 'Option5'
}
]
watch(
() => props.value,
(newVal, oldVal) => {
console.log('props.value 变化：', '旧值:', oldVal, '新值:', newVal)
}
)
// 计算属性双向绑定
const show = computed({
get() {
return props.value // 接收父组件的 isDeviceDialog 值
},
set(val) {
emit('update:value', val) // 关闭时通知父组件更新状态
}
})
</script>
<style scoped lang="scss">
.eventManagement-container {
box-sizing: border-box;
width: 100%;
height: 274px;
padding: 24px;
:deep(.event-select) {
color: #fff;
.el-select__wrapper {
background: #303136;
.el-select__selected-item {
color: #fff;
}
}
}
.event-tips {
height: 18px;
display: flex;
align-items: center;
font-size: 12px;
}
}
</style>
Write Preview
Loading…
Cancel
Save