feat: add ec-quotaselect

.umirc.js

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

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/src/EC-DeviceTree.md

@@ -7,7 +7,7 @@ group:
   path: /
 ---
 
-# DeviceTree 设备树
+# EC-DeviceTree 设备树
 
 基础业务组件
 

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

@@ -3,22 +3,22 @@ import PandaDeviceTree from '../index';
 import { service } from '@wisdom-utils/utils';
 
 const REQUEST_HTTP = 'http';
-const REQUEST_METHOD_GET = 'post';
+const REQUEST_METHOD_POST = 'post';
 
-const GET_SKETCHPAD_LIST =
+const GET_DEVICE_LIST =
   'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api/Publish/Monitor/Device/DeviceTree'; //获取设备树列表
 
 const deviceTreeService = {
-  getDeviceTreeList: {
-    url: GET_SKETCHPAD_LIST,
-    method: REQUEST_METHOD_GET,
+  getDeviceList: {
+    url: GET_DEVICE_LIST,
+    method: REQUEST_METHOD_POST,
     type: REQUEST_HTTP,
   },
 };
 
 const dtService = service(deviceTreeService);
 
-const getDeviceTreeList = dtService.getDeviceTreeList;
+const getDeviceList = dtService.getDeviceList;
 
 const Demo = () => {
   const onTreeCheck = (checkedKeysValue) => {
@@ -35,7 +35,7 @@ const Demo = () => {
         checkable
         onTreeCheck={onTreeCheck}
         onTreeSelect={onTreeSelect}
-        deviceTreeService={getDeviceTreeList}
+        deviceTreeService={getDeviceList}
         serviceParams={
           {
             // pageIndex: 1,

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%;
+  }
+}