@zgfe/modules-interval 1.0.0-interval.4 → 1.0.0-interval.41
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/dist/esm/assets/business/demo_index.html +164 -26
- package/dist/esm/assets/business/iconfont.css +31 -7
- package/dist/esm/assets/business/iconfont.js +10 -10
- package/dist/esm/assets/business/iconfont.json +49 -7
- package/dist/esm/assets/business/iconfont.ttf +0 -0
- package/dist/esm/assets/business/iconfont.woff +0 -0
- package/dist/esm/assets/business/iconfont.woff2 +0 -0
- package/dist/esm/components/common/index.js +9 -9
- package/dist/esm/components/common/styles/index.less +21 -8
- package/dist/esm/components/eventFilter/index.js +25 -19
- package/dist/esm/components/eventFilter/styles/index.less +2 -5
- package/dist/esm/components/eventFilter/types.d.ts +2 -0
- package/dist/esm/components/renderContent/index.js +10 -11
- package/dist/esm/components/renderContent/styles/index.less +13 -2
- package/dist/esm/components/searchPanel/index.js +8 -3
- package/dist/esm/components/searchPanel/styles/index.less +34 -28
- package/dist/esm/components/table/index.js +13 -87
- package/dist/esm/components/table/styles/index.less +21 -6
- package/dist/esm/components/topBar/index.js +33 -20
- package/dist/esm/components/topBar/styles/index.less +2 -1
- package/dist/esm/components/topBar/types.d.ts +3 -1
- package/dist/esm/constants/apis.js +1 -1
- package/dist/esm/constants/fields.d.ts +6 -78
- package/dist/esm/constants/fields.js +7 -47
- package/dist/esm/index.d.ts +2 -2
- package/dist/esm/index.js +2 -2
- package/dist/esm/modules/chart/customTooltip.js +9 -3
- package/dist/esm/modules/chart/demo/data.d.ts +34 -71
- package/dist/esm/modules/chart/demo/data.js +36 -488
- package/dist/esm/modules/chart/demo/index.js +8 -37
- package/dist/esm/modules/chart/index.d.ts +2 -2
- package/dist/esm/modules/chart/index.js +39 -30
- package/dist/esm/modules/chart/index.less +28 -18
- package/dist/esm/modules/chart/intervalChart.js +12 -5
- package/dist/esm/modules/chart/types.d.ts +1 -1
- package/dist/esm/modules/content/index.js +37 -22
- package/dist/esm/modules/content/styles/index.less +1 -1
- package/dist/esm/modules/content/utils.d.ts +16 -18
- package/dist/esm/modules/content/utils.js +32 -21
- package/dist/esm/modules/home/index.js +1 -1
- package/dist/esm/modules/home/styles/index.less +10 -3
- package/dist/esm/modules/topPanel/index.js +122 -84
- package/dist/esm/modules/topPanel/styles/index.less +135 -16
- package/dist/esm/modules/topPanel/types.d.ts +4 -1
- package/dist/esm/style/image/empty.png +0 -0
- package/dist/esm/style/index.less +8 -1
- package/dist/esm/types.d.ts +28 -4
- package/dist/esm/utils/formData.d.ts +27 -6
- package/dist/esm/utils/formData.js +65 -29
- package/package.json +2 -2
- package/dist/esm/modules/chart/demo/panel.d.ts +0 -3
- package/dist/esm/modules/chart/demo/panel.js +0 -30
- package/dist/esm/utils/base64.d.ts +0 -29
- package/dist/esm/utils/base64.js +0 -132
|
@@ -5,6 +5,55 @@
|
|
|
5
5
|
"css_prefix_text": "",
|
|
6
6
|
"description": "诸葛业务平台",
|
|
7
7
|
"glyphs": [
|
|
8
|
+
{
|
|
9
|
+
"icon_id": "37343412",
|
|
10
|
+
"name": "盒须图",
|
|
11
|
+
"font_class": "hexutu",
|
|
12
|
+
"unicode": "e796",
|
|
13
|
+
"unicode_decimal": 59286
|
|
14
|
+
},
|
|
15
|
+
{
|
|
16
|
+
"icon_id": "37316029",
|
|
17
|
+
"name": "全屏展示",
|
|
18
|
+
"font_class": "quanpingzhanshi",
|
|
19
|
+
"unicode": "e6a3",
|
|
20
|
+
"unicode_decimal": 59043
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"icon_id": "37316033",
|
|
24
|
+
"name": "流向图",
|
|
25
|
+
"font_class": "liuxiangtu",
|
|
26
|
+
"unicode": "e78f",
|
|
27
|
+
"unicode_decimal": 59279
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
"icon_id": "37316032",
|
|
31
|
+
"name": "旭日图",
|
|
32
|
+
"font_class": "xuritu",
|
|
33
|
+
"unicode": "e790",
|
|
34
|
+
"unicode_decimal": 59280
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"icon_id": "37316031",
|
|
38
|
+
"name": "桑基图",
|
|
39
|
+
"font_class": "sangjitu",
|
|
40
|
+
"unicode": "e791",
|
|
41
|
+
"unicode_decimal": 59281
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"icon_id": "37316030",
|
|
45
|
+
"name": "树形图",
|
|
46
|
+
"font_class": "shuxingtu",
|
|
47
|
+
"unicode": "e792",
|
|
48
|
+
"unicode_decimal": 59282
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
"icon_id": "37316028",
|
|
52
|
+
"name": "全屏收起",
|
|
53
|
+
"font_class": "quanpingshouqi",
|
|
54
|
+
"unicode": "e793",
|
|
55
|
+
"unicode_decimal": 59283
|
|
56
|
+
},
|
|
8
57
|
{
|
|
9
58
|
"icon_id": "36957204",
|
|
10
59
|
"name": "对勾",
|
|
@@ -656,13 +705,6 @@
|
|
|
656
705
|
"unicode": "e6a5",
|
|
657
706
|
"unicode_decimal": 59045
|
|
658
707
|
},
|
|
659
|
-
{
|
|
660
|
-
"icon_id": "31389407",
|
|
661
|
-
"name": "全屏展示",
|
|
662
|
-
"font_class": "quanpingzhanshi",
|
|
663
|
-
"unicode": "e6a3",
|
|
664
|
-
"unicode_decimal": 59043
|
|
665
|
-
},
|
|
666
708
|
{
|
|
667
709
|
"icon_id": "31360676",
|
|
668
710
|
"name": "收藏",
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import "./styles/index.less";
|
|
3
|
-
|
|
3
|
+
import { BizLoading } from '@zgfe/business-lib';
|
|
4
|
+
import { Empty } from 'antd';
|
|
5
|
+
var classPrefix = 'mi-common-interval';
|
|
4
6
|
|
|
5
7
|
// 加载按钮
|
|
6
8
|
export var MiSpin = function MiSpin() {
|
|
7
|
-
return /*#__PURE__*/React.createElement(
|
|
8
|
-
className: "
|
|
9
|
-
});
|
|
9
|
+
return /*#__PURE__*/React.createElement(BizLoading, {
|
|
10
|
+
className: "mi-common-interval-content"
|
|
11
|
+
}, /*#__PURE__*/React.createElement("div", null));
|
|
10
12
|
};
|
|
11
13
|
|
|
12
14
|
// 无数据状态
|
|
13
15
|
export var MiNone = function MiNone(props) {
|
|
14
16
|
return /*#__PURE__*/React.createElement("div", {
|
|
15
17
|
className: "".concat(classPrefix, "-none-container")
|
|
16
|
-
}, /*#__PURE__*/React.createElement(
|
|
17
|
-
|
|
18
|
-
})
|
|
19
|
-
className: "".concat(classPrefix, "-none-text")
|
|
20
|
-
}, " ", props.label));
|
|
18
|
+
}, /*#__PURE__*/React.createElement(Empty, {
|
|
19
|
+
image: Empty.PRESENTED_IMAGE_SIMPLE
|
|
20
|
+
}));
|
|
21
21
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
@import '~@zgfe/business-lib/es/assets/styles/inner.less';
|
|
2
2
|
|
|
3
|
-
.mi-common {
|
|
3
|
+
.mi-common-interval {
|
|
4
4
|
&-loading-icon {
|
|
5
5
|
z-index: 1000;
|
|
6
6
|
display: inline-block;
|
|
@@ -11,17 +11,30 @@
|
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
&-none-text {
|
|
14
|
-
color:
|
|
15
|
-
font-size:
|
|
14
|
+
color: #354354;
|
|
15
|
+
font-size: 14px;
|
|
16
16
|
}
|
|
17
17
|
|
|
18
|
-
&-none {
|
|
19
|
-
width:
|
|
20
|
-
height:
|
|
21
|
-
background: url('../../../style/image/
|
|
18
|
+
&-none-empty {
|
|
19
|
+
width: 88px;
|
|
20
|
+
height: 88px;
|
|
21
|
+
background-image: url('../../../style/image/empty.png');
|
|
22
|
+
background-repeat: no-repeat;
|
|
23
|
+
background-size: cover;
|
|
22
24
|
}
|
|
23
25
|
|
|
24
26
|
&-none-container {
|
|
25
|
-
|
|
27
|
+
display: flex;
|
|
28
|
+
flex-direction: column;
|
|
29
|
+
align-items: center;
|
|
26
30
|
}
|
|
27
31
|
}
|
|
32
|
+
.mi-common-interval-content {
|
|
33
|
+
width: 100%;
|
|
34
|
+
.ant-spin-text {
|
|
35
|
+
color: #ccc;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
.ant-spin-nested-loading {
|
|
39
|
+
width: 100%;
|
|
40
|
+
}
|
|
@@ -10,12 +10,12 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
|
|
|
10
10
|
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; }
|
|
11
11
|
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; } }
|
|
12
12
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
13
|
-
import { Switch, Tooltip } from 'antd';
|
|
13
|
+
import { Switch, Tooltip, message } from 'antd';
|
|
14
14
|
import React, { useEffect, useRef, useState } from 'react';
|
|
15
15
|
import { BizEventSelector, IconFont, BizAttrConditionGroup } from '@zgfe/business-lib';
|
|
16
16
|
import "./styles/index.less";
|
|
17
17
|
import _ from 'lodash';
|
|
18
|
-
var classPrefix = '
|
|
18
|
+
var classPrefix = 'interval-box';
|
|
19
19
|
var EventFilter = function EventFilter(props) {
|
|
20
20
|
// 筛选条件个数
|
|
21
21
|
var _useState = useState(0),
|
|
@@ -31,8 +31,8 @@ var EventFilter = function EventFilter(props) {
|
|
|
31
31
|
var conditionRef = useRef(null);
|
|
32
32
|
// 当前选中的事件
|
|
33
33
|
var _useState5 = useState({
|
|
34
|
-
id:
|
|
35
|
-
name: '
|
|
34
|
+
id: null,
|
|
35
|
+
name: ''
|
|
36
36
|
}),
|
|
37
37
|
_useState6 = _slicedToArray(_useState5, 2),
|
|
38
38
|
event = _useState6[0],
|
|
@@ -72,6 +72,9 @@ var EventFilter = function EventFilter(props) {
|
|
|
72
72
|
if (_data.filters) {
|
|
73
73
|
setFilter(_data.filters);
|
|
74
74
|
}
|
|
75
|
+
if (_data.relevancy) {
|
|
76
|
+
setRelevancy(true);
|
|
77
|
+
}
|
|
75
78
|
if (_data.dimension) {
|
|
76
79
|
setBizAttributeSelectorValue(_objectSpread(_objectSpread({}, _data.dimension), {}, {
|
|
77
80
|
key: _data.dimension.propCategory === 'eventProp' ? _data.dimension.value : _data.dimension.propCategory + '-' + _data.dimension.value
|
|
@@ -82,31 +85,30 @@ var EventFilter = function EventFilter(props) {
|
|
|
82
85
|
|
|
83
86
|
// 添加筛选
|
|
84
87
|
var onAdd = function onAdd() {
|
|
88
|
+
if (!eventOverview) {
|
|
89
|
+
message.error('请先选择目标事件');
|
|
90
|
+
return;
|
|
91
|
+
}
|
|
85
92
|
if (event.id === -1) {
|
|
86
93
|
return;
|
|
87
94
|
}
|
|
88
95
|
// 最多可添加10条属性筛选
|
|
89
96
|
if (count >= 10) {
|
|
97
|
+
message.error('最多可添加 10 条属性筛选');
|
|
90
98
|
return;
|
|
91
99
|
}
|
|
92
100
|
setIsAdd(true);
|
|
93
101
|
setTimeout(function () {
|
|
94
102
|
conditionRef.current.add();
|
|
95
|
-
console.log(333331111, conditionRef, conditionRef.current);
|
|
96
103
|
}, 0);
|
|
97
104
|
};
|
|
98
105
|
|
|
99
106
|
// 筛选条件改变
|
|
100
107
|
var onChangeFilters = function onChangeFilters(data) {
|
|
101
|
-
|
|
102
|
-
setFilter(data);
|
|
103
|
-
} else {
|
|
104
|
-
setFilter(undefined);
|
|
105
|
-
setIsAdd(false);
|
|
106
|
-
}
|
|
108
|
+
setFilter(data);
|
|
107
109
|
};
|
|
108
110
|
var onChangeEvent = function onChangeEvent(event) {
|
|
109
|
-
if (event && event.event && event.event.id ===
|
|
111
|
+
if (event && event.event && event.event.id === null) {
|
|
110
112
|
setEventOverview(false);
|
|
111
113
|
} else {
|
|
112
114
|
setEventOverview(true);
|
|
@@ -143,7 +145,7 @@ var EventFilter = function EventFilter(props) {
|
|
|
143
145
|
return /*#__PURE__*/React.createElement("div", {
|
|
144
146
|
className: classPrefix
|
|
145
147
|
}, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(BizEventSelector, {
|
|
146
|
-
showAllEvent:
|
|
148
|
+
showAllEvent: false,
|
|
147
149
|
showBuiltInTarget: false,
|
|
148
150
|
popupContainer: false,
|
|
149
151
|
defaultSelectAble: false,
|
|
@@ -152,25 +154,29 @@ var EventFilter = function EventFilter(props) {
|
|
|
152
154
|
},
|
|
153
155
|
onChange: onChangeEvent,
|
|
154
156
|
placeholder: "\u8BF7\u9009\u62E9\u4E8B\u4EF6"
|
|
155
|
-
}),
|
|
157
|
+
}), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
|
|
156
158
|
placement: "top",
|
|
157
|
-
title: '添加属性筛选'
|
|
159
|
+
title: !eventOverview ? '请先选择目标事件' : count < 10 ? '添加属性筛选' : '最多可添加 10 条属性筛选'
|
|
158
160
|
}, /*#__PURE__*/React.createElement(IconFont, {
|
|
159
|
-
className: "".concat(count >= 10 || event.id === -1 ? 'disable' : ''),
|
|
161
|
+
className: "".concat(count >= 10 || event.id === -1 || !eventOverview ? 'disable' : ''),
|
|
160
162
|
type: "shaixuan",
|
|
161
163
|
onClick: function onClick() {
|
|
162
164
|
return onAdd();
|
|
163
165
|
}
|
|
164
|
-
}))), props !== null && props !== void 0 && props.relevancy
|
|
166
|
+
}))), props !== null && props !== void 0 && props.relevancy ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
|
|
167
|
+
placement: "top",
|
|
168
|
+
title: props.relevancyFl ? '请选择开始和结束事件' : ''
|
|
169
|
+
}, /*#__PURE__*/React.createElement(Switch, {
|
|
165
170
|
size: "default",
|
|
166
171
|
style: {
|
|
167
172
|
marginLeft: 24
|
|
168
173
|
},
|
|
169
|
-
checked: relevancy,
|
|
174
|
+
checked: relevancy && !props.relevancyFl,
|
|
175
|
+
disabled: props.relevancyFl,
|
|
170
176
|
onChange: function onChange(checked) {
|
|
171
177
|
return setRelevancy(checked);
|
|
172
178
|
}
|
|
173
|
-
}), /*#__PURE__*/React.createElement("span", {
|
|
179
|
+
})), /*#__PURE__*/React.createElement("span", {
|
|
174
180
|
className: "switch-title"
|
|
175
181
|
}, "\u8BBE\u7F6E\u5173\u8054\u5C5E\u6027")) : ''), (filter || isAdd) && /*#__PURE__*/React.createElement("div", {
|
|
176
182
|
className: "".concat(count > 0 ? 'attr-box-show' : '', " top")
|
|
@@ -1,12 +1,9 @@
|
|
|
1
|
-
.
|
|
1
|
+
.interval-box {
|
|
2
2
|
> :nth-child(1) {
|
|
3
|
-
display: flex;
|
|
4
3
|
display: flex;
|
|
5
4
|
gap: 16px;
|
|
6
5
|
align-items: center;
|
|
7
|
-
margin-bottom:
|
|
8
|
-
margin-bottom: 12px;
|
|
9
|
-
|
|
6
|
+
margin-bottom: 0 !important;
|
|
10
7
|
.biz-event-select,
|
|
11
8
|
.biz-attr-select {
|
|
12
9
|
width: 208px;
|
|
@@ -8,10 +8,10 @@ import { Spin } from 'antd';
|
|
|
8
8
|
import React, { useEffect, useState } from 'react';
|
|
9
9
|
import { MiNone, MiSpin } from '..';
|
|
10
10
|
import "./styles/index.less";
|
|
11
|
-
import
|
|
12
|
-
var classPrefix = 'render-content';
|
|
11
|
+
import IntervalEventChart from "../../modules/chart";
|
|
12
|
+
var classPrefix = 'render-content-interval';
|
|
13
13
|
var ContentPanel = function ContentPanel(props) {
|
|
14
|
-
var _eventData$
|
|
14
|
+
var _eventData$appData, _eventData$appData$se;
|
|
15
15
|
var loading = props.loading,
|
|
16
16
|
eventData = props.eventData,
|
|
17
17
|
searchData = props.searchData;
|
|
@@ -41,16 +41,15 @@ var ContentPanel = function ContentPanel(props) {
|
|
|
41
41
|
className: classPrefix
|
|
42
42
|
}, /*#__PURE__*/React.createElement("div", {
|
|
43
43
|
className: "".concat(classPrefix, "-chart-container")
|
|
44
|
-
}, eventData ? /*#__PURE__*/React.createElement(
|
|
45
|
-
|
|
46
|
-
params: searchData
|
|
47
|
-
}) : /*#__PURE__*/React.createElement(MiNone, {
|
|
48
|
-
label: "\u6682\u65E0\u6570\u636E"
|
|
49
|
-
})), eventData && (_eventData$app_data = eventData.app_data) !== null && _eventData$app_data !== void 0 && (_eventData$app_data$s = _eventData$app_data.series) !== null && _eventData$app_data$s !== void 0 && _eventData$app_data$s.length ? /*#__PURE__*/React.createElement(EventChart, {
|
|
50
|
-
type: "grid",
|
|
44
|
+
}, eventData && (_eventData$appData = eventData.appData) !== null && _eventData$appData !== void 0 && (_eventData$appData$se = _eventData$appData.series) !== null && _eventData$appData$se !== void 0 && _eventData$appData$se.length ? /*#__PURE__*/React.createElement(IntervalEventChart, {
|
|
45
|
+
type: "boxplot",
|
|
51
46
|
dataSource: eventData,
|
|
52
47
|
params: searchData,
|
|
53
48
|
onChangeShow: onChangeShow
|
|
54
|
-
}) :
|
|
49
|
+
}) : /*#__PURE__*/React.createElement("div", {
|
|
50
|
+
className: "".concat(classPrefix, "-MiNone")
|
|
51
|
+
}, /*#__PURE__*/React.createElement(MiNone, {
|
|
52
|
+
label: !eventData ? '请选择条件进行查询' : '暂无数据'
|
|
53
|
+
}))));
|
|
55
54
|
};
|
|
56
55
|
export default ContentPanel;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
.render-content {
|
|
1
|
+
.render-content-interval {
|
|
2
2
|
&-chart-container {
|
|
3
3
|
display: flex;
|
|
4
4
|
flex-direction: column;
|
|
@@ -13,10 +13,21 @@
|
|
|
13
13
|
}
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
-
&-
|
|
16
|
+
&-MiNone {
|
|
17
17
|
display: flex;
|
|
18
18
|
align-items: center;
|
|
19
19
|
justify-content: center;
|
|
20
|
+
width: 100%;
|
|
21
|
+
height: 368px;
|
|
22
|
+
padding: 24px 16px;
|
|
23
|
+
border: 1px solid #ecedf0;
|
|
24
|
+
border-radius: 8px;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
&-spin-container {
|
|
28
|
+
display: flex !important;
|
|
29
|
+
align-items: center;
|
|
30
|
+
justify-content: center;
|
|
20
31
|
min-height: 300px;
|
|
21
32
|
}
|
|
22
33
|
}
|
|
@@ -16,7 +16,7 @@ import { chartTypeOptions, getInitDate } from "../../constants";
|
|
|
16
16
|
import { EventContext } from "../../types";
|
|
17
17
|
import "./styles/index.less";
|
|
18
18
|
import { extractNames } from "../../utils/formData";
|
|
19
|
-
var classPrefix = 'search-panel';
|
|
19
|
+
var classPrefix = 'search-panel-interval';
|
|
20
20
|
var SearchPanel = function SearchPanel(props) {
|
|
21
21
|
var _useContext = useContext(EventContext),
|
|
22
22
|
includeToday = _useContext.includeToday;
|
|
@@ -106,11 +106,16 @@ var SearchPanel = function SearchPanel(props) {
|
|
|
106
106
|
}
|
|
107
107
|
}, /*#__PURE__*/React.createElement(BizDatePicker, {
|
|
108
108
|
dateTypeList: ['day', 'week', 'month'],
|
|
109
|
-
|
|
110
|
-
|
|
109
|
+
value: time,
|
|
110
|
+
mode: "simple",
|
|
111
|
+
includeToday: true,
|
|
112
|
+
onChange: onChangeTime,
|
|
113
|
+
selectRange: 365
|
|
111
114
|
}), /*#__PURE__*/React.createElement(BizSelect, {
|
|
112
115
|
multiple: true,
|
|
116
|
+
disable: displaySetupList.length === 0,
|
|
113
117
|
onChange: onDimensionChange,
|
|
118
|
+
overlayClassName: "interval-select-overlay",
|
|
114
119
|
className: "".concat(classPrefix, "-select"),
|
|
115
120
|
placeholder: "\u8BF7\u9009\u62E9\u663E\u793A\u8BBE\u7F6E",
|
|
116
121
|
enableSearch: true,
|
|
@@ -1,10 +1,14 @@
|
|
|
1
|
-
.search-panel {
|
|
1
|
+
.search-panel-interval {
|
|
2
2
|
display: flex;
|
|
3
3
|
align-items: center;
|
|
4
4
|
justify-content: space-between;
|
|
5
5
|
height: 32px;
|
|
6
6
|
margin-bottom: 24px;
|
|
7
7
|
|
|
8
|
+
.biz-date-picker-wrap-list {
|
|
9
|
+
font-size: 14px;
|
|
10
|
+
}
|
|
11
|
+
|
|
8
12
|
&-search-right {
|
|
9
13
|
display: flex;
|
|
10
14
|
}
|
|
@@ -21,38 +25,40 @@
|
|
|
21
25
|
}
|
|
22
26
|
}
|
|
23
27
|
|
|
24
|
-
.
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
+
.interval-select-overlay {
|
|
29
|
+
.biz-select-option.biz-select-option-multiple:hover:not(.disabled) {
|
|
30
|
+
color: var(--1, #021429);
|
|
31
|
+
background: var(--io-i-1, #e8efff);
|
|
32
|
+
}
|
|
28
33
|
|
|
29
|
-
.biz-select-overlay {
|
|
30
|
-
|
|
31
|
-
}
|
|
34
|
+
.biz-select-overlay {
|
|
35
|
+
padding: 0;
|
|
36
|
+
}
|
|
32
37
|
|
|
33
|
-
.biz-select-list-panel {
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
}
|
|
38
|
+
.biz-select-list-panel {
|
|
39
|
+
display: grid;
|
|
40
|
+
gap: 8px;
|
|
41
|
+
}
|
|
37
42
|
|
|
38
|
-
.biz-select-option {
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
}
|
|
43
|
+
.biz-select-option {
|
|
44
|
+
padding: 0 16px;
|
|
45
|
+
border-radius: 0;
|
|
46
|
+
}
|
|
42
47
|
|
|
43
|
-
.biz-select-option.biz-select-option-multiple.active:not(.disabled) {
|
|
44
|
-
|
|
45
|
-
}
|
|
48
|
+
.biz-select-option.biz-select-option-multiple.active:not(.disabled) {
|
|
49
|
+
color: var(--1, #021429);
|
|
50
|
+
}
|
|
46
51
|
|
|
47
|
-
.biz-select-option.biz-select-option-multiple:hover:not(.disabled) .biz-select-checkbox {
|
|
48
|
-
|
|
49
|
-
}
|
|
52
|
+
.biz-select-option.biz-select-option-multiple:hover:not(.disabled) .biz-select-checkbox {
|
|
53
|
+
color: #ccd0d4;
|
|
54
|
+
}
|
|
50
55
|
|
|
51
|
-
.biz-select-option.biz-select-option-multiple.active:hover:not(.disabled) .biz-select-checkbox {
|
|
52
|
-
|
|
53
|
-
}
|
|
56
|
+
.biz-select-option.biz-select-option-multiple.active:hover:not(.disabled) .biz-select-checkbox {
|
|
57
|
+
color: #165dff;
|
|
58
|
+
}
|
|
54
59
|
|
|
55
|
-
.biz-select-option.biz-select-option-multiple:active:not(.disabled) {
|
|
56
|
-
|
|
57
|
-
|
|
60
|
+
.biz-select-option.biz-select-option-multiple:active:not(.disabled) {
|
|
61
|
+
color: #165dff;
|
|
62
|
+
background: var(--io-i-1, #e8efff);
|
|
63
|
+
}
|
|
58
64
|
}
|
|
@@ -10,19 +10,17 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
|
|
|
10
10
|
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; }
|
|
11
11
|
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; } }
|
|
12
12
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
13
|
-
import { ajax, BizGlobalDataContext, BizTable, IconFont } from '@zgfe/business-lib';
|
|
13
|
+
import { ajax, base64, BizGlobalDataContext, BizTable, IconFont } from '@zgfe/business-lib';
|
|
14
14
|
import React, { useContext, useEffect, useMemo, useState } from 'react';
|
|
15
|
-
// import 'highlight.js/styles/vs.css';
|
|
16
|
-
import base64 from "../../utils/base64";
|
|
17
15
|
import { Apis } from "../../constants";
|
|
18
16
|
import { message } from 'antd';
|
|
19
17
|
import { formTableData, getColumns } from "../../utils/formData";
|
|
20
18
|
import "./styles/index.less";
|
|
21
|
-
import {
|
|
19
|
+
import { searchDataParams } from "../../modules/content/utils";
|
|
22
20
|
import { EventContext } from "../../types";
|
|
23
|
-
var classPrefix = 'mi-table';
|
|
21
|
+
var classPrefix = 'mi-interval-table';
|
|
24
22
|
var EventTable = function EventTable(props) {
|
|
25
|
-
var _dataSource$
|
|
23
|
+
var _dataSource$appData2;
|
|
26
24
|
var dataSource = props.dataSource,
|
|
27
25
|
searchData = props.searchData,
|
|
28
26
|
showList = props.showList;
|
|
@@ -63,111 +61,39 @@ var EventTable = function EventTable(props) {
|
|
|
63
61
|
var sortData = formTableData(dataSource);
|
|
64
62
|
setSearchTable(sortData);
|
|
65
63
|
setSortTable(sortData);
|
|
66
|
-
setTableData(sortData
|
|
64
|
+
setTableData(sortData);
|
|
67
65
|
}, [dataSource]);
|
|
68
66
|
|
|
69
67
|
// 表格column
|
|
70
68
|
var columns = useMemo(function () {
|
|
71
|
-
var _dataSource$
|
|
69
|
+
var _dataSource$appData;
|
|
72
70
|
var _searchData$userGroup = searchData.userGroup,
|
|
73
71
|
userGroup = _searchData$userGroup === void 0 ? [0] : _searchData$userGroup;
|
|
74
|
-
|
|
75
|
-
// // 用户钻取
|
|
76
|
-
// const onClickToDetail = (item: EventProps.ColumnsDataType, time: string, count: number) => {
|
|
77
|
-
// let _time = time.split('|');
|
|
78
|
-
// let groupValue = '';
|
|
79
|
-
// // 有细分属性
|
|
80
|
-
// if (searchData.dimension && item.dimension) {
|
|
81
|
-
// groupValue = item.dimension;
|
|
82
|
-
// } else {
|
|
83
|
-
// // 有事件,无细分属性 || 事件概览
|
|
84
|
-
// eventGroupList?.forEach((group) => {
|
|
85
|
-
// group.eventList?.forEach((event) => {
|
|
86
|
-
// if (event.name === item.name) {
|
|
87
|
-
// groupValue = event.id.toString();
|
|
88
|
-
// }
|
|
89
|
-
// });
|
|
90
|
-
// });
|
|
91
|
-
// }
|
|
92
|
-
|
|
93
|
-
// onUserDrill &&
|
|
94
|
-
// onUserDrill(
|
|
95
|
-
// {
|
|
96
|
-
// appId: currentApp?.appId,
|
|
97
|
-
// platform: currentApp?.platform || 0,
|
|
98
|
-
// count,
|
|
99
|
-
// module: 'event',
|
|
100
|
-
// params: {
|
|
101
|
-
// groupValue,
|
|
102
|
-
// id: searchData.id,
|
|
103
|
-
// userGroup: searchData.userGroup,
|
|
104
|
-
// chartType: searchData.chartType,
|
|
105
|
-
// conditions: searchData.filters?.conditions,
|
|
106
|
-
// dimension: searchData.dimension,
|
|
107
|
-
// dataType: searchData.id ? 'event' : 'overview',
|
|
108
|
-
// time: {
|
|
109
|
-
// ...searchData.time,
|
|
110
|
-
// begin: _time[0],
|
|
111
|
-
// end: _time.length > 1 ? _time[1] : _time[0],
|
|
112
|
-
// },
|
|
113
|
-
// },
|
|
114
|
-
// source: 'EVENT',
|
|
115
|
-
// url: '/zg/web/v2/data/appEventBatch',
|
|
116
|
-
// },
|
|
117
|
-
// {
|
|
118
|
-
// source: 'EVENT',
|
|
119
|
-
// ...defaultSearch,
|
|
120
|
-
// name: panelName,
|
|
121
|
-
// data: searchData,
|
|
122
|
-
// },
|
|
123
|
-
// );
|
|
124
|
-
// };
|
|
125
|
-
var _getColumns = getColumns(eventGroupList, userPropList, eventEnvList, (dataSource === null || dataSource === void 0 ? void 0 : (_dataSource$app_data = dataSource.app_data) === null || _dataSource$app_data === void 0 ? void 0 : _dataSource$app_data.x_axis) || [], userGroup, searchData, showList
|
|
126
|
-
// onClickToDetail,
|
|
127
|
-
);
|
|
128
|
-
|
|
72
|
+
var _getColumns = getColumns(eventGroupList, userPropList, eventEnvList, (dataSource === null || dataSource === void 0 ? void 0 : (_dataSource$appData = dataSource.appData) === null || _dataSource$appData === void 0 ? void 0 : _dataSource$appData.x_axis) || [], dataSource, userGroup, searchData, showList);
|
|
129
73
|
return _getColumns;
|
|
130
|
-
}, [dataSource === null || dataSource === void 0 ? void 0 : (_dataSource$
|
|
74
|
+
}, [dataSource === null || dataSource === void 0 ? void 0 : (_dataSource$appData2 = dataSource.appData) === null || _dataSource$appData2 === void 0 ? void 0 : _dataSource$appData2.x_axis, showList, sortTable, panelName]);
|
|
131
75
|
|
|
132
76
|
// 监听分页变化,如果页码发生变化则调用合并行方法
|
|
133
77
|
var onChangeTable = function onChangeTable(pagination) {
|
|
134
|
-
var startNum = (pagination.current - 1) * pagination.pageSize;
|
|
135
|
-
var endNum = pagination.current * pagination.pageSize;
|
|
136
78
|
setPageData({
|
|
137
79
|
pageSize: pagination.pageSize,
|
|
138
80
|
current: pagination.current
|
|
139
81
|
});
|
|
140
|
-
setTableData(searchTable === null || searchTable === void 0 ? void 0 : searchTable.slice(startNum, endNum));
|
|
141
82
|
};
|
|
142
83
|
|
|
143
84
|
// 下载数据
|
|
144
85
|
var download = function download() {
|
|
145
|
-
var _searchData$userGroup2;
|
|
146
|
-
var seriesNames = [];
|
|
147
|
-
// 有用户群
|
|
148
|
-
if (searchData !== null && searchData !== void 0 && searchData.userGroup && (searchData === null || searchData === void 0 ? void 0 : (_searchData$userGroup2 = searchData.userGroup) === null || _searchData$userGroup2 === void 0 ? void 0 : _searchData$userGroup2.length) > 1) {
|
|
149
|
-
seriesNames.push(base64.encode('用户群'));
|
|
150
|
-
}
|
|
151
|
-
// 有细分属性
|
|
152
|
-
if (searchData !== null && searchData !== void 0 && searchData.dimension) {
|
|
153
|
-
seriesNames.push(base64.encode(getValue(searchData === null || searchData === void 0 ? void 0 : searchData.dimension, eventGroupList, eventEnvList, userPropList).label));
|
|
154
|
-
}
|
|
155
|
-
// 事件(有事件-无细分属性 || 事件概览)
|
|
156
|
-
if (searchData.id && !searchData.dimension || !searchData.id) {
|
|
157
|
-
seriesNames.push(base64.encode('事件'));
|
|
158
|
-
}
|
|
159
86
|
var obj = searchDataParams(searchData);
|
|
160
87
|
var params = _objectSpread(_objectSpread({
|
|
161
|
-
|
|
162
|
-
platform: (currentApp === null || currentApp === void 0 ? void 0 : currentApp.platform) || 0
|
|
88
|
+
appId: currentApp === null || currentApp === void 0 ? void 0 : currentApp.appId
|
|
163
89
|
}, obj), {}, {
|
|
164
90
|
down: {
|
|
165
|
-
fname: base64.encode('间隔分析')
|
|
91
|
+
fname: base64.encode('间隔分析', false)
|
|
166
92
|
}
|
|
167
93
|
});
|
|
168
94
|
ajax(Apis.eventDownloadReport, {
|
|
169
|
-
method: '
|
|
170
|
-
|
|
95
|
+
method: 'post',
|
|
96
|
+
data: params,
|
|
171
97
|
responseType: 'blob',
|
|
172
98
|
fileName: '间隔分析',
|
|
173
99
|
getResponse: true
|
|
@@ -191,7 +117,7 @@ var EventTable = function EventTable(props) {
|
|
|
191
117
|
rowKey: "key",
|
|
192
118
|
scroll: {
|
|
193
119
|
x: 800,
|
|
194
|
-
y:
|
|
120
|
+
y: 550
|
|
195
121
|
},
|
|
196
122
|
onChange: onChangeTable
|
|
197
123
|
}));
|