@zgfe/modules-interval 1.0.23-zhongyuan.1 → 1.0.23-zhongyuan.10
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/components/eventFilter/index.js +6 -5
- package/dist/esm/components/renderContent/styles/index.css +32 -0
- package/dist/esm/components/renderContent/styles/index.less +37 -36
- package/dist/esm/components/searchPanel/index.js +6 -1
- package/dist/esm/components/table/index.js +3 -2
- package/dist/esm/constants/code.d.ts +13 -0
- package/dist/esm/constants/code.js +13 -0
- package/dist/esm/modules/chart/customTooltip.js +5 -3
- package/dist/esm/modules/chart/customTooltip1.d.ts +7 -0
- package/dist/esm/modules/chart/customTooltip1.js +46 -0
- package/dist/esm/modules/chart/index.css +52 -0
- package/dist/esm/modules/chart/index.js +19 -8
- package/dist/esm/modules/chart/index.less +58 -58
- package/dist/esm/modules/chart/intervalChart copy.d.ts +4 -0
- package/dist/esm/modules/chart/intervalChart copy.js +299 -0
- package/dist/esm/modules/chart/intervalChart.js +321 -35
- package/dist/esm/modules/chart/types.d.ts +5 -0
- package/dist/esm/modules/content/index.js +50 -20
- package/dist/esm/modules/content/utils.d.ts +0 -1
- package/dist/esm/modules/content/utils.js +3 -4
- package/dist/esm/modules/home/demo/create.js +5 -3
- package/dist/esm/modules/home/demo/edit.js +132 -34
- package/dist/esm/modules/home/demo/index.js +1 -1
- package/dist/esm/modules/home/demo/scene.js +1 -1
- package/dist/esm/modules/home/index.js +8 -1
- package/dist/esm/modules/home/types.d.ts +0 -1
- package/dist/esm/modules/topPanel/index.js +39 -29
- package/dist/esm/modules/topPanel/styles/index.less +219 -219
- package/dist/esm/modules/topPanel/types.d.ts +1 -0
- package/dist/esm/utils/formData.js +31 -28
- package/package.json +3 -3
|
@@ -4,30 +4,106 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
|
|
|
4
4
|
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; }
|
|
5
5
|
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; } }
|
|
6
6
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
7
|
-
import React, { useEffect, useState } from 'react';
|
|
8
|
-
import ReactECharts from 'echarts-for-react';
|
|
7
|
+
import React, { useEffect, useRef, useState } from 'react';
|
|
9
8
|
import * as echarts from 'echarts';
|
|
10
9
|
import { renderToString } from 'react-dom/server';
|
|
11
10
|
import CustomTooltip from "./customTooltip";
|
|
12
11
|
import { chartColors } from "../../constants";
|
|
13
12
|
import { getRandomColor } from "../../constants/color";
|
|
14
13
|
import { convertDateArray } from "../../utils/formData";
|
|
14
|
+
var _currentAxisBreaks = [{
|
|
15
|
+
start: 5000,
|
|
16
|
+
end: 100000,
|
|
17
|
+
gap: '1.5%'
|
|
18
|
+
}, {
|
|
19
|
+
start: 105000,
|
|
20
|
+
end: 3100000,
|
|
21
|
+
gap: '1.5%'
|
|
22
|
+
}];
|
|
15
23
|
var IntervalChart = function IntervalChart(props) {
|
|
16
24
|
var _useState = useState({}),
|
|
17
25
|
_useState2 = _slicedToArray(_useState, 2),
|
|
18
|
-
|
|
19
|
-
|
|
26
|
+
optionECharts = _useState2[0],
|
|
27
|
+
setOptionECharts = _useState2[1];
|
|
28
|
+
// 获取实例
|
|
29
|
+
var chartRef = useRef(null);
|
|
30
|
+
var _useState3 = useState(null),
|
|
31
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
32
|
+
chartInstance = _useState4[0],
|
|
33
|
+
setChartInstance = _useState4[1]; // echart实列
|
|
34
|
+
useEffect(function () {
|
|
35
|
+
var aDom = echarts.init(chartRef.current);
|
|
36
|
+
setChartInstance(aDom);
|
|
37
|
+
}, []);
|
|
20
38
|
useEffect(function () {
|
|
21
39
|
var _props$showList, _seriesData$series;
|
|
40
|
+
// chartRef && chartRef.current.getEchartsInstance().clear();
|
|
22
41
|
var seriesData = props === null || props === void 0 ? void 0 : (_props$showList = props.showList) === null || _props$showList === void 0 ? void 0 : _props$showList.appData;
|
|
23
42
|
var params = props === null || props === void 0 ? void 0 : props.params;
|
|
24
43
|
var eCharts = {
|
|
25
44
|
tooltip: {
|
|
26
45
|
trigger: 'item',
|
|
46
|
+
// tooltip 跟随鼠标
|
|
47
|
+
// position: function (point, params, dom, rect, size) {
|
|
48
|
+
// return [point[0] + 10, point[1] - 10];
|
|
49
|
+
// },
|
|
50
|
+
// ========== 核心:重写position函数,防止tooltip溢出屏幕 ==========
|
|
51
|
+
position: function position(point, params, dom, rect, size) {
|
|
52
|
+
// 获取tooltip DOM元素的实际宽高(自定义HTML的尺寸)
|
|
53
|
+
var tooltipWidth = dom.offsetWidth || 200; // 默认宽度200px
|
|
54
|
+
var tooltipHeight = dom.offsetHeight || 150; // 默认高度150px
|
|
55
|
+
|
|
56
|
+
// 获取屏幕可视区域的宽高
|
|
57
|
+
var screenWidth = document.documentElement.clientWidth;
|
|
58
|
+
var screenHeight = document.documentElement.clientHeight;
|
|
59
|
+
|
|
60
|
+
// 鼠标当前坐标
|
|
61
|
+
var mouseX = point[0];
|
|
62
|
+
var mouseY = point[1];
|
|
63
|
+
|
|
64
|
+
// 计算tooltip的候选位置(初始:鼠标右侧+10px,鼠标上方-10px)
|
|
65
|
+
var targetX = mouseX + 10;
|
|
66
|
+
var targetY = mouseY - 10;
|
|
67
|
+
|
|
68
|
+
// 1. 右边界检测:如果tooltip超出屏幕右侧,显示在鼠标左侧
|
|
69
|
+
if (targetX + tooltipWidth > screenWidth) {
|
|
70
|
+
targetX = mouseX - tooltipWidth - 10;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
// 2. 左边界检测:如果tooltip超出屏幕左侧,强制显示在屏幕左侧
|
|
74
|
+
if (targetX < 0) {
|
|
75
|
+
targetX = 10;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
// 3. 下边界检测:如果tooltip超出屏幕下方,显示在鼠标下方
|
|
79
|
+
if (targetY + tooltipHeight > screenHeight) {
|
|
80
|
+
targetY = mouseY + 10;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
// 4. 上边界检测:如果tooltip超出屏幕上方,强制显示在屏幕上方
|
|
84
|
+
if (targetY < 0) {
|
|
85
|
+
targetY = 10;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
// 返回最终调整后的位置
|
|
89
|
+
return [targetX, targetY];
|
|
90
|
+
},
|
|
27
91
|
axisPointer: {
|
|
28
92
|
type: 'shadow'
|
|
93
|
+
},
|
|
94
|
+
confine: true,
|
|
95
|
+
// 开启边界限制(ECharts内置,配合自定义position双重保障)
|
|
96
|
+
formatter: function formatter(params) {
|
|
97
|
+
return renderToString( /*#__PURE__*/React.createElement(CustomTooltip, {
|
|
98
|
+
series: undefined,
|
|
99
|
+
payload: params
|
|
100
|
+
}));
|
|
29
101
|
}
|
|
102
|
+
// formatter: (params: any) => {
|
|
103
|
+
// return renderToString(<CustomTooltip1 series={seriesData?.series} payload={params} />);
|
|
104
|
+
// },
|
|
30
105
|
},
|
|
106
|
+
|
|
31
107
|
legend: {
|
|
32
108
|
bottom: 0,
|
|
33
109
|
icon: 'circle',
|
|
@@ -41,7 +117,7 @@ var IntervalChart = function IntervalChart(props) {
|
|
|
41
117
|
top: '10',
|
|
42
118
|
left: '0',
|
|
43
119
|
right: '0',
|
|
44
|
-
bottom: '68px',
|
|
120
|
+
bottom: props.onlyChart ? '0' : '68px',
|
|
45
121
|
containLabel: true
|
|
46
122
|
},
|
|
47
123
|
xAxis: {
|
|
@@ -63,23 +139,40 @@ var IntervalChart = function IntervalChart(props) {
|
|
|
63
139
|
|
|
64
140
|
axisLabel: {
|
|
65
141
|
color: '#67727F' // 设置文字颜色
|
|
142
|
+
},
|
|
143
|
+
|
|
144
|
+
axisPointer: {
|
|
145
|
+
type: 'shadow'
|
|
66
146
|
}
|
|
67
147
|
},
|
|
68
|
-
|
|
69
148
|
yAxis: {
|
|
70
|
-
type: 'value',
|
|
71
|
-
splitLine: {
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
},
|
|
149
|
+
// type: 'value',
|
|
150
|
+
// splitLine: {
|
|
151
|
+
// show: true,
|
|
152
|
+
// lineStyle: {
|
|
153
|
+
// type: 'dashed', // 设置线条类型为虚线
|
|
154
|
+
// },
|
|
155
|
+
// },
|
|
156
|
+
// axisLabel: {
|
|
157
|
+
// color: '#67727F', // 设置文字颜色
|
|
158
|
+
// },
|
|
159
|
+
// breaks: _currentAxisBreaks,
|
|
160
|
+
// breakArea: {
|
|
161
|
+
// itemStyle: {
|
|
162
|
+
// opacity: 1,
|
|
163
|
+
// },
|
|
164
|
+
// zigzagZ: 200,
|
|
165
|
+
// },
|
|
77
166
|
|
|
78
|
-
|
|
79
|
-
|
|
167
|
+
type: 'value',
|
|
168
|
+
breaks: _currentAxisBreaks,
|
|
169
|
+
breakArea: {
|
|
170
|
+
itemStyle: {
|
|
171
|
+
opacity: 1
|
|
172
|
+
},
|
|
173
|
+
zigzagZ: 200
|
|
80
174
|
}
|
|
81
175
|
},
|
|
82
|
-
|
|
83
176
|
dataZoom: [{
|
|
84
177
|
type: 'inside',
|
|
85
178
|
start: 0,
|
|
@@ -106,23 +199,29 @@ var IntervalChart = function IntervalChart(props) {
|
|
|
106
199
|
datasetIndex: 1,
|
|
107
200
|
name: seriesData === null || seriesData === void 0 ? void 0 : (_seriesData$series$i = seriesData.series[i]) === null || _seriesData$series$i === void 0 ? void 0 : _seriesData$series$i.names[0],
|
|
108
201
|
data: seriesData === null || seriesData === void 0 ? void 0 : (_seriesData$series$i2 = seriesData.series[i]) === null || _seriesData$series$i2 === void 0 ? void 0 : _seriesData$series$i2.values,
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
// 添加自定义的CSS样式,去掉边框
|
|
114
|
-
formatter: function formatter(params) {
|
|
115
|
-
var tooltipString = renderToString( /*#__PURE__*/React.createElement(CustomTooltip, {
|
|
116
|
-
series: seriesData === null || seriesData === void 0 ? void 0 : seriesData.series[i],
|
|
117
|
-
payload: params
|
|
118
|
-
}));
|
|
119
|
-
return tooltipString;
|
|
120
|
-
}
|
|
202
|
+
showBackground: true,
|
|
203
|
+
// 关键修改:背景改为透明
|
|
204
|
+
backgroundStyle: {
|
|
205
|
+
color: 'rgba(0,0,0,0.2)'
|
|
121
206
|
},
|
|
122
207
|
emphasis: {
|
|
208
|
+
focus: 'series',
|
|
209
|
+
blurScope: 'coordinateSystem',
|
|
123
210
|
itemStyle: {
|
|
124
211
|
borderColor: color // 设置盒子的颜色
|
|
125
212
|
}
|
|
213
|
+
|
|
214
|
+
// tooltip: {
|
|
215
|
+
// show: true, // 单独配置series中的tooltip为显示
|
|
216
|
+
// extraCssText:
|
|
217
|
+
// 'border: none;padding:0;border-radius:10px;background: rgba(250, 251, 253, 0.8)', // 添加自定义的CSS样式,去掉边框
|
|
218
|
+
// formatter: (params: any) => {
|
|
219
|
+
// const tooltipString = renderToString(
|
|
220
|
+
// <CustomTooltip series={seriesData?.series[i]} payload={params} />,
|
|
221
|
+
// );
|
|
222
|
+
// return tooltipString;
|
|
223
|
+
// },
|
|
224
|
+
// },
|
|
126
225
|
},
|
|
127
226
|
|
|
128
227
|
itemStyle: {
|
|
@@ -131,15 +230,202 @@ var IntervalChart = function IntervalChart(props) {
|
|
|
131
230
|
};
|
|
132
231
|
})
|
|
133
232
|
};
|
|
134
|
-
|
|
233
|
+
setOptionECharts(eCharts);
|
|
135
234
|
}, [props === null || props === void 0 ? void 0 : props.showList]);
|
|
136
|
-
|
|
235
|
+
useEffect(function () {
|
|
236
|
+
chartInstance && chartInstance.setOption(optionECharts);
|
|
237
|
+
}, [optionECharts]);
|
|
238
|
+
useEffect(function () {
|
|
239
|
+
setTimeout(function () {
|
|
240
|
+
chartInstance && chartInstance.on('axisbreakchanged', function (params) {
|
|
241
|
+
updateCollapseButton(params);
|
|
242
|
+
});
|
|
243
|
+
// =========================
|
|
244
|
+
// 关键修改:结合 dataZoom 的可见索引范围
|
|
245
|
+
// =========================
|
|
246
|
+
|
|
247
|
+
// 当前 x 轴可见的起止 dataIndex(受 dataZoom 控制)
|
|
248
|
+
var baseOption = chartInstance && chartInstance.getOption();
|
|
249
|
+
var totalCategoryCount = baseOption && baseOption.xAxis[0].data.length;
|
|
250
|
+
var visibleStartIndex = 0;
|
|
251
|
+
var visibleEndIndex = totalCategoryCount - 1;
|
|
252
|
+
|
|
253
|
+
// 根据 dataZoom 的 start / end 百分比更新可见索引范围[web:28]
|
|
254
|
+
function updateVisibleRangeFromDataZoom(params) {
|
|
255
|
+
var startPercent;
|
|
256
|
+
var endPercent;
|
|
257
|
+
if (params && params.batch && params.batch.length) {
|
|
258
|
+
// 事件中 batch 数组形式
|
|
259
|
+
startPercent = params.batch[0].start;
|
|
260
|
+
endPercent = params.batch[0].end;
|
|
261
|
+
} else if (params) {
|
|
262
|
+
startPercent = params.start;
|
|
263
|
+
endPercent = params.end;
|
|
264
|
+
}
|
|
265
|
+
if (startPercent == null || endPercent == null) {
|
|
266
|
+
return;
|
|
267
|
+
}
|
|
268
|
+
var optionNow = chartInstance && chartInstance.getOption();
|
|
269
|
+
var axisData = optionNow.xAxis[0].data || [];
|
|
270
|
+
var total = axisData.length || 1;
|
|
271
|
+
visibleStartIndex = Math.round(startPercent / 100 * (total - 1));
|
|
272
|
+
visibleEndIndex = Math.round(endPercent / 100 * (total - 1));
|
|
273
|
+
if (visibleStartIndex < 0) visibleStartIndex = 0;
|
|
274
|
+
if (visibleEndIndex > total - 1) visibleEndIndex = total - 1;
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
// 初始化一次可见范围(用当前 option 中 dataZoom 的配置)
|
|
278
|
+
if (baseOption && baseOption.dataZoom && baseOption && baseOption.dataZoom.length) {
|
|
279
|
+
updateVisibleRangeFromDataZoom(baseOption.dataZoom[0]);
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
// 监听 dataZoom 事件,更新可见范围
|
|
283
|
+
chartInstance && chartInstance.on('dataZoom', function (params) {
|
|
284
|
+
updateVisibleRangeFromDataZoom(params);
|
|
285
|
+
});
|
|
286
|
+
|
|
287
|
+
// 封装鼠标移动时的计算逻辑
|
|
288
|
+
function handleMouseMove(params) {
|
|
289
|
+
var pointInPixel = [params.offsetX, params.offsetY];
|
|
290
|
+
|
|
291
|
+
// 检查是否在网格区域内
|
|
292
|
+
if (!chartInstance && chartInstance.containPixel('grid', pointInPixel)) {
|
|
293
|
+
chartInstance && chartInstance.dispatchAction({
|
|
294
|
+
type: 'hideTip'
|
|
295
|
+
});
|
|
296
|
+
return;
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
// 使用当前坐标系(考虑 dataZoom / axisBreak)将像素坐标转为数据坐标[web:19]
|
|
300
|
+
var pointInGrid = chartInstance && chartInstance.convertFromPixel({
|
|
301
|
+
xAxisIndex: 0,
|
|
302
|
+
yAxisIndex: 0
|
|
303
|
+
}, pointInPixel);
|
|
304
|
+
if (!pointInGrid) {
|
|
305
|
+
chartInstance && chartInstance.dispatchAction({
|
|
306
|
+
type: 'hideTip'
|
|
307
|
+
});
|
|
308
|
+
return;
|
|
309
|
+
}
|
|
310
|
+
var xIndex = Math.round(pointInGrid[0]);
|
|
311
|
+
var optionNow = chartInstance && chartInstance.getOption();
|
|
312
|
+
var series = optionNow.series || [];
|
|
313
|
+
var seriesCount = series.length;
|
|
314
|
+
|
|
315
|
+
// 如果当前 xIndex 不在 dataZoom 可见范围内,直接不显示 tooltip
|
|
316
|
+
if (xIndex < visibleStartIndex || xIndex > visibleEndIndex) {
|
|
317
|
+
chartInstance && chartInstance.dispatchAction({
|
|
318
|
+
type: 'hideTip'
|
|
319
|
+
});
|
|
320
|
+
return;
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
// 获取当前网格区域信息(会随 dataZoom / resize 变化)
|
|
324
|
+
var gridModel = chartInstance && chartInstance.getModel().getComponent('grid', 0);
|
|
325
|
+
var gridRect = gridModel.coordinateSystem.getRect();
|
|
326
|
+
|
|
327
|
+
// 当前可见类目数量(只按 dataZoom 可见区计算宽度)
|
|
328
|
+
var visibleCategoryCount = visibleEndIndex - visibleStartIndex + 1;
|
|
329
|
+
if (visibleCategoryCount <= 0) {
|
|
330
|
+
chartInstance && chartInstance.dispatchAction({
|
|
331
|
+
type: 'hideTip'
|
|
332
|
+
});
|
|
333
|
+
return;
|
|
334
|
+
}
|
|
335
|
+
|
|
336
|
+
// 每个可见类目在当前网格中的宽度
|
|
337
|
+
var categoryWidth = gridRect.width / visibleCategoryCount;
|
|
338
|
+
|
|
339
|
+
// 当前类目的起点 = grid 起点 + (xIndex - visibleStartIndex) * 每类宽度
|
|
340
|
+
var categoryStartX = gridRect.x + (xIndex - visibleStartIndex) * categoryWidth;
|
|
341
|
+
|
|
342
|
+
// 鼠标在当前类目内的相对 X 位置
|
|
343
|
+
var relativeX = params.offsetX - categoryStartX;
|
|
344
|
+
|
|
345
|
+
// 计算每个 series 对应的“柱子”宽度(背景区域同样分配)
|
|
346
|
+
var barWidth = categoryWidth / seriesCount;
|
|
347
|
+
|
|
348
|
+
// 鼠标当前所在的系列下标(按背景区域来划分)
|
|
349
|
+
var seriesIndex = Math.floor(relativeX / barWidth);
|
|
350
|
+
|
|
351
|
+
// 索引有效性判断
|
|
352
|
+
var categoryTotal = optionNow.xAxis[0].data.length;
|
|
353
|
+
if (seriesIndex >= 0 && seriesIndex < seriesCount && xIndex >= 0 && xIndex < categoryTotal) {
|
|
354
|
+
// 显示跟随鼠标的 tooltip(包括柱子上方的背景区域)
|
|
355
|
+
chartInstance && chartInstance.dispatchAction({
|
|
356
|
+
type: 'showTip',
|
|
357
|
+
seriesIndex: seriesIndex,
|
|
358
|
+
dataIndex: xIndex,
|
|
359
|
+
position: [params.offsetX + 10, params.offsetY - 10]
|
|
360
|
+
});
|
|
361
|
+
} else {
|
|
362
|
+
chartInstance && chartInstance.dispatchAction({
|
|
363
|
+
type: 'hideTip'
|
|
364
|
+
});
|
|
365
|
+
}
|
|
366
|
+
}
|
|
367
|
+
|
|
368
|
+
// 添加鼠标移动监听,计算鼠标位置对应的具体柱子(考虑 dataZoom 后的新显示)
|
|
369
|
+
chartInstance && chartInstance.getZr().on('mousemove', function (params) {
|
|
370
|
+
handleMouseMove(params);
|
|
371
|
+
});
|
|
372
|
+
chartInstance && chartInstance.getZr().on('mouseout', function () {
|
|
373
|
+
chartInstance && chartInstance.dispatchAction({
|
|
374
|
+
type: 'hideTip'
|
|
375
|
+
});
|
|
376
|
+
});
|
|
377
|
+
}, 0);
|
|
378
|
+
}, [chartInstance]);
|
|
379
|
+
function updateCollapseButton(params) {
|
|
380
|
+
// If there is any axis break expanded, we need to show the collapse button.
|
|
381
|
+
var needReset = false;
|
|
382
|
+
for (var i = 0; i < params.breaks.length; i++) {
|
|
383
|
+
var changedBreakItem = params.breaks[i];
|
|
384
|
+
if (changedBreakItem.isExpanded) {
|
|
385
|
+
needReset = true;
|
|
386
|
+
break;
|
|
387
|
+
}
|
|
388
|
+
}
|
|
389
|
+
setOptionECharts({
|
|
390
|
+
// Draw the collapse button.
|
|
391
|
+
graphic: [{
|
|
392
|
+
elements: [{
|
|
393
|
+
type: 'rect',
|
|
394
|
+
ignore: !needReset,
|
|
395
|
+
name: 'collapseAxisBreakBtn',
|
|
396
|
+
top: 5,
|
|
397
|
+
left: 5,
|
|
398
|
+
shape: {
|
|
399
|
+
r: 3,
|
|
400
|
+
width: 140,
|
|
401
|
+
height: 24
|
|
402
|
+
},
|
|
403
|
+
style: {
|
|
404
|
+
fill: '#eee',
|
|
405
|
+
stroke: '#999',
|
|
406
|
+
lineWidth: 1
|
|
407
|
+
},
|
|
408
|
+
textContent: {
|
|
409
|
+
type: 'text',
|
|
410
|
+
style: {
|
|
411
|
+
text: 'Collapse Axis Breaks',
|
|
412
|
+
fontSize: 13,
|
|
413
|
+
fontWeight: 'bold'
|
|
414
|
+
}
|
|
415
|
+
},
|
|
416
|
+
textConfig: {
|
|
417
|
+
position: 'inside'
|
|
418
|
+
}
|
|
419
|
+
}]
|
|
420
|
+
}]
|
|
421
|
+
});
|
|
422
|
+
}
|
|
423
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
424
|
+
ref: chartRef,
|
|
137
425
|
style: {
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
}
|
|
141
|
-
option: option,
|
|
142
|
-
echarts: echarts
|
|
426
|
+
width: '100%',
|
|
427
|
+
height: '400px'
|
|
428
|
+
}
|
|
143
429
|
});
|
|
144
430
|
};
|
|
145
431
|
export default IntervalChart;
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
2
|
-
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; }
|
|
3
|
-
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; }
|
|
4
|
-
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
5
|
-
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
6
|
-
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
7
2
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
8
3
|
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."); }
|
|
9
4
|
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); }
|
|
10
5
|
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
6
|
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
7
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
8
|
+
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; }
|
|
9
|
+
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; }
|
|
10
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
11
|
+
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
12
|
+
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
13
13
|
import { ajax, BizGlobalDataContext, BizLayout, BizTargetFromPanelContext } from '@zgfe/business-lib';
|
|
14
14
|
import React, { useContext, useEffect, useRef, useState } from 'react';
|
|
15
15
|
import Request from 'umi-request';
|
|
@@ -21,11 +21,15 @@ import { judgeIsCity, judgeIsArea, getValue, searchDataParams } from "./utils";
|
|
|
21
21
|
import { ContentPanel, SearchPanel } from "../../components";
|
|
22
22
|
import TopPanel from "../topPanel";
|
|
23
23
|
import { message } from 'antd';
|
|
24
|
+
import { ERROR_RESPONESE_CODE } from "../../constants/code";
|
|
24
25
|
var CancelToken = Request.CancelToken;
|
|
25
26
|
var cancel;
|
|
26
27
|
var refresh = false;
|
|
27
28
|
var timer = 0;
|
|
28
29
|
var classPrefix = 'interval-content';
|
|
30
|
+
var RESPONESE_CODE = _objectSpread({
|
|
31
|
+
SUCCESS: '100000'
|
|
32
|
+
}, ERROR_RESPONESE_CODE);
|
|
29
33
|
var EventContent = function EventContent(props) {
|
|
30
34
|
// 最后的查询数据(防止图表在还没查询时就改变了类型)
|
|
31
35
|
var _useState = useState(props.value),
|
|
@@ -69,7 +73,8 @@ var EventContent = function EventContent(props) {
|
|
|
69
73
|
eventEnvList = _useContext2.eventEnvList,
|
|
70
74
|
userPropList = _useContext2.userPropList,
|
|
71
75
|
setRefreshLoading = _useContext2.setRefreshLoading,
|
|
72
|
-
panelId = _useContext2.panelId
|
|
76
|
+
panelId = _useContext2.panelId,
|
|
77
|
+
setException = _useContext2.setException;
|
|
73
78
|
var _useContext3 = useContext(BizTargetFromPanelContext),
|
|
74
79
|
handleSearch = _useContext3.handleSearch;
|
|
75
80
|
var collapseRef = useRef();
|
|
@@ -91,6 +96,7 @@ var EventContent = function EventContent(props) {
|
|
|
91
96
|
}
|
|
92
97
|
}
|
|
93
98
|
if (!searchData || !searchData.analysisModel) return;
|
|
99
|
+
if (!refresh) setLoading(true);
|
|
94
100
|
if (timer) clearTimeout(timer);
|
|
95
101
|
var flag = true;
|
|
96
102
|
timer = setTimeout(function () {
|
|
@@ -111,14 +117,18 @@ var EventContent = function EventContent(props) {
|
|
|
111
117
|
// 查询
|
|
112
118
|
var fetchRequest = function fetchRequest() {
|
|
113
119
|
var _searchData$start, _searchData$end, _searchData$associate, _searchData$associate2, _searchData$associate3;
|
|
120
|
+
if (typeof cancel == 'function') {
|
|
121
|
+
cancel();
|
|
122
|
+
cancel = undefined;
|
|
123
|
+
}
|
|
114
124
|
if ((searchData === null || searchData === void 0 ? void 0 : (_searchData$start = searchData.start) === null || _searchData$start === void 0 ? void 0 : _searchData$start.id) === null || (searchData === null || searchData === void 0 ? void 0 : (_searchData$end = searchData.end) === null || _searchData$end === void 0 ? void 0 : _searchData$end.id) === null) {
|
|
115
|
-
|
|
125
|
+
loadingHandle();
|
|
116
126
|
return;
|
|
117
127
|
}
|
|
118
|
-
|
|
119
|
-
|
|
128
|
+
if (!refresh) loadingHandle();
|
|
129
|
+
setException(false);
|
|
120
130
|
if (searchData !== null && searchData !== void 0 && (_searchData$associate = searchData.associatedNextAttr) !== null && _searchData$associate !== void 0 && _searchData$associate.type && (searchData === null || searchData === void 0 ? void 0 : (_searchData$associate2 = searchData.associatedPreAttr) === null || _searchData$associate2 === void 0 ? void 0 : _searchData$associate2.type) !== (searchData === null || searchData === void 0 ? void 0 : (_searchData$associate3 = searchData.associatedNextAttr) === null || _searchData$associate3 === void 0 ? void 0 : _searchData$associate3.type)) {
|
|
121
|
-
|
|
131
|
+
loadingHandle();
|
|
122
132
|
return message.error('您查询的属性不一致,暂不支持查询');
|
|
123
133
|
}
|
|
124
134
|
var params = searchDataParams(searchData);
|
|
@@ -128,28 +138,47 @@ var EventContent = function EventContent(props) {
|
|
|
128
138
|
data: _objectSpread(_objectSpread({
|
|
129
139
|
appId: currentApp === null || currentApp === void 0 ? void 0 : currentApp.appId
|
|
130
140
|
}, params), {}, {
|
|
141
|
+
snapshotId: searchData === null || searchData === void 0 ? void 0 : searchData.snapshotId,
|
|
131
142
|
refresh: refresh
|
|
132
143
|
}),
|
|
144
|
+
intercept: false,
|
|
133
145
|
cancelToken: new CancelToken(function executor(c) {
|
|
134
146
|
cancel = c;
|
|
135
147
|
})
|
|
136
148
|
}).then(function (res) {
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
149
|
+
// 根据接口 code 判断后续的处理逻辑, 优先处理异常错误code
|
|
150
|
+
// EXCEPTION 可能发生在正常查询及刷新中
|
|
151
|
+
if ((res === null || res === void 0 ? void 0 : res.code) == RESPONESE_CODE.EXCEPTION) {
|
|
152
|
+
setException(true);
|
|
153
|
+
loadingHandle();
|
|
154
|
+
return;
|
|
155
|
+
}
|
|
156
|
+
// 处理其他非成功情况
|
|
157
|
+
if (res.code != RESPONESE_CODE.SUCCESS) {
|
|
158
|
+
message.error(res === null || res === void 0 ? void 0 : res.msg);
|
|
159
|
+
loadingHandle();
|
|
140
160
|
return;
|
|
141
161
|
}
|
|
142
162
|
var result = res.data;
|
|
143
163
|
setEventData(result);
|
|
144
164
|
setFinalSearchData(_objectSpread({}, searchData));
|
|
145
|
-
|
|
146
|
-
setLoading(false);
|
|
147
|
-
}, 0);
|
|
165
|
+
loadingHandle();
|
|
148
166
|
}).catch(function () {
|
|
149
|
-
|
|
167
|
+
loadingHandle();
|
|
150
168
|
});
|
|
151
169
|
};
|
|
152
170
|
|
|
171
|
+
// 关闭loading
|
|
172
|
+
var loadingHandle = function loadingHandle() {
|
|
173
|
+
// 使用setTimeout放到宏任务队列中
|
|
174
|
+
// 预防在loading关闭时,数据还在变动中,这会导致渲染展示的还是上次查询的数据
|
|
175
|
+
setTimeout(function () {
|
|
176
|
+
setLoading && setLoading(false);
|
|
177
|
+
setRefreshLoading && setRefreshLoading(false);
|
|
178
|
+
refresh = false;
|
|
179
|
+
}, 0);
|
|
180
|
+
};
|
|
181
|
+
|
|
153
182
|
// 立即刷新
|
|
154
183
|
var refreshHandle = function refreshHandle() {
|
|
155
184
|
refresh = true;
|
|
@@ -190,8 +219,8 @@ var EventContent = function EventContent(props) {
|
|
|
190
219
|
return _objectSpread(_objectSpread({}, data), {}, {
|
|
191
220
|
time: _searchData.time,
|
|
192
221
|
platform: _searchData.platform || 0,
|
|
193
|
-
userGroup: data.analysisSubject ? undefined : data.userGroup,
|
|
194
|
-
analysisSubject: data.analysisSubject ? data.analysisSubject : undefined
|
|
222
|
+
userGroup: data !== null && data !== void 0 && data.analysisSubject ? undefined : data.userGroup,
|
|
223
|
+
analysisSubject: data !== null && data !== void 0 && data.analysisSubject ? data === null || data === void 0 ? void 0 : data.analysisSubject : undefined
|
|
195
224
|
});
|
|
196
225
|
});
|
|
197
226
|
};
|
|
@@ -212,6 +241,7 @@ var EventContent = function EventContent(props) {
|
|
|
212
241
|
collapseRef: collapseRef,
|
|
213
242
|
onChange: onChangeSearch,
|
|
214
243
|
defaultValue: searchData,
|
|
244
|
+
propsDefaultValue: props.defaultValue,
|
|
215
245
|
loading: loading,
|
|
216
246
|
finalSearchData: finalSearchData
|
|
217
247
|
})
|
|
@@ -232,7 +262,7 @@ var EventContent = function EventContent(props) {
|
|
|
232
262
|
loading: loading,
|
|
233
263
|
isCity: isCity,
|
|
234
264
|
eventData: eventData,
|
|
235
|
-
searchData:
|
|
265
|
+
searchData: searchData,
|
|
236
266
|
showList: showList,
|
|
237
267
|
onChangeShow: onChangeShow
|
|
238
268
|
}))));
|
|
@@ -80,7 +80,7 @@ export function searchCondition(params) {
|
|
|
80
80
|
};
|
|
81
81
|
}
|
|
82
82
|
export function searchDataParams(params) {
|
|
83
|
-
var _params$dimension, _params$dimension2, _params$dimension3, _params$dimension4, _params$dimension5, _params$dimension6, _params$dimension7, _params$dimension8, _params$dimension9, _params$dimension10, _params$dimension11, _params$dimension12, _params$
|
|
83
|
+
var _params$dimension, _params$dimension2, _params$dimension3, _params$dimension4, _params$dimension5, _params$dimension6, _params$dimension7, _params$dimension8, _params$dimension9, _params$dimension10, _params$dimension11, _params$dimension12, _params$associatedPre, _params$associatedNex;
|
|
84
84
|
return {
|
|
85
85
|
time: _objectSpread({}, params === null || params === void 0 ? void 0 : params.time),
|
|
86
86
|
platform: (params === null || params === void 0 ? void 0 : params.platform) || 0,
|
|
@@ -93,13 +93,12 @@ export function searchDataParams(params) {
|
|
|
93
93
|
attrId: params === null || params === void 0 ? void 0 : (_params$dimension6 = params.dimension) === null || _params$dimension6 === void 0 ? void 0 : _params$dimension6.id,
|
|
94
94
|
userAttr: (params === null || params === void 0 ? void 0 : (_params$dimension7 = params.dimension) === null || _params$dimension7 === void 0 ? void 0 : _params$dimension7.propCategory) === 'userProp' ? params === null || params === void 0 ? void 0 : (_params$dimension8 = params.dimension) === null || _params$dimension8 === void 0 ? void 0 : _params$dimension8.name : null,
|
|
95
95
|
eventAttr: (params === null || params === void 0 ? void 0 : (_params$dimension9 = params.dimension) === null || _params$dimension9 === void 0 ? void 0 : _params$dimension9.propCategory) === 'eventProp' ? params === null || params === void 0 ? void 0 : (_params$dimension10 = params.dimension) === null || _params$dimension10 === void 0 ? void 0 : _params$dimension10.label : null,
|
|
96
|
-
event: (params === null || params === void 0 ? void 0 : (_params$dimension11 = params.dimension) === null || _params$dimension11 === void 0 ? void 0 : _params$dimension11.propCategory) !== 'envProp' ? params === null || params === void 0 ? void 0 : (_params$dimension12 = params.dimension) === null || _params$dimension12 === void 0 ? void 0 : _params$dimension12.eventId : null
|
|
97
|
-
encryptionType: params === null || params === void 0 ? void 0 : (_params$dimension13 = params.dimension) === null || _params$dimension13 === void 0 ? void 0 : _params$dimension13.encryptionType
|
|
96
|
+
event: (params === null || params === void 0 ? void 0 : (_params$dimension11 = params.dimension) === null || _params$dimension11 === void 0 ? void 0 : _params$dimension11.propCategory) !== 'envProp' ? params === null || params === void 0 ? void 0 : (_params$dimension12 = params.dimension) === null || _params$dimension12 === void 0 ? void 0 : _params$dimension12.eventId : null
|
|
98
97
|
} : null,
|
|
99
98
|
associatedPreAttr: params === null || params === void 0 ? void 0 : (_params$associatedPre = params.associatedPreAttr) === null || _params$associatedPre === void 0 ? void 0 : _params$associatedPre.id,
|
|
100
99
|
associatedNextAttr: params === null || params === void 0 ? void 0 : (_params$associatedNex = params.associatedNextAttr) === null || _params$associatedNex === void 0 ? void 0 : _params$associatedNex.id,
|
|
101
100
|
analysisModel: params.analysisModel,
|
|
102
|
-
analysisSubject: params.analysisSubject
|
|
101
|
+
analysisSubject: params === null || params === void 0 ? void 0 : params.analysisSubject
|
|
103
102
|
};
|
|
104
103
|
}
|
|
105
104
|
export function transformData(data) {
|
|
@@ -6,7 +6,7 @@ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefine
|
|
|
6
6
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
7
7
|
import React, { useEffect, useState } from 'react';
|
|
8
8
|
import { DemoWrapper, setGlobalConfig } from '@zgfe/business-lib';
|
|
9
|
-
import { ModuleInterval } from
|
|
9
|
+
import { ModuleInterval } from '@zgfe/modules-interval';
|
|
10
10
|
import { requestConfig } from "../../../utils/ajaxConfig";
|
|
11
11
|
import { Button } from 'antd';
|
|
12
12
|
var defaultValue = null;
|
|
@@ -33,9 +33,10 @@ export default (function () {
|
|
|
33
33
|
var onUserDrill = function onUserDrill(data, searchData) {
|
|
34
34
|
console.log('onUserDrill:', data, searchData);
|
|
35
35
|
};
|
|
36
|
+
var onJumpWarning = function onJumpWarning() {};
|
|
36
37
|
return /*#__PURE__*/React.createElement(DemoWrapper, {
|
|
37
38
|
needMeta: true,
|
|
38
|
-
defaultApp:
|
|
39
|
+
defaultApp: 3
|
|
39
40
|
}, isDetail ? /*#__PURE__*/React.createElement("div", null, JSON.stringify(detailParams), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Button, {
|
|
40
41
|
onClick: function onClick() {
|
|
41
42
|
return setIsDetail(false);
|
|
@@ -43,6 +44,7 @@ export default (function () {
|
|
|
43
44
|
}, "\u8FD4\u56DE")) : /*#__PURE__*/React.createElement(ModuleInterval, {
|
|
44
45
|
defaultValue: searchParams,
|
|
45
46
|
afterEditTarget: afterEditTarget,
|
|
46
|
-
onUserDrill: onUserDrill
|
|
47
|
+
onUserDrill: onUserDrill,
|
|
48
|
+
onJumpWarning: onJumpWarning
|
|
47
49
|
}));
|
|
48
50
|
});
|