@zgfe/modules-event 0.0.2-event.7 → 0.0.2-event.71

package/es/components/eventFilter/index.js

@@ -8,13 +8,18 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 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 React, { useEffect, useRef, useState, useContext } from 'react';
 import { BizEventSelector, BizAttributeSelector, IconFont, BizAttrConditionGroup } from '@zgfe/business-lib';
+import { EventContext } from '../../types';
+import { judgeFilterValue } from '../../modules/content/utils';
 import './styles/index.less';
 import _ from 'lodash';
 var classPrefix = 'eventfilter-box';
 var EventFilter = function EventFilter(props) {
-  var _useState = useState(0),
+  var setSearchDisabled = props.setSearchDisabled;
+  var _useContext = useContext(EventContext),
+    selectEventData = _useContext.selectEventData;
+  var _useState = useState(props.value && props.value.filters && props.value.filters.conditions ? props.value.filters.conditions.length : 0),
     _useState2 = _slicedToArray(_useState, 2),
     count = _useState2[0],
     setCount = _useState2[1];
@@ -23,7 +28,10 @@ var EventFilter = function EventFilter(props) {
     isAdd = _useState4[0],
     setIsAdd = _useState4[1];
   var conditionRef = useRef(null);
-  var _useState5 = useState({
+  var _useState5 = useState(props.value && props.value.id ? {
+      id: props.value.id,
+      name: props.value.name
+    } : {
       id: -100,
       name: '事件概览'
     }),
@@ -43,25 +51,30 @@ var EventFilter = function EventFilter(props) {
     bizAttributeSelectorValue = _useState12[0],
     setBizAttributeSelectorValue = _useState12[1];
   useEffect(function () {
-    if (props.value) {
-      var _data = props.value;
+    var _data = props.value;
+    if (selectEventData) {
+      _data = selectEventData;
+      setEvent({
+        id: selectEventData.id,
+        name: selectEventData.name
+      });
+    }
+    if (_data) {
       if (_data && _data.id) {
-        setEvent({
-          id: _data.id,
-          name: _data.name
-        });
         setEventOverview(true);
       }
       if (_data.filters) {
         setFilter(_data.filters);
+        setCount(_data.filters.conditions.length);
       }
       if (_data.dimension) {
+        var _attr = _data.dimension;
         setBizAttributeSelectorValue(_objectSpread(_objectSpread({}, _data.dimension), {}, {
-          key: _data.dimension.propCategory === 'eventProp' ? _data.dimension.value : _data.dimension.propCategory + '-' + _data.dimension.value
+          key: "".concat(_attr.propCategory, "-").concat(_attr.value)
         }));
       }
     }
-  }, []);
+  }, [selectEventData]);
   var onAdd = function onAdd() {
     if (event.id === -1) {
       return;
@@ -75,15 +88,17 @@ var EventFilter = function EventFilter(props) {
     }, 0);
   };
   var onChangeFilters = function onChangeFilters(data) {
-    if (data && data.conditions && data.conditions.length > 0) {
-      setFilter(data);
+    setFilter(data);
+  };
+  useEffect(function () {
+    if (!judgeFilterValue(filter, count)) {
+      setSearchDisabled(true);
     } else {
-      setFilter(undefined);
-      setIsAdd(false);
+      setSearchDisabled(false);
     }
-  };
+    if (count <= 0) setFilter(undefined);
+  }, [count, filter]);
   var onChangeEvent = function onChangeEvent(event) {
-    console.log('onChangeEvent', event);
     if (event && event.event && event.event.id === -100) {
       setEventOverview(false);
     } else {
@@ -106,7 +121,8 @@ var EventFilter = function EventFilter(props) {
         propCategory: attr.propCategory,
         category: attr.category,
         value: _value,
-        key: attr.propCategory === 'eventProp' ? attr.id : attr.propCategory + '-' + _value
+        id: attr.id,
+        key: "".concat(attr.propCategory, "-").concat(_value)
       });
     }
   };
@@ -123,7 +139,6 @@ var EventFilter = function EventFilter(props) {
       delete _dimension.key;
       _event.dimension = _dimension;
     }
-    console.log('变更searchData', _event);
     props.onChange && props.onChange(_event);
   }, [bizAttributeSelectorValue, filter, event]);
   return /*#__PURE__*/React.createElement("div", {
@@ -148,7 +163,8 @@ var EventFilter = function EventFilter(props) {
     onChange: onChangeAttr,
     onDelete: function onDelete() {
       onChangeAttr(undefined);
-    }
+    },
+    placeholder: "\u8BF7\u9009\u62E9\u7EC6\u5206\u5C5E\u6027"
   }), /*#__PURE__*/React.createElement(Tooltip, {
     placement: "top",
     title: '添加属性筛选'

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

@@ -2,14 +2,14 @@
   > :nth-child(1) {
     display: flex;
     margin-bottom: 12px;
+    padding: 4px 0 4px 24px;
     .biz-event-select,
     .biz-attr-select {
-      width: 184px;
+      width: 208px;
       margin-right: 16px;
     }
     .shaixuan {
       margin-top: 2px;
-      margin-left: 20px;
       color: #9aa1a9;
       font-size: 20px !important;
       cursor: pointer;
@@ -22,4 +22,7 @@
       cursor: not-allowed !important;
     }
   }
+  > :nth-child(1):hover {
+    background: #e8efff;
+  }
 }

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

@@ -13,4 +13,5 @@ export interface ConditionsnProps {
 export interface EventFilterProps {
     value?: eventProps;
     onChange?: (event: eventProps) => {};
+    setSearchDisabled: (disabled: boolean) => void;
 }

package/es/components/index.d.ts

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

package/es/components/index.js

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

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

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

package/es/components/renderContent/index.js

@@ -4,32 +4,30 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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 { Empty } from 'antd';
+import React, { useState, useContext } from 'react';
+import { BizLoading } from '@zgfe/business-lib';
+import { EventContext } from '../../types';
 import './styles/index.less';
 import EventChart from '../../modules/chart';
 var classPrefix = 'render-content';
-var ContentPanel = function ContentPanel(props) {
-  var loading = props.loading,
-    eventData = props.eventData,
+var ContentPanel = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var eventData = props.eventData,
     searchData = props.searchData;
+  var _useContext = useContext(EventContext),
+    loading = _useContext.loading,
+    onSelectEvent = _useContext.onSelectEvent;
   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(BizLoading, {
+      className: "".concat(classPrefix, "-loading")
     });
   }
   return /*#__PURE__*/React.createElement("div", {
@@ -37,17 +35,20 @@ var ContentPanel = function ContentPanel(props) {
   }, /*#__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, {
+  }) : /*#__PURE__*/React.createElement(Empty, {
+    image: Empty.PRESENTED_IMAGE_SIMPLE,
+    description: "\u6682\u65E0\u6570\u636E"
+  })), eventData && eventData.series.length > 0 ? /*#__PURE__*/React.createElement(EventChart, {
     type: "grid",
     dataSource: eventData,
     params: searchData,
     showList: showList,
-    onChangeShow: onChangeShow
+    onChangeShow: onChangeShow,
+    onSelectEvent: onSelectEvent
   }) : null);
-};
+});
 export default ContentPanel;

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

