wargerm 0.4.26 → 0.4.27
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/components/LineEcharts/index.d.ts +15 -0
- package/dist/components/ReactECharts/RAF.d.ts +13 -0
- package/dist/components/ReactECharts/index.d.ts +16 -0
- package/dist/components/ReactECharts/theme.d.ts +138 -0
- package/dist/components/ReactECharts/useRAF.d.ts +4 -0
- package/dist/components/VideoPlayer/example/demo1.d.ts +3 -0
- package/dist/components/VideoPlayer/example/demo2.d.ts +3 -0
- package/dist/components/VideoPlayer/index.d.ts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.esm.js +617 -11
- package/dist/index.js +638 -10
- package/dist/utils/index.d.ts +2 -0
- package/package.json +5 -1
package/dist/index.js
CHANGED
@@ -56,9 +56,34 @@ var Player = require('xgplayer');
|
|
56
56
|
var FlvPlayer = require('xgplayer-flv.js');
|
57
57
|
var HlsJsPlayer = require('xgplayer-hls.js');
|
58
58
|
var lodash = require('lodash');
|
59
|
+
var ReactEChartsCore = require('echarts-for-react/lib/core');
|
60
|
+
var echarts = require('echarts/core');
|
61
|
+
var charts = require('echarts/charts');
|
62
|
+
var components = require('echarts/components');
|
63
|
+
var renderers = require('echarts/renderers');
|
59
64
|
|
60
65
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
61
66
|
|
67
|
+
function _interopNamespace(e) {
|
68
|
+
if (e && e.__esModule) return e;
|
69
|
+
var n = Object.create(null);
|
70
|
+
if (e) {
|
71
|
+
Object.keys(e).forEach(function (k) {
|
72
|
+
if (k !== 'default') {
|
73
|
+
var d = Object.getOwnPropertyDescriptor(e, k);
|
74
|
+
Object.defineProperty(n, k, d.get ? d : {
|
75
|
+
enumerable: true,
|
76
|
+
get: function () {
|
77
|
+
return e[k];
|
78
|
+
}
|
79
|
+
});
|
80
|
+
}
|
81
|
+
});
|
82
|
+
}
|
83
|
+
n['default'] = e;
|
84
|
+
return Object.freeze(n);
|
85
|
+
}
|
86
|
+
|
62
87
|
var _Button__default = /*#__PURE__*/_interopDefaultLegacy(_Button);
|
63
88
|
var _Dropdown__default = /*#__PURE__*/_interopDefaultLegacy(_Dropdown);
|
64
89
|
var _Menu__default = /*#__PURE__*/_interopDefaultLegacy(_Menu);
|
@@ -90,6 +115,8 @@ var ProTable__default = /*#__PURE__*/_interopDefaultLegacy(ProTable);
|
|
90
115
|
var Player__default = /*#__PURE__*/_interopDefaultLegacy(Player);
|
91
116
|
var FlvPlayer__default = /*#__PURE__*/_interopDefaultLegacy(FlvPlayer);
|
92
117
|
var HlsJsPlayer__default = /*#__PURE__*/_interopDefaultLegacy(HlsJsPlayer);
|
118
|
+
var ReactEChartsCore__default = /*#__PURE__*/_interopDefaultLegacy(ReactEChartsCore);
|
119
|
+
var echarts__namespace = /*#__PURE__*/_interopNamespace(echarts);
|
93
120
|
|
94
121
|
function ownKeys(object, enumerableOnly) {
|
95
122
|
var keys = Object.keys(object);
|
@@ -578,8 +605,8 @@ Index$3.Group = _Checkbox__default['default'].Group;
|
|
578
605
|
/*
|
579
606
|
* @Author: lijin
|
580
607
|
* @Date: 2021-10-27 22:18:49
|
581
|
-
* @LastEditTime:
|
582
|
-
* @LastEditors:
|
608
|
+
* @LastEditTime: 2022-06-30 16:51:49
|
609
|
+
* @LastEditors: caldelle 793238465@qq.com
|
583
610
|
* @Description:
|
584
611
|
* @FilePath: \wargerm\src\utils\index.ts
|
585
612
|
* 可以输入预定的版权声明、个性签名、空行等
|
@@ -639,6 +666,12 @@ function getArrayLayer(arr, attr) {
|
|
639
666
|
|
640
667
|
return newIndex;
|
641
668
|
}
|
669
|
+
var calcWidth = function calcWidth(width) {
|
670
|
+
return document.body.clientWidth / 3840 * width;
|
671
|
+
};
|
672
|
+
var calcHeight = function calcHeight(height) {
|
673
|
+
return document.body.clientHeight / 2160 * height;
|
674
|
+
};
|
642
675
|
|
643
676
|
var _excluded$1 = ["className", "frameStyle", "style", "direction", "children"];
|
644
677
|
function FrameBox(_ref) {
|
@@ -11270,8 +11303,10 @@ function VideoPlayer(_ref, ref) {
|
|
11270
11303
|
config = _ref$config === void 0 ? {} : _ref$config,
|
11271
11304
|
layoutIndex = _ref.layoutIndex,
|
11272
11305
|
_ref$url = _ref.url,
|
11273
|
-
url = _ref$url === void 0 ? [] : _ref$url
|
11274
|
-
|
11306
|
+
url = _ref$url === void 0 ? [] : _ref$url,
|
11307
|
+
_ref$layouts = _ref.layouts,
|
11308
|
+
layouts = _ref$layouts === void 0 ? [] : _ref$layouts;
|
11309
|
+
var basicLayouts = [{
|
11275
11310
|
title: '1x1布局',
|
11276
11311
|
style: {
|
11277
11312
|
gridTemplateColumns: '1fr',
|
@@ -11303,6 +11338,7 @@ function VideoPlayer(_ref, ref) {
|
|
11303
11338
|
}),
|
11304
11339
|
span: 9
|
11305
11340
|
}];
|
11341
|
+
var allLayouts = [].concat(_toConsumableArray(layouts), basicLayouts);
|
11306
11342
|
|
11307
11343
|
var _useState = React.useState(layoutIndex || 0),
|
11308
11344
|
_useState2 = _slicedToArray(_useState, 2),
|
@@ -11314,7 +11350,7 @@ function VideoPlayer(_ref, ref) {
|
|
11314
11350
|
urls = _useState4[0],
|
11315
11351
|
setUrls = _useState4[1];
|
11316
11352
|
|
11317
|
-
var initPlayerIndex =
|
11353
|
+
var initPlayerIndex = allLayouts[layoutIndex || 0].span >= url.length ? url.length - 1 >= 0 ? url.length - 1 : 0 : allLayouts[layoutIndex || 0].span - 1;
|
11318
11354
|
|
11319
11355
|
var _useState5 = React.useState(initPlayerIndex),
|
11320
11356
|
_useState6 = _slicedToArray(_useState5, 2),
|
@@ -11330,7 +11366,7 @@ function VideoPlayer(_ref, ref) {
|
|
11330
11366
|
setPlayers = _useState8[1];
|
11331
11367
|
|
11332
11368
|
var renderDom = React.useMemo(function () {
|
11333
|
-
var arr = new Array(
|
11369
|
+
var arr = new Array(allLayouts[currentLayoutIndex].span).fill(0);
|
11334
11370
|
return arr.map(function (item, index) {
|
11335
11371
|
return /*#__PURE__*/React__default['default'].createElement("div", {
|
11336
11372
|
key: index,
|
@@ -11411,22 +11447,24 @@ function VideoPlayer(_ref, ref) {
|
|
11411
11447
|
}, /*#__PURE__*/React__default['default'].createElement("div", {
|
11412
11448
|
ref: domRef,
|
11413
11449
|
className: "videoContainer-grid",
|
11414
|
-
style:
|
11450
|
+
style: allLayouts[currentLayoutIndex].style
|
11415
11451
|
}, renderDom), footer ? /*#__PURE__*/React__default['default'].createElement("div", {
|
11416
11452
|
className: "tools"
|
11417
|
-
},
|
11453
|
+
}, allLayouts.map(function (item, index) {
|
11418
11454
|
return /*#__PURE__*/React__default['default'].createElement("div", {
|
11419
11455
|
key: index,
|
11420
11456
|
className: "btnbox",
|
11421
11457
|
onClick: function onClick() {
|
11422
|
-
var playerIndex =
|
11458
|
+
var playerIndex = allLayouts[index || 0].span > url.length ? url.length - 1 >= 0 ? url.length : 0 : allLayouts[index || 0].span - 1;
|
11423
11459
|
setCurrentPlayerIndex(playerIndex);
|
11424
11460
|
setCurrentLayoutIndex(index);
|
11425
11461
|
}
|
11426
11462
|
}, /*#__PURE__*/React__default['default'].createElement(_Tooltip__default['default'], {
|
11427
11463
|
placement: "top",
|
11428
11464
|
title: item.title
|
11429
|
-
}, item.icon
|
11465
|
+
}, item.icon || /*#__PURE__*/React__default['default'].createElement(IconFont, {
|
11466
|
+
type: "icon-dantupailie"
|
11467
|
+
})));
|
11430
11468
|
})) : null));
|
11431
11469
|
}
|
11432
11470
|
|
@@ -11662,6 +11700,595 @@ var index$4 = (function (_ref) {
|
|
11662
11700
|
});
|
11663
11701
|
});
|
11664
11702
|
|
11703
|
+
/*
|
11704
|
+
* @Author: lijin
|
11705
|
+
* @Date: 2021-08-04 13:22:21
|
11706
|
+
* @LastEditTime: 2021-08-04 13:25:19
|
11707
|
+
* @LastEditors: lijin
|
11708
|
+
* @Description:
|
11709
|
+
* @FilePath: \big-screen\src\components\ReactECharts\theme.ts
|
11710
|
+
* 可以输入预定的版权声明、个性签名、空行等
|
11711
|
+
*/
|
11712
|
+
var contrastColor = '#9EA1A7';
|
11713
|
+
var backgroundColor = 'transparent';
|
11714
|
+
|
11715
|
+
var axisCommon = function axisCommon() {
|
11716
|
+
return {
|
11717
|
+
axisLine: {
|
11718
|
+
lineStyle: {
|
11719
|
+
color: contrastColor
|
11720
|
+
}
|
11721
|
+
},
|
11722
|
+
splitLine: {
|
11723
|
+
lineStyle: {
|
11724
|
+
color: '#2c3641'
|
11725
|
+
}
|
11726
|
+
},
|
11727
|
+
splitArea: {
|
11728
|
+
areaStyle: {
|
11729
|
+
color: ['rgba(255,255,255,0.02)', 'rgba(255,255,255,0.05)']
|
11730
|
+
}
|
11731
|
+
},
|
11732
|
+
minorSplitLine: {
|
11733
|
+
lineStyle: {
|
11734
|
+
color: '#20203B'
|
11735
|
+
}
|
11736
|
+
}
|
11737
|
+
};
|
11738
|
+
};
|
11739
|
+
|
11740
|
+
var colorPalette = ['#4992ff', '#7cffb2', '#fddd60', '#ff6e76', '#58d9f9', '#05c091', '#ff8a45', '#8d48e3', '#dd79ff'];
|
11741
|
+
var theme = {
|
11742
|
+
darkMode: true,
|
11743
|
+
color: colorPalette,
|
11744
|
+
backgroundColor: backgroundColor,
|
11745
|
+
axisPointer: {
|
11746
|
+
lineStyle: {
|
11747
|
+
color: '#817f91'
|
11748
|
+
},
|
11749
|
+
crossStyle: {
|
11750
|
+
color: '#817f91'
|
11751
|
+
},
|
11752
|
+
label: {
|
11753
|
+
color: contrastColor,
|
11754
|
+
backgroundColor: '#104873'
|
11755
|
+
}
|
11756
|
+
},
|
11757
|
+
legend: {
|
11758
|
+
textStyle: {
|
11759
|
+
color: contrastColor
|
11760
|
+
}
|
11761
|
+
},
|
11762
|
+
textStyle: {
|
11763
|
+
color: contrastColor
|
11764
|
+
},
|
11765
|
+
title: {
|
11766
|
+
textStyle: {
|
11767
|
+
color: '#EEF1FA'
|
11768
|
+
},
|
11769
|
+
subtextStyle: {
|
11770
|
+
color: '#B9B8CE'
|
11771
|
+
}
|
11772
|
+
},
|
11773
|
+
toolbox: {
|
11774
|
+
iconStyle: {
|
11775
|
+
borderColor: contrastColor
|
11776
|
+
}
|
11777
|
+
},
|
11778
|
+
dataZoom: {
|
11779
|
+
borderColor: '#71708A',
|
11780
|
+
textStyle: {
|
11781
|
+
color: contrastColor
|
11782
|
+
},
|
11783
|
+
brushStyle: {
|
11784
|
+
color: 'rgba(135,163,206,0.3)'
|
11785
|
+
},
|
11786
|
+
handleStyle: {
|
11787
|
+
color: '#353450',
|
11788
|
+
borderColor: '#C5CBE3'
|
11789
|
+
},
|
11790
|
+
moveHandleStyle: {
|
11791
|
+
color: '#B0B6C3',
|
11792
|
+
opacity: 0.3
|
11793
|
+
},
|
11794
|
+
fillerColor: 'rgba(135,163,206,0.2)',
|
11795
|
+
emphasis: {
|
11796
|
+
handleStyle: {
|
11797
|
+
borderColor: '#91B7F2',
|
11798
|
+
color: '#4D587D'
|
11799
|
+
},
|
11800
|
+
moveHandleStyle: {
|
11801
|
+
color: '#636D9A',
|
11802
|
+
opacity: 0.7
|
11803
|
+
}
|
11804
|
+
},
|
11805
|
+
dataBackground: {
|
11806
|
+
lineStyle: {
|
11807
|
+
color: '#71708A',
|
11808
|
+
width: 1
|
11809
|
+
},
|
11810
|
+
areaStyle: {
|
11811
|
+
color: '#71708A'
|
11812
|
+
}
|
11813
|
+
},
|
11814
|
+
selectedDataBackground: {
|
11815
|
+
lineStyle: {
|
11816
|
+
color: '#87A3CE'
|
11817
|
+
},
|
11818
|
+
areaStyle: {
|
11819
|
+
color: '#87A3CE'
|
11820
|
+
}
|
11821
|
+
}
|
11822
|
+
},
|
11823
|
+
visualMap: {
|
11824
|
+
textStyle: {
|
11825
|
+
color: contrastColor
|
11826
|
+
}
|
11827
|
+
},
|
11828
|
+
timeline: {
|
11829
|
+
lineStyle: {
|
11830
|
+
color: contrastColor
|
11831
|
+
},
|
11832
|
+
label: {
|
11833
|
+
color: contrastColor
|
11834
|
+
},
|
11835
|
+
controlStyle: {
|
11836
|
+
color: contrastColor,
|
11837
|
+
borderColor: contrastColor
|
11838
|
+
}
|
11839
|
+
},
|
11840
|
+
calendar: {
|
11841
|
+
itemStyle: {
|
11842
|
+
color: backgroundColor
|
11843
|
+
},
|
11844
|
+
dayLabel: {
|
11845
|
+
color: contrastColor
|
11846
|
+
},
|
11847
|
+
monthLabel: {
|
11848
|
+
color: contrastColor
|
11849
|
+
},
|
11850
|
+
yearLabel: {
|
11851
|
+
color: contrastColor
|
11852
|
+
}
|
11853
|
+
},
|
11854
|
+
timeAxis: axisCommon(),
|
11855
|
+
logAxis: axisCommon(),
|
11856
|
+
valueAxis: axisCommon(),
|
11857
|
+
categoryAxis: axisCommon(),
|
11858
|
+
line: {
|
11859
|
+
symbol: 'circle'
|
11860
|
+
},
|
11861
|
+
graph: {
|
11862
|
+
color: colorPalette
|
11863
|
+
},
|
11864
|
+
gauge: {
|
11865
|
+
title: {
|
11866
|
+
color: contrastColor
|
11867
|
+
}
|
11868
|
+
},
|
11869
|
+
candlestick: {
|
11870
|
+
itemStyle: {
|
11871
|
+
color: '#FD1050',
|
11872
|
+
color0: '#0CF49B',
|
11873
|
+
borderColor: '#FD1050',
|
11874
|
+
borderColor0: '#0CF49B'
|
11875
|
+
}
|
11876
|
+
}
|
11877
|
+
};
|
11878
|
+
theme.categoryAxis.splitLine.show = false;
|
11879
|
+
|
11880
|
+
var RAF = /*#__PURE__*/function () {
|
11881
|
+
function RAF() {
|
11882
|
+
_classCallCheck(this, RAF);
|
11883
|
+
|
11884
|
+
this._timerIdMap = void 0;
|
11885
|
+
this._timerIdMap = {
|
11886
|
+
timeout: {},
|
11887
|
+
interval: {}
|
11888
|
+
};
|
11889
|
+
}
|
11890
|
+
|
11891
|
+
_createClass(RAF, [{
|
11892
|
+
key: "run",
|
11893
|
+
value: function run() {
|
11894
|
+
var _this = this;
|
11895
|
+
|
11896
|
+
var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'interval';
|
11897
|
+
var cb = arguments.length > 1 ? arguments[1] : undefined;
|
11898
|
+
var interval = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 16.7;
|
11899
|
+
// 每16.7毫秒刷新一次(一帧)
|
11900
|
+
var now = Date.now;
|
11901
|
+
var startTime = now();
|
11902
|
+
var endTime = startTime;
|
11903
|
+
var timerSymbol = Symbol();
|
11904
|
+
|
11905
|
+
var loop = function loop() {
|
11906
|
+
_this.setIdMap(timerSymbol, type, loop);
|
11907
|
+
|
11908
|
+
endTime = now();
|
11909
|
+
|
11910
|
+
if (endTime - startTime >= interval) {
|
11911
|
+
if (type === 'interval') {
|
11912
|
+
startTime = now();
|
11913
|
+
endTime = startTime;
|
11914
|
+
}
|
11915
|
+
|
11916
|
+
cb();
|
11917
|
+
type === 'timeout' && _this.clearTimeout(timerSymbol);
|
11918
|
+
}
|
11919
|
+
};
|
11920
|
+
|
11921
|
+
this.setIdMap(timerSymbol, type, loop);
|
11922
|
+
return timerSymbol;
|
11923
|
+
}
|
11924
|
+
}, {
|
11925
|
+
key: "setIdMap",
|
11926
|
+
value: function setIdMap(timerSymbol, type, loop) {
|
11927
|
+
var id = requestAnimationFrame(loop);
|
11928
|
+
this._timerIdMap[type][timerSymbol] = id;
|
11929
|
+
}
|
11930
|
+
}, {
|
11931
|
+
key: "setTimeout",
|
11932
|
+
value: function setTimeout(cb, interval) {
|
11933
|
+
return this.run('timeout', cb, interval);
|
11934
|
+
}
|
11935
|
+
}, {
|
11936
|
+
key: "clearTimeout",
|
11937
|
+
value: function clearTimeout(timer) {
|
11938
|
+
cancelAnimationFrame(this._timerIdMap.timeout[timer]);
|
11939
|
+
}
|
11940
|
+
}, {
|
11941
|
+
key: "setInterval",
|
11942
|
+
value: function setInterval(cb, interval) {
|
11943
|
+
return this.run('interval', cb, interval);
|
11944
|
+
}
|
11945
|
+
}, {
|
11946
|
+
key: "clearInterval",
|
11947
|
+
value: function clearInterval(timer) {
|
11948
|
+
cancelAnimationFrame(this._timerIdMap.interval[timer]);
|
11949
|
+
}
|
11950
|
+
}]);
|
11951
|
+
|
11952
|
+
return RAF;
|
11953
|
+
}();
|
11954
|
+
|
11955
|
+
/*
|
11956
|
+
* @Author: lijin
|
11957
|
+
* @Date: 2022-06-20 15:27:46
|
11958
|
+
* @LastEditTime: 2022-06-30 17:32:49
|
11959
|
+
* @LastEditors: caldelle 793238465@qq.com
|
11960
|
+
* @Description:
|
11961
|
+
* @FilePath: \hefeihz-web-bigscreen\src\hooks\useRAF.ts
|
11962
|
+
* 可以输入预定的版权声明、个性签名、空行等
|
11963
|
+
*/
|
11964
|
+
function useRAF() {
|
11965
|
+
var raf = React.useMemo(function () {
|
11966
|
+
return new RAF();
|
11967
|
+
}, []);
|
11968
|
+
return {
|
11969
|
+
raf: raf
|
11970
|
+
};
|
11971
|
+
}
|
11972
|
+
|
11973
|
+
echarts.use([components.TitleComponent, components.TooltipComponent, components.GridComponent, charts.BarChart, renderers.CanvasRenderer, charts.LineChart, charts.PieChart, charts.RadarChart, components.LegendComponent, components.LegendPlainComponent, components.MarkLineComponent, charts.PictorialBarChart, charts.CustomChart, components.LegendScrollComponent, components.PolarComponent, components.GraphicComponent, components.ToolboxComponent]);
|
11974
|
+
echarts.registerTheme('my_theme', theme); // The usage of ReactEChartsCore are same with above.
|
11975
|
+
|
11976
|
+
var ReactECharts = /*#__PURE__*/React__default['default'].memo(function (_ref) {
|
11977
|
+
var _option$highlightData, _option$highlightData2, _option$highlightData3;
|
11978
|
+
|
11979
|
+
var option = _ref.option,
|
11980
|
+
_ref$onChartReady = _ref.onChartReady,
|
11981
|
+
onChartReady = _ref$onChartReady === void 0 ? function () {} : _ref$onChartReady,
|
11982
|
+
_ref$EventsDict = _ref.EventsDict,
|
11983
|
+
EventsDict = _ref$EventsDict === void 0 ? {} : _ref$EventsDict,
|
11984
|
+
_ref$style = _ref.style,
|
11985
|
+
style = _ref$style === void 0 ? {} : _ref$style,
|
11986
|
+
ref = _ref.ref,
|
11987
|
+
_ref$autoLoop = _ref.autoLoop,
|
11988
|
+
autoLoop = _ref$autoLoop === void 0 ? true : _ref$autoLoop,
|
11989
|
+
_ref$duration = _ref.duration,
|
11990
|
+
duration = _ref$duration === void 0 ? 2000 : _ref$duration,
|
11991
|
+
_ref$seriesIndex = _ref.seriesIndex,
|
11992
|
+
seriesIndex = _ref$seriesIndex === void 0 ? 0 : _ref$seriesIndex,
|
11993
|
+
opts = _ref.opts,
|
11994
|
+
otherProps = _ref.otherProps;
|
11995
|
+
|
11996
|
+
var _useRAF = useRAF(),
|
11997
|
+
raf = _useRAF.raf;
|
11998
|
+
|
11999
|
+
var _useState = React.useState(-1),
|
12000
|
+
_useState2 = _slicedToArray(_useState, 2),
|
12001
|
+
currentIndex = _useState2[0],
|
12002
|
+
setCurrentIndex = _useState2[1];
|
12003
|
+
|
12004
|
+
var instance = React.useRef(null);
|
12005
|
+
var timer = React.useRef(null);
|
12006
|
+
var timeoutTimer = React.useRef(null);
|
12007
|
+
|
12008
|
+
var _useState3 = React.useState(false),
|
12009
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
12010
|
+
Flag = _useState4[0],
|
12011
|
+
setFlag = _useState4[1];
|
12012
|
+
|
12013
|
+
var length = (_option$highlightData = option === null || option === void 0 ? void 0 : (_option$highlightData2 = option.highlightData) === null || _option$highlightData2 === void 0 ? void 0 : _option$highlightData2.length) !== null && _option$highlightData !== void 0 ? _option$highlightData : 0;
|
12014
|
+
var current = option === null || option === void 0 ? void 0 : (_option$highlightData3 = option.highlightData) === null || _option$highlightData3 === void 0 ? void 0 : _option$highlightData3[currentIndex];
|
12015
|
+
var currentName = typeof current === 'string' ? current : current === null || current === void 0 ? void 0 : current.name;
|
12016
|
+
React.useEffect(function () {
|
12017
|
+
if (autoLoop && length > 1) {
|
12018
|
+
timer.current = raf.setInterval(function () {
|
12019
|
+
setCurrentIndex(function (index) {
|
12020
|
+
return index >= length - 1 ? 0 : index + 1;
|
12021
|
+
});
|
12022
|
+
}, duration);
|
12023
|
+
} else {
|
12024
|
+
setCurrentIndex(-1);
|
12025
|
+
timer.current && raf.clearInterval(timer.current);
|
12026
|
+
}
|
12027
|
+
|
12028
|
+
return function () {
|
12029
|
+
timer.current && raf.clearInterval(timer.current);
|
12030
|
+
};
|
12031
|
+
}, [autoLoop, duration, raf, length]);
|
12032
|
+
React.useEffect(function () {
|
12033
|
+
if (!instance.current) {
|
12034
|
+
return;
|
12035
|
+
}
|
12036
|
+
|
12037
|
+
instance.current.dispatchAction({
|
12038
|
+
type: 'downplay'
|
12039
|
+
});
|
12040
|
+
instance.current.dispatchAction({
|
12041
|
+
type: 'hideTip'
|
12042
|
+
});
|
12043
|
+
|
12044
|
+
if (currentIndex > -1) {
|
12045
|
+
instance.current.dispatchAction({
|
12046
|
+
type: 'showTip',
|
12047
|
+
seriesIndex: seriesIndex,
|
12048
|
+
dataIndex: currentIndex
|
12049
|
+
});
|
12050
|
+
currentName && instance.current.dispatchAction({
|
12051
|
+
type: 'highlight',
|
12052
|
+
name: currentName
|
12053
|
+
});
|
12054
|
+
}
|
12055
|
+
}, [currentIndex, instance, seriesIndex, currentName]);
|
12056
|
+
|
12057
|
+
var onChartReadyCallback = function onChartReadyCallback(chart) {
|
12058
|
+
instance.current = chart;
|
12059
|
+
onChartReady(chart, option);
|
12060
|
+
timeoutTimer.current = raf.setTimeout(function () {
|
12061
|
+
instance.current.resize();
|
12062
|
+
}, 20);
|
12063
|
+
};
|
12064
|
+
|
12065
|
+
React.useEffect(function () {
|
12066
|
+
filter(option);
|
12067
|
+
}, [option]);
|
12068
|
+
|
12069
|
+
var filter = function filter(option) {
|
12070
|
+
var _option$series;
|
12071
|
+
|
12072
|
+
var flag = option === null || option === void 0 ? void 0 : (_option$series = option.series) === null || _option$series === void 0 ? void 0 : _option$series.every(function (item) {
|
12073
|
+
return !item.data || item.data.length == 0;
|
12074
|
+
});
|
12075
|
+
setFlag(flag);
|
12076
|
+
return option;
|
12077
|
+
};
|
12078
|
+
|
12079
|
+
React.useEffect(function () {
|
12080
|
+
var resizeHandler = function resizeHandler() {
|
12081
|
+
if (instance.current) {
|
12082
|
+
instance.current.resize();
|
12083
|
+
}
|
12084
|
+
};
|
12085
|
+
|
12086
|
+
window.addEventListener('resize', resizeHandler);
|
12087
|
+
return function () {
|
12088
|
+
timeoutTimer.current && raf.clearTimeout(timeoutTimer.current);
|
12089
|
+
window.removeEventListener('resize', resizeHandler);
|
12090
|
+
};
|
12091
|
+
}, []);
|
12092
|
+
return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(ReactEChartsCore__default['default'], _objectSpread2({
|
12093
|
+
ref: ref,
|
12094
|
+
echarts: echarts__namespace,
|
12095
|
+
option: option,
|
12096
|
+
notMerge: true,
|
12097
|
+
lazyUpdate: true,
|
12098
|
+
style: style,
|
12099
|
+
theme: 'my_theme',
|
12100
|
+
onChartReady: onChartReadyCallback,
|
12101
|
+
onEvents: EventsDict,
|
12102
|
+
opts: opts || {}
|
12103
|
+
}, otherProps)));
|
12104
|
+
});
|
12105
|
+
|
12106
|
+
var lineOption = function lineOption(_ref) {
|
12107
|
+
var list = _ref.list,
|
12108
|
+
xdata = _ref.xdata;
|
12109
|
+
return {
|
12110
|
+
grid: {
|
12111
|
+
top: '18%',
|
12112
|
+
bottom: 1,
|
12113
|
+
left: 20,
|
12114
|
+
right: 20,
|
12115
|
+
containLabel: true
|
12116
|
+
},
|
12117
|
+
tooltip: {
|
12118
|
+
trigger: 'axis',
|
12119
|
+
backgroundColor: '#012536',
|
12120
|
+
borderColor: 'rgba(81,190,246,1)',
|
12121
|
+
textStyle: {
|
12122
|
+
color: '#daeef7',
|
12123
|
+
fontSize: calcWidth(24)
|
12124
|
+
},
|
12125
|
+
position: function position(point, params, dom, rect, size) {
|
12126
|
+
// 其中point为当前鼠标的位置,size中有两个属性:viewSize和contentSize,分别为外层div和tooltip提示框的大小
|
12127
|
+
var x = point[0]; //
|
12128
|
+
|
12129
|
+
var y = point[1];
|
12130
|
+
var viewWidth = size.viewSize[0];
|
12131
|
+
var viewHeight = size.viewSize[1];
|
12132
|
+
var boxWidth = size.contentSize[0];
|
12133
|
+
var boxHeight = size.contentSize[1];
|
12134
|
+
var posX = 0; // x坐标位置
|
12135
|
+
|
12136
|
+
var posY = 0; // y坐标位置
|
12137
|
+
|
12138
|
+
if (x < boxWidth) {
|
12139
|
+
// 左边放不开
|
12140
|
+
posX = 5;
|
12141
|
+
} else {
|
12142
|
+
// 左边放的下
|
12143
|
+
posX = x - boxWidth;
|
12144
|
+
}
|
12145
|
+
|
12146
|
+
if (y < boxHeight) {
|
12147
|
+
// 上边放不开
|
12148
|
+
posY = 5;
|
12149
|
+
} else {
|
12150
|
+
// 上边放得下
|
12151
|
+
posY = y - boxHeight;
|
12152
|
+
}
|
12153
|
+
|
12154
|
+
return [posX, posY];
|
12155
|
+
},
|
12156
|
+
axisPointer: {
|
12157
|
+
lineStyle: {
|
12158
|
+
color: {
|
12159
|
+
type: 'linear',
|
12160
|
+
x: 0,
|
12161
|
+
y: 0,
|
12162
|
+
x2: 0,
|
12163
|
+
y2: 1,
|
12164
|
+
colorStops: [{
|
12165
|
+
offset: 0,
|
12166
|
+
color: 'rgba(255,255,255,0)' // 0% 处的颜色
|
12167
|
+
|
12168
|
+
}, {
|
12169
|
+
offset: 0.5,
|
12170
|
+
color: 'rgba(255,255,255,1)' // 100% 处的颜色
|
12171
|
+
|
12172
|
+
}, {
|
12173
|
+
offset: 1,
|
12174
|
+
color: 'rgba(255,255,255,0)' // 100% 处的颜色
|
12175
|
+
|
12176
|
+
}],
|
12177
|
+
global: false // 缺省为 false
|
12178
|
+
|
12179
|
+
}
|
12180
|
+
}
|
12181
|
+
},
|
12182
|
+
formatter: function formatter(params) {
|
12183
|
+
if (params.length == 0) {
|
12184
|
+
return null;
|
12185
|
+
}
|
12186
|
+
|
12187
|
+
var dom = '';
|
12188
|
+
params.map(function (item) {
|
12189
|
+
dom = dom + " <div><?xml version=\"1.0\" standalone=\"no\"?><!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">\n <svg t=\"1655805829921\" class=\"icon\" viewBox=\"0 0 1024 1024\" fill=\"".concat(item.color, "\"; version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"5439\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"").concat(calcWidth(20), "px\" height=\"").concat(calcHeight(20), "px\" style=\"margin-right:").concat(calcWidth(10), "px\">\n <defs><style type=\"text/css\">@font-face { font-family: feedback-iconfont; src: url(\"//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944\") format(\"woff2\"), url(\"//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944\") format(\"woff\"), url(\"//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944\") format(\"truetype\"); }\n </style></defs><path d=\"M512 512m-256 0a256 256 0 1 0 512 0 256 256 0 1 0-512 0Z\" p-id=\"5440\"></path><path d=\"M512 20.48C239.616 20.48 20.48 239.616 20.48 512s219.136 491.52 491.52 491.52 491.52-219.136 491.52-491.52S784.384 20.48 512 20.48z m0 899.072C286.72 919.552 104.448 737.28 104.448 512 104.448 286.72 286.72 104.448 512 104.448 737.28 104.448 919.552 286.72 919.552 512c0 225.28-182.272 407.552-407.552 407.552z\" p-id=\"5441\"></path></svg>").concat(item.seriesName, " : ").concat(item.value, "</div>");
|
12190
|
+
});
|
12191
|
+
return dom;
|
12192
|
+
}
|
12193
|
+
},
|
12194
|
+
legend: {
|
12195
|
+
top: 0,
|
12196
|
+
itemGap: calcWidth(20),
|
12197
|
+
show: true,
|
12198
|
+
textStyle: {
|
12199
|
+
fontSize: calcWidth(24),
|
12200
|
+
color: '#ccf8fb',
|
12201
|
+
lineHeight: calcHeight(20)
|
12202
|
+
},
|
12203
|
+
data: list === null || list === void 0 ? void 0 : list.map(function (item) {
|
12204
|
+
return {
|
12205
|
+
name: item.name,
|
12206
|
+
icon: "path://M512 512m-256 0a256 256 0 1 0 512 0 256 256 0 1 0-512 0Z,M512 20.48C239.616 20.48 20.48 239.616 20.48 512s219.136 491.52 491.52 491.52 491.52-219.136 491.52-491.52S784.384 20.48 512 20.48z m0 899.072C286.72 919.552 104.448 737.28 104.448 512 104.448 286.72 286.72 104.448 512 104.448 737.28 104.448 919.552 286.72 919.552 512c0 225.28-182.272 407.552-407.552 407.552z"
|
12207
|
+
};
|
12208
|
+
}),
|
12209
|
+
itemWidth: calcWidth(20),
|
12210
|
+
itemHeight: calcHeight(20)
|
12211
|
+
},
|
12212
|
+
xAxis: [{
|
12213
|
+
type: 'category',
|
12214
|
+
axisLabel: {
|
12215
|
+
formatter: '{value}',
|
12216
|
+
// interval: 0,
|
12217
|
+
fontSize: calcWidth(24),
|
12218
|
+
color: '#ccf8fb',
|
12219
|
+
margin: 20
|
12220
|
+
},
|
12221
|
+
axisLine: {
|
12222
|
+
lineStyle: {
|
12223
|
+
color: '#2c3641'
|
12224
|
+
}
|
12225
|
+
},
|
12226
|
+
splitLine: {
|
12227
|
+
show: false,
|
12228
|
+
lineStyle: {
|
12229
|
+
color: '#2c3641'
|
12230
|
+
}
|
12231
|
+
},
|
12232
|
+
axisTick: {
|
12233
|
+
show: false
|
12234
|
+
},
|
12235
|
+
data: xdata
|
12236
|
+
}],
|
12237
|
+
yAxis: [{
|
12238
|
+
type: 'value',
|
12239
|
+
splitLine: {
|
12240
|
+
lineStyle: {
|
12241
|
+
color: '#2c3641'
|
12242
|
+
}
|
12243
|
+
},
|
12244
|
+
axisLabel: {
|
12245
|
+
fontSize: calcWidth(24),
|
12246
|
+
color: '#ccf8fb',
|
12247
|
+
margin: 20
|
12248
|
+
},
|
12249
|
+
axisLine: {
|
12250
|
+
show: true,
|
12251
|
+
lineStyle: {
|
12252
|
+
color: '#2c3641'
|
12253
|
+
}
|
12254
|
+
},
|
12255
|
+
axisTick: {
|
12256
|
+
show: false
|
12257
|
+
}
|
12258
|
+
}],
|
12259
|
+
series: list === null || list === void 0 ? void 0 : list.map(function (item) {
|
12260
|
+
return {
|
12261
|
+
name: item.name,
|
12262
|
+
type: 'line',
|
12263
|
+
sampling: 'lttb',
|
12264
|
+
symbolSize: 8,
|
12265
|
+
itemStyle: {
|
12266
|
+
color: item.color
|
12267
|
+
},
|
12268
|
+
zlevel: 3,
|
12269
|
+
lineStyle: {
|
12270
|
+
normal: {
|
12271
|
+
width: calcWidth(2),
|
12272
|
+
color: item.color
|
12273
|
+
}
|
12274
|
+
},
|
12275
|
+
data: item.data
|
12276
|
+
};
|
12277
|
+
})
|
12278
|
+
};
|
12279
|
+
};
|
12280
|
+
|
12281
|
+
function LineEcharts(_ref2) {
|
12282
|
+
var config = _ref2.config;
|
12283
|
+
console.log(config);
|
12284
|
+
return /*#__PURE__*/React__default['default'].createElement(ReactECharts, {
|
12285
|
+
option: lineOption(config),
|
12286
|
+
style: {
|
12287
|
+
height: '100%'
|
12288
|
+
}
|
12289
|
+
});
|
12290
|
+
}
|
12291
|
+
|
11665
12292
|
exports.AutoScroll = Index$9;
|
11666
12293
|
exports.Breadcrumb = Index$b;
|
11667
12294
|
exports.Button = WButton;
|
@@ -11673,6 +12300,7 @@ exports.DatePicker = Index$1;
|
|
11673
12300
|
exports.IconFont = index;
|
11674
12301
|
exports.Input = Index;
|
11675
12302
|
exports.InputNumber = WInputNumber;
|
12303
|
+
exports.LineEcharts = LineEcharts;
|
11676
12304
|
exports.Modal = Modal;
|
11677
12305
|
exports.ModalForm = ModalForm$1;
|
11678
12306
|
exports.ModalTips = Modal$1;
|