fix: conflict

.umirc.js

@@ -102,8 +102,15 @@ export default {
     '/extend-components': [
       {
         title: '数据展示',
-        children: ['EC_DeviceTree', 'EC_QuotaSelect'],
+        children: ['EC_DeviceTree', 'EC_QuotaSelect', 'EC_HistoryInfo'],
       },
     ],
   },
+  proxy: {
+    '/api': {
+      target: 'http://127.0.0.1:8888/',
+      changeOrigin: true,
+      pathRewrite: { '^/api': '' },
+    },
+  },
 };

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

@@ -45,7 +45,7 @@ const Demo = () => {
 
   // @ts-ignore
   return (
-    <div style={{ height: '400px' }}>
+    <div style={{ height: '800px' }}>
       {!!dataSource.length && <BasicTable dataSource={dataSource} columns={columns} bordered />}
       {!dataSource.length && <Empty description={'暂无数据'} />}
     </div>

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

@@ -118,9 +118,13 @@
   }
 
   .ant-table.ant-table-bordered > .ant-table-container {
-    border: 1px solid #dbe7fb;
-    border-right: 0;
-    border-bottom: 0;
+    border-top: 1px solid #dbe7fb;
+    border-left: 0;
+  }
+
+  .ant-table-header,
+  .ant-table-body {
+    border-left: 1px solid #dbe7fb;
   }
 
   .ant-table-summary {

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

@@ -8,6 +8,8 @@ const REQUEST_METHOD_POST = 'post';
 const GET_DEVICE_LIST =
   'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api/Publish/Monitor/Device/DeviceTree'; //获取设备树列表
 
+// const GET_DEVICE_LIST = '/api/Publish/GCK/Device/DeviceTree'; //获取设备树列表
+
 const deviceTreeService = {
   getDeviceList: {
     url: GET_DEVICE_LIST,

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

@@ -28,7 +28,7 @@ const DeviceTree = (props) => {
       pageSize: serviceParams.pageSize || 500,
       deviceTypes: serviceParams.deviceTypes || '二供泵房,二供机组',
       getChild: serviceParams.getChild || true,
-      userID: serviceParams.userID || 1,
+      userID: serviceParams.userID || 0,
       queryInfo: serviceParams.queryInfo || '',
       sortFields: serviceParams.sortFields || '',
       direction: serviceParams.direction || '',
@@ -39,8 +39,8 @@ const DeviceTree = (props) => {
 
   const handleData = (data) => {
     data.forEach((item) => {
-      item.title = item.DeviceName;
-      item.key = item.StationID;
+      item.title = item.deviceName;
+      item.key = item.stationID;
       item.children = handleData(item.children);
     });
     return data;
@@ -51,7 +51,7 @@ const DeviceTree = (props) => {
       if (response.code === 0) {
         const data = response.data
           ? response.data.list && response.data.list.length > 0
-            ? response.data.list[0].DeviceList
+            ? response.data.list[0].deviceList
             : []
           : [];
         setTreeData(handleData(data));

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

@@ -20,6 +20,16 @@
     white-space: nowrap;
   }
 
+  .ant-tree-treenode {
+    width: 100%;
+  }
+
+  .ant-tree-node-content-wrapper {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
   &-content {
     flex: 1;
     overflow-y: scroll;

packages/extend-components/EC_HistoryInfo/README.md

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

packages/extend-components/EC_HistoryInfo/package.json

+{
+  "name": "@wisdom-components/ec_historyinfo",
+  "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_HistoryInfo/src/EC_HistoryInfo.md

+---
+title: EC-HistoryInfo - 历史数据查看
+nav:
+  title: 基础组件
+  path: /extend-components
+group:
+  path: /
+---
+
+# HistoryInfo 历史数据查看
+
+基础业务组件
+
+- 查看任意时间段的历史数据
+- 允许同期对比任意历史数据
+- 允许过滤异常值
+- 允许指定时间间隔的数据抽稀
+
+## 何时使用
+
+- 以图表或表格形式，查看历史数据时。
+
+## 代码演示
+
+<code src="./demos/Basic.tsx">
+
+## API
+
+api 参考 Antd Table 组件 https://ant.design/components/table-cn/#API
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+| --- | --- | --- | --- | --- |
+| title | 标题 | string | 指标曲线 | - |
+| defaultChecked | 默认选中自定义时间 key | string | oneHour | oneHour/fourHour/twelveHours/roundClock/yesterday |
+| tableProps | 表格其他 props | object | { } | - |
+| historyInfoService | 历史曲线服务 | promise | - | - |
+| historyInfoParams | 历史曲线服务参数 | object | { } | - |

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

+import React from 'react';
+import { service } from '@wisdom-utils/utils';
+import HistoryInfo from '../index';
+
+const REQUEST_HTTP = 'http';
+const REQUEST_METHOD_POST = 'post';
+
+const GET_HISTORY_INFO =
+  'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api/Publish/Monitor/Device/SensorsDataForStation'; //获取历史信息
+
+// const GET_HISTORY_INFO = '/api/Publish/GCK/Device/SensorsDataForStation'; //获取历史信息
+
+const historyInfoService = {
+  getHistoryInfo: {
+    url: GET_HISTORY_INFO,
+    method: REQUEST_METHOD_POST,
+    type: REQUEST_HTTP,
+  },
+};
+
+const hsService = service(historyInfoService);
+
+const getHistoryInfo = hsService.getHistoryInfo;
+
+const Demo = () => {
+  return (
+    <div style={{ height: '800px' }}>
+      <HistoryInfo
+        title={'指标曲线'}
+        tableProps={{ bordered: true, pagination: { pageSize: 20 } }}
+        historyInfoService={getHistoryInfo}
+        historyInfoParams={initialParams}
+      />
+    </div>
+  );
+};
+
+export default Demo;
+
+const initialParams = {
+  stream: [
+    {
+      stationCode: 'EGBF00000006',
+      sensors: '出水瞬时流量,今日供水量,今日用电量',
+      pointVersions: '二供泵房',
+      dateFrom: '2021-05-09 15:01:21',
+      dateTo: '2021-05-09 16:01:21',
+    },
+    {
+      stationCode: 'EGJZ00007117',
+      sensors: '进水压力,出水压力,泵1状态',
+      pointVersions: '二供机组',
+      dateFrom: '2021-05-09 15:01:21',
+      dateTo: '2021-05-09 16:01:21',
+    },
+  ],
+  ignoreOutliers: false, // 过滤异常值
+  isVertical: false, // 是否展示竖表
+  zoom: '', // 数据抽稀
+  unit: '', // 数据抽稀 min h
+};

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

+import React, { useContext, useState, useReducer, useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Highcharts from 'highcharts/highstock';
+import HighchartsReact from 'highcharts-react-official';
+import { Tabs, Select, Radio, Checkbox, ConfigProvider, DatePicker } from 'antd';
+import { PlusCircleOutlined, CloseCircleFilled } from '@ant-design/icons';
+import TimeRangePicker from '@wisdom-components/timerangepicker';
+import BasicTable from '@wisdom-components/basictable';
+import Empty from '@wisdom-components/empty';
+import moment from 'moment';
+import './index.less';
+
+const { TabPane } = Tabs;
+const { RangePicker } = DatePicker;
+const { Option } = Select;
+
+const UPDATE_TIME = {
+  UPDATE_TIME: 'updateTime',
+  UPDATE_BATCH_TIME: 'updateBatchTime',
+  UPDATE_DATA_THIN: 'updateDataThin',
+};
+
+const reducer = (state, action) => {
+  switch (action.type) {
+    case UPDATE_TIME.UPDATE_TIME:
+      return {
+        ...state,
+        dateRange: updateTime(action.payload),
+      };
+    case UPDATE_TIME.UPDATE_BATCH_TIME:
+      return {
+        ...state,
+        dateRange: action.payload,
+      };
+    case 'updateIgnoreOutliers':
+      return {
+        ...state,
+        ignoreOutliers: action.payload,
+      };
+    case UPDATE_TIME.UPDATE_DATA_THIN:
+      const { zoom, unit } = action.payload;
+      return {
+        ...state,
+        zoom,
+        unit,
+      };
+    default:
+      throw new Error();
+  }
+};
+
+const updateTime = (key) => {
+  let start = '',
+    end = '';
+  if (Array.isArray(key)) {
+    start = moment(key[0]).format(timeFormat);
+    end = moment(key[1]).format(timeFormat);
+  } else {
+    switch (key) {
+      case 'oneHour':
+        start = moment().subtract(1, 'hour').format(timeFormat);
+        end = moment().format(timeFormat);
+        break;
+      case 'fourHour':
+        start = moment().subtract(4, 'hour').format(timeFormat);
+        end = moment().format(timeFormat);
+        break;
+      case 'twelveHours':
+        start = moment().subtract(12, 'hour').format(timeFormat);
+        end = moment().format(timeFormat);
+        break;
+      case 'roundClock':
+        start = moment().subtract(24, 'hour').format(timeFormat);
+        end = moment().format(timeFormat);
+        break;
+      case 'yesterday':
+        start = moment().subtract(1, 'days').format(startFormat);
+        end = moment().subtract(1, 'days').format(endFormat);
+        break;
+    }
+  }
+  return [
+    {
+      dateFrom: start,
+      dateTo: end,
+    },
+  ];
+};
+
+const unique = (arr) => {
+  let unique = {};
+  arr.forEach((item) => {
+    unique[JSON.stringify(item)] = item;
+  });
+  arr = Object.keys(unique).map((v) => {
+    return JSON.parse(v);
+  });
+  return arr;
+};
+
+const DefaultDatePicker = (value) => [
+  {
+    key: 1,
+    value: moment(),
+  },
+  {
+    key: 2,
+    value: moment().subtract(1, value),
+  },
+];
+
+let chartWidth = 0; // chart width
+let chartHeight = 0; // chart height
+
+const HistoryInfo = (props) => {
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls('history-info');
+
+  const { title, tableProps, historyInfoService, historyInfoParams, defaultChecked } = props;
+
+  const [activeTabKey, setActiveTabKey] = useState('curve');
+  const [timeValue, setTimeValue] = useState('customer');
+  const [contrastOption, setContrastOption] = useState('day');
+  const [customerChecked, setCustomerChecked] = useState(defaultChecked || 'oneHour');
+  const [customerTime, setCustomerTime] = useState(null);
+  const [datePickerArr, setDatePickerArr] = useState(DefaultDatePicker('day'));
+  const [checkboxData, setCheckboxData] = useState(CheckboxData);
+  const [dataThinKey, setDataThinKey] = useState(timeIntervalList[0].key);
+  const [options, setOptions] = useState({});
+  const [params, setParams] = useState(historyInfoParams);
+  const [tableData, setTableData] = useState([]);
+  const [pageSize, setPageSize] = useState(20);
+  const [series, setSeries] = useState([]);
+  const [columns, setColumns] = useState([
+    {
+      title: '采集时间',
+      dataIndex: 'time',
+      key: 'time',
+      width: 160,
+      fixed: 'left',
+      ellipsis: true,
+    },
+  ]);
+
+  const [state, dispatch] = useReducer(reducer, initialState);
+
+  const container = useRef(null);
+
+  // 处理图表 series
+  const handleSeries = (v) => {
+    const resData = v;
+    const seriesData = [];
+    resData.forEach((item) => {
+      const data = [];
+      item.dataModel.forEach((child) => {
+        data.push([moment(child.pt).valueOf(), child.pv]);
+      });
+      const obj = {
+        name: item.equipmentName + '-' + item.sensorName,
+        sensorName: item.sensorName,
+        decimalPoint: item.decimalPoint,
+        unit: item.unit,
+        data: data,
+      };
+      if (timeValue === 'contrast' && item.dataModel[0]) {
+        const time = item.dataModel[0].pt.slice(0, contrastOption === 'day' ? 10 : 7);
+        obj.name = obj.name + '-' + time;
+      }
+      seriesData.push(obj);
+    });
+    setSeries(seriesData);
+  };
+
+  // 处理表格的数据
+  const handleTableData = (resData) => {
+    let timeData = [];
+    const timeSort = (dataArray) => {
+      // 处理时间排序
+      return dataArray.sort((a, b) => {
+        let aa = a,
+          bb = b;
+        if (timeValue === 'contrast') {
+          aa = a.slice(contrastOption === 'day' ? 11 : 8, 16);
+          bb = b.slice(contrastOption === 'day' ? 11 : 8, 16);
+        }
+        return aa.localeCompare(bb);
+      });
+    };
+    // 处理采集时间
+    resData.forEach((item) => {
+      item.dataModel.forEach((data) => {
+        if (!timeData.includes(data.pt)) {
+          timeData.push(data.pt);
+        }
+      });
+    });
+    timeData = timeSort(timeData);
+    // 处理表头数据
+    const columnsData = resData.map((item, index) => {
+      return {
+        title: `${item.equipmentName}-${item.sensorName}${item.unit ? `(${item.unit})` : ''}`,
+        dataIndex: `value${index + 1}`,
+        key: `value${index + 1}`,
+        ellipsis: true,
+      };
+    });
+    // 处理表格数据
+    const tableData = timeData.map((item, index) => {
+      let time = item;
+      if (timeValue === 'contrast') {
+        time = time.slice(contrastOption === 'day' ? 11 : 8, 16);
+      }
+      return { key: index, time: time };
+    });
+    // 处理表格数据
+    tableData.forEach((item, i) => {
+      resData.forEach((child, index) => {
+        child.dataModel.forEach((value, j) => {
+          if (timeData[i] === value.pt) item[`value${index + 1}`] = value.pv;
+        });
+      });
+    });
+    setTableData(tableData);
+    setColumns([columns[0], ...columnsData]);
+  };
+
+  // 处理接口服务参数的变化
+  const onChangeParams = (value = []) => {
+    const { dateRange, ignoreOutliers, zoom, unit } = value;
+    const requestArr = [];
+    dateRange.forEach((item) => {
+      const param = {
+        ...params,
+        stream: params.stream.map((child) => ({
+          ...child,
+          dateFrom: item.dateFrom,
+          dateTo: item.dateTo,
+        })),
+        ignoreOutliers,
+        zoom,
+        unit,
+      };
+      requestArr.push(historyInfoService(param));
+    });
+    Promise.all(requestArr).then((values) => {
+      if (values.length) {
+        let data = [];
+        values.forEach((res) => {
+          if (res.code === 0 && res.data.length) {
+            data = data.concat(res.data);
+          }
+        });
+        handleTableData(data);
+        handleSeries(data);
+      }
+    });
+  };
+
+  useEffect(() => {
+    onChangeParams(state);
+  }, [state]);
+
+  useEffect(() => {
+    dispatch({ type: UPDATE_TIME.UPDATE_TIME, payload: customerChecked });
+  }, [customerChecked]);
+
+  useEffect(() => {
+    setOptions({ ...handleChartOptions() });
+  }, [series]);
+
+  // 时间设置切换（自定义/同期对比）
+  const onTimeSetChange = (e) => {
+    setTimeValue(e.target.value);
+    if (e.target.value === 'contrast') {
+      // 同期对比
+      onContrastChange(contrastOption);
+    } else {
+      // 自定义
+      dispatch({ type: UPDATE_TIME.UPDATE_TIME, payload: customerChecked });
+    }
+  };
+
+  const handleBatchTime = (arr, cOption) => {
+    let newArr = [];
+    arr.forEach((child) => {
+      if (child.value) {
+        newArr.push({
+          dateFrom: moment(child.value).startOf(cOption).format(startFormat),
+          dateTo: moment(child.value).endOf(cOption).format(endFormat),
+        });
+      }
+    });
+    newArr = unique(newArr);
+    setDatePickerArr(arr);
+    dispatch({ type: UPDATE_TIME.UPDATE_BATCH_TIME, payload: newArr });
+  };
+
+  // 选择（日/月）
+  const onContrastChange = (value) => {
+    setContrastOption(value);
+    handleBatchTime([...DefaultDatePicker(value)], value);
+  };
+
+  const onCustomerRangeChange = (value) => {
+    setCustomerTime(value);
+    dispatch({ type: UPDATE_TIME.UPDATE_TIME, payload: value });
+  };
+
+  const onCustomerTimeChange = (key) => {
+    setCustomerChecked(key);
+    dispatch({ type: UPDATE_TIME.UPDATE_TIME, payload: key });
+  };
+
+  const onContrastPickerChange = (date, dateString, item) => {
+    let arr = [...datePickerArr];
+    arr.forEach((child) => {
+      if (child.key === item.key) {
+        child.value = date;
+      }
+    });
+    handleBatchTime(arr, contrastOption);
+  };
+
+  // 新增日期选择组件
+  const handleAddDatePicker = () => {
+    setDatePickerArr([
+      ...datePickerArr,
+      {
+        key: datePickerArr[datePickerArr.length - 1].key + 1,
+        value: '',
+      },
+    ]);
+  };
+
+  // 删除日期选择组件
+  const handleDeleteDatePicker = (index) => {
+    const arr = [...datePickerArr];
+    arr.splice(index, 1);
+    setDatePickerArr(arr);
+    handleBatchTime(arr, contrastOption);
+  };
+
+  // 曲线设置 checkbox
+  const onCheckboxChange = (e, key) => {
+    let data = [...checkboxData];
+    data.forEach((item) => {
+      if (item.key === key) {
+        item.checked = e.target.checked;
+        if (key === 'dataThin') {
+          if (e.target.checked) {
+            timeIntervalList.forEach((child) => {
+              if (child.key === dataThinKey) {
+                dispatch({ type: item.type, payload: { zoom: dataThinKey, unit: child.unit } });
+              }
+            });
+          } else {
+            dispatch({ type: item.type, payload: { zoom: '', unit: '' } });
+          }
+        }
+        if (key === 'ignoreOutliers') {
+          dispatch({ type: item.type, payload: e.target.checked });
+        }
+        if (key === 'curveCenter') {
+          setOptions({ ...handleChartOptions() });
+        }
+      }
+    });
+    setCheckboxData(data);
+  };
+
+  // 数据抽稀时间间隔
+  const onTimeIntervalChange = (value, { unit }) => {
+    let data = checkboxData.filter((item) => item.key === 'dataThin');
+    if (data[0].checked) {
+      dispatch({ type: UPDATE_TIME.UPDATE_DATA_THIN, payload: { zoom: value, unit: unit } });
+    }
+    setDataThinKey(value);
+  };
+
+  const renderCheckbox = (child) => (
+    <Checkbox
+      value={child.key}
+      checked={child.checked}
+      onChange={(e) => onCheckboxChange(e, child.key)}
+    >
+      {child.label}
+    </Checkbox>
+  );
+
+  const renderOptions = (item) => {
+    return (
+      <>
+        <div className={classNames(`${prefixCls}-time`)}>
+          <div className={classNames(`${prefixCls}-label`)}>时间</div>
+          <Radio.Group value={timeValue} onChange={onTimeSetChange}>
+            <Radio.Button value="customer">自定义</Radio.Button>
+            <Radio.Button value="contrast">同期对比</Radio.Button>
+          </Radio.Group>
+          {timeValue === 'customer' && ( // 自定义
+            <>
+              <TimeRangePicker
+                onChange={onCustomerTimeChange}
+                value={customerChecked}
+                dataSource={timeList}
+              />
+              <RangePicker
+                className={classNames(`${prefixCls}-customer`)}
+                onChange={onCustomerRangeChange}
+                value={customerTime}
+                showTime
+              />
+            </>
+          )}
+          {timeValue === 'contrast' && ( // 同期对比
+            <>
+              <Select value={contrastOption} style={{ width: 60 }} onChange={onContrastChange}>
+                <Option value="day">日</Option>
+                <Option value="month">月</Option>
+              </Select>
+              {datePickerArr.map((child, index) => (
+                <div key={child.key} className={classNames(`${prefixCls}-contrast-list`)}>
+                  <div className={classNames(`${prefixCls}-date-wrap`)}>
+                    <DatePicker
+                      picker={contrastOption}
+                      value={child.value}
+                      onChange={(date, dateString) =>
+                        onContrastPickerChange(date, dateString, child)
+                      }
+                    />
+                    {datePickerArr.length > 2 && (
+                      <div
+                        className={classNames(`${prefixCls}-date-delete`)}
+                        onClick={() => handleDeleteDatePicker(index)}
+                      >
+                        <CloseCircleFilled />
+                      </div>
+                    )}
+                  </div>
+                  {index < datePickerArr.length - 1 && (
+                    <div className={classNames(`${prefixCls}-connect`)}>与</div>
+                  )}
+                </div>
+              ))}
+              {datePickerArr.length < 5 && <PlusCircleOutlined onClick={handleAddDatePicker} />}
+            </>
+          )}
+        </div>
+        <div className={classNames(`${prefixCls}-cover`)}>
+          <div className={classNames(`${prefixCls}-label`)}>曲线设置</div>
+          {checkboxData.map((child) => (
+            <div key={child.key}>
+              {item.key === 'curve' && renderCheckbox(child)}
+              {item.key === 'table' && child.key !== 'curveCenter' && renderCheckbox(child)}
+            </div>
+          ))}
+          <Select value={dataThinKey} style={{ width: 90 }} onChange={onTimeIntervalChange}>
+            {timeIntervalList.map((child) => (
+              <Option key={child.key} unit={child.unit} value={child.key}>
+                {child.name}
+              </Option>
+            ))}
+          </Select>
+        </div>
+      </>
+    );
+  };
+
+  const getSeriesType = (sensorName) => {
+    return sensorName ? (sensorName.indexOf('流量') > -1 ? 'area' : 'spline') : 'spline';
+  };
+
+  // 处理图表options
+  const handleChartOptions = () => {
+    // const { series } = chartOptions;
+    let _series = [];
+    let _yAxis = [];
+    let uniqueUnit = [];
+    series.forEach((item, index) => {
+      // 处理series
+      let _s = {
+        name: item.name,
+        type: getSeriesType(item.sensorName),
+        data: item.data,
+        zIndex: 1,
+        tooltip: { valueSuffix: item.unit ? item.unit : '' },
+        color: colors[index],
+        decimalPoint: item.decimalPoint,
+        navigatorOptions: {
+          enabled: true,
+        },
+      };
+      if (_s.type === 'area' || _s.type === 'areaspline') {
+        _s.fillColor = {
+          linearGradient: {
+            x1: 0,
+            y1: 0,
+            x2: 0,
+            y2: 1,
+          },
+          stops: [
+            [0, Highcharts.Color(_s.color).setOpacity(0.1).get('rgba')],
+            [1, '#fff'],
+          ],
+        };
+        _s.threshold = 0;
+      }
+
+      // 处理yAxis
+      if (!uniqueUnit.includes(item.unit)) {
+        uniqueUnit.push(item.unit);
+        let _length = uniqueUnit.length - 1;
+        let _y = {
+          title: {
+            text: item.unit,
+            align: 'high',
+            offset: 0,
+            rotation: 0,
+            y: -25,
+            x: 0,
+          },
+          gridLineWidth: 1,
+          gridLineDashStyle: 'dash',
+          lineWidth: 1,
+          tickAmount: 10,
+          crosshair: true,
+          floor: 0,
+          num: _length,
+          opposite: _length % 2 === 0,
+          offset: Math.floor(_length / 2) * 40,
+          style: {
+            color: '',
+          },
+          labels: {
+            style: {
+              color: '',
+            },
+            x: -2,
+          },
+        };
+        _yAxis.push(_y);
+      }
+
+      // 处理series
+      _s.yAxis = uniqueUnit.findIndex((child) => child === item.unit);
+
+      _series.push(_s);
+    });
+
+    Highcharts.setOptions({
+      global: { timezoneOffset: -8 * 60 },
+    });
+
+    let options = { ...defaultOptions };
+
+    if (CheckboxData[0].checked) {
+      _yAxis = setYaxisMin(_yAxis, _series);
+    } else {
+      _yAxis = _yAxis.map((item) => ({ ...item, max: null, min: null }));
+    }
+
+    if (_yAxis.length > 0) {
+      options = {
+        ...defaultOptions,
+        // ...chartOptions,
+        yAxis: _yAxis,
+        series: _series,
+      };
+    }
+
+    options.tooltip.formatter = function formatter() {
+      let _html = `<b>${Highcharts.dateFormat(
+        contrastOption === 'day' ? '%H:%M' : '%d %H:%M',
+        this.x,
+      )}</b><br/>`;
+      this.points.forEach((item) => {
+        _html += `<span style={{color: ${item.series.color}}}>${item.series.name}</span>:
+                <b>${
+                  item.point.y.toFixed(
+                    item.series.userOptions.decimalPoint ? item.series.userOptions.decimalPoint : 2,
+                  ) * 1
+                }${item.series.userOptions.tooltip.valueSuffix}</b>
+                <br/>`;
+      });
+      return _html;
+    };
+
+    if (container.current) {
+      if (container.current.offsetWidth !== 0) {
+        chartWidth = container.current.offsetWidth;
+        chartHeight = container.current.offsetHeight;
+      }
+      Highcharts.setOptions({
+        // 处理 chart 高度坍塌
+        chart: {
+          width: container.current.offsetWidth === 0 ? chartWidth : container.current.offsetWidth,
+          height:
+            container.current.offsetHeight === 0 ? chartHeight : container.current.offsetHeight,
+        },
+      });
+    }
+
+    return options;
+  };
+
+  const setYaxisMin = (y, data) => {
+    let result = y.concat();
+
+    data.forEach((val) => {
+      let min = 999999999;
+      let showMin = 999999999;
+      let max = -999999999;
+      let showMax = -999999999;
+      val.data.forEach((item) => {
+        if (item[1]) {
+          min = Math.min(min, item[1]);
+          showMin = Math.min(min, item[1]);
+          max = Math.max(max, item[1]);
+          showMax = Math.max(max, item[1]);
+        }
+      });
+      let k = 0;
+      let same = false;
+      for (let i = 0; i < val.data.length; i++) {
+        // 判断是否全为0
+        if (val.data[i][1] !== 0) {
+          k = 1;
+        }
+        // 判断是否全相等
+        if (i >= 1 && val.data[i][1] !== val.data[i - 1][1]) {
+          same = true;
+        }
+      }
+
+      if (k === 0) {
+        result[val.yAxis].min = result[val.yAxis].min
+          ? Math.min(result[val.yAxis].min, -0.2)
+          : -0.2;
+        result[val.yAxis].max = result[val.yAxis].max ? Math.max(result[val.yAxis].max, 0.2) : 0.2;
+      } else if (!same) {
+        min = val.data[0][1] > 0 ? val.data[0][1] * 0.5 : val.data[0][1] * 1.5;
+        max = val.data[0][1] > 0 ? val.data[0][1] * 1.5 : val.data[0][1] * 0.5;
+        result[val.yAxis].min = result[val.yAxis].min
+          ? Math.min(result[val.yAxis].min, showMin)
+          : min;
+        result[val.yAxis].max = result[val.yAxis].max ? Math.max(result[val.yAxis].max, max) : max;
+      } else {
+        result[val.yAxis].min = result[val.yAxis].min
+          ? Math.min(result[val.yAxis].min, min)
+          : showMin;
+        result[val.yAxis].max = result[val.yAxis].max
+          ? Math.max(result[val.yAxis].max, max)
+          : showMax;
+      }
+    });
+
+    return result;
+  };
+
+  return (
+    <div className={classNames(prefixCls)}>
+      <Tabs
+        activeKey={activeTabKey}
+        centered
+        tabBarExtraContent={{
+          left: <h3 className="tabs-extra-demo-button">{title}</h3>,
+        }}
+        onChange={(key) => setActiveTabKey(key)}
+      >
+        {TabPaneData.map((item) => (
+          <TabPane tab={item.tab} key={item.key}>
+            <div className={classNames(`${prefixCls}-content`)}>
+              {renderOptions(item)}
+              {!tableData.length && <Empty />}
+              {!!tableData.length && (
+                <div className={classNames(`${prefixCls}-wrap`)}>
+                  <div className={classNames(`${prefixCls}-main`)}>
+                    {item.key === 'curve' && (
+                      <div className={classNames(`${prefixCls}-chart`)} ref={container}>
+                        <HighchartsReact
+                          immutable={true}
+                          highcharts={Highcharts}
+                          constructorType={'stockChart'}
+                          options={options}
+                          allowChartUpdate={true}
+                        />
+                      </div>
+                    )}
+                    {item.key === 'table' && (
+                      <BasicTable
+                        dataSource={tableData}
+                        columns={columns}
+                        {...tableProps}
+                        pagination={{ pageSize }}
+                        onChange={(value) => {
+                          setPageSize(value.pageSize);
+                        }}
+                      />
+                    )}
+                  </div>
+                </div>
+              )}
+            </div>
+          </TabPane>
+        ))}
+      </Tabs>
+    </div>
+  );
+};
+
+HistoryInfo.defaultProps = {
+  title: '指标曲线',
+  defaultChecked: 'oneHour',
+  tableProps: {},
+  historyInfoParams: {},
+  historyInfoService: () => {},
+};
+
+HistoryInfo.propTypes = {
+  title: PropTypes.string,
+  defaultChecked: PropTypes.string,
+  tableProps: PropTypes.object,
+  historyInfoParams: PropTypes.object,
+  historyInfoService: PropTypes.func,
+};
+
+export default HistoryInfo;
+
+const startFormat = 'YYYY-MM-DD 00:00:00';
+const endFormat = 'YYYY-MM-DD 23:59:59';
+
+const timeFormat = 'YYYY-MM-DD HH:mm:ss';
+
+const colors = [
+  '#1884EC',
+  '#90CE53',
+  '#86E0C7',
+  '#68cbd1',
+  '#bb98d1',
+  '#588c66',
+  '#b0859e',
+  '#647fac',
+  '#7c6894',
+  '#9c8273',
+  '#838b61',
+  '#437db0',
+  '#9b97c4',
+  '#bda589',
+  '#89bd8e',
+  '#cbcc75',
+];
+
+const defaultOptions = {
+  chart: {
+    zoomType: 'x',
+    backgroundColor: 'rgba(255, 255, 255, 0.5)',
+  },
+  colors: colors,
+  title: null,
+  credits: false,
+  rangeSelector: {
+    enabled: false,
+  },
+  xAxis: [
+    {
+      lineWidth: 0,
+      crosshair: true,
+      type: 'datetime',
+      gridLineDashStyle: 'dash',
+      gridLineWidth: 1,
+      dateTimeLabelFormats: {
+        second: '%H:%M:%S',
+        minute: '%H:%M',
+        hour: '%H:%M',
+        day: '%d',
+        week: '%d',
+        month: '%d',
+        year: '%Y',
+      },
+    },
+  ],
+  yAxis: [],
+  tooltip: {
+    shared: true,
+    split: false,
+    valueDecimals: 3,
+  },
+  plotOptions: {
+    series: {
+      showInNavigator: true,
+      connectNulls: false,
+      zoneAxis: 'x',
+    },
+  },
+  legend: {
+    enabled: true,
+    verticalAlign: 'top',
+  },
+  series: [],
+  responsive: {
+    rules: [
+      {
+        condition: {
+          maxWidth: 800,
+          minHeight: 500,
+        },
+      },
+    ],
+  },
+};
+
+const initialState = {
+  dateRange: [],
+  ignoreOutliers: false,
+  isVertical: false,
+  zoom: '',
+  unit: '',
+};
+
+const TabPaneData = [
+  {
+    key: 'curve',
+    tab: '曲线',
+  },
+  {
+    key: 'table',
+    tab: '表格',
+  },
+];
+
+const CheckboxData = [
+  {
+    key: 'curveCenter',
+    label: '曲线居中',
+    checked: false,
+  },
+  {
+    key: 'ignoreOutliers',
+    label: '过滤异常值',
+    type: 'updateIgnoreOutliers',
+    checked: false,
+  },
+  {
+    key: 'dataThin',
+    label: '数据抽稀',
+    type: 'updateDataThin',
+    checked: false,
+  },
+];
+
+const timeList = [
+  {
+    key: 'oneHour',
+    name: '近1小时',
+  },
+  {
+    key: 'fourHour',
+    name: '近4小时',
+  },
+  {
+    key: 'twelveHours',
+    name: '近12小时',
+  },
+  {
+    key: 'roundClock',
+    name: '近24小时',
+  },
+  {
+    key: 'yesterday',
+    name: '昨天',
+  },
+];
+
+const timeIntervalList = [
+  {
+    key: '5',
+    unit: 'min',
+    name: '5分钟',
+  },
+  {
+    key: '10',
+    unit: 'min',
+    name: '10分钟',
+  },
+  {
+    key: '30',
+    unit: 'min',
+    name: '30分钟',
+  },
+  {
+    key: '1',
+    unit: 'h',
+    name: '1小时',
+  },
+  {
+    key: '2',
+    unit: 'h',
+    name: '2小时',
+  },
+  {
+    key: '6',
+    unit: 'h',
+    name: '6小时',
+  },
+  {
+    key: '12',
+    unit: 'h',
+    name: '12小时',
+  },
+];

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

+@import (reference) '../../../../node_modules/antd/es/style/themes/default';
+@history-info-prefix-cls: ~'@{ant-prefix}-history-info';
+
+.@{history-info-prefix-cls} {
+  height: 100%;
+
+  .ant-tabs,
+  .ant-tabs-content {
+    height: 100%;
+  }
+
+  &-content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding: 10px 0 0 0;
+  }
+
+  &-wrap {
+    flex: 1;
+    overflow: hidden;
+  }
+
+  &-main {
+    width: 100%;
+    max-width: 100%;
+    height: 100%;
+    max-height: 100%;
+  }
+
+  &-chart {
+    width: 100%;
+    height: 100%;
+  }
+
+  &-time {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+    white-space: nowrap;
+
+    .@{history-info-prefix-cls}-label {
+      letter-spacing: 27px;
+    }
+
+    .@{history-info-prefix-cls}-label:after {
+      right: -20px;
+    }
+
+    .ant-radio-group,
+    .ant-select {
+      margin-right: 16px;
+    }
+
+    .anticon-plus-circle {
+      margin-left: 10px;
+      color: @primary-color;
+      font-size: 16px;
+      cursor: pointer;
+    }
+  }
+
+  &-cover {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+    white-space: nowrap;
+  }
+
+  &-label {
+    position: relative;
+    width: 80px;
+  }
+
+  &-label:after {
+    position: absolute;
+    top: 0;
+    right: 7px;
+    content: '：';
+  }
+
+  &-contrast-list {
+    display: flex;
+    align-items: center;
+  }
+
+  &-connect {
+    margin: 0 10px;
+  }
+
+  &-date-wrap {
+    position: relative;
+    cursor: pointer;
+  }
+
+  &-date-delete {
+    position: absolute;
+    top: -12px;
+    right: -8px;
+
+    .anticon.anticon-close-circle {
+      color: #d9d9d9;
+      background: white;
+    }
+
+    &:hover {
+      .anticon.anticon-close-circle {
+        color: rgba(0, 0, 0, 0.45);
+        background: white;
+      }
+    }
+  }
+}

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

@@ -11,12 +11,15 @@ const REQUEST_METHOD_POST = 'post';
 
 const GET_QUOTA_LIST =
   'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api/Publish/Monitor/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'; //获取设备配置
 
 const UPDATE_DEVICE_CONF =
   'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api/Publish/Monitor/Device/SaveDeviceConf'; //更新设备配置
+// '/api/Publish/GCK/Device/SaveDeviceConf'; //更新设备配置
 
 const quotaSelectService = {
   getQuotaList: {

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

@@ -59,7 +59,7 @@ const QuotaSelect = ({
   const fetchData = (item = {}) => {
     // 请求指标列表
     quotaListService({
-      acountName: item.deviceType,
+      accountName: item.deviceType,
       addrSchemeID: item.pointAddressID,
     }).then((res) => {
       if (res.code === 0) {
@@ -125,7 +125,7 @@ const QuotaSelect = ({
   // 过滤重点指标
   const filterEmphasisQuota = () => {
     let newQuotaList = [...allQuotaList];
-    newQuotaList = newQuotaList.filter((item) => item.isShow === '1');
+    newQuotaList = newQuotaList.filter((item) => item.isShow === 1);
     setQuotaList(newQuotaList);
   };