@zgfe/modules-attribution 1.0.1

package/README.md

@@ -0,0 +1,33 @@
+# 归因分析
+
+## 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`,
+
+```bash
+$ npm run build
+```

package/dist/esm/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/dist/esm/components/common/index.js

@@ -0,0 +1,21 @@
+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/dist/esm/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/dist/esm/components/index.d.ts

@@ -0,0 +1,6 @@
+import OptionGroup from './option';
+import ContentPanel from './renderContent';
+import SearchPanel from './searchPanel';
+import InsightTable from './table';
+import { MiNone, MiSpin } from './common';
+export { OptionGroup, ContentPanel, SearchPanel, InsightTable, MiNone, MiSpin };

package/dist/esm/components/index.js

@@ -0,0 +1,6 @@
+import OptionGroup from "./option";
+import ContentPanel from "./renderContent";
+import SearchPanel from "./searchPanel";
+import InsightTable from "./table";
+import { MiNone, MiSpin } from "./common";
+export { OptionGroup, ContentPanel, SearchPanel, InsightTable, MiNone, MiSpin };

package/dist/esm/components/option/index.d.ts

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

package/dist/esm/components/option/index.js

@@ -0,0 +1,199 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+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) { 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(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+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 = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { BizGlobalDataContext, IconFont, BizAddToScene, BizAddToPanel } from '@zgfe/business-lib';
+import { Button } from 'antd';
+import React, { useContext, useImperativeHandle, useMemo, useState } from 'react';
+import _ from 'lodash';
+import { Apis, chartTypes } from "../../constants";
+import base64 from "../../utils/base64";
+import { getAttrLabel } from "../../utils/formData";
+import "./styles/index.less";
+import { AttributionContext } from "../../types";
+var classPrefix = 'option-group';
+var OptionGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var searchData = props.searchData,
+    onClickGenerateReport = props.onClickGenerateReport;
+  // 看板弹窗
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showPanelDialog = _useState2[0],
+    setShowPanelDialog = _useState2[1];
+  // 常用场景弹窗
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    showSceneDialog = _useState4[0],
+    setShowSceneDialog = _useState4[1];
+  var _useState5 = useState(),
+    _useState6 = _slicedToArray(_useState5, 2),
+    panelValue = _useState6[0],
+    setPanelValue = _useState6[1];
+  // 看板弹窗类型
+  var _useState7 = useState(),
+    _useState8 = _slicedToArray(_useState7, 2),
+    panelType = _useState8[0],
+    setPanelType = _useState8[1];
+  var _useContext = useContext(BizGlobalDataContext),
+    currentApp = _useContext.currentApp,
+    eventGroupList = _useContext.eventGroupList,
+    userPropList = _useContext.userPropList,
+    eventEnvList = _useContext.eventEnvList;
+  var _useContext2 = useContext(AttributionContext),
+    panelId = _useContext2.panelId,
+    panelName = _useContext2.panelName,
+    elementId = _useContext2.elementId,
+    searching = _useContext2.searching,
+    enableGenerateReport = _useContext2.enableGenerateReport,
+    enableAddScene = _useContext2.enableAddScene,
+    changeLoading = _useContext2.changeLoading,
+    afterEditTarget = _useContext2.afterEditTarget;
+  // 看板弹窗的样式中地图是否可选
+  var styleList = useMemo(function () {
+    var styleData = _.cloneDeep(chartTypes);
+    styleData[2].children[2].disabled = !props.enableSelectChart;
+    styleData[3].disabled = !props.enableSelectChart;
+    return styleData;
+  }, [props.enableSelectChart]);
+  var showList = useMemo(function () {
+    // 只有一个用户群且是所有用户时，在请求结果中删除了所有用户，所以这里要给加上
+    if (searchData.userGroup && searchData.userGroup.length === 1 && searchData.userGroup[0] === 0) {
+      return props.showList ? props.showList.map(function (item) {
+        var arr = item.split(',');
+        arr.splice(arr.length - 1, 0, '所有用户');
+        return arr.join(',');
+      }) : [];
+    }
+    return props.showList || [];
+  }, [props.showList]);
+  useImperativeHandle(ref, function () {
+    return {
+      saveAsPanel: function saveAsPanel() {
+        var item = {
+          panel: {
+            id: panelId
+          },
+          name: panelName ? panelName + '(1)' : '洞察',
+          chartType: searchData ? searchData.chartType : 'line',
+          showList: 'fix'
+        };
+        setPanelValue(item);
+        setShowPanelDialog(true);
+      },
+      savePanel: function savePanel() {
+        var item = {
+          panel: {
+            id: panelId
+          },
+          name: panelName,
+          chartType: searchData ? searchData.chartType : 'line',
+          showList: 'fix'
+        };
+        setPanelValue(item);
+        setShowPanelDialog(true);
+        setPanelType('edit');
+      }
+    };
+  });
+
+  //下载
+  var onClickExport = function onClickExport() {
+    changeLoading(true);
+    var seriesNames = [],
+      eventNames = [];
+    props.result.series.forEach(function (item) {
+      if (item.names) {
+        var name = item.names[item.names.length - 1];
+        if (eventNames.indexOf(name) < 0) {
+          eventNames.push(name);
+        }
+      }
+    });
+    // 表头信息
+    if (searchData.globalDimensions) {
+      searchData.globalDimensions.forEach(function (item) {
+        var label = item.label;
+        if (!label) {
+          label = getAttrLabel(item, eventGroupList, userPropList, eventEnvList);
+        }
+        seriesNames.push(base64.encode(label || item.attrName || ''));
+      });
+    }
+    if (searchData.userGroup && searchData.userGroup.length > 1) {
+      seriesNames.push(base64.encode('用户群'));
+    }
+    seriesNames.push(base64.encode('指标'));
+    var params = _objectSpread(_objectSpread({
+      appId: currentApp === null || currentApp === void 0 ? void 0 : currentApp.appId
+    }, searchData), {}, {
+      down: {
+        fname: base64.encode('指标_' + eventNames.join('-')),
+        titles: seriesNames
+      }
+    });
+    var url = "".concat(Apis.download, "?param=").concat(encodeURIComponent(JSON.stringify(params)));
+    window.open(url);
+    changeLoading(false);
+  };
+  var _onOk = function onOk(type, val) {
+    if (type === 'panel') {
+      setPanelType(undefined);
+      setShowPanelDialog(false);
+    } else {
+      setShowSceneDialog(false);
+    }
+    if (afterEditTarget) afterEditTarget(type, val);
+  };
+  var _onCancel = function onCancel(type) {
+    if (type === 'panel') {
+      setShowPanelDialog(false);
+      setPanelType(undefined);
+    } else {
+      setShowSceneDialog(false);
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: classPrefix
+  }, /*#__PURE__*/React.createElement(Button, {
+    icon: /*#__PURE__*/React.createElement(IconFont, {
+      className: "".concat(classPrefix, "-icon"),
+      type: "xiazai1"
+    }),
+    onClick: onClickExport,
+    disabled: !props.result
+  }, "\u4E0B\u8F7D\u6570\u636E"), showSceneDialog && /*#__PURE__*/React.createElement(BizAddToScene, {
+    params: _objectSpread({
+      app_id: currentApp === null || currentApp === void 0 ? void 0 : currentApp.appId
+    }, searchData),
+    onCancel: function onCancel() {
+      return _onCancel('scene');
+    },
+    onOk: function onOk(data) {
+      return _onOk('scene', data);
+    }
+  }), showPanelDialog && /*#__PURE__*/React.createElement(BizAddToPanel, {
+    defaultValue: panelValue,
+    params: _objectSpread({
+      app_id: currentApp === null || currentApp === void 0 ? void 0 : currentApp.appId
+    }, searchData),
+    type: panelType,
+    styleOptions: styleList,
+    showList: showList,
+    elementId: elementId,
+    onCancel: function onCancel() {
+      return _onCancel('panel');
+    },
+    onOk: function onOk(data) {
+      return _onOk('panel', data);
+    }
+  }));
+});
+export default OptionGroup;

