diff --git a/src/api/link/certificate.ts b/src/api/link/certificate.ts
index 9ed5f5e1..3f6b0a31 100644
--- a/src/api/link/certificate.ts
+++ b/src/api/link/certificate.ts
@@ -5,3 +5,12 @@ export const NETWORK_CERTIFICATE_UPLOAD = `${BASE_API_PATH}/network/certificate/
 
 
 export const save = (data: object) => server.post(`/network/certificate`, data);
+
+export const update = (data: object) => server.patch(`/network/certificate`, data);
+
+export const query = (data: object) => server.post(`/network/certificate/_query`, data);
+
+export const queryDetail = (id: string) => server.get(`/network/certificate/${id}`);
+
+export const remove = (id: string) => server.remove(`/network/certificate/${id}`);
+
diff --git a/src/router/menu.ts b/src/router/menu.ts
index fd304be9..234bcabf 100644
--- a/src/router/menu.ts
+++ b/src/router/menu.ts
@@ -87,7 +87,7 @@ export default [
         component: () => import('@/views/link/Certificate/index.vue')
     },
     {
-        path: '/link/certificate/detail/add',
+        path: '/link/certificate/detail/:type/:id',
         component: () => import('@/views/link/Certificate/Detail/index.vue')
     },
     {
diff --git a/src/views/link/AccessConfig/index.vue b/src/views/link/AccessConfig/index.vue
index e1509f3b..b3a74786 100644
--- a/src/views/link/AccessConfig/index.vue
+++ b/src/views/link/AccessConfig/index.vue
@@ -1,8 +1,328 @@
 <template>
-    <a-button type="primary" @click="handlAdd">新增</a-button>
+    <div class="page-container">
+        <a-card style="margin-bottom: 20px">
+            <Search :columns="columns" target="search" @search="handleSearch" />
+        </a-card>
+        <a-card>
+            <JTable
+                ref="tableRef"
+                model="CARD"
+                :columns="columns"
+                :request="list"
+                :defaultParams="{
+                    sorts: [{ name: 'createTime', order: 'desc' }],
+                }"
+                :params="params"
+            >
+                <template #headerTitle>
+                    <a-button type="primary" @click="handlAdd"
+                        ><plus-outlined />新增</a-button
+                    >
+                </template>
+                <template #card="slotProps">
+                    <CardBox
+                        :showStatus="true"
+                        :value="slotProps"
+                        :actions="getActions(slotProps)"
+                        v-bind="slotProps"
+                        :class="
+                            slotProps.state.value === 'disabled'
+                                ? 'tableCardDisabled'
+                                : 'tableCardEnabled'
+                        "
+                        :status="slotProps.state.value"
+                        :statusText="slotProps.state.text"
+                        :statusNames="{
+                            enabled: 'success',
+                            disabled: 'error',
+                        }"
+                    >
+                        <template #img>
+                            <slot name="img">
+                                <img :src="getImage('/device-access.png')" />
+                            </slot>
+                        </template>
+                        <template #content>
+                            <div class="card-item-content">
+                                <h3 class="card-item-content-title">
+                                    <a href="">{{ slotProps.name }}</a>
+                                </h3>
+                                <a-row class="card-item-content-box">
+                                    <a-col
+                                        :span="12"
+                                        v-if="slotProps.channelInfo"
+                                        class="card-item-content-text"
+                                    >
+                                        <div class="card-item-content-text">
+                                            {{ slotProps.channelInfo.name }}
+                                        </div>
+                                        <div
+                                            class="card-item-content-text"
+                                            v-if="
+                                                slotProps.channelInfo.addresses
+                                            "
+                                        >
+                                            <a-badge
+                                                :status="
+                                                    slotProps.channelInfo
+                                                        .addresses[0].health ===
+                                                    -1
+                                                        ? 'error'
+                                                        : 'success'
+                                                "
+                                            />
+                                            <a-tooltip>
+                                                <template #title>{{
+                                                    slotProps.channelInfo
+                                                        .addresses[0].address
+                                                }}</template>
+                                                {{
+                                                    slotProps.channelInfo
+                                                        .addresses[0].address
+                                                }}
+                                            </a-tooltip>
+                                        </div>
+                                    </a-col>
+                                    <a-col
+                                        :span="12"
+                                        v-if="slotProps.protocolDetail"
+                                    >
+                                        <div class="card-item-content-text">
+                                            协议
+                                        </div>
+                                        <div class="card-item-content-text">
+                                            <a-tooltip>
+                                                <template #title>{{
+                                                    slotProps.protocolDetail
+                                                        .name
+                                                }}</template>
+                                                {{
+                                                    slotProps.protocolDetail
+                                                        .name
+                                                }}
+                                            </a-tooltip>
+                                        </div>
+                                    </a-col>
+                                </a-row>
+                                <a-row>
+                                    <a-col :span="24">
+                                        <div class="card-item-content-text">
+                                            <a-tooltip>
+                                                <template #title>
+                                                    {{
+                                                        providersList.find(
+                                                            (item) =>
+                                                                item.id ===
+                                                                slotProps.provider,
+                                                        )?.description
+                                                    }}</template
+                                                >
+                                                {{
+                                                    providersList.find(
+                                                        (item) =>
+                                                            item.id ===
+                                                            slotProps.provider,
+                                                    )?.description
+                                                }}
+                                            </a-tooltip>
+                                        </div>
+                                    </a-col>
+                                </a-row>
+                            </div>
+                        </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>
+            </JTable>
+        </a-card>
+    </div>
 </template>
 <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 { message } from 'ant-design-vue';
+
+const tableRef = ref<Record<string, any>>({});
 const router = useRouter();
+const params = ref<Record<string, any>>({});
+
+let providersList = ref([]);
+
+const statusMap = new Map();
+statusMap.set('enabled', 'success');
+statusMap.set('disabled', 'error');
+
+const columns = [
+    {
+        title: '名称',
+        dataIndex: 'name',
+        key: 'name',
+        search: {
+            type: 'string',
+        },
+        // scopedSlots: true,
+    },
+    {
+        title: '网关类型',
+        dataIndex: 'provider',
+        key: 'provider',
+        search: {
+            type: 'select',
+            // options: providersList,
+            // options: getProvidersList
+            options: async () => {
+                const res = await getProviders();
+                return (res?.result || []).map((item) => ({
+                    lable: item.name,
+                    value: item.id,
+                }));
+            },
+        },
+    },
+    {
+        title: '状态',
+        dataIndex: 'state',
+        key: 'state',
+        search: {
+            type: 'select',
+            options: [
+                {
+                    label: '禁用',
+                    value: 'disabled',
+                },
+                {
+                    label: '正常',
+                    value: 'enabled',
+                },
+            ],
+        },
+        scopedSlots: true,
+    },
+    {
+        title: '说明',
+        dataIndex: 'description',
+        key: 'description',
+        search: {
+            type: 'string',
+        },
+    },
+    {
+        title: '操作',
+        key: 'action',
+        fixed: 'right',
+        width: 200,
+        scopedSlots: true,
+    },
+];
+
+const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
+    if (!data) {
+        return [];
+    }
+    return [
+        {
+            key: 'edit',
+            text: '编辑',
+            tooltip: {
+                title: '编辑',
+            },
+            icon: 'EditOutlined',
+            onClick: async () => {
+                handlEdit(data.id);
+            },
+        },
+        {
+            key: 'delete',
+            text: '删除',
+            popConfirm: {
+                title: '确认删除?',
+                okText: ' 确定',
+                cancelText: '取消',
+                onConfirm: async () => {
+                    handlDelete(data.id);
+                },
+            },
+            icon: 'DeleteOutlined',
+        },
+    ];
+};
+
+const getProvidersList = async () => {
+    const res = await getProviders();
+    providersList = res.result;
+};
+getProvidersList();
+
+const handlAdd = () => {
+    router.push('/link/accessConfig/detail/add');
+
+    // router.push('/link/certificate/detail/add/new');
+};
+
+const handlEdit = (id: string) => {
+    router.push(`/link/certificate/detail/edit/${id}`);
+};
+
+const handlDelete = async (id: string) => {
+    const res = await remove(id);
+    if (res.success) {
+        message.success('操作成功');
+        tableRef.value.reload();
+    }
+};
+
+/**
+ * 搜索
+ * @param params
+ */
+const handleSearch = (e: any) => {
+    params.value = e;
+};
 
 // const handlAdd = () => {
 //     router.push({
@@ -12,7 +332,39 @@ const router = useRouter();
 //         },
 //     });
 // };
-const handlAdd = () => {
-  router.push('/link/accessConfig/detail/add');
-}
+// const handlAdd = () => {
+//   router.push('/link/accessConfig/detail/add');
+// }
 </script>
+<style lang="less" scoped>
+.page-container {
+    background: #f0f2f5;
+    padding: 24px;
+}
+.tableCardDisabled {
+    width: 100%;
+    background: url('/images/access-config-diaabled.png') no-repeat;
+    background-size: 100% 100%;
+}
+
+.tableCardEnabled {
+    width: 100%;
+    background: url('/images/access-config-enabled.png') no-repeat;
+    background-size: 100% 100%;
+}
+
+.card-item-content {
+    min-height: 100px;
+
+    .card-item-content-box {
+        min-height: 50px;
+    }
+    .card-item-content-text {
+        color: rgba(0, 0, 0, 0.75);
+        font-size: 12px;
+        overflow: hidden; //超出的文本隐藏
+        text-overflow: ellipsis; //溢出用省略号显示
+        white-space: nowrap; //溢出不换行
+    }
+}
+</style>
diff --git a/src/views/link/Certificate/Detail/index.vue b/src/views/link/Certificate/Detail/index.vue
index 410bd10c..e8857baf 100644
--- a/src/views/link/Certificate/Detail/index.vue
+++ b/src/views/link/Certificate/Detail/index.vue
@@ -60,6 +60,7 @@
 
                     <a-form-item>
                         <a-button
+                            v-if="type !== 'view'"
                             class="form-submit"
                             html-type="submit"
                             type="primary"
@@ -97,16 +98,20 @@ import { message, Form } from 'ant-design-vue';
 import { getImage } from '@/utils/comm';
 import CertificateFile from './CertificateFile.vue';
 import type { UploadChangeParam } from 'ant-design-vue';
-import { save } from '@/api/link/certificate';
+import { save, update, queryDetail } from '@/api/link/certificate';
+import { FormDataType, TypeObjType } from '../type';
 
 const router = useRouter();
+const route = useRoute();
+const type = route.params.type as string;
+const id = route.params.id as string;
 
 const useForm = Form.useForm;
 
 const fileLoading = ref(false);
 const loading = ref(false);
 
-const formData = reactive({
+const formData = ref<FormDataType>({
     type: 'common',
     name: '',
     configs: {
@@ -137,9 +142,10 @@ const { resetFields, validate, validateInfos } = useForm(
 const onSubmit = () => {
     validate()
         .then(async (res) => {
-            const params = toRaw(formData);
+            const params = toRaw(formData.value);
             loading.value = true;
-            const response = await save(params);
+            const response =
+                type === 'edit' ? await update(params) : await save(params);
             if (response.status === 200) {
                 message.success('操作成功');
                 router.push('/link/certificate');
@@ -156,10 +162,28 @@ const handleChange = (info: UploadChangeParam) => {
     if (info.file.status === 'done') {
         message.success('上传成功！');
         const result = info.file.response?.result;
-        formData.configs.cert = result;
+        formData.value.configs.cert = result;
         fileLoading.value = false;
     }
 };
+
+const detail = async (id: string) => {
+    if (type !== 'add') {
+        loading.value = true;
+        const res = await queryDetail(id);
+        if (res.success) {
+            const result = res.result as FormDataType;
+            const type = result.type.value as TypeObjType;
+            formData.value = {
+                ...result,
+                type,
+            };
+        }
+        loading.value = false;
+    }
+};
+
+detail(id);
 </script>
 
 <style lang="less" scoped>
diff --git a/src/views/link/Certificate/index.vue b/src/views/link/Certificate/index.vue
index c289ab74..960d0ed9 100644
--- a/src/views/link/Certificate/index.vue
+++ b/src/views/link/Certificate/index.vue
@@ -1,14 +1,196 @@
 <template>
-  <a-button type="primary" @click="handlAdd">新增</a-button>
+    <div class="page-container">
+        <a-card style="margin-bottom: 20px">
+            <Search
+                :columns="columns"
+                target="search"
+                @search="handleSearch"
+            />
+        </a-card>
+        <a-card>
+            <JTable
+                ref="tableRef"
+                model="TABLE"
+                :columns="columns"
+                :request="query"
+                :defaultParams="{
+                    sorts: [{ name: 'createTime', order: 'desc' }],
+                }"
+                :params="params"
+            >
+                <template #headerTitle>
+                    <a-button type="primary" @click="handlAdd"
+                        ><plus-outlined />新增</a-button
+                    >
+                </template>
+                <template #type="slotProps">
+                    <span>{{ slotProps.type.text }}</span>
+                </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>
+        </a-card>
+    </div>
 </template>
 <script lang="ts" setup name="CertificatePage">
+import type { ActionsType } from '@/components/Table/index.vue';
+import { save, query, remove } from '@/api/link/certificate';
+import { message } from 'ant-design-vue';
 
+const tableRef = ref<Record<string, any>>({});
 const router = useRouter();
+const params = ref<Record<string, any>>({});
 
+const columns = [
+    {
+        title: '证书标准',
+        dataIndex: 'type',
+        key: 'type',
+        search: {
+            type: 'select',
+            options: [
+                {
+                    label: '证书标准',
+                    value: 'common',
+                },
+            ],
+        },
+        scopedSlots: true,
+    },
+    {
+        title: '证书名称',
+        dataIndex: 'name',
+        key: 'name',
+        search: {
+            type: 'string',
+        },
+    },
+    {
+        title: '说明',
+        dataIndex: 'description',
+        key: 'description',
+        search: {
+            type: 'string',
+        },
+    },
+    {
+        title: '操作',
+        key: 'action',
+        fixed: 'right',
+        width: 200,
+        scopedSlots: true,
+    },
+];
+
+const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
+    if (!data) {
+        return [];
+    }
+    return [
+        {
+            key: 'eye',
+            text: '查看',
+            tooltip: {
+                title: '查看',
+            },
+            icon: 'EyeOutlined',
+            onClick: async () => {
+                handlEye(data.id);
+            },
+        },
+        {
+            key: 'edit',
+            text: '编辑',
+            tooltip: {
+                title: '编辑',
+            },
+            icon: 'EditOutlined',
+            onClick: async () => {
+                handlEdit(data.id);
+            },
+        },
+        {
+            key: 'delete',
+            text: '删除',
+            popConfirm: {
+                title: '确认删除?',
+                okText: ' 确定',
+                cancelText: '取消',
+                onConfirm: async () => {
+                    handlDelete(data.id);
+                },
+            },
+            icon: 'DeleteOutlined',
+        },
+    ];
+};
 
 const handlAdd = () => {
-  router.push('/link/certificate/detail/add');
-  
-}
+    router.push('/link/certificate/detail/add/new');
+};
 
+const handlEye = (id: string) => {
+    router.push(`/link/certificate/detail/view/${id}`);
+};
+
+const handlEdit = (id: string) => {
+    router.push(`/link/certificate/detail/edit/${id}`);
+};
+
+const handlDelete = async (id: string) => {
+    const res = await remove(id);
+    if (res.success) {
+        message.success('操作成功');
+        tableRef.value.reload();
+    }
+};
+
+/**
+ * 搜索
+ * @param params
+ */
+const handleSearch = (e: any) => {
+    console.log(1211, e);
+
+    params.value = e;
+};
 </script>
+
+<style lang="less" scoped>
+.page-container {
+    background: #f0f2f5;
+    padding: 24px;
+}
+</style>
diff --git a/src/views/link/Certificate/type.d.ts b/src/views/link/Certificate/type.d.ts
new file mode 100644
index 00000000..eb38e3e6
--- /dev/null
+++ b/src/views/link/Certificate/type.d.ts
@@ -0,0 +1,19 @@
+
+export interface TypeObjType = {
+    text: string;
+    value: string;
+};
+export type FormDataType = {
+    description: string;
+    name: string;
+    type: string | TypeObjType;
+    configs: {
+        cert: string;
+        key: string;
+    };
+    id?: string;
+    format?: string;
+    mode?: object;
+    creatorId?: string;
+    createTime?: number;
+};