diff --git a/public/images/network/01.jpg b/public/images/network/01.jpg
deleted file mode 100644
index 950b64d7..00000000
Binary files a/public/images/network/01.jpg and /dev/null differ
diff --git a/public/images/network/01.png b/public/images/network/01.png
new file mode 100644
index 00000000..9ec5cdc8
Binary files /dev/null and b/public/images/network/01.png differ
diff --git a/public/images/network/02.jpg b/public/images/network/02.jpg
index 745ccacc..950b64d7 100644
Binary files a/public/images/network/02.jpg and b/public/images/network/02.jpg differ
diff --git a/public/images/network/03.png b/public/images/network/03.png
new file mode 100644
index 00000000..a9e8e8d3
Binary files /dev/null and b/public/images/network/03.png differ
diff --git a/public/images/network/03.jpg b/public/images/network/04.jpg
similarity index 100%
rename from public/images/network/03.jpg
rename to public/images/network/04.jpg
diff --git a/public/images/network/05.jpg b/public/images/network/05.jpg
new file mode 100644
index 00000000..e15d4962
Binary files /dev/null and b/public/images/network/05.jpg differ
diff --git a/public/images/network/06.jpg b/public/images/network/06.jpg
new file mode 100644
index 00000000..e5a2f45a
Binary files /dev/null and b/public/images/network/06.jpg differ
diff --git a/src/api/iot-card/cardManagement.ts b/src/api/iot-card/cardManagement.ts
new file mode 100644
index 00000000..390685e0
--- /dev/null
+++ b/src/api/iot-card/cardManagement.ts
@@ -0,0 +1,67 @@
+import server from '@/utils/request'
+
+/**
+ * 不分页查询平台对接
+ * @param data
+ */
+export const queryPlatformNoPage = (data: any) => server.post(`/network/card/platform/_query/no-paging`, data)
+
+/**
+ * 分页查询物联卡管理列表
+ * @param data
+ */
+export const query = (data: any) => server.post(`/network/card/_query`, data)
+
+/**
+ * 激活待激活物联卡
+ * @param cardId
+ */
+export const changeDeploy = (cardId: string) => server.get(`/network/card/${cardId}/_activation`);
+
+/**
+ * 停用已激活物联卡
+ * @param cardId
+ */
+export const unDeploy = (cardId: string) => server.get(`/network/card/${cardId}/_deactivate`);
+
+/**
+ * 复机已停机物联卡
+ * @param cardId 
+ */
+export const resumption = (cardId: string) => server.get(`/network/card/${cardId}/_resumption`);
+
+/**
+ * 删除物联卡
+ * @param id 
+ */
+export const del = (id: string) => server.remove(`/network/card/${id}`);
+
+
+/**
+ * 激活待激活物联卡(批量)
+ * @param data
+ */
+export const changeDeployBatch = (data: any) => server.get(`/network/card/_activation/_bitch`, data);
+
+/**
+ * 停用已激活物联卡(批量)
+ * @param data
+ */
+export const unDeployBatch = (data: any) => server.get(`/network/card/_deactivate/_bitch`, data);
+
+/**
+ * 复机已停机物联卡(批量)
+ * @param data
+ */
+export const resumptionBatch = (data: any) => server.get(`/network/card/_resumption/_bitch`, data);
+
+/**
+ * 同步物联卡状态
+ */
+export const sync = () => server.get(`/network/card/state/_sync`);
+
+/**
+ * 批量删除物联卡
+ * @param data
+ */
+export const removeCards = (data: any) => server.post(`/network/card/batch/_delete`, data);
\ No newline at end of file
diff --git a/src/components/AIcon/index.tsx b/src/components/AIcon/index.tsx
index 4d97fdc9..152420a0 100644
--- a/src/components/AIcon/index.tsx
+++ b/src/components/AIcon/index.tsx
@@ -29,6 +29,10 @@ const iconKeys = [
     'UploadOutlined',
     'PlusCircleOutlined',
     'QuestionCircleOutlined',
+    'DisconnectOutlined',
+    'LinkOutlined',
+    'PoweroffOutlined',
+    'SwapOutlined',
     'BugOutlined',
     'BarsOutlined',
     'ArrowDownOutlined',
diff --git a/src/router/menu.ts b/src/router/menu.ts
index 78683b84..2e92daff 100644
--- a/src/router/menu.ts
+++ b/src/router/menu.ts
@@ -127,6 +127,10 @@ export default [
       path: '/iot-card/Dashboard',
       component: () => import('@/views/iot-card/Dashboard/index.vue')
     },
+    {
+      path: '/iot-card/CardManagement',
+      component: () => import('@/views/iot-card/CardManagement/index.vue')
+    },
     // 北向输出
     {
         path: '/northbound/DuerOS',
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index 30e21216..239ee90f 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -55,4 +55,21 @@ export const downloadObject = (record: Record<string, any>, fileName: string, fo
   document.body.removeChild(formElement);
 };
 // 是否不是community版本
-export const isNoCommunity = !(localStorage.getItem(SystemConst.VERSION_CODE) === 'community');
\ No newline at end of file
+export const isNoCommunity = !(localStorage.getItem(SystemConst.VERSION_CODE) === 'community');
+
+
+/**
+ * 生成随机数
+ * @param length 
+ * @returns 
+ */
+export const randomString = (length?: number) => {
+  const tempLength = length || 32;
+  const chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
+  const maxPos = chars.length;
+  let pwd = '';
+  for (let i = 0; i < tempLength; i += 1) {
+    pwd += chars.charAt(Math.floor(Math.random() * maxPos));
+  }
+  return pwd;
+};
diff --git a/src/views/iot-card/CardManagement/index.vue b/src/views/iot-card/CardManagement/index.vue
new file mode 100644
index 00000000..6ab563d4
--- /dev/null
+++ b/src/views/iot-card/CardManagement/index.vue
@@ -0,0 +1,571 @@
+<!-- 物联卡管理 -->
+<template>
+    <div class="page-container">
+        <Search
+            :columns="columns"
+            target="iot-card-management-search"
+            @search="handleSearch"
+        />
+        <JTable
+            ref="cardManageRef"
+            :columns="columns"
+            :request="query"
+            :defaultParams="{ sorts: [{ name: 'createTime', order: 'desc' }] }"
+            :rowSelection="{
+                selectedRowKeys: _selectedRowKeys,
+                onChange: onSelectChange,
+            }"
+            @cancelSelect="cancelSelect"
+            :params="params"
+        >
+            <template #headerTitle>
+                <a-space>
+                    <a-button type="primary" @click="handleAdd">
+                        <AIcon type="PlusOutlined" />新增
+                    </a-button>
+                    <a-dropdown>
+                        <a-button>
+                            批量操作
+                            <AIcon type="DownOutlined" />
+                        </a-button>
+                        <template #overlay>
+                            <a-menu>
+                                <a-menu-item>
+                                    <a-button @click="exportVisible = true">
+                                        <AIcon type="ExportOutlined" />
+                                        批量导出
+                                    </a-button>
+                                </a-menu-item>
+                                <a-menu-item>
+                                    <a-button @click="importVisible = true"
+                                        ><AIcon
+                                            type="ImportOutlined"
+                                        />批量导入</a-button
+                                    >
+                                </a-menu-item>
+                                <a-menu-item>
+                                    <a-popconfirm
+                                        @confirm="handleActive"
+                                        title="确认激活吗？"
+                                    >
+                                        <a-button>
+                                            <AIcon type="CheckCircleOutlined" />
+                                            批量激活
+                                        </a-button>
+                                    </a-popconfirm>
+                                </a-menu-item>
+                                <a-menu-item>
+                                    <a-popconfirm
+                                        @confirm="handleStop"
+                                        title="确认停用吗？"
+                                    >
+                                        <a-button type="primary" ghost>
+                                            <AIcon type="StopOutlined" />
+                                            批量停用
+                                        </a-button>
+                                    </a-popconfirm>
+                                </a-menu-item>
+                                <a-menu-item>
+                                    <a-popconfirm
+                                        @confirm="handleResumption"
+                                        title="确认复机吗？"
+                                    >
+                                        <a-button type="primary" ghost>
+                                            <AIcon type="PoweroffOutlined" />
+                                            批量复机
+                                        </a-button>
+                                    </a-popconfirm>
+                                </a-menu-item>
+                                <a-menu-item>
+                                    <a-popconfirm
+                                        @confirm="handleSync"
+                                        title="确认同步状态吗？"
+                                    >
+                                        <a-button type="primary" ghost>
+                                            <AIcon type="SwapOutlined" />
+                                            同步状态
+                                        </a-button>
+                                    </a-popconfirm>
+                                </a-menu-item>
+                                <a-menu-item v-if="_selectedRowKeys.length > 0">
+                                    <a-popconfirm
+                                        @confirm="handelRemove"
+                                        title="确认删除吗？"
+                                    >
+                                        <a-button>
+                                            <AIcon type="DeleteOutlined" />
+                                            批量删除
+                                        </a-button>
+                                    </a-popconfirm>
+                                </a-menu-item>
+                            </a-menu>
+                        </template>
+                    </a-dropdown>
+                </a-space>
+            </template>
+            <template #totalFlow="slotProps">
+                <div>
+                    {{
+                        slotProps.totalFlow
+                            ? slotProps.totalFlow.toFixed(2) + ' M'
+                            : ''
+                    }}
+                </div>
+            </template>
+            <template #usedFlow="slotProps">
+                <div>
+                    {{
+                        slotProps.usedFlow
+                            ? slotProps.usedFlow.toFixed(2) + ' M'
+                            : ''
+                    }}
+                </div>
+            </template>
+            <template #residualFlow="slotProps">
+                <div>
+                    {{
+                        slotProps.residualFlow
+                            ? slotProps.residualFlow.toFixed(2) + ' M'
+                            : ''
+                    }}
+                </div>
+            </template>
+            <template #cardType="slotProps">
+                {{ slotProps.cardType.text }}
+            </template>
+            <template #cardStateType="slotProps">
+                {{ slotProps.cardStateType.text }}
+            </template>
+            <template #activationDate="slotProps">
+                {{
+                    slotProps.activationDate
+                        ? moment(slotProps.activationDate).format(
+                              'YYYY-MM-DD HH:mm:ss',
+                          )
+                        : ''
+                }}
+            </template>
+            <template #updateTime="slotProps">
+                {{
+                    slotProps.updateTime
+                        ? moment(slotProps.updateTime).format(
+                              'YYYY-MM-DD HH:mm:ss',
+                          )
+                        : ''
+                }}
+            </template>
+            <template #action="slotProps">
+                <a-space :size="16">
+                    <a-tooltip
+                        v-for="i in getActions(slotProps)"
+                        :key="i.key"
+                        v-bind="i.tooltip"
+                    >
+                        <a-popconfirm v-if="i.popConfirm" v-bind="i.popConfirm">
+                            <a-button
+                                :disabled="i.disabled"
+                                style="padding: 0"
+                                type="link"
+                                ><AIcon :type="i.icon"
+                            /></a-button>
+                        </a-popconfirm>
+                        <a-button
+                            style="padding: 0"
+                            type="link"
+                            v-else
+                            @click="i.onClick && i.onClick(slotProps)"
+                        >
+                            <a-button
+                                :disabled="i.disabled"
+                                style="padding: 0"
+                                type="link"
+                                ><AIcon :type="i.icon"
+                            /></a-button>
+                        </a-button>
+                    </a-tooltip>
+                </a-space>
+            </template>
+        </JTable>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { ActionsType } from '@/components/Table';
+import moment from 'moment';
+import {
+    query,
+    queryPlatformNoPage,
+    changeDeploy,
+    unDeploy,
+    resumption,
+    del,
+    changeDeployBatch,
+    unDeployBatch,
+    resumptionBatch,
+    sync,
+    removeCards,
+} from '@/api/iot-card/cardManagement';
+import { message } from 'ant-design-vue';
+
+const cardManageRef = ref<Record<string, any>>({});
+const params = ref<Record<string, any>>({});
+const _selectedRowKeys = ref<string[]>([]);
+const _selectedRow = ref<any[]>([]);
+const visible = ref<boolean>(false);
+const exportVisible = ref<boolean>(false);
+const importVisible = ref<boolean>(false);
+
+const columns = [
+    {
+        title: '卡号',
+        dataIndex: 'id',
+        key: 'id',
+        width: 300,
+        ellipsis: true,
+        fixed: 'left',
+        search: {
+            type: 'string',
+        },
+    },
+    {
+        title: 'ICCID',
+        dataIndex: 'iccId',
+        key: 'iccId',
+        ellipsis: true,
+        width: 200,
+        search: {
+            type: 'string',
+        },
+    },
+    {
+        title: '绑定设备',
+        dataIndex: 'deviceName',
+        key: 'deviceName',
+        ellipsis: true,
+        width: 200,
+    },
+    {
+        title: '平台对接',
+        dataIndex: 'platformConfigName',
+        key: 'platformConfigName',
+        width: 200,
+        search: {
+            rename: 'platformConfigId',
+            type: 'select',
+            options: async () => {
+                return new Promise((resolve) => {
+                    queryPlatformNoPage({
+                        sorts: [{ name: 'createTime', order: 'desc' }],
+                        terms: [{ column: 'state', value: 'enabled' }],
+                    }).then((resp: any) => {
+                        const list = resp.result.map((item: any) => ({
+                            label: item.name,
+                            value: item.id,
+                        }));
+                        resolve(list);
+                    });
+                });
+            },
+        },
+    },
+    {
+        title: '运营商',
+        dataIndex: 'operatorName',
+        key: 'operatorName',
+        width: 120,
+        search: {
+            type: 'select',
+            options: [
+                { label: '移动', value: '移动' },
+                { label: '电信', value: '电信' },
+                { label: '联通', value: '联通' },
+            ],
+        },
+    },
+    {
+        title: '类型',
+        dataIndex: 'cardType',
+        key: 'cardType',
+        scopedSlots: true,
+        width: 120,
+        search: {
+            type: 'select',
+            options: [
+                { label: '年卡', value: 'year' },
+                { label: '季卡', value: 'season' },
+                { label: '月卡', value: 'month' },
+                { label: '其他', value: 'other' },
+            ],
+        },
+    },
+    {
+        title: '总流量',
+        dataIndex: 'totalFlow',
+        width: 120,
+        scopedSlots: true,
+    },
+    {
+        title: '使用流量',
+        dataIndex: 'usedFlow',
+        width: 120,
+        scopedSlots: true,
+    },
+    {
+        title: '剩余流量',
+        dataIndex: 'residualFlow',
+        width: 120,
+        scopedSlots: true,
+    },
+    {
+        title: '激活日期',
+        dataIndex: 'activationDate',
+        key: 'activationDate',
+        scopedSlots: true,
+        width: 200,
+        search: {
+            type: 'date',
+        },
+    },
+    {
+        title: '更新时间',
+        dataIndex: 'updateTime',
+        key: 'updateTime',
+        scopedSlots: true,
+        width: 200,
+        search: {
+            type: 'date',
+        },
+    },
+    {
+        title: '状态',
+        dataIndex: 'cardStateType',
+        key: 'cardStateType',
+        width: 180,
+        scopedSlots: true,
+        search: {
+            type: 'select',
+            options: [
+                { label: '正常', value: 'using' },
+                { label: '未激活', value: 'toBeActivated' },
+                { label: '停机', value: 'deactivate' },
+            ],
+        },
+    },
+    {
+        title: '操作',
+        key: 'action',
+        fixed: 'right',
+        width: 250,
+        scopedSlots: true,
+    },
+];
+
+const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
+    if (!data) return [];
+    return [
+        {
+            key: 'edit',
+            text: '编辑',
+            tooltip: {
+                title: '编辑',
+            },
+            icon: 'EditOutlined',
+        },
+        {
+            key: 'view',
+            text: '查看',
+            tooltip: {
+                title: '查看',
+            },
+            icon: 'EyeOutlined',
+        },
+        {
+            key: 'bindDevice',
+            text: data.deviceId ? '解绑设备' : '绑定设备',
+            tooltip: {
+                title: data.deviceId ? '解绑设备' : '绑定设备',
+            },
+            icon: data.deviceId ? 'DisconnectOutlined' : 'LinkOutlined',
+        },
+        {
+            key: 'activation',
+            text:
+                data.cardStateType?.value === 'toBeActivated'
+                    ? '激活'
+                    : data.cardStateType?.value === 'deactivate'
+                    ? '复机'
+                    : '停用',
+            tooltip: {
+                title:
+                    data.cardStateType?.value === 'toBeActivated'
+                        ? '激活'
+                        : data.cardStateType?.value === 'deactivate'
+                        ? '复机'
+                        : '停用',
+            },
+            icon:
+                data.cardStateType?.value === 'toBeActivated'
+                    ? 'CheckCircleOutlined'
+                    : data.cardStateType?.value === 'deactivate'
+                    ? 'PoweroffOutlined'
+                    : 'StopOutlined',
+            popConfirm: {
+                title:
+                    data.cardStateType?.value === 'toBeActivated'
+                        ? '确认激活？'
+                        : data.cardStateType?.value === 'deactivate'
+                        ? '确认复机？'
+                        : '确认停用?',
+                onConfirm: async () => {
+                    if (data.cardStateType?.value === 'toBeActivated') {
+                        changeDeploy(data.id).then((resp) => {
+                            if (resp.status === 200) {
+                                message.success('操作成功');
+                                cardManageRef.value?.reload();
+                            }
+                        });
+                    } else if (data.cardStateType?.value === 'deactivate') {
+                        resumption(data.id).then((resp) => {
+                            if (resp.status === 200) {
+                                message.success('操作成功');
+                                cardManageRef.value?.reload();
+                            }
+                        });
+                    } else {
+                        unDeploy(data.id).then((resp) => {
+                            if (resp.status === 200) {
+                                message.success('操作成功');
+                                cardManageRef.value?.reload();
+                            }
+                        });
+                    }
+                },
+            },
+        },
+        {
+            key: 'delete',
+            text: '删除',
+            tooltip: {
+                title: '删除',
+            },
+            popConfirm: {
+                title: '确认删除?',
+                onConfirm: async () => {
+                    const resp: any = await del(data.id);
+                    if (resp.status === 200) {
+                        message.success('操作成功！');
+                        cardManageRef.value?.reload();
+                    } else {
+                        message.error('操作失败！');
+                    }
+                },
+            },
+            icon: 'DeleteOutlined',
+        },
+    ];
+};
+
+const handleSearch = (params: any) => {
+    console.log(params);
+    params.value = params;
+};
+
+const onSelectChange = (keys: string[], rows: []) => {
+    _selectedRowKeys.value = [...keys];
+    _selectedRow.value = [...rows];
+};
+
+const cancelSelect = () => {
+    _selectedRowKeys.value = [];
+};
+
+/**
+ * 新增
+ */
+const handleAdd = () => {};
+
+/**
+ * 批量激活
+ */
+const handleActive = () => {
+    if (
+        _selectedRowKeys.value.length >= 10 &&
+        _selectedRowKeys.value.length <= 100
+    ) {
+        changeDeployBatch(_selectedRowKeys.value).then((res: any) => {
+            if (res.status === 200) {
+                message.success('操作成功');
+            }
+        });
+    } else {
+        message.warn('仅支持同一个运营商下且最少10条数据,最多100条数据');
+    }
+};
+
+/**
+ * 批量停用
+ */
+const handleStop = () => {
+    if (
+        _selectedRowKeys.value.length >= 10 &&
+        _selectedRowKeys.value.length <= 100
+    ) {
+        unDeployBatch(_selectedRowKeys.value).then((res: any) => {
+            if (res.status === 200) {
+                message.success('操作成功');
+            }
+        });
+    } else {
+        message.warn('仅支持同一个运营商下且最少10条数据,最多100条数据');
+    }
+};
+
+/**
+ * 批量复机
+ */
+const handleResumption = () => {
+    if (
+        _selectedRowKeys.value.length >= 10 &&
+        _selectedRowKeys.value.length <= 100
+    ) {
+        resumptionBatch(_selectedRowKeys.value).then((res: any) => {
+            if (res.status === 200) {
+                message.success('操作成功');
+            }
+        });
+    } else {
+        message.warn('仅支持同一个运营商下且最少10条数据,最多100条数据');
+    }
+};
+
+/**
+ * 同步状态
+ */
+const handleSync = () => {
+    sync().then((res: any) => {
+        if (res.status === 200) {
+            cardManageRef.value?.reload();
+            message.success('同步状态成功');
+        }
+    });
+};
+
+/**
+ * 批量删除
+ */
+const handelRemove = async () => {
+    const resp = await removeCards(_selectedRow.value);
+    if (resp.status === 200) {
+        message.success('操作成功！');
+        _selectedRowKeys.value = [];
+        _selectedRow.value = [];
+        cardManageRef.value?.reload();
+    }
+};
+</script>
+
+<style scoped lang="less">
+.search {
+    width: calc(100% - 330px);
+}
+</style>
diff --git a/src/views/link/AccessConfig/Detail/index.vue b/src/views/link/AccessConfig/Detail/index.vue
index 07151cd1..f84b13fb 100644
--- a/src/views/link/AccessConfig/Detail/index.vue
+++ b/src/views/link/AccessConfig/Detail/index.vue
@@ -17,6 +17,11 @@
                 <Media v-if="showType === 'media'" :provider="provider" />
                 <Channel v-if="showType === 'channel'" :provider="provider" />
                 <Edge v-if="showType === 'edge'" :provider="provider" />