package/dist/esm/components/option/styles/index.less

@@ -0,0 +1,17 @@
+@import '~@zgfe/business-lib/es/assets/styles/variable.less';
+
+.option-group {
+  display: flex;
+  &-icon.bsicon {
+    margin-right: @margin-xss;
+    font-size: 18px;
+  }
+  .ant-btn {
+    display: flex;
+    align-items: center;
+    padding: 0 12px;
+    &:not(:first-child) {
+      margin-left: 8px;
+    }
+  }
+}

package/dist/esm/components/option/types.d.ts

@@ -0,0 +1,9 @@
+export interface OptionGroupProps {
+    value?: any;
+    title?: string;
+    searchData: any;
+    result?: any;
+    showList?: string[];
+    enableSelectChart?: boolean;
+    onClickGenerateReport?: (value: any) => void;
+}

package/dist/esm/components/option/types.js

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

package/dist/esm/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/dist/esm/components/renderContent/index.js

@@ -0,0 +1,92 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+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 = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { BizChart } from '@zgfe/business-lib';
+import { Spin } from 'antd';
+import React, { useEffect, useState } from 'react';
+import { chartColors } from "../../constants";
+import { getShowColor } from "../../utils/formData";
+import { InsightTable, MiNone, MiSpin } from '..';
+import "./styles/index.less";
+import _ from 'lodash';
+var classPrefix = 'render-content';
+var ContentPanel = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var loading = props.loading,
+    insightData = props.insightData,
+    searchData = props.searchData;
+  // 显示内容
+  var _useState = useState(props.showList || []),
+    _useState2 = _slicedToArray(_useState, 2),
+    showList = _useState2[0],
+    setShowList = _useState2[1];
+  // 图表的颜色系列
+  var _useState3 = useState(chartColors),
+    _useState4 = _slicedToArray(_useState3, 2),
+    showColors = _useState4[0],
+    setShowColors = _useState4[1];
+  useEffect(function () {
+    setShowList(props.showList);
+    setShowColors(chartColors);
+  }, [insightData]);
+
+  // 表格中显示点击，改变展示状态
+  var onChangeShowByName = function onChangeShowByName(nameGroup) {
+    setShowList(function (list) {
+      var showList = _.cloneDeep(list);
+      var index = showList === null || showList === void 0 ? void 0 : showList.indexOf(nameGroup);
+      if (index < 0) {
+        showList.push(nameGroup);
+      } else {
+        showList.splice(index, 1);
+      }
+      setShowColors(getShowColor(insightData, showList));
+      if (props.onChangeShow) props.onChangeShow(showList);
+      return _toConsumableArray(showList);
+    });
+  };
+  // 表格筛选，取前10个
+  var onChangeShow = function onChangeShow(names) {
+    setShowList(names);
+    if (props.onChangeShow) props.onChangeShow(names);
+    setShowColors(chartColors);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: classPrefix
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-chart-container")
+  }, props.children, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-chart")
+  }, loading ? /*#__PURE__*/React.createElement(Spin, {
+    tip: "\u67E5\u8BE2\u4E2D...",
+    indicator: /*#__PURE__*/React.createElement(MiSpin, null)
+  }) : insightData ? insightData.x_axis.length || insightData.series.length ? /*#__PURE__*/React.createElement(BizChart, {
+    ref: ref,
+    type: searchData === null || searchData === void 0 ? void 0 : searchData.chartType,
+    data: insightData,
+    showList: showList,
+    colors: showColors,
+    xRotate: (searchData === null || searchData === void 0 ? void 0 : searchData.chartType) === 'bar' && insightData.series.length > 5 ? 40 : 0,
+    reverseXAxis: (searchData === null || searchData === void 0 ? void 0 : searchData.chartType) === 'bar',
+    isCity: props.isCity
+  }) : /*#__PURE__*/React.createElement(MiNone, {
+    label: "\u6682\u65E0\u6570\u636E"
+  }) : /*#__PURE__*/React.createElement(MiNone, {
+    label: "\u6682\u65E0\u6570\u636E"
+  }))), !loading && insightData && /*#__PURE__*/React.createElement(InsightTable, {
+    dataSource: insightData,
+    searchData: searchData,
+    showList: showList,
+    isOverview: (searchData === null || searchData === void 0 ? void 0 : searchData.targets) && (searchData === null || searchData === void 0 ? void 0 : searchData.targets[0].eventId) === -100,
+    changeShow: onChangeShow,
+    changeShowByName: onChangeShowByName,
+    onChange: props.onChangeTag
+  }));
+});
+export default ContentPanel;

