@zgfe/modules-event 0.0.2-alpha.10

package/README.md

@@ -0,0 +1,35 @@
+# modules-event
+
+洞察分析
+
+## Getting Started
+
+Install dependencies,
+
+```bash
+$ npm i
+```
+
+Start the dev server,
+
+```bash
+$ npm start
+```
+
+Build documentation,
+
+```bash
+$ npm run docs:build
+```
+
+Run test,
+
+```bash
+$ npm test
+```
+
+Build library via `father-build`,
+
+```bash
+$ npm run build
+```

package/es/components/common/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import './styles/index.less';
+export declare const MiSpin: React.FC;
+export declare const MiNone: React.FC<{
+    label?: string;
+}>;

package/es/components/common/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import './styles/index.less';
+var classPrefix = 'mi-common';
+export var MiSpin = function MiSpin() {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-loading-icon")
+  });
+};
+export var MiNone = function MiNone(props) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-none-container")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-none")
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "".concat(classPrefix, "-none-text")
+  }, " ", props.label));
+};

package/es/components/common/styles/index.less

@@ -0,0 +1,27 @@
+@import '~@zgfe/business-lib/es/assets/styles/inner.less';
+
+.mi-common {
+  &-loading-icon {
+    z-index: 1000;
+    display: inline-block;
+    width: 40px;
+    height: 40px;
+    background: url('../../../style/image/ring.svg') no-repeat;
+    background-size: contain;
+  }
+
+  &-none-text {
+    color: @text-color;
+    font-size: 16px;
+  }
+
+  &-none {
+    width: 348px;
+    height: 132px;
+    background: url('../../../style/image/noData.png') no-repeat;
+  }
+
+  &-none-container {
+    text-align: center;
+  }
+}

package/es/components/eventFilter/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import './styles/index.less';
+declare const EventFilter: React.FC<any>;
+export default EventFilter;

package/es/components/eventFilter/index.js

