@zgfe/modules-whole 1.0.10-zhongyuan.0

package/es/modules/chart/index.js

@@ -0,0 +1,246 @@
+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 React, { useContext, useEffect, useMemo, useState } from 'react';
+import { Empty, message } from 'antd';
+import { BizChart, BizGlobalDataContext, ajax, BizLoading } from '@zgfe/business-lib';
+import { WholeTable } from '../../components';
+import { judgeIsCity } from '../content/utils';
+import { getValue, getMapChartData } from '../../modules/content/utils';
+import { getShowColor, getUserGroupsCompareData, getSortData, getChartDataWholeAliasName, convertMilliseconds, sortOriginalData, formTableData } from '../../utils/formData';
+import { WholeContext } from '../../types';
+import _ from 'lodash';
+import moment from 'moment';
+import { Apis, chartColors } from '../../constants';
+import DataUpdateTime from '../../components/dataUpdateTime';
+var classPrefix = 'event-mi-table';
+var WholeChart = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _props$params2;
+  var params = props.params;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isCity = _useState2[0],
+    setIsCity = _useState2[1];
+  var _useState3 = useState(props.type || 'line'),
+    _useState4 = _slicedToArray(_useState3, 2),
+    chartType = _useState4[0],
+    setChartType = _useState4[1];
+  var _useState5 = useState(props.showList || []),
+    _useState6 = _slicedToArray(_useState5, 2),
+    showList = _useState6[0],
+    setShowList = _useState6[1];
+  var _useState7 = useState(props.dataSource),
+    _useState8 = _slicedToArray(_useState7, 2),
+    dataSource = _useState8[0],
+    setDataSource = _useState8[1];
+  var _useContext = useContext(WholeContext),
+    currentApp = _useContext.currentApp;
+  var _useContext2 = useContext(BizGlobalDataContext),
+    eventGroupList = _useContext2.eventGroupList,
+    eventEnvList = _useContext2.eventEnvList,
+    userPropList = _useContext2.userPropList;
+  var _useState9 = useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    loading = _useState10[0],
+    setLoading = _useState10[1];
+  var showColors = useMemo(function () {
+    if (!dataSource) return chartColors;
+    return getShowColor(dataSource, showList);
+  }, [showList]);
+  useEffect(function () {
+    if (!props.dataSource) {
+      fetchResult();
+    }
+  }, [params]);
+  useEffect(function () {
+    if (!dataSource) return;
+    if ((!props.showList || !props.showList.length) && dataSource.series.length) {
+      var gLen = (params === null || params === void 0 ? void 0 : params.dimension) ? 1 : 0;
+      var _data = formTableData(dataSource, (params === null || params === void 0 ? void 0 : params.userGroup) || [0], gLen);
+      var _sortData = sortOriginalData(_data, {
+        columnKey: "field".concat(dataSource.series[0].values.length - 1),
+        order: 'descend'
+      });
+      var _showlist = [];
+      _sortData.forEach(function (item, index) {
+        if (index < 10) {
+          _showlist.push(item.nameGroup);
+        }
+      });
+      setShowList(_showlist);
+      props.onChangeShow && props.onChangeShow(_showlist);
+    } else {
+      setShowList(props.showList);
+    }
+  }, [dataSource, props.showList]);
+  useEffect(function () {
+    var _params$chartType;
+    if (!params) return;
+    var chartData = ((_params$chartType = params.chartType) === null || _params$chartType === void 0 ? void 0 : _params$chartType.split(',')) || ['line'];
+    var type = chartData[0];
+    if (!props.dataSource) {
+      type = (chartData === null || chartData === void 0 ? void 0 : chartData.length) > 1 ? chartData[chartData.length - 1] : chartData[0];
+    }
+    setChartType(props.type || type);
+    if (params.id) {
+      var dimensions = params.dimension;
+      if (type === 'map' && dimensions) {
+        var _getValue;
+        setIsCity(judgeIsCity((_getValue = getValue(dimensions, eventGroupList, eventEnvList, userPropList)) === null || _getValue === void 0 ? void 0 : _getValue.name));
+      }
+    }
+  }, [params, props.type]);
+  var fetchResult = function fetchResult() {
+    var _params$chartType2;
+    setLoading(true);
+    ajax(Apis.dataList, {
+      method: 'post',
+      data: _objectSpread(_objectSpread({
+        appId: currentApp === null || currentApp === void 0 ? void 0 : currentApp.appId,
+        platform: (params === null || params === void 0 ? void 0 : params.platform) || 0
+      }, params), {}, {
+        chartType: (params === null || params === void 0 ? void 0 : (_params$chartType2 = params.chartType) === null || _params$chartType2 === void 0 ? void 0 : _params$chartType2.indexOf(',')) === -1 ? params === null || params === void 0 ? void 0 : params.chartType : 'grid'
+      })
+    }).then(function (res) {
+      if ((res === null || res === void 0 ? void 0 : res.code) != '101000') {
+        message.error(res === null || res === void 0 ? void 0 : res.msg);
+        setLoading(false);
+        return;
+      }
+      if (!res.data) {
+        setLoading(false);
+        return;
+      }
+      var _data = params.dimension ? res.data : getChartDataWholeAliasName(res.data, eventGroupList);
+      if (['bar', 'pie', 'map'].indexOf(params.chartType) !== -1) {
+        _data = getSortData(_data);
+      }
+      if (params.userGroup.length > 1) {
+        setDataSource(getUserGroupsCompareData(_data));
+      } else {
+        setDataSource(_data);
+      }
+      setLoading(false);
+    });
+  };
+  var onChangeShowByName = function onChangeShowByName(nameGroup) {
+    var list = _.cloneDeep(showList);
+    var index = list === null || list === void 0 ? void 0 : list.indexOf(nameGroup);
+    if (index < 0) {
+      list.push(nameGroup);
+    } else {
+      list.splice(index, 1);
+    }
+    setShowList(list);
+    if (props.onChangeShow) props.onChangeShow(list);
+  };
+  if (loading) {
+    return /*#__PURE__*/React.createElement(BizLoading, {
+      className: "".concat(classPrefix, "-loading")
+    });
+  }
+  if (!dataSource || !dataSource.xAxis.length || !dataSource.series.length) {
+    return /*#__PURE__*/React.createElement(Empty, {
+      image: Empty.PRESENTED_IMAGE_SIMPLE,
+      description: "\u6682\u65E0\u6570\u636E"
+    });
+  }
+  var tooltipFormatter = function tooltipFormatter(params) {
+    var xLabel = '';
+    var array = params[0].name.split('|');
+    if (array.length > 1) {
+      xLabel = moment(array[0]).format('MM-DD') + '~' + moment(array[1]).format('MM-DD');
+    } else {
+      xLabel = moment(array[0]).isValid() ? moment(array[0]).format('MM-DD') : array[0];
+    }
+    var series = [];
+    var seriesMap = {};
+    params.forEach(function (item) {
+      var _props$params;
+      if (item.value === null || item.value === undefined || seriesMap[item.seriesName] !== null && seriesMap[item.seriesName] !== undefined) return;
+      seriesMap[item.seriesName] = item.value;
+      var value = item.value;
+      if ((props === null || props === void 0 ? void 0 : (_props$params = props.params) === null || _props$params === void 0 ? void 0 : _props$params.module) == 'duration_avg') {
+        value = convertMilliseconds(item.value);
+      }
+      var seriesName = item.seriesName || item.axisValueLabel;
+      seriesName = [seriesName].join('<br/>');
+      series.push({
+        text: "<div class='biz-chart-tooltip-item'>\n                      <div class='biz-chart-tooltip-content'>\n                        <span class=\"biz-tooltip-marker\" style=\"background:".concat(item.color, "\"></span>\n                        <div class=\"biz-tooltip-name\">").concat(seriesName, "</div>\n                      </div> \n                      <div class='biz-chart-tooltip-value'>\n                      ").concat(value, "\n                      </div>\n                    </div>"),
+        value: value
+      });
+    });
+    return "<div class='biz-chart-tooltip-title'>".concat(xLabel, "</div>").concat(series.sort(function (a, b) {
+      return parseInt(b.value) - parseInt(a.value);
+    }).map(function (item) {
+      return item.text;
+    }).join(''));
+  };
+  switch (chartType) {
+    case 'bar':
+      return /*#__PURE__*/React.createElement("div", {
+        className: "".concat(classPrefix, "-chart-box")
+      }, !!props.dataSource && /*#__PURE__*/React.createElement(DataUpdateTime, null), /*#__PURE__*/React.createElement(BizChart, {
+        ref: ref,
+        key: chartType,
+        type: chartType,
+        data: dataSource,
+        legendPosition: "bottom",
+        showList: showList,
+        colors: showColors,
+        xRotate: dataSource.series.length > 5 ? 40 : 0,
+        reverseXAxis: (props === null || props === void 0 ? void 0 : (_props$params2 = props.params) === null || _props$params2 === void 0 ? void 0 : _props$params2.module) != 'duration',
+        yAxisFormatter: function yAxisFormatter(params) {
+          var _props$params3;
+          return (props === null || props === void 0 ? void 0 : (_props$params3 = props.params) === null || _props$params3 === void 0 ? void 0 : _props$params3.module) == 'duration_avg' ? convertMilliseconds(params) : params;
+        },
+        tooltipFormatter: tooltipFormatter,
+        isCity: isCity
+      }));
+    case 'line':
+    case 'pie':
+    case 'map':
+      return /*#__PURE__*/React.createElement("div", {
+        className: "".concat(classPrefix, "-chart-box")
+      }, !!props.dataSource && /*#__PURE__*/React.createElement(DataUpdateTime, null), /*#__PURE__*/React.createElement(BizChart, {
+        ref: ref,
+        key: chartType,
+        type: chartType,
+        data: chartType === 'map' ? getMapChartData(dataSource) : dataSource,
+        legendPosition: "bottom",
+        showList: showList,
+        colors: showColors,
+        xRotate: 0,
+        reverseXAxis: false,
+        yAxisFormatter: function yAxisFormatter(params) {
+          var _props$params4;
+          return (props === null || props === void 0 ? void 0 : (_props$params4 = props.params) === null || _props$params4 === void 0 ? void 0 : _props$params4.module) == 'duration_avg' ? convertMilliseconds(params) : params;
+        },
+        tooltipFormatter: tooltipFormatter,
+        isCity: isCity
+      }));
+    case 'grid':
+      return /*#__PURE__*/React.createElement(WholeTable, {
+        dataSource: dataSource,
+        sourcePanel: !props.dataSource,
+        searchData: params,
+        showList: showList,
+        changeShowByName: onChangeShowByName
+      });
+    default:
+      return /*#__PURE__*/React.createElement("div", null, "\u6682\u4E0D\u652F\u6301\u8BE5\u56FE\u8868\u7C7B\u578B");
+  }
+});
+WholeChart.defaultProps = {
+  showList: []
+};
+export default WholeChart;

