fix: 优化设备树组件

packages/extend-components/EC_DeviceTree/src/EC_DeviceTree.md

@@ -32,6 +32,7 @@ api 参考 Antd Tree 组件 https://ant.design/components/tree-cn/
 | prefix | 搜索框的前置图标 | ReactNode | 搜索 icon |
 | placeholder | 搜索框占位符 | string | 搜索设备名称 |
 | checkable | 节点前添加 Checkbox 复选框 | boolean | false |
+| pagination | 默认分页，false 取消分页 | boolean | true |
 | serviceParams | 服务参数 | object | { pageIndex: 1, pageSize: 500, deviceTypes: '二供泵房,二供机组', getChild: true, userID: 1, queryInfo: '', sortFields: '', direction: '', isTop: true } |
 | deviceTreeService `必需` | 设备树服务 | promise | - |
 | onTreeCheck | 点击复选框触发 | function(checkedNodes){ } | - |

packages/extend-components/EC_DeviceTree/src/demos/Basic.tsx

@@ -6,7 +6,7 @@ const REQUEST_HTTP = 'http';
 const REQUEST_METHOD_POST = 'post';
 
 const GET_DEVICE_LIST =
-  'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api/Publish/Monitor/Device/DeviceTree'; //获取设备树列表
+  'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api/Publish/GCK/Device/DeviceTree'; //获取设备树列表
 
 // const GET_DEVICE_LIST = '/api/Publish/GCK/Device/DeviceTree'; //获取设备树列表
 
@@ -37,20 +37,19 @@ const Demo = () => {
         checkable
         onTreeCheck={onTreeCheck}
         onTreeSelect={onTreeSelect}
-        deviceTreeService={dtService.getDeviceList}
-        serviceParams={
-          {
-            // pageIndex: 1,
-            // pageSize: 20,
-            // deviceTypes: '二供泵房,二供机组',
-            // getChild: true,
-            // userID: 1,
-            // queryInfo: '',
-            // sortFields: '',
-            // direction: '',
-            // isTop: true,
-          }
-        }
+        deviceTreeService={getDeviceList}
+        serviceParams={{
+          pageIndex: 1,
+          pageSize: 20,
+          // deviceTypes: '二供泵房,二供机组',
+          getChild: true,
+          // userID: 1,
+          // queryInfo: '',
+          // sortFields: '',
+          // direction: '',
+          // isTop: true,
+        }}
+        // pagination={false}
       />
     </div>
   );

