feat: 设备接入网关 自定义设备接入基本Card样式

src/router/menu.ts

@@ -34,6 +34,7 @@ export default [
     },
     // end: 测试用, 可删除
 
+    // link 运维管理
     {
         path: '/link/log',
         component: () => import('@/views/link/Log/index.vue')
@@ -46,4 +47,8 @@ export default [
         path: '/link/certificate/detail/add',
         component: () => import('@/views/link/Certificate/Detail/index.vue')
     },
+    {
+        path: '/link/accessConfig/detail/add',
+        component: () => import('@/views/link/AccessConfig/Detail/index.vue')
+    },
 ]

src/views/link/AccessConfig/Detail/data.ts

@@ -0,0 +1,99 @@
+const MetworkTypeMapping = new Map();
+MetworkTypeMapping.set('websocket-server', 'WEB_SOCKET_SERVER');
+MetworkTypeMapping.set('http-server-gateway', 'HTTP_SERVER');
+MetworkTypeMapping.set('udp-device-gateway', 'UDP');
+MetworkTypeMapping.set('coap-server-gateway', 'COAP_SERVER');
+MetworkTypeMapping.set('mqtt-client-gateway', 'MQTT_CLIENT');
+MetworkTypeMapping.set('mqtt-server-gateway', 'MQTT_SERVER');
+MetworkTypeMapping.set('tcp-server-gateway', 'TCP_SERVER');
+
+const ProcotoleMapping = new Map();
+ProcotoleMapping.set('websocket-server', 'WebSocket');
+ProcotoleMapping.set('http-server-gateway', 'HTTP');
+ProcotoleMapping.set('udp-device-gateway', 'UDP');
+ProcotoleMapping.set('coap-server-gateway', 'CoAP');
+ProcotoleMapping.set('mqtt-client-gateway', 'MQTT');
+ProcotoleMapping.set('mqtt-server-gateway', 'MQTT');
+ProcotoleMapping.set('tcp-server-gateway', 'TCP');
+ProcotoleMapping.set('child-device', '');
+
+const descriptionList = {
+    'udp-device-gateway':
+        'UDP可以让设备无需建立连接就可以与平台传输数据。在允许一定程度丢包的情况下，提供轻量化且简单的连接。',
+    'tcp-server-gateway':
+        'TCP服务是一种面向连接的、可靠的、基于字节流的传输层通信协议。设备可通过TCP服务与平台进行长链接，实时更新状态并发送消息。可自定义多种粘拆包规则，处理传输过程中可能发生的粘拆包问题。',
+    'websocket-server':
+        'WebSocket是一种在单个TCP连接上进行全双工通信的协议，允许服务端主动向客户端推送数据。设备通过WebSocket服务与平台进行长链接，实时更新状态并发送消息，且可以发布订阅消息',
+    'mqtt-client-gateway':
+        'MQTT是ISO 标准下基于发布/订阅范式的消息协议，具有轻量、简单、开放和易于实现的特点。平台使用指定的ID接入其他远程平台，订阅消息。也可添加用户名和密码校验。可设置最大消息长度。可统一设置共享的订阅前缀。',
+    'http-server-gateway':
+        'HTTP服务是一个简单的请求-响应的基于TCP的无状态协议。设备通过HTTP服务与平台进行灵活的短链接通信，仅支持设备和平台之间单对单的请求-响应模式',
+    'mqtt-server-gateway':
+        'MQTT是ISO 标准下基于发布/订阅范式的消息协议，具有轻量、简单、开放和易于实现的特点。提供MQTT的服务端，以供设备以长链接的方式接入平台。设备使用唯一的ID，也可添加用户名和密码校验。可设置最大消息长度。',
+    'coap-server-gateway':
+        'CoAP是针对只有少量的内存空间和有限的计算能力提供的一种基于UDP的协议。便于低功耗或网络受限的设备与平台通信，仅支持设备和平台之间单对单的请求-响应模式。',
+};
+
+const columnsMQTT = [
+    {
+        title: '分组',
+        dataIndex: 'group',
+        key: 'group',
+        ellipsis: true,
+        align: 'center',
+        width: 100,
+        scopedSlots: { customRender: 'group' },
+    },
+    {
+        title: 'topic',
+        dataIndex: 'topic',
+        key: 'topic',
+        scopedSlots: { customRender: 'topic' },
+    },
+    {
+        title: '上下行',
+        dataIndex: 'stream',
+        key: 'stream',
+        ellipsis: true,
+        align: 'center',
+        width: 100,
+        scopedSlots: { customRender: 'stream' },
+    },
+    {
+        title: '说明',
+        dataIndex: 'description',
+        key: 'description',
+        scopedSlots: { customRender: 'description' },
+    },
+]
+
+const columnsHTTP = [
+    {
+        title: '分组',
+        dataIndex: 'group',
+        key: 'group',
+        ellipsis: true,
+        width: 100,
+        scopedSlots: { customRender: 'group' },
+      },
+      {
+        title: '地址',
+        dataIndex: 'address',
+        key: 'address',
+        scopedSlots: { customRender: 'address' },
+      },
+      {
+        title: '示例',
+        dataIndex: 'example',
+        key: 'example',
+        scopedSlots: { customRender: 'example' },
+      },
+      {
+        title: '说明',
+        dataIndex: 'description',
+        key: 'description',
+        scopedSlots: { customRender: 'description' }
+      },
+]
+
+export { MetworkTypeMapping, ProcotoleMapping, descriptionList, columnsMQTT, columnsHTTP };