package/es/modules/chart/types.d.ts

@@ -0,0 +1,15 @@
+import { ChartTypes } from '@zgfe/business-lib/es/chart/types';
+import { SearchValue } from '../../types';
+export declare namespace eventChartProps {
+    interface ChartTypesProps extends ChartTypes.Value {
+        xAxis: [];
+    }
+    interface Props {
+        dataSource?: ChartTypesProps;
+        params?: SearchValue;
+        type?: string;
+        showList?: string[];
+        showColors?: string[];
+        onChangeShow?: (data: string[]) => void;
+    }
+}

package/es/modules/chart/types.js

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

package/es/modules/content/index.d.ts

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

package/es/modules/content/index.js

@@ -0,0 +1,234 @@
+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 { ajax, BizLayout, BizTargetFromPanelContext } from '@zgfe/business-lib';
+import { message } from 'antd';
+import React, { useContext, useEffect, useRef, useState, useImperativeHandle } from 'react';
+import Request from 'umi-request';
+import TopBar from '../../components/topBar';
+import { WholeContext } from '../../types';
+import './styles/index.less';
+import { Apis } from '../../constants';
+import { ContentPanel, SearchPanel } from '../../components';
+import { getUserGroupsCompareData, getSortData, getChartDataWholeAliasName, formTableData, sortOriginalData } from '../../utils/formData';
+import TopPanel from '../topPanel';
+var timer = 0;
+var refreshTimer = 0;
+var refresh = false;
+var ajaxFlag = true;
+var CancelToken = Request.CancelToken;
+var cancel;
+var classPrefix = 'whole-content';
+var WholeContent = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _topPanelRef$current4;
+  var _useContext = useContext(WholeContext),
+    currentApp = _useContext.currentApp,
+    searchData = _useContext.searchData,
+    setSearchData = _useContext.setSearchData,
+    eventGroupList = _useContext.eventGroupList,
+    loading = _useContext.loading,
+    setLoading = _useContext.setLoading,
+    afterEditTarget = _useContext.afterEditTarget,
+    panelId = _useContext.panelId,
+    onChangeUrlParam = _useContext.onChangeUrlParam,
+    setRefreshLoading = _useContext.setRefreshLoading,
+    showList = _useContext.showList,
+    setShowList = _useContext.setShowList,
+    first = _useContext.first,
+    setFirst = _useContext.setFirst;
+  var _useContext2 = useContext(BizTargetFromPanelContext),
+    handleSearch = _useContext2.handleSearch;
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    wholeData = _useState2[0],
+    setWholeData = _useState2[1];
+  var _useState3 = useState(props.value.id),
+    _useState4 = _slicedToArray(_useState3, 2),
+    eventId = _useState4[0],
+    setWholeId = _useState4[1];
+  var topPanelRef = useRef();
+  useImperativeHandle(ref, function () {
+    return {
+      onFormSetFieldsValue: function onFormSetFieldsValue(data) {
+        var _topPanelRef$current;
+        topPanelRef === null || topPanelRef === void 0 ? void 0 : (_topPanelRef$current = topPanelRef.current) === null || _topPanelRef$current === void 0 ? void 0 : _topPanelRef$current.onFormSetFieldsValue(data);
+      }
+    };
+  });
+  var chartRef = useRef();
+  useEffect(function () {
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(function () {
+      fetchRequest();
+    }, 500);
+    return function () {
+      if (timer) clearTimeout(timer);
+    };
+  }, [searchData]);
+  useEffect(function () {
+    handleSearch && handleSearch(loading);
+  }, [loading]);
+  var fetchRequest = function fetchRequest(flag) {
+    if (flag !== undefined) ajaxFlag = flag;
+    if (!ajaxFlag) return;
+    if (!refresh) setLoading(true);
+    setWholeData(undefined);
+    if (typeof cancel === 'function') {
+      cancel();
+    }
+    ajax(Apis.dataList, {
+      method: 'post',
+      data: _objectSpread(_objectSpread({
+        appId: currentApp === null || currentApp === void 0 ? void 0 : currentApp.appId,
+        platform: (searchData === null || searchData === void 0 ? void 0 : searchData.platform) || 0
+      }, searchData), {}, {
+        refresh: refresh
+      }),
+      intercept: false,
+      cancelToken: new CancelToken(function executor(c) {
+        cancel = c;
+      })
+    }).then(function (res) {
+      var _searchData$userGroup;
+      setRefreshLoading(false);
+      if ((res === null || res === void 0 ? void 0 : res.code) != '101000') {
+        message.error(res === null || res === void 0 ? void 0 : res.msg);
+        setLoading(false);
+        return;
+      }
+      var result = res.data;
+      if (!result.series.length) {
+        setLoading(false);
+        return;
+      }
+      var _data = searchData.dimension ? result : getChartDataWholeAliasName(result, eventGroupList);
+      var gLen = (searchData === null || searchData === void 0 ? void 0 : searchData.dimension) ? 1 : 0;
+      var dataTemp = formTableData(_data, (searchData === null || searchData === void 0 ? void 0 : searchData.userGroup) || [0], gLen);
+      var _sortData = [];
+      if (['bar', 'pie', 'map'].indexOf(searchData.chartType) !== -1) {
+        _data = getSortData(_data);
+      } else {
+        var _data$series$;
+        _sortData = sortOriginalData(dataTemp, {
+          columnKey: "field".concat(((_data$series$ = _data.series[0]) === null || _data$series$ === void 0 ? void 0 : _data$series$.values.length) - 1),
+          order: 'descend'
+        });
+      }
+      if (searchData && (searchData === null || searchData === void 0 ? void 0 : searchData.userGroup) && (searchData === null || searchData === void 0 ? void 0 : (_searchData$userGroup = searchData.userGroup) === null || _searchData$userGroup === void 0 ? void 0 : _searchData$userGroup.length) > 1) {
+        _data = getUserGroupsCompareData(_data);
+      }
+      if (first) {
+        setFirst(false);
+      } else {
+        var _showlist = [];
+        _sortData.forEach(function (item, index) {
+          if (index < 10) {
+            _showlist.push(item.nameGroup);
+          }
+        });
+        setShowList(_showlist);
+      }
+      setWholeData(_data);
+      onChangeUrlParam(searchData);
+      setLoading(false);
+    });
+  };
+  var refreshHandle = function refreshHandle() {
+    refresh = true;
+    setRefreshLoading(true);
+    if (refreshTimer) clearTimeout(refreshTimer);
+    refreshTimer = setTimeout(function () {
+      fetchRequest();
+      refresh = false;
+      clearTimeout(refreshTimer);
+    }, 500);
+  };
+  var onChangeContent = function onChangeContent(data) {
+    ajaxFlag = true;
+    setSearchData(function (value) {
+      return _objectSpread(_objectSpread({}, value), data);
+    });
+    setTimeout(function () {
+      var _topPanelRef$current2;
+      topPanelRef === null || topPanelRef === void 0 ? void 0 : (_topPanelRef$current2 = topPanelRef.current) === null || _topPanelRef$current2 === void 0 ? void 0 : _topPanelRef$current2.onSubmit();
+    }, 100);
+  };
+  var platformChange = function platformChange(data) {
+    ajaxFlag = true;
+    setSearchData(function (_searchData) {
+      return _objectSpread(_objectSpread({}, _searchData), {}, {
+        platform: data
+      });
+    });
+    setTimeout(function () {
+      var _topPanelRef$current3;
+      topPanelRef === null || topPanelRef === void 0 ? void 0 : (_topPanelRef$current3 = topPanelRef.current) === null || _topPanelRef$current3 === void 0 ? void 0 : _topPanelRef$current3.onSubmit();
+    }, 100);
+  };
+  var onChangeSearch = function onChangeSearch(data, flag) {
+    ajaxFlag = flag;
+    data.id ? setWholeId(data.id) : setWholeId(-1);
+    setSearchData(function (value) {
+      return _objectSpread(_objectSpread({}, data), {}, {
+        time: value.time,
+        platform: value.platform,
+        chartType: value.chartType
+      });
+    });
+  };
+  var onClickGenerateReport = function onClickGenerateReport() {
+    if (!chartRef.current) {
+      message.warning('未选择事件或查询失败！');
+      return;
+    }
+    var url = chartRef.current.instance.getDataURL();
+    var params = {
+      image: url,
+      context: {
+        api: '/web/sdk/v2/event/eventAnalytics',
+        queryParam: searchData
+      }
+    };
+    if (afterEditTarget) afterEditTarget('report', params);
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TopBar, {
+    wholeData: wholeData,
+    searchData: searchData,
+    platformChange: platformChange,
+    showList: showList,
+    onClickGenerateReport: onClickGenerateReport
+  }), /*#__PURE__*/React.createElement(BizLayout, {
+    hasCollapse: true,
+    showTitle: !panelId,
+    collapseRef: topPanelRef === null || topPanelRef === void 0 ? void 0 : (_topPanelRef$current4 = topPanelRef.current) === null || _topPanelRef$current4 === void 0 ? void 0 : _topPanelRef$current4.getCollapseRef(),
+    topPanel: /*#__PURE__*/React.createElement(TopPanel, {
+      ref: topPanelRef,
+      onChange: onChangeSearch,
+      loading: loading,
+      value: searchData
+    })
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classPrefix
+  }, /*#__PURE__*/React.createElement(SearchPanel, {
+    chartType: searchData === null || searchData === void 0 ? void 0 : searchData.chartType,
+    time: searchData === null || searchData === void 0 ? void 0 : searchData.time,
+    eventId: eventId,
+    onChange: onChangeContent,
+    refreshHandle: refreshHandle
+  }), /*#__PURE__*/React.createElement(ContentPanel, {
+    ref: chartRef,
+    wholeData: wholeData,
+    searchData: searchData,
+    showList: showList
+  }))));
+});
+export default WholeContent;

