fix: 10.24修改bug

config/proxy.ts

@@ -9,14 +9,14 @@
 export default {
   dev: {
     '/api': {
-      // target: 'http://192.168.32.28:8844/',
-      // ws: 'ws://192.168.32.28:8844/',
+      target: 'http://192.168.32.28:8844/',
+      ws: 'ws://192.168.32.28:8844/',
       // 开发环境
       // target: 'http://120.79.18.123:8844/',
       // ws: 'ws://120.79.18.123:8844/',
       // 测试环境
-      target: 'http://120.77.179.54:8844/',
-      ws: 'ws://120.77.179.54:8844/',
+      // target: 'http://120.77.179.54:8844/',
+      // ws: 'ws://120.77.179.54:8844/',
       // target: 'http://192.168.32.65:8850/',
       // ws: 'ws://192.168.32.65:8850/',
       //v2环境

src/components/ProTableCard/CardItems/DataCollect/Point.tsx

@@ -1,59 +0,0 @@
-import React from 'react';
-import { StatusColorEnum } from '@/components/BadgeStatus';
-import { TableCard, Ellipsis } from '@/components';
-import '@/style/common.less';
-import './index.less';
-
-export interface PointCardProps extends Partial<PointItem> {
-  detail?: React.ReactNode;
-  actions?: React.ReactNode[];
-  avatarSize?: number;
-  className?: string;
-  content?: React.ReactNode[];
-  onClick?: () => void;
-  grantedPermissions?: string[];
-  onUnBind?: (e: any) => void;
-  showBindBtn?: boolean;
-  cardType?: 'bind' | 'unbind';
-  showTool?: boolean;
-}
-
-const defaultImage = require('/public/images/device-type-3-big.png');
-
-export default (props: PointCardProps) => {
-  return (
-    <TableCard
-      showMask={false}
-      actions={props.actions}
-      status={props.state?.value}
-      statusText={props.state?.text}
-      statusNames={{
-        enabled: StatusColorEnum.success,
-        disabled: StatusColorEnum.error,
-      }}
-    >
-      <div className={'pro-table-card-item'}>
-        <div className={'card-item-avatar'}>
-          <img width={88} height={88} src={defaultImage} alt={''} />
-        </div>
-        <div className={'card-item-body'}>
-          <div className={'card-item-header'}>
-            <Ellipsis title={props.name} titleClassName={'card-item-header-name'} />
-          </div>
-          <div className={'card-item-content'}>
-            {/*<div>*/}
-            {/*  <label>设备类型</label>*/}
-            {/*  <Ellipsis title={props.deviceType ? props.deviceType.text : ''} />*/}
-            {/*  /!*<div className={'ellipsis'}>{props.deviceType ? props.deviceType.text : ''}</div>*!/*/}
-            {/*</div>*/}
-            {/*<div>*/}
-            {/*  <label>产品名称</label>*/}
-            {/*  <Ellipsis title={props.productName} />*/}
-            {/*  /!*<div className={'ellipsis'}>{props.productName || ''}</div>*!/*/}
-            {/*</div>*/}
-          </div>
-        </div>
-      </div>
-    </TableCard>
-  );
-};

src/pages/account/NotificationSubscription/service.ts

@@ -43,6 +43,7 @@ class Service extends BaseService<NotifitionSubscriptionItem> {
     request(`/${SystemConst.API_BASE}/alarm/config/_query/no-paging`, {
       method: 'POST',
       data: {
+        sorts: [{ name: 'createTime', order: 'desc' }],
         paging: false,
       },
     }).then((resp: any) => {

src/pages/link/DataCollect/DataGathering/index.tsx

@@ -11,16 +11,20 @@ const DataCollectModel = model<{
   id: Partial<string>;
   type: 'channel' | 'device';
   provider: 'OPC_UA' | 'MODBUS_TCP';
+  data: any;
 }>({
   type: 'channel',
   id: '',
   provider: 'MODBUS_TCP',
+  data: {},
 });
 
 export default observer(() => {
   const obj = {
     channel: <Device type={false} id={DataCollectModel.id} />,
-    device: <Point type={false} provider={DataCollectModel.provider} id={DataCollectModel.id} />,
+    device: (
+      <Point type={false} provider={DataCollectModel.provider} data={DataCollectModel.data} />
+    ),
   };
   return (
     <PageContainer>
@@ -28,10 +32,11 @@ export default observer(() => {
         <div className={styles.container}>
           <div className={styles.left}>
             <ChannelTree
-              change={(key, type, provider) => {
+              change={(key, type, provider, data) => {
                 DataCollectModel.id = key;
                 DataCollectModel.type = type;
                 DataCollectModel.provider = provider;
+                DataCollectModel.data = data || {};
               }}
             />
           </div>

src/pages/link/DataCollect/components/Channel/Save/index.tsx

@@ -243,12 +243,12 @@ export default (props: Props) => {
             'x-component-props': {
               placeholder: '请输入用户名',
             },
-            'x-validator': [
-              {
-                required: true,
-                message: '请输入用户名',
-              },
-            ],
+            // 'x-validator': [
+            //   {
+            //     required: true,
+            //     message: '请输入用户名',
+            //   },
+            // ],
             'x-reactions': {
               dependencies: ['..provider'],
               fulfill: {
@@ -268,12 +268,12 @@ export default (props: Props) => {
             'x-component-props': {
               placeholder: '请输入密码',
             },
-            'x-validator': [
-              {
-                required: true,
-                message: '请输入密码',
-              },
-            ],
+            // 'x-validator': [
+            //   {
+            //     required: true,
+            //     message: '请输入密码',
+            //   },
+            // ],
             'x-reactions': {
               dependencies: ['..provider'],
               fulfill: {

src/pages/link/DataCollect/components/Device/Save/index.tsx

@@ -88,6 +88,14 @@ export default (props: Props) => {
             'x-component-props': {
               placeholder: '请输入从机地址',
             },
+            'x-reactions': {
+              dependencies: ['..provider'],
+              fulfill: {
+                state: {
+                  visible: '{{$deps[0]==="MODBUS_TCP"}}',
+                },
+              },
+            },
             'x-validator': [
               {
                 required: true,

src/pages/link/DataCollect/components/Point/CollectorCard/index.less

@@ -0,0 +1,106 @@
+.card-item {
+  display: flex;
+  width: 100%;
+  overflow: hidden;
+  border: 1px solid #e6e6e6;
+  .card-item-left {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    width: 96px;
+    padding: 30px 0 10px 15px;
+
+    .card-item-status {
+      position: absolute;
+      top: 0;
+      left: -12px;
+      display: flex;
+      justify-content: center;
+      width: 86px;
+      padding: 2px 0;
+      background: rgba(0, 0, 0, 0.06);
+      transform: skewX(-45deg);
+
+      .card-item-status-content {
+        transform: skewX(45deg);
+      }
+    }
+  }
+  .card-item-right {
+    width: calc(100% - 96px);
+    padding: 15px 20px;
+    overflow: hidden;
+    .card-item-right-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .card-item-right-title {
+        width: calc(100% - 100px);
+        color: rgba(0, 0, 0, 0.85);
+        font-size: 15px;
+        opacity: 0.85;
+      }
+      .card-item-right-action {
+        display: flex;
+        justify-content: flex-end;
+        width: 100px;
+        font-size: 20px;
+      }
+    }
+    .card-item-content {
+      display: flex;
+      .card-item-content-item {
+        flex-direction: row-reverse;
+        align-items: flex-start;
+        justify-content: space-around;
+        width: calc(50% - 20px);
+
+        .card-item-content-item-header {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          width: 100%;
+          margin-top: 10px;
+          .card-item-content-item-header-item {
+            display: flex;
+            color: #000;
+            font-size: 14px;
+          }
+          .card-item-content-item-header-title {
+            width: cala(100% - 40px);
+            color: #000;
+            font-size: 20px;
+            opacity: 0.85;
+          }
+          .card-item-content-item-header-action {
+            min-width: 40px;
+            color: rgba(0, 0, 0, 0.45);
+          }
+        }
+        .card-item-content-item-text {
+          margin: 5px 0;
+          color: rgba(0, 0, 0, 0.65);
+          font-size: 12px;
+          opacity: 0.85;
+        }
+        .card-item-content-item-tags {
+          display: flex;
+          margin-top: 10px;
+          .card-item-content-item-tag {
+            margin-right: 5px;
+            padding: 3px 12px;
+            color: rgba(0, 0, 0, 0.6);
+            background: #f3f3f3;
+          }
+        }
+      }
+      .content-item-border-right {
+        height: 50px;
+        margin: 20px 20px 0;
+        border-right: 1px solid #e0e4e8;
+      }
+    }
+  }
+}

src/pages/link/DataCollect/components/Point/CollectorCard/index.tsx

@@ -0,0 +1,152 @@
+import { useState } from 'react';
+import { Ellipsis } from '@/components';
+import './index.less';
+import { Badge, Popconfirm } from 'antd';
+import { DeleteOutlined, EditOutlined, FormOutlined, RedoOutlined } from '@ant-design/icons';
+import OpcSave from '../Save/opc-ua';
+import ModbusSave from '../Save/modbus';
+import service from '@/pages/link/DataCollect/service';
+import { onlyMessage } from '@/utils/util';
+
+export interface PointCardProps {
+  item: Partial<PointItem>;
+  reload: () => void;
+}
+
+const opcImage = require('/public/images/DataCollect/device-opcua.png');
+const modbusImage = require('/public/images/DataCollect/device-modbus.png');
+
+export default (props: PointCardProps) => {
+  const { item } = props;
+  const [editVisible, setEditVisible] = useState<boolean>(false);
+
+  const saveComponent = () => {
+    if (item.provider === 'OPC_UA') {
+      return (
+        <OpcSave
+          close={() => {
+            setEditVisible(false);
+          }}
+          reload={() => {
+            setEditVisible(false);
+          }}
+          data={item}
+        />
+      );
+    }
+    return (
+      <ModbusSave
+        close={() => {
+          setEditVisible(false);
+        }}
+        reload={() => {
+          setEditVisible(false);
+        }}
+        data={item}
+      />
+    );
+  };
+  return (
+    <div className={'card-item'}>
+      <div className={'card-item-left'}>
+        <div className={'card-item-status'}>
+          <div className={'card-item-status-content'}>
+            <Badge
+              status={item.state?.value === 'enabled' ? 'success' : 'error'}
+              text={item.state?.text}
+            />
+          </div>
+        </div>
+        <div className={'card-item-avatar'}>
+          <img
+            width={88}
+            height={88}
+            src={item.provider === 'OPC_UA' ? opcImage : modbusImage}
+            alt={''}
+          />
+        </div>
+      </div>
+      <div className={'card-item-right'}>
+        <div className={'card-item-body'}>
+          <div className={'card-item-right-header'}>
+            <div className={'card-item-right-title'}>
+              <Ellipsis title={item.name} />
+            </div>
+            <div className={'card-item-right-action'}>
+              <Popconfirm
+                title={'确认删除'}
+                onConfirm={async () => {
+                  if (item.id) {
+                    const resp = await service.removePoint(item.id);
+                    if (resp.status === 200) {
+                      onlyMessage('操作成功！');
+                      props.reload();
+                    }
+                  }
+                }}
+              >
+                <DeleteOutlined style={{ marginRight: 10 }} />
+              </Popconfirm>
+              <FormOutlined
+                onClick={() => {
+                  setEditVisible(true);
+                }}
+              />
+            </div>
+          </div>
+          <div className={'card-item-content'}>
+            <div className={'card-item-content-item'}>
+              <div className={'card-item-content-item-header'}>
+                <div className={'card-item-content-item-header-title'}>
+                  <Ellipsis title={'123455123455123455(int8)'} />
+                </div>
+                <div className={'card-item-content-item-header-action'}>
+                  <EditOutlined style={{ marginRight: 5 }} onClick={() => {}} />
+                  <RedoOutlined />
+                </div>
+              </div>
+              <div className={'card-item-content-item-text'}>
+                <Ellipsis title={'12345670200101010101010101'} />
+              </div>
+              <div className={'card-item-content-item-text'}>
+                <Ellipsis title={'2011-10-10 09:00:00'} />
+              </div>
+            </div>
+            <div className={'content-item-border-right'}></div>
+            <div className={'card-item-content-item'}>
+              <div className={'card-item-content-item-header'}>
+                <div className={'card-item-content-item-header-item'}>
+                  <div>
+                    <Ellipsis title={item.configuration?.parameter?.quantity} />
+                  </div>
+                  <div style={{ width: 85, opacity: 0.75 }}>(读取寄存器)</div>
+                </div>
+                <div className={'card-item-content-item-header-item'}>
+                  <div>
+                    <Ellipsis title={item.configuration?.parameter?.address} />
+                  </div>
+                  <div style={{ width: 40, opacity: 0.75 }}>(地址)</div>
+                </div>
+                <div className={'card-item-content-item-header-item'}>
+                  <div>
+                    <Ellipsis title={item.configuration?.codec?.configuration?.scaleFactor} />
+                  </div>
+                  <div style={{ width: 72, opacity: 0.75 }}>(缩放因子)</div>
+                </div>
+              </div>
+              <div className={'card-item-content-item-tags'}>
+                <div className={'card-item-content-item-tag'}>
+                  {(item?.accessModes || []).map((i) => i?.text).join(',')}
+                </div>
+                <div className={'card-item-content-item-tag'}>
+                  采集频率{item?.configuration?.interval}s
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      {editVisible && saveComponent()}
+    </div>
+  );
+};

src/pages/link/DataCollect/components/Point/Save/modbus.tsx

@@ -3,11 +3,20 @@ import { createForm } from '@formily/core';
 import { createSchemaField } from '@formily/react';
 import React, { useEffect, useState } from 'react';
 import * as ICONS from '@ant-design/icons';
-import { Form, FormGrid, FormItem, Input, Select, NumberPicker, Password } from '@formily/antd';
+import {
+  Form,
+  FormGrid,
+  FormItem,
+  Input,
+  Select,
+  NumberPicker,
+  Password,
+  Checkbox,
+} from '@formily/antd';
 import type { ISchema } from '@formily/json-schema';
-// import service from '@/pages/link/DataCollect/service';
+import service from '@/pages/link/DataCollect/service';
 import { PermissionButton } from '@/components';
-// import { onlyMessage } from '@/utils/util';
+import { onlyMessage } from '@/utils/util';
 
 interface Props {
   data: Partial<PointItem>;
@@ -36,6 +45,7 @@ export default (props: Props) => {
       NumberPicker,
       Password,
       FormGrid,
+      Checkbox,
     },
     scope: {
       icon(name: any) {
@@ -232,7 +242,6 @@ export default (props: Props) => {
                 width: '100%',
               },
             },
-            enum: [],
             'x-validator': [
               {
                 required: true,
@@ -240,24 +249,35 @@ export default (props: Props) => {
               },
             ],
           },
+          features: {
+            title: '采集特性',
+            type: 'array',
+            'x-component': 'Checkbox.Group',
+            'x-decorator': 'FormItem',
+            'x-decorator-props': {
+              gridSpan: 2,
+            },
+            enum: [
+              {
+                label: '只推送变化的数据',
+                value: 'changedOnly',
+              },
+            ],
+          },
         },
       },
     },
   };
 
   const save = async () => {
-    // const value = await form.submit<ProtocolItem>();
-    // const response: any = props.data?.id
-    //   ? await service.savePatch({ ...props.data, ...value })
-    //   : await service.save({ ...props.data, ...value });
-    // if (response && response?.status === 200) {
-    //   onlyMessage('操作成功');
-    //   props.reload();
-    //   if ((window as any).onTabSaveSuccess) {
-    //     (window as any).onTabSaveSuccess(response);
-    //     setTimeout(() => window.close(), 300);
-    //   }
-    // }
+    const value = await form.submit<PointItem>();
+    const response: any = props.data?.id
+      ? await service.updatePoint(props.data?.id, { ...props.data, ...value })
+      : await service.savePoint({ ...props.data, ...value });
+    if (response && response?.status === 200) {
+      onlyMessage('操作成功');
+      props.reload();
+    }
   };
 
   return (

src/pages/link/DataCollect/components/Point/Save/opc-ua.tsx

@@ -1,13 +1,23 @@
 import { Button, Modal } from 'antd';
-import { createForm } from '@formily/core';
+import { createForm, Field } from '@formily/core';
 import { createSchemaField } from '@formily/react';
 import React, { useEffect, useState } from 'react';
 import * as ICONS from '@ant-design/icons';
-import { Form, FormGrid, FormItem, Input, Select, NumberPicker, Password } from '@formily/antd';
+import {
+  Form,
+  FormGrid,
+  FormItem,
+  Input,
+  Select,
+  NumberPicker,
+  Password,
+  Checkbox,
+} from '@formily/antd';
 import type { ISchema } from '@formily/json-schema';
-// import service from '@/pages/link/DataCollect/service';
+import service from '@/pages/link/DataCollect/service';
 import { PermissionButton } from '@/components';
-// import { onlyMessage } from '@/utils/util';
+import { onlyMessage } from '@/utils/util';
+import { action } from '@formily/reactive';
 
 interface Props {
   data: Partial<PointItem>;
@@ -36,6 +46,7 @@ export default (props: Props) => {
       NumberPicker,
       Password,
       FormGrid,
+      Checkbox,
     },
     scope: {
       icon(name: any) {
@@ -44,6 +55,21 @@ export default (props: Props) => {
     },
   });
 
+  const getCodecProvider = () => service.queryCodecProvider();
+
+  const useAsyncDataSource = (services: (arg0: Field) => Promise<any>) => (field: Field) => {
+    field.loading = true;
+    services(field).then(
+      action.bound!((resp: any) => {
+        field.dataSource = (resp?.result || []).map((item: any) => ({
+          label: item.name,
+          value: item.id,
+        }));
+        field.loading = false;
+      }),
+    );
+  };
+
   const schema: ISchema = {
     type: 'object',
     properties: {
@@ -87,7 +113,7 @@ export default (props: Props) => {
             'x-component-props': {
               placeholder: '请选择数据类型',
             },
-            enum: [],
+            'x-reactions': '{{useAsyncDataSource(getSecurityPolicyList)}}',
             'x-validator': [
               {
                 required: true,
@@ -132,7 +158,6 @@ export default (props: Props) => {
                 width: '100%',
               },
             },
-            enum: [],
             'x-validator': [
               {
                 required: true,
@@ -140,24 +165,35 @@ export default (props: Props) => {
               },
             ],
           },
+          features: {
+            title: '采集特性',
+            type: 'array',
+            'x-component': 'Checkbox.Group',
+            'x-decorator': 'FormItem',
+            'x-decorator-props': {
+              gridSpan: 2,
+            },
+            enum: [
+              {
+                label: '只推送变化的数据',
+                value: 'changedOnly',
+              },
+            ],
+          },
         },
       },
     },
   };
 
-  const save = async () => {
-    // const value = await form.submit<ProtocolItem>();
-    // const response: any = props.data?.id
-    //   ? await service.savePatch({ ...props.data, ...value })
-    //   : await service.save({ ...props.data, ...value });
-    // if (response && response?.status === 200) {
-    //   onlyMessage('操作成功');
-    //   props.reload();
-    //   if ((window as any).onTabSaveSuccess) {
-    //     (window as any).onTabSaveSuccess(response);
-    //     setTimeout(() => window.close(), 300);
-    //   }
-    // }
+  const saveData = async () => {
+    const value = await form.submit<PointItem>();
+    const response: any = props.data?.id
+      ? await service.updatePoint(props.data?.id, { ...props.data, ...value })
+      : await service.savePoint({ ...props.data, ...value });
+    if (response && response?.status === 200) {
+      onlyMessage('操作成功');
+      props.reload();
+    }
   };
 
   return (
@@ -175,7 +211,7 @@ export default (props: Props) => {
           type="primary"
           key={2}
           onClick={() => {
-            save();
+            saveData();
           }}
           disabled={props.data?.id ? !permission.update : !permission.add}
         >
@@ -184,7 +220,7 @@ export default (props: Props) => {
       ]}
     >
       <Form form={form} layout="vertical">
-        <SchemaField schema={schema} />
+        <SchemaField schema={schema} scope={{ useAsyncDataSource, getCodecProvider }} />
       </Form>
     </Modal>
   );

src/pages/link/DataCollect/components/Point/Save/scan.less

@@ -0,0 +1,7 @@
+.right-item {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  padding: 5px 15px;
+  border-bottom: 1px solid #f0f0f0;
+}

src/pages/link/DataCollect/components/Point/Save/scan.tsx

@@ -1,96 +1,141 @@
-import { Button, Modal, Transfer, Tree } from 'antd';
-import type { TransferDirection, TransferItem } from 'antd/es/transfer';
-import { DataNode } from 'antd/es/tree';
+import { Button, Empty, Modal, Transfer, Tree } from 'antd';
+import type { TransferDirection } from 'antd/es/transfer';
 import { useEffect, useState } from 'react';
+import service from '@/pages/link/DataCollect/service';
+import './scan.less';
+import { CloseOutlined } from '@ant-design/icons';
 
 interface Props {
-  // data: Partial<PointItem>;
+  channelId?: string;
   close: () => void;
   reload: () => void;
 }
 
 interface TreeTransferProps {
-  dataSource: DataNode[];
+  dataSource: any[];
   targetKeys: string[];
   onChange: (targetKeys: string[], direction: TransferDirection, moveKeys: string[]) => void;
+  channelId?: string;
 }
 
-const TreeTransfer = ({ dataSource, targetKeys, ...restProps }: TreeTransferProps) => {
-  const transferDataSource: TransferItem[] = [];
-  function flatten(list: DataNode[] = []) {
-    list.forEach((item) => {
-      transferDataSource.push(item as TransferItem);
-      flatten(item.children);
-    });
-  }
-  useEffect(() => {
-    flatten(dataSource);
-  }, [dataSource]);
+const TreeTransfer = ({ dataSource, targetKeys, channelId, ...restProps }: TreeTransferProps) => {
+  const [transferDataSource, setTransferDataSource] = useState<any[]>(dataSource);
 
-  // Customize Table Transfer
   const isChecked = (selectedKeys: (string | number)[], eventKey: string | number) =>
     selectedKeys.includes(eventKey);
 
-  const generateTree = (treeNodes: DataNode[] = [], checkedKeys: string[] = []): DataNode[] =>
+  const generateTree = (treeNodes: any[] = [], checkedKeys: string[] = []): any[] =>
     treeNodes.map(({ children, ...props }) => ({
       ...props,
       disabled: checkedKeys.includes(props.key as string),
       children: generateTree(children, checkedKeys),
     }));
 
-  // const queryTree = (treeNodes: DataNode[] = [], key: string) => {
-  //   treeNodes.forEach(item => {
-  //     if(item.key === key){
-  //       return item
-  //     }
-  //     if (item.children) {
-  //       return queryTree(item.children)
-  //     }
-  //     return {}
-  //   })
-  //   return {}
-  // }
-  //
-  // const generateTargetTree = (treeNodes: DataNode[] = []) => {
-  //   return targetKeys.map(item => {
-  //     const obj = {}
-  //     const obj = treeNodes.find(i => item === i.key)
-  //     return obj
-  //   })
-  // }
+  const queryDataByID = (list: any[] = [], key: string): any => {
+    for (let i = 0; i < list.length; i++) {
+      if (list[i].key === key) {
+        return list[i];
+      }
+      if (list[i].children) {
+        return queryDataByID(list[i].children, key);
+      }
+    }
+  };
 
-  console.log(targetKeys);
+  const generateTargetTree = (treeNodes: any[] = []): any[] => {
+    return treeNodes.map((item) => queryDataByID(transferDataSource, item));
+  };
+
+  const updateTreeData = (list: any[], key: React.Key, children: any[]): any[] =>
+    list.map((node) => {
+      if (node.key === key) {
+        return {
+          ...node,
+          children,
+        };
+      }
+      if (node.children) {
+        return {
+          ...node,
+          children: updateTreeData(node.children, key, children),
+        };
+      }
+      return node;
+    });
+
+  const onLoadData = ({ key, children }: any) =>
+    new Promise<void>(async (resolve) => {
+      if (children) {
+        resolve();
+        return;
+      }
+      const resp = await service.scanOpcUAList({
+        id: channelId,
+        nodeId: key,
+      });
+      if (resp.status === 200) {
+        setTransferDataSource((origin) => updateTreeData(origin, key, resp.result));
+      }
+      resolve();
+    });
 
   return (
     <Transfer
       {...restProps}
       targetKeys={targetKeys}
       dataSource={transferDataSource}
-      className="tree-transfer"
       render={(item) => item.title!}
       showSelectAll={false}
+      titles={['源数据', '目标数据']}
+      oneWay
     >
-      {({ direction, onItemSelect, selectedKeys }) => {
+      {({ direction, onItemSelect, selectedKeys, onItemRemove }) => {
         if (direction === 'left') {
           const checkedKeys = [...selectedKeys, ...targetKeys];
           return (
-            <Tree
-              blockNode
-              checkable
-              checkStrictly
-              defaultExpandAll
-              checkedKeys={checkedKeys}
-              treeData={generateTree(dataSource, targetKeys)}
-              onCheck={(_, { node: { key } }) => {
-                onItemSelect(key as string, !isChecked(checkedKeys, key));
-              }}
-              onSelect={(_, { node: { key } }) => {
-                onItemSelect(key as string, !isChecked(checkedKeys, key));
-              }}
-            />
+            <div style={{ margin: '10px 0' }}>
+              <Tree
+                blockNode
+                checkable
+                checkStrictly
+                checkedKeys={checkedKeys}
+                height={250}
+                treeData={generateTree(dataSource, targetKeys)}
+                onCheck={(_, { node: { key } }) => {
+                  onItemSelect(key as string, !isChecked(checkedKeys, key));
+                }}
+                onSelect={(_, { node: { key } }) => {
+                  onItemSelect(key as string, !isChecked(checkedKeys, key));
+                }}
+                loadData={onLoadData}
+              />
+            </div>
           );
         } else {
-          return <Tree blockNode defaultExpandAll treeData={[]} />;
+          if (targetKeys.length) {
+            return (
+              <div>
+                {generateTargetTree(targetKeys).map((item) => {
+                  return (
+                    <div className={'right-item'} key={item.key}>
+                      <div>{item.title || item.key}</div>
+                      <div>
+                        <CloseOutlined
+                          onClick={() => {
+                            if (onItemRemove) {
+                              onItemRemove([item.key]);
+                            }
+                          }}
+                        />
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            );
+          } else {
+            return <Empty style={{ marginTop: 10 }} />;
+          }
         }
       }}
     </Transfer>
@@ -99,22 +144,32 @@ const TreeTransfer = ({ dataSource, targetKeys, ...restProps }: TreeTransferProp
 
 export default (props: Props) => {
   const [targetKeys, setTargetKeys] = useState<string[]>([]);
+  const [treeData, setTreeData] = useState<any[]>([]);
+  // const [treeData, setTreeData] = useState<any[]>([]);
   const onChange = (keys: string[]) => {
     setTargetKeys(keys);
   };
 
-  const treeData: DataNode[] = [
-    { key: '0-0', title: '0-0' },
-    {
-      key: '0-1',
-      title: '0-1',
-      children: [
-        { key: '0-1-0', title: '0-1-0' },
-        { key: '0-1-1', title: '0-1-1' },
-      ],
-    },
-    { key: '0-2', title: '0-3' },
-  ];
+  useEffect(() => {
+    if (props.channelId) {
+      service
+        .scanOpcUAList({
+          id: props.channelId,
+        })
+        .then((resp) => {
+          if (resp.status === 200) {
+            const list = resp.result.map((item: any) => {
+              return {
+                ...item,
+                key: item.id,
+                title: item.name,
+              };
+            });
+            setTreeData(list);
+          }
+        });
+    }
+  }, [props.channelId]);
 
   return (
     <Modal
@@ -138,7 +193,12 @@ export default (props: Props) => {
         </Button>,
       ]}
     >
-      <TreeTransfer dataSource={treeData} targetKeys={targetKeys} onChange={onChange} />;
+      <TreeTransfer
+        channelId={props.channelId}
+        dataSource={treeData}
+        targetKeys={targetKeys}
+        onChange={onChange}
+      />
     </Modal>
   );
 };

src/pages/link/DataCollect/components/Point/index.tsx

@@ -4,28 +4,25 @@ import type { ProColumns } from '@jetlinks/pro-table';
 import { useEffect, useState } from 'react';
 import { useDomFullHeight } from '@/hooks';
 import service from '@/pages/link/DataCollect/service';
-import CollectorCard from '@/components/ProTableCard/CardItems/DataCollect/device';
+import CollectorCard from './CollectorCard/index';
 import { Empty, PermissionButton } from '@/components';
 import { Card, Col, Pagination, Row } from 'antd';
 import { model } from '@formily/reactive';
 import ModbusSave from '@/pages/link/DataCollect/components/Point/Save/modbus';
-import OpcUASave from '@/pages/link/DataCollect/components/Point/Save/opc-ua';
 import Scan from '@/pages/link/DataCollect/components/Point/Save/scan';
 
 interface Props {
   type: boolean; // true: 综合查询  false: 数据采集
-  id?: Partial<string>;
+  data?: Partial<CollectorItem>;
   provider?: 'OPC_UA' | 'MODBUS_TCP';
 }
 
 const PointModel = model<{
   m_visible: boolean;
-  p_visible: boolean;
   p_add_visible: boolean;
   current: Partial<PointItem>;
 }>({
   m_visible: false,
-  p_visible: false,
   p_add_visible: false,
   current: {},
 });
@@ -48,15 +45,40 @@ export default observer((props: Props) => {
     {
       title: 'ID',
       dataIndex: 'id',
-      width: 100,
-      ellipsis: true,
-      fixed: 'left',
     },
     {
       title: '名称',
       dataIndex: 'name',
-      ellipsis: true,
-      width: 200,
+    },
+    {
+      title: '通讯协议',
+      dataIndex: 'provider',
+      valueType: 'select',
+      valueEnum: {
+        OPC_UA: {
+          text: 'OPC_UA',
+          status: 'OPC_UA',
+        },
+        MODBUS_TCP: {
+          text: 'MODBUS_TCP',
+          status: 'MODBUS_TCP',
+        },
+      },
+    },
+    {
+      title: '状态',
+      dataIndex: 'state',
+      valueType: 'select',
+      valueEnum: {
+        enabled: {
+          text: '正常',
+          status: 'enabled',
+        },
+        disabled: {
+          text: '禁用',
+          status: 'disabled',
+        },
+      },
     },
   ];
   const handleSearch = (params: any) => {
@@ -68,7 +90,7 @@ export default observer((props: Props) => {
         terms: [
           ...params?.terms,
           {
-            terms: [{ column: 'collectorId', value: props.id }],
+            terms: [{ column: 'collectorId', value: props.data?.id }],
           },
         ],
         sorts: [{ name: 'createTime', order: 'desc' }],
@@ -83,7 +105,7 @@ export default observer((props: Props) => {
 
   useEffect(() => {
     handleSearch(param);
-  }, [props.id]);
+  }, [props.data?.id]);
 
   return (
     <div>
@@ -120,12 +142,17 @@ export default observer((props: Props) => {
                 </PermissionButton>
               </div>
             )}
-            {dataSource?.data.length > 0 ? (
+            {dataSource?.data.length ? (
               <>
                 <Row gutter={[18, 18]} style={{ marginTop: 10 }}>
                   {(dataSource?.data || []).map((record: any) => (
-                    <Col key={record.id} span={props.type ? 8 : 12}>
-                      <CollectorCard {...record} />
+                    <Col key={record.id} span={12}>
+                      <CollectorCard
+                        item={record}
+                        reload={() => {
+                          handleSearch(param);
+                        }}
+                      />
                     </Col>
                   ))}
                 </Row>
@@ -182,24 +209,12 @@ export default observer((props: Props) => {
           }}
         />
       )}
-      {PointModel.p_visible && (
-        <OpcUASave
-          data={PointModel.current}
-          // channelId={props.id}
-          close={() => {
-            PointModel.p_visible = false;
-          }}
-          reload={() => {
-            PointModel.p_visible = false;
-            handleSearch(param);
-          }}
-        />
-      )}
       {PointModel.p_add_visible && (
         <Scan
           close={() => {
             PointModel.p_add_visible = false;
           }}
+          channelId={props.data?.channelId}
           reload={() => {
             PointModel.p_add_visible = false;
             handleSearch(param);

src/pages/link/DataCollect/components/Tree/index.tsx

@@ -25,7 +25,12 @@ const TreeModel = model<{
   current: {},
 });
 interface Props {
-  change: (key: string, type: 'channel' | 'device', provider: 'OPC_UA' | 'MODBUS_TCP') => void;
+  change: (
+    key: string,
+    type: 'channel' | 'device',
+    provider: 'OPC_UA' | 'MODBUS_TCP',
+    data?: any,
+  ) => void;
 }
 
 export default observer((props: Props) => {
@@ -58,6 +63,7 @@ export default observer((props: Props) => {
       <div>
         <Input.Search
           placeholder="搜索"
+          allowClear
           onSearch={(val) => {
             TreeModel.param = {
               terms: [{ column: 'name', value: `%${val}%`, termType: 'like' }],
@@ -135,7 +141,7 @@ export default observer((props: Props) => {
                           className={styles.title}
                           onClick={() => {
                             TreeModel.selectedKeys = [i.id];
-                            props.change(i.id, 'device', item.provider);
+                            props.change(i.id, 'device', item.provider, i);
                           }}
                         >
                           <img width={'20px'} style={{ marginRight: 5 }} src={deviceImg} />

src/pages/link/DataCollect/service.ts

@@ -94,6 +94,19 @@ class Service {
       method: 'POST',
       data: params,
     });
+  public scanOpcUAList = (params: any) =>
+    request(
+      `/${SystemConst.API_BASE}/data-collect/opc/channel/${params.id}/nodes?nodeId=${
+        params?.nodeId || ''
+      }`,
+      {
+        method: 'GET',
+      },
+    );
+  public queryCodecProvider = () =>
+    request(`/${SystemConst.API_BASE}/things/collector/codecs`, {
+      method: 'GET',
+    });
 }
 
 const service = new Service();

src/pages/link/DataCollect/typings.d.ts

@@ -30,8 +30,8 @@ type PointItem = {
     maxConsecutiveErrors?: string;
   };
   features?: string[];
-  accessModes: string[];
-  configuration: ModbusItem | OpcuaItem;
+  accessModes: any[];
+  configuration: any; //ModbusItem | OpcuaItem;
   state?: {
     text: string;
     value: string;