feat: 设备接入网关 自定义设备接入基本Card样式
This commit is contained in:
jackhoo_98
parent
c2b83da156
commit
7e1c9de11f
Binary file not shown.
|
After Width: | Height: | Size: 159 B |
|
|
@ -34,6 +34,7 @@ export default [
|
||||||
},
|
},
|
||||||
// end: 测试用, 可删除
|
// end: 测试用, 可删除
|
||||||
|
|
||||||
|
// link 运维管理
|
||||||
{
|
{
|
||||||
path: '/link/log',
|
path: '/link/log',
|
||||||
component: () => import('@/views/link/Log/index.vue')
|
component: () => import('@/views/link/Log/index.vue')
|
||||||
|
|
@ -46,4 +47,8 @@ export default [
|
||||||
path: '/link/certificate/detail/add',
|
path: '/link/certificate/detail/add',
|
||||||
component: () => import('@/views/link/Certificate/Detail/index.vue')
|
component: () => import('@/views/link/Certificate/Detail/index.vue')
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/link/accessConfig/detail/add',
|
||||||
|
component: () => import('@/views/link/AccessConfig/Detail/index.vue')
|
||||||
|
},
|
||||||
]
|
]
|
||||||
|
|
@ -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 };
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
Loading…
Reference in New Issue