diff --git a/src/api/link/accessConfig.ts b/src/api/link/accessConfig.ts
index 0aaa1986..869dab76 100644
--- a/src/api/link/accessConfig.ts
+++ b/src/api/link/accessConfig.ts
@@ -36,7 +36,7 @@ export const undeploy = (id: string) =>
 export const deploy = (id: string) =>
     server.post(`/gateway/device/${id}/_startup`);
 
-export const del = (id: string) => server.remove(`/gateway/device/${id}`);
+export const remove = (id: string) => server.remove(`/gateway/device/${id}`);
 
 export const getResourcesCurrent = () =>
     server.get(`/network/resources/alive/_current`);
diff --git a/src/components/Table/index.module.less b/src/components/Table/index.module.less
index a0e94e07..98a53a92 100644
--- a/src/components/Table/index.module.less
+++ b/src/components/Table/index.module.less
@@ -10,17 +10,23 @@
         .jtable-body-header-right {
             display: flex;
             gap: 8px;
-            .jtable-setting-item {
-                color: rgba(0, 0, 0, 0.75);
-                font-size: 16px;
-                cursor: pointer;
+            align-items: center;
+            .jtable-body-header-right-button {
+                display: flex;
+                margin-left: 10px;
+                gap: 8px;
+                .jtable-setting-item {
+                    color: rgba(0, 0, 0, 0.75);
+                    font-size: 16px;
+                    cursor: pointer;
 
-                &:hover {
-                    color: @primary-color-hover;
-                }
+                    &:hover {
+                        color: @primary-color-hover;
+                    }
 
-                &.active {
-                    color: @primary-color-active;
+                    &.active {
+                        color: @primary-color-active;
+                    }
                 }
             }
         }
diff --git a/src/components/Table/index.tsx b/src/components/Table/index.tsx
index fb778495..774b95b8 100644
--- a/src/components/Table/index.tsx
+++ b/src/components/Table/index.tsx
@@ -73,6 +73,7 @@ const JTable = defineComponent<JTableProps>({
     slots: [
         'headerTitle', // 顶部左边插槽
         'card', // 卡片内容
+        'rightExtraRender'
     ],
     emits: [
         'modelChange', // 切换卡片和表格
@@ -254,16 +255,22 @@ const JTable = defineComponent<JTableProps>({
                         {slots.headerTitle && slots.headerTitle()}
                     </div>
                     <div class={styles["jtable-body-header-right"]}>
-                        <div class={[styles["jtable-setting-item"], ModelEnum.CARD === _model.value ? styles['active'] : '']} onClick={() => {
-                            _model.value = ModelEnum.CARD
-                        }}>
-                            <AppstoreOutlined />
-                        </div>
-                        <div class={[styles["jtable-setting-item"], ModelEnum.TABLE === _model.value ? styles['active'] : '']} onClick={() => {
-                            _model.value = ModelEnum.TABLE
-                        }}>
-                            <UnorderedListOutlined  />
-                        </div>
+                        {/* 顶部右边插槽 */}
+                        {slots.rightExtraRender && slots.rightExtraRender()}
+                        {
+                            !props.model && <div class={styles["jtable-body-header-right-button"]}>
+                                <div class={[styles["jtable-setting-item"], ModelEnum.CARD === _model.value ? styles['active'] : '']} onClick={() => {
+                                    _model.value = ModelEnum.CARD
+                                }}>
+                                    <AppstoreOutlined />
+                                </div>
+                                <div class={[styles["jtable-setting-item"], ModelEnum.TABLE === _model.value ? styles['active'] : '']} onClick={() => {
+                                    _model.value = ModelEnum.TABLE
+                                }}>
+                                    <UnorderedListOutlined  />
+                                </div>
+                            </div>
+                        }
                     </div>
                 </div>
                 {/* content */}
diff --git a/src/views/device/Instance/index.vue b/src/views/device/Instance/index.vue
index 11656160..4792f526 100644
--- a/src/views/device/Instance/index.vue
+++ b/src/views/device/Instance/index.vue
@@ -1,222 +1,234 @@
 <template>
-    <Search :columns="columns" target="device-instance" />
-    <JTable
-        ref="instanceRef"
-        :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">新增</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="activeAllDevice"
-                                    title="确认激活全部设备？"
-                                >
-                                    <a-button type="primary" ghost
+    <page-container>
+        <Search :columns="columns" target="device-instance" />
+        <JTable
+            ref="instanceRef"
+            :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">新增</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="CheckCircleOutlined"
-                                        />激活全部设备</a-button
+                                            type="ExportOutlined"
+                                        />批量导出设备</a-button
                                     >
-                                </a-popconfirm>
-                            </a-menu-item>
-                            <a-menu-item>
-                                <a-button
-                                    @click="syncDeviceStatus"
-                                    type="primary"
-                                    ><AIcon
-                                        type="SyncOutlined"
-                                    />同步设备状态</a-button
-                                >
-                            </a-menu-item>
-                            <a-menu-item v-if="_selectedRowKeys.length">
-                                <a-popconfirm
-                                    @confirm="delSelectedDevice"
-                                    title="已启用的设备无法删除，确认删除选中的禁用状态设备？"
-                                >
-                                    <a-button type="primary" danger
+                                </a-menu-item>
+                                <a-menu-item>
+                                    <a-button @click="importVisible = true"
                                         ><AIcon
-                                            type="DeleteOutlined"
-                                        />删除选中设备</a-button
+                                            type="ImportOutlined"
+                                        />批量导入设备</a-button
                                     >
-                                </a-popconfirm>
-                            </a-menu-item>
-                            <a-menu-item
-                                v-if="_selectedRowKeys.length"
-                                title="确认激活选中设备?"
-                            >
-                                <a-popconfirm @confirm="activeSelectedDevice">
-                                    <a-button type="primary"
+                                </a-menu-item>
+                                <a-menu-item>
+                                    <a-popconfirm
+                                        @confirm="activeAllDevice"
+                                        title="确认激活全部设备？"
+                                    >
+                                        <a-button type="primary" ghost
+                                            ><AIcon
+                                                type="CheckCircleOutlined"
+                                            />激活全部设备</a-button
+                                        >
+                                    </a-popconfirm>
+                                </a-menu-item>
+                                <a-menu-item>
+                                    <a-button
+                                        @click="syncDeviceStatus"
+                                        type="primary"
                                         ><AIcon
-                                            type="CheckOutlined"
-                                        />激活选中设备</a-button
+                                            type="SyncOutlined"
+                                        />同步设备状态</a-button
                                     >
-                                </a-popconfirm>
-                            </a-menu-item>
-                            <a-menu-item v-if="_selectedRowKeys.length">
-                                <a-popconfirm
-                                    @confirm="disabledSelectedDevice"
-                                    title="确认禁用选中设备?"
+                                </a-menu-item>
+                                <a-menu-item v-if="_selectedRowKeys.length">
+                                    <a-popconfirm
+                                        @confirm="delSelectedDevice"
+                                        title="已启用的设备无法删除，确认删除选中的禁用状态设备？"
+                                    >
+                                        <a-button type="primary" danger
+                                            ><AIcon
+                                                type="DeleteOutlined"
+                                            />删除选中设备</a-button
+                                        >
+                                    </a-popconfirm>
+                                </a-menu-item>
+                                <a-menu-item
+                                    v-if="_selectedRowKeys.length"
+                                    title="确认激活选中设备?"
                                 >
-                                    <a-button type="primary" danger
-                                        ><AIcon
-                                            type="StopOutlined"
-                                        />禁用选中设备</a-button
+                                    <a-popconfirm
+                                        @confirm="activeSelectedDevice"
                                     >
-                                </a-popconfirm>
-                            </a-menu-item>
-                        </a-menu>
+                                        <a-button type="primary"
+                                            ><AIcon
+                                                type="CheckOutlined"
+                                            />激活选中设备</a-button
+                                        >
+                                    </a-popconfirm>
+                                </a-menu-item>
+                                <a-menu-item v-if="_selectedRowKeys.length">
+                                    <a-popconfirm
+                                        @confirm="disabledSelectedDevice"
+                                        title="确认禁用选中设备?"
+                                    >
+                                        <a-button type="primary" danger
+                                            ><AIcon
+                                                type="StopOutlined"
+                                            />禁用选中设备</a-button
+                                        >
+                                    </a-popconfirm>
+                                </a-menu-item>
+                            </a-menu>
+                        </template>
+                    </a-dropdown>
+                </a-space>
+            </template>
+            <template #card="slotProps">
+                <CardBox
+                    :value="slotProps"
+                    @click="handleClick"
+                    :actions="getActions(slotProps, 'card')"
+                    v-bind="slotProps"
+                    :active="_selectedRowKeys.includes(slotProps.id)"
+                    :status="slotProps.state?.value"
+                    :statusText="slotProps.state?.text"
+                    :statusNames="{
+                        online: 'success',
+                        offline: 'error',
+                        notActive: 'warning',
+                    }"
+                >
+                    <template #img>
+                        <slot name="img">
+                            <img
+                                :src="
+                                    getImage('/device/instance/device-card.png')
+                                "
+                            />
+                        </slot>
                     </template>
-                </a-dropdown>
-            </a-space>
-        </template>
-        <template #card="slotProps">
-            <CardBox
-                :value="slotProps"
-                @click="handleClick"
-                :actions="getActions(slotProps, 'card')"
-                v-bind="slotProps"
-                :active="_selectedRowKeys.includes(slotProps.id)"
-                :status="slotProps.state?.value"
-                :statusText="slotProps.state?.text"
-                :statusNames="{
-                    online: 'success',
-                    offline: 'error',
-                    notActive: 'warning',
-                }"
-            >
-                <template #img>
-                    <slot name="img">
-                        <img
-                            :src="getImage('/device/instance/device-card.png')"
-                        />
-                    </slot>
-                </template>
-                <template #content>
-                    <h3
-                        class="card-item-content-title"
-                        @click.stop="handleView(slotProps.id)"
-                    >
-                        {{ slotProps.name }}
-                    </h3>
-                    <a-row>
-                        <a-col :span="12">
-                            <div class="card-item-content-text">设备类型</div>
-                            <div>{{ slotProps.deviceType?.text }}</div>
-                        </a-col>
-                        <a-col :span="12">
-                            <div class="card-item-content-text">产品名称</div>
-                            <div>{{ slotProps.productName }}</div>
-                        </a-col>
-                    </a-row>
-                </template>
-                <template #actions="item">
+                    <template #content>
+                        <h3
+                            class="card-item-content-title"
+                            @click.stop="handleView(slotProps.id)"
+                        >
+                            {{ slotProps.name }}
+                        </h3>
+                        <a-row>
+                            <a-col :span="12">
+                                <div class="card-item-content-text">
+                                    设备类型
+                                </div>
+                                <div>{{ slotProps.deviceType?.text }}</div>
+                            </a-col>
+                            <a-col :span="12">
+                                <div class="card-item-content-text">
+                                    产品名称
+                                </div>
+                                <div>{{ slotProps.productName }}</div>
+                            </a-col>
+                        </a-row>
+                    </template>
+                    <template #actions="item">
+                        <a-tooltip
+                            v-bind="item.tooltip"
+                            :title="item.disabled && item.tooltip.title"
+                        >
+                            <a-popconfirm
+                                v-if="item.popConfirm"
+                                v-bind="item.popConfirm"
+                                :disabled="item.disabled"
+                            >
+                                <a-button :disabled="item.disabled">
+                                    <AIcon
+                                        type="DeleteOutlined"
+                                        v-if="item.key === 'delete'"
+                                    />
+                                    <template v-else>
+                                        <AIcon :type="item.icon" />
+                                        <span>{{ item?.text }}</span>
+                                    </template>
+                                </a-button>
+                            </a-popconfirm>
+                            <template v-else>
+                                <a-button
+                                    :disabled="item.disabled"
+                                    @click="item.onClick"
+                                >
+                                    <AIcon
+                                        type="DeleteOutlined"
+                                        v-if="item.key === 'delete'"
+                                    />
+                                    <template v-else>
+                                        <AIcon :type="item.icon" />
+                                        <span>{{ item?.text }}</span>
+                                    </template>
+                                </a-button>
+                            </template>
+                        </a-tooltip>
+                    </template>
+                </CardBox>
+            </template>
+            <template #state="slotProps">
+                <a-badge
+                    :text="slotProps.state?.text"
+                    :status="statusMap.get(slotProps.state?.value)"
+                />
+            </template>
+            <template #action="slotProps">
+                <a-space :size="16">
                     <a-tooltip
-                        v-bind="item.tooltip"
-                        :title="item.disabled && item.tooltip.title"
+                        v-for="i in getActions(slotProps, 'table')"
+                        :key="i.key"
+                        v-bind="i.tooltip"
                     >
                         <a-popconfirm
-                            v-if="item.popConfirm"
-                            v-bind="item.popConfirm"
-                            :disabled="item.disabled"
+                            v-if="i.popConfirm"
+                            v-bind="i.popConfirm"
+                            :disabled="i.disabled"
                         >
-                            <a-button :disabled="item.disabled">
-                                <AIcon
-                                    type="DeleteOutlined"
-                                    v-if="item.key === 'delete'"
-                                />
-                                <template v-else>
-                                    <AIcon :type="item.icon" />
-                                    <span>{{ item?.text }}</span>
-                                </template>
-                            </a-button>
-                        </a-popconfirm>
-                        <template v-else>
                             <a-button
-                                :disabled="item.disabled"
-                                @click="item.onClick"
-                            >
-                                <AIcon
-                                    type="DeleteOutlined"
-                                    v-if="item.key === 'delete'"
-                                />
-                                <template v-else>
-                                    <AIcon :type="item.icon" />
-                                    <span>{{ item?.text }}</span>
-                                </template>
-                            </a-button>
-                        </template>
+                                :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>
-                </template>
-            </CardBox>
-        </template>
-        <template #state="slotProps">
-            <a-badge
-                :text="slotProps.state?.text"
-                :status="statusMap.get(slotProps.state?.value)"
-            />
-        </template>
-        <template #action="slotProps">
-            <a-space :size="16">
-                <a-tooltip
-                    v-for="i in getActions(slotProps, 'table')"
-                    :key="i.key"
-                    v-bind="i.tooltip"
-                >
-                    <a-popconfirm
-                        v-if="i.popConfirm"
-                        v-bind="i.popConfirm"
-                        :disabled="i.disabled"
-                    >
-                        <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>
+                </a-space>
+            </template>
+        </JTable>
+    </page-container>
     <Import v-if="importVisible" @close="importVisible = false" />
     <Export
         v-if="exportVisible"
@@ -229,7 +241,12 @@
         :api="api"
         :type="type"
     />
-    <Save v-if="visible" :data="current" @close="visible = false" @save="saveBtn" />
+    <Save
+        v-if="visible"
+        :data="current"
+        @close="visible = false"
+        @save="saveBtn"
+    />
 </template>
 
 <script setup lang="ts">
@@ -368,8 +385,8 @@ const handleAdd = () => {
  * 查看
  */
 const handleView = (id: string) => {
-    router.push('/device/instance/detail/' + id)
-}
+    router.push('/device/instance/detail/' + id);
+};
 
 const getActions = (
     data: Partial<Record<string, any>>,
@@ -520,10 +537,10 @@ const disabledSelectedDevice = async () => {
         _selectedRowKeys.value = [];
         instanceRef.value?.reload();
     }
-}
+};
 
 const saveBtn = () => {
-    visible.value = false
-    instanceRef.value?.reload()
-}
+    visible.value = false;
+    instanceRef.value?.reload();
+};
 </script>
diff --git a/src/views/link/AccessConfig/Detail/index.vue b/src/views/link/AccessConfig/Detail/index.vue
index f84b13fb..3211fd75 100644
--- a/src/views/link/AccessConfig/Detail/index.vue
+++ b/src/views/link/AccessConfig/Detail/index.vue
@@ -1,7 +1,7 @@
 <template>
     <a-spin :spinning="loading">
         <a-card :bordered="false">
-            <div v-if="type">
+            <div v-if="type && modeType === 'add'">
                 <Provider
                     @onClick="goProviders"
                     :dataSource="dataSource"
@@ -14,9 +14,21 @@
                     :provider="provider"
                     :data="data"
                 />
-                <Media v-if="showType === 'media'" :provider="provider" />
-                <Channel v-if="showType === 'channel'" :provider="provider" />
-                <Edge v-if="showType === 'edge'" :provider="provider" />
+                <Media
+                    v-if="showType === 'media'"
+                    :provider="provider"
+                    :data="data"
+                />
+                <Channel
+                    v-if="showType === 'channel'"
+                    :provider="provider"
+                    :data="data"
+                />
+                <Edge
+                    v-if="showType === 'edge'"
+                    :provider="provider"
+                    :data="data"
+                />
                 <Cloud
                     v-if="showType === 'cloud'"
                     :provider="provider"
@@ -37,10 +49,10 @@ 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();
 
-const id = route.query.id;
+const modeType = route.params.type as string;
+const id = route.params.id as string;
 
 const dataSource = ref([]);
 const type = ref(false);
@@ -53,7 +65,6 @@ const goProviders = (param: object) => {
     showType.value = param.type;
     provider.value = param;
     type.value = false;
-    console.log(1123, showType.value, param);
 };
 
 const goBack = () => {
@@ -61,80 +72,77 @@ const goBack = () => {
     type.value = true;
 };
 
+const getTypeList = (result: any[]) => {
+    const list = [];
+    const media: any[] = [];
+    const network: any[] = [];
+    const cloud: any[] = [];
+    const channel: any[] = [];
+    const edge: any[] = [];
+    result.map((item) => {
+        if (item.id === 'fixed-media' || item.id === 'gb28181-2016') {
+            item.type = 'media';
+            media.push(item);
+        } else if (item.id === 'OneNet' || item.id === 'Ctwing') {
+            item.type = 'cloud';
+            cloud.push(item);
+        } else if (item.id === 'modbus-tcp' || item.id === 'opc-ua') {
+            item.type = 'channel';
+            channel.push(item);
+        } else if (
+            item.id === 'official-edge-gateway' ||
+            item.id === 'edge-child-device'
+        ) {
+            item.type = 'edge';
+            edge.push(item);
+        } else {
+            item.type = 'network';
+            network.push(item);
+        }
+    });
+
+    network.length &&
+        list.push({
+            list: [...network],
+            title: '自定义设备接入',
+        });
+    media.length &&
+        list.push({
+            list: [...media],
+            title: '视频类设备接入',
+        });
+    cloud.length &&
+        list.push({
+            list: [...cloud],
+            title: '云平台接入',
+        });
+    channel.length &&
+        list.push({
+            list: [...channel],
+            title: '通道类设备接入',
+        });
+    edge.length &&
+        list.push({
+            list: [...edge],
+            title: '官方接入',
+        });
+
+    return list;
+};
+
 const queryProviders = async () => {
     const resp = await getProviders();
     if (resp.status === 200) {
-        const media: any[] = [];
-        const network: any[] = [];
-        const cloud: any[] = [];
-        const channel: any[] = [];
-        const edge: any[] = [];
-        resp.result.map((item) => {
-            if (item.id === 'fixed-media' || item.id === 'gb28181-2016') {
-                item.type = 'media';
-                media.push(item);
-            } else if (item.id === 'OneNet' || item.id === 'Ctwing') {
-                item.type = 'cloud';
-                cloud.push(item);
-            } else if (item.id === 'modbus-tcp' || item.id === 'opc-ua') {
-                item.type = 'channel';
-                channel.push(item);
-            } else if (
-                item.id === 'official-edge-gateway' ||
-                item.id === 'edge-child-device'
-            ) {
-                item.type = 'edge';
-                edge.push(item);
-            } else {
-                item.type = 'network';
-                network.push(item);
-            }
-        });
-        const list = [];
-        if (network.length) {
-            list.push({
-                // type: 'network',
-                list: [...network],
-                title: '自定义设备接入',
-            });
-        }
-        if (media.length) {
-            list.push({
-                // type: 'media',
-                list: [...media],
-                title: '视频类设备接入',
-            });
-        }
-        if (cloud.length) {
-            list.push({
-                // type: 'cloud',
-                list: [...cloud],
-                title: '云平台接入',
-            });
-        }
-        if (channel.length) {
-            list.push({
-                // type: 'channel',
-                list: [...channel],
-                title: '通道类设备接入',
-            });
-        }
-        if (edge.length) {
-            list.push({
-                // type: 'edge',
-                list: [...edge],
-                title: '官方接入',
-            });
-        }
-        dataSource.value = list;
+        dataSource.value = getTypeList(resp.result);
     }
 };
 
 const getProvidersData = async () => {
-    if (id) {
+    if (id && modeType !== 'add') {
         getProviders().then((response) => {
             if (response.status === 200) {
-                dataSource.value = response.result.filter(
+                const list = getTypeList(response.result);
+                dataSource.value = list.filter(
                     (item) =>
                         item.channel === 'network' ||
                         item.channel === 'child-device',
@@ -144,15 +152,21 @@ const getProvidersData = async () => {
                         const dt = response.result.find(
                             (item) => item?.id === resp.result.provider,
                         );
+
+                        response.result.forEach((item) => {
+                            if (item.id === resp.result.provider) {
+                                resp.result.type = item.type;
+                                showType.value = item.type;
+                            }
+                        });
+
                         provider.value = dt;
                         data.value = resp.result;
                         type.value = false;
                     }
                 });
-                loading.value = false;
-            } else {
-                loading.value = false;
             }
+            loading.value = false;
         });
     } else {
         type.value = true;
diff --git a/src/views/link/AccessConfig/components/Channel/index.vue b/src/views/link/AccessConfig/components/Channel/index.vue
index 15b30253..8e8ffd74 100644
--- a/src/views/link/AccessConfig/components/Channel/index.vue
+++ b/src/views/link/AccessConfig/components/Channel/index.vue
@@ -39,7 +39,10 @@
                                 />
                             </a-form-item>
                             <a-form-item>
-                                <a-button type="primary" html-type="submit"
+                                <a-button
+                                    v-if="modeType !== 'view'"
+                                    type="primary"
+                                    html-type="submit"
                                     >保存</a-button
                                 >
                             </a-form-item>
@@ -93,18 +96,23 @@ interface FormState {
     description: string;
 }
 const route = useRoute();
-const id = route.query.id;
+const modeType = route.params.type as string;
+const id = route.params.id as string;
 
 const props = defineProps({
     provider: {
         type: Object,
         default: () => {},
     },
+    data: {
+        type: Object,
+        default: () => {},
+    },
 });
 
 const type = ref(props.provider.type);
 
-const formState = reactive<FormState>({
+const formState = ref<FormState>({
     name: '',
     description: '',
 });
@@ -117,7 +125,10 @@ const onFinish = async (values: any) => {
         transport: ProtocolMapping.get(providerId),
         channel: providerId === 'modbus-tcp' ? 'modbus' : 'opc-ua',
     };
-    const resp = !!id ? await update({ ...params, id }) : await save(params);
+    const resp =
+        !!id && modeType !== 'add'
+            ? await update({ ...params, id })
+            : await save(params);
     if (resp.status === 200) {
         message.success('操作成功！');
         // if (params.get('save')) {
@@ -132,6 +143,15 @@ const onFinish = async (values: any) => {
         //   }
     }
 };
+
+onMounted(() => {
+    if (modeType !== 'add') {
+        formState.value = {
+            name: props.data.name,
+            description: props.data?.description || '',
+        };
+    }
+});
 </script>
 
 <style lang="less" scoped>
diff --git a/src/views/link/AccessConfig/components/Cloud/Ctwing.vue b/src/views/link/AccessConfig/components/Cloud/Ctwing.vue
index 806b33bb..026bf4ef 100644
--- a/src/views/link/AccessConfig/components/Cloud/Ctwing.vue
+++ b/src/views/link/AccessConfig/components/Cloud/Ctwing.vue
@@ -199,7 +199,7 @@
                     <title-component data="基本信息" />
                     <div>
                         <a-form
-                            :model="form"
+                            :model="formData"
                             name="basic"
                             autocomplete="off"
                             layout="vertical"
@@ -219,14 +219,14 @@
                             >
                                 <a-input
                                     placeholder="请输入名称"
-                                    v-model:value="form.name"
+                                    v-model:value="formData.name"
                                 />
                             </a-form-item>
                             <a-form-item label="说明" name="description">
                                 <a-textarea
                                     placeholder="请输入说明"
                                     :rows="4"
-                                    v-model:value="form.description"
+                                    v-model:value="formData.description"
                                     show-count
                                     :maxlength="200"
                                 />
@@ -277,16 +277,20 @@
             <a-button
                 v-if="[0, 1].includes(current)"
                 type="primary"
+                style="margin-right: 8px"
                 @click="next"
             >
                 下一步
             </a-button>
-            <a-button v-if="current === 2" type="primary" @click="saveData">
+            <a-button
+                v-if="current === 2 && modeType !== 'view'"
+                type="primary"
+                style="margin-right: 8px"
+                @click="saveData"
+            >
                 保存
             </a-button>
-            <a-button v-if="current > 0" style="margin-left: 8px" @click="prev">
-                上一步
-            </a-button>
+            <a-button v-if="current > 0" @click="prev"> 上一步 </a-button>
         </div>
     </div>
 </template>
@@ -379,7 +383,8 @@ interface Form {
     description: string;
 }
 const route = useRoute();
-const id = route.query.id;
+const modeType = route.params.type as string;
+const id = route.params.id as string;
 
 const props = defineProps({
     provider: {
@@ -396,13 +401,13 @@ const channel = ref(props.provider.channel);
 const formRef1 = ref<FormInstance>();
 const formRef2 = ref<FormInstance>();
 
-const formState = reactive<FormState>({
+const formState = ref<FormState>({
     apiAddress: 'https://ag-api.ctwing.cn/',
     appKey: '',
     appSecret: '',
     description: '',
 });
-const form = reactive<Form>({
+const formData = ref<Form>({
     name: '',
     description: '',
 });
@@ -415,9 +420,7 @@ const allProcotolList = ref([]);
 const procotolCurrent = ref('');
 
 const procotolChange = (id: string) => {
-    if (!props.data?.id) {
-        procotolCurrent.value = id;
-    }
+    procotolCurrent.value = id;
 };
 
 const procotolSearch = (value: string) => {
@@ -439,7 +442,7 @@ const saveData = async () => {
     const params = {
         ...data,
         configuration: {
-            ...formState,
+            ...formState.value,
             protocol: procotolCurrent.value,
         },
         protocol: procotolCurrent.value,
@@ -447,7 +450,7 @@ const saveData = async () => {
         transport: 'HTTP_SERVER',
     };
     const resp =
-        props.data && props.data.id
+        !!id && modeType !== 'add'
             ? await update({
                   ...props.data,
                   ...params,
@@ -514,7 +517,16 @@ const next = async () => {
 const prev = () => {
     current.value = current.value - 1;
 };
-
+onMounted(() => {
+    if (modeType !== 'add') {
+        formState.value = props.data.configuration;
+        procotolCurrent.value = props.data.protocol;
+        formData.value = {
+            name: props.data.name,
+            description: props.data.description,
+        };
+    }
+});
 watch(
     current,
     (v) => {
diff --git a/src/views/link/AccessConfig/components/Cloud/OneNet.vue b/src/views/link/AccessConfig/components/Cloud/OneNet.vue
index 79f91f71..cb066751 100644
--- a/src/views/link/AccessConfig/components/Cloud/OneNet.vue
+++ b/src/views/link/AccessConfig/components/Cloud/OneNet.vue
@@ -292,7 +292,7 @@
                     <title-component data="基本信息" />
                     <div>
                         <a-form
-                            :model="form"
+                            :model="formData"
                             name="basic"
                             autocomplete="off"
                             layout="vertical"
@@ -312,26 +312,18 @@
                             >
                                 <a-input
                                     placeholder="请输入名称"
-                                    v-model:value="form.name"
+                                    v-model:value="formData.name"
                                 />
                             </a-form-item>
                             <a-form-item label="说明" name="description">
                                 <a-textarea
                                     placeholder="请输入说明"
                                     :rows="4"
-                                    v-model:value="form.description"
+                                    v-model:value="formData.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>
@@ -378,16 +370,20 @@
             <a-button
                 v-if="[0, 1].includes(current)"
                 type="primary"
+                style="margin-right: 8px"
                 @click="next"
             >
                 下一步
             </a-button>
-            <a-button v-if="current === 2" type="primary" @click="saveData">
+            <a-button
+                style="margin-right: 8px"
+                v-if="current === 2 && modeType !== 'view'"
+                type="primary"
+                @click="saveData"
+            >
                 保存
             </a-button>
-            <a-button v-if="current > 0" style="margin-left: 8px" @click="prev">
-                上一步
-            </a-button>
+            <a-button v-if="current > 0" @click="prev"> 上一步 </a-button>
         </div>
     </div>
 </template>
@@ -483,7 +479,8 @@ interface Form {
     description: string;
 }
 const route = useRoute();
-const id = route.query.id;
+const modeType = route.params.type as string;
+const id = route.params.id as string;
 
 const props = defineProps({
     provider: {
@@ -500,14 +497,14 @@ const channel = ref(props.provider.channel);
 const formRef1 = ref<FormInstance>();
 const formRef2 = ref<FormInstance>();
 
-const formState = reactive<FormState>({
+const formState = ref<FormState>({
     apiAddress: 'https://api.heclouds.com/',
     apiKey: '',
     validateToken: '',
     aesKey: '',
     description: '',
 });
-const form = reactive<Form>({
+const formData = ref<Form>({
     name: '',
     description: '',
 });
@@ -520,9 +517,7 @@ const allProcotolList = ref([]);
 const procotolCurrent = ref('');
 
 const procotolChange = (id: string) => {
-    if (!props.data?.id) {
-        procotolCurrent.value = id;
-    }
+    procotolCurrent.value = id;
 };
 
 const procotolSearch = (value: string) => {
@@ -544,7 +539,7 @@ const saveData = async () => {
     const params = {
         ...data,
         configuration: {
-            ...formState,
+            ...formState.value,
             protocol: procotolCurrent.value,
         },
         protocol: procotolCurrent.value,
@@ -552,7 +547,7 @@ const saveData = async () => {
         transport: 'HTTP_SERVER',
     };
     const resp =
-        props.data && props.data.id
+        !!id && modeType !== 'add'
             ? await update({
                   ...props.data,
                   ...params,
@@ -619,6 +614,17 @@ const prev = () => {
     current.value = current.value - 1;
 };
 
+onMounted(() => {
+    if (modeType !== 'add') {
+        formState.value = props.data.configuration;
+        procotolCurrent.value = props.data.protocol;
+        formData.value = {
+            name: props.data.name,
+            description: props.data.description,
+        };
+    }
+});
+
 watch(
     current,
     (v) => {
diff --git a/src/views/link/AccessConfig/components/Cloud/index.vue b/src/views/link/AccessConfig/components/Cloud/index.vue
index dfa6dc39..f1f4658a 100644
--- a/src/views/link/AccessConfig/components/Cloud/index.vue
+++ b/src/views/link/AccessConfig/components/Cloud/index.vue
@@ -17,9 +17,6 @@
 import Ctwing from './Ctwing.vue';
 import OneNet from './OneNet.vue';
 
-const route = useRoute();
-const id = route.query.id;
-
 const props = defineProps({
     provider: {
         type: Object,
diff --git a/src/views/link/AccessConfig/components/Edge/index.vue b/src/views/link/AccessConfig/components/Edge/index.vue
index 6798e357..2ac57f96 100644
--- a/src/views/link/AccessConfig/components/Edge/index.vue
+++ b/src/views/link/AccessConfig/components/Edge/index.vue
@@ -140,7 +140,7 @@
                             </a-form-item>
                             <a-form-item>
                                 <a-button
-                                    v-if="current !== 1"
+                                    v-if="current !== 1 && modeType !== 'view'"
                                     type="primary"
                                     html-type="submit"
                                     >保存</a-button
@@ -171,15 +171,22 @@
             v-if="channel !== 'edge-child-device'"
             :class="current !== 1 ? 'steps-action' : 'steps-action-save'"
         >
-            <a-button v-if="[0].includes(current)" @click="next">
+            <a-button
+                v-if="[0].includes(current)"
+                style="margin-right: 8px"
+                @click="next"
+            >
                 下一步
             </a-button>
-            <a-button v-if="current === 1" type="primary" @click="saveData">
+            <a-button
+                v-if="current === 1 && modeType !== 'view'"
+                type="primary"
+                style="margin-right: 8px"
+                @click="saveData"
+            >
                 保存
             </a-button>
-            <a-button v-if="current > 0" style="margin-left: 8px" @click="prev">
-                上一步
-            </a-button>
+            <a-button v-if="current > 0" @click="prev"> 上一步 </a-button>
         </div>
     </div>
 </template>
@@ -290,19 +297,25 @@ interface FormState {
     description: string;
 }
 const route = useRoute();
-const id = route.query.id;
+const modeType = route.params.type as string;
+const id = route.params.id as string;
 
 const props = defineProps({
     provider: {
         type: Object,
         default: () => {},
     },
+    data: {
+        type: Object,
+        default: () => {},
+    },
 });
 
-const type = ref(props.provider.type);
+const type = props.provider.type;
+
 const channel = ref(props.provider.channel);
 
-const formState = reactive<FormState>({
+const formState = ref<FormState>({
     name: '',
     description: '',
 });
@@ -324,9 +337,10 @@ const onFinish = async (values: any) => {
         transport: ProtocolMapping.get(providerId),
     };
     if (networkCurrent.value) params.channelId = networkCurrent.value;
-    console.log(1112, networkCurrent.value, params);
-
-    const resp = !!id ? await update({ ...params, id }) : await save(params);
+    const resp =
+        !!id && modeType !== 'add'
+            ? await update({ ...params, id })
+            : await save(params);
     if (resp.status === 200) {
         message.success('操作成功！');
         // if (params.get('save')) {
@@ -407,6 +421,13 @@ onMounted(() => {
     if (props.provider.id === 'official-edge-gateway') {
         queryNetworkList(props.provider.id, '');
     }
+    if (modeType !== 'add') {
+        formState.value = {
+            name: props.data.name,
+            description: props.data?.description || '',
+        };
+        networkCurrent.value = props.data.channelId;
+    }
 }),
     watch(
         current,
diff --git a/src/views/link/AccessConfig/components/Media/GB28181.vue b/src/views/link/AccessConfig/components/Media/GB28181.vue
index 77540348..8d05ce36 100644
--- a/src/views/link/AccessConfig/components/Media/GB28181.vue
+++ b/src/views/link/AccessConfig/components/Media/GB28181.vue
@@ -436,17 +436,18 @@
                         <a-col :span="12">
                             <title-component data="基本信息" />
                             <div>
-                                <a-form :model="form" layout="vertical">
+                                <a-form :model="formData" layout="vertical">
                                     <a-form-item
                                         label="名称"
                                         v-bind="validateInfos.name"
                                     >
                                         <a-input
-                                            v-model:value="form.name"
+                                            v-model:value="formData.name"
                                             allowClear
                                             placeholder="请输入名称"
                                         />
                                     </a-form-item>
+
                                     <a-form-item
                                         label="说明"
                                         v-bind="validateInfos.description"
@@ -454,7 +455,7 @@
                                         <a-textarea
                                             placeholder="请输入说明"
                                             :rows="4"
-                                            v-model:value="form.description"
+                                            v-model:value="formData.description"
                                             show-count
                                             :maxlength="200"
                                         />
@@ -494,15 +495,22 @@
             </div>
         </div>
         <div class="steps-action">
-            <a-button v-if="[0].includes(current)" @click="next">
+            <a-button
+                v-if="[0].includes(current)"
+                style="margin-right: 8px"
+                @click="next"
+            >
                 下一步
             </a-button>
-            <a-button v-if="current === 1" type="primary" @click="saveData">
+            <a-button
+                v-if="current === 1 && modeType !== 'view'"
+                type="primary"
+                style="margin-right: 8px"
+                @click="saveData"
+            >
                 保存
             </a-button>
-            <a-button v-if="current > 0" style="margin-left: 8px" @click="prev">
-                上一步
-            </a-button>
+            <a-button v-if="current > 0" @click="prev"> 上一步 </a-button>
         </div>
     </div>
 </template>
@@ -544,10 +552,15 @@ const props = defineProps({
         type: Object,
         default: () => {},
     },
+    data: {
+        type: Object,
+        default: () => {},
+    },
 });
 
 const route = useRoute();
-const id = route.query.id;
+const modeType = route.params.type as string;
+const id = route.params.id as string;
 
 const activeKey: any = ref([]);
 const clientHeight = document.body.clientHeight;
@@ -559,11 +572,11 @@ const useForm = Form.useForm;
 const current = ref(0);
 const stepCurrent = ref(0);
 const steps = ref(['信令配置', '完成']);
-const form = reactive({
+const formData = ref({
     name: '',
     description: '',
 });
-const formState = reactive<FormState>({
+let formState = ref<FormState>({
     domain: '',
     sipId: '',
     shareCluster: true,
@@ -574,6 +587,7 @@ const formState = reactive<FormState>({
         publicHost: '',
     },
 });
+
 let params = {
     configuration: {},
 };
@@ -628,12 +642,13 @@ const handleChangeForm2Sip = (index: number) => {
 };
 
 const { resetFields, validate, validateInfos } = useForm(
-    form,
+    formData,
     reactive({
         name: [
             { required: true, message: '请输入名称', trigger: 'blur' },
             { max: 64, message: '最多可输入64个字符' },
         ],
+        description: [{ max: 200, message: '最多可输入200个字符' }],
     }),
 );
 
@@ -646,9 +661,11 @@ const saveData = () => {
             transport: 'SIP',
             channel: 'gb28181',
         };
-        const resp = !!id
-            ? await update({ ...params, id })
-            : await save(params);
+
+        const resp =
+            !!id && modeType !== 'add'
+                ? await update({ ...params, id })
+                : await save(params);
         if (resp.status === 200) {
             message.success('操作成功！');
             // if (params.get('save')) {
@@ -723,6 +740,14 @@ onMounted(() => {
             clustersList.value = list;
         }
     });
+
+    if (modeType !== 'add') {
+        formState.value = props.data.configuration;
+        formData.value = {
+            name: props.data.name,
+            description: props.data?.description || '',
+        };
+    }
 });
 
 watch(
diff --git a/src/views/link/AccessConfig/components/Media/index.vue b/src/views/link/AccessConfig/components/Media/index.vue
index 1f96e91d..c832fb4c 100644
--- a/src/views/link/AccessConfig/components/Media/index.vue
+++ b/src/views/link/AccessConfig/components/Media/index.vue
@@ -39,7 +39,10 @@
                                 />
                             </a-form-item>
                             <a-form-item>
-                                <a-button type="primary" html-type="submit"
+                                <a-button
+                                    v-if="modeType !== 'view'"
+                                    type="primary"
+                                    html-type="submit"
                                     >保存</a-button
                                 >
                             </a-form-item>
@@ -72,7 +75,7 @@
             </a-row>
         </div>
         <div v-else-if="channel === 'gb28181'">
-            <GB28181 :provider="props.provider"></GB28181>
+            <GB28181 :provider="props.provider" :data="props.data"></GB28181>
         </div>
     </div>
 </template>
@@ -88,18 +91,23 @@ interface FormState {
     description: string;
 }
 const route = useRoute();
-const id = route.query.id;
+const modeType = route.params.type as string;
+const id = route.params.id as string;
 
 const props = defineProps({
     provider: {
         type: Object,
         default: () => {},
     },
+    data: {
+        type: Object,
+        default: () => {},
+    },
 });
 
 const channel = ref(props.provider.channel);
 
-const formState = reactive<FormState>({
+const formState = ref<FormState>({
     name: '',
     description: '',
 });
@@ -110,7 +118,10 @@ const onFinish = async (values: any) => {
         transport: 'URL',
         channel: 'fixed-media',
     };
-    const resp = !!id ? await update({ ...params, id }) : await save(params);
+    const resp =
+        !!id && modeType !== 'add'
+            ? await update({ ...params, id })
+            : await save(params);
     if (resp.status === 200) {
         message.success('操作成功！');
         // if (params.get('save')) {
@@ -125,6 +136,15 @@ const onFinish = async (values: any) => {
         //   }
     }
 };
+
+onMounted(() => {
+    if (modeType !== 'add') {
+        formState.value = {
+            name: props.data.name,
+            description: props.data?.description || '',
+        };
+    }
+});
 </script>
 
 <style lang="less" scoped>
diff --git a/src/views/link/AccessConfig/components/Network.vue b/src/views/link/AccessConfig/components/Network.vue
index 04bebf34..4669d80d 100644
--- a/src/views/link/AccessConfig/components/Network.vue
+++ b/src/views/link/AccessConfig/components/Network.vue
@@ -138,7 +138,7 @@
                             <div>
                                 <a-form
                                     ref="formRef"
-                                    :model="form"
+                                    :model="formData"
                                     layout="vertical"
                                 >
                                     <a-form-item
@@ -146,7 +146,7 @@
                                         v-bind="validateInfos.name"
                                     >
                                         <a-input
-                                            v-model:value="form.name"
+                                            v-model:value="formData.name"
                                             allowClear
                                             placeholder="请输入名称"
                                         />
@@ -158,7 +158,7 @@
                                         <a-textarea
                                             placeholder="请输入说明"
                                             :rows="4"
-                                            v-model:value="form.description"
+                                            v-model:value="formData.description"
                                             show-count
                                             :maxlength="200"
                                         />
@@ -295,13 +295,26 @@
             </div>
         </div>
         <div class="steps-action">
-            <a-button v-if="[0, 1].includes(current)" @click="next">
+            <a-button
+                v-if="[0, 1].includes(current)"
+                type="primary"
+                style="margin-right: 8px"
+                @click="next"
+            >
                 下一步
             </a-button>
-            <a-button v-if="current === 2" type="primary" @click="saveData">
+            <a-button
+                v-if="current === 2 && modeType !== 'view'"
+                type="primary"
+                style="margin-right: 8px"
+                @click="saveData"
+            >
                 保存
             </a-button>
-            <a-button v-if="current > 0" style="margin-left: 8px" @click="prev">
+            <a-button
+                v-if="type === 'child-device' ? current > 1 : current > 0"
+                @click="prev"
+            >
                 上一步
             </a-button>
         </div>
@@ -524,7 +537,204 @@ const result2 = {
         '### 认证说明\r\n\r\nCONNECT报文:\r\n```text\r\nclientId: 设备ID\r\nusername: secureId+"|"+timestamp\r\npassword: md5(secureId+"|"+timestamp+"|"+secureKey)\r\n ```\r\n\r\n说明: secureId以及secureKey在创建设备产品或设备实例时进行配置. \r\ntimestamp为当前时间戳(毫秒),与服务器时间不能相差5分钟.\r\nmd5为32位,不区分大小写.',
     metadata: '',
 };
-
+//测试数据
+const networkData = {
+    COAP_SERVER: [
+        {
+            id: '1620352949679960064',
+            name: '前端测试1',
+            description: '前端测试1',
+            addresses: [
+                {
+                    address: 'coap://111.0.0:88',
+                    health: 1,
+                    ok: true,
+                    bad: false,
+                    disabled: false,
+                },
+            ],
+        },
+        {
+            id: '1613071630619607040',
+            name: '1',
+            addresses: [
+                {
+                    address: 'coap://120.77.179.54:9000',
+                    health: 1,
+                    ok: true,
+                    bad: false,
+                    disabled: false,
+                },
+            ],
+        },
+    ],
+    UDP: [
+        {
+            id: '1590553821093437440',
+            name: '194',
+            addresses: [
+                {
+                    address: 'udp://139.217.130.194:1883',
+                    health: 1,
+                    ok: true,
+                    bad: false,
+                    disabled: false,
+                },
+            ],
+        },
+        {
+            id: '1585831257204301824',
+            name: '测试隐藏集群',
+            description: '111',
+            addresses: [
+                {
+                    address: 'udp://127.0.0.1:8080',
+                    health: 1,
+                    ok: true,
+                    bad: false,
+                    disabled: false,
+                },
+            ],
+        },
+        {
+            id: '1584825665263149056',
+            name: '1',
+            addresses: [
+                {
+                    address: 'udp://120.77.179.54:9000',
+                    health: 1,
+                    ok: true,
+                    bad: false,
+                    disabled: false,
+                },
+            ],
+        },
+        {
+            id: '1551761481741672448',
+            name: '0726UDP',
+            description: '测试',
+            addresses: [
+                {
+                    address: 'udp://120.77.179.54:8088',
+                    health: 1,
+                    ok: true,
+                    bad: false,
+                    disabled: false,
+                },
+            ],
+        },
+    ],
+    TCP_SERVER: [
+        {
+            id: '1603206069979918336',
+            name: '测试A',
+            addresses: [
+                {
+                    address: 'tcp://120.77.179.54:8106',
+                    health: -1,
+                    ok: false,
+                    bad: false,
+                    disabled: true,
+                },
+            ],
+        },
+        {
+            id: '1603206069979918330',
+            name: '测试AA',
+            addresses: [
+                {
+                    address: 'tcp://120.77.179.54:8106',
+                    health: -1,
+                    ok: false,
+                    bad: false,
+                    disabled: true,
+                },
+            ],
+        },
+    ],
+    MQTT_SERVER: [
+        {
+            id: '1585192878304051200',
+            name: 'MQTT网络组件',
+            addresses: [
+                {
+                    address: 'mqtt://120.77.179.54:8101',
+                    health: 1,
+                    ok: true,
+                    bad: false,
+                    disabled: false,
+                },
+            ],
+        },
+        {
+            id: '1583268266806009856',
+            name: '我的第一个MQTT服务组件',
+            description: '',
+            addresses: [
+                {
+                    address: 'mqtt://120.77.179.54:8100',
+                    health: 1,
+                    ok: true,
+                    bad: false,
+                    disabled: false,
+                },
+            ],
+        },
+        {
+            id: '1570335308902912000',
+            name: '0915MQTT网络组件_勿动',
+            description: '测试，勿动！',
+            addresses: [
+                {
+                    address: 'mqtt://120.77.179.54:8083',
+                    health: 1,
+                    ok: true,
+                    bad: false,
+                    disabled: false,
+                },
+            ],
+        },
+        {
+            id: '1567062350140858368',
+            name: '网络组件20220906160907',
+            addresses: [
+                {
+                    address: 'mqtt://120.77.179.54:8083',
+                    health: 1,
+                    ok: true,
+                    bad: false,
+                    disabled: false,
+                },
+            ],
+        },
+        {
+            id: '1556563257890742272',
+            name: 'MQTT网络组件',
+            addresses: [
+                {
+                    address: 'mqtt://0.0.0.0:8104',
+                    health: 1,
+                    ok: true,
+                    bad: false,
+                    disabled: false,
+                },
+            ],
+        },
+        {
+            id: '1534774770408108032',
+            name: 'MQTT',
+            addresses: [
+                {
+                    address: 'mqtt://120.77.179.54:8088',
+                    health: 1,
+                    ok: true,
+                    bad: false,
+                    disabled: false,
+                },
+            ],
+        },
+    ],
+};
 function generateUUID() {
     var d = new Date().getTime();
     if (
@@ -555,6 +765,10 @@ const props = defineProps({
 });
 
 const clientHeight = document.body.clientHeight;
+const type = props.provider.channel;
+const route = useRoute();
+const modeType = route.params.type as string;
+const id = route.params.id as string;
 
 const formRef = ref<FormInstance>();
 const useForm = Form.useForm;
@@ -569,29 +783,40 @@ const networkCurrent = ref('');
 const procotolCurrent = ref('');
 let config = ref({});
 let columnsMQTT = ref(<TableColumnType>[]);
-const form = reactive({
+const formData = ref({
     name: '',
     description: '',
 });
 
 const { resetFields, validate, validateInfos } = useForm(
-    form,
+    formData,
     reactive({
         name: [
             { required: true, message: '请输入名称', trigger: 'blur' },
             { max: 64, message: '最多可输入64个字符' },
         ],
+        description: [{ max: 200, message: '最多可输入200个字符' }],
     }),
 );
 
 const queryNetworkList = async (id: string, include: string, data = {}) => {
+    if (NetworkTypeMapping.get(id) === 'MQTT_SERVER') {
+        //使用测试数据
+        networkList.value = networkData[NetworkTypeMapping.get(id)];
+        // return;
+    }
     const resp = await getNetworkList(
         NetworkTypeMapping.get(id),
         include,
         data,
     );
     if (resp.status === 200) {
-        networkList.value = resp.result;
+        //使用测试数据
+        // networkList.value = resp.result;
+        networkList.value =
+            resp.result.length === 0
+                ? networkData[NetworkTypeMapping.get(id)]
+                : resp.result;
     }
 };
 
@@ -686,7 +911,7 @@ const saveData = () => {
                 channel: 'network', // 网络组件
                 channelId: networkCurrent.value,
             };
-            if (props.data && props.data.id) {
+            if (!!id && modeType !== 'add') {
                 resp = await update(params);
             } else {
                 params = {
@@ -702,12 +927,13 @@ const saveData = () => {
             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'] })
-                }
+                // if (window.onTabSaveSuccess) {
+                //     window.onTabSaveSuccess(resp);
+                //     setTimeout(() => window.close(), 300);
+                // } else {
+                //     // this.$store.dispatch('jumpPathByKey', { key: MenuKeys['Link/AccessConfig'] })
+                // }
+                history.back();
             }
         })
         .catch((err) => {});
@@ -781,7 +1007,7 @@ const next = async () => {
             ];
 
             // const resp =
-            //     props.provider.channel !== 'child-device'
+            //     type !== 'child-device'
             //         ? await getConfigView(
             //               procotolCurrent.value,
             //               ProtocolMapping.get(props.provider.id),
@@ -864,7 +1090,7 @@ onMounted(() => {
         }
     } else {
         if (props.provider?.id) {
-            if (props.provider.channel !== 'child-device') {
+            if (type !== 'child-device') {
                 queryNetworkList(props.provider.id, '');
                 steps.value = ['网络组件', '消息协议', '完成'];
                 current.value = 0;
@@ -877,14 +1103,20 @@ onMounted(() => {
     }
 });
 
+onMounted(() => {
+    if (modeType !== 'add') {
+        procotolCurrent.value = props.data.protocol;
+        formData.value = {
+            name: props.data.name,
+            description: props.data.description,
+        };
+    }
+});
+
 watch(
     current,
     (v) => {
-        if (props.provider.channel !== 'child-device') {
-            stepCurrent.value = v;
-        } else {
-            stepCurrent.value = v - 1;
-        }
+        stepCurrent.value = type === 'child-device' ? v - 1 : v;
     },
     {
         deep: true,
diff --git a/src/views/link/AccessConfig/index.vue b/src/views/link/AccessConfig/index.vue
index b3a74786..aa044274 100644
--- a/src/views/link/AccessConfig/index.vue
+++ b/src/views/link/AccessConfig/index.vue
@@ -44,8 +44,13 @@
                         </template>
                         <template #content>
                             <div class="card-item-content">
-                                <h3 class="card-item-content-title">
-                                    <a href="">{{ slotProps.name }}</a>
+                                <h3
+                                    @click="handlEye(slotProps.id)"
+                                    class="card-item-content-title"
+                                >
+                                    <a class="card-item-content-title-a">{{
+                                        slotProps.name
+                                    }}</a>
                                 </h3>
                                 <a-row class="card-item-content-box">
                                     <a-col
@@ -110,19 +115,23 @@
                                             <a-tooltip>
                                                 <template #title>
                                                     {{
-                                                        providersList.find(
-                                                            (item) =>
-                                                                item.id ===
-                                                                slotProps.provider,
-                                                        )?.description
-                                                    }}</template
-                                                >
+                                                        slotProps.description
+                                                            ? slotProps.description
+                                                            : providersList.find(
+                                                                  (item) =>
+                                                                      item.id ===
+                                                                      slotProps.provider,
+                                                              )?.description
+                                                    }}
+                                                </template>
                                                 {{
-                                                    providersList.find(
-                                                        (item) =>
-                                                            item.id ===
-                                                            slotProps.provider,
-                                                    )?.description
+                                                    slotProps.description
+                                                        ? slotProps.description
+                                                        : providersList.find(
+                                                              (item) =>
+                                                                  item.id ===
+                                                                  slotProps.provider,
+                                                          )?.description
                                                 }}
                                             </a-tooltip>
                                         </div>
@@ -184,7 +193,13 @@
 <script lang="ts" setup name="AccessConfigPage">
 import type { ActionsType } from '@/components/Table/index.vue';
 import { getImage } from '@/utils/comm';
-import { list, getProviders } from '@/api/link/accessConfig';
+import {
+    list,
+    getProviders,
+    remove,
+    undeploy,
+    deploy,
+} from '@/api/link/accessConfig';
 import { message } from 'ant-design-vue';
 
 const tableRef = ref<Record<string, any>>({});
@@ -261,9 +276,8 @@ const columns = [
 ];
 
 const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
-    if (!data) {
-        return [];
-    }
+    if (!data) return [];
+    const state = data.state.value;
     return [
         {
             key: 'edit',
@@ -276,15 +290,47 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
                 handlEdit(data.id);
             },
         },
+        {
+            key: 'action',
+            text: state === 'enabled' ? '禁用' : '启用',
+            tooltip: {
+                title: state === 'enabled' ? '禁用' : '启用',
+            },
+            icon: state === 'enabled' ? 'StopOutlined' : 'CheckCircleOutlined',
+            popConfirm: {
+                title: `确认${state === 'enabled' ? '禁用' : '启用'}?`,
+                onConfirm: async () => {
+                    let res =
+                        state === 'enabled'
+                            ? await undeploy(data.id)
+                            : await deploy(data.id);
+
+                    if (res.success) {
+                        message.success('操作成功');
+                        tableRef.value?.reload();
+                    } else {
+                        message.error('操作失败！');
+                    }
+                },
+            },
+        },
         {
             key: 'delete',
             text: '删除',
+            disabled: state === 'enabled',
+            tooltip: {
+                title: state === 'enabled' ? '已启用的设备不能删除' : '删除',
+            },
             popConfirm: {
                 title: '确认删除?',
-                okText: ' 确定',
-                cancelText: '取消',
                 onConfirm: async () => {
-                    handlDelete(data.id);
+                    const res = await remove(data.id);
+                    if (res.success) {
+                        message.success('操作成功');
+                        tableRef.value.reload();
+                    } else {
+                        message.error('操作失败！');
+                    }
                 },
             },
             icon: 'DeleteOutlined',
@@ -299,21 +345,13 @@ const getProvidersList = async () => {
 getProvidersList();
 
 const handlAdd = () => {
-    router.push('/link/accessConfig/detail/add');
-
-    // router.push('/link/certificate/detail/add/new');
+    router.push('/link/accessConfig/detail/add/new');
 };
-
 const handlEdit = (id: string) => {
-    router.push(`/link/certificate/detail/edit/${id}`);
+    router.push(`/link/accessConfig/detail/edit/${id}`);
 };
-
-const handlDelete = async (id: string) => {
-    const res = await remove(id);
-    if (res.success) {
-        message.success('操作成功');
-        tableRef.value.reload();
-    }
+const handlEye = (id: string) => {
+    router.push(`/link/accessConfig/detail/view/${id}`);
 };
 
 /**
@@ -356,6 +394,14 @@ const handleSearch = (e: any) => {
 .card-item-content {
     min-height: 100px;
 
+    .card-item-content-title-a {
+        // color: #000 !important;
+        font-weight: 700;
+        font-size: 18px;
+        overflow: hidden; //超出的文本隐藏
+        text-overflow: ellipsis; //溢出用省略号显示
+        white-space: nowrap; //溢出不换行
+    }
     .card-item-content-box {
         min-height: 50px;
     }
diff --git a/src/views/link/Certificate/Detail/index.vue b/src/views/link/Certificate/Detail/index.vue
index e8857baf..4f1f7b99 100644
--- a/src/views/link/Certificate/Detail/index.vue
+++ b/src/views/link/Certificate/Detail/index.vue
@@ -60,7 +60,7 @@
 
                     <a-form-item>
                         <a-button
-                            v-if="type !== 'view'"
+                            v-if="modeType !== 'view'"
                             class="form-submit"
                             html-type="submit"
                             type="primary"
@@ -103,7 +103,7 @@ import { FormDataType, TypeObjType } from '../type';
 
 const router = useRouter();
 const route = useRoute();
-const type = route.params.type as string;
+const modeType = route.params.type as string;
 const id = route.params.id as string;
 
 const useForm = Form.useForm;
@@ -145,7 +145,7 @@ const onSubmit = () => {
             const params = toRaw(formData.value);
             loading.value = true;
             const response =
-                type === 'edit' ? await update(params) : await save(params);
+                modeType === 'edit' ? await update(params) : await save(params);
             if (response.status === 200) {
                 message.success('操作成功');
                 router.push('/link/certificate');
@@ -168,7 +168,7 @@ const handleChange = (info: UploadChangeParam) => {
 };
 
 const detail = async (id: string) => {
-    if (type !== 'add') {
+    if (modeType !== 'add') {
         loading.value = true;
         const res = await queryDetail(id);
         if (res.success) {