@@ -5,20 +5,15 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    height: 368px;
-    padding: @padding-lg @padding-md;
+    height: 392px;
+    padding: @padding-lg;
     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;
+  &-loading {
     min-height: 300px;
   }
 }

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

@@ -1,6 +1,5 @@
 import { SearchValue, ResponseDataProps } from '../../types';
 export interface RenderContentProps {
-    loading?: boolean;
     eventData?: ResponseDataProps;
     searchData?: SearchValue;
     showList: string[];

package/es/components/searchPanel/index.js

@@ -11,6 +11,7 @@ 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 { normalOptions } from '../../modules/content/utils';
 import './styles/index.less';
 var classPrefix = 'search-panel';
 var SearchPanel = function SearchPanel(props) {
@@ -36,9 +37,15 @@ var SearchPanel = function SearchPanel(props) {
     setDimension = _useState8[1];
   useEffect(function () {
     if (props.chartType && props.chartType !== chart.value) {
-      setChart({
-        value: props.chartType
-      });
+      if (props.chartType.indexOf(',') !== -1) {
+        setChart({
+          value: props.chartType.split(',')[0]
+        });
+      } else {
+        setChart({
+          value: props.chartType
+        });
+      }
     }
     var _dimension = {
       analysisIndex: 'number'
@@ -53,6 +60,13 @@ var SearchPanel = function SearchPanel(props) {
     }
     setDimension(_objectSpread({}, _dimension));
   }, [props.chartType]);
+  useEffect(function () {
+    if (!props.enableSelectChart && chart.value === 'map') {
+      setChart({
+        value: 'line'
+      });
+    }
+  }, [props.enableSelectChart]);
   var onChangeTime = function onChangeTime(val) {
     if (timer) clearTimeout(timer);
     setTimer(setTimeout(function () {
@@ -85,8 +99,10 @@ var SearchPanel = function SearchPanel(props) {
     }
   }, /*#__PURE__*/React.createElement(BizDatePicker, {
     defaultValue: time,
-    onChange: onChangeTime
+    onChange: onChangeTime,
+    selectRange: 365
   }), /*#__PURE__*/React.createElement(BizTargetDimension, {
+    normalOptions: normalOptions,
     value: dimension,
     eventId: props.eventId,
     onChange: onDimensionChange

package/es/components/table/index.js

@@ -14,13 +14,13 @@ import { CopyToClipboard } from 'react-copy-to-clipboard';
 import 'highlight.js/styles/vs.css';
 import base64 from '../../utils/base64';
 import { Apis } from '../../constants';
-import { Modal, message, Table, ConfigProvider } from 'antd';
+import { Modal, message, Table, ConfigProvider, Empty } from 'antd';
 import { formTableData, getColumns } from '../../utils/formData';
 import './styles/index.less';
 import { getValue } from '../../modules/content/utils';
 import { EventContext } from '../../types';
-import emptyImg from './images/empty.png';
-var classPrefix = 'mi-table';
+import { getEventAliasName } from '../../utils/formData';
+var classPrefix = 'event-mi-table';
 var EventTable = function EventTable(props) {
   var dataSource = props.dataSource,
     searchData = props.searchData,
@@ -63,7 +63,6 @@ var EventTable = function EventTable(props) {
   useEffect(function () {
     var gLen = (searchData === null || searchData === void 0 ? void 0 : searchData.dimension) ? 1 : 0;
     var _data = formTableData(dataSource, searchData.userGroup || [0], gLen);
-    console.log(111, _data);
     setTotal(_data.length);
     setTableData(_data);
   }, []);
@@ -82,7 +81,7 @@ var EventTable = function EventTable(props) {
       } else {
         eventGroupList === null || eventGroupList === void 0 ? void 0 : eventGroupList.forEach(function (group) {
           group.eventList.forEach(function (event) {
-            if (event.name === item.name) {
+            if (event.name === item.originalName) {
               groupValue = event.id.toString();
             }
           });
@@ -115,7 +114,7 @@ var EventTable = function EventTable(props) {
         data: searchData
       }));
     };
-    var _getColumns = getColumns(eventGroupList, userPropList, eventEnvList, dataSource.xAxis || [], userGroup, searchData, showList, onShowClick, onClickToDetail);
+    var _getColumns = getColumns(eventGroupList, userPropList, eventEnvList, dataSource.xAxis || [], userGroup, searchData, showList, onShowClick, onClickToDetail, props === null || props === void 0 ? void 0 : props.onSelectEvent);
     return _getColumns;
   }, [dataSource.xAxis, showList, panelName]);
   var seeSql = function seeSql() {
@@ -144,12 +143,13 @@ var EventTable = function EventTable(props) {
     if (searchData.id && !searchData.dimension || !searchData.id) {
       seriesNames.push(base64.encode('事件'));
     }
+    var fname = "\u4E8B\u4EF6_".concat((searchData === null || searchData === void 0 ? void 0 : searchData.name) ? getEventAliasName(searchData === null || searchData === void 0 ? void 0 : searchData.name, eventGroupList) : '事件概览');
     var params = _objectSpread(_objectSpread({
       appId: currentApp === null || currentApp === void 0 ? void 0 : currentApp.appId,
       platform: (currentApp === null || currentApp === void 0 ? void 0 : currentApp.platform) || 0
     }, searchData), {}, {
       down: {
-        fname: base64.encode('事件分析'),
+        fname: base64.encode(fname),
         titles: seriesNames
       }
     });
@@ -157,23 +157,21 @@ var EventTable = function EventTable(props) {
       method: 'post',
       data: params,
       responseType: 'blob',
-      fileName: '事件分析',
+      fileName: fname,
       getResponse: true
     }).then(function () {
       message.success('下载成功！');
     });
   };
   var pageChange = function pageChange(page, pageSize) {
-    console.log('切页码', page, pageSize);
     setCurrent(page);
     setPageSize(pageSize);
   };
   var tableEmptyRender = function tableEmptyRender() {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "".concat(classPrefix, "-table-empty")
-    }, /*#__PURE__*/React.createElement("img", {
-      src: emptyImg
-    }), /*#__PURE__*/React.createElement("p", null, "\u6682\u65E0\u6570\u636E"));
+    return /*#__PURE__*/React.createElement(Empty, {
+      image: Empty.PRESENTED_IMAGE_SIMPLE,
+      description: "\u6682\u65E0\u6570\u636E"
+    });
   };
   return /*#__PURE__*/React.createElement("div", {
     className: classPrefix
@@ -191,9 +189,6 @@ var EventTable = function EventTable(props) {
     renderEmpty: tableEmptyRender
   }, /*#__PURE__*/React.createElement(Table, {
     className: "table",
-    scroll: {
-      y: '380px'
-    },
     rowKey: 'id',
     columns: columns,
     dataSource: tableData,
@@ -218,7 +213,6 @@ var EventTable = function EventTable(props) {
       type: "qingchu"
     }),
     title: "\u67E5\u770BSQL",
-    className: "".concat(classPrefix, "-share-panel"),
     onCancel: function onCancel() {
       return setSqlModal(false);
     },
@@ -232,7 +226,7 @@ var EventTable = function EventTable(props) {
       whiteSpace: 'pre-wrap'
     }
   }, sqlText), /*#__PURE__*/React.createElement(CopyToClipboard, {
-    text: JSON.stringify(sqlText, null, 2),
+    text: sqlText,
     onCopy: function onCopy() {
       return message.success('复制成功！');
     }

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

@@ -1,12 +1,17 @@
-.mi-table {
+.event-mi-table {
   margin-top: 16px;
+  &-loading {
+    min-height: 300px;
+  }
   &-table-header {
     display: flex;
     justify-content: space-between;
     height: 50px;
+    margin-bottom: -1px;
     padding: 0 12px;
     line-height: 50px;
     background: #fafafb;
+    border: 1px solid #e6e7ea;
     border-radius: 8px 8px 0 0;
     > :nth-child(2) {
       display: flex;
@@ -20,6 +25,7 @@
         line-height: 32px;
         background: #fff;
         border: 1px solid #f2f3f4;
+        border-radius: 4px;
         cursor: pointer;
         .xiazai1 {
           margin-right: 4px;
@@ -27,11 +33,32 @@
           vertical-align: -2px;
         }
       }
+      div:hover {
+        color: #165dff;
+        background: #e8efff;
+        border: 1px solid #165dff;
+      }
+      div:active {
+        color: #1454e5;
+        background: #e8efff;
+        border: 1px solid #1454e5;
+      }
     }
   }
   .ant-table {
+    max-height: 550px;
+    overflow: auto;
     border-radius: 0 0 8px 8px;
   }
+  .ant-pagination {
+    margin-top: 24px !important;
+  }
+  .ant-table
+    .ant-table-thead
+    .ant-table-cell.ant-table-column-has-sorters
+    .ant-table-column-sorters {
+    justify-content: flex-end !important;
+  }
   .ant-table-cell-with-append {
     padding-left: 20px;
     .ant-table-row-expand-icon {
@@ -40,25 +67,30 @@
       margin-top: 0;
     }
   }
-  .event-name-box {
+  .tooltip-name-box {
     display: flex;
-    justify-content: space-between;
     &-market {
       display: flex;
+      margin-right: 8px;
+      cursor: pointer;
       .shoucang {
         color: #fd9f41;
         font-size: 16px !important;
       }
+      .notshoucang {
+        opacity: 0;
+      }
     }
 
     .fuzhi1 {
       display: none;
+      font-size: 16px !important;
     }
     .fuzhi1:hover {
       color: #165dff;
     }
   }
-  .event-name-box:hover {
+  .tooltip-name-box:hover {
     .fuzhi1 {
       display: block;
     }
@@ -75,8 +107,23 @@
       color: rgba(0, 0, 0, 0.25);
     }
   }
+
+  &-chart-box {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    &-tooltip {
+      width: 200px;
+      margin-bottom: 24px;
+      color: #67727f;
+      font-size: 12px;
+    }
+  }
 }
 .event-table-sql-modal {
+  .ant-modal {
+    width: 720px !important;
+  }
   .ant-modal-header {
     position: relative;
     z-index: 1;
@@ -84,7 +131,7 @@
     background: transparent;
   }
   .ant-modal-body {
-    padding: 0 24px 18px 24px;
+    padding: 0 24px 24px 24px;
   }
   .ant-modal-close-x {
     margin-top: 13px;
@@ -104,9 +151,15 @@
     width: 100%;
     height: auto;
   }
+  pre {
+    margin-bottom: 0;
+  }
   .hljs {
+    height: 400px;
     padding: 16px;
+    padding-bottom: 0;
     background: #fafafb;
+    border-radius: 8px;
   }
   .copy-box {
     position: absolute;
@@ -119,4 +172,12 @@
       margin-right: 8px;
     }
   }
+  .copy-box:hover {
+    color: #165dff;
+    background: #e8efff;
+  }
+  .copy-box:active {
+    color: #1454e5;
+    background: #e8efff;
+  }
 }

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

@@ -6,4 +6,5 @@ export interface EventTableProps {
     isOverview?: boolean;
     changeShowByName: (name: string) => void;
     changeShow: (names: string[]) => void;
+    onSelectEvent?: (id: number, name: string) => void;
 }