+                <Cloud
+                    v-if="showType === 'cloud'"
+                    :provider="provider"
+                    :data="data"
+                />
             </div>
         </a-card>
     </a-spin>
@@ -30,6 +35,7 @@ import { getProviders, detail } from '@/api/link/accessConfig';
 import Media from '../components/Media/index.vue';
 import Channel from '../components/Channel/index.vue';
 import Edge from '../components/Edge/index.vue';
+import Cloud from '../components/Cloud/index.vue';
 
 // const router = useRouter();
 const route = useRoute();
diff --git a/src/views/link/AccessConfig/components/Cloud/Ctwing.vue b/src/views/link/AccessConfig/components/Cloud/Ctwing.vue
new file mode 100644
index 00000000..806b33bb
--- /dev/null
+++ b/src/views/link/AccessConfig/components/Cloud/Ctwing.vue
@@ -0,0 +1,624 @@
+<template>
+    <div class="container">
+        <a-steps class="steps-steps" :current="stepCurrent">
+            <a-step v-for="item in steps" :key="item" :title="item" />
+        </a-steps>
+        <div class="steps-content">
+            <div class="steps-box" v-if="current === 0">
+                <div class="alert">
+                    <info-circle-outlined />
+                    通过CTWing平台的HTTP推送服务进行数据接入
+                </div>
+                <div style="margin-top: 15px">
+                    <a-row :gutter="[24, 24]">
+                        <a-col :span="16">
+                            <a-form
+                                :model="formState"
+                                ref="formRef1"
+                                name="basic"
+                                autocomplete="off"
+                                layout="vertical"
+                            >
+                                <a-row :gutter="[24, 24]">
+                                    <a-col :span="12">
+                                        <a-form-item
+                                            label="接口地址"
+                                            name="apiAddress"
+                                            :rules="[
+                                                {
+                                                    required: true,
+                                                },
+                                            ]"
+                                        >
+                                            <a-input
+                                                disabled
+                                                v-model:value="
+                                                    formState.apiAddress
+                                                "
+                                            />
+                                        </a-form-item>
+                                    </a-col>
+                                    <a-col :span="12">
+                                        <a-form-item
+                                            label="appKey"
+                                            name="appKey"
+                                            :rules="[
+                                                {
+                                                    required: true,
+                                                    message: '请输入appKey',
+                                                },
+                                                {
+                                                    max: 64,
+                                                    message:
+                                                        '最多可输入64个字符',
+                                                },
+                                            ]"
+                                        >
+                                            <a-input
+                                                v-model:value="formState.appKey"
+                                                placeholder="请输入appKey"
+                                            />
+                                        </a-form-item>
+                                    </a-col>
+                                </a-row>
+                                <a-row :gutter="[24, 24]">
+                                    <a-col :span="12">
+                                        <a-form-item
+                                            label="appSecret"
+                                            name="appSecret"
+                                            :rules="[
+                                                {
+                                                    required: true,
+                                                    message: '请输入appSecret',
+                                                },
+                                                {
+                                                    max: 64,
+                                                    message:
+                                                        '最多可输入64个字符',
+                                                },
+                                            ]"
+                                        >
+                                            <a-input
+                                                v-model:value="
+                                                    formState.appSecret
+                                                "
+                                                placeholder="请输入appSecret"
+                                            />
+                                        </a-form-item>
+                                    </a-col>
+                                    <a-col :span="12"> </a-col>
+                                </a-row>
+                                <a-row :gutter="[24, 24]">
+                                    <a-col :span="24">
+                                        <a-form-item
+                                            label="说明"
+                                            name="description"
+                                        >
+                                            <a-textarea
+                                                placeholder="请输入说明"
+                                                :rows="4"
+                                                v-model:value="
+                                                    formState.description
+                                                "
+                                                show-count
+                                                :maxlength="200"
+                                            />
+                                        </a-form-item>
+                                    </a-col>
+                                </a-row> </a-form
+                        ></a-col>
+                        <a-col :span="8">
+                            <div class="doc">
+                                <h1>操作指引：</h1>
+                                <div>
+                                    1、CTWing端创建产品、设备，以及一个第三方应用
+                                </div>
+                                <div>
+                                    2、CTWing端配置产品/设备/分组级订阅，订阅方URL地址请填写:
+                                    <div style="word-wrap: break-word">
+                                        {{
+                                            `${origin}/api/ctwing/${randomString()}/notify`
+                                        }}
+                                    </div>
+                                </div>
+                                <div class="image">
+                                    <a-image width="100%" :src="img1" />
+                                </div>
+                                <div>
+                                    3、IOT端创建类型为CTWing的设备接入网关
+                                </div>
+                                <div>
+                                    4、IOT端创建产品，选中接入方式为CTWing,填写CTWing平台中的产品ID、Master-APIkey。
+                                </div>
+                                <div class="image">
+                                    <a-image width="100%" :src="img2" />
+                                </div>
+                                <div>
+                                    5、IOT端添加设备，为每一台设备设置唯一的IMEI（需与CTWing平台中填写的值一致）
+                                </div>
+                                <div class="image">
+                                    <a-image width="100%" :src="img3" />
+                                </div>
+                                <h1>设备接入网关配置说明</h1>
+                                <div>
+                                    1.请将CTWing的AEP平台-应用管理中的App
+                                    Key和App Secret复制到当前页面
+                                </div>
+                                <div class="image">
+                                    <a-image width="100%" :src="img4" />
+                                </div>
+                                <h1>其他说明</h1>
+                                <div>
+                                    1.在IOT端启用设备时，若CTWing平台没有与之对应的设备，则将在CTWing端自动创建新设备
+                                </div>
+                            </div>
+                        </a-col>
+                    </a-row>
+                </div>
+            </div>
+        </div>
+        <div class="steps-content">
+            <div class="steps-box" v-if="current === 1">
+                <div class="alert">
+                    <info-circle-outlined />
+                    只能选择HTTP通信方式的协议
+                </div>
+                <div class="search">
+                    <a-input-search
+                        allowClear
+                        placeholder="请输入"
+                        style="width: 300px"
+                        @search="procotolSearch"
+                    />
+                    <a-button type="primary" @click="addProcotol"
+                        >新增</a-button
+                    >
+                </div>
+                <div class="card-item">
+                    <a-row :gutter="[24, 24]" v-if="procotolList.length > 0">
+                        <a-col
+                            :span="8"
+                            v-for="item in procotolList"
+                            :key="item.id"
+                        >
+                            <access-card
+                                @checkedChange="procotolChange"
+                                :checked="procotolCurrent"
+                                :data="item"
+                            >
+                            </access-card>
+                        </a-col>
+                    </a-row>
+                    <a-empty v-else description="暂无数据" />
+                </div>
+            </div>
+        </div>
+        <div v-if="current === 2" class="card-last">
+            <a-row :gutter="[24, 24]">
+                <a-col :span="12">
+                    <title-component data="基本信息" />
+                    <div>
+                        <a-form
+                            :model="form"
+                            name="basic"
+                            autocomplete="off"
+                            layout="vertical"
+                            ref="formRef2"
+                        >
+                            <a-form-item
+                                label="名称"
+                                name="name"
+                                :rules="[
+                                    {
+                                        required: true,
+                                        message: '请输入名称',
+                                        trigger: 'blur',
+                                    },
+                                    { max: 64, message: '最多可输入64个字符' },
+                                ]"
+                            >
+                                <a-input
+                                    placeholder="请输入名称"
+                                    v-model:value="form.name"
+                                />
+                            </a-form-item>
+                            <a-form-item label="说明" name="description">
+                                <a-textarea
+                                    placeholder="请输入说明"
+                                    :rows="4"
+                                    v-model:value="form.description"
+                                    show-count
+                                    :maxlength="200"
+                                />
+                            </a-form-item>
+                        </a-form>
+                    </div>
+                </a-col>
+                <a-col :span="12">
+                    <div class="config-right">
+                        <div class="config-right-item">
+                            <title-component data="配置概览" />
+                            <div class="config-right-item-context">
+                                接入方式：{{ provider.name }}
+                            </div>
+                            <div class="config-right-item-context">
+                                {{ provider.description }}
+                            </div>
+                            <div class="config-right-item-context">
+                                消息协议：{{ procotolCurrent }}
+                            </div>
+                        </div>
+                        <div class="config-right-item">
+                            <title-component data="设备接入指引" />
+                            <div class="config-right-item-context">
+                                1、创建类型为{{
+                                    props?.provider?.id === 'OneNet'
+                                        ? 'OneNet'
+                                        : 'CTWing'
+                                }}的设备接入网关
+                            </div>
+                            <div class="config-right-item-context">
+                                2、创建产品，并选中接入方式为
+                                {{
+                                    props?.provider?.id === 'OneNet'
+                                        ? 'OneNet'
+                                        : 'CTWing,选中后需填写CTWing平台中的产品ID、Master-APIkey。'
+                                }}
+                            </div>
+                            <div class="config-right-item-context">
+                                3、添加设备，为每一台设备设置唯一的IMEI、IMSI码（需与OneNet平台中填写的值一致，若OneNet平台没有对应的设备，将会通过OneNet平台提供的LWM2M协议自动创建）
+                            </div>
+                        </div>
+                    </div>
+                </a-col>
+            </a-row>
+        </div>
+        <div :class="current !== 2 ? 'steps-action' : 'steps-action-save'">
+            <a-button
+                v-if="[0, 1].includes(current)"
+                type="primary"
+                @click="next"
+            >
+                下一步
+            </a-button>
+            <a-button v-if="current === 2" type="primary" @click="saveData">
+                保存
+            </a-button>
+            <a-button v-if="current > 0" style="margin-left: 8px" @click="prev">
+                上一步
+            </a-button>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup name="AccessCloudCtwing">
+import { message, Form } from 'ant-design-vue';
+import type { FormInstance } from 'ant-design-vue';
+import { update, save, getNetworkList } from '@/api/link/accessConfig';
+import { ProtocolMapping, NetworkTypeMapping } from '../../Detail/data';
+import { InfoCircleOutlined } from '@ant-design/icons-vue';
+import AccessCard from '../AccessCard/index.vue';
+import { randomString } from '@/utils/utils';
+import { getImage } from '@/utils/comm';
+
+const origin = window.location.origin;
+const img1 = getImage('/network/01.png');
+const img2 = getImage('/network/02.jpg');
+const img3 = getImage('/network/03.png');
+const img4 = getImage('/network/04.jpg');
+
+//测试数据1{
+const resultList1 = [
+    {
+        id: '1612354213444087808',
+        name: '大华烟感协议',
+    },
+    {
+        id: '1610475299002855424',
+        name: '宇视摄像头协议',
+    },
+    {
+        id: '1610466717670780928',
+        name: '官方协议',
+    },
+    {
+        id: '1610205217785524224',
+        name: 'demo协议',
+    },
+    {
+        id: '1610204985806958592',
+        name: '水压协议',
+    },
+    {
+        id: '1605459961693745152',
+        name: '测试设备诊断日志显示',
+    },
+    {
+        id: '1582302200020783104',
+        name: 'demo',
+    },
+    {
+        id: '1581839391887794176',
+        name: '海康闸机协议',
+    },
+    {
+        id: '1567062365030637568',
+        name: '协议20220906160914',
+    },
+    {
+        id: '1561650927208628224',
+        name: 'local',
+    },
+    {
+        id: '1552881998413754368',
+        name: '官方协议V3-支持固件升级3',
+    },
+    {
+        id: '2b283b28a16d61e5fc2bdf39ceff34f8',
+        name: 'JetLinks官方协议',
+        description: 'JetLinks官方协议包',
+    },
+    {
+        id: '1551510679466844160',
+        name: '官方协议3.1',
+    },
+    {
+        id: '1551509716811161600',
+        name: '官方协议3.0',
+    },
+];
+
+interface FormState {
+    apiAddress: string;
+    appKey: string;
+    appSecret: string;
+    description: string;
+}
+interface Form {
+    name: string;
+    description: string;
+}
+const route = useRoute();
+const id = route.query.id;
+
+const props = defineProps({
+    provider: {
+        type: Object,
+        default: () => {},
+    },
+    data: {
+        type: Object,
+        default: () => {},
+    },
+});
+
+const channel = ref(props.provider.channel);
+const formRef1 = ref<FormInstance>();
+const formRef2 = ref<FormInstance>();
+
+const formState = reactive<FormState>({
+    apiAddress: 'https://ag-api.ctwing.cn/',
+    appKey: '',
+    appSecret: '',
+    description: '',
+});
+const form = reactive<Form>({
+    name: '',
+    description: '',
+});
+
+const current = ref(0);
+const stepCurrent = ref(0);
+const steps = ref(['接入配置', '消息协议', '完成']);
+const procotolList = ref([]);
+const allProcotolList = ref([]);
+const procotolCurrent = ref('');
+
+const procotolChange = (id: string) => {
+    if (!props.data?.id) {
+        procotolCurrent.value = id;
+    }
+};
+
+const procotolSearch = (value: string) => {
+    if (value) {
+        const list = allProcotolList.value.filter((i) => {
+            return (
+                i.name &&
+                i.name.toLocaleLowerCase().includes(value.toLocaleLowerCase())
+            );
+        });
+        procotolList.value = list;
+    } else {
+        procotolList.value = allProcotolList.value;
+    }
+};
+
+const saveData = async () => {
+    const data: any = await formRef2.value?.validate();
+    const params = {
+        ...data,
+        configuration: {
+            ...formState,
+            protocol: procotolCurrent.value,
+        },
+        protocol: procotolCurrent.value,
+        provider: props.provider.id,
+        transport: 'HTTP_SERVER',
+    };
+    const resp =
+        props.data && props.data.id
+            ? await update({
+                  ...props.data,
+                  ...params,
+              })
+            : await save(params);
+
+    if (resp.status === 200) {
+        message.success('操作成功！');
+        // 回到列表页面
+        // if (window.onTabSaveSuccess) {
+        //     window.onTabSaveSuccess(resp);
+        //     setTimeout(() => window.close(), 300);
+        // } else {
+        //     // this.$store.dispatch('jumpPathByKey', { key: MenuKeys['Link/AccessConfig'] })
+        // }
+        history.back();
+    }
+    // onFinish(data);
+};
+
+const queryProcotolList = async (id: string, params = {}) => {
+    // const resp = await getProtocolList(ProtocolMapping.get(id), {
+    //     ...params,
+    //     'sorts[0].name': 'createTime',
+    //     'sorts[0].order': 'desc',
+    // });
+    // if (resp.status === 200) {
+    //     procotolList.value = resp.result;
+    //     allProcotolList.value = resp.result;
+    // }
+
+    //使用测试数据1
+    procotolList.value = resultList1;
+    allProcotolList.value = resultList1;
+};
+
+const addProcotol = () => {
+    // const url = this.$store.state.permission.routes['Link/Protocol']
+    const url = '/demo';
+    const tab = window.open(
+        `${window.location.origin + window.location.pathname}#${url}?save=true`,
+    );
+    tab.onTabSaveSuccess = (value) => {
+        if (value.success) {
+            procotolCurrent.value = value.result?.id;
+            queryProcotolList(props.provider?.id);
+        }
+    };
+};
+
+const next = async () => {
+    if (current.value === 0) {
+        let data1: any = await formRef1.value?.validate();
+        queryProcotolList(props.provider.id);
+        current.value = current.value + 1;
+    } else if (current.value === 1) {
+        if (!procotolCurrent.value) {
+            message.error('请选择消息协议！');
+        } else {
+            current.value = current.value + 1;
+        }
+    }
+};
+const prev = () => {
+    current.value = current.value - 1;
+};
+
+watch(
+    current,
+    (v) => {
+        stepCurrent.value = v;
+    },
+    {
+        deep: true,
+        immediate: true,
+    },
+);
+</script>
+
+<style lang="less" scoped>
+.container {
+    margin: 20px;
+}
+
+.steps-content {
+    margin: 20px;
+}
+.steps-box {
+    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;
+    }
+}
+
+.steps-action {
+    width: 100%;
+    margin-top: 24px;
+    margin-left: 20px;
+}
+.steps-action-save {
+    margin-left: 0;
+}
+.alert {
+    height: 40px;
+    padding-left: 10px;
+    color: rgba(0, 0, 0, 0.55);
+    line-height: 40px;
+    background-color: #f6f6f6;
+}
+.search {
+    display: flex;
+    margin: 15px 0;
+    justify-content: space-between;
+}
+
+.card-last {
+    padding-right: 5px;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+.config-right {
+    padding: 20px;
+    // color: rgba(0, 0, 0, 0.8);
+    // background: rgba(0, 0, 0, 0.04);
+
+    .config-right-item {
+        margin-bottom: 10px;
+
+        .config-right-item-title {
+            width: 100%;
+            margin-bottom: 10px;
+            font-weight: 600;
+        }
+
+        .config-right-item-context {
+            margin: 5px 0;
+            color: rgba(0, 0, 0, 0.8);
+        }
+    }
+}
+
+.doc {
+    height: 550px;
+    padding: 24px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    color: rgba(#000, 0.8);
+    font-size: 14px;
+    background-color: #fafafa;
+
+    h1 {
+        margin: 16px 0;
+        color: rgba(#000, 0.85);
+        font-weight: bold;
+        font-size: 14px;
+
+        &:first-child {
+            margin-top: 0;
+        }
+    }
+
+    .image {
+        margin: 16px 0;
+    }
+}
+</style>
diff --git a/src/views/link/AccessConfig/components/Cloud/OneNet.vue b/src/views/link/AccessConfig/components/Cloud/OneNet.vue
new file mode 100644
index 00000000..79f91f71
--- /dev/null
+++ b/src/views/link/AccessConfig/components/Cloud/OneNet.vue
@@ -0,0 +1,736 @@
+<template>
+    <div class="container">
+        <a-steps class="steps-steps" :current="stepCurrent">
+            <a-step v-for="item in steps" :key="item" :title="item" />
+        </a-steps>
+        <div class="steps-content">
+            <div class="steps-box" v-if="current === 0">
+                <div class="alert">
+                    <info-circle-outlined />
+                    通过OneNet平台的HTTP推送服务进行数据接入
+                </div>
+                <div style="margin-top: 15px">
+                    <a-row :gutter="[24, 24]">
+                        <a-col :span="16">
+                            <a-form
+                                :model="formState"
+                                ref="formRef1"
+                                name="basic"
+                                autocomplete="off"
+                                layout="vertical"
+                            >
+                                <a-row :gutter="[24, 24]">
+                                    <a-col :span="24">
+                                        <a-form-item
+                                            name="apiAddress"
+                                            :rules="[
+                                                {
+                                                    required: true,
+                                                },
+                                            ]"
+                                        >
+                                            <div class="form-label">
+                                                接口地址
+                                                <span
+                                                    class="form-label-required"
+                                                    >*</span
+                                                >
+                                                <a-tooltip>
+                                                    <template #title>
+                                                        <p>
+                                                            同步物联网平台设备数据到OneNet
+                                                        </p>
+                                                    </template>
+                                                    <question-circle-outlined />
+                                                </a-tooltip>
+                                            </div>
+                                            <a-input
+                                                disabled
+                                                v-model:value="
+                                                    formState.apiAddress
+                                                "
+                                            />
+                                        </a-form-item>
+                                    </a-col>
+                                </a-row>
+                                <a-row :gutter="[24, 24]">
+                                    <a-col :span="24">
+                                        <a-form-item
+                                            label="apiKey"
+                                            name="apiKey"
+                                            :rules="[
+                                                {
+                                                    required: true,
+                                                    message: '请输入apiKey',
+                                                },
+                                                {
+                                                    max: 64,
+                                                    message:
+                                                        '最多可输入64个字符',
+                                                },
+                                            ]"
+                                        >
+                                            <a-input
+                                                v-model:value="formState.apiKey"
+                                                placeholder="请输入apiKey"
+                                            />
+                                        </a-form-item>
+                                    </a-col>
+                                </a-row>
+                                <a-row :gutter="[24, 24]">
+                                    <a-col :span="12">
+                                        <a-form-item
+                                            name="validateToken"
+                                            :rules="[
+                                                {
+                                                    required: true,
+                                                    message: '请输入通知Token',
+                                                },
+                                                {
+                                                    max: 64,
+                                                    message:
+                                                        '最多可输入64个字符',
+                                                },
+                                            ]"
+                                        >
+                                            <div class="form-label">
+                                                通知Token
+                                                <span
+                                                    class="form-label-required"
+                                                    >*</span
+                                                >
+                                                <a-tooltip>
+                                                    <template #title>
+                                                        <p>
+                                                            接收OneNet推送的Token地址
+                                                        </p>
+                                                    </template>
+                                                    <question-circle-outlined />
+                                                </a-tooltip>
+                                            </div>
+                                            <a-input
+                                                v-model:value="
+                                                    formState.validateToken
+                                                "
+                                                placeholder="请输入通知Token"
+                                            />
+                                        </a-form-item>
+                                    </a-col>
+                                    <a-col :span="12">
+                                        <a-form-item
+                                            name="aesKey"
+                                            :rules="[
+                                                {
+                                                    max: 64,
+                                                    message:
+                                                        '最多可输入64个字符',
+                                                },
+                                            ]"
+                                        >
+                                            <div class="form-label">
+                                                aesKey
+                                                <a-tooltip>
+                                                    <template #title>
+                                                        <p>
+                                                            OneNet
+                                                            端生成的消息加密key
+                                                        </p>
+                                                    </template>
+                                                    <question-circle-outlined />
+                                                </a-tooltip>
+                                            </div>
+                                            <a-input
+                                                v-model:value="formState.aesKey"
+                                                placeholder="请输入aesKey"
+                                            /> </a-form-item
+                                    ></a-col>
+                                </a-row>
+                                <a-row :gutter="[24, 24]">
+                                    <a-col :span="24">
+                                        <a-form-item
+                                            label="说明"
+                                            name="description"
+                                        >
+                                            <a-textarea
+                                                placeholder="请输入说明"
+                                                :rows="4"
+                                                v-model:value="
+                                                    formState.description
+                                                "
+                                                show-count
+                                                :maxlength="200"
+                                            />
+                                        </a-form-item>
+                                    </a-col>
+                                </a-row> </a-form
+                        ></a-col>
+                        <a-col :span="8">
+                            <div class="doc">
+                                <h1>操作指引：</h1>
+                                <div>
+                                    1、OneNet端创建产品、设备，并配置HTTP推送
+                                </div>
+                                <div>
+                                    2、IOT端创建类型为OneNet的设备接入网关
+                                </div>
+                                <div>
+                                    3、IOT端创建产品，选中接入方式为OneNet类型的设备接入网关，填写Master-APIkey（OneNet端的产品Key）
+                                </div>
+                                <div class="image">
+                                    <a-image width="100%" :src="img5" />
+                                </div>
+                                <div>
+                                    4、IOT端添加设备，在设备实例页面为每一台设备设置唯一的IMEI、IMSI码（需与OneNet平台中的值一致）
+                                </div>
+                                <div class="image">
+                                    <a-image width="100%" :src="img6" />
+                                </div>
+                                <h1>HTTP推送配置说明</h1>
+                                <div class="image">
+                                    <a-image width="100%" :src="img" />
+                                </div>
+                                <div>
+                                    HTTP推送配置路径：应用开发&gt;数据推送
+                                </div>
+                                <a-descriptions
+                                    bordered
+                                    size="small"
+                                    :column="1"
+                                    :labelStyle="{ width: '100px' }"
+                                >
+                                    <a-descriptions-item label="参数"
+                                        >说明</a-descriptions-item
+                                    >
+                                    <a-descriptions-item label="实例名称"
+                                        >推送实例的名称</a-descriptions-item
+                                    >
+                                    <a-descriptions-item label="推送地址">
+                                        用于接收OneNet推送设备数据的地址物联网平台地址:
+                                        <div style="word-wrap: break-word">
+                                            {{
+                                                `${origin}/api/one-net/${randomString()}/notify`
+                                            }}
+                                        </div>
+                                    </a-descriptions-item>
+                                    <a-descriptions-item label="Token">
+                                        自定义token,可用于验证请求是否来自OneNet
+                                    </a-descriptions-item>
+                                    <a-descriptions-item label="消息加密">
+                                        采用AES加密算法对推送的数据进行数据加密，AesKey为加密秘钥
+                                    </a-descriptions-item>
+                                </a-descriptions>
+
+                                <h1>设备接入网关配置说明</h1>
+                                <a-descriptions
+                                    bordered
+                                    size="small"
+                                    :column="1"
+                                    :labelStyle="{ width: '100px' }"
+                                >
+                                    <a-descriptions-item label="参数"
+                                        >说明</a-descriptions-item
+                                    >
+                                    <a-descriptions-item label="apiKey"
+                                        >OneNet平台中具体产品的Key</a-descriptions-item
+                                    >
+                                    <a-descriptions-item label="通知Token">
+                                        填写OneNet数据推送配置中设置的Token
+                                    </a-descriptions-item>
+                                    <a-descriptions-item label="aesKey">
+                                        若OneNet数据推送配置了消息加密，此处填写OneNet端数据推送配置中设置的aesKey
+                                    </a-descriptions-item>
+                                </a-descriptions>
+                                <h1>其他说明</h1>
+                                <div>
+                                    1.在IOT端启用设备时，若OneNet平台没有与之对应的设备，则将在OneNet端自动创建新设备
+                                </div>
+                            </div>
+                        </a-col>
+                    </a-row>
+                </div>
+            </div>
+        </div>
+        <div class="steps-content">
+            <div class="steps-box" v-if="current === 1">
+                <div class="alert">
+                    <info-circle-outlined />
+                    只能选择HTTP通信方式的协议
+                </div>
+                <div class="search">
+                    <a-input-search
+                        allowClear
+                        placeholder="请输入"
+                        style="width: 300px"
+                        @search="procotolSearch"
+                    />
+                    <a-button type="primary" @click="addProcotol"
+                        >新增</a-button
+                    >
+                </div>
+                <div class="card-item">
+                    <a-row :gutter="[24, 24]" v-if="procotolList.length > 0">
+                        <a-col
+                            :span="8"
+                            v-for="item in procotolList"
+                            :key="item.id"
+                        >
+                            <access-card
+                                @checkedChange="procotolChange"
+                                :checked="procotolCurrent"
+                                :data="item"
+                            >
+                            </access-card>
+                        </a-col>
+                    </a-row>
+                    <a-empty v-else description="暂无数据" />
+                </div>
+            </div>
+        </div>
+        <div v-if="current === 2" class="card-last">
+            <a-row :gutter="[24, 24]">
+                <a-col :span="12">
+                    <title-component data="基本信息" />
+                    <div>
+                        <a-form
+                            :model="form"
+                            name="basic"
+                            autocomplete="off"
+                            layout="vertical"
+                            ref="formRef2"
+                        >
+                            <a-form-item
+                                label="名称"
+                                name="name"
+                                :rules="[
+                                    {
+                                        required: true,
+                                        message: '请输入名称',
+                                        trigger: 'blur',
+                                    },
+                                    { max: 64, message: '最多可输入64个字符' },
+                                ]"
+                            >
+                                <a-input
+                                    placeholder="请输入名称"
+                                    v-model:value="form.name"
+                                />
+                            </a-form-item>
+                            <a-form-item label="说明" name="description">
+                                <a-textarea
+                                    placeholder="请输入说明"
+                                    :rows="4"
+                                    v-model:value="form.description"
+                                    show-count
+                                    :maxlength="200"
+                                />
+                            </a-form-item>
+                            <!-- <a-form-item>
+                                <a-button
+                                    v-if="current !== 1"
+                                    type="primary"
+                                    html-type="submit"
+                                    >保存</a-button
+                                >
+                            </a-form-item> -->
+                        </a-form>
+                    </div>
+                </a-col>
+                <a-col :span="12">
+                    <div class="config-right">
+                        <div class="config-right-item">
+                            <title-component data="配置概览" />
+                            <div class="config-right-item-context">
+                                接入方式：{{ provider.name }}
+                            </div>
+                            <div class="config-right-item-context">
+                                {{ provider.description }}
+                            </div>
+                            <div class="config-right-item-context">
+                                消息协议：{{ procotolCurrent }}
+                            </div>
+                        </div>
+                        <div class="config-right-item">
+                            <title-component data="设备接入指引" />
+                            <div class="config-right-item-context">
+                                1、创建类型为{{
+                                    props?.provider?.id === 'OneNet'
+                                        ? 'OneNet'
+                                        : 'CTWing'
+                                }}的设备接入网关
+                            </div>
+                            <div class="config-right-item-context">
+                                2、创建产品，并选中接入方式为
+                                {{
+                                    props?.provider?.id === 'OneNet'
+                                        ? 'OneNet'
+                                        : 'CTWing,选中后需填写CTWing平台中的产品ID、Master-APIkey。'
+                                }}
+                            </div>
+                            <div class="config-right-item-context">
+                                3、添加设备，为每一台设备设置唯一的IMEI、SN、IMSI、PSK码（需与CTWingt平台中填写的值一致，若CTWing平台没有对应的设备，将会通过CTWing平台提供的LWM2M协议自动创建）
+                            </div>
+                        </div>
+                    </div>
+                </a-col>
+            </a-row>
+        </div>
+        <div :class="current !== 2 ? 'steps-action' : 'steps-action-save'">
+            <a-button
+                v-if="[0, 1].includes(current)"
+                type="primary"
+                @click="next"
+            >
+                下一步
+            </a-button>
+            <a-button v-if="current === 2" type="primary" @click="saveData">
+                保存
+            </a-button>
+            <a-button v-if="current > 0" style="margin-left: 8px" @click="prev">
+                上一步
+            </a-button>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup name="AccessCloudOneNet">
+import { message, Form } from 'ant-design-vue';
+import type { FormInstance } from 'ant-design-vue';
+import { update, save, getNetworkList } from '@/api/link/accessConfig';
+import { ProtocolMapping, NetworkTypeMapping } from '../../Detail/data';
+import {
+    InfoCircleOutlined,
+    QuestionCircleOutlined,
+} from '@ant-design/icons-vue';
+import AccessCard from '../AccessCard/index.vue';
+import { randomString } from '@/utils/utils';
+import { getImage } from '@/utils/comm';
+
+const origin = window.location.origin;
+const img5 = getImage('/network/05.jpg');
+const img6 = getImage('/network/06.jpg');
+const img = getImage('/network/OneNet.jpg');
+
+//测试数据1{
+const resultList1 = [
+    {
+        id: '1612354213444087808',
+        name: '大华烟感协议',
+    },
+    {
+        id: '1610475299002855424',
+        name: '宇视摄像头协议',
+    },
+    {
+        id: '1610466717670780928',
+        name: '官方协议',
+    },
+    {
+        id: '1610205217785524224',
+        name: 'demo协议',
+    },
+    {
+        id: '1610204985806958592',
+        name: '水压协议',
+    },
+    {
+        id: '1605459961693745152',
+        name: '测试设备诊断日志显示',
+    },
+    {
+        id: '1582302200020783104',
+        name: 'demo',
+    },
+    {
+        id: '1581839391887794176',
+        name: '海康闸机协议',
+    },
+    {
+        id: '1567062365030637568',
+        name: '协议20220906160914',
+    },
+    {
+        id: '1561650927208628224',
+        name: 'local',
+    },
+    {
+        id: '1552881998413754368',
+        name: '官方协议V3-支持固件升级3',
+    },
+    {
+        id: '2b283b28a16d61e5fc2bdf39ceff34f8',
+        name: 'JetLinks官方协议',
+        description: 'JetLinks官方协议包',
+    },
+    {
+        id: '1551510679466844160',
+        name: '官方协议3.1',
+    },
+    {
+        id: '1551509716811161600',
+        name: '官方协议3.0',
+    },
+];
+
+interface FormState {
+    apiAddress: string;
+    apiKey: string;
+    validateToken: string;
+    aesKey: string;
+    description: string;
+}
+interface Form {
+    name: string;
+    description: string;
+}
+const route = useRoute();
+const id = route.query.id;
+
+const props = defineProps({
+    provider: {
+        type: Object,
+        default: () => {},
+    },
+    data: {
+        type: Object,
+        default: () => {},
+    },
+});
+
+const channel = ref(props.provider.channel);
+const formRef1 = ref<FormInstance>();
+const formRef2 = ref<FormInstance>();
+
+const formState = reactive<FormState>({
+    apiAddress: 'https://api.heclouds.com/',
+    apiKey: '',
+    validateToken: '',
+    aesKey: '',
+    description: '',
+});
+const form = reactive<Form>({
+    name: '',
+    description: '',
+});
+
+const current = ref(0);
+const stepCurrent = ref(0);
+const steps = ref(['接入配置', '消息协议', '完成']);
+const procotolList = ref([]);
+const allProcotolList = ref([]);
+const procotolCurrent = ref('');
+
+const procotolChange = (id: string) => {
+    if (!props.data?.id) {
+        procotolCurrent.value = id;
+    }
+};
+
+const procotolSearch = (value: string) => {
+    if (value) {
+        const list = allProcotolList.value.filter((i) => {
+            return (
+                i.name &&
+                i.name.toLocaleLowerCase().includes(value.toLocaleLowerCase())
+            );
+        });
+        procotolList.value = list;
+    } else {
+        procotolList.value = allProcotolList.value;
+    }
+};
+
+const saveData = async () => {
+    const data: any = await formRef2.value?.validate();
+    const params = {
+        ...data,
+        configuration: {
+            ...formState,
+            protocol: procotolCurrent.value,
+        },
+        protocol: procotolCurrent.value,
+        provider: props.provider.id,
+        transport: 'HTTP_SERVER',
+    };
+    const resp =
+        props.data && props.data.id
+            ? await update({
+                  ...props.data,
+                  ...params,
+              })
+            : await save(params);
+
+    if (resp.status === 200) {
+        message.success('操作成功！');
+        // 回到列表页面
+        // if (window.onTabSaveSuccess) {
+        //     window.onTabSaveSuccess(resp);
+        //     setTimeout(() => window.close(), 300);
+        // } else {
+        //     // this.$store.dispatch('jumpPathByKey', { key: MenuKeys['Link/AccessConfig'] })
+        // }
+        history.back();
+    }
+};
+
+const queryProcotolList = async (id: string, params = {}) => {
+    // const resp = await getProtocolList(ProtocolMapping.get(id), {
+    //     ...params,
+    //     'sorts[0].name': 'createTime',
+    //     'sorts[0].order': 'desc',
+    // });
+    // if (resp.status === 200) {
+    //     procotolList.value = resp.result;
+    //     allProcotolList.value = resp.result;
+    // }
+
+    //使用测试数据1
+    procotolList.value = resultList1;
+    allProcotolList.value = resultList1;
+};
+
+const addProcotol = () => {
+    // const url = this.$store.state.permission.routes['Link/Protocol']
+    const url = '/demo';
+    const tab = window.open(
+        `${window.location.origin + window.location.pathname}#${url}?save=true`,
+    );
+    tab.onTabSaveSuccess = (value) => {
+        if (value.success) {
+            procotolCurrent.value = value.result?.id;
+            queryProcotolList(props.provider?.id);
+        }
+    };
+};
+
+const next = async () => {
+    if (current.value === 0) {
+        let data1: any = await formRef1.value?.validate();
+        queryProcotolList(props.provider.id);
+        current.value = current.value + 1;
+    } else if (current.value === 1) {
+        if (!procotolCurrent.value) {
+            message.error('请选择消息协议！');
+        } else {
+            current.value = current.value + 1;
+        }
+    }
+};
+const prev = () => {
+    current.value = current.value - 1;
+};
+
+watch(
+    current,
+    (v) => {
+        stepCurrent.value = v;
+    },
+    {
+        deep: true,
+        immediate: true,
+    },
+);
+</script>
+
+<style lang="less" scoped>
+.container {
+    margin: 20px;
+}
+
+.steps-content {
+    margin: 20px;
+}
+.steps-box {
+    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;
+    }
+}
+
+.steps-action {
+    width: 100%;
+    margin-top: 24px;
+    margin-left: 20px;
+}
+.steps-action-save {
+    margin-left: 0;
+}
+.alert {
+    height: 40px;
+    padding-left: 10px;
+    color: rgba(0, 0, 0, 0.55);
+    line-height: 40px;
+    background-color: #f6f6f6;
+}
+.search {
+    display: flex;
+    margin: 15px 0;
+    justify-content: space-between;
+}
+
+.card-last {
+    padding-right: 5px;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+.config-right {
+    padding: 20px;
+    // color: rgba(0, 0, 0, 0.8);
+    // background: rgba(0, 0, 0, 0.04);
+
+    .config-right-item {
+        margin-bottom: 10px;
+
+        .config-right-item-title {
+            width: 100%;
+            margin-bottom: 10px;
+            font-weight: 600;
+        }
+
+        .config-right-item-context {
+            margin: 5px 0;
+            color: rgba(0, 0, 0, 0.8);
+        }
+    }
+}
+
+.doc {
+    height: 550px;
+    padding: 24px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    color: rgba(#000, 0.8);
+    font-size: 14px;
+    background-color: #fafafa;
+
+    h1 {
+        margin: 16px 0;
+        color: rgba(#000, 0.85);
+        font-weight: bold;
+        font-size: 14px;
+
+        &:first-child {
+            margin-top: 0;
+        }
+    }
+
+    .image {
+        margin: 16px 0;
+    }
+}
+.form-label {
+    height: 30px;
+    padding-bottom: 8px;
+    .form-label-required {
+        color: red;
+        margin: 0 4px 0 -2px;
+    }
+}
+</style>
diff --git a/src/views/link/AccessConfig/components/Cloud/index.vue b/src/views/link/AccessConfig/components/Cloud/index.vue
new file mode 100644
index 00000000..dfa6dc39
--- /dev/null
+++ b/src/views/link/AccessConfig/components/Cloud/index.vue
@@ -0,0 +1,37 @@
+<template>
+    <div>
+        <Ctwing
+            v-if="channel === 'Ctwing'"
+            :provider="props.provider"
+            :data="props.data"
+        />
+        <OneNet
+            v-if="channel === 'OneNet'"
+            :provider="props.provider"
+            :data="props.data"
+        />
+    </div>
+</template>
+
+<script lang="ts" setup name="AccessCloud">
+import Ctwing from './Ctwing.vue';
+import OneNet from './OneNet.vue';
+
+const route = useRoute();
+const id = route.query.id;
+
+const props = defineProps({
+    provider: {
+        type: Object,
+        default: () => {},
+    },
+    data: {
+        type: Object,
+        default: () => {},
+    },
+});
+
+const channel = props.provider.channel;
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/link/AccessConfig/components/Media/GB28181.vue b/src/views/link/AccessConfig/components/Media/GB28181.vue
index 239486ec..77540348 100644
--- a/src/views/link/AccessConfig/components/Media/GB28181.vue
+++ b/src/views/link/AccessConfig/components/Media/GB28181.vue
@@ -6,7 +6,7 @@
         <div class="steps-content">
             <div class="steps-box" v-if="current === 0">
                 <div class="alert">
-                    <question-circle-outlined />
+                    <info-circle-outlined />
                     配置设备信令参数
                 </div>
                 <div>
@@ -511,7 +511,12 @@
 import { message, Form } from 'ant-design-vue';
 import type { FormInstance } from 'ant-design-vue';
 import { getResourcesCurrent, getClusters } from '@/api/link/accessConfig';
-import { DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue';
+import {
+    DeleteOutlined,
+    PlusOutlined,
+    QuestionCircleOutlined,
+    InfoCircleOutlined,
+} from '@ant-design/icons-vue';
 import { update, save } from '@/api/link/accessConfig';
 
 interface Form2 {
diff --git a/src/views/link/AccessConfig/components/Network.vue b/src/views/link/AccessConfig/components/Network.vue
index edd2c5c1..04bebf34 100644
--- a/src/views/link/AccessConfig/components/Network.vue
+++ b/src/views/link/AccessConfig/components/Network.vue
@@ -6,7 +6,7 @@
         <div class="steps-content">
             <div class="steps-box" v-if="current === 0">
                 <div class="alert">
-                    <question-circle-outlined />
+                    <info-circle-outlined />
                     选择与设备通信的网络组件
                 </div>
                 <div class="search">
@@ -93,7 +93,7 @@
             </div>
             <div class="steps-box" v-else-if="current === 1">
                 <div class="alert">
-                    <question-circle-outlined />
+                    <info-circle-outlined />
                     使用选择的消息协议，对网络组件通信数据进行编解码、认证等操作
                 </div>
                 <div class="search">
@@ -326,7 +326,7 @@ import AccessCard from './AccessCard/index.vue';
 import { message, Form } from 'ant-design-vue';
 import type { FormInstance, TableColumnType } from 'ant-design-vue';
 import Markdown from 'vue3-markdown-it';
-import { QuestionCircleOutlined } from '@ant-design/icons-vue';
+import { InfoCircleOutlined } from '@ant-design/icons-vue';
 //测试数据1
 const resultList1 = [
     {