package/dist/esm/components/renderContent/styles/index.less

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

package/dist/esm/components/renderContent/types.d.ts

@@ -0,0 +1,15 @@
+import { TargetConditionTypes } from '@zgfe/business-lib';
+import { ReactNode } from 'react';
+import { SearchValue } from '../../types';
+export interface RenderContentProps {
+    loading?: boolean;
+    insightData?: any;
+    searchData?: SearchValue;
+    showList: string[];
+    isCity?: boolean;
+    children: ReactNode;
+    onChangeTag: (targets: Array<TargetConditionTypes.Value>) => void;
+    onClickGenerateReport?: (value: any) => void;
+    afterEditTarget?: (type: string, value?: any) => void;
+    onChangeShow?: (data: string[]) => void;
+}

package/dist/esm/components/renderContent/types.js

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

package/dist/esm/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/dist/esm/components/searchPanel/index.js

@@ -0,0 +1,122 @@
+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 = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { BizDatePicker } from '@zgfe/business-lib';
+import { Form, Select, InputNumber } from 'antd';
+import React, { useContext, useEffect, useState } from 'react';
+import { chartTypeOptions, getInitDate } from "../../constants";
+import { AttributionContext } from "../../types";
+import "./styles/index.less";
+var Option = Select.Option;
+var classPrefix = 'search-panel';
+var SearchPanel = function SearchPanel(props) {
+  var _useContext = useContext(AttributionContext),
+    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];
+  useEffect(function () {
+    if (props.chart && props.chart !== chart.value) {
+      setChart({
+        value: props.chart
+      });
+    }
+  }, [props.chart]);
+
+  // 时间改变
+  var onChangeTime = function onChangeTime(val) {
+    if (timer) clearTimeout(timer);
+    setTimer(setTimeout(function () {
+      setTime(val);
+      props.onChange({
+        time: val,
+        chartType: chart.value
+      });
+    }, 10));
+  };
+
+  // 类型发生变化
+  var onChange = function onChange(val) {
+    setChart(val);
+    props.onChange({
+      time: time,
+      chartType: val.value
+    });
+  };
+  var _useState7 = useState(0),
+    _useState8 = _slicedToArray(_useState7, 2),
+    flag = _useState8[0],
+    setFlag = _useState8[1];
+  var onChangGuiYin = function onChangGuiYin(data) {
+    // console.log(data)
+    setFlag(data);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: classPrefix
+  }, /*#__PURE__*/React.createElement(BizDatePicker, {
+    defaultValue: time,
+    onChange: onChangeTime
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-search-right")
+  }, /*#__PURE__*/React.createElement(Form
+  // style={{ maxWidth: 600 }}
+  , null, /*#__PURE__*/React.createElement(Form.Item, {
+    label: "\u5F52\u56E0\u7A97\u53E3\u671F",
+    style: {
+      marginTop: '27px'
+    }
+  }, /*#__PURE__*/React.createElement(Select, {
+    placeholder: "\u8BF7\u9009\u62E9",
+    allowClear: true,
+    defaultValue: 0,
+    style: {
+      width: '100px'
+    },
+    onChange: onChangGuiYin
+  }, /*#__PURE__*/React.createElement(Option, {
+    value: 0
+  }, "\u4ECA\u5929"), /*#__PURE__*/React.createElement(Option, {
+    value: 1
+  }, "\u81EA\u5B9A\u4E49"))), flag == 1 && /*#__PURE__*/React.createElement("div", {
+    className: "shuru"
+  }, /*#__PURE__*/React.createElement(InputNumber, {
+    defaultValue: 1
+  }), "\u5929"), /*#__PURE__*/React.createElement(Form.Item, {
+    label: "\u5F52\u56E0\u8BBE\u7F6E",
+    className: "guiyin",
+    style: {
+      marginTop: '27px'
+    }
+  }, /*#__PURE__*/React.createElement(Select, {
+    placeholder: "\u8BF7\u9009\u62E9",
+    allowClear: true,
+    style: {
+      width: '150px'
+    }
+  }, /*#__PURE__*/React.createElement(Option, {
+    value: "0"
+  }, "\u9996\u6B21\u89E6\u70B9\u5F52\u56E0"), /*#__PURE__*/React.createElement(Option, {
+    value: "1"
+  }, "\u672B\u6B21\u89E6\u70B9\u5F52\u56E0"), /*#__PURE__*/React.createElement(Option, {
+    value: "2"
+  }, "\u65F6\u95F4\u8870\u51CF\u5F52\u56E0"), /*#__PURE__*/React.createElement(Option, {
+    value: "3"
+  }, "\u7EBF\u6027\u5F52\u56E0"), /*#__PURE__*/React.createElement(Option, {
+    value: "4"
+  }, "\u4F4D\u7F6E\u5F52\u56E0"))))));
+};
+export default SearchPanel;

