diff --git a/src/api/data-collect/channel.ts b/src/api/data-collect/channel.ts
index 5c9a5312..08bbbd8c 100644
--- a/src/api/data-collect/channel.ts
+++ b/src/api/data-collect/channel.ts
@@ -1,10 +1,27 @@
 import server from '@/utils/request';
 
-export const queryChannel = (type: string, data: any) =>
+export const query = (data: any) =>
     server.post(`/data-collect/channel/_query`, data);
 
-export const removeChannel = (type: string, data: any) =>
-    server.remove(`/data-collect/channel//${id}`);
+export const remove = (id: string) =>
+    server.remove(`/data-collect/channel/${id}`);
 
-export const updateChannel = (type: string, data: any) =>
-    server.patch(`/data-collect/channel//${id}`, data);
+export const save = (data: any) => server.post(`/data-collect/channel`, data);
+
+export const update = (id: string, data: any) =>
+    server.put(`/data-collect/channel/${id}`, data);
+
+export const getProviders = () => server.get(`/gateway/device/providers`);
+
+export const queryOptionsList = (type: strimg) =>
+    server.get(`/data-collect/opc/${type}`);
+
+export const validateField = (data: any) =>
+    server.post(`/data-collect/opc/endpoint/_validate`, data, null, {
+        headers: {
+            'Content-Type': 'text/plain;charset=UTF-8',
+        },
+    });
+
+export const queryCertificateList = () =>
+    server.get(`/network/certificate/_query/no-paging?paging=false`, {});
diff --git a/src/views/DataCollect/Channel/Detail/index.vue b/src/views/DataCollect/Channel/Detail/index.vue
deleted file mode 100644
index 48f32450..00000000
--- a/src/views/DataCollect/Channel/Detail/index.vue
+++ /dev/null
@@ -1,1332 +0,0 @@
-<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/Save/index.vue b/src/views/DataCollect/Channel/Save/index.vue
new file mode 100644
index 00000000..350091e2
--- /dev/null
+++ b/src/views/DataCollect/Channel/Save/index.vue
@@ -0,0 +1,315 @@
+<template lang="">
+    <a-modal
+        :title="data.id ? '编辑' : '新增'"
+        :visible="true"
+        width="700px"
+        @cancel="handleCancel"
+    >
+        <a-form
+            class="form"
+            layout="vertical"
+            :model="formData"
+            name="basic"
+            autocomplete="off"
+            :rules="FormValidate"
+            ref="formRef"
+        >
+            <a-form-item label="通道名称" name="name">
+                <a-input
+                    placeholder="请输入通道名称"
+                    v-model:value="formData.name"
+                />
+            </a-form-item>
+            <a-form-item label="通讯协议" name="provider">
+                <a-select
+                    style="width: 100%"
+                    v-model:value="formData.provider"
+                    :options="providersList"
+                    placeholder="请选择通讯协议"
+                    allowClear
+                    show-search
+                    :filter-option="filterOption"
+                    :disabled="!!id"
+                />
+            </a-form-item>
+            <a-form-item
+                v-if="formData.provider === 'MODBUS_TCP'"
+                :name="['configuration', 'host']"
+                :rules="FormValidate.host"
+            >
+                <div class="form-label">
+                    Modbus主机IP
+                    <span class="form-label-required">*</span>
+                    <a-tooltip>
+                        <template #title>
+                            <p>支持ipv4、ipv6、域名</p>
+                        </template>
+                        <AIcon type="QuestionCircleOutlined" />
+                    </a-tooltip>
+                </div>
+                <a-input
+                    placeholder="请输入Modbus主机IP"
+                    v-model:value="formData.configuration.host"
+                />
+            </a-form-item>
+            <a-form-item
+                v-if="formData.provider === 'MODBUS_TCP'"
+                label="端口"
+                :name="['configuration', 'port']"
+                :rules="FormValidate.port"
+            >
+                <a-input-number
+                    style="width: 100%"
+                    placeholder="请输入端口"
+                    v-model:value="formData.configuration.port"
+                    :min="1"
+                    :max="65535"
+                />
+            </a-form-item>
+            <a-form-item
+                v-if="formData.provider === 'OPC_UA'"
+                label="端点url"
+                :name="['configuration', 'endpoint']"
+                :rules="FormValidate.endpoint"
+            >
+                <a-input
+                    placeholder="请输入端点url"
+                    v-model:value="formData.configuration.endpoint"
+                />
+            </a-form-item>
+            <a-form-item
+                v-if="formData.provider === 'OPC_UA'"
+                label="安全策略"
+                :name="['configuration.securityPolicy']"
+                :rules="FormValidate.securityPolicy"
+            >
+                <a-select
+                    style="width: 100%"
+                    v-model:value="formData.configuration.securityPolicy"
+                    :options="Options['security-policies']"
+                    placeholder="请选择安全策略"
+                    allowClear
+                    show-search
+                    :filter-option="filterOption"
+                />
+            </a-form-item>
+            <a-form-item
+                v-if="formData.provider === 'OPC_UA'"
+                label="安全模式"
+                :name="['configuration.securityMode']"
+                :rules="FormValidate.securityMode"
+            >
+                <a-select
+                    style="width: 100%"
+                    v-model:value="formData.configuration.securityMode"
+                    :options="Options['security-modes']"
+                    placeholder="请选择安全模式"
+                    allowClear
+                    show-search
+                    :filter-option="filterOption"
+                />
+            </a-form-item>
+            <a-form-item
+                v-if="
+                    formData.configuration.securityMode === 'SignAndEncrypt' ||
+                    formData.configuration.securityMode === 'Sign'
+                "
+                label="证书"
+                :name="['configuration.certificate']"
+                :rules="FormValidate.certificate"
+            >
+                <a-select
+                    style="width: 100%"
+                    v-model:value="formData.configuration.certificate"
+                    :options="certificateList"
+                    placeholder="请选择证书"
+                    allowClear
+                    show-search
+                    :filter-option="filterOption"
+                />
+            </a-form-item>
+            <a-form-item
+                v-if="formData.provider === 'OPC_UA'"
+                label="权限认证"
+                :name="['configuration.authType']"
+                :rules="FormValidate.authType"
+            >
+                <RadioCard
+                    layout="horizontal"
+                    :checkStyle="true"
+                    :options="Options['auth-types']"
+                    v-model="formData.configuration.authType"
+                />
+            </a-form-item>
+            <a-form-item
+                v-if="formData.configuration.authType === 'username'"
+                label="用户名"
+                :name="['configuration.username']"
+                :rules="FormValidate.username"
+            >
+                <a-input
+                    placeholder="请输入用户名"
+                    v-model:value="formData.configuration.username"
+                />
+            </a-form-item>
+            <a-form-item
+                v-if="formData.configuration.authType === 'username'"
+                label="密码"
+                :name="['configuration.password']"
+                :rules="FormValidate.password"
+            >
+                <a-input-password
+                    placeholder="请输入密码"
+                    v-model:value="formData.configuration.password"
+                />
+            </a-form-item>
+            <a-form-item label="说明" name="description">
+                <a-textarea
+                    placeholder="请输入说明"
+                    v-model:value="formData.description"
+                    :maxlength="200"
+                    :rows="3"
+                    showCount
+                />
+            </a-form-item>
+        </a-form>
+        <template #footer>
+            <a-button key="back" @click="handleCancel">取消</a-button>
+            <PermissionButton
+                key="submit"
+                type="primary"
+                :loading="loading"
+                @click="handleOk"
+                style="margin-left: 8px"
+                :hasPermission="`DataCollect/Channel:${id ? 'update' : 'add'}`"
+            >
+                确认
+            </PermissionButton>
+        </template>
+    </a-modal>
+</template>
+<script lang="ts" setup>
+import {
+    save,
+    update,
+    queryOptionsList,
+    queryCertificateList,
+    getProviders,
+} from '@/api/data-collect/channel';
+import { FormValidate, FormState } from '../data';
+import type { FormInstance } from 'ant-design-vue';
+import type { FormDataType } from '../type.d';
+
+const props = defineProps({
+    data: {
+        type: Object,
+        default: () => {},
+    },
+});
+
+const emit = defineEmits(['change']);
+const loading = ref(false);
+const id = props.data.id;
+const formRef = ref<FormInstance>();
+
+const certificateList = ref([]);
+const providersList = ref([]);
+const Options = ref({
+    'auth-types': [],
+    'security-modes': [],
+    'security-policies': [],
+});
+
+const formData = ref<FormDataType>(FormState);
+
+const handleOk = async () => {
+    const params = await formRef.value?.validate();
+    loading.value = true;
+    const response = !id
+        ? await save(params)
+        : await update(id, { ...props.data, ...params });
+    if (response.status === 200) {
+        emit('change', true);
+    }
+    loading.value = false;
+    formRef.value?.resetFields();
+};
+
+const handleCancel = () => {
+    emit('change', false);
+    formRef.value?.resetFields();
+};
+
+const filterOption = (input: string, option: any) => {
+    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+};
+
+const getOptionsList = async () => {
+    for (let key in Options.value) {
+        const res = await queryOptionsList(key);
+        Options.value[key] = res.result.map((item) => ({
+            label: item?.text || item,
+            value: item?.value || item,
+        }));
+    }
+};
+const getCertificateList = async () => {
+    const res = await queryCertificateList();
+    certificateList.value = res.result.map((item) => ({
+        value: item.id,
+        label: item.name,
+    }));
+};
+
+const getProvidersList = async () => {
+    const resp = await getProviders();
+    if (resp.status === 200) {
+        const list = [
+            { label: 'OPC UA', value: 'OPC_UA' },
+            { label: 'Modbus TCP', value: 'MODBUS_TCP' },
+        ];
+        const arr = resp.result
+            .filter(
+                (item: any) => item.id === 'modbus-tcp' || item.id === 'opc-ua',
+            )
+            .map((it: any) => (it?.id === 'opc-ua' ? 'OPC_UA' : 'MODBUS_TCP'));
+        const providers = list.filter((item: any) => arr.includes(item.value));
+        providersList.value = providers;
+        if (arr.includes('OPC_UA')) {
+            getOptionsList();
+        }
+    }
+};
+getProvidersList();
+getCertificateList();
+
+watch(
+    () => props.data,
+    (value) => {
+        if (value.id) formData.value = value;
+    },
+    { immediate: true, deep: true },
+);
+</script>
+
+<style lang="less" scoped>
+.form {
+    .form-radio-button {
+        width: 148px;
+        height: 80px;
+        padding: 0;
+        img {
+            width: 100%;
+            height: 100%;
+        }
+    }
+}
+.form-label {
+    height: 30px;
+    padding-bottom: 8px;
+    .form-label-required {
+        color: red;
+        margin: 0 4px 0 -2px;
+    }
+}
+</style>
diff --git a/src/views/DataCollect/Channel/data.ts b/src/views/DataCollect/Channel/data.ts
index 9bd25bd6..27c3d759 100644
--- a/src/views/DataCollect/Channel/data.ts
+++ b/src/views/DataCollect/Channel/data.ts
@@ -1,305 +1,39 @@
-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',
-    },
-};
+import { validateField } from '@/api/data-collect/channel';
+import { FormDataType } from './type.d';
 
