wargerm 0.4.24 → 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/index.esm.js CHANGED
@@ -52,6 +52,12 @@ import Player from 'xgplayer';
52
52
  import FlvPlayer from 'xgplayer-flv.js';
53
53
  import HlsJsPlayer from 'xgplayer-hls.js';
54
54
  import { isEmpty } from 'lodash';
55
+ import ReactEChartsCore from 'echarts-for-react/lib/core';
56
+ import * as echarts from 'echarts/core';
57
+ import { use, registerTheme } from 'echarts/core';
58
+ import { BarChart, LineChart, PieChart, RadarChart, PictorialBarChart, CustomChart } from 'echarts/charts';
59
+ import { TitleComponent, TooltipComponent, GridComponent, LegendComponent, LegendPlainComponent, MarkLineComponent, LegendScrollComponent, PolarComponent, GraphicComponent, ToolboxComponent } from 'echarts/components';
60
+ import { CanvasRenderer } from 'echarts/renderers';
55
61
 
56
62
  function ownKeys(object, enumerableOnly) {
57
63
  var keys = Object.keys(object);
@@ -540,8 +546,8 @@ Index$3.Group = _Checkbox.Group;
540
546
  /*
541
547
  * @Author: lijin
542
548
  * @Date: 2021-10-27 22:18:49
543
- * @LastEditTime: 2021-10-29 14:50:11
544
- * @LastEditors: lijin
549
+ * @LastEditTime: 2022-06-30 16:51:49
550
+ * @LastEditors: caldelle 793238465@qq.com
545
551
  * @Description:
546
552
  * @FilePath: \wargerm\src\utils\index.ts
547
553
  * 可以输入预定的版权声明、个性签名、空行等
@@ -601,6 +607,12 @@ function getArrayLayer(arr, attr) {
601
607
 
602
608
  return newIndex;
603
609
  }
610
+ var calcWidth = function calcWidth(width) {
611
+ return document.body.clientWidth / 3840 * width;
612
+ };
613
+ var calcHeight = function calcHeight(height) {
614
+ return document.body.clientHeight / 2160 * height;
615
+ };
604
616
 
605
617
  var _excluded$1 = ["className", "frameStyle", "style", "direction", "children"];
606
618
  function FrameBox(_ref) {
@@ -11133,7 +11145,7 @@ function Xgplay(_ref, fRef) {
11133
11145
  var playerRef = useRef(null);
11134
11146
  useEffect(function () {
11135
11147
  if (ref.current) {
11136
- if ((type === null || type === void 0 ? void 0 : type.indexOf('hls')) !== -1) {
11148
+ if ((type === null || type === void 0 ? void 0 : type.indexOf('m3u8')) !== -1) {
11137
11149
  playerRef.current = new HlsJsPlayer(_objectSpread2({
11138
11150
  el: ref.current,
11139
11151
  width: '100%',
@@ -11142,6 +11154,7 @@ function Xgplay(_ref, fRef) {
11142
11154
  isLive: true,
11143
11155
  autoplayMuted: true
11144
11156
  }, config));
11157
+ setRef(playerRef.current);
11145
11158
  } else if ((type === null || type === void 0 ? void 0 : type.indexOf('flv')) !== -1) {
11146
11159
  playerRef.current = new FlvPlayer(_objectSpread2({
11147
11160
  el: ref.current,
@@ -11149,8 +11162,21 @@ function Xgplay(_ref, fRef) {
11149
11162
  height: '100%',
11150
11163
  autoplay: true,
11151
11164
  isLive: true,
11152
- autoplayMuted: true
11165
+ autoplayMuted: true,
11166
+ flvOptionalConfig: {
11167
+ enableWorker: true,
11168
+ enableStashBuffer: false,
11169
+ stashInitialSize: 2048,
11170
+ lazyLoad: true,
11171
+ lazyLoadMaxDuration: 2 * 60,
11172
+ autoCleanupSourceBuffer: true,
11173
+ autoCleanupMaxBackwardDuration: 35 * 60,
11174
+ autoCleanupMinBackwardDuration: 30 * 60,
11175
+ reuseRedirectedURL: true //重用301/302重定向url,用于随后的请求,如查找、重新连接等
11176
+
11177
+ }
11153
11178
  }, config));
11179
+ setRef(playerRef.current);
11154
11180
  } else if ((type === null || type === void 0 ? void 0 : type.indexOf('mp4')) !== -1) {
11155
11181
  playerRef.current = new Player(_objectSpread2({
11156
11182
  el: ref.current,
@@ -11160,24 +11186,20 @@ function Xgplay(_ref, fRef) {
11160
11186
  isLive: true,
11161
11187
  autoplayMuted: true
11162
11188
  }, config));
11189
+ setRef(playerRef.current);
11163
11190
  }
11164
11191
  }
11165
11192
 
11193
+ console.log('playerRef.current', playerRef.current);
11166
11194
  return function () {
11167
- playerRef.current = null;
11168
- };
11169
- }, []);
11170
- useEffect(function () {
11171
- if (playerRef.current) {
11172
- setRef(playerRef.current);
11173
- }
11174
-
11175
- return function () {
11176
- var _playerRef$current, _playerRef$current2;
11195
+ var _playerRef$current, _playerRef$current2, _playerRef$current2$h, _playerRef$current3, _playerRef$current3$f, _playerRef$current4;
11177
11196
 
11178
11197
  (_playerRef$current = playerRef.current) === null || _playerRef$current === void 0 ? void 0 : _playerRef$current.pause();
11179
- (_playerRef$current2 = playerRef.current) === null || _playerRef$current2 === void 0 ? void 0 : _playerRef$current2.destroy(true);
11198
+ (_playerRef$current2 = playerRef.current) === null || _playerRef$current2 === void 0 ? void 0 : (_playerRef$current2$h = _playerRef$current2.hls) === null || _playerRef$current2$h === void 0 ? void 0 : _playerRef$current2$h.destroy();
11199
+ (_playerRef$current3 = playerRef.current) === null || _playerRef$current3 === void 0 ? void 0 : (_playerRef$current3$f = _playerRef$current3.flv) === null || _playerRef$current3$f === void 0 ? void 0 : _playerRef$current3$f.destroy();
11200
+ (_playerRef$current4 = playerRef.current) === null || _playerRef$current4 === void 0 ? void 0 : _playerRef$current4.destroy(true);
11180
11201
  setRef(null);
11202
+ playerRef.current = null;
11181
11203
  };
11182
11204
  }, []);
11183
11205
  useImperativeHandle(fRef, function () {
@@ -11222,8 +11244,10 @@ function VideoPlayer(_ref, ref) {
11222
11244
  config = _ref$config === void 0 ? {} : _ref$config,
11223
11245
  layoutIndex = _ref.layoutIndex,
11224
11246
  _ref$url = _ref.url,
11225
- url = _ref$url === void 0 ? [] : _ref$url;
11226
- var layouts = [{
11247
+ url = _ref$url === void 0 ? [] : _ref$url,
11248
+ _ref$layouts = _ref.layouts,
11249
+ layouts = _ref$layouts === void 0 ? [] : _ref$layouts;
11250
+ var basicLayouts = [{
11227
11251
  title: '1x1布局',
11228
11252
  style: {
11229
11253
  gridTemplateColumns: '1fr',
@@ -11255,6 +11279,7 @@ function VideoPlayer(_ref, ref) {
11255
11279
  }),
11256
11280
  span: 9
11257
11281
  }];
11282
+ var allLayouts = [].concat(_toConsumableArray(layouts), basicLayouts);
11258
11283
 
11259
11284
  var _useState = useState(layoutIndex || 0),
11260
11285
  _useState2 = _slicedToArray(_useState, 2),
@@ -11266,7 +11291,7 @@ function VideoPlayer(_ref, ref) {
11266
11291
  urls = _useState4[0],
11267
11292
  setUrls = _useState4[1];
11268
11293
 
11269
- var initPlayerIndex = layouts[layoutIndex || 0].span >= url.length ? url.length - 1 >= 0 ? url.length - 1 : 0 : layouts[layoutIndex || 0].span - 1;
11294
+ var initPlayerIndex = allLayouts[layoutIndex || 0].span >= url.length ? url.length - 1 >= 0 ? url.length - 1 : 0 : allLayouts[layoutIndex || 0].span - 1;
11270
11295
 
11271
11296
  var _useState5 = useState(initPlayerIndex),
11272
11297
  _useState6 = _slicedToArray(_useState5, 2),
@@ -11282,7 +11307,7 @@ function VideoPlayer(_ref, ref) {
11282
11307
  setPlayers = _useState8[1];
11283
11308
 
11284
11309
  var renderDom = useMemo(function () {
11285
- var arr = new Array(layouts[currentLayoutIndex].span).fill(0);
11310
+ var arr = new Array(allLayouts[currentLayoutIndex].span).fill(0);
11286
11311
  return arr.map(function (item, index) {
11287
11312
  return /*#__PURE__*/React.createElement("div", {
11288
11313
  key: index,
@@ -11363,22 +11388,24 @@ function VideoPlayer(_ref, ref) {
11363
11388
  }, /*#__PURE__*/React.createElement("div", {
11364
11389
  ref: domRef,
11365
11390
  className: "videoContainer-grid",
11366
- style: layouts[currentLayoutIndex].style
11391
+ style: allLayouts[currentLayoutIndex].style
11367
11392
  }, renderDom), footer ? /*#__PURE__*/React.createElement("div", {
11368
11393
  className: "tools"
11369
- }, layouts.map(function (item, index) {
11394
+ }, allLayouts.map(function (item, index) {
11370
11395
  return /*#__PURE__*/React.createElement("div", {
11371
11396
  key: index,
11372
11397
  className: "btnbox",
11373
11398
  onClick: function onClick() {
11374
- var playerIndex = layouts[index || 0].span > url.length ? url.length - 1 >= 0 ? url.length : 0 : layouts[index || 0].span - 1;
11399
+ var playerIndex = allLayouts[index || 0].span > url.length ? url.length - 1 >= 0 ? url.length : 0 : allLayouts[index || 0].span - 1;
11375
11400
  setCurrentPlayerIndex(playerIndex);
11376
11401
  setCurrentLayoutIndex(index);
11377
11402
  }
11378
11403
  }, /*#__PURE__*/React.createElement(_Tooltip, {
11379
11404
  placement: "top",
11380
11405
  title: item.title
11381
- }, item.icon));
11406
+ }, item.icon || /*#__PURE__*/React.createElement(IconFont, {
11407
+ type: "icon-dantupailie"
11408
+ })));
11382
11409
  })) : null));