package/dist/esm/components/searchPanel/styles/index.less

@@ -0,0 +1,38 @@
+@import '~@zgfe/business-lib/es/assets/styles/variable.less';
+
+.search-panel {
+  display: flex;
+  align-items: center;
+  // justify-content: space-between;
+  height: 64px;
+  padding: 0 @padding-md;
+  border-bottom: 1px solid @border-color-base;
+
+  &-search-right {
+    display: flex;
+    margin-left: 30px;
+    .ant-form {
+      display: flex;
+      .guiyin {
+        position: absolute;
+        right: 50px;
+      }
+      .shuru {
+        display: flex;
+        margin-top: 30px;
+        margin-left: 20px;
+        line-height: 30px;
+        .ant-input-number {
+          width: 60px;
+          height: 32px;
+          margin-top: -2px;
+          margin-right: 10px;
+        }
+      }
+    }
+  }
+
+  &-select {
+    width: 112px;
+  }
+}

package/dist/esm/components/searchPanel/types.d.ts

@@ -0,0 +1,10 @@
+import { DatePickerTypes } from '@zgfe/business-lib/es/datePicker/types';
+export interface SearchPanelProps {
+    enableSelectChart?: boolean;
+    time?: DatePickerTypes.Value;
+    chart?: 'line' | 'bar' | 'map';
+    onChange: (data: {
+        time: any;
+        chartType: string;
+    }) => void;
+}