From 6a69661271a35dc0615b12fc572bc0df7b4de026 Mon Sep 17 00:00:00 2001
From: jackhoo_98 <jackhoo_98@foxmail.com>
Date: Tue, 31 Jan 2023 18:18:53 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=AE=BE=E5=A4=87=E6=8E=A5=E5=85=A5?=
 =?UTF-8?q?=E7=BD=91=E5=85=B3=20=E5=8D=A1=E7=89=87=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E5=8F=8A=E5=9F=BA=E6=9C=AC=E6=B5=81=E7=A8=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/link/accessConfig.ts                  |   2 +-
 src/router/menu.ts                            |   2 +-
 src/views/link/AccessConfig/Detail/index.vue  | 164 +++++-----
 .../AccessConfig/components/Channel/index.vue |  28 +-
 .../AccessConfig/components/Cloud/Ctwing.vue  |  44 ++-
 .../AccessConfig/components/Cloud/OneNet.vue  |  52 ++--
 .../AccessConfig/components/Cloud/index.vue   |   3 -
 .../AccessConfig/components/Edge/index.vue    |  45 ++-
 .../AccessConfig/components/Media/GB28181.vue |  55 +++-
 .../AccessConfig/components/Media/index.vue   |  30 +-
 .../link/AccessConfig/components/Network.vue  | 280 ++++++++++++++++--
 src/views/link/AccessConfig/index.vue         | 112 ++++---
 src/views/link/Certificate/Detail/index.vue   |   8 +-
 13 files changed, 609 insertions(+), 216 deletions(-)

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/router/menu.ts b/src/router/menu.ts
index 234bcabf..7914c1bb 100644
--- a/src/router/menu.ts
+++ b/src/router/menu.ts
@@ -95,7 +95,7 @@ export default [
         component: () => import('@/views/link/AccessConfig/index.vue')
     },
     {
-        path: '/link/accessConfig/detail/add',
+        path: '/link/accessConfig/detail/:type/:id',
         component: () => import('@/views/link/AccessConfig/Detail/index.vue')
     },
     // system 系统管理
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) {