@zgfe/modules-event 0.0.2-alpha.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +35 -0
- package/es/components/common/index.d.ts +6 -0
- package/es/components/common/index.js +17 -0
- package/es/components/common/styles/index.less +27 -0
- package/es/components/eventFilter/index.d.ts +4 -0
- package/es/components/eventFilter/index.js +160 -0
- package/es/components/eventFilter/styles/index.less +24 -0
- package/es/components/eventFilter/types.d.ts +11 -0
- package/es/components/eventFilter/types.js +1 -0
- package/es/components/index.d.ts +5 -0
- package/es/components/index.js +5 -0
- package/es/components/renderContent/index.d.ts +5 -0
- package/es/components/renderContent/index.js +54 -0
- package/es/components/renderContent/styles/index.less +24 -0
- package/es/components/renderContent/types.d.ts +12 -0
- package/es/components/renderContent/types.js +1 -0
- package/es/components/searchPanel/index.d.ts +5 -0
- package/es/components/searchPanel/index.js +107 -0
- package/es/components/searchPanel/styles/index.less +18 -0
- package/es/components/searchPanel/types.d.ts +16 -0
- package/es/components/searchPanel/types.js +1 -0
- package/es/components/table/index.d.ts +6 -0
- package/es/components/table/index.js +221 -0
- package/es/components/table/styles/index.less +87 -0
- package/es/components/table/types.d.ts +9 -0
- package/es/components/table/types.js +1 -0
- package/es/components/topBar/index.d.ts +4 -0
- package/es/components/topBar/index.js +105 -0
- package/es/components/topBar/styles/index.less +48 -0
- package/es/components/topBar/types.d.ts +7 -0
- package/es/components/topBar/types.js +1 -0
- package/es/constants/apis.d.ts +6 -0
- package/es/constants/apis.js +6 -0
- package/es/constants/chart.d.ts +2 -0
- package/es/constants/chart.js +31 -0
- package/es/constants/color.d.ts +1 -0
- package/es/constants/color.js +1 -0
- package/es/constants/fields.d.ts +220 -0
- package/es/constants/fields.js +205 -0
- package/es/constants/index.d.ts +6 -0
- package/es/constants/index.js +6 -0
- package/es/constants/initData.d.ts +2 -0
- package/es/constants/initData.js +9 -0
- package/es/index.d.ts +4 -0
- package/es/index.js +3 -0
- package/es/modules/chart/demo/data.d.ts +79 -0
- package/es/modules/chart/demo/data.js +490 -0
- package/es/modules/chart/demo/index.d.ts +2 -0
- package/es/modules/chart/demo/index.js +51 -0
- package/es/modules/chart/demo/panel.d.ts +2 -0
- package/es/modules/chart/demo/panel.js +30 -0
- package/es/modules/chart/index.d.ts +4 -0
- package/es/modules/chart/index.js +153 -0
- package/es/modules/chart/types.d.ts +15 -0
- package/es/modules/chart/types.js +1 -0
- package/es/modules/content/index.d.ts +5 -0
- package/es/modules/content/index.js +255 -0
- package/es/modules/content/styles/index.less +18 -0
- package/es/modules/content/types.d.ts +10 -0
- package/es/modules/content/types.js +1 -0
- package/es/modules/content/utils.d.ts +2 -0
- package/es/modules/content/utils.js +8 -0
- package/es/modules/home/demo/create.d.ts +2 -0
- package/es/modules/home/demo/create.js +50 -0
- package/es/modules/home/demo/edit.d.ts +2 -0
- package/es/modules/home/demo/edit.js +100 -0
- package/es/modules/home/demo/index.d.ts +3 -0
- package/es/modules/home/demo/index.js +50 -0
- package/es/modules/home/demo/scene.d.ts +2 -0
- package/es/modules/home/demo/scene.js +74 -0
- package/es/modules/home/demo/styles/index.less +33 -0
- package/es/modules/home/index.d.ts +5 -0
- package/es/modules/home/index.js +122 -0
- package/es/modules/home/styles/index.less +40 -0
- package/es/modules/home/types.d.ts +20 -0
- package/es/modules/home/types.js +1 -0
- package/es/style/image/noData.png +0 -0
- package/es/style/image/ring.svg +9 -0
- package/es/style/index.less +47 -0
- package/es/style/theme.d.ts +15 -0
- package/es/style/theme.js +14 -0
- package/es/types.d.ts +60 -0
- package/es/types.js +6 -0
- package/es/utils/ajaxConfig.d.ts +8 -0
- package/es/utils/ajaxConfig.js +40 -0
- package/es/utils/base64.d.ts +23 -0
- package/es/utils/base64.js +125 -0
- package/es/utils/formData.d.ts +10 -0
- package/es/utils/formData.js +226 -0
- package/es/utils/util.d.ts +32 -0
- package/es/utils/util.js +139 -0
- package/package.json +57 -0
|
@@ -0,0 +1,221 @@
|
|
|
1
|
+
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; }
|
|
2
|
+
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; }
|
|
3
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
4
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
5
|
+
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."); }
|
|
6
|
+
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); }
|
|
7
|
+
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; }
|
|
8
|
+
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; }
|
|
9
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
10
|
+
import { ajax, BizGlobalDataContext, BizTable, IconFont } from '@zgfe/business-lib';
|
|
11
|
+
import React, { useContext, useEffect, useMemo, useState } from 'react';
|
|
12
|
+
import Highlight from 'react-highlight';
|
|
13
|
+
import { CopyToClipboard } from 'react-copy-to-clipboard';
|
|
14
|
+
import 'highlight.js/styles/vs.css';
|
|
15
|
+
import base64 from '../../utils/base64';
|
|
16
|
+
import { Apis } from '../../constants';
|
|
17
|
+
import { Modal, message } from 'antd';
|
|
18
|
+
import { formTableData, getColumns } from '../../utils/formData';
|
|
19
|
+
import './styles/index.less';
|
|
20
|
+
import { EventContext } from '../../types';
|
|
21
|
+
var classPrefix = 'mi-table';
|
|
22
|
+
var EventTable = function EventTable(props) {
|
|
23
|
+
var dataSource = props.dataSource,
|
|
24
|
+
searchData = props.searchData,
|
|
25
|
+
showList = props.showList;
|
|
26
|
+
var _useState = useState([]),
|
|
27
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
28
|
+
tableData = _useState2[0],
|
|
29
|
+
setTableData = _useState2[1];
|
|
30
|
+
var _useContext = useContext(BizGlobalDataContext),
|
|
31
|
+
currentApp = _useContext.currentApp,
|
|
32
|
+
_useContext$eventGrou = _useContext.eventGroupList,
|
|
33
|
+
eventGroupList = _useContext$eventGrou === void 0 ? [] : _useContext$eventGrou;
|
|
34
|
+
var _useContext2 = useContext(EventContext),
|
|
35
|
+
onUserDrill = _useContext2.onUserDrill,
|
|
36
|
+
_useContext2$defaultS = _useContext2.defaultSearch,
|
|
37
|
+
defaultSearch = _useContext2$defaultS === void 0 ? {} : _useContext2$defaultS,
|
|
38
|
+
panelName = _useContext2.panelName;
|
|
39
|
+
var _useState3 = useState([]),
|
|
40
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
41
|
+
sortTable = _useState4[0],
|
|
42
|
+
setSortTable = _useState4[1];
|
|
43
|
+
var _useState5 = useState([]),
|
|
44
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
45
|
+
searchTable = _useState6[0],
|
|
46
|
+
setSearchTable = _useState6[1];
|
|
47
|
+
var _useState7 = useState(false),
|
|
48
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
|
49
|
+
sqlModal = _useState8[0],
|
|
50
|
+
setSqlModal = _useState8[1];
|
|
51
|
+
var _useState9 = useState(''),
|
|
52
|
+
_useState10 = _slicedToArray(_useState9, 2),
|
|
53
|
+
sqlText = _useState10[0],
|
|
54
|
+
setSqlText = _useState10[1];
|
|
55
|
+
useEffect(function () {
|
|
56
|
+
var gLen = (searchData === null || searchData === void 0 ? void 0 : searchData.filterConditions) && (searchData === null || searchData === void 0 ? void 0 : searchData.filterConditions[0].eventAttr) ? 1 : 0;
|
|
57
|
+
var sortData = formTableData(dataSource, searchData.userGroup || [0], gLen, eventGroupList);
|
|
58
|
+
setSearchTable(sortData);
|
|
59
|
+
setSortTable(sortData);
|
|
60
|
+
setTableData(sortData.slice(0, 10));
|
|
61
|
+
}, []);
|
|
62
|
+
var columns = useMemo(function () {
|
|
63
|
+
var _searchData$userGroup = searchData.userGroup,
|
|
64
|
+
userGroup = _searchData$userGroup === void 0 ? [0] : _searchData$userGroup;
|
|
65
|
+
var onShowClick = function onShowClick(nameGroup) {
|
|
66
|
+
props.changeShowByName(nameGroup);
|
|
67
|
+
};
|
|
68
|
+
var onClickToDetail = function onClickToDetail(item, time, count) {
|
|
69
|
+
var _searchData$time;
|
|
70
|
+
console.log('666', searchData);
|
|
71
|
+
var group_value = '';
|
|
72
|
+
if (searchData.filterConditions && searchData.filterConditions[0].eventAttr) {
|
|
73
|
+
group_value = item.eventAttr;
|
|
74
|
+
} else {
|
|
75
|
+
eventGroupList === null || eventGroupList === void 0 ? void 0 : eventGroupList.forEach(function (group) {
|
|
76
|
+
group.eventList.forEach(function (event) {
|
|
77
|
+
if (event.name === item.name) {
|
|
78
|
+
group_value = event.id.toString();
|
|
79
|
+
}
|
|
80
|
+
});
|
|
81
|
+
});
|
|
82
|
+
}
|
|
83
|
+
var group_by = [['bar', 'map', 'pie'].includes(searchData.chartType) ? 'total' : (_searchData$time = searchData.time) === null || _searchData$time === void 0 ? void 0 : _searchData$time.unit];
|
|
84
|
+
if (searchData.filterConditions && searchData.filterConditions[0].eventAttr) {
|
|
85
|
+
var _searchData$filterCon;
|
|
86
|
+
group_by.push((_searchData$filterCon = searchData.filterConditions[0].eventAttr) === null || _searchData$filterCon === void 0 ? void 0 : _searchData$filterCon.dimensionSub);
|
|
87
|
+
} else {
|
|
88
|
+
group_by.push('');
|
|
89
|
+
}
|
|
90
|
+
onUserDrill && onUserDrill({
|
|
91
|
+
appId: currentApp === null || currentApp === void 0 ? void 0 : currentApp.appId,
|
|
92
|
+
platform: (currentApp === null || currentApp === void 0 ? void 0 : currentApp.platform) || 0,
|
|
93
|
+
count: count,
|
|
94
|
+
params: _objectSpread(_objectSpread({
|
|
95
|
+
appid: currentApp === null || currentApp === void 0 ? void 0 : currentApp.appId,
|
|
96
|
+
plat: (currentApp === null || currentApp === void 0 ? void 0 : currentApp.platform) || 0,
|
|
97
|
+
user_type: 0,
|
|
98
|
+
isTotal: false,
|
|
99
|
+
group_value: group_value,
|
|
100
|
+
group_by: group_by.join(','),
|
|
101
|
+
module: 'event'
|
|
102
|
+
}, searchData), {}, {
|
|
103
|
+
time: _objectSpread(_objectSpread({}, searchData.time), {}, {
|
|
104
|
+
begin: time[0],
|
|
105
|
+
end: time.length > 1 ? time[1] : time[0]
|
|
106
|
+
})
|
|
107
|
+
}),
|
|
108
|
+
source: 'EVENT',
|
|
109
|
+
url: '/data/appEventBatch.jsp'
|
|
110
|
+
}, _objectSpread(_objectSpread({
|
|
111
|
+
source: 'EVENT'
|
|
112
|
+
}, defaultSearch), {}, {
|
|
113
|
+
name: panelName,
|
|
114
|
+
data: searchData
|
|
115
|
+
}));
|
|
116
|
+
};
|
|
117
|
+
var _getColumns = getColumns(dataSource.xAxis || [], userGroup, searchData, showList, onShowClick, onClickToDetail);
|
|
118
|
+
return _getColumns;
|
|
119
|
+
}, [dataSource.xAxis, showList, sortTable, panelName]);
|
|
120
|
+
var onChangeTable = function onChangeTable(pagination) {
|
|
121
|
+
var startNum = (pagination.current - 1) * pagination.pageSize;
|
|
122
|
+
var endNum = pagination.current * pagination.pageSize;
|
|
123
|
+
setTableData(searchTable.slice(startNum, endNum));
|
|
124
|
+
};
|
|
125
|
+
var seeSql = function seeSql() {
|
|
126
|
+
ajax(Apis.getEventDataSql, {
|
|
127
|
+
method: 'post',
|
|
128
|
+
data: _objectSpread({
|
|
129
|
+
appId: currentApp === null || currentApp === void 0 ? void 0 : currentApp.appId,
|
|
130
|
+
platform: (currentApp === null || currentApp === void 0 ? void 0 : currentApp.platform) || 0,
|
|
131
|
+
service: !searchData.filterConditions ? 'event/overview_sql' : 'event_sql'
|
|
132
|
+
}, searchData)
|
|
133
|
+
}).then(function (res) {
|
|
134
|
+
setSqlText(res.data.sql);
|
|
135
|
+
setSqlModal(true);
|
|
136
|
+
});
|
|
137
|
+
};
|
|
138
|
+
var download = function download() {
|
|
139
|
+
var seriesNames = [];
|
|
140
|
+
if (searchData.userGroup && searchData.userGroup.length > 1) {
|
|
141
|
+
seriesNames.push(base64.encode('用户群'));
|
|
142
|
+
}
|
|
143
|
+
if (searchData.filterConditions && searchData.filterConditions[0].eventAttr) {
|
|
144
|
+
seriesNames.push(base64.encode(searchData.filterConditions[0].eventAttr.label));
|
|
145
|
+
}
|
|
146
|
+
if (searchData.filterConditions && !searchData.filterConditions[0].eventAttr || !searchData.filterConditions) {
|
|
147
|
+
seriesNames.push(base64.encode('事件'));
|
|
148
|
+
}
|
|
149
|
+
var params = _objectSpread(_objectSpread({
|
|
150
|
+
appId: currentApp === null || currentApp === void 0 ? void 0 : currentApp.appId,
|
|
151
|
+
platform: (currentApp === null || currentApp === void 0 ? void 0 : currentApp.platform) || 0
|
|
152
|
+
}, searchData), {}, {
|
|
153
|
+
down: {
|
|
154
|
+
fname: base64.encode('事件分析'),
|
|
155
|
+
titles: seriesNames
|
|
156
|
+
}
|
|
157
|
+
});
|
|
158
|
+
ajax(Apis.eventDownloadReport, {
|
|
159
|
+
method: 'post',
|
|
160
|
+
data: params,
|
|
161
|
+
responseType: 'blob',
|
|
162
|
+
fileName: '事件分析',
|
|
163
|
+
getResponse: true
|
|
164
|
+
}).then(function () {
|
|
165
|
+
message.success('下载成功!');
|
|
166
|
+
});
|
|
167
|
+
};
|
|
168
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
169
|
+
className: classPrefix
|
|
170
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
171
|
+
className: "".concat(classPrefix, "-table-header")
|
|
172
|
+
}, /*#__PURE__*/React.createElement("span", null, "\u6307\u6807\u8BE6\u60C5"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
|
|
173
|
+
onClick: seeSql
|
|
174
|
+
}, "\u67E5\u770BSQL"), /*#__PURE__*/React.createElement("div", {
|
|
175
|
+
onClick: download
|
|
176
|
+
}, /*#__PURE__*/React.createElement(IconFont, {
|
|
177
|
+
type: "xiazai1"
|
|
178
|
+
}), "\u4E0B\u8F7D\u6570\u636E"))), /*#__PURE__*/React.createElement(BizTable, {
|
|
179
|
+
total: searchTable.length,
|
|
180
|
+
columns: columns,
|
|
181
|
+
dataSource: tableData,
|
|
182
|
+
rowKey: "id",
|
|
183
|
+
scroll: {
|
|
184
|
+
x: true
|
|
185
|
+
},
|
|
186
|
+
onChange: onChangeTable
|
|
187
|
+
}), /*#__PURE__*/React.createElement(Modal, {
|
|
188
|
+
open: sqlModal,
|
|
189
|
+
wrapClassName: "event-table-sql-modal",
|
|
190
|
+
okText: "\u786E\u5B9A",
|
|
191
|
+
cancelText: "\u53D6\u6D88",
|
|
192
|
+
closeIcon: /*#__PURE__*/React.createElement(IconFont, {
|
|
193
|
+
type: "qingchu"
|
|
194
|
+
}),
|
|
195
|
+
title: "\u67E5\u770BSQL",
|
|
196
|
+
className: "".concat(classPrefix, "-share-panel"),
|
|
197
|
+
onCancel: function onCancel() {
|
|
198
|
+
return setSqlModal(false);
|
|
199
|
+
},
|
|
200
|
+
onOk: function onOk() {
|
|
201
|
+
return setSqlModal(false);
|
|
202
|
+
},
|
|
203
|
+
maskClosable: false
|
|
204
|
+
}, /*#__PURE__*/React.createElement(Highlight, {
|
|
205
|
+
languageName: "sql",
|
|
206
|
+
style: {
|
|
207
|
+
whiteSpace: 'pre-wrap',
|
|
208
|
+
background: 'red'
|
|
209
|
+
}
|
|
210
|
+
}, sqlText), /*#__PURE__*/React.createElement(CopyToClipboard, {
|
|
211
|
+
text: JSON.stringify(sqlText, null, 2),
|
|
212
|
+
onCopy: function onCopy() {
|
|
213
|
+
return message.success('复制成功!');
|
|
214
|
+
}
|
|
215
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
216
|
+
className: "copy-box"
|
|
217
|
+
}, /*#__PURE__*/React.createElement(IconFont, {
|
|
218
|
+
type: "fuzhi1"
|
|
219
|
+
}), "\u590D\u5236\u4EE3\u7801"))));
|
|
220
|
+
};
|
|
221
|
+
export default EventTable;
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
.mi-table {
|
|
2
|
+
margin-top: 16px;
|
|
3
|
+
&-table-header {
|
|
4
|
+
display: flex;
|
|
5
|
+
justify-content: space-between;
|
|
6
|
+
height: 50px;
|
|
7
|
+
padding: 0 12px;
|
|
8
|
+
line-height: 50px;
|
|
9
|
+
background: #fafafb;
|
|
10
|
+
border-radius: 8px 8px 0 0;
|
|
11
|
+
> :nth-child(2) {
|
|
12
|
+
display: flex;
|
|
13
|
+
margin-top: 9px;
|
|
14
|
+
> :nth-child(1) {
|
|
15
|
+
margin-right: 16px;
|
|
16
|
+
}
|
|
17
|
+
div {
|
|
18
|
+
height: 32px;
|
|
19
|
+
padding: 0 16px;
|
|
20
|
+
line-height: 32px;
|
|
21
|
+
background: #fff;
|
|
22
|
+
border: 1px solid #f2f3f4;
|
|
23
|
+
cursor: pointer;
|
|
24
|
+
.xiazai1 {
|
|
25
|
+
margin-right: 4px;
|
|
26
|
+
font-size: 18px !important;
|
|
27
|
+
vertical-align: -2px;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
.ant-table {
|
|
33
|
+
border-radius: 0 0 8px 8px;
|
|
34
|
+
}
|
|
35
|
+
.ant-table-cell-with-append {
|
|
36
|
+
padding-left: 20px;
|
|
37
|
+
.ant-table-row-expand-icon {
|
|
38
|
+
position: absolute;
|
|
39
|
+
left: 0;
|
|
40
|
+
margin-top: 0;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
.event-table-sql-modal {
|
|
45
|
+
.ant-modal-header {
|
|
46
|
+
position: relative;
|
|
47
|
+
z-index: 1;
|
|
48
|
+
height: 82px;
|
|
49
|
+
background: transparent;
|
|
50
|
+
}
|
|
51
|
+
.ant-modal-body {
|
|
52
|
+
padding: 0 24px 18px 24px;
|
|
53
|
+
}
|
|
54
|
+
.ant-modal-close-x {
|
|
55
|
+
margin-top: 13px;
|
|
56
|
+
margin-right: 8px;
|
|
57
|
+
}
|
|
58
|
+
img {
|
|
59
|
+
width: 100%;
|
|
60
|
+
}
|
|
61
|
+
.qingchu {
|
|
62
|
+
font-weight: 500;
|
|
63
|
+
font-size: 22px !important;
|
|
64
|
+
}
|
|
65
|
+
.modal-bg {
|
|
66
|
+
position: absolute;
|
|
67
|
+
top: 0;
|
|
68
|
+
left: 0;
|
|
69
|
+
width: 100%;
|
|
70
|
+
height: auto;
|
|
71
|
+
}
|
|
72
|
+
.hljs {
|
|
73
|
+
padding: 16px;
|
|
74
|
+
background: #fafafb;
|
|
75
|
+
}
|
|
76
|
+
.copy-box {
|
|
77
|
+
position: absolute;
|
|
78
|
+
top: 98px;
|
|
79
|
+
right: 40px;
|
|
80
|
+
padding: 0 8px;
|
|
81
|
+
background: #f2f3f4;
|
|
82
|
+
border-radius: 4px;
|
|
83
|
+
.fuzhi1 {
|
|
84
|
+
margin-right: 8px;
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { ResponseDataProps, SearchValue } from '../../types';
|
|
2
|
+
export interface EventTableProps {
|
|
3
|
+
dataSource: ResponseDataProps;
|
|
4
|
+
searchData: SearchValue;
|
|
5
|
+
showList: string[];
|
|
6
|
+
isOverview?: boolean;
|
|
7
|
+
changeShowByName: (name: string) => void;
|
|
8
|
+
changeShow: (names: string[]) => void;
|
|
9
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
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; }
|
|
2
|
+
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; }
|
|
3
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
4
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
5
|
+
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."); }
|
|
6
|
+
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); }
|
|
7
|
+
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; }
|
|
8
|
+
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; }
|
|
9
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
10
|
+
import { Button } from 'antd';
|
|
11
|
+
import React, { useContext, useState } from 'react';
|
|
12
|
+
import { BizAddToPanel, BizAddToScene, BizGlobalDataContext } from '@zgfe/business-lib';
|
|
13
|
+
import './styles/index.less';
|
|
14
|
+
import { EventContext } from '../../types';
|
|
15
|
+
import { chartTypes, platformOption } from '../../constants/fields';
|
|
16
|
+
var classPrefix = 'modules-event-topbar';
|
|
17
|
+
var TopBar = function TopBar(props) {
|
|
18
|
+
var _useContext = useContext(EventContext),
|
|
19
|
+
panelId = _useContext.panelId,
|
|
20
|
+
afterEditTarget = _useContext.afterEditTarget;
|
|
21
|
+
var _useState = useState(false),
|
|
22
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
23
|
+
showPanel = _useState2[0],
|
|
24
|
+
setShowPanel = _useState2[1];
|
|
25
|
+
var _useState3 = useState(false),
|
|
26
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
27
|
+
showScene = _useState4[0],
|
|
28
|
+
setShowScene = _useState4[1];
|
|
29
|
+
var _useContext2 = useContext(BizGlobalDataContext),
|
|
30
|
+
currentApp = _useContext2.currentApp;
|
|
31
|
+
var searchData = props.searchData,
|
|
32
|
+
platformChange = props.platformChange;
|
|
33
|
+
console.log(123123, searchData);
|
|
34
|
+
var _useState5 = useState(),
|
|
35
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
36
|
+
panelType = _useState6[0],
|
|
37
|
+
setPanelType = _useState6[1];
|
|
38
|
+
var closeHandle = function closeHandle(type) {
|
|
39
|
+
if (type === 'panel') {
|
|
40
|
+
setPanelType(undefined);
|
|
41
|
+
setShowPanel(false);
|
|
42
|
+
} else {
|
|
43
|
+
setShowScene(false);
|
|
44
|
+
}
|
|
45
|
+
};
|
|
46
|
+
var _onOk = function onOk(type, val) {
|
|
47
|
+
closeHandle(type);
|
|
48
|
+
if (afterEditTarget) afterEditTarget(type, val);
|
|
49
|
+
};
|
|
50
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
51
|
+
className: classPrefix
|
|
52
|
+
}, !panelId && /*#__PURE__*/React.createElement("div", {
|
|
53
|
+
className: "".concat(classPrefix, "-panel")
|
|
54
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
55
|
+
onClick: function onClick() {
|
|
56
|
+
setShowPanel(true);
|
|
57
|
+
}
|
|
58
|
+
}, "\u6DFB\u52A0\u5230\u770B\u677F"), showPanel && /*#__PURE__*/React.createElement(BizAddToPanel, {
|
|
59
|
+
type: panelType,
|
|
60
|
+
params: _objectSpread({
|
|
61
|
+
app_id: currentApp === null || currentApp === void 0 ? void 0 : currentApp.appId,
|
|
62
|
+
module: 'event'
|
|
63
|
+
}, searchData),
|
|
64
|
+
styleOptions: chartTypes,
|
|
65
|
+
onCancel: function onCancel() {
|
|
66
|
+
return closeHandle('panel');
|
|
67
|
+
},
|
|
68
|
+
onOk: function onOk(data) {
|
|
69
|
+
return _onOk('panel', data);
|
|
70
|
+
}
|
|
71
|
+
})), !panelId && /*#__PURE__*/React.createElement("div", {
|
|
72
|
+
className: "".concat(classPrefix, "-scene")
|
|
73
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
74
|
+
onClick: function onClick() {
|
|
75
|
+
setShowScene(true);
|
|
76
|
+
}
|
|
77
|
+
}, "\u6DFB\u52A0\u5E38\u7528\u573A\u666F"), showScene && /*#__PURE__*/React.createElement(BizAddToScene, {
|
|
78
|
+
params: _objectSpread({
|
|
79
|
+
app_id: currentApp === null || currentApp === void 0 ? void 0 : currentApp.appId,
|
|
80
|
+
module: 'event'
|
|
81
|
+
}, searchData),
|
|
82
|
+
onOk: function onOk(data) {
|
|
83
|
+
return _onOk('scene', data);
|
|
84
|
+
},
|
|
85
|
+
onCancel: function onCancel() {
|
|
86
|
+
return closeHandle('scene');
|
|
87
|
+
}
|
|
88
|
+
})), /*#__PURE__*/React.createElement(Button, {
|
|
89
|
+
className: "".concat(classPrefix, "-earlywarning"),
|
|
90
|
+
type: "primary",
|
|
91
|
+
onClick: function onClick() {
|
|
92
|
+
return console.log('设置预警流失');
|
|
93
|
+
}
|
|
94
|
+
}, "\u8BBE\u7F6E\u9884\u8B66\u6D41\u5931"), /*#__PURE__*/React.createElement("div", {
|
|
95
|
+
className: "".concat(classPrefix, "-platform")
|
|
96
|
+
}, platformOption.map(function (item) {
|
|
97
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
98
|
+
key: item.key,
|
|
99
|
+
onClick: function onClick() {
|
|
100
|
+
return platformChange(item.key);
|
|
101
|
+
}
|
|
102
|
+
}, item.value);
|
|
103
|
+
})));
|
|
104
|
+
};
|
|
105
|
+
export default TopBar;
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
@import '~@zgfe/business-lib/es/assets/styles/inner.less';
|
|
2
|
+
|
|
3
|
+
.modules-event-topbar {
|
|
4
|
+
display: flex;
|
|
5
|
+
justify-content: flex-end;
|
|
6
|
+
margin: 8px 0;
|
|
7
|
+
padding-right: 24px;
|
|
8
|
+
&-panel {
|
|
9
|
+
margin-right: 16px;
|
|
10
|
+
}
|
|
11
|
+
&-scene {
|
|
12
|
+
margin-right: 16px;
|
|
13
|
+
}
|
|
14
|
+
&-earlywarning {
|
|
15
|
+
margin-right: 16px;
|
|
16
|
+
}
|
|
17
|
+
&-platform {
|
|
18
|
+
display: flex;
|
|
19
|
+
height: 32px;
|
|
20
|
+
line-height: 32px;
|
|
21
|
+
> div {
|
|
22
|
+
position: relative;
|
|
23
|
+
padding: 0 16px;
|
|
24
|
+
background: #fff;
|
|
25
|
+
border: 1px solid #ecedf0;
|
|
26
|
+
cursor: pointer;
|
|
27
|
+
}
|
|
28
|
+
> div:hover {
|
|
29
|
+
z-index: 1;
|
|
30
|
+
color: #165dff;
|
|
31
|
+
background: #e8efff;
|
|
32
|
+
border: 1px solid #165dff;
|
|
33
|
+
}
|
|
34
|
+
> :nth-child(1) {
|
|
35
|
+
border-radius: 4px 0 0 4px;
|
|
36
|
+
}
|
|
37
|
+
> :nth-child(2) {
|
|
38
|
+
margin-left: -1px;
|
|
39
|
+
}
|
|
40
|
+
> :nth-child(3) {
|
|
41
|
+
margin-left: -1px;
|
|
42
|
+
}
|
|
43
|
+
> :nth-child(4) {
|
|
44
|
+
margin-left: -1px;
|
|
45
|
+
border-radius: 0 4px 4px 0;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { IconFont } from '@zgfe/business-lib';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
export var chartTypeOptions = [{
|
|
4
|
+
label: '趋势图',
|
|
5
|
+
value: 'line',
|
|
6
|
+
icon: /*#__PURE__*/React.createElement(IconFont, {
|
|
7
|
+
type: "qushitu1",
|
|
8
|
+
size: 16
|
|
9
|
+
})
|
|
10
|
+
}, {
|
|
11
|
+
label: '汇总图',
|
|
12
|
+
value: 'bar',
|
|
13
|
+
icon: /*#__PURE__*/React.createElement(IconFont, {
|
|
14
|
+
type: "huizongtu",
|
|
15
|
+
size: 16
|
|
16
|
+
})
|
|
17
|
+
}, {
|
|
18
|
+
label: '占比图',
|
|
19
|
+
value: 'pie',
|
|
20
|
+
icon: /*#__PURE__*/React.createElement(IconFont, {
|
|
21
|
+
type: "bingtu",
|
|
22
|
+
size: 16
|
|
23
|
+
})
|
|
24
|
+
}, {
|
|
25
|
+
label: '地图',
|
|
26
|
+
value: 'map',
|
|
27
|
+
icon: /*#__PURE__*/React.createElement(IconFont, {
|
|
28
|
+
type: "ditu",
|
|
29
|
+
size: 16
|
|
30
|
+
})
|
|
31
|
+
}];
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const chartColors: string[];
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export var chartColors = ['#165DFF', '#80E1D9', '#65789B', '#F8BC3B', '#6F66ED', '#66AFED', '#9661BC', '#FF7557', '#4DB273', '#F08BB4', '#CDDBFD', '#CDF3F0', '#CED4DE', '#FCE7B9', '#D1CEFD', '#D3E7F9', '#DFCFEA', '#FFD1C7', '#BBDEC8', '#FFE0ED'];
|