feat: 物模型映射

src/pages/device/Instance/Detail/EdgeMap/index.tsx

@@ -1,12 +1,75 @@
 import useDomFullHeight from '@/hooks/document/useDomFullHeight';
-import { Card } from 'antd';
+import { Card, Empty } from 'antd';
+import { useEffect, useState } from 'react';
 import MapTable from './mapTable';
+import Service from './service';
 
-const EdgeMap = () => {
+interface Props {
+  data: any;
+}
+
+export const service = new Service();
+
+const EdgeMap = (props: Props) => {
+  const { data } = props;
   const { minHeight } = useDomFullHeight('.metadataMap');
+  const [properties, setProperties] = useState<any>([]);
+  const [empty, setEmpty] = useState<boolean>(false);
+  const [reload, setReload] = useState<string>('');
+
+  // const save = async()=>{
+  //     setReload('save')
+  // }
+  // const remove = async()=>{
+  //     setReload('remove')
+  // }
+
+  useEffect(() => {
+    setReload('');
+    const metadata = JSON.parse(data.metadata).properties?.map((item: any) => ({
+      metadataId: item.id,
+      metadataName: `${item.name}(${item.id})`,
+      metadataType: 'property',
+    }));
+    if (metadata && metadata.length !== 0) {
+      service.getMap(data.id).then((res) => {
+        if (res.status === 200) {
+          // console.log(res.result)
+          //合并物模型
+          const array = res.result.reduce((x: any, y: any) => {
+            const metadataId = metadata.find((item: any) => item.metadataId === y.metadataId);
+            if (metadataId) {
+              Object.assign(metadataId, y);
+            } else {
+              x.push(y);
+            }
+            return x;
+          }, metadata);
+          //删除物模型
+          const items = array.filter((item: any) => item.metadataName);
+          setProperties(items);
+          const delList = array.filter((a: any) => !a.metadataName).map((b: any) => b.id);
+          //删除后解绑
+          if (delList && delList.length !== 0) {
+            console.log(delList);
+            //   service.removeMap(data.id, delList);
+          }
+        }
+      });
+    } else {
+      setEmpty(true);
+    }
+    setProperties(metadata);
+    console.log(metadata);
+  }, [reload]);
+
   return (
     <Card className="metadataMap" style={{ minHeight }}>
-      <MapTable metaData={[]} />
+      {empty ? (
+        <Empty description={'暂无数据，请配置物模型'} style={{ marginTop: '10%' }} />
+      ) : (
+        <MapTable metaData={properties} deviceId={data.id} />
+      )}
     </Card>
   );
 };

src/pages/device/Instance/Detail/EdgeMap/mapTable/index.tsx

@@ -8,18 +8,15 @@ import './index.less';
 
 interface Props {
   metaData: Record<string, string>[];
+  deviceId: string;
 }
 
 const MapTable = (props: Props) => {
-  const { metaData } = props;
+  const { metaData, deviceId } = props;
 
   const Render = (propsName: any) => {
     const text = metaData.find((item: any) => item.metadataId === propsName.value);
-    return (
-      <>
-        {text?.metadataName}({text?.metadataId})
-      </>
-    );
+    return <>{text?.metadataName}</>;
   };
   const StatusRender = (propsRender: any) => {
     if (propsRender.value) {
@@ -43,6 +40,7 @@ const MapTable = (props: Props) => {
           title: '确认解绑',
           disabled: !record(index)?.id,
           onConfirm: async () => {
+            console.log(deviceId);
             // deteleMaster(item.id)
             // remove([record(index)?.id]);
           },
@@ -66,7 +64,11 @@ const MapTable = (props: Props) => {
       StatusRender,
     },
   });
-  const form = createForm({});
+  const form = createForm({
+    values: {
+      requestList: metaData,
+    },
+  });
 
   const schema = {
     type: 'object',
@@ -87,7 +89,7 @@ const MapTable = (props: Props) => {
             column1: {
               type: 'void',
               'x-component': 'ArrayTable.Column',
-              'x-component-props': { width: 120, title: '名称' },
+              'x-component-props': { width: 200, title: '名称' },
               properties: {
                 metadataId: {
                   type: 'string',
@@ -143,7 +145,7 @@ const MapTable = (props: Props) => {
                     filterOption: (input: string, option: any) =>
                       option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0,
                   },
-                  'x-reactions': ['{{useAsyncDataSource(getName)}}'],
+                  // 'x-reactions': ['{{useAsyncDataSource(getName)}}'],
                 },
               },
             },
@@ -164,7 +166,7 @@ const MapTable = (props: Props) => {
                     filterOption: (input: string, option: any) =>
                       option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0,
                   },
-                  'x-reactions': ['{{useAsyncDataSource(getName)}}'],
+                  // 'x-reactions': ['{{useAsyncDataSource(getName)}}'],
                 },
               },
             },

src/pages/device/Instance/Detail/EdgeMap/mapTree/index.tsx

@@ -0,0 +1,6 @@
+import { Modal } from 'antd';
+
+const MapTree = () => {
+  return <Modal>111</Modal>;
+};
+export default MapTree;

src/pages/device/Instance/Detail/EdgeMap/service.ts

@@ -32,6 +32,16 @@ class Service extends BaseService<any> {
         data,
       },
     );
+  getMap = (deviceId: string, data?: any) =>
+    request(`/${SystemConst.API_BASE}/edge/operations/${deviceId}/device-collector-list/invoke`, {
+      method: 'POST',
+      data,
+    });
+  removeMap = (deviceId: string, data?: any) =>
+    request(`/${SystemConst.API_BASE}/edge/operations/${deviceId}/device-collector-delete/invoke`, {
+      method: 'POST',
+      data,
+    });
 }
 
 export default Service;

src/pages/device/Instance/Detail/index.tsx

@@ -29,6 +29,7 @@ import Service from '@/pages/device/Instance/service';
 import useLocation from '@/hooks/route/useLocation';
 import { onlyMessage, isNoCommunity } from '@/utils/util';
 import Parsing from './Parsing';
+import EdgeMap from './EdgeMap';
 // import EdgeMap from './EdgeMap';
 
 export const deviceStatus = new Map();
@@ -213,13 +214,13 @@ const InstanceDetail = observer(() => {
           component: <ChildDevice />,
         });
       }
-      // if(response.result){
-      //   datalist.push({
-      //     key: 'edge-map',
-      //     tab: '边缘端映射',
-      //     component: <EdgeMap />,
-      //   })
-      // }
+      if (response.result) {
+        datalist.push({
+          key: 'edge-map',
+          tab: '边缘端映射',
+          component: <EdgeMap data={InstanceModel.detail} />,
+        });
+      }
       setList(datalist);
       // 写入物模型数据
       const metadata: DeviceMetadata = JSON.parse(response.result?.metadata || '{}');