|
@@ -42,6 +42,7 @@ const Access = (props: Props) => {
|
|
|
const [config, setConfig] = useState<any>();
|
|
const [config, setConfig] = useState<any>();
|
|
|
const networkPermission = PermissionButton.usePermission('link/Type').permission;
|
|
const networkPermission = PermissionButton.usePermission('link/Type').permission;
|
|
|
const protocolPermission = PermissionButton.usePermission('link/Protocol').permission;
|
|
const protocolPermission = PermissionButton.usePermission('link/Protocol').permission;
|
|
|
|
|
+ const [steps, setSteps] = useState<string[]>(['网络组件', '消息协议', '完成']);
|
|
|
|
|
|
|
|
const MetworkTypeMapping = new Map();
|
|
const MetworkTypeMapping = new Map();
|
|
|
MetworkTypeMapping.set('websocket-server', 'WEB_SOCKET_SERVER');
|
|
MetworkTypeMapping.set('websocket-server', 'WEB_SOCKET_SERVER');
|
|
@@ -69,7 +70,7 @@ const Access = (props: Props) => {
|
|
|
});
|
|
});
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
- const queryProcotolList = (id: string, params?: any) => {
|
|
|
|
|
|
|
+ const queryProcotolList = (id?: string, params?: any) => {
|
|
|
service.getProtocolList(ProcotoleMapping.get(id), params).then((resp) => {
|
|
service.getProtocolList(ProcotoleMapping.get(id), params).then((resp) => {
|
|
|
if (resp.status === 200) {
|
|
if (resp.status === 200) {
|
|
|
setProcotolList(resp.result);
|
|
setProcotolList(resp.result);
|
|
@@ -79,25 +80,39 @@ const Access = (props: Props) => {
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
useEffect(() => {
|
|
|
if (props.provider?.id && !props.data?.id) {
|
|
if (props.provider?.id && !props.data?.id) {
|
|
|
- queryNetworkList(props.provider?.id, {
|
|
|
|
|
- include: networkCurrent || '',
|
|
|
|
|
- });
|
|
|
|
|
- setCurrent(0);
|
|
|
|
|
|
|
+ if (props.provider?.id !== 'child-device') {
|
|
|
|
|
+ setSteps(['网络组件', '消息协议', '完成']);
|
|
|
|
|
+ queryNetworkList(props.provider?.id, {
|
|
|
|
|
+ include: networkCurrent || '',
|
|
|
|
|
+ });
|
|
|
|
|
+ setCurrent(0);
|
|
|
|
|
+ } else {
|
|
|
|
|
+ setSteps(['消息协议', '完成']);
|
|
|
|
|
+ setCurrent(1);
|
|
|
|
|
+ queryProcotolList(props.provider?.id);
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
}, [props.provider]);
|
|
}, [props.provider]);
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
useEffect(() => {
|
|
|
if (props.data?.id) {
|
|
if (props.data?.id) {
|
|
|
setProcotolCurrent(props.data?.protocol);
|
|
setProcotolCurrent(props.data?.protocol);
|
|
|
- setNetworkCurrent(props.data?.channelId);
|
|
|
|
|
form.setFieldsValue({
|
|
form.setFieldsValue({
|
|
|
name: props.data?.name,
|
|
name: props.data?.name,
|
|
|
description: props.data?.description,
|
|
description: props.data?.description,
|
|
|
});
|
|
});
|
|
|
- setCurrent(0);
|
|
|
|
|
- queryNetworkList(props.data?.provider, {
|
|
|
|
|
- include: props.data?.channelId,
|
|
|
|
|
- });
|
|
|
|
|
|
|
+ if (props.data?.provider !== 'child-device') {
|
|
|
|
|
+ setCurrent(0);
|
|
|
|
|
+ setSteps(['网络组件', '消息协议', '完成']);
|
|
|
|
|
+ setNetworkCurrent(props.data?.channelId);
|
|
|
|
|
+ queryNetworkList(props.data?.provider, {
|
|
|
|
|
+ include: props.data?.channelId,
|
|
|
|
|
+ });
|
|
|
|
|
+ } else {
|
|
|
|
|
+ setSteps(['消息协议', '完成']);
|
|
|
|
|
+ setCurrent(1);
|
|
|
|
|
+ queryProcotolList(props.data?.provider);
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
}, [props.data]);
|
|
}, [props.data]);
|
|
|
|
|
|
|
@@ -130,18 +145,6 @@ const Access = (props: Props) => {
|
|
|
setCurrent(current - 1);
|
|
setCurrent(current - 1);
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
- const steps = [
|
|
|
|
|
- {
|
|
|
|
|
- title: '网络组件',
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- title: '消息协议',
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- title: '完成',
|
|
|
|
|
- },
|
|
|
|
|
- ];
|
|
|
|
|
-
|
|
|
|
|
const columnsMQTT: any[] = [
|
|
const columnsMQTT: any[] = [
|
|
|
{
|
|
{
|
|
|
title: '分组',
|
|
title: '分组',
|
|
@@ -525,7 +528,10 @@ const Access = (props: Props) => {
|
|
|
description: values.description,
|
|
description: values.description,
|
|
|
provider: props.provider.id,
|
|
provider: props.provider.id,
|
|
|
protocol: procotolCurrent,
|
|
protocol: procotolCurrent,
|
|
|
- transport: ProcotoleMapping.get(props.provider.id),
|
|
|
|
|
|
|
+ transport:
|
|
|
|
|
+ props.provider?.id === 'child-device'
|
|
|
|
|
+ ? 'Gateway'
|
|
|
|
|
+ : ProcotoleMapping.get(props.provider.id),
|
|
|
channel: 'network', // 网络组件
|
|
channel: 'network', // 网络组件
|
|
|
channelId: networkCurrent,
|
|
channelId: networkCurrent,
|
|
|
})
|
|
})
|
|
@@ -648,13 +654,13 @@ const Access = (props: Props) => {
|
|
|
<div className={styles.steps}>
|
|
<div className={styles.steps}>
|
|
|
<Steps size="small" current={current}>
|
|
<Steps size="small" current={current}>
|
|
|
{steps.map((item) => (
|
|
{steps.map((item) => (
|
|
|
- <Steps.Step key={item.title} title={item.title} />
|
|
|
|
|
|
|
+ <Steps.Step key={item} title={item} />
|
|
|
))}
|
|
))}
|
|
|
</Steps>
|
|
</Steps>
|
|
|
</div>
|
|
</div>
|
|
|
<div className={styles.content}>{renderSteps(current)}</div>
|
|
<div className={styles.content}>{renderSteps(current)}</div>
|
|
|
<div className={styles.action}>
|
|
<div className={styles.action}>
|
|
|
- {current === 1 && (
|
|
|
|
|
|
|
+ {current === 1 && props.provider.id !== 'child-device' && (
|
|
|
<Button style={{ margin: '0 8px' }} onClick={() => prev()}>
|
|
<Button style={{ margin: '0 8px' }} onClick={() => prev()}>
|
|
|
上一步
|
|
上一步
|
|
|
</Button>
|
|
</Button>
|