From ab8636c7fd7f8aebb0475c8322ebbe9f28dfd9ef Mon Sep 17 00:00:00 2001
From: jackhoo_98 <jackhoo_98@foxmail.com>
Date: Thu, 12 Jan 2023 18:12:52 +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=20=E8=87=AA=E5=AE=9A=E4=B9=89=E8=AE=BE?=
 =?UTF-8?q?=E5=A4=87=E6=8E=A5=E5=85=A5=20=E4=BA=8C=E4=B8=89=E6=AD=A5?=
 =?UTF-8?q?=E9=83=A8=E5=88=86=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/link/AccessConfig/Detail/index.vue  |  79 ++-
 .../components/AccessCard/index.vue           | 162 +++---
 .../AccessConfig/components/Media/index.vue   |  30 ++
 .../link/AccessConfig/components/Network.vue  | 485 ++++++++++--------
 .../components/Provider/index.vue             |  60 ++-
 5 files changed, 507 insertions(+), 309 deletions(-)
 create mode 100644 src/views/link/AccessConfig/components/Media/index.vue

diff --git a/src/views/link/AccessConfig/Detail/index.vue b/src/views/link/AccessConfig/Detail/index.vue
index 97c13e2e..5c9b4546 100644
--- a/src/views/link/AccessConfig/Detail/index.vue
+++ b/src/views/link/AccessConfig/Detail/index.vue
@@ -9,7 +9,8 @@
             </div>
             <div v-else>
                 <div v-if="!id"><a @click="goBack">返回</a></div>
-                <AccessNetwork :provider="provider" :data="data" />
+                <AccessNetwork v-if="showType==='network'" :provider="provider" :data="data" />
+                <Media v-if="showType==='media'" :provider="provider" :data="data" />
             </div>
         </a-card>
     </a-spin>
@@ -17,10 +18,11 @@
 
 <script lang="ts" setup name="AccessConfigDetail">
 import { getImage } from '@/utils/comm';
-import TitleComponent from '@/components/TitleComponent/index.vue';
 import AccessNetwork from '../components/Network.vue';
 import Provider from '../components/Provider/index.vue';
 import { getProviders, detail } from '@/api/link/accessConfig';
+import Media from '../components/Media/index.vue';
+
 
 // const router = useRouter();
 const route = useRoute();
@@ -32,10 +34,14 @@ const type = ref(false);
 const loading = ref(true);
 const provider = ref({});
 const data = ref({});
+const showType = ref('')
 
