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 391caa5ff1
commit 5deba54719
3 changed files with 323 additions and 2 deletions
Show Stats Download Patch File Download Diff File

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

@ -22,7 +22,10 @@
</div>
</div>
<div class="commManagement-line-first" />
<div class="commManagement-infoList">
<div
class="commManagement-infoList"
v-if="activeTab != 'heartbeat' && activeTab != 'response'"
>
<div class="commManagement-infoList-title">
<span>{{ currentTabLabel }}</span>
<div class="infoList-title-btn" @click="addDevice">+</div>
@ -46,7 +49,10 @@
/>
</div>
</div>
<div class="commManagement-line-second" />
<div
class="commManagement-line-second"
v-if="activeTab != 'heartbeat' && activeTab != 'response'"
/>
<div class="commManagement-content">
<!-- 设备表单 -->
<DeviceForm v-if="activeTab === 'device'" :form-data="formDeviceInfo" :options="options" />
@ -66,6 +72,20 @@
:options="options"
@addRow="handleTableAdd"
/>
<!-- 心跳管理表单 -->
<HeartBeatForm
v-if="activeTab === 'heartbeat'"
:form-data="formHeartBeatInfo"
:options="options"
@addRow="handleTableAdd"
/>
<!-- 响应配置表单 -->
<ResponseForm
v-if="activeTab === 'response'"
:form-data="formResponseInfo"
:options="options"
@addRow="handleTableAdd"
/>
</div>
</div>
</DSDialog>
@ -84,6 +104,8 @@ import EventDialog from './eventDialog.vue'
import DeviceForm from './deviceForm.vue'
import ReceiveEventForm from './receiveEventForm.vue'
import SendEventForm from './sendEventForm.vue'
import HeartBeatForm from './heartBeatForm.vue'
import ResponseForm from './responseForm.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'
@ -247,6 +269,24 @@ const formSendEventInfo = reactive({
tableData: []
})
// 心跳管理信息表单
const formHeartBeatInfo = reactive({
deviceName: '',
separator: '',
lengthCompare: false,
characterLength: '',
tableData: []
})
// 响应配置信息表单
const formResponseInfo = reactive({
deviceName: '',
separator: '',
lengthCompare: false,
characterLength: '',
tableData: []
})
interface CommBar {
label: string
value: 'device' | 'receive' | 'send' | 'heartbeat' | 'response'
@ -341,6 +381,13 @@ const handleTableAdd = () => {
type: 'int',
result: ''
})
} else if (activeTab.value === 'heartbeat') {
formHeartBeatInfo.tableData.push({
num: formHeartBeatInfo.tableData.length + 1,
name: 'input',
type: 'int',
result: ''
})
}
}

130
src/renderer/src/views/Design/CommManagement/heartBeatForm.vue
Unescape Escape View File

@ -0,0 +1,130 @@
<template>
<el-form label-width="auto" size="default" :model="formData" style="max-width: 100%">
<div class="event-table">
<el-table :data="formData.tableData" class="eventList-table" :max-height="600">
<el-table-column fixed prop="num" label="序号" width="60" />
<el-table-column prop="name" label="设备">
<template #default="scope">
<el-select v-model="scope.row.name" 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="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="name" label="发送内容">
<template #default="scope">
<el-input v-model="scope.row.name" />
</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="name" label="启用/关闭">
<template #default="scope">
<el-switch v-model="scope.row.lengthCompare" />
</template>
</el-table-column>
<el-table-column prop="result" label="操作" 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>
</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 emit = defineEmits(['addRow'])
const handleTableAdd = () => {
emit('addRow') // 通知父组件添加行（或直接在组件内处理）
}
</script>
<style scoped lang="scss">
// 复用原有的设备表单样式
.device-select {
color: #fff;
:deep(.el-select__wrapper) {
background: #303136;
.el-select__selected-item {
color: #fff;
}
}
}
.event-table {
.eventList-table {
width: 100%;
heightht: 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>

144
src/renderer/src/views/Design/CommManagement/responseForm.vue
Unescape Escape View File

@ -0,0 +1,144 @@
<template>
<el-form label-width="auto" size="default" :model="formData" style="max-width: 100%">
<el-form-item label="方案加载" label-position="left">
<el-switch v-model="formData.scheme" />
</el-form-item>
<el-row :gutter="24" v-if="formData.scheme">
<el-col :span="8">
<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="8">
<el-form-item label="通信超时时间(ms)" label-position="top">
<el-input v-model="formData.deviceName" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="触发字符" label-position="top">
<el-input v-model="formData.deviceName" />
</el-form-item>
</el-col>
</el-row>
<el-form-item label="流程控制" label-position="left">
<el-switch v-model="formData.process" />
</el-form-item>
<el-row :gutter="24" v-if="formData.process">
<el-col :span="8">
<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="8">
<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="8">
<el-form-item label="空闲时触发" label-position="top">
<el-input v-model="formData.targetPort" />
</el-form-item>
</el-col>
<el-col :span="8">
<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.camera" />
</el-form-item>
<el-row :gutter="24" v-if="formData.camera">
<el-col :span="8">
<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="8">
<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="8">
<el-form-item label="连接时触发" label-position="top">
<el-input v-model="formData.targetPort" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="掉线时触发" label-position="top">
<el-input v-model="formData.targetPort" />
</el-form-item>
</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 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;
}
}
}
.form-device-btn {
width: 80px;
padding: 0 12px;
}
/* 其他设备表单相关样式 */
</style>
Write Preview
Loading…
Cancel
Save