feat: 批量映射

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

@@ -241,6 +241,7 @@ const MapTable = (props: Props) => {
           close={() => {
             setVisible(false);
           }}
+          deviceId={deviceId}
         />
       )}
     </div>

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

@@ -10,8 +10,12 @@
     justify-content: space-between;
     margin-top: 10px;
 
+    .ant-card-body {
+      padding: 12px !important;
+    }
     .map-tree-card {
       min-width: 350px;
+      min-height: 300px;
     }
   }
 }

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

@@ -1,44 +1,100 @@
-import { Button, Card, Modal, Tree } from 'antd';
+import { DeleteOutlined } from '@ant-design/icons';
+import { Button, Card, Modal, Tree, List, Popconfirm } from 'antd';
+import { useEffect, useRef, useState } from 'react';
+// import { service } from '..';
 import './index.less';
 
 interface Props {
   close: any;
+  deviceId: string;
 }
 
 const MapTree = (props: Props) => {
+  const [data, setData] = useState<any>([]);
+  const [checked, setChecked] = useState<any>([]);
+  const filterRef = useRef<any>([]);
+  const [expandedKey, setExpandedKey] = useState<any>();
+  const [list, setList] = useState<any>([]);
+
   const treeData = [
     {
-      title: 'parent 1',
-      key: '0-0',
-      disableCheckbox: true,
-      children: [
+      name: '通道1',
+      id: '1',
+      collectors: [
         {
-          title: 'parent 1-0',
-          key: '0-0-0',
-          children: [
+          name: '设备1',
+          id: '1-1',
+          parentId: '1',
+          points: [
             {
-              title: 'leaf',
-              key: '0-0-0-0',
-              disableCheckbox: true,
+              name: '点位1',
+              id: '1-1-1',
             },
             {
-              title: 'leaf',
-              key: '0-0-0-1',
-              disableCheckbox: true,
+              name: '点位2',
+              id: '1-1-2',
             },
           ],
         },
         {
-          title: 'parent 1-1',
-          key: '0-0-1',
+          name: '设备2',
+          id: '1-2',
         },
       ],
     },
+    {
+      name: '通道2',
+      id: '2',
+      collectors: [],
+    },
   ];
 
-  // const filterTree = (treeData:any) =>{
+  const filterTree = (nodes: any[], lists: any[]) => {
+    if (!nodes?.length) {
+      return nodes;
+    }
+    return nodes.filter((item) => {
+      if (lists.indexOf(item.id) > -1) {
+        filterRef.current.push(item);
+        return false;
+      }
+      // 符合条件的保留，并且需要递归处理其子节点
+      item.collectors = filterTree(item.collectors, lists);
+      return true;
+    });
+  };
+
+  const pushTree = (node: any) => {
+    const newTree = data.map((item: any) => {
+      if (item.id === node.parentId) {
+        item.collectors.push(node);
+        console.log(item, 'item');
+      }
+      return item;
+    });
+    console.log(newTree, 'newTree');
+    setData(newTree);
+    const array = filterRef.current.filter((element: any) => element.id !== node.id);
+    setList(array);
+    // console.log(list,'list')
+  };
+
+  useEffect(() => {
+    // service.treeMap(props.deviceId).then(
+    //   res => {
+    //     if (res.status === 200) {
+    //       setData(res.result)
+    //     }
+    //   }
+    // )
+    setData(treeData);
+    setExpandedKey([treeData?.[0].id]);
+  }, []);
 
-  // }
+  useEffect(() => {
+    console.log(filterRef.current);
+    setList(filterRef.current);
+  }, [filterRef.current]);
 
   return (
     <Modal
@@ -59,19 +115,62 @@ const MapTree = (props: Props) => {
         <div className="map-tree-content">
           <Card title="源数据" className="map-tree-card">
             <Tree
-              treeData={treeData}
+              key={'id'}
               checkable
-              defaultExpandedKeys={['0-0']}
-              onCheck={(checked) => {
-                console.log(checked, 'checked');
+              selectable={false}
+              expandedKeys={expandedKey}
+              onExpand={(expandedKeys) => {
+                setExpandedKey(expandedKeys);
               }}
-              // fieldNames={}
-            />
+              onCheck={(checkeds) => {
+                setChecked(checkeds);
+              }}
+            >
+              {data?.map((item: any) => (
+                <Tree.TreeNode key={item.id} title={item.name} checkable={false}>
+                  {(item?.collectors || []).map((collector: any) => (
+                    <Tree.TreeNode key={collector.id} title={collector.name}>
+                      {(collector?.points || []).map((i: any) => (
+                        <Tree.TreeNode checkable={false} key={i.id} title={i.name}></Tree.TreeNode>
+                      ))}
+                    </Tree.TreeNode>
+                  ))}
+                </Tree.TreeNode>
+              ))}
+            </Tree>
           </Card>
           <div>
-            <Button>加入右侧</Button>
+            <Button
+              onClick={() => {
+                const item = filterTree(data, checked);
+                setData(item);
+              }}
+            >
+              加入右侧
+            </Button>
           </div>
-          <Card title="采集器" className="map-tree-card"></Card>
+          <Card title="采集器" className="map-tree-card">
+            <List
+              size="small"
+              dataSource={list}
+              renderItem={(item: any) => (
+                <List.Item
+                  actions={[
+                    <Popconfirm
+                      title="确定删除?"
+                      onConfirm={() => {
+                        pushTree(item);
+                      }}
+                    >
+                      <DeleteOutlined />
+                    </Popconfirm>,
+                  ]}
+                >
+                  {item.name}
+                </List.Item>
+              )}
+            />
+          </Card>
         </div>
       </div>
     </Modal>

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

@@ -42,6 +42,14 @@ class Service extends BaseService<any> {
       method: 'POST',
       data,
     });
+  treeMap = (deviceId: string, data?: any) =>
+    request(
+      `/${SystemConst.API_BASE}/edge/operations/${deviceId}/data-collector-channel-tree/invoke`,
+      {
+        method: 'POST',
+        data,
+      },
+    );
 }
 
 export default Service;