Merge branch 'fix/bug' into 'dev'

.umirc.js

@@ -102,6 +102,7 @@ export default {
     '/extend-components': [
       {
         title: 'base',
+        children: ['EC-DeviceTree', 'EC-QuotaSelect'],
       },
     ],
   },

package.json

@@ -141,6 +141,7 @@
     "@wisdom-components/basictable": "^1.4.5",
     "@wisdom-components/empty": "^1.3.9",
     "@wisdom-components/timerangepicker": "^1.3.4",
+    "@wisdom-utils/utils": "0.0.46",
     "classnames": "^2.2.6",
     "cross-spawn": "^7.0.3",
     "form-render": "^0.9.12",

packages/base-components/BasicTable/src/BasicTable.md

@@ -20,8 +20,14 @@ group:
 
 ## 代码演示
 
+### 常规使用
+
 <code src="./demos/Basic.tsx">
 
+### 合计
+
+<code src="./demos/Summary.tsx">
+
 ## API
 
 api 参考 Antd Table 组件 https://ant.design/components/table-cn/#API

packages/base-components/BasicTable/src/demos/Summary.tsx

+// @ts-ignore
+import React, { useEffect, useState } from 'react';
+import Empty from '@wisdom-components/empty';
+import { Table } from 'antd';
+import BasicTable from '../index';
+import request from 'umi-request';
+
+const Demo = () => {
+  const [columns, setColumns] = useState([]);
+  const [dataSource, setDataSource] = useState([]);
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  const fetchData = (params = {}) => {
+    request(`${baseUrl}/AcrossTable/GetEquipmentDataReport`, {
+      method: 'get',
+      params: {},
+    }).then(function (response) {
+      const data = response.data;
+      let column = data.map((item, index) => {
+        return {
+          title: `${item.DName + item.DType}(${item.Unit})`,
+          dataIndex: `name${index}`,
+          key: `name${index}`,
+          width: 300,
+        };
+      });
+      column.unshift({
+        title: '时间',
+        dataIndex: 'time',
+        key: 'time',
+        fixed: true,
+        width: 200,
+      });
+      let dataSource = data[0].NameDate.map((item, index) => ({ key: index, time: item.Time }));
+      data.forEach((item, index) => {
+        item.NameDate.forEach((child) => {
+          dataSource.forEach((v) => {
+            if (child.Time === v.time) v[`name${index}`] = child.Value;
+          });
+        });
+      });
+      setColumns(column);
+      setDataSource(dataSource);
+    });
+  };
+
+  const Summary = (currentData) => (
+    <Table.Summary.Row>
+      {columns.map((item, index) => {
+        let sum = 0;
+        currentData.reduce((prev, next) => {
+          sum += next[item.key];
+        }, 0);
+        return (
+          <Table.Summary.Cell key={index} index={index}>
+            {index === 0 ? '总计' : sum}
+          </Table.Summary.Cell>
+        );
+      })}
+    </Table.Summary.Row>
+  );
+
+  // @ts-ignore
+  return (
+    <div style={{ height: '400px' }}>
+      {!!dataSource.length && (
+        <BasicTable dataSource={dataSource} columns={columns} bordered summary={Summary} />
+      )}
+      {!dataSource.length && <Empty description={'暂无数据'} />}
+    </div>
+  );
+};
+
+export default Demo;
+
+const baseUrl = 'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api';

packages/base-components/BasicTable/src/index.less

@@ -19,12 +19,9 @@
     overflow: hidden;
   }
 
-  .ant-table-tbody > tr {
-    background: rgba(255, 255, 255, 0);
-  }
-
+  .ant-table-tbody > tr,
   .ant-table-tbody > tr > td {
-    background: rgba(255, 255, 255, 0);
+    background: white;
   }
 
   .ant-table-thead > tr > th {
@@ -41,10 +38,11 @@
   }
 
   .ant-table-tbody > tr:hover:not(.ant-table-expanded-row) > td {
-    background: rgba(255, 255, 255, 0);
+    background: white;
   }
 