src/views/link/AccessConfig/Detail/index.vue

@@ -0,0 +1,135 @@
+<template>
+    <a-card :bordered="false">
+        <TitleComponent data="自定义设备接入"></TitleComponent>
+        <div>
+            <a-row :gutter="[24, 24]">
+                <a-col :span="12" v-for="item in items" :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>
+                                    <div class="desc">
+                                        <a-tooltip :title="item.description">
+                                            {{ item.description || '' }}
+                                        </a-tooltip>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="right">
+                                <a-button
+                                    type="primary"
+                                    @click="goProviders(item)"
+                                    >接入</a-button
+                                >
+                            </div>
+                        </div>
+                    </div>
+                </a-col>
+            </a-row>
+        </div>
+    </a-card>
+</template>
+
+<script lang="ts" setup name="AccessConfigDetail">
+import { getImage } from '@/utils/comm';
+import TitleComponent from '@/components/TitleComponent/index.vue';
+
+const items = [
+    { id: 'mqtt-server-gateway', name: '测试1', description: '测试1' },
+    { id: 'websocket-server', name: '测试2', description: '测试' },
+    { id: 'coap-server-gateway', name: '测试3', description: '测试' },
+];
+
+const backMap = new Map();
+backMap.set('mqtt-server-gateway', getImage('/access/mqtt.png'));
+backMap.set('websocket-server', getImage('/access/websocket.png'));
+backMap.set('coap-server-gateway', getImage('/access/coap.png'));
+backMap.set('tcp-server-gateway', getImage('/access/tcp.png'));
+backMap.set('child-device', getImage('/access/child-device.png'));
+backMap.set('http-server-gateway', getImage('/access/http.png'));
+backMap.set('udp-device-gateway', getImage('/access/udp.png'));
+backMap.set('mqtt-client-gateway', getImage('/access/mqtt-broke.png'));
+
+const goProviders = (value: object) => {
+    console.log(111, value);
+};
+</script>
+
+<style lang="less" scoped>
+.provider {
+    position: relative;
+    width: 100%;
+    padding: 20px;
+    background: url('/public/images/access/background.png') no-repeat;
+    background-size: 100% 100%;
+    border: 1px solid #e6e6e6;
+
+    &::before {
+        position: absolute;
+        top: 0;
+        left: 40px;
+        display: block;
+        width: 15%;
+        min-width: 64px;
+        height: 2px;
+        background-image: url('/public/images/access/rectangle.png');
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        // border: 1px #8da1f4 solid;
+        // border-bottom-left-radius: 10%;
+        // border-bottom-right-radius: 10%;
+        content: ' ';
+    }
+
+    &:hover {
+        box-shadow: 0 0 24px rgba(#000, 0.1);
+    }
+}
+
+.box {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+
+    .left {
+        display: flex;
+        width: calc(100% - 70px);
+        .images {
+            width: 64px;
+            height: 64px;
+
+            img {
+                width: 100%;
+            }
+        }
+
+        .context {
+            width: calc(100% - 84px);
+            margin: 10px;
+
+            .title {
+                font-weight: 600;
+            }
+
+            .desc {
+                width: 100%;
+                margin-top: 10px;
+                overflow: hidden;
+                color: rgba(0, 0, 0, 0.55);
+                font-weight: 400;
+                font-size: 13px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+            }
+        }
+    }
+    .right {
+        width: 70px;
+    }
+}
+</style>

src/views/link/AccessConfig/index.vue

@@ -0,0 +1,11 @@
+<template>
+  <a-button type="primary" @click="handlAdd">新增</a-button>
+</template>
+<script lang="ts" setup name="AccessConfigPage">
+
+const handlAdd = (e: any) => {
+  console.log(111,e);
+  
+}
+
+</script>