feat: 新增心跳管理、响应配置

src/renderer/src/views/Design/CommManagement/commManagement.vue

@@ -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: ''
+    })
   }
 }
 

src/renderer/src/views/Design/CommManagement/heartBeatForm.vue

@@ -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>

src/renderer/src/views/Design/CommManagement/responseForm.vue

@@ -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>