@@ -0,0 +1,174 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+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(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { Tooltip } from 'antd';
+import React, { useEffect, useRef, useState } from 'react';
+import { BizEventSelector, BizAttributeSelector, IconFont, BizAttrConditionGroup } from '@zgfe/business-lib';
+import './styles/index.less';
+import _ from 'lodash';
+var classPrefix = 'eventfilter-box';
+var EventFilter = function EventFilter(props) {
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    count = _useState2[0],
+    setCount = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isAdd = _useState4[0],
+    setIsAdd = _useState4[1];
+  var conditionRef = useRef(null);
+  var _useState5 = useState({
+      id: -100,
+      name: '事件概览'
+    }),
+    _useState6 = _slicedToArray(_useState5, 2),
+    event = _useState6[0],
+    setEvent = _useState6[1];
+  var _useState7 = useState(true),
+    _useState8 = _slicedToArray(_useState7, 2),
+    eventOverview = _useState8[0],
+    setEventOverview = _useState8[1];
+  var _useState9 = useState(),
+    _useState10 = _slicedToArray(_useState9, 2),
+    filter = _useState10[0],
+    setFilter = _useState10[1];
+  var _useState11 = useState(),
+    _useState12 = _slicedToArray(_useState11, 2),
+    bizAttributeSelectorValue = _useState12[0],
+    setBizAttributeSelectorValue = _useState12[1];
+  useEffect(function () {
+    if (props.value) {
+      var _data = props.value;
+      setEvent({
+        id: _data.id,
+        name: _data.name
+      });
+      if (_data.filters) {
+        setFilter(_data.filters);
+      }
+      if (_data.dimension) {
+        setBizAttributeSelectorValue(_objectSpread(_objectSpread({}, _data.dimension), {}, {
+          key: _data.dimension.propCategory === 'eventProp' ? _data.dimension.value : _data.dimension.propCategory + '-' + _data.dimension.value
+        }));
+      }
+      setEventOverview(false);
+    }
+  }, []);
+  var onAdd = function onAdd() {
+    if (event.id === -1) {
+      return;
+    }
+    if (count >= 5) {
+      return;
+    }
+    setIsAdd(true);
+    setTimeout(function () {
+      conditionRef.current.add();
+    }, 0);
+  };
+  var onChangeFilters = function onChangeFilters(data) {
+    if (data && data.conditions && data.conditions.length > 0) {
+      setFilter(data);
+    } else {
+      setFilter(undefined);
+      setIsAdd(false);
+    }
+  };
+  var onChangeEvent = function onChangeEvent(event) {
+    if (event && event.event && event.event.id === -100) {
+      setEventOverview(true);
+    } else {
+      setEventOverview(false);
+    }
+    if (event && event.event) {
+      setEvent(event.event);
+    }
+    setBizAttributeSelectorValue(undefined);
+    setFilter(undefined);
+    setIsAdd(false);
+    setCount(0);
+  };
+  var onChangeAttr = function onChangeAttr(attr) {
+    console.log('细分属性', attr);
+    if (attr === undefined) {
+      setBizAttributeSelectorValue(undefined);
+    } else {
+      var _value = attr.propCategory === 'eventProp' ? attr.id : attr.name;
+      setBizAttributeSelectorValue({
+        propCategory: attr.propCategory,
+        category: attr.category,
+        value: _value,
+        key: attr.propCategory === 'eventProp' ? attr.id : attr.propCategory + '-' + _value
+      });
+    }
+  };
+  useEffect(function () {
+    var _event = {
+      id: event.id,
+      name: event.name
+    };
+    if (filter) {
+      _event.filters = filter;
+    }
+    if (bizAttributeSelectorValue) {
+      var _dimension = _.cloneDeep(bizAttributeSelectorValue);
+      delete _dimension.key;
+      _event.dimension = _dimension;
+    }
+    props.onChange && props.onChange(_event);
+  }, [bizAttributeSelectorValue, filter, event]);
+  useEffect(function () {
+    console.log(666, bizAttributeSelectorValue);
+  }, [bizAttributeSelectorValue]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classPrefix
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(BizEventSelector, {
+    showAllEvent: true,
+    showBuiltInTarget: false,
+    popupContainer: false,
+    defaultSelectAble: false,
+    value: {
+      event: event
+    },
+    onChange: onChangeEvent,
+    placeholder: "\u8BF7\u9009\u62E9\u4E8B\u4EF6"
+  }), !eventOverview && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BizAttributeSelector, {
+    enableEventProp: true,
+    enableUserProp: true,
+    enableEnvProp: true,
+    eventIdList: [event.id],
+    value: bizAttributeSelectorValue,
+    enableDelete: true,
+    onChange: onChangeAttr,
+    onDelete: function onDelete() {
+      onChangeAttr(undefined);
+    }
+  }), /*#__PURE__*/React.createElement(Tooltip, {
+    placement: "top",
+    title: '添加属性筛选'
+  }, /*#__PURE__*/React.createElement(IconFont, {
+    className: "".concat(count >= 5 || event.id === -1 ? 'disable' : ''),
+    type: "shaixuan",
+    onClick: function onClick() {
+      return onAdd();
+    }
+  })))), (filter || isAdd) && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(count > 0 ? 'attr-box-show' : '', " top")
+  }, /*#__PURE__*/React.createElement(BizAttrConditionGroup, {
+    ref: conditionRef,
+    value: filter,
+    onlyAnd: true,
+    enableEventProp: true,
+    enableDelete: true,
+    eventIdList: [event.id],
+    onChange: onChangeFilters,
+    onConditionsCount: setCount
+  })));
+};
+export default EventFilter;

package/es/components/eventFilter/styles/index.less

@@ -0,0 +1,25 @@
+.eventfilter-box {
+  > :nth-child(1) {
+    display: flex;
+    margin-bottom: 12px;
+    .biz-event-select,
+    .biz-attr-select {
+      width: 184px;
+      margin-right: 16px;
+    }
+    .shaixuan {
+      margin-top: 2px;
+      margin-left: 20px;
+      color: #9aa1a9;
+      font-size: 20px !important;
+      cursor: pointer;
+    }
+    .shaixuan:hover {
+      color: #165dff;
+    }
+    .disable {
+      color: #ccd0d4 !important;
+      cursor: not-allowed !important;
+    }
+  }
+}

package/es/components/eventFilter/types.d.ts

@@ -0,0 +1,11 @@
+export interface ConditionsnProps {
+    attrId: number | undefined;
+    propCategory: string | undefined;
+    type: string | undefined;
+    id?: number | undefined;
+    name?: string | undefined;
+    category?: string | undefined;
+    attrName?: string | undefined;
+    label?: string | undefined;
+    dimensionSub?: string | undefined;
+}