package/es/modules/content/styles/index.less

@@ -0,0 +1,7 @@
+.whole-content {
+  &-options {
+    display: flex;
+    justify-content: flex-end;
+    margin-bottom: 16px;
+  }
+}

package/es/modules/content/types.d.ts

@@ -0,0 +1,11 @@
+import { SearchValue } from '../../types';
+export declare namespace WholeContentProps {
+    interface Props {
+        elementId: number | undefined;
+        value: SearchValue;
+        show?: string[];
+        onSearching?: (flag: boolean) => void;
+        initSearch?: () => void;
+        onChangeShow?: (data: string[]) => void;
+    }
+}

package/es/modules/content/types.js

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

package/es/modules/content/utils.d.ts

@@ -0,0 +1,17 @@
+import { AttributeSelect, AttrConditionTypes } from '@zgfe/business-lib';
+import { bizAttributeSelectorValueProp } from '../../types';
+import { EventGroup, UserProp, EnvProp } from '@zgfe/business-lib/es/attributeSelector/types';
+export declare const getMapChartData: (data: any) => any;
+export declare const judgeFilterValue: (data: AttrConditionTypes.GroupValue | undefined, count: number) => boolean;
+export declare const judgeIsCity: (name: string | undefined) => boolean;
+export declare const judgeIsArea: (name: string | undefined) => boolean;
+export declare const getValue: (param: bizAttributeSelectorValueProp, eventGroupList: EventGroup[] | undefined, eventEnvList: EnvProp[] | undefined, userPropList: UserProp[] | undefined) => AttributeSelect.Value | undefined;
+export declare const getNumberPanelData: (data: any) => Promise<unknown>;
+export declare const normalOptions: (type: any) => {
+    label: string;
+    value: string;
+}[];
+export declare const normalWholeOptions: {
+    label: string;
+    value: string;
+}[];