-  .ant-table-tbody > tr:nth-child(2n-1) {
+  .ant-table-tbody > tr:nth-child(2n-1),
+  .ant-table-tbody > tr:nth-child(2n-1) td {
     background: #f6f9fe;
   }
 
@@ -124,4 +122,13 @@
     border-right: 0;
     border-bottom: 0;
   }
+
+  .ant-table-summary {
+    tr td {
+      position: sticky;
+      bottom: 0;
+      background: white;
+      border-top: 1px solid #dbe7fb;
+    }
+  }
 }

packages/base-components/QuotaSelect/src/demos/Basic.tsx

@@ -19,16 +19,6 @@ const Demo = () => {
       .then(function (response) {
         if (response.code == '0') {
           let curData = response.data;
-          curData.forEach((item) => {
-            item.decimalBit = item.DecimalBit;
-            item.deviation = item.Deviation;
-            item.format = item.Format;
-            item.isShow = item.IsShow;
-            item.name = item.Name;
-            item.style = item.Style;
-            item.type = item.Type;
-            item.unit = item.Unit;
-          });
           setQuotaList(curData);
         }
       })

packages/extend-components/EC-DeviceTree/README.md

+# `@wisdom-components/ec-devicetree`
+
+> TODO: description
+
+## Usage
+
+```
+const ECDeviceTree = require('@wisdom-components/ec-devicetree');
+
+// TODO: DEMONSTRATE API
+```

packages/extend-components/EC-DeviceTree/package.json

+{
+  "name": "@wisdom-components/ec-devicetree",
+  "version": "1.0.0",
+  "description": "> TODO: description",
+  "author": "tuqian <webtuqian@163.com>",
+  "homepage": "",
+  "license": "ISC",
+  "main": "lib/index.js",
+  "directories": {
+    "lib": "lib",
+    "test": "__tests__"
+  },
+  "files": [
+    "lib"
+  ],
+  "publishConfig": {
+    "registry": "https://g.civnet.cn:4873/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://g.civnet.cn:8443/ReactWeb5/wisdom-components.git"
+  },
+  "scripts": {
+    "test": "echo \"Error: run tests from root\" && exit 1"
+  }
+}

packages/extend-components/EC-DeviceTree/src/EC-DeviceTree.md

+---
+title: EC-DeviceTree - 设备树
+nav:
+  title: 业务组件
+  path: /extend-components
+group:
+  path: /
+---
+
+# EC-DeviceTree 设备树
+
+基础业务组件
+
+- 允许单设备选择
+- 允许多设备选择
+- 允许搜索设备树
+
+## 何时使用
+
+- 在设备树选择时。
+
+## 代码演示
+
+<code src="./demos/Basic.tsx">
+
+## API
+
+api 参考 Antd Tree 组件 https://ant.design/components/tree-cn/
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| prefix | 搜索框的前置图标 | ReactNode | 搜索 icon |
+| placeholder | 搜索框占位符 | string | 搜索设备名称 |
+| checkable | 节点前添加 Checkbox 复选框 | boolean | false |
+| serviceParams | 服务参数 | object | { pageIndex: 1, pageSize: 500, deviceTypes: '二供泵房,二供机组', getChild: true, userID: 1, queryInfo: '', sortFields: '', direction: '', isTop: true } |
+| deviceTreeService `必需` | 设备树服务 | promise | - |
+| onTreeCheck | 点击复选框触发 | function(checkedNodes){ } | - |
+| onTreeSelect | 点击树节点触发 | function(selectedNodes){ } | - |

packages/extend-components/EC-DeviceTree/src/demos/Basic.tsx

+import React from 'react';
+import PandaDeviceTree from '../index';
+import { service } from '@wisdom-utils/utils';
+
+const REQUEST_HTTP = 'http';
+const REQUEST_METHOD_POST = 'post';
+
+const GET_DEVICE_LIST =
+  'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api/Publish/Monitor/Device/DeviceTree'; //获取设备树列表
+
+const deviceTreeService = {
+  getDeviceList: {
+    url: GET_DEVICE_LIST,
+    method: REQUEST_METHOD_POST,
+    type: REQUEST_HTTP,
+  },
+};
+
+const dtService = service(deviceTreeService);
+
+const getDeviceList = dtService.getDeviceList;
+
+const Demo = () => {
+  const onTreeCheck = (checkedKeysValue) => {
+    console.log('onTreeCheck', checkedKeysValue);
+  };
+
+  const onTreeSelect = (selectedKeysValue) => {
+    console.log('onTreeSelect', selectedKeysValue);
+  };
+
+  return (
+    <div style={{ width: '200px', height: '400px', border: '1px solid #eee' }}>
+      <PandaDeviceTree
+        checkable
+        onTreeCheck={onTreeCheck}
+        onTreeSelect={onTreeSelect}
+        deviceTreeService={getDeviceList}
+        serviceParams={
+          {
+            // pageIndex: 1,
+            // pageSize: 20,
+            // deviceTypes: '二供泵房,二供机组',
+            // getChild: true,
+            // userID: 1,
+            // queryInfo: '',
+            // sortFields: '',
+            // direction: '',
+            // isTop: true,
+          }
+        }
+      />
+    </div>
+  );
+};
+
+export default Demo;

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 { SearchOutlined } from '@ant-design/icons';
+import Empty from '@wisdom-components/empty';
+import './index.less';
+
+const DeviceTree = (props) => {
+  const {
+    prefix,
+    placeholder,
+    deviceTreeService,
+    serviceParams,
+    onTreeCheck,
+    onTreeSelect,
+  } = props;
+
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls('ec-device-tree');
+
+  const [treeData, setTreeData] = useState([]);
+  const [params, setParams] = useState({});
+
+  useEffect(() => {
+    const param = {
+      pageIndex: serviceParams.pageIndex || 1,
+      pageSize: serviceParams.pageSize || 500,
+      deviceTypes: serviceParams.deviceTypes || '二供泵房,二供机组',
+      getChild: serviceParams.getChild || true,
+      userID: serviceParams.userID || 1,
+      queryInfo: serviceParams.queryInfo || '',
+      sortFields: serviceParams.sortFields || '',
+      direction: serviceParams.direction || '',
+      isTop: serviceParams.isTop || true,
+    };
+    setParams(param);
+  }, []);
+
+  const handleData = (data) => {
+    data.forEach((item) => {
+      item.title = item.DeviceName;
+      item.key = item.StationID;
+      item.children = handleData(item.children);
+    });
+    return data;
+  };
+
+  const fetchData = (param = {}) => {
+    deviceTreeService(param).then((response) => {
+      if (response.code === 0) {
+        const data = response.data
+          ? response.data.list && response.data.list.length > 0
+            ? response.data.list[0].DeviceList
+            : []
+          : [];
+        setTreeData(handleData(data));
+      } else {
+        message.error(response.msg);
+      }
+    });
+  };
+
+  useEffect(() => {
+    if (JSON.stringify(params) !== '{}') {
+      fetchData(params);
+    }
+  }, [params]);
+
+  const onSearch = (e) => {
+    if (e.type === 'keydown' || e.target.value === '') {
+      const param = { ...params, queryInfo: e.target.value };
+      setParams(param);
+    }
+  };
+
+  // 选中复选框
+  const onCheck = (checkedKeysValue) => {
+    const checkedTree = [];
+    treeData.forEach((item) => {
+      if (checkedKeysValue.includes(item.key)) {
+        checkedTree.push(item);
+      }
+      if (item.children.length > 0) {
+        item.children.forEach((child) => {
+          if (checkedKeysValue.includes(child.key)) {
+            checkedTree.push(child);
+          }
+        });
+      }
+    });
+    onTreeCheck(checkedTree);
+  };
+
+  const onSelect = (selectedKeysValue, info) => {
+    onTreeSelect(info.selectedNodes);
+  };
+
+  return (
+    <div className={classNames(prefixCls)}>
+      <Input
+        prefix={prefix}
+        placeholder={placeholder}
+        bordered={false}
+        onChange={onSearch}
+        onPressEnter={onSearch}
+      />
+      <Divider />
+      <div className={classNames(`${prefixCls}-content`)}>
+        {!!treeData.length && (
+          <Tree treeData={treeData} onCheck={onCheck} onSelect={onSelect} {...props} />
+        )}
+        {!treeData.length && <Empty />}
+      </div>
+    </div>
+  );
+};
+
+DeviceTree.defaultProps = {
+  prefix: <SearchOutlined />,
+  placeholder: '搜索设备名称',
+  serviceParams: {},
+  onTreeCheck: () => {},
+  onTreeSelect: () => {},
+  deviceTreeService: () => {},
+};
+
+DeviceTree.propTypes = {
+  prefix: PropTypes.node,
+  placeholder: PropTypes.string,
+  serviceParams: PropTypes.object,
+  onTreeCheck: PropTypes.func,
+  onTreeSelect: PropTypes.func,
+  deviceTreeService: PropTypes.func,
+};
+
+export default DeviceTree;

packages/extend-components/EC-DeviceTree/src/index.less

+@import (reference) '../../../../node_modules/antd/es/style/themes/default';
+@ec-device-tree-prefix-cls: ~'@{ant-prefix}-ec-device-tree';
+
+.@{ec-device-tree-prefix-cls} {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  padding: 5px;
+
+  .ant-divider {
+    margin: 6px 0 12px 0;
+  }
+
+  .ant-tree-checkbox {
+    margin: 4px 2px 0 0;
+  }
+
+  .ant-tree-title {
+    white-space: nowrap;
+  }
+
+  &-content {
+    flex: 1;
+    overflow-y: scroll;
+  }
+}

packages/extend-components/EC-QuotaSelect/README.md

+# `@wisdom-components/EC-QuotaSelect`
+
+> TODO: description
+
+## Usage
+
+```
+const ecQuotaSelect = require('@wisdom-components/EC-QuotaSelect');
+
+// TODO: DEMONSTRATE API
+```

packages/extend-components/EC-QuotaSelect/package.json

+{
+  "name": "@wisdom-components/ec-quotaselect",
+  "version": "1.0.0",
+  "description": "> TODO: description",
+  "author": "tuqian <webtuqian@163.com>",
+  "homepage": "",
+  "license": "ISC",
+  "main": "lib/EC-QuotaSelect.js",
+  "directories": {
+    "lib": "lib",
+    "test": "__tests__"
+  },
+  "files": [
+    "lib"
+  ],
+  "publishConfig": {
+    "registry": "https://g.civnet.cn:4873/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://g.civnet.cn:8443/ReactWeb5/wisdom-components.git"
+  },
+  "scripts": {
+    "test": "echo \"Error: run tests from root\" && exit 1"
+  }
+}

packages/extend-components/EC-QuotaSelect/src/EC-QuotaSelect.md

+---
+title: EC-QuotaSelect - 指标选择
+nav:
+  title: 业务组件
+  path: /extend-components
+group:
+  path: /
+---
+
+# EC-QuotaSelect 指标选择
+
+基础业务组件
+
+- 允许对分类指标进行选择
+- 允许限制选择最大指标数
+- 允许搜索指标
+
+## 何时使用
+
+- 在指标选择时。
+
+## 代码演示
+
+<code src="./demos/Basic.tsx">
+
+## API
+
+指标选择按钮 props 参考 https://ant.design/components/button-cn/#API
+
+已选指标树 props 参考 https://ant.design/components/tree-cn/#API
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| buttonProps | 指标选择按钮 | object | { } |
+| width | 模态框宽度 | number | 900 |
+| title | 模态框标题 | string | 选择显示字段 |
+| cancelText | 模态框取消按钮文字 | string | 取消选择 |
+| okText | 模态框确认按钮文字 | string | 确定 |
+| placeholder | 搜索框占位符 | string | 搜索关键词 |
+| searchPrefix | 搜索框前置图标 | ReactNode | SearchOutlined |
+| maximum`必需` | 最多可选择指标数量 | number | 0 |
+| deviceList`必需` | 设备列表数据源 | array | [ ] |
+| confList `必需` | 设备配置数据源 | array | [ ] |
+| user | 用户登录名 | string | null |
+| pointType`必需` | 指标类型 | string | cardPoints |
+| treeProps | 已选指标树 props | object | { } |
+| onSelect | 模态框点击确定，选中的数据 | function(device, selectKey, selectList){ } | - |
+| onModalCancel | 点击模态框取消按钮的回调 | function(value){ } | - |
+| onModalOk | 模态框点击确定回调 | function(value){ } | - |
+| onModalClose | 模态框点击关闭回调 | function(value){ } | - |
+| quotaListService`必需` | 获取指标列表的服务 | promise | - |
+| updateDeviceConfService`user存在时必需` | 更新设备配置的服务 | promise | - |

packages/extend-components/EC-QuotaSelect/src/demos/Basic.tsx

+// @ts-ignore
+import React, { useEffect, useState } from 'react';
+import request from 'umi-request';
+import { UnorderedListOutlined, SearchOutlined } from '@ant-design/icons';
+import PandaQuotaSelect from '../index';
+import { service } from '@wisdom-utils/utils';
+
+const REQUEST_HTTP = 'http';
+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'; //获取指标列表
+
+const GET_DEVICE_CONF =
+  'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api/Publish/Monitor/Device/GetDeviceConf'; //获取设备配置
+
+const UPDATE_DEVICE_CONF =
+  'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api/Publish/Monitor/Device/SaveDeviceConf'; //更新设备配置
+
+const quotaSelectService = {
+  getQuotaList: {
+    url: GET_QUOTA_LIST,
+    method: REQUEST_METHOD_GET,
+    type: REQUEST_HTTP,
+  },
+  getDeviceConf: {
+    url: GET_DEVICE_CONF,
+    method: REQUEST_METHOD_GET,
+    type: REQUEST_HTTP,
+  },
+  updateDeviceConfService: {
+    url: UPDATE_DEVICE_CONF,
+    method: REQUEST_METHOD_POST,
+    type: REQUEST_HTTP,
+  },
+};
+
+const qsService = service(quotaSelectService);
+
+const getQuotaList = qsService.getQuotaList;
+const getDeviceConf = qsService.getDeviceConf;
+const updateDeviceConfService = qsService.updateDeviceConfService;
+
+const pointType = 'cardPoints';
+
+const Demo = () => {
+  const [deviceList, setDeviceList] = useState([]); // 设备列表
+  const [confList, setConfList] = useState([]); // 设备配置列表
+
+  const fetchData = () => {
+    getDeviceConf({
+      user: 'user',
+      showAll: true,
+      deviceType: '二供泵房,二供机组',
+    })
+      .then(function (response) {
+        if (response.code == '0') {
+          let curData = response.data;
+          DeviceList.forEach((item) => {
+            curData.forEach((child) => {
+              if (item.deviceType === child.deviceType) item.confList = child[pointType].split(',');
+            });
+          });
+          setConfList(curData);
+          setDeviceList(DeviceList);
+        }
+      })
+      .catch(function (error) {
+        console.log(error);
+      });
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  const onModalOk = () => {
+    console.log('onModalOk');
+  };
+
+  const onModalClose = () => {
+    console.log('onModalClose');
+  };
+
+  const onModalCancel = () => {
+    console.log('onModalCancel');
+  };
+
+  const onSelect = ({ device, selectKey, selectList }) => {
+    let list = [...deviceList];
+    list.forEach((child) => {
+      if (child.stationID === device.stationID) {
+        child.confList = selectKey;
+      }
+    });
+    setDeviceList(list);
+  };
+
+  return (
+    <>
+      <h3>无 user, 无“保存修改”按钮</h3>
+      <PandaQuotaSelect
+        buttonProps={
+          {
+            // icon: <UnorderedListOutlined />,
+            // children: `指标选择(${selectData.length})`,
+          }
+        }
+        deviceList={deviceList}
+        quotaListService={getQuotaList}
+        pointType={pointType}
+        onSelect={onSelect}
+        // onModalCancel={onModalCancel}
+        // onModalOk={onModalOk}
+        // onModalClose={onModalClose}
+        maximum={5}
+      />
+      <br />
+      <h3>带 user, 有“保存修改”按钮</h3>
+      <PandaQuotaSelect
+        buttonProps={
+          {
+            // icon: <UnorderedListOutlined />,
+            // children: `指标选择(${selectData.length})`,
+          }
+        }
+        deviceList={deviceList}
+        quotaListService={getQuotaList}
+        updateDeviceConfService={updateDeviceConfService}
+        confList={confList}
+        pointType={pointType}
+        onSelect={onSelect}
+        onModalCancel={onModalCancel}
+        onModalOk={onModalOk}
+        onModalClose={onModalClose}
+        maximum={5}
+        user={'user'}
+      />
+    </>
+  );
+};
+
+export default Demo;
+
+const DeviceList = [
+  {
+    deviceName: '001东北明珠',
+    shortName: '001东北明珠',
+    code: 'EGBF00000001',
+    fatherCode: null,
+    deviceType: '二供泵房',
+    entryTime: '2020-03-29 04:20:49',
+    deviceGroup: '箱式变频',
+    pointAddressID: 4,
+    children: [],
+    stationID: 27,
+  },
+  {
+    deviceName: '低区',
+    shortName: '低区',
+    code: 'EGJZ00000162',
+    fatherCode: 'EGBF00000001',
+    deviceType: '二供机组',
+    entryTime: '2020-03-29 04:20:49',
+    deviceGroup: '箱式变频',
+    pointAddressID: 30,
+    children: [],
+    stationID: 28,
+  },
+  {
+    deviceName: '002世元国际',
+    shortName: '002世元国际',
+    code: 'EGBF00000002',
+    fatherCode: null,
+    deviceType: '二供机组',
+    entryTime: '2020-03-29 04:24:19',
+    deviceGroup: '智慧标准泵房',
+    pointAddressID: 4,
+    children: [],
+    stationID: 29,
+  },
+];

packages/extend-components/EC-QuotaSelect/src/index.less

+@import (reference) '../../../../node_modules/antd/es/style/themes/default';
+@ec-quota-select-prefix-cls: ~'@{ant-prefix}-ec-quota-select';
+
+.@{ec-quota-select-prefix-cls} {
+  &-btn-wrap {
+    overflow: auto;
+    white-space: nowrap;
+
+    button {
+      margin-right: 20px;
+    }
+  }
+}
+
+.@{ec-quota-select-prefix-cls}-modal {
+  &-wrap {
+    display: flex;
+    height: 500px;
+  }
+
+  &-left {
+    flex: 7;
+    border-right: 1px solid rgba(0, 0, 0, 0.2);
+
+    .empty {
+      margin: 128px 0;
+    }
+  }
+
+  &-right {
+    flex: 3;
+  }
+
+  &-select-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 20px 0 0;
+  }
+
+  &-search {
+    width: 160px;
+    background-color: #eef1f9;
+    border-radius: 15px;
+
+    .ant-input-prefix {
+      color: #5a6c8a;
+    }
+  }
+
+  &-search:hover {
+    background-color: #eef1f9;
+  }
+
+  &-target {
+    display: flex;
+    align-items: center;
+    margin: 0 10px 0 10px;
+    white-space: nowrap;
+  }
+
+  &-select {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+
+    span {
+      margin-right: 6px;
+      color: #52c41a;
+      font-size: 16px;
+    }
+  }
+
+  &-select.warning {
+    color: #f0495d;
+
+    span {
+      color: #f0495d;
+    }
+  }
+
+  &-option-wrap {
+    height: calc(100% - 52px);
+    margin-top: 20px;
+    overflow-y: auto;
+  }
+
+  &-number {
+    margin-bottom: 10px;
+    padding: 4px 0 10px 20px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+  }
+
+  &-tree {
+    height: calc(100% - 47px);
+    overflow-y: auto;
+
+    .ant-tree-treenode,
+    .ant-tree-node-content-wrapper {
+      width: 100%;
+    }
+  }
+
+  &-tree-title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+  }
+}