|
|
@@ -40,7 +40,7 @@ const Access = () => {
|
|
|
const [access, setAccess] = useState<any>();
|
|
|
const { permission } = usePermissions('device/Product');
|
|
|
const [dataSource, setDataSource] = useState<any[]>([]);
|
|
|
-
|
|
|
+ const [storageList, setStorageList] = useState<any[]>([]);
|
|
|
|
|
|
const MetworkTypeMapping = new Map();
|
|
|
MetworkTypeMapping.set('websocket-server', 'WEB_SOCKET_SERVER');
|
|
|
@@ -65,8 +65,7 @@ const Access = () => {
|
|
|
title: `<div id='title'>配置物模型</div><div id='guide'>1/3</div>`,
|
|
|
description: `配置产品物模型,实现设备在云端的功能描述。`,
|
|
|
position: 'bottom',
|
|
|
-
|
|
|
- }
|
|
|
+ },
|
|
|
},
|
|
|
{
|
|
|
element: '.ant-switch',
|
|
|
@@ -74,8 +73,8 @@ const Access = () => {
|
|
|
className: 'driver',
|
|
|
title: `<div id='title'>启用产品</div><div id='guide'>2/3</div>`,
|
|
|
description: '启用产品后,可在产品下新增设备。',
|
|
|
- position: 'bottom'
|
|
|
- }
|
|
|
+ position: 'bottom',
|
|
|
+ },
|
|
|
},
|
|
|
{
|
|
|
element: '.ant-descriptions-item-label',
|
|
|
@@ -83,10 +82,10 @@ const Access = () => {
|
|
|
className: 'driver',
|
|
|
title: `<div id='title'>添加设备</div><div id='guide'>3/3</div>`,
|
|
|
description: '添加设备,并连接到平台。',
|
|
|
- position: 'bottom'
|
|
|
- }
|
|
|
- }
|
|
|
- ]
|
|
|
+ position: 'bottom',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ];
|
|
|
const steps1 = [
|
|
|
{
|
|
|
element: '#driver-config',
|
|
|
@@ -95,8 +94,7 @@ const Access = () => {
|
|
|
title: `<div id='title'>填写配置</div><div id='guide'>1/4</div>`,
|
|
|
description: `填写设备接入所需的配置参数。`,
|
|
|
position: 'right',
|
|
|
-
|
|
|
- }
|
|
|
+ },
|
|
|
},
|
|
|
{
|
|
|
element: '#metadata-driver',
|
|
|
@@ -105,8 +103,7 @@ const Access = () => {
|
|
|
title: `<div id='title'>配置物模型</div><div id='guide'>2/4</div>`,
|
|
|
description: `配置产品物模型,实现设备在云端的功能描述。`,
|
|
|
position: 'bottom',
|
|
|
-
|
|
|
- }
|
|
|
+ },
|
|
|
},
|
|
|
{
|
|
|
element: '.ant-switch',
|
|
|
@@ -114,8 +111,8 @@ const Access = () => {
|
|
|
className: 'driver',
|
|
|
title: `<div id='title'>启用产品</div><div id='guide'>3/4</div>`,
|
|
|
description: '启用产品后,可在产品下新增设备。',
|
|
|
- position: 'bottom'
|
|
|
- }
|
|
|
+ position: 'bottom',
|
|
|
+ },
|
|
|
},
|
|
|
{
|
|
|
element: '.ant-descriptions-item-label',
|
|
|
@@ -123,10 +120,10 @@ const Access = () => {
|
|
|
className: 'driver',
|
|
|
title: `<div id='title'>添加设备</div><div id='guide'>4/4</div>`,
|
|
|
description: '添加设备,并连接到平台。',
|
|
|
- position: 'bottom'
|
|
|
- }
|
|
|
- }
|
|
|
- ]
|
|
|
+ position: 'bottom',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ];
|
|
|
|
|
|
const queryAccessDetail = (id: string) => {
|
|
|
service
|
|
|
@@ -286,19 +283,18 @@ const Access = () => {
|
|
|
// onDeselected:(e)=>{
|
|
|
// console.log(e)
|
|
|
// },
|
|
|
- onNext:()=>{
|
|
|
- console.log('下一步')
|
|
|
+ onNext: () => {
|
|
|
+ console.log('下一步');
|
|
|
},
|
|
|
- onPrevious:()=>{
|
|
|
- console.log('上一步')
|
|
|
+ onPrevious: () => {
|
|
|
+ console.log('上一步');
|
|
|
},
|
|
|
- onReset:()=>{
|
|
|
- console.log('关闭')
|
|
|
+ onReset: () => {
|
|
|
+ console.log('关闭');
|
|
|
},
|
|
|
// onDeselected:()=>{
|
|
|
// console.log('oncolse')
|
|
|
// }
|
|
|
-
|
|
|
});
|
|
|
setVisible(!!productModel.current?.accessId);
|
|
|
if (productModel.current?.accessId) {
|
|
|
@@ -308,10 +304,10 @@ const Access = () => {
|
|
|
.then((resp: { result: SetStateAction<ConfigMetadata[]> }) => {
|
|
|
setMetadata(resp.result);
|
|
|
if (resp.result && resp.result.length > 0) {
|
|
|
- driver.defineSteps(steps1)
|
|
|
+ driver.defineSteps(steps1);
|
|
|
driver.start();
|
|
|
} else {
|
|
|
- driver.defineSteps(steps)
|
|
|
+ driver.defineSteps(steps);
|
|
|
driver.start();
|
|
|
}
|
|
|
});
|
|
|
@@ -335,6 +331,16 @@ const Access = () => {
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
+ productService.getStoragList().then((resp) => {
|
|
|
+ if (resp.status === 200) {
|
|
|
+ setStorageList(
|
|
|
+ resp.result.map((i: any) => ({
|
|
|
+ label: i.name,
|
|
|
+ value: i.id,
|
|
|
+ })),
|
|
|
+ );
|
|
|
+ }
|
|
|
+ });
|
|
|
}, [productModel.current]);
|
|
|
|
|
|
// useEffect(() => {
|
|
|
@@ -357,7 +363,10 @@ const Access = () => {
|
|
|
|
|
|
const form = createForm({
|
|
|
validateFirst: true,
|
|
|
- initialValues: productModel.current?.configuration,
|
|
|
+ initialValues: {
|
|
|
+ ...productModel.current?.configuration,
|
|
|
+ storePolicy: productModel.current?.storePolicy,
|
|
|
+ },
|
|
|
});
|
|
|
|
|
|
const SchemaField = createSchemaField({
|
|
|
@@ -372,13 +381,16 @@ const Access = () => {
|
|
|
});
|
|
|
|
|
|
const configToSchema = (data: ConfigProperty[]) => {
|
|
|
- const obj = {};
|
|
|
+ const obj: any = {};
|
|
|
data.forEach((item) => {
|
|
|
obj[item?.property] = {
|
|
|
type: 'string',
|
|
|
title: item.name,
|
|
|
'x-decorator': 'FormItem',
|
|
|
'x-component': componentMap[item.type.type],
|
|
|
+ 'x-component-props': {
|
|
|
+ placeholder: item.type.type === 'enum' ? '请选择' : '请输入',
|
|
|
+ },
|
|
|
'x-decorator-props': {
|
|
|
tooltip: item.description,
|
|
|
gridSpan: 1,
|
|
|
@@ -388,14 +400,15 @@ const Access = () => {
|
|
|
enum:
|
|
|
item?.type?.type === 'enum' && item?.type?.elements
|
|
|
? (item?.type?.elements || []).map((t: { value: string; text: string }) => {
|
|
|
- return {
|
|
|
- label: t.text,
|
|
|
- value: t.value,
|
|
|
- };
|
|
|
- })
|
|
|
+ return {
|
|
|
+ label: t.text,
|
|
|
+ value: t.value,
|
|
|
+ };
|
|
|
+ })
|
|
|
: [],
|
|
|
};
|
|
|
});
|
|
|
+
|
|
|
return obj;
|
|
|
};
|
|
|
|
|
|
@@ -411,84 +424,101 @@ const Access = () => {
|
|
|
};
|
|
|
|
|
|
const renderConfigCard = () => {
|
|
|
- return (
|
|
|
- metadata &&
|
|
|
- metadata.length > 0 &&
|
|
|
- metadata?.map((item: any) => {
|
|
|
- const itemSchema: ISchema = {
|
|
|
- type: 'object',
|
|
|
- properties: {
|
|
|
- grid: {
|
|
|
- type: 'void',
|
|
|
- 'x-component': 'FormGrid',
|
|
|
- 'x-component-props': {
|
|
|
- maxColumns: 1,
|
|
|
- minColumns: 1,
|
|
|
- columnGap: 48,
|
|
|
- },
|
|
|
- title: (
|
|
|
- <TitleComponent
|
|
|
- data={
|
|
|
- <div className='config'>
|
|
|
- {item.name}
|
|
|
- <Tooltip title="此配置来自于该产品接入方式所选择的协议">
|
|
|
- <QuestionCircleOutlined />
|
|
|
- </Tooltip>
|
|
|
- </div>
|
|
|
- }
|
|
|
- />
|
|
|
- ),
|
|
|
- 'x-decorator': 'FormItem',
|
|
|
- 'x-decorator-props': {
|
|
|
- gridSpan: 1,
|
|
|
- labelAlign: 'left',
|
|
|
- layout: 'vertical',
|
|
|
- },
|
|
|
- properties: configToSchema(item.properties),
|
|
|
+ const itemSchema: any = (metadata || []).map((item: any) => {
|
|
|
+ return {
|
|
|
+ type: 'object',
|
|
|
+ properties: {
|
|
|
+ grid: {
|
|
|
+ type: 'void',
|
|
|
+ 'x-component': 'FormGrid',
|
|
|
+ 'x-component-props': {
|
|
|
+ maxColumns: 1,
|
|
|
+ minColumns: 1,
|
|
|
+ columnGap: 48,
|
|
|
+ },
|
|
|
+ title: (
|
|
|
+ <TitleComponent
|
|
|
+ data={
|
|
|
+ <div className="config">
|
|
|
+ {item.name}
|
|
|
+ <Tooltip title="此配置来自于该产品接入方式所选择的协议">
|
|
|
+ <QuestionCircleOutlined />
|
|
|
+ </Tooltip>
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+ />
|
|
|
+ ),
|
|
|
+ 'x-decorator': 'FormItem',
|
|
|
+ 'x-decorator-props': {
|
|
|
+ gridSpan: 1,
|
|
|
+ labelAlign: 'left',
|
|
|
+ layout: 'vertical',
|
|
|
},
|
|
|
+ properties: configToSchema(item.properties),
|
|
|
},
|
|
|
- };
|
|
|
-
|
|
|
- return (
|
|
|
- <PreviewText.Placeholder value="-" key={'config'}>
|
|
|
- <Form form={form} layout="vertical">
|
|
|
- <FormLayout>
|
|
|
- <SchemaField schema={itemSchema} />
|
|
|
- </FormLayout>
|
|
|
- <Button
|
|
|
- type="primary"
|
|
|
- onClick={async () => {
|
|
|
- const values = (await form.submit()) as any;
|
|
|
- const resp = await productService.modify(id || '', {
|
|
|
- id,
|
|
|
- configuration: { ...values },
|
|
|
- });
|
|
|
- if (resp.status === 200) {
|
|
|
- onlyMessage('操作成功!');
|
|
|
- if ((window as any).onTabSaveSuccess) {
|
|
|
- if (resp.result) {
|
|
|
- (window as any).onTabSaveSuccess(resp);
|
|
|
- setTimeout(() => window.close(), 300);
|
|
|
- }
|
|
|
- } else {
|
|
|
- getDetailInfo();
|
|
|
- }
|
|
|
+ },
|
|
|
+ };
|
|
|
+ });
|
|
|
+ const schema: ISchema = {
|
|
|
+ type: 'object',
|
|
|
+ properties: {
|
|
|
+ ...itemSchema,
|
|
|
+ storePolicy: {
|
|
|
+ type: 'string',
|
|
|
+ title: <TitleComponent data={'存储策略'} />,
|
|
|
+ 'x-decorator': 'FormItem',
|
|
|
+ 'x-component': 'Select',
|
|
|
+ 'x-component-props': {
|
|
|
+ placeholder: '请选择存储策略',
|
|
|
+ },
|
|
|
+ // required: true,
|
|
|
+ default: 'default-column',
|
|
|
+ 'x-decorator-props': {
|
|
|
+ // tooltip: '使用指定的存储策略来存储设备数据',
|
|
|
+ gridSpan: 1,
|
|
|
+ labelAlign: 'left',
|
|
|
+ layout: 'vertical',
|
|
|
+ },
|
|
|
+ enum: storageList,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ };
|
|
|
+ return (
|
|
|
+ <PreviewText.Placeholder value="-" key={'config'}>
|
|
|
+ <Form form={form} layout="vertical">
|
|
|
+ <FormLayout>
|
|
|
+ <SchemaField schema={schema} />
|
|
|
+ </FormLayout>
|
|
|
+ <Button
|
|
|
+ type="primary"
|
|
|
+ onClick={async () => {
|
|
|
+ const values = (await form.submit()) as any;
|
|
|
+ const { storePolicy, ...extra } = values;
|
|
|
+ const resp = await productService.modify(id || '', {
|
|
|
+ id,
|
|
|
+ configuration: { ...extra },
|
|
|
+ storePolicy: storePolicy,
|
|
|
+ });
|
|
|
+ if (resp.status === 200) {
|
|
|
+ onlyMessage('操作成功!');
|
|
|
+ if ((window as any).onTabSaveSuccess) {
|
|
|
+ if (resp.result) {
|
|
|
+ (window as any).onTabSaveSuccess(resp);
|
|
|
+ setTimeout(() => window.close(), 300);
|
|
|
}
|
|
|
- }}
|
|
|
- >
|
|
|
- 保存
|
|
|
- </Button>
|
|
|
- </Form>
|
|
|
- </PreviewText.Placeholder>
|
|
|
- );
|
|
|
- })
|
|
|
+ } else {
|
|
|
+ getDetailInfo();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ 保存
|
|
|
+ </Button>
|
|
|
+ </Form>
|
|
|
+ </PreviewText.Placeholder>
|
|
|
);
|
|
|
};
|
|
|
|
|
|
- // useEffect(() => {
|
|
|
-
|
|
|
- // }, [])
|
|
|
-
|
|
|
return (
|
|
|
<div>
|
|
|
{!visible ? (
|
|
|
@@ -582,14 +612,16 @@ const Access = () => {
|
|
|
<TitleComponent data={'连接信息'} />
|
|
|
{(access?.channelInfo?.addresses || []).length > 0
|
|
|
? (access?.channelInfo?.addresses || []).map((item: any) => (
|
|
|
- <div key={item.address}>
|
|
|
- <Badge color={item.health === -1 ? 'red' : 'green'} text={item.address} />
|
|
|
- </div>
|
|
|
- ))
|
|
|
+ <div key={item.address}>
|
|
|
+ <Badge color={item.health === -1 ? 'red' : 'green'} text={item.address} />
|
|
|
+ </div>
|
|
|
+ ))
|
|
|
: '暂无连接信息'}
|
|
|
</div>
|
|
|
|
|
|
- <div className={styles.item} id='driver-config'>{renderConfigCard()}</div>
|
|
|
+ <div className={styles.item} id="driver-config">
|
|
|
+ {renderConfigCard()}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</Col>
|
|
|
{config?.routes && config?.routes?.length > 0 && (
|
|
|
@@ -598,7 +630,7 @@ const Access = () => {
|
|
|
<div>
|
|
|
<div style={{ fontWeight: '600', marginBottom: 10 }}>
|
|
|
{access?.provider === 'mqtt-server-gateway' ||
|
|
|
- access?.provider === 'mqtt-client-gateway'
|
|
|
+ access?.provider === 'mqtt-client-gateway'
|
|
|
? 'topic'
|
|
|
: 'URL信息'}
|
|
|
</div>
|