feat: 事件处理模块

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

@@ -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) {
+  if (activeTab.value === 'device') {
-    isDeviceDialog.value = false
+    isDeviceDialog.value = !isDeviceDialog.value
-  } else {
+  } else if (activeTab.value === 'receive') {
-    // 弹窗显隐
+    isEventDialog.value = !isEventDialog.value
-    isDeviceDialog.value = true
+    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>

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

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