fix: 合并代码

src/pages/account/Center/bind/index.tsx

@@ -43,7 +43,8 @@ const Bind = () => {
     const redirectUrl = urlParams.get('redirect') || window.location.href.split('redirect=')?.[1];
     // const url = window.location.href.split('redirect=')?.[1];
     console.log(redirectUrl);
-    if (redirectUrl) {
+    //内部集成需要跳回它们页面
+    if (redirectUrl && redirectUrl.indexOf('account/center/bind') === -1) {
       window.location.href = decodeURIComponent(redirectUrl);
     }
   };

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

@@ -51,14 +51,14 @@ const MapTree = (props: Props) => {
   const save = async () => {
     // console.log(list,'list')
     const params: any[] = [];
-    const metadataId = metaData.map((item: any) => item.metadataId);
+    // const metadataId = metaData.map((item: any) => item.metadataId);
     list.forEach((item: any) => {
       const array = item.points.map((element: any) => ({
         channelId: item.parentId,
         collectorId: element.collectorId,
         pointId: element.id,
         metadataType: 'property',
-        metadataId: metadataId.find((i: any) => i === element.id),
+        metadataId: metaData.find((i: any) => i.name === element.name)?.metadataId,
         provider: data.find((it: any) => it.id === item.parentId).provider,
       }));
       params.push(...array);
@@ -97,7 +97,7 @@ const MapTree = (props: Props) => {
   useEffect(() => {
     service.treeMap(edgeId).then((res) => {
       if (res.status === 200) {
-        console.log(res.result?.[0], 'data');
+        // console.log(res.result?.[0], 'data');
         setData(res.result?.[0]);
         setExpandedKey([res.result?.[0].id]);
       }
@@ -116,7 +116,11 @@ const MapTree = (props: Props) => {
         close();
       }}
       onOk={() => {
-        save();
+        if (list && list.length !== 0) {
+          save();
+        } else {
+          onlyMessage('请选择采集器', 'warning');
+        }
       }}
       width="900px"
     >

src/pages/device/Instance/Detail/MapChannel/Tree.tsx

@@ -0,0 +1,185 @@
+import { onlyMessage } from '@/utils/util';
+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;
+  metaData: any;
+  type: 'MODBUS_TCP' | 'OPC_UA';
+}
+
+const ChannelTree = (props: Props) => {
+  const { deviceId, close, metaData, type } = 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 filterTree = (nodes: any[], lists: any[]) => {
+    if (!nodes?.length) {
+      return nodes;
+    }
+    return nodes.filter((item) => {
+      if (lists.indexOf(item.id) > -1) {
+        filterRef.current.push(item);
+        // console.log(filterRef.current, 'filterRef.current');
+        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);
+      }
+      return item;
+    });
+    setData(newTree);
+    filterRef.current = filterRef.current.filter((element: any) => element.id !== node.id);
+  };
+
+  const save = async () => {
+    console.log(metaData);
+    const params: any[] = [];
+    // const metadataName = metaData.map((item: any) => item.name);
+    list.forEach((item: any) => {
+      const array = item.points.map((element: any) => ({
+        channelId: item.parentId,
+        collectorId: element.collectorId,
+        pointId: element.id,
+        metadataType: 'property',
+        metadataId: metaData.find((i: any) => i.name === element.name)?.metadataId,
+        provider: data.find((it: any) => it.id === item.parentId).provider,
+      }));
+      params.push(...array);
+    });
+    const filterParms = params.filter((item) => !!item.metadataId);
+    // console.log(filterParms, params)
+    if (filterParms && filterParms.length !== 0) {
+      const res = await service.saveMap(deviceId, type, filterParms);
+      if (res.status === 200) {
+        onlyMessage('操作成功');
+        close();
+      }
+    } else {
+      onlyMessage('暂无对应属性的映射', 'warning');
+    }
+  };
+
+  useEffect(() => {
+    service
+      .treeMap({
+        terms: [
+          {
+            column: 'provider',
+            value: type,
+          },
+        ],
+      })
+      .then((res) => {
+        // console.log(res.result)
+        setData(res.result);
+        setExpandedKey([res.result?.[0].id]);
+      });
+    // console.log(metaData,'metaData')
+  }, []);
+
+  useEffect(() => {
+    setList(filterRef.current);
+  }, [filterRef.current]);
+
+  return (
+    <Modal
+      title="批量映射"
+      visible
+      onCancel={() => {
+        close();
+      }}
+      onOk={() => {
+        if (list && list.length !== 0) {
+          save();
+        } else {
+          onlyMessage('请选择采集器', 'warning');
+        }
+      }}
+      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
+              key={'id'}
+              checkable
+              selectable={false}
+              expandedKeys={expandedKey}
+              onExpand={(expandedKeys) => {
+                setExpandedKey(expandedKeys);
+              }}
+              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
+              disabled={checked && checked.length === 0}
+              onClick={() => {
+                const item = filterTree(data, checked);
+                setData(item);
+              }}
+            >
+              加入右侧
+            </Button>
+          </div>
+          <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>
+  );
+};
+export default ChannelTree;

src/pages/device/Instance/Detail/MapChannel/index.less

@@ -0,0 +1,6 @@
+.top-button {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  margin-bottom: 10px;
+}

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

@@ -0,0 +1,473 @@
+import useDomFullHeight from '@/hooks/document/useDomFullHeight';
+import { createForm, Field, FormPath, onFieldReact } from '@formily/core';
+import { FormProvider, createSchemaField } from '@formily/react';
+import { Badge, Button, Card, Empty, Tooltip } from 'antd';
+import { useEffect, useState } from 'react';
+import { FormItem, ArrayTable, Editable, Select } from '@formily/antd';
+import PermissionButton from '@/components/PermissionButton';
+import { DisconnectOutlined, QuestionCircleOutlined } from '@ant-design/icons';
+import Service from './service';
+import { action } from '@formily/reactive';
+import type { Response } from '@/utils/typings';
+import './index.less';
+import { onlyMessage } from '@/utils/util';
+import ChannelTree from './Tree';
+
+interface Props {
+  type: 'MODBUS_TCP' | 'OPC_UA';
+  data: any;
+}
+export const service = new Service();
+
+const MapChannel = (props: Props) => {
+  const { data, type } = props;
+  const { minHeight } = useDomFullHeight('.metadataMap');
+  const [empty, setEmpty] = useState<boolean>(false);
+  const [reload, setReload] = useState<string>('');
+  const [properties, setProperties] = useState<any>([]);
+  const [channelList, setChannelList] = useState<any>([]);
+  const [visible, setVisible] = useState<boolean>(false);
+
+  const Render = (propsName: any) => {
+    const text = properties.find((item: any) => item.metadataId === propsName.value);
+    return <>{text?.metadataName}</>;
+  };
+  const StatusRender = (propsRender: any) => {
+    if (propsRender.value) {
+      return <Badge status="success" text={'已绑定'} />;
+    } else {
+      return <Badge status="error" text={'未绑定'} />;
+    }
+  };
+  const remove = async (params: any) => {
+    const res = await service.removeMap('device', data.id, [params]);
+    if (res.status === 200) {
+      onlyMessage('解绑成功');
+      setReload('remove');
+    }
+  };
+  const ActionButton = () => {
+    const record = ArrayTable.useRecord?.();
+    const index = ArrayTable.useIndex?.();
+    return (
+      <PermissionButton
+        isPermission={true}
+        style={{ padding: 0 }}
+        disabled={!record(index)?.id}
+        tooltip={{
+          title: '解绑',
+        }}
+        popConfirm={{
+          title: '确认解绑',
+          disabled: !record(index)?.id,
+          onConfirm: async () => {
+            remove(record(index)?.id);
+          },
+        }}
+        key="unbind"
+        type="link"
+      >
+        <DisconnectOutlined />
+      </PermissionButton>
+    );
+  };
+  const useAsyncDataSource = (api: any) => (field: Field) => {
+    field.loading = true;
+    api(field)?.then(
+      action.bound!((resp: Response<any>) => {
+        field.dataSource = resp.result?.map((item: any) => ({
+          label: item.name,
+          value: item.id,
+        }));
+        field.loading = false;
+      }),
+    );
+  };
+
+  const getCollector = async (field: Field) => {
+    const path = FormPath.transform(
+      field.path,
+      /\d+/,
+      (index) => `requestList.${parseInt(index)}.channelId`,
+    );
+    const channelId = field.query(path).get('value');
+    if (!channelId) return [];
+    return service.getCollector({
+      terms: [
+        {
+          terms: [
+            {
+              column: 'channelId',
+              value: channelId,
+            },
+          ],
+        },
+      ],
+    });
+  };
+  const getPoint = async (field: Field) => {
+    const path = FormPath.transform(
+      field.path,
+      /\d+/,
+      (index) => `requestList.${parseInt(index)}.collectorId`,
+    );
+    const collectorId = field.query(path).get('value');
+    if (!collectorId) return [];
+    return service.getPoint({
+      terms: [
+        {
+          terms: [
+            {
+              column: 'collectorId',
+              value: collectorId,
+            },
+          ],
+        },
+      ],
+    });
+  };
+
+  const SchemaField = createSchemaField({
+    components: {
+      FormItem,
+      Editable,
+      ArrayTable,
+      Select,
+      Render,
+      ActionButton,
+      StatusRender,
+    },
+  });
+
+  const form = createForm({
+    values: {
+      requestList: properties,
+    },
+    effects: () => {
+      onFieldReact('requestList.*.channelId', async (field, f) => {
+        const value = (field as Field).value;
+        // console.log(field, 'provider')
+        if (value) {
+          const param = channelList.find((item: any) => item.value === value);
+          const providerPath = FormPath.transform(
+            field.path,
+            /\d+/,
+            (index) => `requestList.${parseInt(index)}.provider`,
+          );
+          f.setFieldState(providerPath, (state) => {
+            state.value = param?.provider;
+          });
+        }
+        const path = FormPath.transform(
+          field.path,
+          /\d+/,
+          (index) => `requestList.${parseInt(index)}.collectorId`,
+        );
+        const path1 = FormPath.transform(
+          field.path,
+          /\d+/,
+          (index) => `requestList.${parseInt(index)}.pointId`,
+        );
+        f.setFieldState(path, (state) => {
+          if (value) {
+            state.required = true;
+            form.validate();
+          } else {
+            state.required = false;
+            form.validate();
+          }
+        });
+        f.setFieldState(path1, (state) => {
+          if (value) {
+            state.required = true;
+            form.validate();
+          } else {
+            state.required = false;
+            form.validate();
+          }
+        });
+      });
+    },
+  });
+
+  const schema = {
+    type: 'object',
+    properties: {
+      requestList: {
+        type: 'array',
+        'x-decorator': 'FormItem',
+        'x-component': 'ArrayTable',
+        'x-component-props': {
+          pagination: {
+            pageSize: 10,
+          },
+          scroll: { x: '100%' },
+        },
+        items: {
+          type: 'object',
+          properties: {
+            column1: {
+              type: 'void',
+              'x-component': 'ArrayTable.Column',
+              'x-component-props': { width: 200, title: '名称' },
+              properties: {
+                metadataId: {
+                  type: 'string',
+                  'x-component': 'Render',
+                },
+              },
+            },
+            column2: {
+              type: 'void',
+              'x-component': 'ArrayTable.Column',
+              'x-component-props': { width: 200, title: '通道' },
+              properties: {
+                channelId: {
+                  type: 'string',
+                  'x-decorator': 'FormItem',
+                  'x-component': 'Select',
+                  'x-component-props': {
+                    placeholder: '请选择',
+                    showSearch: true,
+                    allowClear: true,
+                    showArrow: true,
+                    filterOption: (input: string, option: any) =>
+                      option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0,
+                  },
+                  enum: channelList,
+                },
+              },
+            },
+            column3: {
+              type: 'void',
+              'x-component': 'ArrayTable.Column',
+              'x-component-props': {
+                width: 200,
+                title: (
+                  <>
+                    采集器
+                    <Tooltip title="边缘网关代理的真实物理设备">
+                      <QuestionCircleOutlined />
+                    </Tooltip>
+                  </>
+                ),
+              },
+              properties: {
+                collectorId: {
+                  type: 'string',
+                  'x-decorator': 'FormItem',
+                  'x-component': 'Select',
+                  'x-component-props': {
+                    placeholder: '请选择',
+                    showSearch: true,
+                    allowClear: true,
+                    showArrow: true,
+                    filterOption: (input: string, option: any) =>
+                      option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0,
+                  },
+                  'x-reactions': ['{{useAsyncDataSource(getCollector)}}'],
+                  'x-validator': [
+                    {
+                      required: true,
+                      message: '请选择采集器',
+                    },
+                  ],
+                },
+              },
+            },
+            column4: {
+              type: 'void',
+              'x-component': 'ArrayTable.Column',
+              'x-component-props': { width: 200, title: '点位' },
+              properties: {
+                pointId: {
+                  type: 'string',
+                  'x-decorator': 'FormItem',
+                  'x-component': 'Select',
+                  'x-component-props': {
+                    placeholder: '请选择',
+                    showSearch: true,
+                    allowClear: true,
+                    showArrow: true,
+                    filterOption: (input: string, option: any) =>
+                      option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0,
+                  },
+                  'x-reactions': ['{{useAsyncDataSource(getPoint)}}'],
+                },
+              },
+            },
+            column5: {
+              type: 'void',
+              'x-component': 'ArrayTable.Column',
+              'x-component-props': { width: 0 },
+              properties: {
+                provider: {
+                  type: 'string',
+                  'x-hidden': true,
+                  'x-decorator': 'FormItem',
+                  'x-component': 'Input',
+                },
+              },
+            },
+            column6: {
+              type: 'void',
+              'x-component': 'ArrayTable.Column',
+              'x-component-props': {
+                width: 100,
+                title: '状态',
+                // sorter: (a: any, b: any) => a.state.value.length - b.state.value.length,
+              },
+              properties: {
+                id: {
+                  type: 'string',
+                  'x-decorator': 'FormItem',
+                  'x-component': 'StatusRender',
+                },
+              },
+            },
+            column7: {
+              type: 'void',
+              'x-component': 'ArrayTable.Column',
+              'x-component-props': {
+                title: '操作',
+                dataIndex: 'operations',
+                width: 50,
+                fixed: 'right',
+              },
+              properties: {
+                item: {
+                  type: 'void',
+                  'x-component': 'FormItem',
+                  properties: {
+                    remove: {
+                      type: 'void',
+                      'x-component': 'ActionButton',
+                    },
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+  };
+
+  const save = async (item: any) => {
+    const res = await service.saveMap(data.id, type, item);
+    if (res.status === 200) {
+      onlyMessage('保存成功');
+      setReload('save');
+    }
+  };
+
+  useEffect(() => {
+    service
+      .getChannel({
+        paging: false,
+        terms: [
+          {
+            terms: [
+              {
+                column: 'provider',
+                value: type,
+              },
+            ],
+          },
+        ],
+      })
+      .then((res) => {
+        if (res.status === 200) {
+          const list = res.result?.map((item: any) => ({
+            label: item.name,
+            value: item.id,
+            provider: item.provider,
+          }));
+          setChannelList(list);
+        }
+      });
+  }, []);
+
+  useEffect(() => {
+    const metadata = JSON.parse(data.metadata || '{}').properties?.map((item: any) => ({
+      metadataId: item.id,
+      metadataName: `${item.name}(${item.id})`,
+      metadataType: 'property',
+      name: item.name,
+    }));
+    if (metadata && metadata.length !== 0) {
+      service.getMap('device', 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) {
+            service.removeMap('device', data.id, delList);
+          }
+        }
+      });
+    } else {
+      setEmpty(true);
+    }
+  }, [reload]);
+
+  return (
+    <Card className="metadataMap" style={{ minHeight }}>
+      {empty ? (
+        <Empty description={'暂无数据，请配置物模型'} style={{ marginTop: '10%' }} />
+      ) : (
+        <>
+          <div className="top-button">
+            <Button
+              style={{ marginRight: 10 }}
+              onClick={async () => {
+                setVisible(true);
+              }}
+            >
+              批量映射
+            </Button>
+            <Button
+              type="primary"
+              onClick={async () => {
+                const value: any = await form.submit();
+                if (value) {
+                  const array = value.requestList.filter((item: any) => item.channelId);
+                  save(array);
+                }
+              }}
+            >
+              保存
+            </Button>
+          </div>
+          <FormProvider form={form}>
+            <SchemaField schema={schema} scope={{ useAsyncDataSource, getCollector, getPoint }} />
+          </FormProvider>
+        </>
+      )}
+      {visible && (
+        <ChannelTree
+          close={() => {
+            setVisible(false);
+            setReload('map');
+          }}
+          deviceId={data.id}
+          metaData={properties}
+          type={type}
+        />
+      )}
+    </Card>
+  );
+};
+export default MapChannel;

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

@@ -0,0 +1,51 @@
+import BaseService from '@/utils/BaseService';
+import { request } from 'umi';
+import SystemConst from '@/utils/const';
+
+class Service extends BaseService<any> {
+  getChannel = (data?: any) =>
+    request(`/${SystemConst.API_BASE}/data-collect/channel/_query/no-paging`, {
+      method: 'POST',
+      data,
+    });
+  getCollector = (data?: any) =>
+    request(`/${SystemConst.API_BASE}/data-collect/collector/_query/no-paging`, {
+      method: 'POST',
+      data,
+    });
+  getPoint = (data?: any) =>
+    request(`/${SystemConst.API_BASE}/data-collect/point/_query/no-paging`, {
+      method: 'POST',
+      data,
+    });
+  getMap = (thingType: string, thingId: any, params?: any) =>
+    request(`/${SystemConst.API_BASE}/things/collector/${thingType}/${thingId}/_query`, {
+      method: 'GET',
+      params,
+    });
+  removeMap = (thingType: string, thingId: any, data?: any) =>
+    request(`/${SystemConst.API_BASE}/things/collector/${thingType}/${thingId}/_delete`, {
+      method: 'POST',
+      data,
+    });
+  // treeMap = (data?: any) =>
+  //   request(
+  //     `/${SystemConst.API_BASE}/data-collect/channel/_all/tree`,
+  //     {
+  //       method: 'POST',
+  //       data: data,
+  //     },
+  //   );
+  treeMap = (data: any) =>
+    request(`/${SystemConst.API_BASE}/data-collect/channel/_all/tree`, {
+      method: 'POST',
+      data: data,
+    });
+  saveMap = (thingId: any, provider: string, data?: any) =>
+    request(`/${SystemConst.API_BASE}/things/collector/device/${thingId}/${provider}`, {
+      method: 'PATCH',
+      data: data,
+    });
+}
+
+export default Service;

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

@@ -13,8 +13,6 @@ import Running from '@/pages/device/Instance/Detail/Running';
 import ChildDevice from '@/pages/device/Instance/Detail/ChildDevice';
 import Diagnose from '@/pages/device/Instance/Detail/Diagnose';
 // import MetadataMap from '@/pages/device/Instance/Detail/MetadataMap';
-import Opcua from '@/pages/device/Instance/Detail/Opcua';
-import Modbus from '@/pages/device/Instance/Detail/Modbus';
 import { useIntl } from '@@/plugin-locale/localeExports';
 import Metadata from '../../components/Metadata';
 import type { DeviceMetadata } from '@/pages/device/Product/typings';
@@ -30,7 +28,7 @@ import useLocation from '@/hooks/route/useLocation';
 import { onlyMessage } from '@/utils/util';
 import Parsing from './Parsing';
 import EdgeMap from './EdgeMap';
-// import EdgeMap from './EdgeMap';
+import MapChannel from './MapChannel';
 
 export const deviceStatus = new Map();
 deviceStatus.set('online', <Badge status="success" text={'在线'} />);
@@ -196,14 +194,14 @@ const InstanceDetail = observer(() => {
         datalist.push({
           key: 'modbus',
           tab: 'Modbus',
-          component: <Modbus data={InstanceModel.detail} />,
+          component: <MapChannel data={InstanceModel.detail} type="MODBUS_TCP" />,
         });
       }
       if (response.result.protocol === 'opc-ua') {
         datalist.push({
           key: 'opcua',
           tab: 'OPC UA',
-          component: <Opcua data={InstanceModel.detail} />,
+          component: <MapChannel data={InstanceModel.detail} type="OPC_UA" />,
         });
       }
       if (response.result.deviceType?.value === 'gateway') {

src/pages/link/AccessConfig/Detail/components/Network/index.tsx

@@ -170,7 +170,11 @@ const Network = (props: Props) => {
                     type="link"
                     onClick={() => {
                       const url = getMenuPathByCode(MENUS_CODE['link/Type/Detail']);
-                      const tab: any = window.open(`${origin}/#${url}`);
+                      const tab: any = window.open(
+                        `${origin}/#${url}?type=${
+                          NetworkTypeMapping.get(props.provider?.id) || ''
+                        }`,
+                      );
                       tab!.onTabSaveSuccess = (value: any) => {
                         if (value.status === 200) {
                           setNetworkCurrent(value.result?.id);
@@ -181,7 +185,7 @@ const Network = (props: Props) => {
                       };
                     }}
                   >
-                    创建接入方式
+                    去新增
                   </Button>
                 )}
               </span>