@cgeui/business-components 0.0.2 → 0.0.3

package/dist/esm/DataVisualProgress/demo/timeFilterOption.js

@@ -0,0 +1,74 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { BatteryPackTimeLine } from "../..";
+import { useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+var Basic = function Basic() {
+  var _useState = useState([{
+      name: '2023',
+      nameDes: '01-02',
+      timestamp: 1672588800000,
+      sort: 363,
+      sortIndex: 2,
+      level: '0'
+    }]),
+    _useState2 = _slicedToArray(_useState, 2),
+    data = _useState2[0],
+    setData = _useState2[1];
+  var onAggregationChange = function onAggregationChange(val) {
+    console.log(val, 'val');
+    var curData = [];
+    switch (val) {
+      case 'd':
+        curData = [{
+          name: '2023',
+          nameDes: '01-02',
+          timestamp: 1672588800000,
+          sort: 363,
+          sortIndex: 2,
+          level: '0'
+        }];
+        break;
+      case 'h':
+        curData = [{
+          name: '10-07',
+          nameDes: '00:00',
+          timestamp: 1672588800000,
+          sort: 363,
+          sortIndex: 2,
+          level: '0'
+        }, {
+          name: '10-08',
+          nameDes: '00:00',
+          timestamp: 1672588800000,
+          sort: 363,
+          sortIndex: 2,
+          level: '0'
+        }];
+        break;
+    }
+    setData(curData);
+  };
+  var timeFilterOption = [{
+    label: '日',
+    value: 'd'
+  },
+  // 按日划分，每日0点
+  {
+    label: '时',
+    value: 'h'
+  } // 按小时划分，每小时整点
+  ];
+  return /*#__PURE__*/_jsx(BatteryPackTimeLine, {
+    defaultAggregation: "d",
+    onAggregationChange: onAggregationChange,
+    data: data,
+    alarmFaultShow: true,
+    timeFilterOption: timeFilterOption
+  });
+};
+export default Basic;

package/dist/esm/DataVisualProgress/index.js

@@ -0,0 +1,396 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { Radio, Select, Spin } from '@cgeui/components';
+import moment from 'moment';
+import { forwardRef, useEffect, useState } from 'react';
+import locales from "../locales";
+import { BATTERY_PACK_COLOR, getLocale, timeFormat } from "../utils";
+import AnalysisFaultLevelPage from "./Components/AnalysisFaultLevelPage";
+import "./style.less";
+import { calculateAggregation, getAlarmFaultLegend, getDefaultLegend, getPopContainer, getTimeList, scollToLeft, timeDiff } from "./utils";
+
+// 电池包
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+var BatteryPackTimeLine = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _list$map;
+  var _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? 'default' : _ref$theme,
+    dateTimeRange = _ref.dateTimeRange,
+    isShowDaySelectWhenHour = _ref.isShowDaySelectWhenHour,
+    deviceId = _ref.deviceId,
+    daySelectOptionWhenHour = _ref.daySelectOptionWhenHour,
+    occurAlarm = _ref.occurAlarm,
+    _ref$lang = _ref.lang,
+    lang = _ref$lang === void 0 ? 'zh-CN' : _ref$lang,
+    alarmFaultShow = _ref.alarmFaultShow,
+    _ref$legendData = _ref.legendData,
+    legendData = _ref$legendData === void 0 ? getDefaultLegend(lang) : _ref$legendData,
+    _ref$alarmFaultLegend = _ref.alarmFaultLegend,
+    alarmFaultLegend = _ref$alarmFaultLegend === void 0 ? getAlarmFaultLegend(lang) : _ref$alarmFaultLegend,
+    data = _ref.data,
+    daySelectDefaultValue = _ref.daySelectDefaultValue,
+    alarmChecked = _ref.alarmChecked,
+    loading = _ref.loading,
+    hourToDayFilter = _ref.hourToDayFilter,
+    onAggregationChange = _ref.onAggregationChange,
+    onChooseChange = _ref.onChooseChange,
+    onChangeDay = _ref.onChangeDay,
+    timeFilterOption = _ref.timeFilterOption,
+    _ref$defaultAggregati = _ref.defaultAggregation,
+    defaultAggregation = _ref$defaultAggregati === void 0 ? 'd' : _ref$defaultAggregati,
+    id = _ref.id,
+    _ref$colorMap = _ref.colorMap,
+    colorMap = _ref$colorMap === void 0 ? null : _ref$colorMap;
+  var _useState = useState(defaultAggregation),
+    _useState2 = _slicedToArray(_useState, 2),
+    aggregation = _useState2[0],
+    setAggregation = _useState2[1];
+  var _useState3 = useState({
+      name: '',
+      nameDes: '',
+      current: false
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    active = _useState4[0],
+    setActive = _useState4[1];
+  var _useState5 = useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    list = _useState6[0],
+    setList = _useState6[1];
+  var _useState7 = useState(),
+    _useState8 = _slicedToArray(_useState7, 2),
+    firstAlarm = _useState8[0],
+    setFirstAlarm = _useState8[1];
+  var _useState9 = useState(),
+    _useState10 = _slicedToArray(_useState9, 2),
+    firstData = _useState10[0],
+    setFirstData = _useState10[1];
+  var _useState11 = useState(false),
+    _useState12 = _slicedToArray(_useState11, 2),
+    hasAlarm = _useState12[0],
+    setHasAlarm = _useState12[1];
+  var Option = Select.Option;
+  var curLang = lang || getLocale() || 'zh-CN';
+  var locale = locales[curLang];
+  var TimeLine = locale.TimeLine;
+  var options = timeFilterOption || [{
+    label: TimeLine.year,
+    value: 'y'
+  },
+  // 按年划分，每年1号
+  {
+    label: TimeLine.month,
+    value: 'M'
+  },
+  // 按月划分，每个月1号
+  {
+    label: TimeLine.day,
+    value: 'd'
+  },
+  // 按日划分，每日0点
+  {
+    label: TimeLine.hour,
+    value: 'h'
+  } // 按小时划分，每小时整点
+  ];
+  var _useState13 = useState([]),
+    _useState14 = _slicedToArray(_useState13, 2),
+    dayList = _useState14[0],
+    setDayList = _useState14[1];
+  var _useState15 = useState(daySelectDefaultValue),
+    _useState16 = _slicedToArray(_useState15, 2),
+    dayListDefault = _useState16[0],
+    setDayListDefault = _useState16[1];
+
+  // 小时维度时的天数
+  var getHourToDayList = function getHourToDayList(a) {
+    var _newDayList;
+    setDayList([]);
+    setDayListDefault(daySelectDefaultValue);
+    // 如果是小时，则需要计算有多少天
+    var newDayList = [];
+    if (a === 'h' && isShowDaySelectWhenHour) {
+      var format = timeFormat(lang, 'YYYY-MM-DD');
+      if (dateTimeRange && (dateTimeRange === null || dateTimeRange === void 0 ? void 0 : dateTimeRange.length) >= 2) {
+        var diff = timeDiff('d', dateTimeRange === null || dateTimeRange === void 0 ? void 0 : dateTimeRange[0], dateTimeRange === null || dateTimeRange === void 0 ? void 0 : dateTimeRange[1]);
+        var d = getTimeList(diff, 'd', dateTimeRange === null || dateTimeRange === void 0 ? void 0 : dateTimeRange[1]);
+        d.forEach(function (item) {
+          var _daySelectOptionWhenH;
+          var level = (daySelectOptionWhenHour === null || daySelectOptionWhenHour === void 0 || (_daySelectOptionWhenH = daySelectOptionWhenHour.find(function (day) {
+            return day.timestamp === item.timestamp;
+          })) === null || _daySelectOptionWhenH === void 0 ? void 0 : _daySelectOptionWhenH.level) || '';
+          newDayList.push({
+            label: moment(item.timestamp).format(format),
+            value: item.timestamp,
+            level: level
+          });
+        });
+      } else {
+        daySelectOptionWhenHour === null || daySelectOptionWhenHour === void 0 || daySelectOptionWhenHour.forEach(function (item) {
+          newDayList.push({
+            label: moment(item.timestamp).format(format),
+            value: item.timestamp,
+            level: item.level
+          });
+        });
+      }
+      setDayList(newDayList);
+    }
+    var defaultValues = daySelectDefaultValue ? daySelectDefaultValue : newDayList.length > 0 ? (_newDayList = newDayList[newDayList.length - 1]) === null || _newDayList === void 0 ? void 0 : _newDayList.value : '';
+    setDayListDefault(defaultValues);
+  };
+  var changeDay = function changeDay(timestamp) {
+    // todo请求这一天的24小时点;要考虑没有数据时时间显示的问题
+    if (typeof onChangeDay === 'function') {
+      onChangeDay(timestamp);
+    }
+  };
+  var timeOptionChangeHandler = function timeOptionChangeHandler(value) {
+    var a = value.target.value;
+    setAggregation(a);
+  };
+  var deleteActive = function deleteActive() {
+    // 取消选中回到全时段
+    setActive({
+      name: '',
+      nameDes: '',
+      current: false
+    });
+  };
+
+  // // 计算默认的时间颗粒度
+  var calculate = function calculate() {
+    if ((dateTimeRange === null || dateTimeRange === void 0 ? void 0 : dateTimeRange.length) === 0) return;
+    var a = calculateAggregation(dateTimeRange);
+    setAggregation(a || defaultAggregation);
+  };
+  var chooseAlarm = function chooseAlarm(item) {
+    // todo不能频繁点击
+    if (active.name && "".concat(active.name).concat(active.nameDes) === "".concat(item.name).concat(item.nameDes)) {
+      deleteActive();
+      if (typeof onChooseChange === 'function') {
+        onChooseChange({
+          timestamp: dateTimeRange === null || dateTimeRange === void 0 ? void 0 : dateTimeRange[0]
+        }, true);
+      }
+    } else {
+      if (item.level) {
+        // 无数据不能点击
+        setActive({
+          name: item.name,
+          nameDes: item.nameDes,
+          current: true
+        });
+        if (typeof onChooseChange === 'function') {
+          onChooseChange({
+            timestamp: item.timestamp
+          });
+        }
+      }
+    }
+  };
+
+  // 第一次进去
+  var goToFirst = function goToFirst(datas) {
+    setTimeout(function () {
+      var domWrapper = document.getElementById("batteryProgress".concat(id)); // 出现滚动条的dom
+      var targetWrapper = document.getElementById("progressBar".concat(id, "Item_0"));
+      var targeWidth = 40;
+      if (targetWrapper) {
+        targeWidth = targetWrapper.clientWidth;
+      }
+      if (domWrapper && domWrapper.clientWidth < targeWidth * data.length) {
+        var index = data.findIndex(function (item) {
+          return item.timestamp === datas.timestamp;
+        });
+        scollToLeft(index, id);
+      }
+    }, 100);
+  };
+  useEffect(function () {
+    // 根据传入的时间段默认计算出来时间颗粒度
+    calculate();
+    deleteActive();
+  }, [dateTimeRange]);
+  useEffect(function () {
+    if (hourToDayFilter !== null && hourToDayFilter !== void 0 && hourToDayFilter.startTime) {
+      setDayListDefault(hourToDayFilter.startTime);
+    }
+  }, [hourToDayFilter]);
+  useEffect(function () {
+    if (typeof onAggregationChange === 'function' && aggregation) {
+      onAggregationChange(aggregation);
+    }
+  }, [aggregation]);
+  useEffect(function () {
+    if (!loading) {
+      setList([]);
+      var alarmList = [];
+      var curFirstData = {};
+      var curFirstAlarm = {};
+      data === null || data === void 0 || data.forEach(function (item, index) {
+        if (item.level && item.level !== '0') {
+          alarmList.push(_objectSpread(_objectSpread({}, item), {}, {
+            index: alarmList.length
+          }));
+        }
+        if ((item === null || item === void 0 ? void 0 : item.level) === '0') {
+          curFirstData = item;
+        }
+        if (index === data.length - 1 && Object.keys(curFirstData).length === 0) {
+          // 最后一条还没有记录到正常数据，则使用最后一条
+          curFirstData = item;
+        }
+        if (item.level && item.level !== '0') {
+          curFirstAlarm = item;
+        }
+      });
+      if (data) {
+        setList(data);
+      }
+      if (occurAlarm && Object.keys(occurAlarm).length > 0) {
+        // 跳到具体指定的告警时段
+        goToFirst(occurAlarm);
+      } else if ((alarmList === null || alarmList === void 0 ? void 0 : alarmList.length) > 0 && curFirstAlarm && Object.keys(curFirstAlarm).length > 0) {
+        // 跳到第一个定位的时间段
+        goToFirst(curFirstAlarm);
+      } else if (curFirstData && Object.keys(curFirstData).length > 0) {
+        // 没有告警时使用第一个有数据的信息
+        // 跳到第一个定位的时间段
+        goToFirst(curFirstData);
+      }
+    }
+  }, [loading, data]);
+  useEffect(function () {
+    getHourToDayList(aggregation);
+  }, [daySelectOptionWhenHour, daySelectDefaultValue]);
+
+  // 动画设计：默认从第一个开始跳转，如果手动点击了预警，清除现有自动播放
+  var getBarId = function getBarId(index) {
+    return "progressBar".concat(id, "Item_").concat(index);
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    ref: ref,
+    className: ['batteryPackageView', "battery-pack-timeline_".concat(theme)].join(' '),
+    "data-theme": theme,
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: "batteryPackageHeader",
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "batteryPackageHeaderFlex",
+        children: /*#__PURE__*/_jsxs("div", {
+          className: "batteryPackageLegend",
+          children: [/*#__PURE__*/_jsx(AnalysisFaultLevelPage, {
+            legendData: legendData,
+            theme: theme
+          }), alarmFaultShow && alarmFaultLegend.length > 0 ? alarmFaultLegend === null || alarmFaultLegend === void 0 ? void 0 : alarmFaultLegend.map(function (item, index) {
+            return /*#__PURE__*/_jsxs("div", {
+              children: [/*#__PURE__*/_jsx("span", {
+                className: (item === null || item === void 0 ? void 0 : item.level) === 'alarm' ? 'alarmLegendIcon' : 'legendIcon',
+                style: {
+                  backgroundColor: colorMap ? colorMap[item === null || item === void 0 ? void 0 : item.level] : BATTERY_PACK_COLOR[item === null || item === void 0 ? void 0 : item.level]
+                }
+              }), /*#__PURE__*/_jsx("span", {
+                className: "legendText",
+                children: (item === null || item === void 0 ? void 0 : item.name) || ''
+              })]
+            }, "legend".concat(index));
+          }) : '']
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        children: /*#__PURE__*/_jsx(Radio.Group, {
+          value: aggregation,
+          options: options,
+          disabled: deviceId,
+          onChange: timeOptionChangeHandler,
+          optionType: "button",
+          buttonStyle: "solid",
+          size: "small"
+        })
+      })]
+    }), loading ? /*#__PURE__*/_jsx("div", {
+      className: "packageLoading",
+      children: /*#__PURE__*/_jsx(Spin, {})
+    }) : /*#__PURE__*/_jsxs(_Fragment, {
+      children: [aggregation === 'h' && isShowDaySelectWhenHour && dayList.length > 1 ? /*#__PURE__*/_jsx("div", {
+        className: "dayListStyle",
+        children: /*#__PURE__*/_jsx(Select, {
+          defaultValue: dayListDefault,
+          showSearch: true,
+          getPopupContainer: getPopContainer,
+          optionFilterProp: "label",
+          filterOption: function filterOption(input, option) {
+            var _option$label;
+            return option === null || option === void 0 || (_option$label = option.label) === null || _option$label === void 0 ? void 0 : _option$label.toLowerCase().includes(input.toLowerCase());
+          },
+          onChange: changeDay,
+          children: dayList.map(function (dayItem, index) {
+            return /*#__PURE__*/_jsxs(Option, {
+              label: dayItem.label,
+              value: dayItem.value,
+              disabled: dayItem.disabled,
+              className: "visualDaySelectOption",
+              children: [/*#__PURE__*/_jsx("span", {
+                className: "cellColor",
+                style: {
+                  background: colorMap ? colorMap[parseInt(dayItem.level)] : BATTERY_PACK_COLOR[parseInt(dayItem.level)]
+                }
+              }), /*#__PURE__*/_jsx("div", {
+                children: dayItem.label
+              })]
+            }, "day_".concat(dayItem.value, "_").concat(index));
+          })
+        })
+      }) : '', list.length === 0 ? /*#__PURE__*/_jsx("div", {
+        className: "packageNoData",
+        children: TimeLine.noData
+      }) : /*#__PURE__*/_jsx("div", {
+        children: /*#__PURE__*/_jsx("div", {
+          className: "batteryPackageProgressBar",
+          id: "batteryProgress".concat(id),
+          children: list === null || list === void 0 || (_list$map = list.map) === null || _list$map === void 0 ? void 0 : _list$map.call(list, function (item, idx) {
+            return /*#__PURE__*/_jsxs("div", {
+              id: getBarId(idx),
+              children: [/*#__PURE__*/_jsx("span", {
+                className: ['progressBarItem', 'progressBarItem', alarmChecked && item.faultAlarm ? 'alarmBarItem' : ''].join(' '),
+                style: {
+                  backgroundColor: colorMap ? colorMap[item.level] : BATTERY_PACK_COLOR[item.level],
+                  cursor: item.level && !deviceId ? 'pointer' : ''
+                },
+                onClick: function onClick() {
+                  if (!deviceId) {
+                    chooseAlarm(item);
+                  }
+                },
+                children: active.current && active.name === item.name && active.nameDes === item.nameDes ? /*#__PURE__*/_jsx("span", {
+                  className: "barHigh",
+                  style: {
+                    borderTopColor: colorMap ? colorMap[item.level] : BATTERY_PACK_COLOR[item.level]
+                  }
+                }) : ''
+              }), /*#__PURE__*/_jsx("span", {
+                className: "progressBarText",
+                children: item.name
+              }), /*#__PURE__*/_jsx("span", {
+                className: "progressBarText",
+                children: item.nameDes
+              })]
+            }, "".concat(item.name, "-").concat(item.nameDes, "-").concat(idx));
+          })
+        })
+      })]
+    })]
+  });
+});
+export default BatteryPackTimeLine;

package/dist/esm/DataVisualProgress/interface.js

@@ -0,0 +1 @@
+export {};