feat: 新增历史曲线业务组件

packages/extend-components/EC_HistoryView/.gitignore

+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+**/node_modules
+# roadhog-api-doc ignore
+/src/utils/request-temp.js
+_roadhog-api-doc
+
+# production
+**/dist
+/.vscode
+**/**/lib/**
+**/**/es/**
+# misc
+.DS_Store
+npm-debug.log*
+yarn-error.log
+
+/coverage
+.idea
+package-lock.json
+*bak
+.vscode
+
+# visual studio code
+.history
+*.log
+
+functions/mock
+.temp/**
+
+# umi
+.umi
+.umi-production
+
+# screenshot
+screenshot
+.firebase
+.eslintcache
+.changelog
+
+# devServer-host
+host/
+webpack.host.js
\ No newline at end of file

packages/extend-components/EC_HistoryView/README.md

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

packages/extend-components/EC_HistoryView/package.json

+{
+  "name": "@wisdom-components/ec_historyview",
+  "version": "1.0.0",
+  "description": "> TODO: description",
+  "author": "cuijiahao <15927252954@163.com>",
+  "homepage": "",
+  "license": "ISC",
+  "main": "src/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_HistoryView/src/EC_HistoryView.md

+---
+title: EC_HistoryView - 历史曲线
+nav:
+  title: 业务组件
+  path: /extend-components
+group:
+  path: /
+---
+
+# HistoryView 历史数据查看
+
+基础业务组件
+  - 曲线模式
+    - 数据强制自动抽稀
+  - 表格模式
+    - 默认开启抽稀模式，可选择抽稀
+
+## 何时使用
+
+- 以图表或表格形式，查看历史数据时。
+
+
+## 单图表
+<code src="./demos/index.js">
+
+## 多图表
+<code src="./demos/GridDemo.js">
+
+
+## API
+
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
+| --- | --- | --- | --- | --- |
+| grid | 是否为分组模式 | boolean | false | - |
+| title | 标题 | string | 指标曲线 | - |
+| defaultChecked | 默认选中自定义时间 key | string | `oneHour` | `oneHour`/`fourHour`/`twelveHours`/`roundClock`/`yesterday` |
+| tableProps | 表格其他 props | object | { } | - |
+| deviceParams | 设备参数信息 | array | - | - |
+
+### deviceParams
+```javascript
+[
+  {
+    deviceCode: 'EGBF00000146', // 设备编码
+    sensors: '进水压力,出水瞬时流量', // 设备查询指标
+    deviceCode: '二供泵房', // 设备类型
+  },
+  ...
+]
+```
\ No newline at end of file

packages/extend-components/EC_HistoryView/src/GridChart.js

+import React, { memo, useMemo } from 'react';
+import _ from 'lodash';
+import { BasicChart } from '@wisdom-components/basicchart';
+import optionGenerator from './utils';
+
+const GridChart = memo((props) => {
+  const { dataSource, contrast = false, contrastOption = 'day', smooth = true } = props;
+  const { prefixCls } = props;
+
+  const gridData = useMemo(() => {
+    const grids = dataSource.reduce((pre, item, index) => {
+      const { sensorName } = item;
+      let grid = pre.find((g) => g.key === sensorName);
+      if (!grid) {
+        const restProp = _.pick(item, ['equipmentName', 'sensorName', 'stationCode', 'unit']);
+        grid = {
+          key: sensorName,
+          list: [],
+          ...restProp,
+        };
+        pre.push(grid);
+      }
+      grid.list.push(item);
+      return pre;
+    }, []);
+    return grids;
+  }, [dataSource]);
+
+  const options = useMemo(() => {
+    return gridData.map((item) => {
+      const { key, list, equipmentName, sensorName, stationCode, unit } = item;
+      const cusOption = {
+        title: {
+          show: true,
+          text: `{prefix|}{t|${sensorName}}${unit ? '{suffix|（单位：' + unit + '）}' : ''}`,
+        },
+      };
+      const option = optionGenerator(list, cusOption, contrast, contrastOption, smooth);
+      return {
+        key,
+        option: option,
+      };
+    });
+  }, [gridData, smooth]);
+
+  return (
+    <div className={`${prefixCls}-grid`}>
+      {
+        options.map(item => (
+          <div key={item.key} className={`${prefixCls}-grid-item`}>
+            <div className={`${prefixCls}-grid-item-wrap`}>
+              <BasicChart style={{ width: '100%', height: '100%' }} option={item.option} notMerge />
+            </div>
+          </div>
+        ))
+      }
+    </div>
+  );
+});
+
+export default GridChart;

packages/extend-components/EC_HistoryView/src/SingleChart.js

+
+import React, { memo, useMemo } from 'react';
+import { BasicChart } from '@wisdom-components/basicchart';
+import optionGenerator from './utils';
+
+
+const SimgleChart = memo((props) => {
+  const { dataSource,  contrast = false, contrastOption = 'day', smooth = true } = props;
+
+  const option = useMemo(() => {
+    const config = {
+      needUnit: true,
+    };
+    return optionGenerator(dataSource, null, contrast, contrastOption, smooth, config);
+  }, [dataSource, smooth]);
+
+  return <BasicChart option={option} notMerge style={{ width: '100%', height: '100%' }}/>
+});
+
+export default SimgleChart;
\ No newline at end of file

packages/extend-components/EC_HistoryView/src/apis/index.js

+import { request } from '@wisdom-utils/utils';
+
+const REQUEST_METHOD_GET = 'get';
+const REQUEST_METHOD_POST = 'post';
+// eslint-disable-next-line no-undef
+const baseUrl = typeof DUMI_TYPE !== 'undefined' && DUMI_TYPE === 'dumi' ? '/api' : '';
+
+
+// 获取历史数据
+export function getHistoryInfo(data) {
+  return request({
+    url: `${baseUrl}/PandaMonitor/Monitor/Device/GetSensorsDataForStation`,
+    method: REQUEST_METHOD_POST,
+    data,
+  });
+}

packages/extend-components/EC_HistoryView/src/demos/GridDemo.js

+import React from 'react';
+import HistoryView from '../index';
+
+const deviceParams = [{
+  deviceCode: "EGBF00000146",
+  sensors: "进水压力,出水瞬时流量,出水累计流量",
+  deviceType: "二供泵房"
+}]
+const Demo = () => {
+
+  return (
+    <div style={{height: 700}}>
+      <HistoryView deviceParams={deviceParams} grid />
+    </div>
+  );
+};
+
+export default Demo;

packages/extend-components/EC_HistoryView/src/demos/index.js

+import React from 'react';
+import HistoryView from '../index';
+
+const deviceParams = [{
+  deviceCode: "EGBF00000146",
+  sensors: "进水压力,出水瞬时流量,出水累计流量",
+  deviceType: "二供泵房"
+}]
+const Demo = () => {
+
+  return (
+    <div style={{height: 700}}>
+      <HistoryView deviceParams={deviceParams} />
+    </div>
+  );
+};
+
+export default Demo;

packages/extend-components/EC_HistoryView/src/hooks/useQTime.js

+
+const TIMELIST = [
+  {
+    key: 'oneHour',
+    name: '近1小时',
+  },
+  {
+    key: 'fourHour',
+    name: '近4小时',
+  },
+  {
+    key: 'twelveHours',
+    name: '近12小时',
+  },
+  {
+    key: 'roundClock',
+    name: '近24小时',
+  },
+  {
+    key: 'yesterday',
+    name: '昨天',
+  },
+];

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

+@root-entry-name: 'default';
+@import '~antd/es/style/themes/index.less';
+@history-view: ~'@{ant-prefix}-history-view';
+
+.@{history-view} {
+  height: 100%;
+
+  &-label {
+    position: relative;
+    width: 80px;
+
+    &::after {
+      position: absolute;
+      top: 0;
+      right: 7px;
+      content: '：';
+    }
+  }
+
+  &-extra-right {
+    width: 82px;
+  }
+
+  .@{history-view}-spin,
+  .@{history-view}-spin > .@{ant-prefix}-spin-container,
+  .@{ant-prefix}-tabs,
+  .@{ant-prefix}-tabs-content,
+  .@{ant-prefix}-tabs-tabpane {
+    height: 100%;
+  }
+
+  .@{ant-prefix}-tabs-tabpane-active {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+.@{history-view}-date {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+
+  .@{history-view}-label {
+    letter-spacing: 27px;
+
+    &::after {
+      right: -20px;
+    }
+  }
+
+  .@{ant-prefix}-radio-group,
+  .@{ant-prefix}-select {
+    margin-right: 16px;
+  }
+
+  .anticon-plus-circle {
+    margin-left: 10px;
+    color: @primary-color;
+    font-size: 16px;
+    cursor: pointer;
+  }
+
+
+}
+
+.@{history-view}-contrast {
+  &-wrap {
+    position: relative;
+    cursor: pointer;
+  }
+
+  &-list {
+    display: flex;
+    align-items: center;
+  }
+
+  &-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;
+      }
+    }
+  }
+
+  &-connect {
+    margin: 0 10px;
+  }
+}
+
+.@{history-view}-options {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  column-gap: 20px;
+  row-gap: 10px;
+  padding-bottom: 10px;
+}
+
+.@{history-view}-cover {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+}
+
+.@{history-view}-content {
+  flex: 1;
+  overflow: hidden;
+}
+
+.@{history-view}-grid {
+  height: 100%;
+  overflow-y: auto;
+  display: flex;
+  flex-wrap: wrap;
+  background-color: #F0F2F5;
+  padding: 4px;
+
+  &-item {
+    width: 50%;
+    padding: 4px;
+  }
+
+  &-item-wrap {
+    height: 350px;
+    background-color: #FFF;
+    border-radius: 4px;
+  }
+}
\ No newline at end of file

packages/extend-components/EC_HistoryView/src/utils.js

+import moment from 'moment';
+import _ from 'lodash';
+
+/**
+ * 轴宽度, 用于计算多轴显示时, 轴线偏移和绘图区域尺寸
+ */
+const axisWidth = 40;
+
+/**
+ * 图表系列名称格式化
+ * @param {*} data 
+ * @param {boolean} contrast 是否为同期对比
+ * @param {*} contrastOption 同期对比周期配置, day|month
+ * @returns 
+ */
+const nameFormatter = (data, contrast, contrastOption) => {
+  const { equipmentName, sensorName, unit, dataModel, dateFrom, dateTo } = data;
+  let name = `${equipmentName}-${sensorName}`;
+  if (contrast) {
+    const time = dateFrom.slice(0, contrastOption === 'day' ? 10 : 7).replace(/-/g, '');
+    name = `${name}-${time}`;
+  }
+  return name;
+};
+
+/**
+ * 图表系列数据格式化
+ * @param {*} data 
+ * @param {boolean} contrast 是否为同期对比
+ * @param {*} contrastOption 同期对比周期配置, day|month
+ * @returns 图表系列数据, [[DateTime, value]]
+ */
+const dataAccessor = (data, contrast, contrastOption) => {
+  const { dataModel } = data;
+  const formatStr = contrastOption === 'day' ? '2020-01-01 HH:mm:00' : '2020-01-DD HH:mm:00';
+  return dataModel.map(item => {
+    const time = contrast ? moment(item.pt).format(formatStr) : item.pt;
+    return [moment(time).valueOf(), item.pv];
+  });
+};
+
+/**
+ * 面积图配置(目前默认曲线图)
+ * @param {*} data 数据项
+ * @returns null/areaStyle, 为null显示曲线图, 为areaStyle对象显示为面积图.
+ */
+const areaStyleFormatter = (data) => {
+  const { sensorName } = data;
+  return sensorName && sensorName.indexOf('流量') > -1 ? {} : null;
+};
+
+
+/**
+ * 图表配置项生成
+ * @param {*} dataSource 数据源
+ * @param {*} cusOption 自定义属性
+ * @param {*} contrast 是否为同期对比
+ * @param {*} contrastOption 同期对比周期配置, day|month
+ * @param {*} smooth ture/false, 曲线/折线
+ * @param {*} config 额外配置信息
+ */
+const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth, config) => {
+  const needUnit = _.get(config, 'needUnit', false);
+  // 自定义属性
+  const restOption = _.pick(cusOption, ['title',]);
+
+  // 一种指标一个y轴
+  const yAxisMap = new Map();
+  dataSource.forEach((item, index) => {
+    const { sensorName, unit } = item;
+    const key = sensorName;
+
+    if (!yAxisMap.has(key)) {
+      const i = yAxisMap.size;
+      const axis = {
+        type: 'value',
+        name: needUnit ? unit : null,
+        position: i % 2 === 0 ? 'left' : 'right',
+        offset: Math.floor(i / 2) * axisWidth,
+        axisLabel: {
+          formatter: (value) => value > 100000 ? `${value / 1000}k` : value,
+        },
+        axisLine: {
+          show: true,
+        },
+        nameTextStyle: {
+          align: i % 2 === 0 ? 'right' : 'left'
+        },
+      }
+      yAxisMap.set(key, axis);
+    }
+  });
+  const yAxis = yAxisMap.size > 0 ? [...yAxisMap.values()] : { type: 'value' };
+
+  // 根据y轴个数调整边距
+  const leftNum = Math.ceil(yAxisMap.size / 2);
+  const rightNum = Math.floor(yAxisMap.size / 2);
+  const grid = {
+    top: needUnit ? 80 : 60,
+    left: 10 + leftNum * axisWidth,
+    right: rightNum === 0 ? 20 : rightNum * axisWidth,
+  };
+
+  // 根据"指标名称"分类yAxis
+  const yAxisInterator = (() => {
+    const map = new Map();
+    let current = -1;
+    const get = (name) => map.has(name) ? map.get(name) : map.set(name, ++current).get(name);
+    return { get }
+  })();
+  
+
+  const series = dataSource.map(item => {
+    const { sensorName, unit } = item;
+    const name = nameFormatter(item, contrast, contrastOption);
+    const data = dataAccessor(item, contrast, contrastOption);
+    const type = 'line';
+    const areaStyle = areaStyleFormatter(item);
+    const yAxisIndex = yAxisInterator.get(sensorName);
+    return {
+      notMerge: true,
+      name,
+      type,
+      data,
+      areaStyle,
+      yAxisIndex,
+      smooth,
+      unit,
+    }
+  });
+
+  // 由于series更新后，没有的数据曲线仍然停留在图表区上，导致图表可视区范围有问题
+  const min = Math.min(...series.map(item => item.data?.[0]?.[0]).filter(item => item !== undefined));
+  const max = Math.max(...series.map(item => item.data?.[item.data.length - 1]?.[0]).filter(item => item !== undefined));
+  const xAxis = { type: 'time', min, max };
+
+  const tooltipTimeFormat = !contrast ? 'YYYY-MM-DD HH:mm:ss' : contrastOption === 'day' ? 'HH:mm' : 'DD HH:mm';
+  const tooltip = { timeFormat: tooltipTimeFormat };
+
+  
+  return {
+    yAxis,
+    grid,
+    xAxis,
+    series,
+    tooltip,
+    ...restOption,
+  }
+};
+
+export default optionGenerator;