feat: maptree

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

@@ -4,6 +4,8 @@ import { FormItem, ArrayTable, Editable, Select, NumberPicker } from '@formily/a
 import { createForm } from '@formily/core';
 import { FormProvider, createSchemaField } from '@formily/react';
 import { Badge, Button, Tooltip } from 'antd';
+import { useState } from 'react';
+import MapTree from '../mapTree';
 import './index.less';
 
 interface Props {
@@ -14,6 +16,8 @@ interface Props {
 const MapTable = (props: Props) => {
   const { metaData, deviceId } = props;
 
+  const [visible, setVisible] = useState<boolean>(false);
+
   const Render = (propsName: any) => {
     const text = metaData.find((item: any) => item.metadataId === propsName.value);
     return <>{text?.metadataName}</>;
@@ -217,7 +221,14 @@ const MapTable = (props: Props) => {
   return (
     <div>
       <div className="top-button">
-        <Button style={{ marginRight: 10 }}>批量映射</Button>
+        <Button
+          style={{ marginRight: 10 }}
+          onClick={() => {
+            setVisible(true);
+          }}
+        >
+          批量映射
+        </Button>
         <Button type="primary">保存</Button>
       </div>
       <div>
@@ -225,6 +236,13 @@ const MapTable = (props: Props) => {
           <SchemaField schema={schema} scope={{}} />
         </FormProvider>
       </div>
+      {visible && (
+        <MapTree
+          close={() => {
+            setVisible(false);
+          }}
+        />
+      )}
     </div>
   );
 };

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

@@ -0,0 +1,17 @@
+.map-tree {
+  .map-tree-top {
+    color: #000000b5;
+    background-color: #f6f6f6;
+  }
+
+  .map-tree-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 10px;
+
+    .map-tree-card {
+      min-width: 350px;
+    }
+  }
+}

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

@@ -1,6 +1,80 @@
-import { Modal } from 'antd';
+import { Button, Card, Modal, Tree } from 'antd';
+import './index.less';
 
-const MapTree = () => {
-  return <Modal>111</Modal>;
+interface Props {
+  close: any;
+}
+
+const MapTree = (props: Props) => {
+  const treeData = [
+    {
+      title: 'parent 1',
+      key: '0-0',
+      disableCheckbox: true,
+      children: [
+        {
+          title: 'parent 1-0',
+          key: '0-0-0',
+          children: [
+            {
+              title: 'leaf',
+              key: '0-0-0-0',
+              disableCheckbox: true,
+            },
+            {
+              title: 'leaf',
+              key: '0-0-0-1',
+              disableCheckbox: true,
+            },
+          ],
+        },
+        {
+          title: 'parent 1-1',
+          key: '0-0-1',
+        },
+      ],
+    },
+  ];
+
+  // const filterTree = (treeData:any) =>{
+
+  // }
+
+  return (
+    <Modal
+      title="批量映射"
+      visible
+      onCancel={() => {
+        props.close();
+      }}
+      onOk={() => {
+        props.close();
+      }}
+      width="900px"
+    >
+      <div className="map-tree">
+        <div className="map-tree-top">
+          采集器的点位名称与属性名称一致时将自动映射绑定；有多个采集器点位名称与属性名称一致时以第1个采集器的点位数据进行绑定
+        </div>
+        <div className="map-tree-content">
+          <Card title="源数据" className="map-tree-card">
+            <Tree
+              treeData={treeData}
+              checkable
+              defaultExpandedKeys={['0-0']}
+              onCheck={(checked) => {
+                console.log(checked, 'checked');
+              }}
+              // fieldNames={}
+            />
+          </Card>
+          <div>
+            <Button>加入右侧</Button>
+          </div>
+          <Card title="采集器" className="map-tree-card"></Card>
+        </div>
+      </div>
+    </Modal>
+  );
 };
 export default MapTree;