|
|
@@ -52,33 +52,39 @@ const Provider = (props: Props) => {
|
|
|
]);
|
|
|
}, [props.data]);
|
|
|
|
|
|
+ const backMap = new Map();
|
|
|
+ backMap.set('mqtt-server-gateway', require('/public/images/access/mqtt.png'));
|
|
|
+ backMap.set('websocket-server', require('/public/images/access/websocket.png'));
|
|
|
+ backMap.set('modbus-tcp', require('/public/images/access/modbus.png'));
|
|
|
+ backMap.set('coap-server-gateway', require('/public/images/access/coap.png'));
|
|
|
+ backMap.set('tcp-server-gateway', require('/public/images/access/tcp.png'));
|
|
|
+ backMap.set('Ctwing', require('/public/images/access/ctwing.png'));
|
|
|
+ backMap.set('child-device', require('/public/images/access/child-device.png'));
|
|
|
+ backMap.set('opc-ua', require('/public/images/access/opc-ua.png'));
|
|
|
+ backMap.set('http-server-gateway', require('/public/images/access/http.png'));
|
|
|
+ backMap.set('fixed-media', require('/public/images/access/video-device.png'));
|
|
|
+ backMap.set('udp-device-gateway', require('/public/images/access/udp.png'));
|
|
|
+ backMap.set('OneNet', require('/public/images/access/onenet.png'));
|
|
|
+ backMap.set('gb28181-2016', require('/public/images/access/gb28181.png'));
|
|
|
+ backMap.set('mqtt-client-gateway', require('/public/images/access/mqtt-broke.png'));
|
|
|
+
|
|
|
return (
|
|
|
<div>
|
|
|
{dataSource.map((i) => (
|
|
|
<Card key={i.type} style={{ marginTop: 20 }}>
|
|
|
<TitleComponent data={i.title} />
|
|
|
- <Row gutter={[16, 16]}>
|
|
|
+ <Row gutter={[24, 24]}>
|
|
|
{(i?.list || []).map((item: any) => (
|
|
|
<Col key={item.name} span={12}>
|
|
|
- <Card style={{ width: '100%' }} hoverable>
|
|
|
- <div
|
|
|
- style={{
|
|
|
- width: '100%',
|
|
|
- display: 'flex',
|
|
|
- alignItems: 'center',
|
|
|
- justifyContent: 'space-between',
|
|
|
- }}
|
|
|
- >
|
|
|
- <div
|
|
|
- style={{
|
|
|
- display: 'flex',
|
|
|
- width: 'calc(100% - 70px)',
|
|
|
- }}
|
|
|
- >
|
|
|
- <div className={styles.images}>{item.name}</div>
|
|
|
- <div style={{ margin: '10px', width: 'calc(100% - 84px)' }}>
|
|
|
+ <div className={styles.provider}>
|
|
|
+ <div className={styles.box}>
|
|
|
+ <div className={styles.left}>
|
|
|
+ <div className={styles.images}>
|
|
|
+ <img src={backMap.get(item.id)} />
|
|
|
+ </div>
|
|
|
+ <div className={styles.context}>
|
|
|
<div style={{ fontWeight: 600 }}>{item.name}</div>
|
|
|
- <div className={styles.desc}>{item?.description || '--'}</div>
|
|
|
+ <div className={styles.desc}>{item?.description || ''}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div style={{ width: '70px' }}>
|
|
|
@@ -92,7 +98,7 @@ const Provider = (props: Props) => {
|
|
|
</Button>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </Card>
|
|
|
+ </div>
|
|
|
</Col>
|
|
|
))}
|
|
|
</Row>
|