fix: 增加组件

.umirc.js

@@ -90,10 +90,12 @@ export default {
           'TimeRangePicker',
           'MqttView',
           'ExportExcel',
-          'DatePickerCustom',
           'LoadBox',
           'TipTool',
           'RichText',
+          'DatePickerCustom',
+          'SelectCustom',
+          'TreeCustom',
         ],
       },
       {

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

 ---
-title: DatePicker - 时间选择器
+title: DatePickerCustom - 时间选择器
 nav:
   title: 基础组件
   path: /components
@@ -11,6 +11,16 @@ group:
 
 ## 代码演示
 
+### 时间选择器 - 时间
+
+<code src="./demos/base1.tsx">
+
+## API
+
+api 参考 Antd DatePicker 组件 https://ant.design/components/date-picker-cn/#API
+
+## 时间选择器 - 日期
+
 <code src="./demos/base.tsx">
 
 ## API
@@ -20,3 +30,11 @@ api 参考 Antd DatePicker 组件 https://ant.design/components/date-picker-cn/#
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | onChange | 改变选择的时间，重写 antd 方法，返回起始时间对象 | function(date, dateString){ } | -- |
+
+## 时间选择器 - 范围
+
+<code src="./demos/base2.tsx">
+
+## API
+
+api 参考 Antd DatePicker 组件 https://ant.design/components/date-picker-cn/#API

packages/base-components/DatePickerCustom/src/demos/base.tsx

@@ -2,7 +2,7 @@ import React, { useContext, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { Input } from 'antd';
-import DatePickerCustom from '../index';
+import DatePickerCustom, { TimePickerCustom, RangePickerCustom } from '../index';
 
 const Demo = (props) => {
   const [startTime, setStartTime] = useState('');
@@ -14,12 +14,32 @@ const Demo = (props) => {
   };
   return (
     <>
-      <DatePickerCustom onChange={onChange} picker="date" style={{ marginRight: '10px' }} />
-      <DatePickerCustom onChange={onChange} picker="week" style={{ marginRight: '10px' }} />
-      <DatePickerCustom onChange={onChange} picker="month" style={{ marginRight: '10px' }} />
-      <DatePickerCustom onChange={onChange} picker="quarter" style={{ marginRight: '10px' }} />
-      <DatePickerCustom onChange={onChange} picker="year" style={{ marginRight: '10px' }} />
-      <div style={{ display: 'flex', marginTop: '10px' }}>
+      <DatePickerCustom
+        onChange={onChange}
+        picker="date"
+        style={{ marginRight: '10px', marginBottom: '10px' }}
+      />
+      <DatePickerCustom
+        onChange={onChange}
+        picker="week"
+        style={{ marginRight: '10px', marginBottom: '10px' }}
+      />
+      <DatePickerCustom
+        onChange={onChange}
+        picker="month"
+        style={{ marginRight: '10px', marginBottom: '10px' }}
+      />
+      <DatePickerCustom
+        onChange={onChange}
+        picker="quarter"
+        style={{ marginRight: '10px', marginBottom: '10px' }}
+      />
+      <DatePickerCustom
+        onChange={onChange}
+        picker="year"
+        style={{ marginRight: '10px', marginBottom: '10px' }}
+      />
+      <div style={{ display: 'flex' }}>
         <Input
           value={startTime}
           placeholder="起始时间"

packages/base-components/DatePickerCustom/src/demos/base1.tsx

+import React, { useContext, useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { Input } from 'antd';
+import DatePickerCustom, { TimePickerCustom, RangePickerCustom } from '../index';
+
+const Demo1 = (props) => {
+  return (
+    <>
+      <TimePickerCustom style={{ marginRight: '10px', marginBottom: '10px' }} />
+    </>
+  );
+};
+
+export default Demo1;

packages/base-components/DatePickerCustom/src/demos/base2.tsx

+import React, { useContext, useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { Input } from 'antd';
+import DatePickerCustom, { TimePickerCustom, RangePickerCustom } from '../index';
+
+const Demo = (props) => {
+  return (
+    <>
+      <RangePickerCustom style={{ marginRight: '10px', marginBottom: '10px' }} />
+    </>
+  );
+};
+
+export default Demo;

packages/base-components/DatePickerCustom/src/index.js

@@ -3,9 +3,10 @@ import React, { useContext } from 'react';
 import moment from 'moment';
 import classNames from 'classnames';
 // eslint-disable-next-line no-unused-vars
-import { DatePicker, ConfigProvider } from 'antd';
+import { DatePicker, ConfigProvider, TimePicker } from 'antd';
 import './index.less';
 
+const { RangePicker } = DatePicker;
 const FORMATS = {
   day: 'YYYY-MM-DD',
   week: 'YYYY-wo',
@@ -126,7 +127,7 @@ const DatePickerCustom = (props) => {
     const date = new Date(a, parseInt(b) - 1, c);
     let w = date.getDay();
     const d = date.getDate();
-    if (w == 0) {
+    if (w === 0) {
       w = 7;
     }
     const config = {
@@ -148,4 +149,13 @@ const DatePickerCustom = (props) => {
   );
 };
 
+const TimePickerCustom = (props) => {
+  return <TimePicker {...props} />;
+};
+const RangePickerCustom = (props) => {
+  return <RangePicker {...props} />;
+};
+
+export { TimePickerCustom, RangePickerCustom };
+
 export default DatePickerCustom;

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

@@ -13,7 +13,7 @@
   // 修改选中的年份、季度背景颜⾊
   .ant-picker-cell-selected {
     .ant-picker-cell-inner {
-      background: #5788ff;
+      background: #1890ff;
     }
   }
   // 使⽤CSS改变季度选择器的内容
@@ -38,7 +38,7 @@
     .ant-picker-cell-selected {
       &::before {
         color: #fff;
-        background: #5788ff;
+        background: #1890ff;
       }
     }
     // 控制伪元素所占宽度

packages/base-components/SelectCustom/README.md

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

packages/base-components/SelectCustom/package.json

+{
+  "name": "@wisdom-components/selectcustom",
+  "version": "1.0.0",
+  "description": "> TODO: description",
+  "author": "lijiwen <961370825@qq.com>",
+  "homepage": "",
+  "license": "ISC",
+  "sideEffects": [
+    "*.less"
+  ],
+  "module": "es/index.js",
+  "main": "lib/index.js",
+  "directories": {
+    "lib": "lib",
+    "es": "es",
+    "dist": "dist",
+    "test": "__tests__"
+  },
+  "files": [
+    "lib",
+    "es",
+    "dist"
+  ],
+  "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/base-components/SelectCustom/src/SelectCustom.md

+---
+title: SelectCustom - 下拉选择器
+nav:
+  title: 基础组件
+  path: /components
+group:
+  path: /
+---
+
+# SelectCustom 下拉选择器
+
+## 代码演示
+
+### 下拉选择器 - 基本
+
+<code src="./demos/Basic.tsx">
+
+### 下拉选择器 - 多选
+
+<code src="./demos/Basic1.tsx">
+
+### 下拉选择器 - 带图标
+
+<code src="./demos/Basic2.tsx">
+
+### 下拉选择器 - 多字段
+
+<code src="./demos/Basic3.tsx">
+
+### 下拉选择器 - 选项分组
+
+<code src="./demos/Basic4.tsx">
+
+## API
+
+api 参考 Antd Select 组件 https://ant.design/components/select-cn#api
+
+| 参数       | 说明                     | 类型      | 默认值 |
+| ---------- | ------------------------ | --------- | ------ |
+| prefixIcon | 自定义的选择框前缀缀图标 | ReactNode | --     |
+
+### 下拉选择器 - 树单选
+
+<code src="./demos/Basic5.tsx">
+
+### 下拉选择器 - 树多选
+
+<code src="./demos/Basic6.tsx">
+
+## API
+
+api 参考 Antd TreeSelect 组件 https://ant.design/components/tree-select-cn#api

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

+// @ts-ignore
+import React, { useEffect, useState } from 'react';
+import { SelectCustom, TreeSelectCustom, Option, OptGroup, SHOW_PARENT } from '../index';
+import { HomeOutlined } from '@ant-design/icons';
+import './index.less';
+
+const Demo = (props) => {
+  const handleChange = (value) => {
+    console.log(`selected ${value}`);
+  };
+  return (
+    <SelectCustom
+      defaultValue="信息化会议"
+      style={{
+        width: 150,
+        marginBottom: '10px',
+      }}
+      onChange={handleChange}
+      showSearch={true}
+      dropdownStyle={{ width: '100px' }}
+      options={[
+        {
+          value: '产品研发会议',
+          label: '产品研发会议',
+        },
+        {
+          value: '信息化会议',
+          label: '信息化会议',
+        },
+        {
+          value: '项目会议',
+          label: '项目会议',
+        },
+        {
+          value: '管理会议',
+          label: '管理会议',
+        },
+      ]}
+    />
+  );
+};
+
+export default Demo;

packages/base-components/SelectCustom/src/demos/Basic1.tsx

+// @ts-ignore
+import React, { useEffect, useState } from 'react';
+import { SelectCustom, TreeSelectCustom, Option, OptGroup, SHOW_PARENT } from '../index';
+import './index.less';
+
+const Demo1 = (props) => {
+  const handleChange = (value) => {
+    console.log(`selected ${value}`);
+  };
+  return (
+    <SelectCustom
+      mode="multiple"
+      allowClear
+      defaultValue={['浊度', 'COD']}
+      style={{
+        width: 300,
+      }}
+      onChange={handleChange}
+      showSearch={true}
+      options={[
+        {
+          value: '浊度',
+          label: '浊度',
+        },
+        {
+          value: 'pH',
+          label: 'pH',
+        },
+        {
+          value: '水温',
+          label: '水温',
+        },
+        {
+          value: 'COD',
+          label: 'COD',
+        },
+      ]}
+    />
+  );
+};
+
+export default Demo1;

packages/base-components/SelectCustom/src/demos/Basic2.tsx

+// @ts-ignore
+import React, { useEffect, useState } from 'react';
+import { SelectCustom, TreeSelectCustom, Option, OptGroup, SHOW_PARENT } from '../index';
+import { HomeOutlined } from '@ant-design/icons';
+import './index.less';
+
+const Demo2 = (props) => {
+  const handleChange = (value) => {
+    console.log(`selected ${value}`);
+  };
+  return (
+    <SelectCustom
+      defaultValue="丽江水厂"
+      style={{
+        width: 150,
+      }}
+      onChange={handleChange}
+      showSearch={true}
+      prefixIcon={<HomeOutlined />}
+      options={[
+        {
+          value: '丽江水厂',
+          label: '丽江水厂',
+        },
+        {
+          value: '崇左水厂',
+          label: '崇左水厂',
+        },
+      ]}
+    />
+  );
+};
+
+export default Demo2;

packages/base-components/SelectCustom/src/demos/Basic3.tsx

+// @ts-ignore
+import React, { useEffect, useState } from 'react';
+import { SelectCustom, TreeSelectCustom, Option, OptGroup, SHOW_PARENT } from '../index';
+import { HomeOutlined } from '@ant-design/icons';
+import './index.less';
+
+const Demo3 = (props) => {
+  const handleChange = (value) => {
+    console.log(`selected ${value}`);
+  };
+  return (
+    <SelectCustom
+      defaultValue="研发一部"
+      style={{
+        width: 150,
+      }}
+      onChange={handleChange}
+      showSearch={true}
+      dropdownStyle={{ width: '280px' }}
+      dropdownMatchSelectWidth={false}
+      options={[
+        {
+          value: '熊猫智慧水务',
+          label: (
+            <div className="optionItem">
+              <b className="optionValue">熊猫智慧水务</b>
+            </div>
+          ),
+        },
+        {
+          value: '研发一部',
+          label: (
+            <div className="optionItem">
+              <span className="optionValue">研发一部</span>
+              <span className="optionTitle" title="熊猫智慧水务/产品研发部">
+                熊猫智慧水务/产品研发部
+              </span>
+            </div>
+          ),
+        },
+      ]}
+    />
+  );
+};
+
+export default Demo3;

packages/base-components/SelectCustom/src/demos/Basic4.tsx

+// @ts-ignore
+import React, { useEffect, useState } from 'react';
+import { SelectCustom, TreeSelectCustom, Option, OptGroup, SHOW_PARENT } from '../index';
+import { HomeOutlined } from '@ant-design/icons';
+import './index.less';
+
+const Demo4 = (props) => {
+  const handleChange = (value) => {
+    console.log(`selected ${value}`);
+  };
+  return (
+    <SelectCustom
+      defaultValue="加压泵站"
+      style={{
+        width: 200,
+      }}
+      onChange={handleChange}
+    >
+      <OptGroup label="崇左水厂">
+        <Option value="原水泵站">原水泵站</Option>
+        <Option value="加压泵站">加压泵站</Option>
+      </OptGroup>
+      <OptGroup label="丽江水厂">
+        <Option value="沉淀池">沉淀池</Option>
+        <Option value="清水泵房">清水泵房</Option>
+      </OptGroup>
+    </SelectCustom>
+  );
+};
+
+export default Demo4;

packages/base-components/SelectCustom/src/demos/Basic5.tsx

+// @ts-ignore
+import React, { useEffect, useState } from 'react';
+import { SelectCustom, TreeSelectCustom, Option, OptGroup, SHOW_PARENT } from '../index';
+import { HomeOutlined } from '@ant-design/icons';
+import './index.less';
+
+const Demo = (props) => {
+  const onChange = (newValue) => {
+    console.log(`selected ${newValue}`);
+  };
+  const treeData = [
+    {
+      value: '崇左水厂',
+      title: '崇左水厂',
+      children: [
+        {
+          value: '原水泵站',
+          title: '原水泵站',
+          children: [
+            {
+              value: '一期原水泵站',
+              title: '一期原水泵站',
+            },
+            {
+              value: '二期原水泵站',
+              title: '二期原水泵站',
+            },
+          ],
+        },
+        {
+          value: '沉淀池',
+          title: '沉淀池',
+          children: [
+            {
+              value: '一期沉淀池',
+              title: '一期沉淀池',
+            },
+            {
+              value: '二期沉淀池',
+              title: '二期沉淀池',
+            },
+          ],
+        },
+      ],
+    },
+  ];
+  return (
+    <TreeSelectCustom
+      showSearch
+      style={{
+        width: '100%',
+        marginBottom: '10px',
+      }}
+      dropdownStyle={{
+        maxHeight: 400,
+        overflow: 'auto',
+      }}
+      placeholder="Please select"
+      defaultValue={'二期原水泵站'}
+      allowClear
+      treeDefaultExpandAll
+      onChange={onChange}
+      treeData={treeData}
+    />
+  );
+};
+
+export default Demo;

packages/base-components/SelectCustom/src/demos/Basic6.tsx

+// @ts-ignore
+import React, { useEffect, useState } from 'react';
+import { SelectCustom, TreeSelectCustom, Option, OptGroup, SHOW_PARENT } from '../index';
+import { HomeOutlined } from '@ant-design/icons';
+import './index.less';
+
+const Demo = (props) => {
+  const onChange = (newValue) => {
+    console.log(`selected ${newValue}`);
+  };
+  const treeData = [
+    {
+      title: '平台研发部',
+      value: '平台研发部',
+      key: '0-0',
+      children: [
+        {
+          title: '研发一部',
+          value: '研发一部',
+          key: '0-0-0',
+        },
+        {
+          title: '研发二部',
+          value: '研发二部',
+          key: '0-0-1',
+        },
+        {
+          title: '研发三部',
+          value: '研发三部',
+          key: '0-0-2',
+        },
+        {
+          title: '研发四部',
+          value: '研发四部',
+          key: '0-0-3',
+        },
+      ],
+    },
+    {
+      title: '平台实施部',
+      value: '平台实施部',
+      key: '0-1',
+      children: [
+        {
+          title: '项目管理组',
+          value: '项目管理组',
+          key: '0-1-0',
+        },
+        {
+          title: '项目支持组',
+          value: '项目支持组',
+          key: '0-1-1',
+        },
+      ],
+    },
+  ];
+  return (
+    <TreeSelectCustom
+      treeData={treeData}
+      onChange={onChange}
+      treeCheckable={true}
+      defaultValue={['研发一部', '研发三部']}
+      // showCheckedStrategy SHOW_PARENT
+      placeholder="Please select"
+      treeDefaultExpandAll
+      style={{
+        width: '100%',
+      }}
+    />
+  );
+};
+
+export default Demo;

packages/base-components/SelectCustom/src/demos/index.less

+.optionItem {
+  display: flex;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+
+  .optionValue {
+    margin-right: 1em;
+  }
+
+  .optionTitle {
+    overflow: hidden;
+    color: silver;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+}

packages/base-components/SelectCustom/src/index.js

+// eslint-disable-next-line no-unused-vars
+import React, { useContext } from 'react';
+import classNames from 'classnames';
+// eslint-disable-next-line no-unused-vars
+import { Select, TreeSelect, ConfigProvider } from 'antd';
+import './index.less';
+
+const { Option, OptGroup } = Select;
+const { SHOW_PARENT } = TreeSelect;
+const SelectCustom = (props) => {
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls('select-custom');
+
+  return (
+    <div className={classNames(`${prefixCls}`, props.prefixIcon ? `${prefixCls}-prefix` : '')}>
+      {props.prefixIcon ? (
+        <div className={classNames(`${prefixCls}-icon`)} style={props.prefixStyle}>
+          {props.prefixIcon}
+        </div>
+      ) : null}
+      <Select
+        {...props}
+        className={classNames(`${prefixCls}-base`, props.className || '')}
+        popupClassName={classNames(`${prefixCls}-base-poup`, props.popupClassName || '')}
+      ></Select>
+    </div>
+  );
+};
+
+const TreeSelectCustom = (props) => {
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls('tree-select-custom');
+  return (
+    <TreeSelect {...props} className={classNames(`${prefixCls}-base`, props.className || '')} />
+  );
+};
+
+export { SelectCustom, TreeSelectCustom, Option, OptGroup, SHOW_PARENT };

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

+@root-entry-name: 'default';
+@import '~antd/es/style/themes/index.less';
+@select-custom-prefix-cls: ~'@{ant-prefix}-select-custom';
+@tree-select-custom-prefix-cls: ~'@{ant-prefix}-tree-select-custom';
+
+.@{select-custom-prefix-cls} {
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  &-icon {
+    position: absolute;
+    z-index: 1;
+    padding-left: 10px;
+  }
+}
+
+.@{select-custom-prefix-cls}-prefix {
+  .@{select-custom-prefix-cls}-base {
+    > .@{ant-prefix}-select-selector {
+      padding-left: 30px;
+
+      > .@{ant-prefix}-select-selection-search {
+        left: 30px;
+      }
+    }
+  }
+}
+
+.@{ant-prefix}-select-item-option-active:not(.@{ant-prefix}-select-item-option-disabled) {
+  background-color: #f8f8f8;
+}
+
+.@{ant-prefix}-select-item-option-selected:not(.@{ant-prefix}-select-item-option-disabled) {
+  background-color: #e7f3fd;
+}
+
+.@{ant-prefix}-select-tree {
+  .@{ant-prefix}-select-tree-node-content-wrapper.@{ant-prefix}-select-tree-node-selected {
+    background-color: #e7f3fd;
+  }
+
+  .@{ant-prefix}-select-tree-node-content-wrapper:hover {
+    background-color: #f8f8f8;
+  }
+}

packages/base-components/TreeCustom/README.md

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

packages/base-components/TreeCustom/package.json

+{
+  "name": "@wisdom-components/treecustom",
+  "version": "1.0.0",
+  "description": "> TODO: description",
+  "author": "lijiwen <961370825@qq.com>",
+  "homepage": "",
+  "license": "ISC",
+  "sideEffects": [
+    "*.less"
+  ],
+  "module": "es/index.js",
+  "main": "lib/index.js",
+  "directories": {
+    "lib": "lib",
+    "es": "es",
+    "dist": "dist",
+    "test": "__tests__"
+  },
+  "files": [
+    "lib",
+    "es",
+    "dist"
+  ],
+  "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/base-components/TreeCustom/src/TreeCustom.md

+---
+title: TreeCustom - 树形控件
+nav:
+  title: 基础组件
+  path: /components
+group:
+  path: /
+---
+
+# TreeCustom 树形控件
+
+## 代码演示
+
+### 树形控件 - 基本
+
+<code src="./demos/Basic.tsx">
+
+### 树形控件 - 可勾选
+
+<code src="./demos/Basic1.tsx">
+
+### 树形控件 - 带图标
+
+<code src="./demos/Basic2.tsx">
+
+## API
+
+api 参考 Antd Tree 组件 https://ant.design/components/tree-cn#api

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

+// @ts-ignore
+import React, { useEffect, useState } from 'react';
+import TreeCustom from '../index';
+import { HomeOutlined } from '@ant-design/icons';
+
+const Demo = (props) => {
+  const treeData = [
+    {
+      title: '熊猫智慧水务',
+      key: '0-0',
+      children: [
+        {
+          title: '平台研发部',
+          key: '0-0-0',
+          children: [
+            {
+              title: '研发一部',
+              key: '0-0-0-0',
+            },
+            {
+              title: '研发二部',
+              key: '0-0-0-1',
+            },
+            {
+              title: '研发三部',
+              key: '0-0-0-1',
+            },
+            {
+              title: '研发四部',
+              key: '0-0-0-1',
+            },
+          ],
+        },
+        {
+          title: '项目实施部',
+          key: '0-0-1',
+          children: [],
+        },
+        {
+          title: '售前支持部',
+          key: '0-0-2',
+          children: [],
+        },
+        {
+          title: '熊猫智慧水务运营部',
+          key: '0-0-3',
+          children: [],
+        },
+        {
+          title: '智慧水务办公室',
+          key: '0-0-4',
+          children: [],
+        },
+      ],
+    },
+  ];
+  const onSelect = (selectedKeys, info) => {
+    console.log('selected', selectedKeys, info);
+  };
+  const onCheck = (checkedKeys, info) => {
+    console.log('onCheck', checkedKeys, info);
+  };
+  return (
+    <TreeCustom
+      defaultSelectedKeys={['0-0-0']}
+      defaultExpandedKeys={['0-0-0']}
+      onSelect={onSelect}
+      onCheck={onCheck}
+      treeData={treeData}
+    />
+  );
+};
+
+export default Demo;

packages/base-components/TreeCustom/src/demos/Basic1.tsx

+// @ts-ignore
+import React, { useEffect, useState } from 'react';
+import TreeCustom from '../index';
+
+const Demo1 = (props) => {
+  const treeData = [
+    {
+      title: '二供泵房',
+      key: '0-0',
+      children: [
+        {
+          title: '碧桂园',
+          key: '0-0-0',
+          children: [
+            {
+              title: '低区',
+              key: '0-0-0-0',
+            },
+            {
+              title: '中区',
+              key: '0-0-0-1',
+            },
+            {
+              title: '高区',
+              key: '0-0-0-2',
+            },
+          ],
+        },
+        {
+          title: '金瑞国际',
+          key: '0-0-1',
+          children: [
+            {
+              title: '低区',
+              key: '0-0-1-0',
+            },
+            {
+              title: '中区',
+              key: '0-0-1-1',
+            },
+            {
+              title: '高区',
+              key: '0-0-1-2',
+            },
+          ],
+        },
+      ],
+    },
+    {
+      title: '二供机组',
+      key: '0-1',
+      children: [
+        {
+          title: '低区',
+          key: '0-1-0',
+        },
+        {
+          title: '中区',
+          key: '0-1-1',
+        },
+        {
+          title: '高区',
+          key: '0-1-2',
+        },
+      ],
+    },
+  ];
+  const onSelect = (selectedKeys, info) => {
+    console.log('selected', selectedKeys, info);
+  };
+  const onCheck = (checkedKeys, info) => {
+    console.log('onCheck', checkedKeys, info);
+  };
+  return (
+    <TreeCustom
+      style={{ marginLeft: '20px' }}
+      checkable
+      defaultExpandedKeys={['0-0-0', '0-0-1']}
+      defaultSelectedKeys={['0-0-0']}
+      defaultCheckedKeys={['0-0-0']}
+      onSelect={onSelect}
+      onCheck={onCheck}
+      treeData={treeData}
+    />
+  );
+};
+
+export default Demo1;

packages/base-components/TreeCustom/src/demos/Basic2.tsx

+// @ts-ignore
+import React, { useEffect, useState } from 'react';
+import TreeCustom from '../index';
+import { HomeOutlined } from '@ant-design/icons';
+
+const Demo2 = (props) => {
+  const treeData = [
+    {
+      title: '二供泵房',
+      key: '0-0',
+      icon: <HomeOutlined />,
+      children: [
+        {
+          title: '碧桂园',
+          key: '0-0-0',
+          icon: <HomeOutlined />,
+          children: [
+            {
+              title: '低区',
+              key: '0-0-0-0',
+            },
+            {
+              title: '中区',
+              key: '0-0-0-1',
+            },
+            {
+              title: '高区',
+              key: '0-0-0-2',
+            },
+          ],
+        },
+        {
+          title: '金瑞国际',
+          key: '0-0-1',
+          icon: <HomeOutlined />,
+          children: [
+            {
+              title: '低区',
+              key: '0-0-1-0',
+            },
+            {
+              title: '中区',
+              key: '0-0-1-1',
+            },
+            {
+              title: '高区',
+              key: '0-0-1-2',
+            },
+          ],
+        },
+      ],
+    },
+    {
+      title: '二供机组',
+      key: '0-1',
+      icon: <HomeOutlined />,
+      children: [
+        {
+          title: '低区',
+          key: '0-1-0',
+        },
+        {
+          title: '中区',
+          key: '0-1-1',
+        },
+        {
+          title: '高区',
+          key: '0-1-2',
+        },
+      ],
+    },
+  ];
+  const onSelect = (selectedKeys, info) => {
+    console.log('selected', selectedKeys, info);
+  };
+  const onCheck = (checkedKeys, info) => {
+    console.log('onCheck', checkedKeys, info);
+  };
+  return (
+    <TreeCustom
+      style={{ marginLeft: '20px' }}
+      showIcon={true}
+      defaultSelectedKeys={['0-0-0']}
+      defaultExpandedKeys={['0-0-0']}
+      onSelect={onSelect}
+      onCheck={onCheck}
+      treeData={treeData}
+    />
+  );
+};
+
+export default Demo2;

packages/base-components/TreeCustom/src/index.js

+// eslint-disable-next-line no-unused-vars
+import React, { useContext } from 'react';
+import classNames from 'classnames';
+// eslint-disable-next-line no-unused-vars
+import { Tree, ConfigProvider } from 'antd';
+import './index.less';
+
+const TreeCustom = (props) => {
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls('tree-custom');
+
+  return <Tree {...props} className={classNames(`${prefixCls}-base`, props.className || '')} />;
+};
+
+export default TreeCustom;

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

+@root-entry-name: 'default';
+@import '~antd/es/style/themes/index.less';
+@tree-custom-prefix-cls: ~'@{ant-prefix}-tree-custom';
+
+.@{tree-custom-prefix-cls}-base {
+  .@{ant-prefix}-tree-node-content-wrapper.@{ant-prefix}-tree-node-selected {
+    background-color: #e7f3fd;
+  }
+
+  .@{ant-prefix}-tree-node-content-wrapper:hover {
+    background-color: #f8f8f8;
+  }
+}

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

@@ -298,7 +298,7 @@ const ConfigurationView = (props) => {
   const ruleOperation = (node, realVal) => {
     const patt = /[><=]/gi;
     const shRule = JSON.parse(node.shRule).find((rule) => {
-      if (rule.val.match(patt)) {
+      if (rule.val.toString().match(patt)) {
         const ruleStr = 'if(' + rule.val + '){ return true } else { return false }';
         try {
           return new Function('x', 'X', ruleStr)(realVal, realVal);
@@ -315,7 +315,7 @@ const ConfigurationView = (props) => {
   /** ***********************************运行值规则运算********************************* */
   const openValState = (openVal, realVal) => {
     const patt = /[><=]/gi;
-    if (openVal.match(patt)) {
+    if (openVal.toString().match(patt)) {
       const ruleStr = 'if(' + openVal + '){ return true } else { return false }';
       try {
         return new Function('x', 'X', ruleStr)(realVal, realVal);