From 21ae942d98cffadc11dc91ff5fabbf12174579d2 Mon Sep 17 00:00:00 2001
From: jackhoo_98 <jackhoo_98@foxmail.com>
Date: Thu, 2 Mar 2023 17:01:12 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=80=9A=E9=81=93=E7=AE=A1=E7=90=86=20?=
 =?UTF-8?q?todo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/data-collect/channel.ts               |   10 +
 .../DataCollect/Channel/Detail/index.vue      | 1332 +++++++++++++++++
 src/views/DataCollect/Channel/data.ts         |  315 ++++
 src/views/DataCollect/Channel/index.vue       |  336 +++++
 src/views/DataCollect/Channel/type.d.ts       |   38 +
 5 files changed, 2031 insertions(+)
 create mode 100644 src/api/data-collect/channel.ts
 create mode 100644 src/views/DataCollect/Channel/Detail/index.vue
 create mode 100644 src/views/DataCollect/Channel/data.ts
 create mode 100644 src/views/DataCollect/Channel/index.vue
 create mode 100644 src/views/DataCollect/Channel/type.d.ts

diff --git a/src/api/data-collect/channel.ts b/src/api/data-collect/channel.ts
new file mode 100644
index 00000000..5c9a5312
--- /dev/null
+++ b/src/api/data-collect/channel.ts
@@ -0,0 +1,10 @@
+import server from '@/utils/request';
+
+export const queryChannel = (type: string, data: any) =>
+    server.post(`/data-collect/channel/_query`, data);
+
+export const removeChannel = (type: string, data: any) =>
+    server.remove(`/data-collect/channel//${id}`);
+
+export const updateChannel = (type: string, data: any) =>
+    server.patch(`/data-collect/channel//${id}`, data);
diff --git a/src/views/DataCollect/Channel/Detail/index.vue b/src/views/DataCollect/Channel/Detail/index.vue
new file mode 100644
index 00000000..48f32450
--- /dev/null
+++ b/src/views/DataCollect/Channel/Detail/index.vue
@@ -0,0 +1,1332 @@
+<template>
+    <page-container>
+        <a-card>
+            <div class="container">
+                <a-form
+                    :model="formData"
+                    ref="formRef1"
+                    name="basic"
+                    autocomplete="off"
+                    layout="vertical"
+                >
+                    <a-row :gutter="[24, 0]">
+                        <a-col :span="12">
+                            <a-form-item
+                                label="名称"
+                                name="name"
+                                :rules="Rules.name"
+                            >
+                                <a-input
+                                    v-model:value="formData.name"
+                                    placeholder="请输入名称"
+                                />
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="12">
+                            <a-form-item
+                                label="类型"
+                                name="type"
+                                :rules="Rules.type"
+                            >
+                                <a-select
+                                    v-model:value="formData.type"
+                                    :options="typeOptions"
+                                    placeholder="请选择类型"
+                                    allowClear
+                                    show-search
+                                    :filter-option="filterOption"
+                                    @change="changeType"
+                                />
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24">
+                            <a-form-item
+                                name="shareCluster"
+                                :rules="Rules.shareCluster"
+                            >
+                                <div class="form-label">
+                                    集群
+                                    <span class="form-label-required">*</span>
+                                    <a-tooltip>
+                                        <template #title>
+                                            <p>
+                                                共享配置:集群下所有节点共用同一配置
+                                            </p>
+                                            <p>
+                                                独立配置:集群下不同节点使用不同配置
+                                            </p>
+                                        </template>
+                                        <AIcon type="QuestionCircleOutlined" />
+                                    </a-tooltip>
+                                </div>
+                                <a-radio-group
+                                    v-model:value="formData.shareCluster"
+                                    button-style="solid"
+                                    @change="
+                                        changeShareCluster(
+                                            formData.shareCluster,
+                                        )
+                                    "
+                                >
+                                    <a-radio-button :value="true"
+                                        >共享配置</a-radio-button
+                                    >
+                                    <a-radio-button :value="false"
+                                        >独立配置</a-radio-button
+                                    >
+                                </a-radio-group>
+                            </a-form-item>
+                        </a-col>
+                    </a-row>
+
+                    <a-form
+                        ref="formRef2"
+                        layout="vertical"
+                        name="dynamic_form_nest_item"
+                        :model="dynamicValidateForm"
+                    >
+                        <div
+                            v-for="(
+                                cluster, index
+                            ) in dynamicValidateForm.cluster"
+                            :key="cluster.id"
+                        >
+                            <a-collapse
+                                v-model:activeKey="activeKey"
+                                class="collapse"
+                            >
+                                <a-collapse-panel
+                                    :key="cluster.id"
+                                    :header="`#${index + 1}.节点`"
+                                >
+                                    <template #extra v-if="!shareCluster">
+                                        <AIcon
+                                            @click="removeCluster(cluster)"
+                                            type="DeleteOutlined"
+                                        />
+                                    </template>
+                                    <a-row :gutter="[24, 0]">
+                                        <a-col :span="12" v-if="!shareCluster">
+                                            <a-form-item
+                                                :name="[
+                                                    'cluster',
+                                                    index,
+                                                    'serverId',
+                                                ]"
+                                            >
+                                                <div class="form-label">
+                                                    节点名称
+                                                    <span
+                                                        class="form-label-required"
+                                                        >*</span
+                                                    >
+                                                </div>
+                                                <a-select
+                                                    v-model:value="
+                                                        cluster.serverId
+                                                    "
+                                                    :options="
+                                                        clustersListIndex[index]
+                                                    "
+                                                    placeholder="请选择节点名称"
+                                                    allowClear
+                                                    show-search
+                                                    :filter-option="
+                                                        filterOption
+                                                    "
+                                                    @change="
+                                                        changeServerId(
+                                                            cluster.serverId,
+                                                            index,
+                                                        )
+                                                    "
+                                                >
+                                                </a-select>
+                                            </a-form-item>
+                                        </a-col>
+                                        <a-col
+                                            :span="12"
+                                            v-if="
+                                                isVisible('host', formData.type)
+                                            "
+                                        >
+                                            <a-form-item
+                                                :name="[
+                                                    'cluster',
+                                                    index,
+                                                    'configuration',
+                                                    'host',
+                                                ]"
+                                                :rules="Rules.host"
+                                            >
+                                                <div class="form-label">
+                                                    本地地址
+                                                    <span
+                                                        class="form-label-required"
+                                                        >*</span
+                                                    >
+                                                    <a-tooltip>
+                                                        <template #title>
+                                                            <p>
+                                                                绑定到服务器上的网卡地址,绑定到所有网卡:0.0.0.0
+                                                            </p>
+                                                        </template>
+                                                        <AIcon
+                                                            type="QuestionCircleOutlined"
+                                                        />
+                                                    </a-tooltip>
+                                                </div>
+
+                                                <a-select
+                                                    v-model:value="
+                                                        cluster.configuration
+                                                            .host
+                                                    "
+                                                    :options="
+                                                        hostOptionsIndex[index]
+                                                    "
+                                                    placeholder="请选择本地地址"
+                                                    allowClear
+                                                    show-search
+                                                    :disabled="shareCluster"
+                                                    :filter-option="
+                                                        filterOption
+                                                    "
+                                                    @change="
+                                                        changeHost(
+                                                            cluster.serverId,
+                                                            cluster
+                                                                .configuration
+                                                                .host,
+                                                            index,
+                                                        )
+                                                    "
+                                                >
+                                                </a-select>
+                                            </a-form-item>
+                                        </a-col>
+                                        <a-col
+                                            :span="12"
+                                            v-if="
+                                                isVisible('port', formData.type)
+                                            "
+                                        >
+                                            <a-form-item
+                                                :name="[
+                                                    'cluster',
+                                                    index,
+                                                    'configuration',
+                                                    'port',
+                                                ]"
+                                                :rules="Rules.port"
+                                            >
+                                                <div class="form-label">
+                                                    本地端口
+                                                    <span
+                                                        class="form-label-required"
+                                                        >*</span
+                                                    >
+                                                    <a-tooltip>
+                                                        <template #title>
+                                                            <p>
+                                                                监听指定端口的请求
+                                                            </p>
+                                                        </template>
+                                                        <AIcon
+                                                            type="QuestionCircleOutlined"
+                                                        />
+                                                    </a-tooltip>
+                                                </div>
+                                                <a-select
+                                                    v-model:value="
+                                                        cluster.configuration
+                                                            .port
+                                                    "
+                                                    :options="
+                                                        portOptionsIndex[index]
+                                                    "
+                                                    placeholder="请选择本地端口"
+                                                    allowClear
+                                                    show-search
+                                                    :filter-option="
+                                                        filterPortOption
+                                                    "
+                                                />
+                                            </a-form-item>
+                                        </a-col>
+                                        <a-col
+                                            :span="12"
+                                            v-if="
+                                                isVisible(
+                                                    'publicHost',
+                                                    formData.type,
+                                                )
+                                            "
+                                        >
+                                            <a-form-item
+                                                :name="[
+                                                    'cluster',
+                                                    index,
+                                                    'configuration',
+
+                                                    'publicHost',
+                                                ]"
+                                                :rules="Rules.publicHost"
+                                            >
+                                                <div class="form-label">
+                                                    公网地址
+                                                    <span
+                                                        class="form-label-required"
+                                                        >*</span
+                                                    >
+                                                    <a-tooltip>
+                                                        <template #title>
+                                                            <p>
+                                                                对外提供访问的地址,内网环境时填写服务器的内网IP地址
+                                                            </p>
+                                                        </template>
+                                                        <AIcon
+                                                            type="QuestionCircleOutlined"
+                                                        />
+                                                    </a-tooltip>
+                                                </div>
+                                                <a-input
+                                                    v-model:value="
+                                                        cluster.configuration
+                                                            .publicHost
+                                                    "
+                                                    placeholder="请输入公网地址"
+                                                    allowClear
+                                                />
+                                            </a-form-item>
+                                        </a-col>
+                                        <a-col
+                                            :span="12"
+                                            v-if="
+                                                isVisible(
+                                                    'publicPort',
+                                                    formData.type,
+                                                )
+                                            "
+                                        >
+                                            <a-form-item
+                                                :name="[
+                                                    'cluster',
+                                                    index,
+                                                    'configuration',
+                                                    'publicPort',
+                                                ]"
+                                                :rules="Rules.publicPort"
+                                            >
+                                                <div class="form-label">
+                                                    公网端口
+                                                    <span
+                                                        class="form-label-required"
+                                                        >*</span
+                                                    >
+                                                    <a-tooltip>
+                                                        <template #title>
+                                                            <p>
+                                                                对外提供访问的端口
+                                                            </p>
+                                                        </template>
+                                                        <AIcon
+                                                            type="QuestionCircleOutlined"
+                                                        />
+                                                    </a-tooltip>
+                                                </div>
+
+                                                <a-input-number
+                                                    style="width: 100%"
+                                                    placeholder="请输入端口"
+                                                    v-model:value="
+                                                        cluster.configuration
+                                                            .publicPort
+                                                    "
+                                                    :min="1"
+                                                    :max="65535"
+                                                />
+                                            </a-form-item>
+                                        </a-col>
+                                        <a-col
+                                            :span="12"
+                                            v-if="
+                                                isVisible(
+                                                    'remoteHost',
+                                                    formData.type,
+                                                )
+                                            "
+                                        >
+                                            <a-form-item
+                                                :name="[
+                                                    'cluster',
+                                                    index,
+                                                    'configuration',
+                                                    'remoteHost',
+                                                ]"
+                                                :rules="Rules.remoteHost"
+                                            >
+                                                <div class="form-label">
+                                                    远程地址
+                                                    <span
+                                                        class="form-label-required"
+                                                        >*</span
+                                                    >
+                                                </div>
+
+                                                <a-input
+                                                    placeholder="请输入远程地址"
+                                                    v-model:value="
+                                                        cluster.configuration
+                                                            .remoteHost
+                                                    "
+                                                />
+                                            </a-form-item>
+                                        </a-col>
+                                        <a-col
+                                            :span="12"
+                                            v-if="
+                                                isVisible(
+                                                    'remotePort',
+                                                    formData.type,
+                                                )
+                                            "
+                                        >
+                                            <a-form-item
+                                                label="远程端口"
+                                                :name="[
+                                                    'cluster',
+                                                    index,
+                                                    'configuration',
+                                                    'remotePort',
+                                                ]"
+                                                :rules="Rules.remotePort"
+                                            >
+                                                <a-input-number
+                                                    style="width: 100%"
+                                                    placeholder="请输入远程端口"
+                                                    v-model:value="
+                                                        cluster.configuration
+                                                            .remotePort
+                                                    "
+                                                    :min="1"
+                                                    :max="65535"
+                                                />
+                                            </a-form-item>
+                                        </a-col>
+                                        <a-col
+                                            :span="12"
+                                            v-if="
+                                                isVisible(
+                                                    'clientId',
+                                                    formData.type,
+                                                )
+                                            "
+                                        >
+                                            <a-form-item
+                                                label="clientId"
+                                                :name="[
+                                                    'cluster',
+                                                    index,
+                                                    'configuration',
+                                                    'clientId',
+                                                ]"
+                                                :rules="Rules.clientId"
+                                            >
+                                                <a-input
+                                                    v-model:value="
+                                                        cluster.configuration
+                                                            .clientId
+                                                    "
+                                                    placeholder="请输入ClientId"
+                                                />
+                                            </a-form-item>
+                                        </a-col>
+
+                                        <a-col
+                                            :span="12"
+                                            v-if="
+                                                isVisible(
+                                                    'username',
+                                                    formData.type,
+                                                )
+                                            "
+                                        >
+                                            <a-form-item
+                                                label="用户名"
+                                                :name="[
+                                                    'cluster',
+                                                    index,
+                                                    'configuration',
+                                                    'username',
+                                                ]"
+                                                :rules="Rules.username"
+                                            >
+                                                <a-input
+                                                    v-model:value="
+                                                        cluster.configuration
+                                                            .username
+                                                    "
+                                                    placeholder="请输入用户名"
+                                                />
+                                            </a-form-item>
+                                        </a-col>
+                                        <a-col
+                                            :span="12"
+                                            v-if="
+                                                isVisible(
+                                                    'password',
+                                                    formData.type,
+                                                )
+                                            "
+                                        >
+                                            <a-form-item
+                                                label="密码"
+                                                :name="[
+                                                    'cluster',
+                                                    index,
+                                                    'configuration',
+                                                    'password',
+                                                ]"
+                                                :rules="Rules.password"
+                                            >
+                                                <a-input-password
+                                                    v-model:value="
+                                                        cluster.configuration
+                                                            .password
+                                                    "
+                                                    placeholder="请输入密码"
+                                                />
+                                            </a-form-item>
+                                        </a-col>
+                                        <a-col
+                                            :span="12"
+                                            v-if="
+                                                isVisible(
+                                                    'topicPrefix',
+                                                    formData.type,
+                                                )
+                                            "
+                                        >
+                                            <a-form-item
+                                                :name="[
+                                                    'cluster',
+                                                    index,
+                                                    'configuration',
+                                                    'topicPrefix',
+                                                ]"
+                                                :rules="Rules.topicPrefix"
+                                            >
+                                                <div class="form-label">
+                                                    订阅前缀
+                                                    <a-tooltip>
+                                                        <template #title>
+                                                            <p>
+                                                                当连接的服务为EMQ时,可能需要使用共享的订阅前缀,如:$queue或$share
+                                                            </p>
+                                                        </template>
+                                                        <AIcon
+                                                            type="QuestionCircleOutlined"
+                                                        />
+                                                    </a-tooltip>
+                                                </div>
+                                                <a-input
+                                                    v-model:value="
+                                                        cluster.configuration
+                                                            .topicPrefix
+                                                    "
+                                                    placeholder="请输入订阅前缀"
+                                                />
+                                            </a-form-item>
+                                        </a-col>
+
+                                        <a-col
+                                            :span="12"
+                                            v-if="
+                                                isVisible(
+                                                    'maxMessageSize',
+                                                    formData.type,
+                                                )
+                                            "
+                                        >
+                                            <a-form-item
+                                                :name="[
+                                                    'cluster',
+                                                    index,
+                                                    'configuration',
+                                                    'maxMessageSize',
+                                                ]"
+                                                :rules="Rules.maxMessageSize"
+                                            >
+                                                <div class="form-label">
+                                                    最大消息长度
+                                                    <span
+                                                        class="form-label-required"
+                                                        >*</span
+                                                    >
+                                                    <a-tooltip>
+                                                        <template #title>
+                                                            <p>
+                                                                单次收发消息的最大长度,单位:字节;设置过大可能会影响性能
+                                                            </p>
+                                                        </template>
+                                                        <AIcon
+                                                            type="QuestionCircleOutlined"
+                                                        />
+                                                    </a-tooltip>
+                                                </div>
+                                                <a-input-number
+                                                    style="width: 100%"
+                                                    v-model:value="
+                                                        cluster.configuration
+                                                            .maxMessageSize
+                                                    "
+                                                    placeholder="请输入最大消息长度"
+                                                    :min="1024"
+                                                    :max="1073741824"
+                                                />
+                                            </a-form-item>
+                                        </a-col>
+                                        <a-col :span="24">
+                                            <a-form-item
+                                                :label="
+                                                    isVisible(
+                                                        'secure',
+                                                        formData.type,
+                                                    )
+                                                        ? '开启TLS'
+                                                        : '开启DTLS'
+                                                "
+                                                :name="[
+                                                    'cluster',
+                                                    index,
+                                                    'configuration',
+                                                    'secure',
+                                                ]"
+                                                :rules="Rules.secure"
+                                            >
+                                                <a-radio-group
+                                                    v-model:value="
+                                                        cluster.configuration
+                                                            .secure
+                                                    "
+                                                >
+                                                    <a-radio :value="true"
+                                                        >是</a-radio
+                                                    >
+                                                    <a-radio :value="false"
+                                                        >否</a-radio
+                                                    >
+                                                </a-radio-group>
+                                            </a-form-item>
+                                        </a-col>
+
+                                        <a-col
+                                            :span="12"
+                                            v-if="cluster.configuration.secure"
+                                        >
+                                            <a-form-item
+                                                label="证书"
+                                                :name="[
+                                                    'cluster',
+                                                    index,
+                                                    'configuration',
+                                                    'certId',
+                                                ]"
+                                                :rules="Rules.certId"
+                                            >
+                                                <a-select
+                                                    v-model:value="
+                                                        cluster.configuration
+                                                            .certId
+                                                    "
+                                                    :options="certIdOptions"
+                                                    placeholder="请选择证书"
+                                                    allowClear
+                                                    show-search
+                                                    :filter-option="
+                                                        filterOption
+                                                    "
+                                                />
+                                            </a-form-item>
+                                        </a-col>
+                                        <a-col
+                                            :span="12"
+                                            v-if="cluster.configuration.secure"
+                                        >
+                                            <a-form-item
+                                                label="私钥别名"
+                                                :name="[
+                                                    'cluster',
+                                                    index,
+                                                    'configuration',
+                                                    'privateKeyAlias',
+                                                ]"
+                                                :rules="Rules.privateKeyAlias"
+                                            >
+                                                <a-input
+                                                    v-model:value="
+                                                        cluster.configuration
+                                                            .privateKeyAlias
+                                                    "
+                                                    placeholder="请输入私钥别名"
+                                                />
+                                            </a-form-item>
+                                        </a-col>
+                                        <a-col
+                                            :span="24"
+                                            v-if="
+                                                isVisible(
+                                                    'parserType',
+                                                    formData.type,
+                                                )
+                                            "
+                                        >
+                                            <a-form-item
+                                                :name="[
+                                                    'cluster',
+                                                    index,
+                                                    'configuration',
+                                                    'parserType',
+                                                ]"
+                                                :rules="Rules.parserType"
+                                            >
+                                                <div class="form-label">
+                                                    粘拆包规则
+                                                    <span
+                                                        class="form-label-required"
+                                                        >*</span
+                                                    >
+                                                    <a-tooltip>
+                                                        <template #title>
+                                                            <p>
+                                                                处理TCP粘拆包的方式
+                                                            </p>
+                                                        </template>
+                                                        <AIcon
+                                                            type="QuestionCircleOutlined"
+                                                        />
+                                                    </a-tooltip>
+                                                </div>
+                                                <a-select
+                                                    style="width: 48.5%"
+                                                    v-model:value="
+                                                        cluster.configuration
+                                                            .parserType
+                                                    "
+                                                    :options="ParserTypeOptions"
+                                                    placeholder="请选择粘拆包规则"
+                                                    allowClear
+                                                    show-search
+                                                    :filter-option="
+                                                        filterOption
+                                                    "
+                                                    @change="
+                                                        changeParserType(
+                                                            cluster
+                                                                .configuration
+                                                                .parserType,
+                                                            index,
+                                                        )
+                                                    "
+                                                />
+                                            </a-form-item>
+                                        </a-col>
+
+                                        <a-col
+                                            :span="12"
+                                            v-if="
+                                                isVisible(
+                                                    'delimited',
+                                                    cluster.configuration
+                                                        .parserType,
+                                                )
+                                            "
+                                        >
+                                            <a-form-item
+                                                label="分隔符"
+                                                :name="[
+                                                    'cluster',
+                                                    index,
+                                                    'configuration',
+                                                    'parserConfiguration',
+                                                    'delimited',
+                                                ]"
+                                                :rules="Rules.delimited"
+                                            >
+                                                <a-input
+                                                    v-model:value="
+                                                        cluster.configuration
+                                                            .parserConfiguration
+                                                            .delimited
+                                                    "
+                                                    placeholder="请输入分隔符"
+                                                />
+                                            </a-form-item>
+                                        </a-col>
+                                        <a-col
+                                            :span="24"
+                                            v-if="
+                                                isVisible(
+                                                    'lang',
+                                                    cluster.configuration
+                                                        .parserType,
+                                                )
+                                            "
+                                        >
+                                            <a-form-item
+                                                v-show="false"
+                                                label="脚本语言"
+                                                :name="[
+                                                    'cluster',
+                                                    index,
+                                                    'configuration',
+                                                    'parserConfiguration',
+                                                    'lang',
+                                                ]"
+                                            >
+                                                <a-input
+                                                    v-model:value="
+                                                        cluster.configuration
+                                                            .parserConfiguration
+                                                            .lang
+                                                    "
+                                                />
+                                            </a-form-item>
+                                        </a-col>
+                                        <a-col
+                                            :span="24"
+                                            v-if="
+                                                isVisible(
+                                                    'script',
+                                                    cluster.configuration
+                                                        .parserType,
+                                                )
+                                            "
+                                        >
+                                            <a-form-item
+                                                label="解析脚本"
+                                                :name="[
+                                                    'cluster',
+                                                    index,
+                                                    'configuration',
+                                                    'parserConfiguration',
+                                                    'script',
+                                                ]"
+                                                :rules="Rules.script"
+                                            >
+                                                <div
+                                                    style="
+                                                        width: 100%;
+                                                        height: 400px;
+                                                    "
+                                                >
+                                                    <MonacoEditor
+                                                        theme="vs"
+                                                        v-model:modelValue="
+                                                            cluster
+                                                                .configuration
+                                                                .parserConfiguration
+                                                                .script
+                                                        "
+                                                    />
+                                                </div>
+                                            </a-form-item>
+                                        </a-col>
+                                        <a-col
+                                            :span="12"
+                                            v-if="
+                                                isVisible(
+                                                    'size',
+                                                    cluster.configuration
+                                                        .parserType,
+                                                )
+                                            "
+                                        >
+                                            <a-form-item
+                                                label="长度值"
+                                                :name="[
+                                                    'cluster',
+                                                    index,
+                                                    'configuration',
+                                                    'parserConfiguration',
+                                                    'size',
+                                                ]"
+                                                :rules="Rules.size"
+                                            >
+                                                <a-input-number
+                                                    style="width: 100%"
+                                                    v-model:value="
+                                                        cluster.configuration
+                                                            .parserConfiguration
+                                                            .size
+                                                    "
+                                                    placeholder="请输入长度值"
+                                                />
+                                            </a-form-item>
+                                        </a-col>
+                                        <a-col
+                                            :span="12"
+                                            v-if="
+                                                isVisible(
+                                                    'length',
+                                                    cluster.configuration
+                                                        .parserType,
+                                                )
+                                            "
+                                        >
+                                            <a-form-item
+                                                label="长度"
+                                                :name="[
+                                                    'cluster',
+                                                    index,
+                                                    'configuration',
+                                                    'parserConfiguration',
+                                                    'length',
+                                                ]"
+                                                :rules="Rules.length"
+                                            >
+                                                <a-select
+                                                    style="width: 100%"
+                                                    v-model:value="
+                                                        cluster.configuration
+                                                            .parserConfiguration
+                                                            .length
+                                                    "
+                                                    :options="LengthOptions"
+                                                    placeholder="请选择长度"
+                                                    allowClear
+                                                    show-search
+                                                    :filter-option="
+                                                        filterOption
+                                                    "
+                                                />
+                                            </a-form-item>
+                                        </a-col>
+                                        <a-col
+                                            :span="12"
+                                            v-if="
+                                                isVisible(
+                                                    'offset',
+                                                    cluster.configuration
+                                                        .parserType,
+                                                )
+                                            "
+                                        >
+                                            <a-form-item
+                                                label="偏移量"
+                                                :name="[
+                                                    'cluster',
+                                                    index,
+                                                    'configuration',
+                                                    'parserConfiguration',
+                                                    'offset',
+                                                ]"
+                                                :rules="Rules.offset"
+                                            >
+                                                <a-input-number
+                                                    style="width: 100%"
+                                                    v-model:value="
+                                                        cluster.configuration
+                                                            .parserConfiguration
+                                                            .offset
+                                                    "
+                                                    placeholder="请输入偏移量"
+                                                    :min="0"
+                                                    :max="65535"
+                                                />
+                                            </a-form-item>
+                                        </a-col>
+                                        <a-col
+                                            :span="12"
+                                            v-if="
+                                                isVisible(
+                                                    'little',
+                                                    cluster.configuration
+                                                        .parserType,
+                                                )
+                                            "
+                                        >
+                                            <a-form-item
+                                                label="大小端"
+                                                :name="[
+                                                    'cluster',
+                                                    index,
+                                                    'configuration',
+                                                    'parserConfiguration',
+                                                    'little',
+                                                ]"
+                                            >
+                                                <a-select
+                                                    style="width: 100%"
+                                                    v-model:value="
+                                                        cluster.configuration
+                                                            .parserConfiguration
+                                                            .little
+                                                    "
+                                                    :options="LittleOptions"
+                                                    placeholder="请选择大小端"
+                                                    allowClear
+                                                    show-search
+                                                    :filter-option="
+                                                        filterOption
+                                                    "
+                                                />
+                                            </a-form-item>
+                                        </a-col>
+                                    </a-row>
+                                </a-collapse-panel>
+                            </a-collapse>
+                        </div>
+                        <a-form-item v-if="!shareCluster">
+                            <a-button type="dashed" block @click="addCluster">
+                                <AIcon type="PlusOutlined" />
+                                新增
+                            </a-button>
+                        </a-form-item>
+                    </a-form>
+
+                    <a-row :gutter="[24, 0]">
+                        <a-col :span="24">
+                            <a-form-item label="说明" name="description">
+                                <a-textarea
+                                    v-model:value="formData.description"
+                                    show-count
+                                    :maxlength="200"
+                                    :rows="4"
+                                /> </a-form-item
+                        ></a-col>
+                    </a-row>
+                </a-form>
+            </div>
+            <div class="footer">
+                <PermissionButton
+                    v-if="view === 'false'"
+                    type="primary"
+                    @click="saveData"
+                    :loading="loading"
+                    :hasPermission="`link/Type:${id ? 'update' : 'add'}`"
+                >
+                    保存
+                </PermissionButton>
+            </div>
+        </a-card>
+    </page-container>
+</template>
+
+<script lang="ts" setup name="AccessNetwork">
+import { message } from 'ant-design-vue';
+import type { FormInstance } from 'ant-design-vue';
+import {
+    update,
+    save,
+    detail,
+    resourcesCurrent,
+    supports,
+    certificates,
+} from '@/api/link/type';
+import {
+    FormStates,
+    FormStates2,
+    ParserTypeOptions,
+    isVisible,
+    LengthOptions,
+    LittleOptions,
+    Rules,
+    TCPList,
+    UDPList,
+} from '../data';
+import { cloneDeep } from 'lodash-es';
+import type { FormData2Type } from '../type';
+import { Store } from 'jetlinks-store';
+import MonacoEditor from '@/components/MonacoEditor/index.vue';
+
+const route = useRoute();
+const NetworkType = route.query.type as string;
+const view = NetworkType ? 'false' : (route.query.view as string);
+const id = route.params.id as string;
+const activeKey = ref(['1']);
+const loading = ref(false);
+const formRef1 = ref<FormInstance>();
+const formRef2 = ref<FormInstance>();
+const shareCluster = ref(true);
+
+const formData = ref(FormStates);
+
+const hostOptionsIndex: any = ref([]);
+const clustersListIndex: any = ref([]);
+const typeOptions = ref([]);
+const portOptionsIndex: any = ref([]);
+let portOptionsConst: any = [];
+const certIdOptions = ref([]);
+
+const dynamicValidateForm = reactive<{ cluster: FormData2Type[] }>({
+    cluster: [{ ...cloneDeep(FormStates2), id: '1' }],
+});
+
+const removeCluster = (item: FormData2Type) => {
+    let index = dynamicValidateForm.cluster.indexOf(item);
+    if (index !== -1) {
+        dynamicValidateForm.cluster.splice(index, 1);
+    }
+};
+
+const addCluster = () => {
+    const id = Date.now();
+    dynamicValidateForm.cluster.push({
+        ...cloneDeep(FormStates2),
+        id,
+    });
+    activeKey.value = [...activeKey.value, id.toString()];
+};
+
+const filterOption = (input: string, option: any) => {
+    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+};
+
+const filterPortOption = (input: string, option: any) => {
+    return JSON.stringify(option.label).indexOf(input) >= 0;
+};
+
+const filterConfigByType = (data, type: string) => {
+    let _temp = type;
+    if (TCPList.includes(type)) {
+        _temp = 'TCP';
+    } else if (UDPList.includes(type)) {
+        _temp = 'UDP';
+    }
+    // 只保留ports 包含type的数据
+    const _config = data?.filter((item) => {
+        return Object.keys(item.ports).includes(_temp);
+    });
+
+    // 只保留ports的type数据
+    return _config?.map((i) => {
+        i.ports = i.ports[_temp];
+        return i;
+    });
+};
+
+const getPortOptions = (portOptions: object, index = 0) => {
+    if (!portOptions) return;
+    const type = formData.value.type;
+    const host = dynamicValidateForm.cluster[index].configuration.host;
+    const _port = filterConfigByType(cloneDeep(portOptions), type);
+    const _host = _port.find((item) => item.host === host);
+    portOptionsIndex.value[index] = _host?.ports?.map((p) => ({
+        label: p,
+        value: p,
+    }));
+};
+
+const changeShareCluster = (value: boolean) => {
+    shareCluster.value = value;
+    activeKey.value = ['1'];
+    dynamicValidateForm.cluster = [{ ...cloneDeep(FormStates2), id: '1' }];
+};
+
+const changeType = (value: string) => {
+    dynamicValidateForm.cluster = [{ ...cloneDeep(FormStates2), id: '1' }];
+    if (value !== 'MQTT_CLIENT') {
+        const { configuration } = dynamicValidateForm.cluster[0];
+        value && (configuration.host = '0.0.0.0');
+    }
+};
+
+const updateClustersListIndex = () => {
+    const { cluster } = dynamicValidateForm;
+    const filters = cluster?.map((item) => item.serverId);
+    const newConfigRef = Store.get('configRef')?.filter(
+        (item) => !filters.includes(item.clusterNodeId),
+    );
+    cluster.forEach((item, index) => {
+        !item.serverId &&
+            (clustersListIndex.value[index] = newConfigRef?.map((i) => ({
+                value: i.clusterNodeId,
+                lable: i.clusterNodeId,
+            })));
+    });
+};
+
+const changeServerId = (value: string | undefined, index: number) => {
+    const { configuration } = dynamicValidateForm.cluster[index];
+    configuration.host = undefined;
+    configuration.port = undefined;
+    const checked = cloneDeep(portOptionsConst).find(
+        (i) => i.clusterNodeId === value,
+    );
+    const checkedHost = [{ value: checked.host, lable: checked.host }];
+    hostOptionsIndex.value[index] = checked ? checkedHost : [];
+    updateClustersListIndex();
+};
+const changeHost = (
+    serverId: string | undefined,
+    value: string | undefined,
+    index: number,
+) => {
+    const { configuration } = dynamicValidateForm.cluster[index];
+    configuration.port = undefined;
+    const checked = cloneDeep(portOptionsConst).find(
+        (i) => i.clusterNodeId === serverId && i.host === value,
+    );
+    checked && getPortOptions([checked], index);
+};
+
+const changeParserType = (value: string | undefined, index: number) => {
+    const { parserConfiguration } =
+        dynamicValidateForm.cluster[index].configuration;
+    value === 'SCRIPT' ? (parserConfiguration.lang = 'javascript') : '';
+};
+
+const saveData = async () => {
+    await formRef1.value?.validate();
+    const formRef2Data = await formRef2.value?.validate();
+
+    const { configuration } = formRef2Data?.cluster[0];
+    const params = shareCluster.value
+        ? { ...formData.value, configuration }
+        : { ...formData.value, ...formRef2Data };
+
+    loading.value = true;
+    const resp =
+        id === ':id' ? await save(params) : await update({ ...params, id });
+    if (resp.status === 200) {
+        message.success('操作成功！');
+        history.back();
+    }
+    loading.value = false;
+};
+
+const getSupports = async () => {
+    const res = await supports();
+    typeOptions.value = res.result.map((item) => ({
+        label: item.name,
+        value: item.id,
+    }));
+};
+
+const getCertificates = async () => {
+    const resp = await certificates();
+    certIdOptions.value = resp.result.map((i) => ({
+        value: i.id,
+        label: i.name,
+    }));
+};
+
+const getResourcesCurrent = () => {
+    resourcesCurrent().then((resp) => {
+        if (resp.status === 200) {
+            portOptionsConst = resp.result;
+            Store.set('configRef', resp.result);
+            getPortOptions(portOptionsConst);
+        }
+    });
+};
+
+const getDetail = () => {
+    if (id !== ':id') {
+        loading.value = true;
+        detail(id).then((resp) => {
+            const result = resp.result;
+            const { configuration, cluster } = result;
+            formData.value = { ...result };
+            shareCluster.value = result.shareCluster;
+            activeKey.value = ['1'];
+            if (result.shareCluster) {
+                dynamicValidateForm.cluster[0].configuration = configuration;
+            } else {
+                dynamicValidateForm.cluster = cluster;
+            }
+            loading.value = false;
+        });
+    }
+};
+
+onMounted(() => {
+    getSupports();
+    getCertificates();
+    getResourcesCurrent();
+    getDetail();
+});
+
+watch(
+    () => formData.value.shareCluster,
+    (value) => {
+        const { cluster } = dynamicValidateForm;
+        if (cluster) {
+            value && (cluster[0].configuration.host = '0.0.0.0');
+            updateClustersListIndex();
+        }
+    },
+    { deep: true },
+);
+
+watch(
+    () => shareCluster.value,
+    (value) => {
+        formData.value.shareCluster = value;
+        value
+            ? getPortOptions(Store.get('configRef'))
+            : (portOptionsIndex.value[0] = []);
+        updateClustersListIndex();
+    },
+    { deep: true },
+);
+watch(
+    () => dynamicValidateForm.cluster?.length,
+    () => {
+        updateClustersListIndex();
+    },
+    { deep: true, immediate: true },
+);
+watch(
+    () => NetworkType,
+    (value) => {
+        if (value) {
+            const { cluster } = dynamicValidateForm;
+            formData.value.type = value;
+            cluster[0].configuration.host = '0.0.0.0';
+        }
+    },
+    { deep: true, immediate: true },
+);
+</script>
+
+<style lang="less" scoped>
+.container {
+    width: 70%;
+    min-height: 400px;
+    .card-item {
+        padding-right: 5px;
+        max-height: 480px;
+        overflow-y: auto;
+        overflow-x: hidden;
+    }
+    .card-last {
+        padding-right: 5px;
+        overflow-y: auto;
+        overflow-x: hidden;
+    }
+}
+.footer {
+    width: 100%;
+    margin-top: 24px;
+}
+
+.form-item1 {
+    border: 1px solid #d9d9d9;
+    padding: 10px;
+    margin-bottom: 20px;
+}
+.form-label {
+    height: 30px;
+    padding-bottom: 8px;
+    .form-label-required {
+        color: red;
+        margin: 0 4px 0 -2px;
+    }
+}
+.collapse {
+    margin-bottom: 20px;
+}
+</style>
diff --git a/src/views/DataCollect/Channel/data.ts b/src/views/DataCollect/Channel/data.ts
new file mode 100644
index 00000000..9bd25bd6
--- /dev/null
+++ b/src/views/DataCollect/Channel/data.ts
@@ -0,0 +1,315 @@
+export const Configuration = {
+    parserType: undefined,
+    port: undefined,
+    host: undefined,
+    publicPort: '',
+    publicHost: '',
+    remoteHost: '',
+    remotePort: '',
+    secure: false,
+    username: '',
+    password: '',
+    topicPrefix: '',
+    maxMessageSize: 8192,
+    certId: undefined,
+    privateKeyAlias: '',
+    clientId: '',
+    parserConfiguration: {
+        delimited: '',
+        lang: '',
+        script: '',
+        size: '',
+        length: '4',
+        offset: '0',
+        little: 'false',
+    },
+};
+
+export const FormStates = {
+    name: '',
+    type: 'UDP',
+    shareCluster: true,
+    description: '',
+};
+
+export const FormStates2 = {
+    serverId: undefined,
+    configuration: Configuration,
+};
+
+export const TCPList = [
+    'TCP_SERVER',
+    'WEB_SOCKET_SERVER',
+    'HTTP_SERVER',
+    'MQTT_SERVER',
+];
+export const UDPList = ['UDP', 'COAP_SERVER'];
+
+const VisibleMost = [
+    'COAP_SERVER',
+    'MQTT_SERVER',
+    'WEB_SOCKET_SERVER',
+    'TCP_SERVER',
+    'UDP',
+    'HTTP_SERVER',
+];
+
+export const VisibleData = {
+    parserType: ['TCP_SERVER'],
+    port: VisibleMost,
+    host: VisibleMost,
+    publicPort: VisibleMost,
+    publicHost: VisibleMost,
+    serverId: ['MQTT_CLIENT'],
+    remoteHost: ['MQTT_CLIENT'],
+    remotePort: ['MQTT_CLIENT'],
+    secure: ['TCP_SERVER', 'UDP', 'COAP_SERVER'],
+    username: ['MQTT_CLIENT'],
+    password: ['MQTT_CLIENT'],
+    topicPrefix: ['MQTT_CLIENT'],
+    maxMessageSize: ['MQTT_SERVER', 'MQTT_CLIENT'],
+    clientId: ['MQTT_CLIENT'],
+    delimited: ['DELIMITED'],
+    lang: ['SCRIPT'],
+    script: ['SCRIPT'],
+    size: ['FIXED_LENGTH'],
+    length: ['LENGTH_FIELD'],
+    offset: ['LENGTH_FIELD'],
+    little: ['LENGTH_FIELD'],
+};
+
+export const ParserTypeOptions = [
+    { value: 'DIRECT', label: '不处理' },
+    { value: 'DELIMITED', label: '分隔符' },
+    { value: 'SCRIPT', label: '自定义脚本' },
+    { value: 'FIXED_LENGTH', label: '固定长度' },
+    { value: 'LENGTH_FIELD', label: '长度字段' },
+];
+export const LengthOptions = [
+    { value: '1', label: '1' },
+    { value: '2', label: '2' },
+    { value: '3', label: '3' },
+    { value: '4', label: '4' },
+    { value: '8', label: '8' },
+];
+export const LittleOptions = [
+    { label: '大端', value: 'false' },
+    { label: '小端', value: 'true' },
+];
+
+export const isVisible = (
+    LastName: string,
+    dependencies: string | boolean | undefined,
+) => VisibleData[LastName].includes(dependencies);
+
+export const Validator = {
+    regIp: new RegExp(
+        /((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}/,
+    ),
+    regDomain: new RegExp(
+        /[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\.?/,
+    ),
+    regOnlyNumber: new RegExp(/^\d+$/),
+};
+
+export const Rules = {
+    name: [
+        {
+            required: true,
+            message: '请输入名称',
+        },
+        {
+            max: 64,
+            message: '最大可输入64个字符',
+        },
+    ],
+    type: [
+        {
+            required: true,
+            message: '请选择类型',
+        },
+    ],
+    shareCluster: [
+        {
+            required: true,
+            message: '请选择集群',
+        },
+    ],
+    host: [
+        {
+            required: true,
+            message: '请选择本地地址',
+        },
+    ],
+    port: [
+        {
+            required: true,
+            message: '请选择本地端口',
+        },
+    ],
+    publicHost: [
+        {
+            required: true,
+            message: '请输入公网地址',
+        },
+        {
+            pattern: Validator.regIp || Validator.regDomain,
+            message: '请输入IP或者域名',
+        },
+    ],
+    publicPort: [
+        {
+            required: true,
+            message: '请输入公网端口',
+        },
+        {
+            pattern: Validator.regOnlyNumber,
+            message: '请输入1-65535之间的正整数',
+        },
+    ],
+    remoteHost: [
+        {
+            required: true,
+            message: '请输入远程地址',
+        },
+        {
+            pattern: Validator.regIp || Validator.regDomain,
+            message: '请输入IP或者域名',
+        },
+    ],
+    remotePort: [
+        {
+            required: true,
+            message: '输入远程端口',
+        },
+        {
+            pattern: Validator.regOnlyNumber,
+            message: '请输入1-65535之间的正整数',
+        },
+    ],
+    clientId: [
+        {
+            required: true,
+            message: '请输入ClientId',
+        },
+        {
+            max: 64,
+            message: '最大可输入64个字符',
+        },
+    ],
+    username: [
+        {
+            required: true,
+            message: '请输入用户名',
+        },
+        {
+            max: 64,
+            message: '最大可输入64个字符',
+        },
+    ],
+    password: [
+        {
+            required: true,
+            message: '请输入密码',
+        },
+        {
+            max: 64,
+            message: '最大可输入64个字符',
+        },
+    ],
+    topicPrefix: [
+        {
+            max: 64,
+            message: '最大可输入64个字符',
+        },
+    ],
+    maxMessageSize: [
+        {
+            required: true,
+            message: '请输入最大消息长度',
+        },
+    ],
+    secure: [
+        {
+            required: true,
+        },
+    ],
+    certId: [
+        {
+            required: true,
+            message: '请选择证书',
+        },
+    ],
+    privateKeyAlias: [
+        {
+            required: true,
+            message: '请输入私钥别名',
+        },
+        {
+            max: 64,
+            message: '最大可输入64个字符',
+        },
+    ],
+    parserType: [
+        {
+            required: true,
+            message: '请选择粘拆包规则',
+        },
+    ],
+    delimited: [
+        {
+            required: true,
+            message: '请输入分隔符',
+        },
+        {
+            max: 64,
+            message: '最大可输入64个字符',
+        },
+    ],
+    lang: [
+        {
+            required: true,
+            message: '请选择脚本语言',
+        },
+        {
+            max: 64,
+            message: '最大可输入64个字符',
+        },
+    ],
+    script: [
+        {
+            required: true,
+            message: '请输入脚本',
+        },
+    ],
+    size: [
+        {
+            required: true,
+            message: '请输入长度值',
+        },
+    ],
+    length: [
+        {
+            required: true,
+            message: '请选择长度',
+        },
+    ],
+    offset: [
+        {
+            pattern: Validator.regOnlyNumber,
+            message: '请输入0-65535之间的正整数',
+        },
+    ],
+};
+
+export const TiTlePermissionButtonStyle = {
+    padding: 0,
+    color: ' #1890ff !important',
+    'font-weight': 700,
+    'font-size': '16px',
+    overflow: 'hidden',
+    'text-overflow': 'ellipsis',
+    'white-space': 'nowrap',
+    width: 'calc(100%-100px)',
+    // width: '60%',
+};
diff --git a/src/views/DataCollect/Channel/index.vue b/src/views/DataCollect/Channel/index.vue
new file mode 100644
index 00000000..9ec96770
--- /dev/null
+++ b/src/views/DataCollect/Channel/index.vue
@@ -0,0 +1,336 @@
+<template>
+    <page-container>
+        <div>
+            <Search :columns="columns" target="search" @search="handleSearch" />
+
+            <JTable
+                ref="tableRef"
+                :columns="columns"
+                model="CARD"
+                :gridColumn="3"
+                :request="queryChannel"
+                :defaultParams="{
+                    sorts: [{ name: 'createTime', order: 'desc' }],
+                }"
+                :params="params"
+            >
+                <template #headerTitle>
+                    <PermissionButton
+                        type="primary"
+                        @click="handlAdd"
+                        hasPermission="DataCollect/Channel:add"
+                    >
+                        <template #icon><AIcon type="PlusOutlined" /></template>
+                        新增通道
+                    </PermissionButton>
+                </template>
+                <template #card="slotProps">
+                    <CardBox
+                        :showStatus="true"
+                        :value="slotProps"
+                        :actions="getActions(slotProps, 'card')"
+                        v-bind="slotProps"
+                        :status="slotProps.state.value"
+                        :statusText="slotProps.state.text"
+                        :statusNames="{
+                            enabled: 'success',
+                            disabled: 'error',
+                        }"
+                    >
+                        <template #img>
+                            <slot name="img">
+                                <img :src="getImage('/network.png')" />
+                            </slot>
+                        </template>
+                        <template #content>
+                            <div class="card-item-content">
+                                <PermissionButton
+                                    type="link"
+                                    @click="handlEye(slotProps.id)"
+                                    hasPermission="link/Type:view"
+                                    :style="TiTlePermissionButtonStyle"
+                                >
+                                    {{ slotProps.name }}
+                                </PermissionButton>
+
+                                <a-row class="card-item-content-box">
+                                    <a-col :span="12">
+                                        <div class="card-item-content-text">
+                                            协议
+                                        </div>
+                                        <div class="card-item-content-text">
+                                            <a-tooltip>
+                                                <template #title>{{
+                                                    slotProps.provider
+                                                }}</template>
+                                                {{ slotProps.provider }}
+                                            </a-tooltip>
+                                        </div>
+                                    </a-col>
+                                    <a-col :span="12">
+                                        <div class="card-item-content-text">
+                                            地址
+                                        </div>
+                                        <div class="card-item-content-text">
+                                            <a-tooltip>
+                                                <template #title>{{
+                                                    slotProps.configuration
+                                                        .host ||
+                                                    slotProps.configuration
+                                                        .endpoint
+                                                }}</template>
+                                                <span class="details-text">{{
+                                                    slotProps.configuration
+                                                        .host ||
+                                                    slotProps.configuration
+                                                        .endpoint
+                                                }}</span>
+                                            </a-tooltip>
+                                        </div>
+                                    </a-col>
+                                </a-row>
+                            </div>
+                        </template>
+                        <template #actions="item">
+                            <PermissionButton
+                                :disabled="item.disabled"
+                                :popConfirm="item.popConfirm"
+                                :tooltip="{
+                                    ...item.tooltip,
+                                }"
+                                @click="item.onClick"
+                                :hasPermission="'link/Type:' + item.key"
+                            >
+                                <AIcon
+                                    type="DeleteOutlined"
+                                    v-if="item.key === 'delete'"
+                                />
+                                <template v-else>
+                                    <AIcon :type="item.icon" />
+                                    <span>{{ item?.text }}</span>
+                                </template>
+                            </PermissionButton>
+                        </template>
+                    </CardBox>
+                </template>
+            </JTable>
+        </div>
+    </page-container>
+</template>
+<script lang="ts" setup name="TypePage">
+import type { ActionsType } from '@/components/Table/index';
+import { getImage } from '@/utils/comm';
+import {
+    queryChannel,
+    updateChannel,
+    removeChannel,
+} from '@/api/data-collect/channel';
+import { message } from 'ant-design-vue';
+import { TiTlePermissionButtonStyle } from './data';
+import { useMenuStore } from 'store/menu';
+
+const menuStory = useMenuStore();
+const tableRef = ref<Record<string, any>>({});
+const params = ref<Record<string, any>>({});
+const options = ref([]);
+
+const statusMap = new Map();
+statusMap.set('enabled', 'success');
+statusMap.set('disabled', 'error');
+
+const columns = [
+    {
+        title: '通道名称',
+        dataIndex: 'name',
+        key: 'name',
+        ellipsis: true,
+        fixed: 'left',
+        search: {
+            type: 'string',
+        },
+    },
+    {
+        title: '通讯协议',
+        dataIndex: 'provider',
+        key: 'provider',
+        ellipsis: true,
+        search: {
+            type: 'select',
+            options: [
+                { label: 'OPC_UA', value: 'OPC_UA' },
+                { label: 'MODBUS_TCP', value: 'MODBUS_TCP' },
+            ],
+        },
+    },
+    {
+        title: '状态',
+        dataIndex: 'state',
+        key: 'state',
+        ellipsis: true,
+        scopedSlots: true,
+        search: {
+            type: 'select',
+            options: [
+                { label: '正常', value: 'enabled' },
+                { label: '禁用', value: 'disabled' },
+            ],
+        },
+    },
+    {
+        title: '运行状态',
+        dataIndex: 'runningState',
+        key: 'runningState',
+        ellipsis: true,
+        scopedSlots: true,
+        search: {
+            type: 'select',
+            options: [
+                { label: '运行中', value: 'running' },
+                { label: '部分错误', value: 'partialError' },
+                { label: '错误', value: 'failed' },
+            ],
+        },
+    },
+    {
+        title: '说明',
+        dataIndex: 'description',
+        key: 'description',
+        ellipsis: true,
+    },
+    {
+        title: '操作',
+        key: 'action',
+        fixed: 'right',
+        width: 200,
+        scopedSlots: true,
+    },
+];
+
+const getActions = (
+    data: Partial<Record<string, any>>,
+    type: 'card' | 'table',
+): ActionsType[] => {
+    if (!data) return [];
+    const state = data.state.value;
+    const stateText = state === 'enabled' ? '禁用' : '启用';
+    const actions = [
+        // {
+        //     key: 'view',
+        //     text: '查看',
+        //     tooltip: {
+        //         title: '查看',
+        //     },
+        //     icon: 'EyeOutlined',
+        //     onClick: async () => {
+        //         handlEye(data.id);
+        //     },
+        // },
+        {
+            key: 'update',
+            text: '编辑',
+            tooltip: {
+                title: '编辑',
+            },
+            icon: 'EditOutlined',
+            onClick: () => {
+                handlEdit(data.id);
+            },
+        },
+        {
+            key: 'action',
+            text: stateText,
+            tooltip: {
+                title: stateText,
+            },
+            icon: state === 'enabled' ? 'StopOutlined' : 'CheckCircleOutlined',
+            popConfirm: {
+                title: `确认${stateText}?`,
+                onConfirm: async () => {
+                    // let res =
+                    //     state === 'enabled'
+                    //         ? await shutdown(data.id)
+                    //         : await start(data.id);
+                    // if (res.success) {
+                    //     message.success('操作成功');
+                    //     tableRef.value?.reload();
+                    // } else {
+                    //     message.error('操作失败！');
+                    // }
+                },
+            },
+        },
+        {
+            key: 'delete',
+            text: '删除',
+            disabled: state === 'enabled',
+            tooltip: {
+                title:
+                    state === 'enabled' ? '请先禁用该组件，再删除。' : '删除',
+            },
+            popConfirm: {
+                title: '确认删除?',
+                onConfirm: async () => {
+                    // const res = await remove(data.id);
+                    // if (res.success) {
+                    //     message.success('操作成功');
+                    //     tableRef.value.reload();
+                    // } else {
+                    //     message.error('操作失败！');
+                    // }
+                },
+            },
+            icon: 'DeleteOutlined',
+        },
+    ];
+    return actions;
+};
+
+const handlAdd = () => {
+    // menuStory.jumpPage(`link/Type/Detail`, { id: ':id' }, { view: false });
+};
+
+const handlEye = (id: string) => {
+    // menuStory.jumpPage(`link/Type/Detail`, { id }, { view: true });
+};
+
+const handlEdit = (id: string) => {
+    // menuStory.jumpPage(`link/Type/Detail`, { id }, { view: false });
+};
+
+/**
+ * 搜索
+ * @param params
+ */
+const handleSearch = (e: any) => {
+    params.value = e;
+};
+</script>
+<style lang="less" scoped>
+.card-item-content {
+    min-height: 100px;
+
+    .card-item-content-title-a {
+        // color: #000 !important;
+        font-weight: 700;
+        font-size: 16px;
+        overflow: hidden; //超出的文本隐藏
+        text-overflow: ellipsis; //溢出用省略号显示
+        white-space: nowrap; //溢出不换行
+    }
+    .card-item-content-box {
+        min-height: 50px;
+    }
+    .card-item-content-text {
+        margin-top: 10px;
+        color: rgba(0, 0, 0, 0.75);
+        font-size: 12px;
+        overflow: hidden; //超出的文本隐藏
+        text-overflow: ellipsis; //溢出用省略号显示
+        white-space: nowrap; //溢出不换行
+    }
+}
+.details-text {
+    font-weight: 700;
+    font-size: 14px;
+}
+</style>
diff --git a/src/views/DataCollect/Channel/type.d.ts b/src/views/DataCollect/Channel/type.d.ts
new file mode 100644
index 00000000..87664902
--- /dev/null
+++ b/src/views/DataCollect/Channel/type.d.ts
@@ -0,0 +1,38 @@
+export interface ConfigurationType {
+    parserType: string | undefined;
+    port: string | undefined;
+    host: string | undefined;;
+    publicPort: string;
+    publicHost: string;
+    remoteHost: string;
+    remotePort: string;
+    secure: boolean;
+    username: string;
+    password: string;
+    topicPrefix: string;
+    maxMessageSize: string | number;
+    certId: string | undefined;
+    privateKeyAlias: string;
+    clientId: string;
+    parserConfiguration: {
+        delimited: string;
+        lang: string;
+        script: string;
+        size: string;
+        length: string;
+        offset: string;
+        little: string | boolean | undefined;
+    };
+}
+
+export interface FormDataType {
+    name: string;
+    type: string;
+    shareCluster: boolean;
+    description: string;
+}
+export interface FormData2Type {
+    id?: number | string;
+    serverId?: string | undefined;
+    configuration: ConfigurationType;
+}