package/es/components/eventFilter/types.js

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

package/es/components/index.d.ts

@@ -0,0 +1,5 @@
+import ContentPanel from './renderContent';
+import SearchPanel from './searchPanel';
+import EventTable from './table';
+import { MiNone, MiSpin } from './common';
+export { ContentPanel, SearchPanel, EventTable, MiNone, MiSpin };

package/es/components/index.js

@@ -0,0 +1,5 @@
+import ContentPanel from './renderContent';
+import SearchPanel from './searchPanel';
+import EventTable from './table';
+import { MiNone, MiSpin } from './common';
+export { ContentPanel, SearchPanel, EventTable, MiNone, MiSpin };

package/es/components/renderContent/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { RenderContentProps } from './types';
+import './styles/index.less';
+declare const ContentPanel: React.ForwardRefExoticComponent<RenderContentProps & React.RefAttributes<any>>;
+export default ContentPanel;

package/es/components/renderContent/index.js

@@ -0,0 +1,54 @@
+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(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { Spin } from 'antd';
+import React, { useEffect, useState } from 'react';
+import { MiNone, MiSpin } from '..';
+import './styles/index.less';
+import EventChart from '../../modules/chart';
+var classPrefix = 'render-content';
+var ContentPanel = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var loading = props.loading,
+    eventData = props.eventData,
+    searchData = props.searchData;
+  var _useState = useState(props.showList || []),
+    _useState2 = _slicedToArray(_useState, 2),
+    showList = _useState2[0],
+    setShowList = _useState2[1];
+  useEffect(function () {
+    setShowList(props.showList);
+  }, [eventData]);
+  var onChangeShow = function onChangeShow(names) {
+    setShowList(names);
+    if (props.onChangeShow) props.onChangeShow(names);
+  };
+  if (loading) {
+    return /*#__PURE__*/React.createElement(Spin, {
+      className: "".concat(classPrefix, "-spin-container"),
+      tip: "\u67E5\u8BE2\u4E2D...",
+      indicator: /*#__PURE__*/React.createElement(MiSpin, null)
+    });
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: classPrefix
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-chart-container")
+  }, eventData ? /*#__PURE__*/React.createElement(EventChart, {
+    ref: ref,
+    dataSource: eventData,
+    params: searchData,
+    showList: showList
+  }) : /*#__PURE__*/React.createElement(MiNone, {
+    label: "\u6682\u65E0\u6570\u636E"
+  })), eventData && eventData.xAxis.length ? /*#__PURE__*/React.createElement(EventChart, {
+    type: "grid",
+    dataSource: eventData,
+    params: searchData,
+    showList: showList,
+    onChangeShow: onChangeShow
+  }) : null);
+});
+export default ContentPanel;

package/es/components/renderContent/styles/index.less

@@ -0,0 +1,24 @@
+@import '~@zgfe/business-lib/es/assets/styles/variable.less';
+
+.render-content {
+  &-chart-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 368px;
+    padding: @padding-lg @padding-md;
+    border: 1px solid @border-color-base;
+    border-radius: @border-radius-normal;
+
+    .echarts-for-react {
+      width: 100%;
+    }
+  }
+
+  &-spin-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 300px;
+  }
+}

package/es/components/renderContent/types.d.ts

@@ -0,0 +1,12 @@
+import { SearchValue } from '../../types';
+import { ChartTypes } from '@zgfe/business-lib/es/chart/types';
+export interface RenderContentProps {
+    loading?: boolean;
+    eventData?: ChartTypes.Value;
+    searchData?: SearchValue;
+    showList: string[];
+    isCity?: boolean;
+    onClickGenerateReport?: (value: any) => void;
+    afterEditTarget?: (type: string, value?: any) => void;
+    onChangeShow?: (data: string[]) => void;
+}

package/es/components/renderContent/types.js

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

package/es/components/searchPanel/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import './styles/index.less';
+import { SearchPanelProps } from './types';
+declare const SearchPanel: React.FC<SearchPanelProps>;
+export default SearchPanel;

package/es/components/searchPanel/index.js