11383
11410
  }
11384
11411
 
@@ -11614,4 +11641,593 @@ var index$4 = (function (_ref) {
11614
11641
  });
11615
11642
  });
11616
11643
 
11617
- export { Index$9 as AutoScroll, Index$b as Breadcrumb, WButton as Button, index$1 as Card, WCascader as Cascader, Index$3 as Checkbox, Index$8 as CountUp, Index$1 as DatePicker, index as IconFont, Index as Input, WInputNumber as InputNumber, Modal, ModalForm$1 as ModalForm, Modal$1 as ModalTips, Index$7 as Number, NumericInput, Index$2 as Radio, Select, Index$a as Swiper, WSwitch as Switch, index$2 as TabelCard, Table, Index$6 as TreeSelect, index$4 as Video, index$3 as VideoPlayer, Index$5 as WDatePicker, WForm$1 as WForm, WebsocketHeart };
11644
+ /*
11645
+ * @Author: lijin
11646
+ * @Date: 2021-08-04 13:22:21
11647
+ * @LastEditTime: 2021-08-04 13:25:19
11648
+ * @LastEditors: lijin
11649
+ * @Description:
11650
+ * @FilePath: \big-screen\src\components\ReactECharts\theme.ts
11651
+ * 可以输入预定的版权声明、个性签名、空行等
11652
+ */
11653
+ var contrastColor = '#9EA1A7';
11654
+ var backgroundColor = 'transparent';
11655
+
11656
+ var axisCommon = function axisCommon() {
11657
+ return {
11658
+ axisLine: {
11659
+ lineStyle: {
11660
+ color: contrastColor
11661
+ }
11662
+ },
11663
+ splitLine: {
11664
+ lineStyle: {
11665
+ color: '#2c3641'
11666
+ }
11667
+ },
11668
+ splitArea: {
11669
+ areaStyle: {
11670
+ color: ['rgba(255,255,255,0.02)', 'rgba(255,255,255,0.05)']
11671
+ }
11672
+ },
11673
+ minorSplitLine: {
11674
+ lineStyle: {
11675
+ color: '#20203B'
11676
+ }
11677
+ }
11678
+ };
11679
+ };
11680
+
11681
+ var colorPalette = ['#4992ff', '#7cffb2', '#fddd60', '#ff6e76', '#58d9f9', '#05c091', '#ff8a45', '#8d48e3', '#dd79ff'];
11682
+ var theme = {
11683
+ darkMode: true,
11684
+ color: colorPalette,
11685
+ backgroundColor: backgroundColor,
11686
+ axisPointer: {
11687
+ lineStyle: {
11688
+ color: '#817f91'
11689
+ },
11690
+ crossStyle: {
11691
+ color: '#817f91'
11692
+ },
11693
+ label: {
11694
+ color: contrastColor,
11695
+ backgroundColor: '#104873'
11696
+ }
11697
+ },
11698
+ legend: {
11699
+ textStyle: {
11700
+ color: contrastColor
11701
+ }
11702
+ },
11703
+ textStyle: {
11704
+ color: contrastColor
11705
+ },
11706
+ title: {
11707
+ textStyle: {
11708
+ color: '#EEF1FA'
11709
+ },
11710
+ subtextStyle: {
11711
+ color: '#B9B8CE'
11712
+ }
11713
+ },
11714
+ toolbox: {
11715
+ iconStyle: {
11716
+ borderColor: contrastColor
11717
+ }
11718
+ },
11719
+ dataZoom: {
11720
+ borderColor: '#71708A',
11721
+ textStyle: {
11722
+ color: contrastColor
11723
+ },
11724
+ brushStyle: {
11725
+ color: 'rgba(135,163,206,0.3)'
11726
+ },
11727
+ handleStyle: {
11728
+ color: '#353450',
11729
+ borderColor: '#C5CBE3'
11730
+ },
11731
+ moveHandleStyle: {
11732
+ color: '#B0B6C3',
11733
+ opacity: 0.3
11734
+ },
11735
+ fillerColor: 'rgba(135,163,206,0.2)',
11736
+ emphasis: {
11737
+ handleStyle: {
11738
+ borderColor: '#91B7F2',
11739
+ color: '#4D587D'
11740
+ },
11741
+ moveHandleStyle: {
11742
+ color: '#636D9A',
11743
+ opacity: 0.7
11744
+ }
11745
+ },
11746
+ dataBackground: {
11747
+ lineStyle: {
11748
+ color: '#71708A',
11749
+ width: 1
11750
+ },
11751
+ areaStyle: {
11752
+ color: '#71708A'
11753
+ }
11754
+ },
11755
+ selectedDataBackground: {
11756
+ lineStyle: {
11757
+ color: '#87A3CE'
11758
+ },
11759
+ areaStyle: {
11760
+ color: '#87A3CE'
11761
+ }
11762
+ }
11763
+ },
11764
+ visualMap: {
11765
+ textStyle: {
11766
+ color: contrastColor
11767
+ }
11768
+ },
11769
+ timeline: {
11770
+ lineStyle: {
11771
+ color: contrastColor
11772
+ },
11773
+ label: {
11774
+ color: contrastColor
11775
+ },
11776
+ controlStyle: {
11777
+ color: contrastColor,
11778
+ borderColor: contrastColor
11779
+ }
11780
+ },
11781
+ calendar: {
11782
+ itemStyle: {
11783
+ color: backgroundColor
11784
+ },
11785
+ dayLabel: {
11786
+ color: contrastColor
11787
+ },
11788
+ monthLabel: {
11789
+ color: contrastColor
11790
+ },
11791
+ yearLabel: {
11792
+ color: contrastColor
11793
+ }
11794
+ },
11795
+ timeAxis: axisCommon(),
11796
+ logAxis: axisCommon(),
11797
+ valueAxis: axisCommon(),
11798
+ categoryAxis: axisCommon(),
11799
+ line: {
11800
+ symbol: 'circle'
11801
+ },
11802
+ graph: {
11803
+ color: colorPalette
11804
+ },
11805
+ gauge: {
11806
+ title: {
11807
+ color: contrastColor
11808
+ }
11809
+ },
11810
+ candlestick: {
11811
+ itemStyle: {
11812
+ color: '#FD1050',
11813
+ color0: '#0CF49B',
11814
+ borderColor: '#FD1050',
11815
+ borderColor0: '#0CF49B'
11816
+ }
11817
+ }
11818
+ };
11819
+ theme.categoryAxis.splitLine.show = false;
11820
+
11821
+ var RAF = /*#__PURE__*/function () {
11822
+ function RAF() {
11823
+ _classCallCheck(this, RAF);
11824
+
11825
+ this._timerIdMap = void 0;
11826
+ this._timerIdMap = {
11827
+ timeout: {},
11828
+ interval: {}
11829
+ };
11830
+ }
11831
+
11832
+ _createClass(RAF, [{
11833
+ key: "run",
11834
+ value: function run() {
11835
+ var _this = this;
11836
+
11837
+ var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'interval';
11838
+ var cb = arguments.length > 1 ? arguments[1] : undefined;
11839
+ var interval = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 16.7;
11840
+ // 每16.7毫秒刷新一次(一帧)
11841
+ var now = Date.now;
11842
+ var startTime = now();
11843
+ var endTime = startTime;
11844
+ var timerSymbol = Symbol();
11845
+
11846
+ var loop = function loop() {
11847
+ _this.setIdMap(timerSymbol, type, loop);
11848
+
11849
+ endTime = now();
11850
+
11851
+ if (endTime - startTime >= interval) {
11852
+ if (type === 'interval') {
11853
+ startTime = now();
11854
+ endTime = startTime;
11855
+ }
11856
+
11857
+ cb();
11858
+ type === 'timeout' && _this.clearTimeout(timerSymbol);
11859
+ }
11860
+ };
11861
+
11862
+ this.setIdMap(timerSymbol, type, loop);
11863
+ return timerSymbol;
11864
+ }
11865
+ }, {
11866
+ key: "setIdMap",
11867
+ value: function setIdMap(timerSymbol, type, loop) {
11868
+ var id = requestAnimationFrame(loop);
11869
+ this._timerIdMap[type][timerSymbol] = id;
11870
+ }
11871
+ }, {
11872
+ key: "setTimeout",
11873
+ value: function setTimeout(cb, interval) {
11874
+ return this.run('timeout', cb, interval);
11875
+ }
11876
+ }, {
11877
+ key: "clearTimeout",
11878
+ value: function clearTimeout(timer) {
11879
+ cancelAnimationFrame(this._timerIdMap.timeout[timer]);
11880
+ }
11881
+ }, {
11882
+ key: "setInterval",
11883
+ value: function setInterval(cb, interval) {
11884
+ return this.run('interval', cb, interval);
11885
+ }
11886
+ }, {
11887
+ key: "clearInterval",
11888
+ value: function clearInterval(timer) {
11889
+ cancelAnimationFrame(this._timerIdMap.interval[timer]);
11890
+ }
11891
+ }]);
11892
+
11893
+ return RAF;
11894
+ }();
11895
+
11896
+ /*
11897
+ * @Author: lijin
11898
+ * @Date: 2022-06-20 15:27:46
11899
+ * @LastEditTime: 2022-06-30 17:32:49
11900
+ * @LastEditors: caldelle 793238465@qq.com
11901
+ * @Description:
11902
+ * @FilePath: \hefeihz-web-bigscreen\src\hooks\useRAF.ts
11903
+ * 可以输入预定的版权声明、个性签名、空行等
11904
+ */
11905
+ function useRAF() {
11906
+ var raf = useMemo(function () {
11907
+ return new RAF();
11908
+ }, []);
11909
+ return {
11910
+ raf: raf
11911
+ };
11912
+ }
11913
+
11914
+ use([TitleComponent, TooltipComponent, GridComponent, BarChart, CanvasRenderer, LineChart, PieChart, RadarChart, LegendComponent, LegendPlainComponent, MarkLineComponent, PictorialBarChart, CustomChart, LegendScrollComponent, PolarComponent, GraphicComponent, ToolboxComponent]);
11915
+ registerTheme('my_theme', theme); // The usage of ReactEChartsCore are same with above.
11916
+
11917
+ var ReactECharts = /*#__PURE__*/React.memo(function (_ref) {
11918
+ var _option$highlightData, _option$highlightData2, _option$highlightData3;
11919
+
11920
+ var option = _ref.option,
11921
+ _ref$onChartReady = _ref.onChartReady,
11922
+ onChartReady = _ref$onChartReady === void 0 ? function () {} : _ref$onChartReady,
11923
+ _ref$EventsDict = _ref.EventsDict,
11924
+ EventsDict = _ref$EventsDict === void 0 ? {} : _ref$EventsDict,
11925
+ _ref$style = _ref.style,
11926
+ style = _ref$style === void 0 ? {} : _ref$style,
11927
+ ref = _ref.ref,
11928
+ _ref$autoLoop = _ref.autoLoop,
11929
+ autoLoop = _ref$autoLoop === void 0 ? true : _ref$autoLoop,
11930
+ _ref$duration = _ref.duration,
11931
+ duration = _ref$duration === void 0 ? 2000 : _ref$duration,
11932
+ _ref$seriesIndex = _ref.seriesIndex,
11933
+ seriesIndex = _ref$seriesIndex === void 0 ? 0 : _ref$seriesIndex,
11934
+ opts = _ref.opts,
11935
+ otherProps = _ref.otherProps;
11936
+
11937
+ var _useRAF = useRAF(),
11938
+ raf = _useRAF.raf;
11939
+
11940
+ var _useState = useState(-1),
11941
+ _useState2 = _slicedToArray(_useState, 2),
11942
+ currentIndex = _useState2[0],
11943
+ setCurrentIndex = _useState2[1];
11944
+
11945
+ var instance = useRef(null);
11946
+ var timer = useRef(null);
11947
+ var timeoutTimer = useRef(null);
11948
+
11949
+ var _useState3 = useState(false),
11950
+ _useState4 = _slicedToArray(_useState3, 2),
11951
+ Flag = _useState4[0],
11952
+ setFlag = _useState4[1];
11953
+
11954
+ 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;
11955
+ var current = option === null || option === void 0 ? void 0 : (_option$highlightData3 = option.highlightData) === null || _option$highlightData3 === void 0 ? void 0 : _option$highlightData3[currentIndex];
11956
+ var currentName = typeof current === 'string' ? current : current === null || current === void 0 ? void 0 : current.name;
11957
+ useEffect(function () {
11958
+ if (autoLoop && length > 1) {
11959
+ timer.current = raf.setInterval(function () {
11960
+ setCurrentIndex(function (index) {
11961
+ return index >= length - 1 ? 0 : index + 1;
11962
+ });
11963
+ }, duration);
11964
+ } else {
11965
+ setCurrentIndex(-1);
11966
+ timer.current && raf.clearInterval(timer.current);
11967
+ }
11968
+
11969
+ return function () {
11970
+ timer.current && raf.clearInterval(timer.current);
11971
+ };
11972
+ }, [autoLoop, duration, raf, length]);
11973
+ useEffect(function () {
11974
+ if (!instance.current) {
11975
+ return;
11976
+ }
11977
+
11978
+ instance.current.dispatchAction({
11979
+ type: 'downplay'
11980
+ });
11981
+ instance.current.dispatchAction({
11982
+ type: 'hideTip'
11983
+ });
11984
+
11985
+ if (currentIndex > -1) {
11986
+ instance.current.dispatchAction({
11987
+ type: 'showTip',
11988
+ seriesIndex: seriesIndex,
11989
+ dataIndex: currentIndex
11990
+ });
11991
+ currentName && instance.current.dispatchAction({
11992
+ type: 'highlight',
11993
+ name: currentName
11994
+ });
11995
+ }
11996
+ }, [currentIndex, instance, seriesIndex, currentName]);
11997
+
11998
+ var onChartReadyCallback = function onChartReadyCallback(chart) {
11999
+ instance.current = chart;
12000
+ onChartReady(chart, option);
12001
+ timeoutTimer.current = raf.setTimeout(function () {
12002
+ instance.current.resize();
12003
+ }, 20);
12004
+ };
12005
+
12006
+ useEffect(function () {
12007
+ filter(option);
12008
+ }, [option]);
12009
+
12010
+ var filter = function filter(option) {
12011
+ var _option$series;
12012
+
12013
+ 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) {
12014
+ return !item.data || item.data.length == 0;
12015
+ });
12016
+ setFlag(flag);
12017
+ return option;
12018
+ };
12019
+
12020
+ useEffect(function () {
12021
+ var resizeHandler = function resizeHandler() {
12022
+ if (instance.current) {
12023
+ instance.current.resize();
12024
+ }
12025
+ };
12026
+
12027
+ window.addEventListener('resize', resizeHandler);
12028
+ return function () {
12029
+ timeoutTimer.current && raf.clearTimeout(timeoutTimer.current);
12030
+ window.removeEventListener('resize', resizeHandler);
12031
+ };
12032
+ }, []);
12033
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ReactEChartsCore, _objectSpread2({
12034
+ ref: ref,
12035
+ echarts: echarts,
12036
+ option: option,
12037
+ notMerge: true,
12038
+ lazyUpdate: true,
12039
+ style: style,
12040
+ theme: 'my_theme',
12041
+ onChartReady: onChartReadyCallback,
12042
+ onEvents: EventsDict,
12043
+ opts: opts || {}
12044
+ }, otherProps)));
12045
+ });
12046
+
12047
+ var lineOption = function lineOption(_ref) {
12048
+ var list = _ref.list,
12049
+ xdata = _ref.xdata;
12050
+ return {
12051
+ grid: {
12052
+ top: '18%',
12053
+ bottom: 1,
12054
+ left: 20,
12055
+ right: 20,
12056
+ containLabel: true
12057
+ },
12058
+ tooltip: {
12059
+ trigger: 'axis',
12060
+ backgroundColor: '#012536',
12061
+ borderColor: 'rgba(81,190,246,1)',
12062
+ textStyle: {
12063
+ color: '#daeef7',
12064
+ fontSize: calcWidth(24)
12065
+ },
12066
+ position: function position(point, params, dom, rect, size) {
12067
+ // 其中point为当前鼠标的位置,size中有两个属性:viewSize和contentSize,分别为外层div和tooltip提示框的大小
12068
+ var x = point[0]; //
12069
+
12070
+ var y = point[1];
12071
+ var viewWidth = size.viewSize[0];
12072
+ var viewHeight = size.viewSize[1];
12073
+ var boxWidth = size.contentSize[0];
12074
+ var boxHeight = size.contentSize[1];
12075
+ var posX = 0; // x坐标位置
12076
+
12077
+ var posY = 0; // y坐标位置
12078
+
12079
+ if (x < boxWidth) {
12080
+ // 左边放不开
12081
+ posX = 5;
12082
+ } else {
12083
+ // 左边放的下
12084
+ posX = x - boxWidth;
12085
+ }
12086
+
12087
+ if (y < boxHeight) {
12088
+ // 上边放不开
12089
+ posY = 5;
12090
+ } else {
12091
+ // 上边放得下
12092
+ posY = y - boxHeight;
12093
+ }
12094
+
12095
+ return [posX, posY];
12096
+ },
12097
+ axisPointer: {
12098
+ lineStyle: {
12099
+ color: {
12100
+ type: 'linear',
12101
+ x: 0,
12102
+ y: 0,
12103
+ x2: 0,
12104
+ y2: 1,
12105
+ colorStops: [{
12106
+ offset: 0,
12107
+ color: 'rgba(255,255,255,0)' // 0% 处的颜色
12108
+
12109
+ }, {
12110
+ offset: 0.5,
12111
+ color: 'rgba(255,255,255,1)' // 100% 处的颜色
12112
+
12113
+ }, {
12114
+ offset: 1,
12115
+ color: 'rgba(255,255,255,0)' // 100% 处的颜色
12116
+
12117
+ }],
12118
+ global: false // 缺省为 false
12119
+
12120
+ }
12121
+ }
12122
+ },
12123
+ formatter: function formatter(params) {
12124
+ if (params.length == 0) {
12125
+ return null;
12126
+ }
12127
+
12128
+ var dom = '';
12129
+ params.map(function (item) {
12130
+ 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>");
12131
+ });
12132
+ return dom;
12133
+ }
12134
+ },
12135
+ legend: {
12136
+ top: 0,
12137
+ itemGap: calcWidth(20),
12138
+ show: true,
12139
+ textStyle: {
12140
+ fontSize: calcWidth(24),
12141
+ color: '#ccf8fb',
12142
+ lineHeight: calcHeight(20)
12143
+ },
12144
+ data: list === null || list === void 0 ? void 0 : list.map(function (item) {
12145
+ return {
12146
+ name: item.name,
12147
+ 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"
12148
+ };
12149
+ }),
12150
+ itemWidth: calcWidth(20),
12151
+ itemHeight: calcHeight(20)
12152
+ },
12153
+ xAxis: [{
12154
+ type: 'category',
12155
+ axisLabel: {
12156
+ formatter: '{value}',
12157
+ // interval: 0,
12158
+ fontSize: calcWidth(24),
12159
+ color: '#ccf8fb',
12160
+ margin: 20
12161
+ },
12162
+ axisLine: {
12163
+ lineStyle: {
12164
+ color: '#2c3641'
12165
+ }
12166
+ },
12167
+ splitLine: {
12168
+ show: false,
12169
+ lineStyle: {
12170
+ color: '#2c3641'
12171
+ }
12172
+ },
12173
+ axisTick: {
12174
+ show: false
12175
+ },
12176
+ data: xdata
12177
+ }],
12178
+ yAxis: [{
12179
+ type: 'value',
12180
+ splitLine: {
12181
+ lineStyle: {
12182
+ color: '#2c3641'
12183
+ }
12184
+ },
12185
+ axisLabel: {
12186
+ fontSize: calcWidth(24),
12187
+ color: '#ccf8fb',
12188
+ margin: 20
12189
+ },
12190
+ axisLine: {
12191
+ show: true,
12192
+ lineStyle: {
12193
+ color: '#2c3641'
12194
+ }
12195
+ },
12196
+ axisTick: {
12197
+ show: false
12198
+ }
12199
+ }],
12200
+ series: list === null || list === void 0 ? void 0 : list.map(function (item) {
12201
+ return {
12202
+ name: item.name,
12203
+ type: 'line',
12204
+ sampling: 'lttb',
12205
+ symbolSize: 8,
12206
+ itemStyle: {
12207
+ color: item.color
12208
+ },
12209
+ zlevel: 3,
12210
+ lineStyle: {
12211
+ normal: {
12212
+ width: calcWidth(2),
12213
+ color: item.color
12214
+ }
12215
+ },
12216
+ data: item.data
12217
+ };
12218
+ })
12219
+ };
12220
+ };
12221
+
12222
+ function LineEcharts(_ref2) {
12223
+ var config = _ref2.config;
12224
+ console.log(config);
12225
+ return /*#__PURE__*/React.createElement(ReactECharts, {
12226
+ option: lineOption(config),
12227
+ style: {
12228
+ height: '100%'
12229
+ }
12230
+ });
12231
+ }
12232
+
12233
+ export { Index$9 as AutoScroll, Index$b as Breadcrumb, WButton as Button, index$1 as Card, WCascader as Cascader, Index$3 as Checkbox, Index$8 as CountUp, Index$1 as DatePicker, index as IconFont, Index as Input, WInputNumber as InputNumber, LineEcharts, Modal, ModalForm$1 as ModalForm, Modal$1 as ModalTips, Index$7 as Number, NumericInput, Index$2 as Radio, Select, Index$a as Swiper, WSwitch as Switch, index$2 as TabelCard, Table, Index$6 as TreeSelect, index$4 as Video, index$3 as VideoPlayer, Index$5 as WDatePicker, WForm$1 as WForm, WebsocketHeart };