package/es/modules/content/utils.js

@@ -0,0 +1,107 @@
+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); }
+import { ajax } from '@zgfe/business-lib';
+import { Apis } from '../../constants';
+import _ from 'lodash';
+export var getMapChartData = function getMapChartData(data) {
+  var _data = _.cloneDeep(data);
+  _data.series.map(function (item) {
+    if (item.names.length > 1) {
+      if (item.names[1] === '新疆维吾尔自治区') {
+        item.names = [item.names[0], '新疆'];
+      }
+      item.names = item.names.reverse();
+    } else {
+      if (item.names[0] === '新疆维吾尔自治区') {
+        item.names = ['新疆'];
+      }
+    }
+  });
+  return _data;
+};
+export var judgeFilterValue = function judgeFilterValue(data, count) {
+  var flag = true;
+  if (data === undefined) {
+    if (count > 0) flag = false;
+  } else {
+    if (data.conditions.length <= 0 || data.conditions.length !== count) {
+      flag = false;
+    }
+    data.conditions.map(function (item) {
+      var _item$values;
+      if (item.values && (((_item$values = item.values) === null || _item$values === void 0 ? void 0 : _item$values.length) <= 0 || item.values[0] === '') && !((item === null || item === void 0 ? void 0 : item.operator) && /^is null$|^is not null$/.test(item === null || item === void 0 ? void 0 : item.operator))) flag = false;
+    });
+  }
+  return flag;
+};
+export var judgeIsCity = function judgeIsCity(name) {
+  var areaData = ['current_city', 'city'];
+  return name && areaData.indexOf(name) !== -1 ? true : false;
+};
+export var judgeIsArea = function judgeIsArea(name) {
+  var areaData = ['current_area', 'current_city', 'area', 'city'];
+  return name && areaData.indexOf(name) !== -1 ? true : false;
+};
+export var getValue = function getValue(param, eventGroupList, eventEnvList, userPropList) {
+  var res = undefined;
+  var key = "".concat(param.propCategory, "-").concat(param.value, "-").concat(param.id);
+  if ((param === null || param === void 0 ? void 0 : param.propCategory) === 'envProp') {
+    eventEnvList === null || eventEnvList === void 0 ? void 0 : eventEnvList.forEach(function (attr) {
+      if (attr.key === key) res = attr;
+    });
+  } else if ((param === null || param === void 0 ? void 0 : param.propCategory) === 'eventProp') {
+    eventGroupList === null || eventGroupList === void 0 ? void 0 : eventGroupList.forEach(function (group) {
+      group.eventList.forEach(function (event) {
+        event.attrList.forEach(function (attr) {
+          if (attr.key === key) res = attr;
+        });
+      });
+    });
+  } else if ((param === null || param === void 0 ? void 0 : param.propCategory) === 'userProp') {
+    userPropList === null || userPropList === void 0 ? void 0 : userPropList.forEach(function (attr) {
+      if (attr.key === key) res = attr;
+    });
+  }
+  return res;
+};
+export var getNumberPanelData = function getNumberPanelData(data) {
+  return new Promise(function (resolve, reject) {
+    ajax(Apis.dataList, {
+      method: 'post',
+      data: _objectSpread({}, data)
+    }).then(function (res) {
+      resolve(res);
+    }).catch(function (err) {
+      reject(err);
+    });
+  });
+};
+export var normalOptions = function normalOptions(type) {
+  return [{
+    label: "".concat(type != 'user' ? '主体数' : '人数'),
+    value: 'number'
+  }, {
+    label: '次数',
+    value: 'times'
+  }, {
+    label: '活跃比',
+    value: 'active_ratio'
+  }, {
+    label: "".concat(type != 'user' ? '主体平均次数' : '人均次数'),
+    value: 'per'
+  }];
+};
+export var normalWholeOptions = [{
+  label: '口径数',
+  value: 'number'
+}, {
+  label: '次数',
+  value: 'times'
+}, {
+  label: '平均次数',
+  value: 'per'
+}];

package/es/modules/home/demo/create.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;