fix: 通道配置优化

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

@@ -1,5 +1,5 @@
 import PermissionButton from '@/components/PermissionButton';
-import { Badge, Card, Empty, message, Tabs, Tooltip } from 'antd';
+import { Badge, Card, Empty, Input, message, Tabs, Tooltip } from 'antd';
 import { useEffect, useRef, useState } from 'react';
 import { useIntl } from 'umi';
 import styles from '@/pages/link/Channel/Opcua/Access/index.less';
@@ -24,7 +24,7 @@ const Modbus = () => {
   const [bindList, setBindList] = useState<any>([]);
   const [opcId, setOpcId] = useState<string>('');
   const actionRef = useRef<ActionType>();
-  const [param, setParam] = useState({});
+  const [param, setParam] = useState<any>({});
   const [visible, setVisible] = useState<boolean>(false);
   const [channel, setChannel] = useState<any>({});
   const [pointVisiable, setPointVisiable] = useState<boolean>(false);
@@ -34,6 +34,7 @@ const Modbus = () => {
   const [subscribeTopic] = useSendWebsocketMessage();
   const [propertyValue, setPropertyValue] = useState<any>({});
   const wsRef = useRef<any>();
+  const [filterList, setFilterList] = useState([]);
 
   const columns: ProColumns<any>[] = [
     {
@@ -174,7 +175,11 @@ const Modbus = () => {
       })
       .then((res) => {
         setBindList(res.result);
+        setFilterList(res.result);
         setOpcId(res.result?.[0]?.id);
+        setParam({
+          opcId: res.result?.[0]?.id,
+        });
       });
   };
 
@@ -201,40 +206,75 @@ const Modbus = () => {
         const { value } = payload;
         propertyValue[value.property] = value.formatValue;
         setPropertyValue({ ...propertyValue });
-        console.log(propertyValue);
       });
   }, [data]);
 
   return (
     <Card className={styles.list}>
-      <PermissionButton
-        onClick={() => {
-          setVisible(true);
-          setChannel({});
-        }}
-        isPermission={permission.add}
-        key="add"
-        icon={<PlusOutlined />}
-        type="dashed"
-        style={{ width: '200px', marginLeft: 20, marginBottom: 5 }}
-      >
-        新增通道
-      </PermissionButton>
-      {bindList.length > 0 ? (
-        <div style={{ display: 'flex' }}>
-          <div>
+      <div style={{ display: 'flex' }}>
+        <div>
+          <div style={{ width: '250px', marginTop: 15 }}>
+            <Input.Search
+              placeholder="请输入通道名称"
+              allowClear
+              onSearch={(value) => {
+                if (value) {
+                  const items = bindList.filter((item: any) => item.name.match(value));
+                  setFilterList(items);
+                  if (items.length === 0) {
+                    setParam({
+                      opcId: '',
+                    });
+                  } else {
+                    setParam({
+                      opcId: items[0]?.id,
+                    });
+                    setOpcId(items[0]?.id);
+                  }
+                } else {
+                  setFilterList(bindList);
+                  if (opcId) {
+                    setParam({
+                      opcId: opcId,
+                    });
+                  } else {
+                    setParam({
+                      opcId: '',
+                    });
+                  }
+                }
+              }}
+            />
+
+            <PermissionButton
+              onClick={() => {
+                setVisible(true);
+                setChannel({});
+              }}
+              isPermission={permission.add}
+              key="add"
+              icon={<PlusOutlined />}
+              type="dashed"
+              style={{ width: '100%', margin: '16px 0 18px 0' }}
+            >
+              新增通道
+            </PermissionButton>
+          </div>
+          {filterList.length > 0 ? (
             <Tabs
               style={{ height: 600 }}
               tabPosition={'left'}
-              defaultActiveKey={opcId}
+              activeKey={opcId}
               onChange={(e) => {
                 setOpcId(e);
-                console.log(e);
-                actionRef.current?.reload();
-                setParam({});
+                // console.log(e);
+                // actionRef.current?.reload();
+                setParam({
+                  opcId: e,
+                });
               }}
             >
-              {bindList.map((item: any) => (
+              {filterList.map((item: any) => (
                 <Tabs.TabPane
                   key={item.id}
                   tab={
@@ -288,56 +328,69 @@ const Modbus = () => {
                 ></Tabs.TabPane>
               ))}
             </Tabs>
-          </div>
-          <div style={{ width: '100%' }}>
-            <ProTable
-              actionRef={actionRef}
-              params={param}
-              columns={columns}
-              rowKey="id"
-              search={false}
-              headerTitle={
-                <>
-                  <PermissionButton
-                    onClick={() => {
-                      setPointVisiable(true);
-                      setCurrent({});
-                    }}
-                    isPermission={permission.add}
-                    key="add"
-                    icon={<PlusOutlined />}
-                    type="primary"
-                  >
-                    {intl.formatMessage({
-                      id: 'pages.data.option.add',
-                      defaultMessage: '新增',
-                    })}
-                  </PermissionButton>
-                </>
-              }
-              request={async (params) => {
-                const res = await service.queryMetadataConfig(opcId, deviceId, {
-                  ...params,
-                  sorts: [{ name: 'createTime', order: 'desc' }],
-                });
-                setData(res.result.data);
+          ) : (
+            <Empty description={<>暂无绑定通道</>} />
+          )}
+        </div>
+        <div style={{ width: '100%' }}>
+          <ProTable
+            actionRef={actionRef}
+            params={param}
+            columns={columns}
+            rowKey="id"
+            search={false}
+            headerTitle={
+              <>
+                <PermissionButton
+                  onClick={() => {
+                    setPointVisiable(true);
+                    setCurrent({});
+                  }}
+                  isPermission={permission.add}
+                  key="add"
+                  icon={<PlusOutlined />}
+                  type="primary"
+                >
+                  {intl.formatMessage({
+                    id: 'pages.data.option.add',
+                    defaultMessage: '新增',
+                  })}
+                </PermissionButton>
+              </>
+            }
+            request={async (params) => {
+              if (!params.opcId) {
                 return {
-                  code: res.message,
+                  code: 200,
                   result: {
-                    data: res.result.data,
+                    data: [],
                     pageIndex: 0,
                     pageSize: 0,
                     total: 0,
                   },
-                  status: res.status,
+                  status: 200,
                 };
-              }}
-            />
-          </div>
+              }
+              const res = await service.queryMetadataConfig(params.opcId, deviceId, {
+                ...params.terms,
+                sorts: [{ name: 'createTime', order: 'desc' }],
+              });
+              setData(res.result.data);
+              return {
+                code: res.message,
+                result: {
+                  data: res.result.data,
+                  pageIndex: 0,
+                  pageSize: 0,
+                  total: 0,
+                },
+                status: res.status,
+              };
+            }}
+          />
         </div>
-      ) : (
-        <Empty />
-      )}
+      </div>
+
       {visible && (
         <Save
           data={channel}

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

@@ -1,5 +1,5 @@
 import PermissionButton from '@/components/PermissionButton';
-import { Badge, Card, Empty, message, Tabs, Tooltip } from 'antd';
+import { Badge, Card, Empty, Input, message, Tabs, Tooltip } from 'antd';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { useIntl } from 'umi';
 import styles from '@/pages/link/Channel/Opcua/Access/index.less';
@@ -24,7 +24,9 @@ const Opcua = () => {
   const [bindList, setBindList] = useState<any>([]);
   const [opcId, setOpcId] = useState<string>('');
   const actionRef = useRef<ActionType>();
-  const [param, setParam] = useState({});
+  const [param, setParam] = useState<any>({
+    terms: [{ column: 'opcUaId', value: '' }],
+  });
   const [visible, setVisible] = useState<boolean>(false);
   const [channel, setChannel] = useState<any>({});
   const [pointVisiable, setPointVisiable] = useState<boolean>(false);
@@ -34,6 +36,7 @@ const Opcua = () => {
   const [subscribeTopic] = useSendWebsocketMessage();
   const [propertyValue, setPropertyValue] = useState<any>({});
   const wsRef = useRef<any>();
+  const [filterList, setFilterList] = useState([]);
 
   const columns: ProColumns<any>[] = [
     {
@@ -174,6 +177,7 @@ const Opcua = () => {
       })
       .then((res: any) => {
         setBindList(res.result);
+        setFilterList(res.result);
         setOpcId(res.result?.[0]?.id);
         setParam({
           terms: [{ column: 'opcUaId', value: res.result?.[0]?.id }],
@@ -223,26 +227,59 @@ const Opcua = () => {
 
   return (
     <Card className={styles.list}>
-      <PermissionButton
-        onClick={() => {
-          setVisible(true);
-          setChannel({});
-        }}
-        isPermission={permission.add}
-        key="add"
-        icon={<PlusOutlined />}
-        type="dashed"
-        style={{ width: '200px', margin: '16px 0 18px 20px' }}
-      >
-        新增通道
-      </PermissionButton>
-      {bindList.length > 0 ? (
-        <div style={{ display: 'flex' }}>
-          <div>
+      <div style={{ display: 'flex' }}>
+        <div>
+          <div style={{ width: '250px', marginTop: 15 }}>
+            <Input.Search
+              placeholder="请输入通道名称"
+              allowClear
+              onSearch={(value) => {
+                if (value) {
+                  const items = bindList.filter((item: any) => item.name.match(value));
+                  setFilterList(items);
+                  if (items.length === 0) {
+                    setParam({
+                      terms: [{ column: 'opcUaId', value: '' }],
+                    });
+                  } else {
+                    setParam({
+                      terms: [{ column: 'opcUaId', value: items[0]?.id }],
+                    });
+                    setOpcId(items[0]?.id);
+                  }
+                } else {
+                  setFilterList(bindList);
+                  if (opcId) {
+                    setParam({
+                      terms: [{ column: 'opcUaId', value: opcId }],
+                    });
+                  } else {
+                    setParam({
+                      terms: [{ column: 'opcUaId', value: '' }],
+                    });
+                  }
+                }
+              }}
+            />
+            <PermissionButton
+              onClick={() => {
+                setVisible(true);
+                setChannel({});
+              }}
+              isPermission={permission.add}
+              key="add"
+              icon={<PlusOutlined />}
+              type="dashed"
+              style={{ width: '100%', margin: '16px 0 18px 0' }}
+            >
+              新增通道
+            </PermissionButton>
+          </div>
+          {filterList.length > 0 ? (
             <Tabs
               style={{ height: 600 }}
               tabPosition={'left'}
-              defaultActiveKey={opcId}
+              activeKey={opcId}
               onChange={(e) => {
                 setOpcId(e);
                 setParam({
@@ -250,7 +287,7 @@ const Opcua = () => {
                 });
               }}
             >
-              {bindList.map((item: any) => (
+              {filterList.map((item: any) => (
                 <Tabs.TabPane
                   key={item.id}
                   tab={
@@ -306,56 +343,69 @@ const Opcua = () => {
                 ></Tabs.TabPane>
               ))}
             </Tabs>
-          </div>
-          <div style={{ width: '100%' }}>
-            <ProTable
-              actionRef={actionRef}
-              params={param}
-              columns={columns}
-              rowKey="id"
-              search={false}
-              headerTitle={
-                <>
-                  <PermissionButton
-                    onClick={() => {
-                      setPointVisiable(true);
-                      setCurrent({});
-                    }}
-                    isPermission={permission.add}
-                    key="add"
-                    icon={<PlusOutlined />}
-                    type="primary"
-                  >
-                    {intl.formatMessage({
-                      id: 'pages.data.option.add',
-                      defaultMessage: '新增',
-                    })}
-                  </PermissionButton>
-                </>
-              }
-              request={async (params) => {
-                const res = await service.PointList({
-                  ...params,
-                  sorts: [{ name: 'createTime', order: 'desc' }],
-                });
-                setData(res.result.data);
+          ) : (
+            <Empty description={<>暂无绑定通道</>} />
+          )}
+        </div>
+        <div style={{ width: '100%' }}>
+          <ProTable
+            actionRef={actionRef}
+            params={param}
+            columns={columns}
+            rowKey="id"
+            search={false}
+            headerTitle={
+              <>
+                <PermissionButton
+                  onClick={() => {
+                    setPointVisiable(true);
+                    setCurrent({});
+                  }}
+                  isPermission={permission.add}
+                  key="add"
+                  icon={<PlusOutlined />}
+                  type="primary"
+                >
+                  {intl.formatMessage({
+                    id: 'pages.data.option.add',
+                    defaultMessage: '新增',
+                  })}
+                </PermissionButton>
+              </>
+            }
+            request={async (params) => {
+              if (Object.keys(params).length && !params.terms[0].value) {
                 return {
-                  code: res.message,
+                  code: 200,
                   result: {
-                    data: res.result.data,
+                    data: [],
                     pageIndex: 0,
                     pageSize: 0,
                     total: 0,
                   },
-                  status: res.status,
+                  status: 200,
                 };
-              }}
-            />
-          </div>
+              }
+              const res = await service.PointList({
+                ...params,
+                sorts: [{ name: 'createTime', order: 'desc' }],
+              });
+              setData(res.result.data);
+              return {
+                code: res.message,
+                result: {
+                  data: res.result.data,
+                  pageIndex: res.result.pageIndex,
+                  pageSize: res.result.pageSize,
+                  total: res.result.total,
+                },
+                status: res.status,
+              };
+            }}
+          />
         </div>
-      ) : (
-        <Empty />
-      )}
+      </div>
+
       {visible && edit}
       {pointVisiable && (
         <AddPoint

src/pages/link/Channel/Modbus/Access/index.less

@@ -1,5 +1,8 @@
 .list {
   :global {
+    .ant-tabs-tab.ant-tabs-tab-active {
+      background-color: #fafafa;
+    }
     .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
       color: #1d39c4;
       text-shadow: none;

src/pages/link/Channel/Modbus/Access/index.tsx

@@ -24,7 +24,7 @@ const Access = () => {
   const intl = useIntl();
   const actionRef = useRef<ActionType>();
   const location = useLocation<string>();
-  const [param, setParam] = useState({});
+  const [param, setParam] = useState<any>({});
   const [opcUaId, setOpcUaId] = useState<any>('');
   const { permission } = PermissionButton.usePermission('link/Channel/Modbus');
   const [deviceVisiable, setDeviceVisiable] = useState<boolean>(false);
@@ -37,6 +37,7 @@ const Access = () => {
   const [subscribeTopic] = useSendWebsocketMessage();
   const [propertyValue, setPropertyValue] = useState<any>({});
   const wsRef = useRef<any>();
+  const [filterList, setFilterList] = useState([]);
 
   const columns: ProColumns<any>[] = [
     {
@@ -174,14 +175,17 @@ const Access = () => {
         }),
       )
       .then((res: any) => {
-        console.log(res.result);
         if (res.status === 200) {
-          setDeviceId(res.result[0]?.id);
-          setProductId(res.result[0]?.productId);
-          setParam({
-            terms: [{ column: 'deviceId', value: res.result[0]?.deviceId }],
-          });
-          setBindList(res.result);
+          if (res.result && res.result !== 0) {
+            setDeviceId(res.result[0]?.id);
+            setProductId(res.result[0]?.productId);
+            setBindList(res.result);
+            setFilterList(res.result);
+            setParam({
+              deviceId: res.result[0]?.id,
+              // terms: [{ column: 'deviceId', value: res.result[0]?.deviceId }],
+            });
+          }
         }
       });
   };
@@ -216,38 +220,77 @@ const Access = () => {
     return () => wsRef.current && wsRef.current?.unsubscribe();
   }, [data]);
 
+  useEffect(() => {
+    console.log(deviceId);
+  }, [deviceId]);
+
   return (
     <PageContainer>
       <Card className={styles.list}>
-        <PermissionButton
-          onClick={() => {
-            setDeviceVisiable(true);
-          }}
-          isPermission={permission.add}
-          key="add"
-          icon={<PlusOutlined />}
-          type="dashed"
-          style={{ width: '200px', margin: '16px 0 18px 20px' }}
-        >
-          绑定设备
-        </PermissionButton>
-        {bindList.length > 0 ? (
-          <div style={{ display: 'flex' }}>
-            <div>
+        <div style={{ display: 'flex' }}>
+          <div>
+            <div style={{ width: '250px', marginTop: 15 }}>
+              <Input.Search
+                placeholder="请输入绑定设备名称"
+                allowClear
+                onSearch={(value) => {
+                  if (value) {
+                    const items = bindList.filter((item: any) => item.name.match(value));
+                    setFilterList(items);
+                    setFilterList(items);
+                    if (items.length === 0) {
+                      setParam({
+                        deviceId: undefined,
+                      });
+                    } else {
+                      setParam({
+                        deviceId: items[0]?.id,
+                        // terms: [{ column: 'deviceId', value: items[0]?.deviceId }],
+                      });
+                      setDeviceId(items[0]?.id);
+                    }
+                  } else {
+                    setFilterList(bindList);
+                    if (deviceId) {
+                      setParam({
+                        deviceId: deviceId,
+                      });
+                    } else {
+                      setParam({
+                        deviceId: undefined,
+                      });
+                    }
+                  }
+                }}
+              />
+              <PermissionButton
+                onClick={() => {
+                  setDeviceVisiable(true);
+                }}
+                isPermission={permission.add}
+                key="add"
+                icon={<PlusOutlined />}
+                type="dashed"
+                style={{ width: '100%', margin: '16px 0 18px 0' }}
+              >
+                绑定设备
+              </PermissionButton>
+            </div>
+            {filterList.length > 0 ? (
               <Tabs
                 style={{ height: 600 }}
                 tabPosition={'left'}
-                defaultActiveKey={deviceId}
+                activeKey={deviceId}
                 onChange={(e) => {
                   setDeviceId(e);
                   const items = bindList.find((item: any) => item.id === e);
                   setProductId(items?.productId);
                   setParam({
-                    terms: [{ column: 'deviceId', value: e }],
+                    deviceId: e,
                   });
                 }}
               >
-                {bindList.map((item: any) => (
+                {filterList.map((item: any) => (
                   <Tabs.TabPane
                     key={item.id}
                     tab={
@@ -275,76 +318,89 @@ const Access = () => {
                   ></Tabs.TabPane>
                 ))}
               </Tabs>
-            </div>
-            <div style={{ width: '100%' }}>
-              <ProTable
-                actionRef={actionRef}
-                params={param}
-                columns={columns}
-                rowKey="id"
-                search={false}
-                headerTitle={
-                  <>
-                    <PermissionButton
-                      onClick={() => {
-                        setPointVisiable(true);
-                        setCurrent({});
+            ) : (
+              <Empty description={<>暂无绑定设备</>} />
+            )}
+          </div>
+          <div style={{ width: '100%' }}>
+            <ProTable
+              actionRef={actionRef}
+              params={param}
+              columns={columns}
+              rowKey="id"
+              search={false}
+              headerTitle={
+                <>
+                  <PermissionButton
+                    onClick={() => {
+                      setPointVisiable(true);
+                      setCurrent({});
+                    }}
+                    isPermission={permission.add}
+                    key="add"
+                    icon={<PlusOutlined />}
+                    type="primary"
+                  >
+                    {intl.formatMessage({
+                      id: 'pages.data.option.add',
+                      defaultMessage: '新增',
+                    })}
+                  </PermissionButton>
+                  <div style={{ marginLeft: 10 }}>
+                    <Input.Search
+                      placeholder="请输入属性ID"
+                      allowClear
+                      onSearch={(value) => {
+                        console.log(value);
+                        if (value) {
+                          setParam({
+                            terms: [
+                              { column: 'metadataId', value: `%${value}%`, termType: 'like' },
+                            ],
+                          });
+                        } else {
+                          setParam({
+                            deviceId: deviceId,
+                            // terms: [{ column: 'deviceId', value: deviceId }],
+                          });
+                        }
                       }}
-                      isPermission={permission.add}
-                      key="add"
-                      icon={<PlusOutlined />}
-                      type="primary"
-                    >
-                      {intl.formatMessage({
-                        id: 'pages.data.option.add',
-                        defaultMessage: '新增',
-                      })}
-                    </PermissionButton>
-                    <div style={{ marginLeft: 10 }}>
-                      <Input.Search
-                        placeholder="请输入属性ID"
-                        allowClear
-                        onSearch={(value) => {
-                          console.log(value);
-                          if (value) {
-                            setParam({
-                              terms: [
-                                { column: 'metadataId', value: `%${value}%`, termType: 'like' },
-                              ],
-                            });
-                          } else {
-                            setParam({
-                              terms: [{ column: 'deviceId', value: deviceId }],
-                            });
-                          }
-                        }}
-                      />
-                    </div>
-                  </>
-                }
-                request={async (params) => {
-                  const res = await service.queryMetadataConfig(opcUaId, deviceId, {
-                    ...params,
-                    sorts: [{ name: 'createTime', order: 'desc' }],
-                  });
-                  setData(res.result.data);
+                    />
+                  </div>
+                </>
+              }
+              request={async (params) => {
+                if (!params.deviceId) {
                   return {
-                    code: res.message,
+                    code: 200,
                     result: {
-                      data: res.result.data,
+                      data: [],
                       pageIndex: 0,
                       pageSize: 0,
                       total: 0,
                     },
-                    status: res.status,
+                    status: 200,
                   };
-                }}
-              />
-            </div>
+                }
+                const res = await service.queryMetadataConfig(opcUaId, params.deviceId, {
+                  ...params.terms,
+                  sorts: [{ name: 'createTime', order: 'desc' }],
+                });
+                setData(res.result.data);
+                return {
+                  code: res.message,
+                  result: {
+                    data: res.result.data,
+                    pageIndex: res.result.pageIndex,
+                    pageSize: res.result.pageSize,
+                    total: res.result.total,
+                  },
+                  status: res.status,
+                };
+              }}
+            />
           </div>
-        ) : (
-          <Empty />
-        )}
+        </div>
       </Card>
       {deviceVisiable && (
         <BindDevice

src/pages/link/Channel/Modbus/index.less

@@ -1,17 +1,12 @@
 .topCard {
   display: flex;
   align-items: center;
-
-  .img {
-    position: relative;
-    top: 10px;
-    left: 20px;
-  }
+  width: 100%;
 
   .text {
-    margin-left: 24px;
-
+    margin-left: 10px;
     .p1 {
+      min-width: 130px;
       height: 22px;
       margin-bottom: 7px;
       font-weight: 700;
@@ -20,6 +15,7 @@
     }
 
     .p2 {
+      min-width: 130px;
       height: 20px;
       color: rgba(0, 0, 0, 0.75);
       font-weight: 400;

src/pages/link/Channel/Modbus/index.tsx

@@ -33,7 +33,6 @@ const Modbus = () => {
   iconMap.set('2', require('/public/images/channel/2.png'));
   iconMap.set('3', require('/public/images/channel/3.png'));
   iconMap.set('4', require('/public/images/channel/4.png'));
-  const background = require('/public/images/channel/background.png');
 
   const columns: ProColumns<OpaUa>[] = [
     {
@@ -144,7 +143,7 @@ const Modbus = () => {
           key="link"
           type="link"
           tooltip={{
-            title: '设备接入',
+            title: '数据点绑定',
           }}
           onClick={() => {
             history.push(`${getMenuPathByCode('link/Channel/Modbus/Access')}?id=${record.id}`);
@@ -211,15 +210,8 @@ const Modbus = () => {
             <Col span={6} key={item.numeber}>
               <Card>
                 <div className={styles.topCard}>
-                  <div
-                    style={{
-                      background: `url(${background}) no-repeat`,
-                      backgroundSize: '100% 100%',
-                      width: '56px',
-                      height: '56px',
-                    }}
-                  >
-                    <img src={iconMap.get(item.numeber)} className={styles.img} />
+                  <div>
+                    <img src={iconMap.get(item.numeber)} />
                   </div>
                   <div className={styles.text}>
                     <p className={styles.p1}>{item.title}</p>

src/pages/link/Channel/Opcua/Access/index.less

@@ -1,5 +1,8 @@
 .list {
   :global {
+    .ant-tabs-tab.ant-tabs-tab-active {
+      background-color: #fafafa;
+    }
     .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
       color: #1d39c4;
       text-shadow: none;

src/pages/link/Channel/Opcua/Access/index.tsx

@@ -24,7 +24,9 @@ const Access = () => {
   const intl = useIntl();
   const actionRef = useRef<ActionType>();
   const location = useLocation<string>();
-  const [param, setParam] = useState({});
+  const [param, setParam] = useState<any>({
+    terms: [{ column: 'deviceId', value: '' }],
+  });
   const [opcUaId, setOpcUaId] = useState<any>('');
   const { permission } = PermissionButton.usePermission('link/Channel/Opcua');
   const [deviceVisiable, setDeviceVisiable] = useState<boolean>(false);
@@ -38,6 +40,7 @@ const Access = () => {
   const [propertyValue, setPropertyValue] = useState<any>({});
   const [bindDeviceId, setBindDeviceId] = useState<any>('');
   const wsRef = useRef<any>();
+  const [filterList, setFilterList] = useState([]);
 
   const columns: ProColumns<any>[] = [
     {
@@ -169,13 +172,16 @@ const Access = () => {
   const getBindList = (params: any) => {
     service.getBindList(params).then((res: any) => {
       if (res.status === 200) {
-        setDeviceId(res.result[0]?.deviceId);
-        setProductId(res.result[0]?.productId);
-        setBindDeviceId(res.result[0]?.id);
-        setParam({
-          terms: [{ column: 'deviceId', value: res.result[0]?.deviceId }],
-        });
-        setBindList(res.result);
+        if (res.result && res.result !== 0) {
+          setProductId(res.result[0]?.productId);
+          setBindDeviceId(res.result[0]?.id);
+          setBindList(res.result);
+          setFilterList(res.result);
+          setDeviceId(res.result[0]?.deviceId);
+          setParam({
+            terms: [{ column: 'deviceId', value: res.result[0]?.deviceId }],
+          });
+        }
       }
     });
   };
@@ -219,29 +225,62 @@ const Access = () => {
   return (
     <PageContainer>
       <Card className={styles.list}>
-        <PermissionButton
-          onClick={() => {
-            setDeviceVisiable(true);
-          }}
-          isPermission={permission.add}
-          key="add"
-          icon={<PlusOutlined />}
-          type="dashed"
-          style={{ width: '200px', margin: '16px 0 18px 20px' }}
-        >
-          绑定设备
-        </PermissionButton>
-        {bindList.length > 0 ? (
-          <div style={{ display: 'flex' }}>
-            <div>
+        <div style={{ display: 'flex' }}>
+          <div>
+            <div style={{ width: '250px', marginTop: 15 }}>
+              <Input.Search
+                placeholder="请输入绑定设备名称"
+                allowClear
+                onSearch={(value) => {
+                  if (value) {
+                    const items = bindList.filter((item: any) => item.name.match(value));
+                    setFilterList(items);
+                    if (items.length === 0) {
+                      setParam({
+                        terms: [{ column: 'deviceId', value: '' }],
+                      });
+                    } else {
+                      setParam({
+                        terms: [{ column: 'deviceId', value: items[0]?.deviceId }],
+                      });
+                      setDeviceId(items[0]?.deviceId);
+                    }
+                  } else {
+                    setFilterList(bindList);
+                    if (deviceId) {
+                      setParam({
+                        terms: [{ column: 'deviceId', value: deviceId }],
+                      });
+                    } else {
+                      setParam({
+                        terms: [{ column: 'deviceId', value: '' }],
+                      });
+                    }
+                  }
+                }}
+              />
+              <PermissionButton
+                onClick={() => {
+                  setDeviceVisiable(true);
+                }}
+                isPermission={permission.add}
+                key="add"
+                icon={<PlusOutlined />}
+                type="dashed"
+                style={{ width: '100%', margin: '16px 0 18px 0' }}
+              >
+                绑定设备
+              </PermissionButton>
+            </div>
+            {filterList.length > 0 ? (
               <Tabs
                 tabPosition={'left'}
-                defaultActiveKey={deviceId}
+                // defaultActiveKey={deviceId}
+                activeKey={deviceId}
                 style={{ height: 600 }}
                 onChange={(e) => {
                   setDeviceId(e);
                   const items = bindList.find((item: any) => item.deviceId === e);
-                  console.log(items);
                   setProductId(items?.productId);
                   setBindDeviceId(items?.id);
                   setParam({
@@ -249,7 +288,7 @@ const Access = () => {
                   });
                 }}
               >
-                {bindList.map((item: any) => (
+                {filterList.map((item: any) => (
                   <Tabs.TabPane
                     key={item.deviceId}
                     tab={
@@ -283,77 +322,89 @@ const Access = () => {
                   ></Tabs.TabPane>
                 ))}
               </Tabs>
-            </div>
-            <div style={{ width: '100%' }}>
-              <ProTable
-                actionRef={actionRef}
-                params={param}
-                columns={columns}
-                rowKey="id"
-                search={false}
-                headerTitle={
-                  <>
-                    <PermissionButton
-                      onClick={() => {
-                        setPointVisiable(true);
-                        setCurrent({});
+            ) : (
+              <Empty description={<>暂无绑定设备</>} />
+            )}
+          </div>
+          <div style={{ width: '100%' }}>
+            <ProTable
+              actionRef={actionRef}
+              params={param}
+              columns={columns}
+              rowKey="id"
+              search={false}
+              headerTitle={
+                <>
+                  <PermissionButton
+                    onClick={() => {
+                      setPointVisiable(true);
+                      setCurrent({});
+                    }}
+                    isPermission={permission.add}
+                    key="add"
+                    icon={<PlusOutlined />}
+                    type="primary"
+                  >
+                    {intl.formatMessage({
+                      id: 'pages.data.option.add',
+                      defaultMessage: '新增',
+                    })}
+                  </PermissionButton>
+                  <div style={{ marginLeft: 10 }}>
+                    <Input.Search
+                      placeholder="请输入属性"
+                      allowClear
+                      onSearch={(value) => {
+                        console.log(value);
+                        if (value) {
+                          setParam({
+                            terms: [
+                              { column: 'deviceId', value: deviceId },
+                              { column: 'property', value: `%${value}%`, termType: 'like' },
+                            ],
+                          });
+                        } else {
+                          setParam({
+                            terms: [{ column: 'deviceId', value: deviceId }],
+                          });
+                        }
                       }}
-                      isPermission={permission.add}
-                      key="add"
-                      icon={<PlusOutlined />}
-                      type="primary"
-                    >
-                      {intl.formatMessage({
-                        id: 'pages.data.option.add',
-                        defaultMessage: '新增',
-                      })}
-                    </PermissionButton>
-                    <div style={{ marginLeft: 10 }}>
-                      <Input.Search
-                        placeholder="请输入属性"
-                        allowClear
-                        onSearch={(value) => {
-                          console.log(value);
-                          if (value) {
-                            setParam({
-                              terms: [
-                                { column: 'deviceId', value: deviceId },
-                                { column: 'property', value: `%${value}%`, termType: 'like' },
-                              ],
-                            });
-                          } else {
-                            setParam({
-                              terms: [{ column: 'deviceId', value: deviceId }],
-                            });
-                          }
-                        }}
-                      />
-                    </div>
-                  </>
-                }
-                request={async (params) => {
-                  const res = await service.PointList({
-                    ...params,
-                    sorts: [{ name: 'createTime', order: 'desc' }],
-                  });
-                  setData(res.result.data);
+                    />
+                  </div>
+                </>
+              }
+              request={async (params) => {
+                if (Object.keys(params).length && !params.terms[0].value) {
                   return {
-                    code: res.message,
+                    code: 200,
                     result: {
-                      data: res.result.data,
+                      data: [],
                       pageIndex: 0,
                       pageSize: 0,
                       total: 0,
                     },
-                    status: res.status,
+                    status: 200,
                   };
-                }}
-              />
-            </div>
+                }
+                const res = await service.PointList({
+                  ...params,
+                  sorts: [{ name: 'createTime', order: 'desc' }],
+                });
+                setData(res.result.data);
+                return {
+                  code: res.message,
+                  result: {
+                    data: res.result.data,
+                    pageIndex: res.result.pageIndex,
+                    pageSize: res.result.pageSize,
+                    total: res.result.total,
+                  },
+                  status: res.status,
+                };
+              }}
+            />
           </div>
-        ) : (
-          <Empty />
-        )}
+        </div>
       </Card>
       {deviceVisiable && (
         <BindDevice

src/pages/link/Channel/Opcua/index.less

@@ -1,17 +1,12 @@
 .topCard {
   display: flex;
   align-items: center;
-
-  .img {
-    position: relative;
-    top: 10px;
-    left: 20px;
-  }
+  width: 100%;
 
   .text {
-    margin-left: 24px;
-
+    margin-left: 10px;
     .p1 {
+      min-width: 130px;
       height: 22px;
       margin-bottom: 7px;
       font-weight: 700;
@@ -20,6 +15,7 @@
     }
 
     .p2 {
+      min-width: 130px;
       height: 20px;
       color: rgba(0, 0, 0, 0.75);
       font-weight: 400;

src/pages/link/Channel/Opcua/index.tsx

@@ -33,7 +33,6 @@ const Opcua = () => {
   iconMap.set('2', require('/public/images/channel/2.png'));
   iconMap.set('3', require('/public/images/channel/3.png'));
   iconMap.set('4', require('/public/images/channel/4.png'));
-  const background = require('/public/images/channel/background.png');
 
   const columns: ProColumns<OpaUa>[] = [
     {
@@ -151,7 +150,7 @@ const Opcua = () => {
           key="link"
           type="link"
           tooltip={{
-            title: '设备接入',
+            title: '数据点绑定',
           }}
           onClick={() => {
             history.push(`${getMenuPathByCode('link/Channel/Opcua/Access')}?id=${record.id}`);
@@ -218,15 +217,8 @@ const Opcua = () => {
             <Col span={6} key={item.numeber}>
               <Card>
                 <div className={styles.topCard}>
-                  <div
-                    style={{
-                      background: `url(${background}) no-repeat`,
-                      backgroundSize: '100% 100%',
-                      width: '56px',
-                      height: '56px',
-                    }}
-                  >
-                    <img src={iconMap.get(item.numeber)} className={styles.img} />
+                  <div>
+                    <img src={iconMap.get(item.numeber)} />
                   </div>
                   <div className={styles.text}>
                     <p className={styles.p1}>{item.title}</p>