|
|
@@ -1,8 +1,8 @@
|
|
|
-import { Button, Drawer, message, Space, Tabs } from 'antd';
|
|
|
+import { Button, Drawer, message, Space, Spin, Tabs } from 'antd';
|
|
|
import { useEffect, useState } from 'react';
|
|
|
import { productModel, service } from '@/pages/device/Product';
|
|
|
import { observer } from '@formily/react';
|
|
|
-import { InstanceModel } from '@/pages/device/Instance';
|
|
|
+import { InstanceModel, service as deviceService } from '@/pages/device/Instance';
|
|
|
import { useLocation } from 'umi';
|
|
|
import InstanceService from '@/pages/device/Instance/service';
|
|
|
import { downloadObject } from '@/utils/util';
|
|
|
@@ -24,14 +24,28 @@ const Cat = observer((props: Props) => {
|
|
|
};
|
|
|
const metadata = metadataMap[props.type];
|
|
|
const [value, setValue] = useState(metadata);
|
|
|
+ const [loading, setLoading] = useState<boolean>(false);
|
|
|
const _path = location.pathname.split('/');
|
|
|
const id = _path[_path.length - 1];
|
|
|
|
|
|
useEffect(() => {
|
|
|
if (props.visible) {
|
|
|
- setValue(metadata);
|
|
|
+ setLoading(true);
|
|
|
+ if (props.type === 'device') {
|
|
|
+ deviceService.detail(id).then((resp) => {
|
|
|
+ setLoading(false);
|
|
|
+ InstanceModel.current = resp.result;
|
|
|
+ setValue(resp.result.metadata);
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ service.detail(id).then((resp) => {
|
|
|
+ setLoading(false);
|
|
|
+ productModel.current = resp.result;
|
|
|
+ setValue(resp.result.metadata);
|
|
|
+ });
|
|
|
+ }
|
|
|
}
|
|
|
- }, [props.visible]);
|
|
|
+ }, [props.visible, props.type]);
|
|
|
|
|
|
useEffect(() => {
|
|
|
service.codecs().subscribe({
|
|
|
@@ -97,34 +111,36 @@ const Cat = observer((props: Props) => {
|
|
|
</Space>
|
|
|
}
|
|
|
>
|
|
|
- <div style={{ background: '#F6F6F6' }}>
|
|
|
- <p style={{ padding: 10, color: 'rgba(0, 0, 0, 0.55)' }}>
|
|
|
- 物模型是对设备在云端的功能描述,包括设备的属性、服务和事件。物联网平台通过定义一种物的描述语言来描述物模型,称之为
|
|
|
- TSL(即 Thing Specification Language),采用 JSON 格式,您可以根据 TSL
|
|
|
- 组装上报设备的数据。您可以导出完整物模型,用于云端应用开发。
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <Tabs onChange={convertMetadata}>
|
|
|
- {codecs?.map((item) => (
|
|
|
- <Tabs.TabPane tab={item.name} tabKey={item.id} key={item.id}>
|
|
|
- <div style={{ border: '1px solid #eee', height: 670, width: 650 }}>
|
|
|
- <JMonacoEditor
|
|
|
- height={'100%'}
|
|
|
- theme="vs"
|
|
|
- language="json"
|
|
|
- key={item.id}
|
|
|
- value={value}
|
|
|
- editorDidMount={(editor: any) => {
|
|
|
- editor.getAction('editor.action.formatDocument').run();
|
|
|
- editor.onDidScrollChange?.(() => {
|
|
|
+ <Spin spinning={loading}>
|
|
|
+ <div style={{ background: '#F6F6F6' }}>
|
|
|
+ <p style={{ padding: 10, color: 'rgba(0, 0, 0, 0.55)' }}>
|
|
|
+ 物模型是对设备在云端的功能描述,包括设备的属性、服务和事件。物联网平台通过定义一种物的描述语言来描述物模型,称之为
|
|
|
+ TSL(即 Thing Specification Language),采用 JSON 格式,您可以根据 TSL
|
|
|
+ 组装上报设备的数据。您可以导出完整物模型,用于云端应用开发。
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <Tabs onChange={convertMetadata}>
|
|
|
+ {codecs?.map((item) => (
|
|
|
+ <Tabs.TabPane tab={item.name} tabKey={item.id} key={item.id}>
|
|
|
+ <div style={{ border: '1px solid #eee', height: 670, width: 650 }}>
|
|
|
+ <JMonacoEditor
|
|
|
+ height={'100%'}
|
|
|
+ theme="vs"
|
|
|
+ language="json"
|
|
|
+ key={item.id}
|
|
|
+ value={value}
|
|
|
+ editorDidMount={(editor: any) => {
|
|
|
editor.getAction('editor.action.formatDocument').run();
|
|
|
- });
|
|
|
- }}
|
|
|
- />
|
|
|
- </div>
|
|
|
- </Tabs.TabPane>
|
|
|
- ))}
|
|
|
- </Tabs>
|
|
|
+ editor.onDidScrollChange?.(() => {
|
|
|
+ editor.getAction('editor.action.formatDocument').run();
|
|
|
+ });
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </Tabs.TabPane>
|
|
|
+ ))}
|
|
|
+ </Tabs>
|
|
|
+ </Spin>
|
|
|
</Drawer>
|
|
|
);
|
|
|
});
|