@zgfe/modules-event 0.0.2-alpha.22 → 0.0.2-alpha.25

package/es/components/table/index.js

@@ -7,18 +7,19 @@ 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 { ajax, BizGlobalDataContext, BizTable, IconFont } from '@zgfe/business-lib';
+import { ajax, BizGlobalDataContext, IconFont } from '@zgfe/business-lib';
 import React, { useContext, useEffect, useMemo, useState } from 'react';
 import Highlight from 'react-highlight';
 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 } from 'antd';
+import { Modal, message, Table, ConfigProvider } 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';
 var EventTable = function EventTable(props) {
   var dataSource = props.dataSource,
@@ -39,28 +40,32 @@ var EventTable = function EventTable(props) {
     _useContext2$defaultS = _useContext2.defaultSearch,
     defaultSearch = _useContext2$defaultS === void 0 ? {} : _useContext2$defaultS,
     panelName = _useContext2.panelName;
-  var _useState3 = useState([]),
+  var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    sortTable = _useState4[0],
-    setSortTable = _useState4[1];
-  var _useState5 = useState([]),
+    sqlModal = _useState4[0],
+    setSqlModal = _useState4[1];
+  var _useState5 = useState(''),
     _useState6 = _slicedToArray(_useState5, 2),
-    searchTable = _useState6[0],
-    setSearchTable = _useState6[1];
-  var _useState7 = useState(false),
+    sqlText = _useState6[0],
+    setSqlText = _useState6[1];
+  var _useState7 = useState(1),
     _useState8 = _slicedToArray(_useState7, 2),
-    sqlModal = _useState8[0],
-    setSqlModal = _useState8[1];
-  var _useState9 = useState(''),
+    current = _useState8[0],
+    setCurrent = _useState8[1];
+  var _useState9 = useState(10),
     _useState10 = _slicedToArray(_useState9, 2),
-    sqlText = _useState10[0],
-    setSqlText = _useState10[1];
+    pageSize = _useState10[0],
+    setPageSize = _useState10[1];
+  var _useState11 = useState(0),
+    _useState12 = _slicedToArray(_useState11, 2),
+    total = _useState12[0],
+    setTotal = _useState12[1];
   useEffect(function () {
     var gLen = (searchData === null || searchData === void 0 ? void 0 : searchData.dimension) ? 1 : 0;
-    var sortData = formTableData(dataSource, searchData.userGroup || [0], gLen);
-    setSearchTable(sortData);
-    setSortTable(sortData);
-    setTableData(sortData.slice(0, 10));
+    var _data = formTableData(dataSource, searchData.userGroup || [0], gLen);
+    console.log(111, _data);
+    setTotal(_data.length);
+    setTableData(_data);
   }, []);
   var columns = useMemo(function () {
     var _searchData$userGroup = searchData.userGroup,
@@ -112,12 +117,7 @@ var EventTable = function EventTable(props) {
     };
     var _getColumns = getColumns(eventGroupList, userPropList, eventEnvList, dataSource.xAxis || [], userGroup, searchData, showList, onShowClick, onClickToDetail);
     return _getColumns;
-  }, [dataSource.xAxis, showList, sortTable, panelName]);
-  var onChangeTable = function onChangeTable(pagination) {
-    var startNum = (pagination.current - 1) * pagination.pageSize;
-    var endNum = pagination.current * pagination.pageSize;
-    setTableData(searchTable.slice(startNum, endNum));
-  };
+  }, [dataSource.xAxis, showList, panelName]);
   var seeSql = function seeSql() {
     ajax(Apis.getEventDataSql, {
       method: 'post',
@@ -163,6 +163,18 @@ var EventTable = function EventTable(props) {
       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("div", {
     className: classPrefix
   }, /*#__PURE__*/React.createElement("div", {
@@ -173,16 +185,31 @@ var EventTable = function EventTable(props) {
     onClick: download
   }, /*#__PURE__*/React.createElement(IconFont, {
     type: "xiazai1"
-  }), "\u4E0B\u8F7D\u6570\u636E"))), /*#__PURE__*/React.createElement(BizTable, {
-    total: searchTable.length,
-    columns: columns,
-    dataSource: tableData,
-    rowKey: "id",
+  }), "\u4E0B\u8F7D\u6570\u636E"))), /*#__PURE__*/React.createElement("div", {
+    className: "table-area"
+  }, /*#__PURE__*/React.createElement(ConfigProvider, {
+    renderEmpty: tableEmptyRender
+  }, /*#__PURE__*/React.createElement(Table, {
+    className: "table",
     scroll: {
-      x: true
+      y: '380px'
     },
-    onChange: onChangeTable
-  }), /*#__PURE__*/React.createElement(Modal, {
+    rowKey: 'id',
+    columns: columns,
+    dataSource: tableData,
+    pagination: {
+      showQuickJumper: true,
+      total: total,
+      defaultPageSize: 10,
+      defaultCurrent: 1,
+      current: current,
+      pageSize: pageSize,
+      onChange: pageChange,
+      showTotal: function showTotal(total) {
+        return "\u603B\u6761\u6570\uFF1A".concat(total, " ");
+      }
+    }
+  }))), /*#__PURE__*/React.createElement(Modal, {
     open: sqlModal,
     wrapClassName: "event-table-sql-modal",
     okText: "\u786E\u5B9A",
@@ -202,8 +229,7 @@ var EventTable = function EventTable(props) {
   }, /*#__PURE__*/React.createElement(Highlight, {
     languageName: "sql",
     style: {
-      whiteSpace: 'pre-wrap',
-      background: 'red'
+      whiteSpace: 'pre-wrap'
     }
   }, sqlText), /*#__PURE__*/React.createElement(CopyToClipboard, {
     text: JSON.stringify(sqlText, null, 2),

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

@@ -40,6 +40,41 @@
       margin-top: 0;
     }
   }
+  .event-name-box {
+    display: flex;
+    justify-content: space-between;
+    &-market {
+      display: flex;
+      .shoucang {
+        color: #fd9f41;
+        font-size: 16px !important;
+      }
+    }
+
+    .fuzhi1 {
+      display: none;
+    }
+    .fuzhi1:hover {
+      color: #165dff;
+    }
+  }
+  .event-name-box:hover {
+    .fuzhi1 {
+      display: block;
+    }
+  }
+
+  &-table-empty {
+    img {
+      width: 50px !important;
+      height: auto;
+      margin-top: 30px;
+      margin-bottom: 10px;
+    }
+    p {
+      color: rgba(0, 0, 0, 0.25);
+    }
+  }
 }
 .event-table-sql-modal {
   .ant-modal-header {

package/es/modules/chart/index.js

@@ -16,6 +16,8 @@ import { getDefaultShow, getShowColor } from '../../utils/formData';
 import _ from 'lodash';
 import { Apis, chartColors } from '../../constants';
 import { Spin } from 'antd';
+import emptyImg from '../../components/table/images/empty.png';
+var classPrefix = 'mi-table';
 var EventChart = function EventChart(props) {
   var params = props.params;
   var _useState = useState(false),
@@ -48,6 +50,7 @@ var EventChart = function EventChart(props) {
     return getShowColor(dataSource, showList);
   }, [showList]);
   var chartData = useMemo(function () {
+    console.log('chartData?.length', dataSource);
     if (dataSource) {
       var data = _.cloneDeep(dataSource);
       data.x_axis = dataSource.xAxis;
@@ -122,11 +125,14 @@ var EventChart = function EventChart(props) {
       label: "\u6682\u65E0\u6570\u636E"
     });
   }
-  switch (chartType) {
-    case 'line':
-    case 'bar':
-    case 'pie':
-    case 'map':
+  var chartBox = function chartBox() {
+    if (chartData.series.length <= 0) {
+      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"));
+    } else {
       return /*#__PURE__*/React.createElement(BizChart, {
         key: chartType,
         type: chartType,
@@ -139,6 +145,14 @@ var EventChart = function EventChart(props) {
         isCity: isCity,
         radius: ['30%', '75%']
       });
+    }
+  };
+  switch (chartType) {
+    case 'line':
+    case 'bar':
+    case 'pie':
+    case 'map':
+      return chartBox();
     case 'grid':
       return /*#__PURE__*/React.createElement(EventTable, {
         dataSource: dataSource,

package/es/modules/content/index.js

@@ -157,15 +157,14 @@ var EventContent = function EventContent(props) {
     showTitle: false,
     hasCollapse: true,
     collapseRef: collapseRef,
-    topPanel: /*#__PURE__*/React.createElement("div", {
-      ref: collapseRef
-    }, /*#__PURE__*/React.createElement(TopPanel, {
+    topPanel: /*#__PURE__*/React.createElement(TopPanel, {
+      ref: collapseRef,
       onChange: onChangeSearch,
       defaultValue: searchData,
       ajaxFlag: ajaxFlag,
       finalSearchData: finalSearchData,
       fetchRequest: fetchRequest
-    }))
+    })
   }, /*#__PURE__*/React.createElement("div", {
     className: classPrefix
   }, /*#__PURE__*/React.createElement(SearchPanel, {

package/es/modules/home/demo/create.js

@@ -37,7 +37,7 @@ export default (function () {
   };
   return /*#__PURE__*/React.createElement(DemoWrapper, {
     needMeta: true,
-    defaultApp: 266
+    defaultApp: 161
   }, isDetail ? /*#__PURE__*/React.createElement("div", null, JSON.stringify(detailParams), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Button, {
     onClick: function onClick() {
       return setIsDetail(false);

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

@@ -1,10 +1,10 @@
-import { SearchValue } from '../../types';
+import { SearchValue, UserDrillParamsProp } from '../../types';
 export declare namespace EventProps {
     interface Props {
         defaultValue?: Value;
         includeToday?: boolean;
         afterEditTarget?: (type: string, value?: any) => void;
-        onUserDrill: (data: any, searchData: SearchValue) => void;
+        onUserDrill: (data: UserDrillParamsProp, searchData: SearchValue) => void;
     }
     interface Value {
         panelId?: number;

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

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

package/es/modules/topPanel/index.js

@@ -10,7 +10,7 @@ import { BizUserGroupHeader } from '@zgfe/business-lib';
 import EventFilter from '../../components/eventFilter';
 import './styles/index.less';
 var classPrefix = 'top-panel';
-var TopPanel = function TopPanel(props) {
+var TopPanel = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var defaultValue = props.defaultValue,
     ajaxFlag = props.ajaxFlag,
     finalSearchData = props.finalSearchData,
@@ -89,7 +89,9 @@ var TopPanel = function TopPanel(props) {
     name: "userGroup"
   }, /*#__PURE__*/React.createElement(BizUserGroupHeader, {
     max: 3
-  })), /*#__PURE__*/React.createElement(Form.Item, {
+  })), /*#__PURE__*/React.createElement("div", {
+    ref: ref
+  }, /*#__PURE__*/React.createElement(Form.Item, {
     label: "\u4E8B\u4EF6",
     name: "filterConditions",
     style: {
@@ -105,6 +107,6 @@ var TopPanel = function TopPanel(props) {
     onClick: function onClick() {
       fetchRequest(true);
     }
-  }, "\u67E5\u8BE2")));
-};
+  }, "\u67E5\u8BE2"))));
+});
 export default TopPanel;

package/es/style/index.less

@@ -37,11 +37,23 @@
     }
 
     &-link {
+      display: flex;
+      justify-content: flex-end;
       cursor: pointer;
       &:hover {
         color: @primary-color;
-        text-decoration: underline;
+        // text-decoration: underline;
+        .a-yanjingkai {
+          display: block;
+        }
+      }
+      .a-yanjingkai {
+        display: none;
+        margin-right: 10px;
       }
     }
   }
+  &-table-event-data {
+    text-align: right !important;
+  }
 }

package/es/types.d.ts

@@ -1,4 +1,4 @@
-import { TargetConditionTypes, AttrConditionTypes, BizSelectTypes, AttributeSelect } from '@zgfe/business-lib';
+import { AttrConditionTypes } from '@zgfe/business-lib';
 import { DatePickerTypes } from '@zgfe/business-lib/es/datePicker/types';
 import { ReactNode } from 'react';
 export interface bizAttributeSelectorValueProp {
@@ -25,13 +25,14 @@ export interface SearchValue {
     dimension?: bizAttributeSelectorValueProp;
     filters?: AttrConditionTypes.GroupValue;
 }
-export interface SearchData {
-    userGroup?: Array<BizSelectTypes.Option>;
-    targets: Array<TargetConditionTypes.Value>;
-    globalFilters?: AttrConditionTypes.GroupValue;
-    globalDimensions?: Array<AttributeSelect.Value>;
-    chartType?: EventChartTypes;
-    time?: DatePickerTypes.Value;
+export interface UserDrillParamsProp {
+    appId: number;
+    platform: number;
+    count: number;
+    source: string;
+    url: string;
+    params?: Record<string, any>;
+    module?: string;
 }
 export type EventChartTypes = 'line' | 'bar' | 'pie' | 'map';
 export interface ChartItemProp {

package/es/utils/formData.d.ts

@@ -5,6 +5,7 @@ import { ResponseDataProps, SearchValue } from '../types';
 import { EventProps } from '../modules/home/types';
 import '../style/index.less';
 export declare function getColumns(eventGroupList: EventGroup[] | undefined, userPropList: UserProp[] | undefined, eventEnvList: EnvProp[] | undefined, columnData: string[], userGroup: number[], searchData: SearchValue, showList: string[], onShowCallback: Function, onClickToDetailCallback: Function): ColumnsType<EventProps.ColumnsDataType>;
+export declare function marketEventGroupList(eventGroupList: EventGroup[] | undefined): string[];
 export declare function getAttrLabel(attrData: AttrConditionTypes.ItemValue, eventGroupList: EventGroup[] | undefined, userPropList: UserProp[] | undefined, eventEnvList: EnvProp[] | undefined): string | undefined;
 export declare function formTableData(originalData: ResponseDataProps, userGroups: number[], attrNum: number, showList?: string[]): EventProps.ColumnsDataType[];
 export declare function getDefaultShow(source: ResponseDataProps): string[];

package/es/utils/formData.js

@@ -1,5 +1,7 @@
-import { util } from '@zgfe/business-lib';
+import { util, IconFont } from '@zgfe/business-lib';
 import React from 'react';
+import { message } from 'antd';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { chartColors } from '../constants/color';
 import { PropCategory } from '@zgfe/business-lib/es/attributeSelector/types';
 import { Tooltip } from 'antd';
@@ -7,6 +9,7 @@ import '../style/index.less';
 import { getValue } from '../modules/content/utils';
 var classPrefix = 'event-form-data';
 export function getColumns(eventGroupList, userPropList, eventEnvList, columnData, userGroup, searchData, showList, onShowCallback, onClickToDetailCallback) {
+  var marketEventNameList = marketEventGroupList(eventGroupList);
   var data = [{
     title: '显示',
     width: 80,
@@ -15,6 +18,7 @@ export function getColumns(eventGroupList, userPropList, eventEnvList, columnDat
     key: 'nameGroup',
     align: 'center',
     className: "".concat(classPrefix, "-table-td"),
+    fixed: true,
     render: function render(_, record) {
       var isActive = showList.includes(record.nameGroup);
       var cannotClick = showList.length >= 10 && !isActive;
@@ -38,6 +42,7 @@ export function getColumns(eventGroupList, userPropList, eventEnvList, columnDat
       dataIndex: 'userGroup',
       key: 'userGroup',
       ellipsis: true,
+      fixed: true,
       render: function render(text) {
         return text;
       }
@@ -51,6 +56,7 @@ export function getColumns(eventGroupList, userPropList, eventEnvList, columnDat
       dataIndex: 'dimension',
       key: 'dimension',
       ellipsis: true,
+      fixed: true,
       render: function render(val) {
         return /*#__PURE__*/React.createElement(Tooltip, {
           title: val
@@ -70,15 +76,28 @@ export function getColumns(eventGroupList, userPropList, eventEnvList, columnDat
       dataIndex: 'eventName',
       key: 'eventName',
       ellipsis: true,
+      fixed: true,
       render: function render(val) {
         return /*#__PURE__*/React.createElement(Tooltip, {
+          className: "event-name-box",
           title: val
-        }, util.strMiddleSplit(val, {
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "event-name-box-market"
+        }, marketEventNameList.indexOf(val) !== -1 && /*#__PURE__*/React.createElement(IconFont, {
+          type: "shoucang"
+        }), util.strMiddleSplit(val, {
           maxLength: 20,
           beginLength: 10,
           endLength: 6,
           replaceStr: '...'
-        }));
+        })), /*#__PURE__*/React.createElement(CopyToClipboard, {
+          text: val,
+          onCopy: function onCopy() {
+            return message.success('复制成功！');
+          }
+        }, /*#__PURE__*/React.createElement(IconFont, {
+          type: "fuzhi1"
+        })));
       }
     });
   }
@@ -103,13 +122,19 @@ export function getColumns(eventGroupList, userPropList, eventEnvList, columnDat
       align: 'center',
       ellipsis: true,
       dataIndex: "field".concat(i),
+      className: "".concat(classPrefix, "-table-event-data"),
+      sorter: function sorter(a, b) {
+        return a["field".concat(i)] - b["field".concat(i)];
+      },
       render: function render(text, record) {
         return /*#__PURE__*/React.createElement("div", {
           className: "".concat(classPrefix, "-table-td-link"),
           onClick: function onClick() {
             return onClickToDetailCallback(record, columnData[i], text);
           }
-        }, text);
+        }, /*#__PURE__*/React.createElement(IconFont, {
+          type: "a-yanjingkai"
+        }), text);
       }
     });
   };
@@ -118,6 +143,16 @@ export function getColumns(eventGroupList, userPropList, eventEnvList, columnDat
   }
   return data;
 }
+export function marketEventGroupList(eventGroupList) {
+  var _marketName = [];
+  eventGroupList && eventGroupList.map(function (item) {
+    item.eventList.map(function (_item) {
+      if (_item.marked) _marketName.push(_item.name);
+    });
+  });
+  console.log(666, _marketName);
+  return _marketName;
+}
 export function getAttrLabel(attrData, eventGroupList, userPropList, eventEnvList) {
   if (!attrData) return;
   var type = attrData.propCategory;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zgfe/modules-event",
-  "version": "0.0.2-alpha.22",
+  "version": "0.0.2-alpha.25",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",
@@ -49,7 +49,7 @@
     "react": "^16.12.0 || ^17.0.0",
     "yorkie": "^2.0.0"
   },
-  "gitHead": "691904a65cb0c72e44eff28f2caf9873b36bde59",
+  "gitHead": "7b85ecc4ea7d787abf9df20507edccdfe40a0166",
   "dependencies": {
     "react-copy-to-clipboard": "^5.1.0",
     "react-highlight": "^0.15.0"