feat(merge): merge wzy

Next wzy

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

@@ -1,5 +1,5 @@
 import PermissionButton from '@/components/PermissionButton';
-import { Badge, Card, Empty, message, Tabs } from 'antd';
+import { Badge, Card, Empty, 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';
@@ -15,6 +15,8 @@ import { service } from '@/pages/link/Channel/Modbus';
 import Save from '@/pages/link/Channel/Modbus/Save';
 import { InstanceModel } from '@/pages/device/Instance';
 import AddPoint from '@/pages/link/Channel/Modbus/Access/addPoint';
+import useSendWebsocketMessage from '@/hooks/websocket/useSendWebsocketMessage';
+import { map } from 'rxjs/operators';
 
 const Modbus = () => {
   const intl = useIntl();
@@ -28,6 +30,10 @@ const Modbus = () => {
   const [pointVisiable, setPointVisiable] = useState<boolean>(false);
   const [current, setCurrent] = useState<any>({});
   const [deviceId, setDeviceId] = useState<any>('');
+  const [data, setData] = useState<any>([]);
+  const [subscribeTopic] = useSendWebsocketMessage();
+  const [propertyValue, setPropertyValue] = useState<any>({});
+  const wsRef = useRef<any>();
 
   const columns: ProColumns<any>[] = [
     {
@@ -48,8 +54,7 @@ const Modbus = () => {
     },
     {
       title: '值',
-      // dataIndex: '4',
-      //   render: (record: any) => <>{propertyValue[record.property]}</>,
+      render: (record: any) => <>{propertyValue[record?.property] || '-'}</>,
     },
     {
       title: '状态',
@@ -133,6 +138,7 @@ const Modbus = () => {
           }}
           popConfirm={{
             title: '确认删除',
+            disabled: record.state.value === 'enabled',
             onConfirm: async () => {
               const resp: any = await service.removeMetadataConfig(record.id);
               if (resp.status === 200) {
@@ -174,8 +180,27 @@ const Modbus = () => {
     }
   }, [visible]);
 
+  useEffect(() => {
+    const { id, productId } = InstanceModel.detail;
+    const point = data.map((item: any) => item.metadataId);
+    const wsId = `instance-info-property-${id}-${productId}-${point.join('-')}`;
+    const topic = `/dashboard/device/${productId}/properties/realTime`;
+    wsRef.current = subscribeTopic?.(wsId, topic, {
+      deviceId: deviceId,
+      properties: data.map((item: any) => item.metadataId),
+      history: 1,
+    })
+      ?.pipe(map((res: any) => res.payload))
+      .subscribe((payload: any) => {
+        const { value } = payload;
+        propertyValue[value.property] = value.formatValue;
+        setPropertyValue({ ...propertyValue });
+        // console.log(propertyValue)
+      });
+  }, [data]);
+
   return (
-    <Card>
+    <Card className={styles.list}>
       <PermissionButton
         onClick={() => {
           setVisible(true);
@@ -190,110 +215,119 @@ const Modbus = () => {
         新增通道
       </PermissionButton>
       {bindList.length > 0 ? (
-        <Tabs
-          tabPosition={'left'}
-          defaultActiveKey={opcId}
-          onChange={(e) => {
-            setOpcId(e);
-            setParam({});
-          }}
-        >
-          {bindList.map((item: any) => (
-            <Tabs.TabPane
-              key={item.id}
-              tab={
-                <div className={styles.left}>
-                  <div style={{ width: '100px', textAlign: 'left' }}>{item.name}</div>
+        <div style={{ display: 'flex' }}>
+          <div>
+            <Tabs
+              tabPosition={'left'}
+              defaultActiveKey={opcId}
+              onChange={(e) => {
+                setOpcId(e);
+                console.log(e);
+                actionRef.current?.reload();
+                setParam({});
+              }}
+            >
+              {bindList.map((item: any) => (
+                <Tabs.TabPane
+                  key={item.id}
+                  tab={
+                    <div className={styles.left}>
+                      <Tooltip title={item.name}>
+                        <div className={styles.text}>{item.name}</div>
+                      </Tooltip>
+                      <PermissionButton
+                        isPermission={permission.update}
+                        key="edit"
+                        onClick={() => {
+                          setVisible(true);
+                          setChannel(item);
+                        }}
+                        type={'link'}
+                        style={{ padding: 0 }}
+                        tooltip={{
+                          title: intl.formatMessage({
+                            id: 'pages.data.option.edit',
+                            defaultMessage: '编辑',
+                          }),
+                        }}
+                      >
+                        <EditOutlined />
+                      </PermissionButton>
+                      <PermissionButton
+                        isPermission={permission.delete}
+                        style={{ padding: 0 }}
+                        popConfirm={{
+                          title: '确认删除',
+                          onConfirm: async () => {
+                            const resp: any = await service.remove(item.id);
+                            if (resp.status === 200) {
+                              getModbus();
+                              message.success(
+                                intl.formatMessage({
+                                  id: 'pages.data.option.success',
+                                  defaultMessage: '操作成功!',
+                                }),
+                              );
+                            }
+                          },
+                        }}
+                        key="delete"
+                        type="link"
+                      >
+                        <DeleteOutlined />
+                      </PermissionButton>
+                    </div>
+                  }
+                ></Tabs.TabPane>
+              ))}
+            </Tabs>
+          </div>
+          <div style={{ width: '100%' }}>
+            <ProTable
+              actionRef={actionRef}
+              params={param}
+              columns={columns}
+              rowKey="id"
+              search={false}
+              headerTitle={
+                <>
                   <PermissionButton
-                    isPermission={permission.update}
-                    key="edit"
                     onClick={() => {
-                      setVisible(true);
-                      setChannel(item);
+                      setPointVisiable(true);
+                      setCurrent({});
                     }}
-                    type={'link'}
-                    style={{ padding: 0 }}
-                    tooltip={{
-                      title: intl.formatMessage({
-                        id: 'pages.data.option.edit',
-                        defaultMessage: '编辑',
-                      }),
-                    }}
-                  >
-                    <EditOutlined />
-                  </PermissionButton>
-                  <PermissionButton
-                    isPermission={permission.delete}
-                    style={{ padding: 0 }}
-                    popConfirm={{
-                      title: '确认删除',
-                      onConfirm: async () => {
-                        const resp: any = await service.remove(item.id);
-                        if (resp.status === 200) {
-                          getModbus();
-                          message.success(
-                            intl.formatMessage({
-                              id: 'pages.data.option.success',
-                              defaultMessage: '操作成功!',
-                            }),
-                          );
-                        }
-                      },
-                    }}
-                    key="delete"
-                    type="link"
+                    isPermission={permission.add}
+                    key="add"
+                    icon={<PlusOutlined />}
+                    type="primary"
                   >
-                    <DeleteOutlined />
+                    {intl.formatMessage({
+                      id: 'pages.data.option.add',
+                      defaultMessage: '新增',
+                    })}
                   </PermissionButton>
-                </div>
+                </>
               }
-            >
-              <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);
-                  return {
-                    code: res.message,
-                    result: {
-                      data: res.result.data,
-                      pageIndex: 0,
-                      pageSize: 0,
-                      total: 0,
-                    },
-                    status: res.status,
-                  };
-                }}
-              />
-            </Tabs.TabPane>
-          ))}
-        </Tabs>
+              request={async (params) => {
+                const res = await service.queryMetadataConfig(opcId, deviceId, {
+                  ...params,
+                  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>
+        </div>
       ) : (
         <Empty />
       )}

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

@@ -1,5 +1,5 @@
 import PermissionButton from '@/components/PermissionButton';
-import { Badge, Card, Empty, message, Tabs } from 'antd';
+import { Badge, Card, Empty, 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';
@@ -138,6 +138,7 @@ const Opcua = () => {
           }}
           popConfirm={{
             title: '确认删除',
+            disabled: record.state.value === 'enable',
             onConfirm: async () => {
               const resp: any = await service.deletePoint(record.id);
               if (resp.status === 200) {
@@ -209,22 +210,22 @@ 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>
-            <PermissionButton
-              onClick={() => {
-                setVisible(true);
-                setChannel({});
-              }}
-              isPermission={permission.add}
-              key="add"
-              icon={<PlusOutlined />}
-              type="dashed"
-              style={{ width: '200px', margin: '16px 0 18px 20px' }}
-            >
-              新增通道
-            </PermissionButton>
             <Tabs
               tabPosition={'left'}
               defaultActiveKey={opcId}
@@ -240,7 +241,9 @@ const Opcua = () => {
                   key={item.id}
                   tab={
                     <div className={styles.left}>
-                      <div className={styles.text}>{item.name}</div>
+                      <Tooltip title={item.name}>
+                        <div className={styles.text}>{item.name}</div>
+                      </Tooltip>
                       <div>
                         <PermissionButton
                           isPermission={permission.update}

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

@@ -56,8 +56,7 @@ const AddPoint = (props: Props) => {
         layout="vertical"
         initialValues={{
           ...props.data,
-          initialValue: props.data?.configuration?.initialValue,
-          multiple: props.data?.configuration?.multiple,
+          // readIndex:props.data?.readIndex || 0,
         }}
       >
         <Row gutter={[24, 24]}>

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

@@ -1,7 +1,12 @@
 .list {
   :global {
-    .ant-tabs-tab .ant-tabs-tab-active .ant-tabs-tab-btn {
-      text-shadow: 0 0 0 currentColor;
+    .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
+      color: #1d39c4;
+      text-shadow: none;
+    }
+
+    .ant-tabs-content-holder {
+      width: 1px;
     }
   }
 }
@@ -11,7 +16,14 @@
   align-items: center;
   justify-content: space-between;
   width: 200px;
-
+  .text {
+    width: 130px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-align: left;
+    text-overflow: ellipsis;
+    word-break: break-all;
+  }
   .icon {
     display: none;
   }

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

@@ -1,7 +1,7 @@
 import PermissionButton from '@/components/PermissionButton';
 import { PageContainer } from '@ant-design/pro-layout';
 import ProTable, { ActionType, ProColumns } from '@jetlinks/pro-table';
-import { Badge, Card, Empty, Input, message, Popconfirm, Tabs } from 'antd';
+import { Badge, Card, Empty, Input, message, Popconfirm, Tabs, Tooltip } from 'antd';
 import { useIntl, useLocation } from 'umi';
 import { useEffect, useRef, useState } from 'react';
 import {
@@ -26,7 +26,7 @@ const Access = () => {
   const location = useLocation<string>();
   const [param, setParam] = useState({});
   const [opcUaId, setOpcUaId] = useState<any>('');
-  const { permission } = PermissionButton.usePermission('link/Channel/Opcua');
+  const { permission } = PermissionButton.usePermission('link/Channel/Modbus');
   const [deviceVisiable, setDeviceVisiable] = useState<boolean>(false);
   const [pointVisiable, setPointVisiable] = useState<boolean>(false);
   const [bindList, setBindList] = useState<any>([]);
@@ -36,6 +36,7 @@ const Access = () => {
   const [data, setData] = useState<any>([]);
   const [subscribeTopic] = useSendWebsocketMessage();
   const [propertyValue, setPropertyValue] = useState<any>({});
+  const wsRef = useRef<any>();
 
   const columns: ProColumns<any>[] = [
     {
@@ -56,8 +57,7 @@ const Access = () => {
     },
     {
       title: '值',
-      // dataIndex: '4',
-      render: (record: any) => <>{propertyValue[record.property]}</>,
+      render: (record: any) => <>{propertyValue[record?.property] || '-'}</>,
     },
     {
       title: '状态',
@@ -141,6 +141,7 @@ const Access = () => {
           }}
           popConfirm={{
             title: '确认删除',
+            disabled: record.state.value === 'enabled',
             onConfirm: async () => {
               const resp: any = await service.removeMetadataConfig(record.id);
               if (resp.status === 200) {
@@ -184,38 +185,37 @@ const Access = () => {
         }
       });
   };
-  const pointWs = () => {
+
+  useEffect(() => {
+    const item = new URLSearchParams(location.search);
+    const id = item.get('id');
+    if (id) {
+      setOpcUaId(id);
+      getBindList(id);
+    }
+  }, []);
+
+  useEffect(() => {
     if (productId && deviceId) {
-      const id = `instance-info-property-${deviceId}-${productId}-opc-point`;
+      const point = data.map((item: any) => item.metadataId);
+      const id = `instance-info-property-${deviceId}-${productId}-${point.join('-')}`;
       const topic = `/dashboard/device/${productId}/properties/realTime`;
-      subscribeTopic!(id, topic, {
+      wsRef.current = subscribeTopic?.(id, topic, {
         deviceId: deviceId,
         properties: data.map((item: any) => item.metadataId),
-        history: 0,
+        history: 1,
       })
-        ?.pipe(map((res) => res.patload))
+        ?.pipe(map((res) => res.payload))
         .subscribe((payload: any) => {
           const { value } = payload;
-          console.log(value);
-          propertyValue[value.property] = { ...payload, ...value };
+          propertyValue[value.property] = value.formatValue;
           setPropertyValue({ ...propertyValue });
+          // console.log(propertyValue)
         });
     }
-  };
-
-  useEffect(() => {
-    pointWs();
+    return () => wsRef.current && wsRef.current?.unsubscribe();
   }, [data]);
 
-  useEffect(() => {
-    const item = new URLSearchParams(location.search);
-    const id = item.get('id');
-    if (id) {
-      setOpcUaId(id);
-      getBindList(id);
-    }
-  }, []);
-
   return (
     <PageContainer>
       <Card className={styles.list}>
@@ -227,113 +227,120 @@ const Access = () => {
           key="add"
           icon={<PlusOutlined />}
           type="dashed"
-          style={{ width: '200px', marginLeft: 20, marginBottom: 5 }}
+          style={{ width: '200px', margin: '16px 0 18px 20px' }}
         >
           绑定设备
         </PermissionButton>
         {bindList.length > 0 ? (
-          <Tabs
-            tabPosition={'left'}
-            defaultActiveKey={deviceId}
-            onChange={(e) => {
-              setDeviceId(e);
-              const items = bindList.find((item: any) => item.id === e);
-              setProductId(items[0]?.productId);
-              setParam({
-                terms: [{ column: 'deviceId', value: e }],
-              });
-            }}
-          >
-            {bindList.map((item: any) => (
-              <Tabs.TabPane
-                key={item.id}
-                tab={
-                  <div className={styles.left}>
-                    <div style={{ width: '100px', textAlign: 'left' }}>{item.name}</div>
-                    <Popconfirm
-                      title="确认解绑该设备嘛？"
-                      onConfirm={() => {
-                        service.unbind([item.id], opcUaId).then((res: any) => {
-                          if (res.status === 200) {
-                            message.success('解绑成功');
-                            getBindList(opcUaId);
-                          }
-                        });
-                      }}
-                      okText="Yes"
-                      cancelText="No"
-                    >
-                      <DisconnectOutlined className={styles.icon} />
-                    </Popconfirm>
-                  </div>
-                }
+          <div style={{ display: 'flex' }}>
+            <div>
+              <Tabs
+                tabPosition={'left'}
+                defaultActiveKey={deviceId}
+                onChange={(e) => {
+                  setDeviceId(e);
+                  const items = bindList.find((item: any) => item.id === e);
+                  setProductId(items?.productId);
+                  setParam({
+                    terms: [{ column: 'deviceId', value: e }],
+                  });
+                }}
               >
-                <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({
-                                terms: [{ column: 'deviceId', value: deviceId }],
-                              });
-                            }
+                {bindList.map((item: any) => (
+                  <Tabs.TabPane
+                    key={item.id}
+                    tab={
+                      <div className={styles.left}>
+                        <Tooltip title={item.name}>
+                          <div className={styles.text}>{item.name}</div>
+                        </Tooltip>
+                        <Popconfirm
+                          title="确认解绑该设备嘛？"
+                          onConfirm={() => {
+                            service.unbind([item.id], opcUaId).then((res: any) => {
+                              if (res.status === 200) {
+                                message.success('解绑成功');
+                                getBindList(opcUaId);
+                              }
+                            });
                           }}
-                        />
+                          okText="Yes"
+                          cancelText="No"
+                        >
+                          <DisconnectOutlined className={styles.icon} />
+                        </Popconfirm>
                       </div>
-                    </>
-                  }
-                  request={async (params) => {
-                    const res = await service.queryMetadataConfig(opcUaId, deviceId, {
-                      ...params,
-                      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,
-                    };
-                  }}
-                />
-              </Tabs.TabPane>
-            ))}
-          </Tabs>
+                    }
+                  ></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>
+                    <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);
+                  return {
+                    code: res.message,
+                    result: {
+                      data: res.result.data,
+                      pageIndex: 0,
+                      pageSize: 0,
+                      total: 0,
+                    },
+                    status: res.status,
+                  };
+                }}
+              />
+            </div>
+          </div>
         ) : (
           <Empty />
         )}

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

@@ -141,6 +141,7 @@ const Modbus = () => {
           disabled={record.state.value === 'enabled'}
           popConfirm={{
             title: '确认删除',
+            disabled: record.state.value === 'enabled',
             onConfirm: async () => {
               const resp: any = await service.remove(record.id);
               if (resp.status === 200) {

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

@@ -24,9 +24,6 @@
     text-overflow: ellipsis;
     word-break: break-all;
   }
-  .text:hover {
-    width: auto;
-  }
   .icon {
     display: none;
   }

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

@@ -1,7 +1,7 @@
 import PermissionButton from '@/components/PermissionButton';
 import { PageContainer } from '@ant-design/pro-layout';
 import ProTable, { ActionType, ProColumns } from '@jetlinks/pro-table';
-import { Badge, Card, Empty, Input, message, Popconfirm, Tabs } from 'antd';
+import { Badge, Card, Empty, Input, message, Popconfirm, Tabs, Tooltip } from 'antd';
 import { useIntl, useLocation } from 'umi';
 import { useEffect, useRef, useState } from 'react';
 import {
@@ -141,8 +141,8 @@ const Access = () => {
           }}
           popConfirm={{
             title: '确认删除',
+            disabled: record.state.value === 'enable',
             onConfirm: async () => {
-              console.log(111);
               const resp: any = await service.deletePoint(record.id);
               if (resp.status === 200) {
                 message.success(
@@ -216,26 +216,25 @@ 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>
-              <PermissionButton
-                onClick={() => {
-                  setDeviceVisiable(true);
-                }}
-                isPermission={permission.add}
-                key="add"
-                icon={<PlusOutlined />}
-                type="dashed"
-                style={{ width: '200px', margin: '16px 0 18px 20px' }}
-              >
-                绑定设备
-              </PermissionButton>
               <Tabs
                 tabPosition={'left'}
                 defaultActiveKey={deviceId}
                 onChange={(e) => {
-                  console.log(e);
                   setDeviceId(e);
                   const items = bindList.find((item: any) => item.deviceId === e);
                   setProductId(items?.productId);
@@ -249,7 +248,9 @@ const Access = () => {
                     key={item.deviceId}
                     tab={
                       <div className={styles.left}>
-                        <div className={styles.text}>{item.name}</div>
+                        <Tooltip title={item.name}>
+                          <div className={styles.text}>{item.name}</div>
+                        </Tooltip>
                         <Popconfirm
                           title="确认解绑该设备嘛？"
                           onConfirm={() => {

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

@@ -136,6 +136,7 @@ const Opcua = () => {
           disabled={record.state.value === 'enabled'}
           popConfirm={{
             title: '确认删除',
+            disabled: record.state.value === 'enable',
             onConfirm: async () => {
               const resp: any = await service.remove(record.id);
               if (resp.status === 200) {