-export const FormStates = {
+export const FormState: FormDataType = {
     name: '',
-    type: 'UDP',
-    shareCluster: true,
+    provider: undefined,
+    configuration: {
+        host: '',
+        port: '502',
+        endpoint: '',
+        securityPolicy: undefined,
+        securityMode: undefined,
+        certificate: undefined,
+        authType: undefined,
+        username: '',
+        password: '',
+    },
     description: '',
 };
 
-export const FormStates2 = {
-    serverId: undefined,
-    configuration: Configuration,
+export const StatusColorEnum = {
+    running: 'success',
+    disabled: 'error',
+    partialError: 'processing',
+    failed: 'warning',
+    stopped: 'default',
 };
-
-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 updateStatus = {
+    disabled: {
+        state: 'enabled',
+        runningState: 'running',
+    },
+    enabled: {
+        state: 'disabled',
+        runningState: 'stopped',
+    },
 };
 
 export const TiTlePermissionButtonStyle = {
@@ -313,3 +47,95 @@ export const TiTlePermissionButtonStyle = {
     width: 'calc(100%-100px)',
     // width: '60%',
 };
+
+export const regOnlyNumber = new RegExp(/^\d+$/);
+
+export const regIP = new RegExp(
+    /^([0-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.([0-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.([0-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.([0-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$/,
+);
+export const regIPv6 = new RegExp(
+    /^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$/,
+);
+export const regDomain = new RegExp(
+    /([0-9a-z-]{2,}\.[0-9a-z-]{2,3}\.[0-9a-z-]{2,3}|[0-9a-z-]{2,}\.[0-9a-z-]{2,3})$/i,
+);
+export const checkEndpoint = (_rule: Rule, value: string): Promise<any> =>
+    new Promise(async (resolve, reject) => {
+        if (value) {
+            const res = await validateField(value);
+            return res.result.passed ? resolve('') : reject(res.result.reason);
+        }
+    });
+export const FormValidate = {
+    name: [
+        { required: true, message: '请输入名称', trigger: 'blur' },
+        { max: 64, message: '最多可输入64个字符' },
+    ],
+    provider: [{ required: true, message: '请选择通讯协议' }],
+    host: [
+        {
+            required: true,
+            message: '请输入Modbus主机IP',
+        },
+        {
+            pattern: regIP || regIPv6 || regDomain,
+            message: '请输入正确格式的Modbus主机IP地址',
+        },
+    ],
+    port: [
+        {
+            required: true,
+            message: '请输入端口',
+        },
+        {
+            pattern: regOnlyNumber,
+            message: '请输入1-65535之间的正整数',
+        },
+    ],
+
+    endpoint: [
+        {
+            required: true,
+            message: '请输入端点url',
+        },
+        {
+            validator: checkEndpoint,
+            trigger: 'blur',
+        },
+    ],
+
+    securityPolicy: [
+        {
+            required: true,
+            message: '请选择安全策略',
+        },
+    ],
+    securityMode: [
+        {
+            required: true,
+            message: '请选择安全模式',
+        },
+    ],
+    certificate: [
+        {
+            required: true,
+            message: '请选择证书',
+        },
+    ],
+    authType: [
+        {
+            required: true,
+            message: '请选择权限认证',
+        },
+    ],
+    username: [
+        { required: true, message: '请输入用户名', trigger: 'blur' },
+        { max: 64, message: '最多可输入64个字符' },
+    ],
+    password: [
+        { required: true, message: '请输入密码', trigger: 'blur' },
+        { max: 64, message: '最多可输入64个字符' },
+    ],
+
+    description: [{ max: 200, message: '最多可输入200个字符' }],
+};
diff --git a/src/views/DataCollect/Channel/index.vue b/src/views/DataCollect/Channel/index.vue
index 9ec96770..5c6782e5 100644
--- a/src/views/DataCollect/Channel/index.vue
+++ b/src/views/DataCollect/Channel/index.vue
@@ -3,12 +3,12 @@
         <div>
             <Search :columns="columns" target="search" @search="handleSearch" />
 
-            <JTable
+            <j-pro-table
                 ref="tableRef"
                 :columns="columns"
                 model="CARD"
                 :gridColumn="3"
-                :request="queryChannel"
+                :request="query"
                 :defaultParams="{
                     sorts: [{ name: 'createTime', order: 'desc' }],
                 }"
@@ -30,12 +30,9 @@
                         :value="slotProps"
                         :actions="getActions(slotProps, 'card')"
                         v-bind="slotProps"
-                        :status="slotProps.state.value"
-                        :statusText="slotProps.state.text"
-                        :statusNames="{
-                            enabled: 'success',
-                            disabled: 'error',
-                        }"
+                        :status="getState(slotProps).value"
+                        :statusText="getState(slotProps).text"
+                        :statusNames="StatusColorEnum"
                     >
                         <template #img>
                             <slot name="img">
@@ -47,7 +44,7 @@
                                 <PermissionButton
                                     type="link"
                                     @click="handlEye(slotProps.id)"
-                                    hasPermission="link/Type:view"
+                                    hasPermission="DataCollect/Collector:view"
                                     :style="TiTlePermissionButtonStyle"
                                 >
                                     {{ slotProps.name }}
@@ -99,7 +96,9 @@
                                     ...item.tooltip,
                                 }"
                                 @click="item.onClick"
-                                :hasPermission="'link/Type:' + item.key"
+                                :hasPermission="
+                                    'DataCollect/Channel:' + item.key
+                                "
                             >
                                 <AIcon
                                     type="DeleteOutlined"
@@ -113,30 +112,31 @@
                         </template>
                     </CardBox>
                 </template>
-            </JTable>
+            </j-pro-table>
+            <Save v-if="visible" :data="current" @change="saveChange" />
         </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 { query, remove, update } from '@/api/data-collect/channel';
 import { message } from 'ant-design-vue';
-import { TiTlePermissionButtonStyle } from './data';
+import {
+    TiTlePermissionButtonStyle,
+    StatusColorEnum,
+    updateStatus,
+} from './data';
 import { useMenuStore } from 'store/menu';
+import Save from './Save/index.vue';
+import _ from 'lodash';
 
 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 visible = ref(false);
+const current = ref({});
 
 const columns = [
     {
@@ -214,17 +214,6 @@ const getActions = (
     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: '编辑',
@@ -233,7 +222,7 @@ const getActions = (
             },
             icon: 'EditOutlined',
             onClick: () => {
-                handlEdit(data.id);
+                handlEdit(data);
             },
         },
         {
@@ -246,16 +235,11 @@ const getActions = (
             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('操作失败！');
-                    // }
+                    const res = await update(data.id, updateStatus[state]);
+                    if (res.success) {
+                        message.success('操作成功');
+                        tableRef.value?.reload();
+                    }
                 },
             },
         },
@@ -270,13 +254,11 @@ const getActions = (
             popConfirm: {
                 title: '确认删除?',
                 onConfirm: async () => {
-                    // const res = await remove(data.id);
-                    // if (res.success) {
-                    //     message.success('操作成功');
-                    //     tableRef.value.reload();
-                    // } else {
-                    //     message.error('操作失败！');
-                    // }
+                    const res = await remove(data.id);
+                    if (res.success) {
+                        message.success('操作成功');
+                        tableRef.value.reload();
+                    }
                 },
             },
             icon: 'DeleteOutlined',
@@ -286,15 +268,38 @@ const getActions = (
 };
 
 const handlAdd = () => {
-    // menuStory.jumpPage(`link/Type/Detail`, { id: ':id' }, { view: false });
+    current.value = {};
+    visible.value = true;
 };
 
+const handlEdit = (data: object) => {
+    current.value = _.cloneDeep(data);
+    visible.value = true;
+};
 const handlEye = (id: string) => {
-    // menuStory.jumpPage(`link/Type/Detail`, { id }, { view: true });
+    console.log(id);
 };
-
-const handlEdit = (id: string) => {
-    // menuStory.jumpPage(`link/Type/Detail`, { id }, { view: false });
+const saveChange = (value: object) => {
+    visible.value = false;
+    current.value = {};
+    if (value) {
+        message.success('操作成功');
+        tableRef.value.reload();
+    }
+};
+const getState = (record: Partial<Record<string, any>>) => {
+    if (record) {
+        if (record?.state?.value === 'enabled') {
+            return { ...record?.runningState };
+        } else {
+            return {
+                text: '禁用',
+                value: 'disabled',
+            };
+        }
+    } else {
+        return {};
+    }
 };
 
 /**
diff --git a/src/views/DataCollect/Channel/type.d.ts b/src/views/DataCollect/Channel/type.d.ts
index 87664902..f4270317 100644
--- a/src/views/DataCollect/Channel/type.d.ts
+++ b/src/views/DataCollect/Channel/type.d.ts
@@ -1,38 +1,19 @@
 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;
-    };
+    endpoint: string,
+    securityPolicy: string | undefined,
+    securityMode: string | undefined,
+    certificate: string | undefined,
+    authType: string | undefined,
+
 }
 
 export interface FormDataType {
     name: string;
-    type: string;
-    shareCluster: boolean;
-    description: string;
-}
-export interface FormData2Type {
-    id?: number | string;
-    serverId?: string | undefined;
+    provider:  string | undefined,
     configuration: ConfigurationType;
+    description?: string;
 }