packages/extend-components/EC_DeviceTree/src/index.js

 import React, { useContext, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { Input, Tree, Divider, message, ConfigProvider } from 'antd';
+import { Input, Tree, Divider, message, Pagination, ConfigProvider } from 'antd';
 import { SearchOutlined } from '@ant-design/icons';
 import Empty from '@wisdom-components/empty';
 import './index.less';
@@ -14,6 +14,7 @@ const DeviceTree = (props) => {
     serviceParams,
     onTreeCheck,
     onTreeSelect,
+    pagination,
   } = props;
 
   const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
@@ -21,18 +22,19 @@ const DeviceTree = (props) => {
 
   const [treeData, setTreeData] = useState([]);
   const [params, setParams] = useState({});
+  const [total, setTotal] = useState(0);
 
   useEffect(() => {
     const param = {
       pageIndex: serviceParams.pageIndex || 1,
-      pageSize: serviceParams.pageSize || 500,
+      pageSize: serviceParams.pageSize || 20,
       deviceTypes: serviceParams.deviceTypes || '二供泵房,二供机组',
-      getChild: serviceParams.getChild || true,
+      getChild: serviceParams.getChild,
       userID: serviceParams.userID || 0,
       queryInfo: serviceParams.queryInfo || '',
       sortFields: serviceParams.sortFields || '',
       direction: serviceParams.direction || '',
-      isTop: serviceParams.isTop || true,
+      isTop: serviceParams.isTop,
     };
     setParams(param);
   }, []);
@@ -54,7 +56,10 @@ const DeviceTree = (props) => {
             ? response.data.list[0].deviceList
             : []
           : [];
-        setTreeData(handleData(data));
+        const newData = handleData(data);
+        setTreeData(newData);
+        setTotal(response.data.totalPages);
+        onTreeCheck([newData[0]]);
       } else {
         message.error(response.msg);
       }
@@ -75,15 +80,15 @@ const DeviceTree = (props) => {
   };
 
   // 选中复选框
-  const onCheck = (checkedKeysValue) => {
+  const onCheck = ({ checked }) => {
     const checkedTree = [];
     treeData.forEach((item) => {
-      if (checkedKeysValue.includes(item.key)) {
+      if (checked.includes(item.key)) {
         checkedTree.push(item);
       }
       if (item.children.length > 0) {
         item.children.forEach((child) => {
-          if (checkedKeysValue.includes(child.key)) {
+          if (checked.includes(child.key)) {
             checkedTree.push(child);
           }
         });
@@ -96,6 +101,11 @@ const DeviceTree = (props) => {
     onTreeSelect(info.selectedNodes);
   };
 
+  const onPaginationChange = (page) => {
+    setParams({ ...params, pageIndex: page });
+    setTreeData([]);
+  };
+
   return (
     <div className={classNames(prefixCls)}>
       <Input
@@ -108,10 +118,30 @@ const DeviceTree = (props) => {
       <Divider />
       <div className={classNames(`${prefixCls}-content`)}>
         {!!treeData.length && (
-          <Tree treeData={treeData} onCheck={onCheck} onSelect={onSelect} {...props} />
+          <Tree
+            defaultCheckedKeys={[treeData[0].key]}
+            defaultExpandedKeys={[treeData[0].key]}
+            treeData={treeData}
+            onCheck={onCheck}
+            onSelect={onSelect}
+            checkStrictly
+            {...props}
+          />
         )}
         {!treeData.length && <Empty />}
       </div>
+      {pagination && (
+        <div className={classNames(`${prefixCls}-pagination`)}>
+          <Pagination
+            simple
+            hideOnSinglePage
+            current={params.pageIndex || 1}
+            pageSize={params.pageSize || 20}
+            total={total}
+            onChange={onPaginationChange}
+          />
+        </div>
+      )}
     </div>
   );
 };
@@ -119,6 +149,7 @@ const DeviceTree = (props) => {
 DeviceTree.defaultProps = {
   prefix: <SearchOutlined />,
   placeholder: '搜索设备名称',
+  pagination: true,
   serviceParams: {},
   onTreeCheck: () => {},
   onTreeSelect: () => {},
@@ -127,6 +158,7 @@ DeviceTree.defaultProps = {
 DeviceTree.propTypes = {
   prefix: PropTypes.node,
   placeholder: PropTypes.string,
+  pagination: PropTypes.bool,
   serviceParams: PropTypes.object,
   onTreeCheck: PropTypes.func,
   onTreeSelect: PropTypes.func,

packages/extend-components/EC_DeviceTree/src/index.less

@@ -24,6 +24,10 @@
     width: 100%;
   }
 
+  .ant-tree-indent {
+    width: 0;
+  }
+
   .ant-tree-node-content-wrapper {
     flex: 1;
     overflow: hidden;
@@ -34,4 +38,8 @@
     flex: 1;
     overflow-y: scroll;
   }
+
+  &-pagination {
+    margin: 10px auto;
+  }
 }

packages/extend-components/EC_QuotaSelect/src/demos/Basic.tsx

@@ -10,16 +10,16 @@ const REQUEST_METHOD_GET = 'get';
 const REQUEST_METHOD_POST = 'post';
 
 const GET_QUOTA_LIST =
-  'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api/Publish/Monitor/Device/GetQuotaList'; //获取指标列表
+  'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api/Publish/GCK/Device/GetQuotaList'; //获取指标列表
 // '/api/Publish/GCK/Device/GetQuotaList'; //获取指标列表
 
 const GET_DEVICE_CONF =
-  'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api/Publish/Monitor/Device/GetDeviceConf'; //获取设备配置
-// '/api/Publish/GCK/Device/GetDeviceConf'; //获取设备配置
+  'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api/Publish/GCK/MonitorConfig/GetMonitorConf'; //根据设备类型、方案名称、用户工号获取对应设备监控配置
+// '/api/Publish/GCK/MonitorConfig/GetMonitorConf'; //根据设备类型、方案名称、用户工号获取对应设备监控配置
 
 const UPDATE_DEVICE_CONF =
-  'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api/Publish/Monitor/Device/SaveDeviceConf'; //更新设备配置
-// '/api/Publish/GCK/Device/SaveDeviceConf'; //更新设备配置
+  'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api/Publish/GCK/MonitorConfig/AddOrUpdateMonitorConf'; //添加或修改设备监控配置
+// '/api/Publish/GCK/MonitorConfig/AddOrUpdateMonitorConf'; //添加或修改设备监控配置
 
 const quotaSelectService = {
   getQuotaList: {

packages/extend-components/EC_RealTimeInfo/src/demos/Basic.tsx

@@ -7,7 +7,7 @@ const REQUEST_METHOD_GET = 'get';
 const REQUEST_METHOD_POST = 'post';
 
 const GET_DEVICE_CONF =
-  'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api/Publish/Monitor/Device/GetDeviceConf'; //获取设备配置
+  'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api/Publish/GCK/MonitorConfig/GetMonitorConf'; //获取设备配置
 const GET_POINT_ADDRESS_ENTRY =
   'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api/Publish/GCK/PointAddress/GetPointAddressEntry'; //获取点表信息
 const GET_SENSOR_TYPE =
@@ -15,7 +15,7 @@ const GET_SENSOR_TYPE =
 const GET_DEVICE_REAL_INFO =
   'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api/Publish/GCK/Device/DeviceRealInfo'; //获取设备实时数据
 
-// const GET_DEVICE_CONF = '/api/Publish/GCK/Device/GetDeviceConf'; //获取设备配置
+// const GET_DEVICE_CONF = '/api/Publish/GCK/MonitorConfig/GetMonitorConf'; //获取设备配置
 // const GET_POINT_ADDRESS_ENTRY = '/api/Publish/GCK/PointAddress/GetPointAddressEntry'; //获取点表信息
 // const GET_SENSOR_TYPE = '/api/Publish/GCK/Sensor/GetSensorType'; //获取传感器类型
 // const GET_DEVICE_REAL_INFO = '/api/Publish/GCK/Device/DeviceRealInfo'; //获取设备实时数据

packages/extend-components/EC_RealTimeInfo/src/index.js

@@ -32,7 +32,7 @@ const RealTimeInfo = (props) => {
   const [tabData, setTabData] = useState([]);
   const [tabKey, setTabKey] = useState('');
   const [guid, setGuid] = useState('');
-  const [deviceConf, setDeviceConf] = useState({}); // 设备配置
+  const [deviceConf, setDeviceConf] = useState([]); // 设备配置
   const [deviceInfo, setDeviceInfo] = useState({}); // 设备实时数据
   const [sensorType, setSensorType] = useState({}); // sensorType
   const [pointAddress, setPointAddress] = useState([]); // pointAddress