@@ -0,0 +1,107 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+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(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { BizDatePicker, BizSelect, BizTargetDimension } from '@zgfe/business-lib';
+import React, { useContext, useEffect, useState } from 'react';
+import { chartTypeOptions, getInitDate } from '../../constants';
+import { EventContext } from '../../types';
+import './styles/index.less';
+var classPrefix = 'search-panel';
+var SearchPanel = function SearchPanel(props) {
+  var _useContext = useContext(EventContext),
+    includeToday = _useContext.includeToday;
+  var _useState = useState(props.time || getInitDate(includeToday)),
+    _useState2 = _slicedToArray(_useState, 2),
+    time = _useState2[0],
+    setTime = _useState2[1];
+  var _useState3 = useState(chartTypeOptions[0]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    chart = _useState4[0],
+    setChart = _useState4[1];
+  var _useState5 = useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    timer = _useState6[0],
+    setTimer = _useState6[1];
+  var _useState7 = useState({
+      analysisIndex: 'number'
+    }),
+    _useState8 = _slicedToArray(_useState7, 2),
+    dimension = _useState8[0],
+    setDimension = _useState8[1];
+  useEffect(function () {
+    if (props.chart && props.chart !== chart.value) {
+      setChart({
+        value: props.chart
+      });
+    }
+    var _dimension = {
+      analysisIndex: 'number'
+    };
+    if (props.analysisIndex) {
+      _dimension = {
+        analysisIndex: props.analysisIndex
+      };
+    }
+    if (props.analysisAttr) {
+      _dimension['analysisAttr'] = props.analysisAttr;
+    }
+    setDimension(_objectSpread({}, _dimension));
+  }, [props.chart]);
+  var onChangeTime = function onChangeTime(val) {
+    if (timer) clearTimeout(timer);
+    setTimer(setTimeout(function () {
+      setTime(val);
+      props.onChange(_objectSpread({
+        time: val,
+        chartType: chart.value
+      }, dimension));
+    }, 10));
+  };
+  var onChange = function onChange(val) {
+    setChart(val);
+    props.onChange(_objectSpread({
+      time: time,
+      chartType: val.value
+    }, dimension));
+  };
+  var onDimensionChange = function onDimensionChange(data) {
+    setDimension(data);
+    props.onChange(_objectSpread({
+      time: time,
+      chartType: chart.value
+    }, data));
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: classPrefix
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex'
+    }
+  }, /*#__PURE__*/React.createElement(BizDatePicker, {
+    defaultValue: time,
+    onChange: onChangeTime
+  }), /*#__PURE__*/React.createElement(BizTargetDimension, {
+    value: dimension,
+    eventId: props.eventId,
+    onChange: onDimensionChange
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-search-right")
+  }, props.optionNode, /*#__PURE__*/React.createElement(BizSelect, {
+    className: "".concat(classPrefix, "-select"),
+    options: chartTypeOptions,
+    defaultValue: chart,
+    value: chart,
+    labelField: "label",
+    keyField: "value",
+    theme: "secondary",
+    onChange: onChange,
+    disableItemList: props.enableSelectChart ? [] : [chartTypeOptions[3]]
+  })));
+};
+export default SearchPanel;

package/es/components/searchPanel/styles/index.less

@@ -0,0 +1,18 @@
+@import '~@zgfe/business-lib/es/assets/styles/variable.less';
+
+.search-panel {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 32px;
+  margin-bottom: 24px;
+
+  &-search-right {
+    display: flex;
+  }
+
+  &-select {
+    width: 112px;
+    margin-left: 16px;
+  }
+}

package/es/components/searchPanel/types.d.ts

@@ -0,0 +1,16 @@
+import { DatePickerTypes } from '@zgfe/business-lib/es/datePicker/types';
+import { EventChartTypes } from '../../types';
+import { ReactNode } from 'react';
+export interface SearchPanelProps {
+    analysisIndex?: string;
+    analysisAttr?: string;
+    enableSelectChart?: boolean;
+    time?: DatePickerTypes.Value;
+    eventId?: number;
+    chart?: EventChartTypes;
+    optionNode?: ReactNode;
+    onChange: (data: {
+        time: any;
+        chartType: string;
+    }) => void;
+}

package/es/components/searchPanel/types.js

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

package/es/components/table/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import 'highlight.js/styles/vs.css';
+import { EventTableProps } from './types';
+import './styles/index.less';
+declare const EventTable: React.FC<EventTableProps>;
+export default EventTable;