-const goProviders = (param: object) => {
+const goProviders = (param: object) => {  
+    showType.value = param.type
     provider.value = param;
     type.value = false;
+    console.log(1123,showType.value,param);
+    
 };
 
 const goBack = () => {
@@ -46,10 +52,69 @@ const goBack = () => {
 const queryProviders = async () => {
     const resp = await getProviders();
     if (resp.status === 200) {
-        dataSource.value = resp.result.filter(
-            (item) =>
-                item.channel === 'network' || item.channel === 'child-device',
-        );
+        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
     }
 };
 
diff --git a/src/views/link/AccessConfig/components/AccessCard/index.vue b/src/views/link/AccessConfig/components/AccessCard/index.vue
index a21d5585..66e67d13 100644
--- a/src/views/link/AccessConfig/components/AccessCard/index.vue
+++ b/src/views/link/AccessConfig/components/AccessCard/index.vue
@@ -1,86 +1,106 @@
 <template>
-  <a-card hoverable :class="['card-render', checked === data.id ? 'checked' : '']" @click="checkedChange(data.id)">
-    <div class="title">
-      <a-tooltip placement="topLeft" :title="data.name">{{ data.name }}</a-tooltip>
-    </div>
-    <slot name="other"></slot>
-    <div class="desc">
-      <a-tooltip placement="topLeft" :title="data.description">{{ data.description }}</a-tooltip>
-    </div>
-    <div class="checked-icon">
-      <div><a-icon type="check" /></div>
-    </div>
-  </a-card>
+    <a-card
+        hoverable
+        :class="['card-render', checked === data.id ? 'checked' : '']"
+        @click="checkedChange(data.id)"
+    >
+        <div class="title">
+            <a-tooltip placement="topLeft" :title="data.name">{{
+                data.name
+            }}</a-tooltip>
+        </div>
+        <slot name="other"></slot>
+        <div class="desc">
+            <a-tooltip placement="topLeft" :title="data.description">{{
+                data.description
+            }}</a-tooltip>
+        </div>
+        <div class="checked-icon">
+            <div><a-icon type="check" /></div>
+        </div>
+    </a-card>
 </template>
 
-<script>
-export default {
-  name: "AccessCard",
-  props: ['data', 'checked'],
-  methods: {
-    checkedChange(id){
-      this.$emit('checkedChange', id)
-    }
-  }
-};
+<script lang="ts" setup name="AccessCard">
+
+
+const emit = defineEmits(['checkedChange']);
+
+const props = defineProps({
+    checked: {
+        type: Array,
+        default: () => [],
+    },
+    data: {
+        type: Object,
+        default: () => {},
+    },
+});
+console.log(1112,props);
+
+const checkedChange=(id:string)=>{
+  emit('checkedChange', id);
+}
+
+
 </script>
 
 <style lang="less" scoped>
 .card-render {
-  width: 100%;
-  overflow: hidden;
-  background: url("/public/images/access/access.png") no-repeat;
-  background-size: 100% 100%;
-  min-height: 105px;
-
-  .title {
-    width: calc(100% - 88px);
-    overflow: hidden;
-    font-weight: 800;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  .desc {
     width: 100%;
-    margin-top: 10px;
-    color: rgba(0, 0, 0, 0.55);
-    font-weight: 400;
-    font-size: 13px;
     overflow: hidden;
-     white-space: nowrap;
-    text-overflow: ellipsis;
-  }
+    background: url('/public/images/access.png') no-repeat;
+    background-size: 100% 100%;
+    min-height: 105px;
 
-  .checked-icon {
-    position: absolute;
-    right: -22px;
-    bottom: -22px;
-    z-index: 2;
-    display: none;
-    width: 44px;
-    height: 44px;
-    color: #fff;
-    background-color: red;
-    background-color: #2f54eb;
-    transform: rotate(-45deg);
-
-    > div {
-      position: relative;
-      height: 100%;
-      transform: rotate(45deg);
-      font-size: 12px;
-      padding: 4px 0 0 6px;
+    .title {
+        width: calc(100% - 88px);
+        overflow: hidden;
+        font-weight: 800;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+
+    .desc {
+        width: 100%;
+        margin-top: 10px;
+        color: rgba(0, 0, 0, 0.55);
+        font-weight: 400;
+        font-size: 13px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
     }
-  }
-  &.checked {
-    position: relative;
-    color: #2f54eb;
-    border-color: #2f54eb;
 
     .checked-icon {
-      display: block;
+        position: absolute;
+        right: -22px;
+        bottom: -22px;
+        z-index: 2;
+        display: none;
+        width: 44px;
+        height: 44px;
+        color: #fff;
+        background-color: red;
+        background-color: #2f54eb;
+        transform: rotate(-45deg);
+
+        > div {
+            position: relative;
+            height: 100%;
+            transform: rotate(45deg);
+            font-size: 12px;
+            padding: 4px 0 0 6px;
+        }
+    }
+    &.checked {
+        position: relative;
+        color: #2f54eb;
+        border-color: #2f54eb;
+
+        .checked-icon {
+            display: block;
+        }
     }
-  }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/link/AccessConfig/components/Media/index.vue b/src/views/link/AccessConfig/components/Media/index.vue
new file mode 100644
index 00000000..75957aea
--- /dev/null
+++ b/src/views/link/AccessConfig/components/Media/index.vue
@@ -0,0 +1,30 @@
+<template>
+  <div style="margin-top: 10px">
+111
+  </div>
+</template>
+
+<script lang="ts" setup name="AccessMedia">
+
+
+const props = defineProps({
+    provider: {
+        type: Object,
+        default: () => {},
+    },
+    data: {
+        type: Object,
+        default: () => {},
+    },
+});
+
+const channel = ref(props.provider.channel)
+
+console.log(211,props);
+
+
+</script>
+
+<style lang="less" scoped>
+
+</style>
diff --git a/src/views/link/AccessConfig/components/Network.vue b/src/views/link/AccessConfig/components/Network.vue
index 8bb9b232..163d4813 100644
--- a/src/views/link/AccessConfig/components/Network.vue
+++ b/src/views/link/AccessConfig/components/Network.vue
@@ -35,18 +35,34 @@
                                         : descriptionList[provider.id],
                                 }"
                             >
-                                <div slot="other" class="other">
-                                    <a-tooltip placement="topLeft">
-                                        <div
-                                            slot="title"
-                                            v-if="
-                                                (item.addresses || []).length >
-                                                1
-                                            "
-                                        >
+                                <template #other>
+                                    <div class="other">
+                                        <a-tooltip placement="topLeft">
                                             <div
-                                                v-for="i in item.addresses ||
-                                                []"
+                                                v-if="
+                                                    (item.addresses || [])
+                                                        .length > 1
+                                                "
+                                            >
+                                                <div
+                                                    v-for="i in item.addresses ||
+                                                    []"
+                                                    :key="i.address"
+                                                    class="item"
+                                                >
+                                                    <a-badge
+                                                        :color="
+                                                            i.health === -1
+                                                                ? 'red'
+                                                                : 'green'
+                                                        "
+                                                    />{{ i.address }}
+                                                </div>
+                                            </div>
+                                            <div
+                                                v-for="i in (
+                                                    item.addresses || []
+                                                ).slice(0, 1)"
                                                 :key="i.address"
                                                 class="item"
                                             >
@@ -56,34 +72,19 @@
                                                             ? 'red'
                                                             : 'green'
                                                     "
-                                                />{{ i.address }}
+                                                    :text="i.address"
+                                                />
+                                                <span
+                                                    v-if="
+                                                        (item.addresses || [])
+                                                            .length > 1
+                                                    "
+                                                    >...</span
+                                                >
                                             </div>
-                                        </div>
-                                        <div
-                                            v-for="i in (
-                                                item.addresses || []
-                                            ).slice(0, 1)"
-                                            :key="i.address"
-                                            class="item"
-                                        >
-                                            <a-badge
-                                                :color="
-                                                    i.health === -1
-                                                        ? 'red'
-                                                        : 'green'
-                                                "
-                                                :text="i.address"
-                                            />
-                                            <span
-                                                v-if="
-                                                    (item.addresses || [])
-                                                        .length > 1
-                                                "
-                                                >...</span
-                                            >
-                                        </div>
-                                    </a-tooltip>
-                                </div>
+                                        </a-tooltip>
+                                    </div>
+                                </template>
                             </access-card>
                         </a-col>
                     </a-row>
@@ -130,37 +131,31 @@
                         <a-col :span="12">
                             <title-component data="基本信息" />
                             <div>
-                                <a-form :form="form" layout="vertical">
-                                    <a-form-item label="名称">
+                                <a-form
+                                    ref="formRef"
+                                    :model="form"
+                                    layout="vertical"
+                                >
+                                    <a-form-item
+                                        label="名称"
+                                        v-bind="validateInfos.name"
+                                    >
                                         <a-input
+                                            v-model:value="form.name"
                                             allowClear
                                             placeholder="请输入名称"
-                                            v-decorator="[
-                                                'name',
-                                                {
-                                                    initialValue: data.name,
-                                                    rules: [
-                                                        {
-                                                            required: true,
-                                                            message:
-                                                                '请输入名称!',
-                                                        },
-                                                    ],
-                                                },
-                                            ]"
                                         />
                                     </a-form-item>
-                                    <a-form-item label="说明">
+                                    <a-form-item
+                                        label="说明"
+                                        v-bind="validateInfos.description"
+                                    >
                                         <a-textarea
                                             placeholder="请输入说明"
                                             :rows="4"
-                                            v-decorator="[
-                                                'description',
-                                                {
-                                                    initialValue:
-                                                        data.description,
-                                                },
-                                            ]"
+                                            v-model:value="form.description"
+                                            show-count
+                                            :maxlength="200"
                                         />
                                     </a-form-item>
                                 </a-form>
@@ -259,7 +254,7 @@
                                         :scroll="{ y: 300 }"
                                     >
                                         <template
-                                            slot="stream"
+                                            #stream
                                             slot-scope="text, record"
                                         >
                                             <span
@@ -292,7 +287,7 @@
             >
                 下一步
             </a-button>
-            <a-button v-if="current === 2" type="primary" @click="save">
+            <a-button v-if="current === 2" type="primary" @click="saveData">
                 保存
             </a-button>
             <a-button v-if="current > 0" style="margin-left: 8px" @click="prev">
@@ -317,8 +312,61 @@ import {
     ProtocolMapping,
 } from '../Detail/data';
 import AccessCard from './AccessCard/index.vue';
-import TitleComponent from '@/components/TitleComponent/index.vue';
 import { message, Form } from 'ant-design-vue';
+import type { FormInstance } from 'ant-design-vue';
+
+//测试数据1
+const resultList1 = [
+    {
+        id: '1610466717670780928',
+        name: '官方协议',
+    },
+    {
+        id: '1610205217785524224',
+        name: 'demo协议',
+    },
+    {
+        id: '1610204985806958592',
+        name: '水压协议',
+    },
+    {
+        id: '1605459961693745152',
+        name: '测试设备诊断日志显示',
+    },
+    {
+        id: '1582302200020783104',
+        name: 'demo',
+    },
+    {
+        id: '1581839391887794176',
+        name: '海康闸机协议',
+    },
+    {
+        id: '1567062365030637568',
+        name: '协议20220906160914',
+    },
+    {
+        id: '1561650927208628224',
+        name: 'local',
+    },
+];
+
+//测试数据2
+// const result2 = {
+//     id: 'UDP',
+//     name: 'UDP',
+//     features: [],
+//     routes: [],
+//     metadata: '',
+// };
+const result2 = {
+"id": "MQTT",
+"name": "MQTT",
+"features": [],
+"routes": [],
+"document": "# MQTT认证说明\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": "{\"functions\":[],\"name\":\"test\",\"description\":\"测试用\",\"id\":\"test\",\"properties\":[{\"valueType\":{\"round\":\"HALF_UP\",\"type\":\"double\"},\"name\":\"温度\",\"id\":\"t\"},{\"valueType\":{\"round\":\"HALF_UP\",\"type\":\"int\"},\"name\":\"状态\",\"id\":\"state\"}],\"events\":[],\"tags\":[]}"
+}
 
 function generateUUID() {
     var d = new Date().getTime();
@@ -349,7 +397,8 @@ const props = defineProps({
     },
 });
 
-
+const formRef = ref<FormInstance>();
+const useForm = Form.useForm;
 
 const current = ref(0);
 const stepCurrent = ref(0);
@@ -362,13 +411,21 @@ const procotolCurrent = ref('');
 let config = ref({});
 let columnsMQTT = ref([]);
 const form = reactive({
-    name: 'access',
+    name: '',
     description: '',
 });
 
+const { resetFields, validate, validateInfos } = useForm(
+    form,
+    reactive({
+        name: [
+            { required: true, message: '请输入证书名称', trigger: 'blur' },
+            { max: 64, message: '最多可输入64个字符' },
+        ],
+    }),
+);
+
 const queryNetworkList = async (id: string, params: object, data = {}) => {
-  console.log('queryNetworkList',NetworkTypeMapping.get(id), data, params);
-  
     const resp = await getNetworkList(NetworkTypeMapping.get(id), data, params);
     if (resp.status === 200) {
         networkList.value = resp.result;
@@ -377,15 +434,19 @@ const queryNetworkList = async (id: string, params: object, data = {}) => {
 
 // const  queryProcotolList=async(id:string, params:object) =>{
 const queryProcotolList = async (id: string, params = {}) => {
-    const resp = await getProtocolList(ProtocolMapping.get(id), {
-        ...params,
-        'sorts[0].name': 'createTime',
-        'sorts[0].order': 'desc',
-    });
-    if (resp.status === 200) {
-        procotolList.value = resp.result;
-        allProcotolList.value = resp.result;
-    }
+    // const resp = await getProtocolList(ProtocolMapping.get(id), {
+    //     ...params,
+    //     'sorts[0].name': 'createTime',
+    //     'sorts[0].order': 'desc',
+    // });
+    // if (resp.status === 200) {
+    //     procotolList.value = resp.result;
+    //     allProcotolList.value = resp.result;
+    // }
+
+    //使用测试数据1
+    procotolList.value = resultList1;
+    allProcotolList.value = resultList1;
 };
 
 const addNetwork = () => {
@@ -424,21 +485,6 @@ const checkedChange = (id: string) => {
 };
 
 const networkSearch = (value: string) => {
-  console.log('networkSearch',
-        props.provider.id,
-        {
-            include: networkCurrent.value || '',
-        },
-        {
-            terms: [
-                {
-                    column: 'name$LIKE',
-                    value: `%${value}%`,
-                },
-            ],
-        },
-    );
-  
     queryNetworkList(
         props.provider.id,
         {
@@ -475,31 +521,28 @@ const procotolSearch = (value: string) => {
 };
 
 const saveData = () => {
-    form.validateFields(async (err, values) => {
-        if (!err) {
+    validate()
+        .then(async (values) => {
             let resp = undefined;
+            let params = {
+                ...props.data,
+                ...values,
+                protocol: procotolCurrent.value,
+                channel: 'network', // 网络组件
+                channelId: networkCurrent.value,
+            };
             if (props.data && props.data.id) {
-                resp = await update({
-                    ...props.data,
-                    name: values.name,
-                    description: values.description,
-                    protocol: procotolCurrent.value,
-                    channel: 'network', // 网络组件
-                    channelId: networkCurrent.value,
-                });
+                resp = await update(params);
             } else {
-                resp = await save({
-                    name: values.name,
-                    description: values.description,
+                params = {
+                    ...params,
                     provider: props.provider.id,
-                    protocol: procotolCurrent.value,
                     transport:
                         props.provider?.id === 'child-device'
                             ? 'Gateway'
                             : ProtocolMapping.get(props.provider.id),
-                    channel: 'network', // 网络组件
-                    channelId: networkCurrent.value,
-                });
+                };
+                resp = await save(params);
             }
             if (resp.status === 200) {
                 message.success('操作成功！');
@@ -511,88 +554,139 @@ const saveData = () => {
                     // this.$store.dispatch('jumpPathByKey', { key: MenuKeys['Link/AccessConfig'] })
                 }
             }
-        }
-    });
+        })
+        .catch((err) => {});
 };
+
 const next = async () => {
     if (current.value === 0) {
         if (!networkCurrent.value) {
             message.error('请选择网络组件！');
         } else {
             queryProcotolList(props.provider.id);
-            current.value -= current.value;
+            current.value = current.value + 1;
         }
     } else if (current.value === 1) {
         if (!procotolCurrent.value) {
             message.error('请选择消息协议！');
         } else {
-            const resp =
-                props.provider.channel !== 'child-device'
-                    ? await getConfigView(
-                          procotolCurrent.value,
-                          ProtocolMapping.get(props.provider.id),
-                      )
-                    : await getChildConfigView(procotolCurrent.value);
-            if (resp.status === 200) {
-                config.value = resp.result;
-                current.value += current.value;
-                columnsMQTT = [
-                    {
-                        title: '分组',
-                        dataIndex: 'group',
-                        key: 'group',
-                        ellipsis: true,
-                        align: 'center',
-                        width: 100,
-                        customRender: (value, row, index) => {
-                            const obj = {
-                                children: value,
-                                attrs: {},
-                            };
-                            const list = (config && config.routes) || [];
-                            const arr = list.filter((res) => {
-                                return res.group == row.group;
-                            });
-                            if (
-                                index == 0 ||
-                                list[index - 1].group !== row.group
-                            ) {
-                                obj.attrs.rowSpan = arr.length;
-                            } else {
-                                obj.attrs.rowSpan = 0;
-                            }
-                            return obj;
-                        },
+            //使用测试数据2
+            config.value = result2;
+            current.value = current.value + 1;
+            columnsMQTT = [
+                {
+                    title: '分组',
+                    dataIndex: 'group',
+                    key: 'group',
+                    ellipsis: true,
+                    align: 'center',
+                    width: 100,
+                    customRender: (value, row, index) => {
+                        const obj = {
+                            children: value,
+                            attrs: {},
+                        };
+                        const list = (config && config.routes) || [];
+                        const arr = list.filter((res) => {
+                            return res.group == row.group;
+                        });
+                        if (index == 0 || list[index - 1].group !== row.group) {
+                            obj.attrs.rowSpan = arr.length;
+                        } else {
+                            obj.attrs.rowSpan = 0;
+                        }
+                        return obj;
                     },
-                    {
-                        title: 'topic',
-                        dataIndex: 'topic',
-                        key: 'topic',
-                        ellipsis: true,
-                    },
-                    {
-                        title: '上下行',
-                        dataIndex: 'stream',
-                        key: 'stream',
-                        ellipsis: true,
-                        align: 'center',
-                        width: 100,
-                        scopedSlots: { customRender: 'stream' },
-                    },
-                    {
-                        title: '说明',
-                        dataIndex: 'description',
-                        key: 'description',
-                        ellipsis: true,
-                    },
-                ];
-            }
+                },
+                {
+                    title: 'topic',
+                    dataIndex: 'topic',
+                    key: 'topic',
+                    ellipsis: true,
+                },
+                {
+                    title: '上下行',
+                    dataIndex: 'stream',
+                    key: 'stream',
+                    ellipsis: true,
+                    align: 'center',
+                    width: 100,
+                    scopedSlots: { customRender: 'stream' },
+                },
+                {
+                    title: '说明',
+                    dataIndex: 'description',
+                    key: 'description',
+                    ellipsis: true,
+                },
+            ];
+
+            // const resp =
+            //     props.provider.channel !== 'child-device'
+            //         ? await getConfigView(
+            //               procotolCurrent.value,
+            //               ProtocolMapping.get(props.provider.id),
+            //           )
+            //         : await getChildConfigView(procotolCurrent.value);
+            // if (resp.status === 200) {
+            //     config.value = resp.result;
+            //     current.value = current.value + 1;
+            //     columnsMQTT = [
+            //         {
+            //             title: '分组',
+            //             dataIndex: 'group',
+            //             key: 'group',
+            //             ellipsis: true,
+            //             align: 'center',
+            //             width: 100,
+            //             customRender: (value, row, index) => {
+            //                 const obj = {
+            //                     children: value,
+            //                     attrs: {},
+            //                 };
+            //                 const list = (config && config.routes) || [];
+            //                 const arr = list.filter((res) => {
+            //                     return res.group == row.group;
+            //                 });
+            //                 if (
+            //                     index == 0 ||
+            //                     list[index - 1].group !== row.group
+            //                 ) {
+            //                     obj.attrs.rowSpan = arr.length;
+            //                 } else {
+            //                     obj.attrs.rowSpan = 0;
+            //                 }
+            //                 return obj;
+            //             },
+            //         },
+            //         {
+            //             title: 'topic',
+            //             dataIndex: 'topic',
+            //             key: 'topic',
+            //             ellipsis: true,
+            //         },
+            //         {
+            //             title: '上下行',
+            //             dataIndex: 'stream',
+            //             key: 'stream',
+            //             ellipsis: true,
+            //             align: 'center',
+            //             width: 100,
+            //             scopedSlots: { customRender: 'stream' },
+            //         },
+            //         {
+            //             title: '说明',
+            //             dataIndex: 'description',
+            //             key: 'description',
+            //             ellipsis: true,
+            //         },
+            //     ];
+            // }
         }
     }
 };
 const prev = () => {
-    const currentValue = current.value;
-    current.value -= currentValue;
+    current.value = current.value - 1;
 };
 
 onMounted(() => {
@@ -601,10 +695,6 @@ onMounted(() => {
             procotolCurrent.value = props.data.protocol;
             current.value = 0;
             networkCurrent.value = props.data.channelId;
-            console.log(11111111,props.provider.id, {
-                include: networkCurrent.value,
-            });
-            
             queryNetworkList(props.provider.id, {
                 include: networkCurrent.value,
             });
@@ -618,18 +708,12 @@ onMounted(() => {
     } else {
         if (props.provider?.id) {
             if (props.provider.channel !== 'child-device') {
-                console.log(3333333, props.provider.id, {
-                    include: '',
-                });
-
                 queryNetworkList(props.provider.id, {
                     include: '',
                 });
                 steps.value = ['网络组件', '消息协议', '完成'];
                 current.value = 0;
             } else {
-                console.log(444444,props.provider.id);
-
                 steps.value = ['消息协议', '完成'];
                 current.value = 1;
                 queryProcotolList(props.provider.id);
@@ -638,25 +722,20 @@ onMounted(() => {
     }
 });
 
-// watch(
-//     () => props.modelValue,
-//     (v) => {
-//         keystoreBase64.value = v;
-//     },
-//     {
-//         deep: true,
-//         immediate: true,
-//     },
-// );
-// watch: {
-//     current(val) {
-//       if (this.provider.channel !== 'child-device') {
-//         this.stepCurrent = val
-//       } else {
-//         this.stepCurrent = val - 1
-//       }
-//     },
-//   },
+watch(
+    current,
+    (v) => {
+        if (props.provider.channel !== 'child-device') {
+            stepCurrent.value = v;
+        } else {
+            stepCurrent.value = v - 1;
+        }
+    },
+    {
+        deep: true,
+        immediate: true,
+    },
+);
 </script>
 
 <style lang="less" scoped>
diff --git a/src/views/link/AccessConfig/components/Provider/index.vue b/src/views/link/AccessConfig/components/Provider/index.vue
index d73dad78..3412f3f2 100644
--- a/src/views/link/AccessConfig/components/Provider/index.vue
+++ b/src/views/link/AccessConfig/components/Provider/index.vue
@@ -1,34 +1,36 @@
 <template>
-    <TitleComponent data="自定义设备接入"></TitleComponent>
-    <div>
-        <a-row :gutter="[24, 24]">
-            <a-col :span="12" v-for="item in dataSource" :key="item.id">
-                <div class="provider">
-                    <div class="box">
-                        <div class="left">
-                            <div class="images">
-                                <img :src="backMap.get(item.id)" />
-                            </div>
-                            <div class="context">
-                                <div class="title">
-                                    {{ item.name }}
+    <div v-for="items in dataSource" :key="items.type">
+        <a-card  class="card-items">
+            <TitleComponent :data="items.title"></TitleComponent>
+            <a-row :gutter="[24, 24]">
+                <a-col :span="12" v-for="item in items.list" :key="item.id">
+                    <div class="provider">
+                        <div class="box">
+                            <div class="left">
+                                <div class="images">
+                                    <img :src="backMap.get(item.id)" />
                                 </div>
-                                <div class="desc">
-                                    <a-tooltip :title="item.description">
-                                        {{ item.description || '' }}
-                                    </a-tooltip>
+                                <div class="context">
+                                    <div class="title">
+                                        {{ item.name }}
+                                    </div>
+                                    <div class="desc">
+                                        <a-tooltip :title="item.description">
+                                            {{ item.description || '' }}
+                                        </a-tooltip>
+                                    </div>
                                 </div>
                             </div>
-                        </div>
-                        <div class="right">
-                            <a-button type="primary" @click="click(item)"
-                                >接入</a-button
-                            >
+                            <div class="right">
+                                <a-button type="primary" @click="click(item)"
+                                    >接入</a-button
+                                >
+                            </div>
                         </div>
                     </div>
-                </div>
-            </a-col>
-        </a-row>
+                </a-col>
+            </a-row>
+        </a-card>
     </div>
 </template>
 
@@ -38,8 +40,8 @@ import { getImage } from '@/utils/comm';
 
 const props = defineProps({
     dataSource: {
-        type: Array,
-        default: () => [],
+        type: Object,
+        default: () => {},
     },
 });
 
@@ -66,10 +68,12 @@ backMap.set('official-edge-gateway', getImage('/access/edge.png'));
 const click = (value: object) => {
     emit('onClick', value);
 };
-
 </script>
 
 <style lang="less" scoped>
+.card-items{
+    margin-bottom: 24px;
+}
 .provider {
     position: relative;
     width: 100%;