wargerm 0.4.26 → 0.4.29
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/Card/index.d.ts +1 -0
- 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/components/WForm/index.d.ts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.esm.js +634 -15
- package/dist/index.js +655 -14
- package/dist/utils/index.d.ts +2 -0
- package/package.json +6 -2
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:
|
544
|
-
* @LastEditors:
|
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) {
|
@@ -6747,7 +6759,7 @@ var WCascader = function WCascader(props) {
|
|
6747
6759
|
}, extraProps));
|
6748
6760
|
};
|
6749
6761
|
|
6750
|
-
var _excluded$6 = ["columns", "extraColumns", "className", "style", "search", "disabled", "disabledHideInSearch", "disabledRuler", "onFormChange", "onSubmit", "onReset"];
|
6762
|
+
var _excluded$6 = ["columns", "extraColumns", "className", "style", "search", "disabled", "disabledHideInSearch", "disabledRuler", "onFormChange", "onSubmit", "onReset", "setForm"];
|
6751
6763
|
var RangePicker$2 = Index$5.RangePicker;
|
6752
6764
|
|
6753
6765
|
var WForm = function WForm(props, ref) {
|
@@ -6762,6 +6774,7 @@ var WForm = function WForm(props, ref) {
|
|
6762
6774
|
onFormChange = props.onFormChange,
|
6763
6775
|
onSubmit = props.onSubmit,
|
6764
6776
|
onReset = props.onReset,
|
6777
|
+
setForm = props.setForm,
|
6765
6778
|
extraProps = _objectWithoutProperties(props, _excluded$6);
|
6766
6779
|
|
6767
6780
|
var _Form$useForm = _Form.useForm(),
|
@@ -7895,6 +7908,17 @@ var WForm = function WForm(props, ref) {
|
|
7895
7908
|
setFieldsValue: setFieldsValue
|
7896
7909
|
};
|
7897
7910
|
});
|
7911
|
+
useEffect(function () {
|
7912
|
+
if (form) {
|
7913
|
+
setForm && setForm(form);
|
7914
|
+
}
|
7915
|
+
|
7916
|
+
return function () {
|
7917
|
+
if (form) {
|
7918
|
+
setForm && setForm(null);
|
7919
|
+
}
|
7920
|
+
};
|
7921
|
+
}, []);
|
7898
7922
|
return /*#__PURE__*/React.createElement(_Form, _objectSpread2({
|
7899
7923
|
style: {
|
7900
7924
|
marginBottom: '20px',
|
@@ -9582,7 +9606,7 @@ var Index$b = function Index(_ref) {
|
|
9582
9606
|
var _excluded$d = ["title", "className", "headerTail", "headerCenter", "sliderTabs"];
|
9583
9607
|
|
9584
9608
|
var Index$c = function Index(_ref, ref) {
|
9585
|
-
var _classNames;
|
9609
|
+
var _classNames, _sliderTabs$component;
|
9586
9610
|
|
9587
9611
|
var title = _ref.title,
|
9588
9612
|
_ref$className = _ref.className,
|
@@ -9617,14 +9641,15 @@ var Index$c = function Index(_ref, ref) {
|
|
9617
9641
|
className: "dot"
|
9618
9642
|
}), title), headerCenter, headerTail) : null, /*#__PURE__*/React.createElement("div", {
|
9619
9643
|
className: "body"
|
9620
|
-
}, sliderTabs ? sliderTabs.components[activeTab]
|
9644
|
+
}, (sliderTabs === null || sliderTabs === void 0 ? void 0 : (_sliderTabs$component = sliderTabs.components) === null || _sliderTabs$component === void 0 ? void 0 : _sliderTabs$component[activeTab]) || props.children)), sliderTabs && /*#__PURE__*/React.createElement("div", {
|
9621
9645
|
className: "sliderTabs ".concat(sliderTabs.direction == 'left' ? "left ".concat(sliderTabs.className || '') : "right ".concat(sliderTabs.className || ''))
|
9622
9646
|
}, sliderTabs.tabs.map(function (item, index) {
|
9623
9647
|
return /*#__PURE__*/React.createElement("div", {
|
9624
9648
|
className: "tab ".concat(index == activeTab ? 'active' : '', " ").concat(sliderTabs.tabClassName || '', " ").concat(sliderTabs.activeTabClassName || '')
|
9625
9649
|
}, /*#__PURE__*/React.createElement("span", {
|
9626
9650
|
onClick: function onClick() {
|
9627
|
-
|
9651
|
+
setActiveTab(index);
|
9652
|
+
sliderTabs.onChange && (sliderTabs === null || sliderTabs === void 0 ? void 0 : sliderTabs.onChange(index));
|
9628
9653
|
}
|
9629
9654
|
}, item));
|
9630
9655
|
}))));
|
@@ -11232,8 +11257,10 @@ function VideoPlayer(_ref, ref) {
|
|
11232
11257
|
config = _ref$config === void 0 ? {} : _ref$config,
|
11233
11258
|
layoutIndex = _ref.layoutIndex,
|
11234
11259
|
_ref$url = _ref.url,
|
11235
|
-
url = _ref$url === void 0 ? [] : _ref$url
|
11236
|
-
|
11260
|
+
url = _ref$url === void 0 ? [] : _ref$url,
|
11261
|
+
_ref$layouts = _ref.layouts,
|
11262
|
+
layouts = _ref$layouts === void 0 ? [] : _ref$layouts;
|
11263
|
+
var basicLayouts = [{
|
11237
11264
|
title: '1x1布局',
|
11238
11265
|
style: {
|
11239
11266
|
gridTemplateColumns: '1fr',
|
@@ -11265,6 +11292,7 @@ function VideoPlayer(_ref, ref) {
|
|
11265
11292
|
}),
|
11266
11293
|
span: 9
|
11267
11294
|
}];
|
11295
|
+
var allLayouts = [].concat(_toConsumableArray(layouts), basicLayouts);
|
11268
11296
|
|
11269
11297
|
var _useState = useState(layoutIndex || 0),
|
11270
11298
|
_useState2 = _slicedToArray(_useState, 2),
|
@@ -11276,7 +11304,7 @@ function VideoPlayer(_ref, ref) {
|
|
11276
11304
|
urls = _useState4[0],
|
11277
11305
|
setUrls = _useState4[1];
|
11278
11306
|
|
11279
|
-
var initPlayerIndex =
|
11307
|
+
var initPlayerIndex = allLayouts[layoutIndex || 0].span >= url.length ? url.length - 1 >= 0 ? url.length - 1 : 0 : allLayouts[layoutIndex || 0].span - 1;
|
11280
11308
|
|
11281
11309
|
var _useState5 = useState(initPlayerIndex),
|
11282
11310
|
_useState6 = _slicedToArray(_useState5, 2),
|
@@ -11292,7 +11320,7 @@ function VideoPlayer(_ref, ref) {
|
|
11292
11320
|
setPlayers = _useState8[1];
|
11293
11321
|
|
11294
11322
|
var renderDom = useMemo(function () {
|
11295
|
-
var arr = new Array(
|
11323
|
+
var arr = new Array(allLayouts[currentLayoutIndex].span).fill(0);
|
11296
11324
|
return arr.map(function (item, index) {
|
11297
11325
|
return /*#__PURE__*/React.createElement("div", {
|
11298
11326
|
key: index,
|
@@ -11373,22 +11401,24 @@ function VideoPlayer(_ref, ref) {
|
|
11373
11401
|
}, /*#__PURE__*/React.createElement("div", {
|
11374
11402
|
ref: domRef,
|
11375
11403
|
className: "videoContainer-grid",
|
11376
|
-
style:
|
11404
|
+
style: allLayouts[currentLayoutIndex].style
|
11377
11405
|
}, renderDom), footer ? /*#__PURE__*/React.createElement("div", {
|
11378
11406
|
className: "tools"
|
11379
|
-
},
|
11407
|
+
}, allLayouts.map(function (item, index) {
|
11380
11408
|
return /*#__PURE__*/React.createElement("div", {
|
11381
11409
|
key: index,
|
11382
11410
|
className: "btnbox",
|
11383
11411
|
onClick: function onClick() {
|
11384
|
-
var playerIndex =
|
11412
|
+
var playerIndex = allLayouts[index || 0].span > url.length ? url.length - 1 >= 0 ? url.length : 0 : allLayouts[index || 0].span - 1;
|
11385
11413
|
setCurrentPlayerIndex(playerIndex);
|
11386
11414
|
setCurrentLayoutIndex(index);
|
11387
11415
|
}
|
11388
11416
|
}, /*#__PURE__*/React.createElement(_Tooltip, {
|
11389
11417
|
placement: "top",
|
11390
11418
|
title: item.title
|
11391
|
-
}, item.icon
|
11419
|
+
}, item.icon || /*#__PURE__*/React.createElement(IconFont, {
|
11420
|
+
type: "icon-dantupailie"
|
11421
|
+
})));
|
11392
11422
|
})) : null));
|
11393
11423
|
}
|
11394
11424
|
|
@@ -11624,4 +11654,593 @@ var index$4 = (function (_ref) {
|
|
11624
11654
|
});
|
11625
11655
|
});
|
11626
11656
|
|
11627
|
-
|
11657
|
+
/*
|
11658
|
+
* @Author: lijin
|
11659
|
+
* @Date: 2021-08-04 13:22:21
|
11660
|
+
* @LastEditTime: 2021-08-04 13:25:19
|
11661
|
+
* @LastEditors: lijin
|
11662
|
+
* @Description:
|
11663
|
+
* @FilePath: \big-screen\src\components\ReactECharts\theme.ts
|
11664
|
+
* 可以输入预定的版权声明、个性签名、空行等
|
11665
|
+
*/
|
11666
|
+
var contrastColor = '#9EA1A7';
|
11667
|
+
var backgroundColor = 'transparent';
|
11668
|
+
|
11669
|
+
var axisCommon = function axisCommon() {
|
11670
|
+
return {
|
11671
|
+
axisLine: {
|
11672
|
+
lineStyle: {
|
11673
|
+
color: contrastColor
|
11674
|
+
}
|
11675
|
+
},
|
11676
|
+
splitLine: {
|
11677
|
+
lineStyle: {
|
11678
|
+
color: '#2c3641'
|
11679
|
+
}
|
11680
|
+
},
|
11681
|
+
splitArea: {
|
11682
|
+
areaStyle: {
|
11683
|
+
color: ['rgba(255,255,255,0.02)', 'rgba(255,255,255,0.05)']
|
11684
|
+
}
|
11685
|
+
},
|
11686
|
+
minorSplitLine: {
|
11687
|
+
lineStyle: {
|
11688
|
+
color: '#20203B'
|
11689
|
+
}
|
11690
|
+
}
|
11691
|
+
};
|
11692
|
+
};
|
11693
|
+
|
11694
|
+
var colorPalette = ['#4992ff', '#7cffb2', '#fddd60', '#ff6e76', '#58d9f9', '#05c091', '#ff8a45', '#8d48e3', '#dd79ff'];
|
11695
|
+
var theme = {
|
11696
|
+
darkMode: true,
|
11697
|
+
color: colorPalette,
|
11698
|
+
backgroundColor: backgroundColor,
|
11699
|
+
axisPointer: {
|
11700
|
+
lineStyle: {
|
11701
|
+
color: '#817f91'
|
11702
|
+
},
|
11703
|
+
crossStyle: {
|
11704
|
+
color: '#817f91'
|
11705
|
+
},
|
11706
|
+
label: {
|
11707
|
+
color: contrastColor,
|
11708
|
+
backgroundColor: '#104873'
|
11709
|
+
}
|
11710
|
+
},
|
11711
|
+
legend: {
|
11712
|
+
textStyle: {
|
11713
|
+
color: contrastColor
|
11714
|
+
}
|
11715
|
+
},
|
11716
|
+
textStyle: {
|
11717
|
+
color: contrastColor
|
11718
|
+
},
|
11719
|
+
title: {
|
11720
|
+
textStyle: {
|
11721
|
+
color: '#EEF1FA'
|
11722
|
+
},
|
11723
|
+
subtextStyle: {
|
11724
|
+
color: '#B9B8CE'
|
11725
|
+
}
|
11726
|
+
},
|
11727
|
+
toolbox: {
|
11728
|
+
iconStyle: {
|
11729
|
+
borderColor: contrastColor
|
11730
|
+
}
|
11731
|
+
},
|
11732
|
+
dataZoom: {
|
11733
|
+
borderColor: '#71708A',
|
11734
|
+
textStyle: {
|
11735
|
+
color: contrastColor
|
11736
|
+
},
|
11737
|
+
brushStyle: {
|
11738
|
+
color: 'rgba(135,163,206,0.3)'
|
11739
|
+
},
|
11740
|
+
handleStyle: {
|
11741
|
+
color: '#353450',
|
11742
|
+
borderColor: '#C5CBE3'
|
11743
|
+
},
|
11744
|
+
moveHandleStyle: {
|
11745
|
+
color: '#B0B6C3',
|
11746
|
+
opacity: 0.3
|
11747
|
+
},
|
11748
|
+
fillerColor: 'rgba(135,163,206,0.2)',
|
11749
|
+
emphasis: {
|
11750
|
+
handleStyle: {
|
11751
|
+
borderColor: '#91B7F2',
|
11752
|
+
color: '#4D587D'
|
11753
|
+
},
|
11754
|
+
moveHandleStyle: {
|
11755
|
+
color: '#636D9A',
|
11756
|
+
opacity: 0.7
|
11757
|
+
}
|
11758
|
+
},
|
11759
|
+
dataBackground: {
|
11760
|
+
lineStyle: {
|
11761
|
+
color: '#71708A',
|
11762
|
+
width: 1
|
11763
|
+
},
|
11764
|
+
areaStyle: {
|
11765
|
+
color: '#71708A'
|
11766
|
+
}
|
11767
|
+
},
|
11768
|
+
selectedDataBackground: {
|
11769
|
+
lineStyle: {
|
11770
|
+
color: '#87A3CE'
|
11771
|
+
},
|
11772
|
+
areaStyle: {
|
11773
|
+
color: '#87A3CE'
|
11774
|
+
}
|
11775
|
+
}
|
11776
|
+
},
|
11777
|
+
visualMap: {
|
11778
|
+
textStyle: {
|
11779
|
+
color: contrastColor
|
11780
|
+
}
|
11781
|
+
},
|
11782
|
+
timeline: {
|
11783
|
+
lineStyle: {
|
11784
|
+
color: contrastColor
|
11785
|
+
},
|
11786
|
+
label: {
|
11787
|
+
color: contrastColor
|
11788
|
+
},
|
11789
|
+
controlStyle: {
|
11790
|
+
color: contrastColor,
|
11791
|
+
borderColor: contrastColor
|
11792
|
+
}
|
11793
|
+
},
|
11794
|
+
calendar: {
|
11795
|
+
itemStyle: {
|
11796
|
+
color: backgroundColor
|
11797
|
+
},
|
11798
|
+
dayLabel: {
|
11799
|
+
color: contrastColor
|
11800
|
+
},
|
11801
|
+
monthLabel: {
|
11802
|
+
color: contrastColor
|
11803
|
+
},
|
11804
|
+
yearLabel: {
|
11805
|
+
color: contrastColor
|
11806
|
+
}
|
11807
|
+
},
|
11808
|
+
timeAxis: axisCommon(),
|
11809
|
+
logAxis: axisCommon(),
|
11810
|
+
valueAxis: axisCommon(),
|
11811
|
+
categoryAxis: axisCommon(),
|
11812
|
+
line: {
|
11813
|
+
symbol: 'circle'
|
11814
|
+
},
|
11815
|
+
graph: {
|
11816
|
+
color: colorPalette
|
11817
|
+
},
|
11818
|
+
gauge: {
|
11819
|
+
title: {
|
11820
|
+
color: contrastColor
|
11821
|
+
}
|
11822
|
+
},
|
11823
|
+
candlestick: {
|
11824
|
+
itemStyle: {
|
11825
|
+
color: '#FD1050',
|
11826
|
+
color0: '#0CF49B',
|
11827
|
+
borderColor: '#FD1050',
|
11828
|
+
borderColor0: '#0CF49B'
|
11829
|
+
}
|
11830
|
+
}
|
11831
|
+
};
|
11832
|
+
theme.categoryAxis.splitLine.show = false;
|
11833
|
+
|
11834
|
+
var RAF = /*#__PURE__*/function () {
|
11835
|
+
function RAF() {
|
11836
|
+
_classCallCheck(this, RAF);
|
11837
|
+
|
11838
|
+
this._timerIdMap = void 0;
|
11839
|
+
this._timerIdMap = {
|
11840
|
+
timeout: {},
|
11841
|
+
interval: {}
|
11842
|
+
};
|
11843
|
+
}
|
11844
|
+
|
11845
|
+
_createClass(RAF, [{
|
11846
|
+
key: "run",
|
11847
|
+
value: function run() {
|
11848
|
+
var _this = this;
|
11849
|
+
|
11850
|
+
var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'interval';
|
11851
|
+
var cb = arguments.length > 1 ? arguments[1] : undefined;
|
11852
|
+
var interval = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 16.7;
|
11853
|
+
// 每16.7毫秒刷新一次(一帧)
|
11854
|
+
var now = Date.now;
|
11855
|
+
var startTime = now();
|
11856
|
+
var endTime = startTime;
|
11857
|
+
var timerSymbol = Symbol();
|
11858
|
+
|
11859
|
+
var loop = function loop() {
|
11860
|
+
_this.setIdMap(timerSymbol, type, loop);
|
11861
|
+
|
11862
|
+
endTime = now();
|
11863
|
+
|
11864
|
+
if (endTime - startTime >= interval) {
|
11865
|
+
if (type === 'interval') {
|
11866
|
+
startTime = now();
|
11867
|
+
endTime = startTime;
|
11868
|
+
}
|
11869
|
+
|
11870
|
+
cb();
|
11871
|
+
type === 'timeout' && _this.clearTimeout(timerSymbol);
|
11872
|
+
}
|
11873
|
+
};
|
11874
|
+
|
11875
|
+
this.setIdMap(timerSymbol, type, loop);
|
11876
|
+
return timerSymbol;
|
11877
|
+
}
|
11878
|
+
}, {
|
11879
|
+
key: "setIdMap",
|
11880
|
+
value: function setIdMap(timerSymbol, type, loop) {
|
11881
|
+
var id = requestAnimationFrame(loop);
|
11882
|
+
this._timerIdMap[type][timerSymbol] = id;
|
11883
|
+
}
|
11884
|
+
}, {
|
11885
|
+
key: "setTimeout",
|
11886
|
+
value: function setTimeout(cb, interval) {
|
11887
|
+
return this.run('timeout', cb, interval);
|
11888
|
+
}
|
11889
|
+
}, {
|
11890
|
+
key: "clearTimeout",
|
11891
|
+
value: function clearTimeout(timer) {
|
11892
|
+
cancelAnimationFrame(this._timerIdMap.timeout[timer]);
|
11893
|
+
}
|
11894
|
+
}, {
|
11895
|
+
key: "setInterval",
|
11896
|
+
value: function setInterval(cb, interval) {
|
11897
|
+
return this.run('interval', cb, interval);
|
11898
|
+
}
|
11899
|
+
}, {
|
11900
|
+
key: "clearInterval",
|
11901
|
+
value: function clearInterval(timer) {
|
11902
|
+
cancelAnimationFrame(this._timerIdMap.interval[timer]);
|
11903
|
+
}
|
11904
|
+
}]);
|
11905
|
+
|
11906
|
+
return RAF;
|
11907
|
+
}();
|
11908
|
+
|
11909
|
+
/*
|
11910
|
+
* @Author: lijin
|
11911
|
+
* @Date: 2022-06-20 15:27:46
|
11912
|
+
* @LastEditTime: 2022-06-30 17:32:49
|
11913
|
+
* @LastEditors: caldelle 793238465@qq.com
|
11914
|
+
* @Description:
|
11915
|
+
* @FilePath: \hefeihz-web-bigscreen\src\hooks\useRAF.ts
|
11916
|
+
* 可以输入预定的版权声明、个性签名、空行等
|
11917
|
+
*/
|
11918
|
+
function useRAF() {
|
11919
|
+
var raf = useMemo(function () {
|
11920
|
+
return new RAF();
|
11921
|
+
}, []);
|
11922
|
+
return {
|
11923
|
+
raf: raf
|
11924
|
+
};
|
11925
|
+
}
|
11926
|
+
|
11927
|
+
use([TitleComponent, TooltipComponent, GridComponent, BarChart, CanvasRenderer, LineChart, PieChart, RadarChart, LegendComponent, LegendPlainComponent, MarkLineComponent, PictorialBarChart, CustomChart, LegendScrollComponent, PolarComponent, GraphicComponent, ToolboxComponent]);
|
11928
|
+
registerTheme('my_theme', theme); // The usage of ReactEChartsCore are same with above.
|
11929
|
+
|
11930
|
+
var ReactECharts = /*#__PURE__*/React.memo(function (_ref) {
|
11931
|
+
var _option$highlightData, _option$highlightData2, _option$highlightData3;
|
11932
|
+
|
11933
|
+
var option = _ref.option,
|
11934
|
+
_ref$onChartReady = _ref.onChartReady,
|
11935
|
+
onChartReady = _ref$onChartReady === void 0 ? function () {} : _ref$onChartReady,
|
11936
|
+
_ref$EventsDict = _ref.EventsDict,
|
11937
|
+
EventsDict = _ref$EventsDict === void 0 ? {} : _ref$EventsDict,
|
11938
|
+
_ref$style = _ref.style,
|
11939
|
+
style = _ref$style === void 0 ? {} : _ref$style,
|
11940
|
+
ref = _ref.ref,
|
11941
|
+
_ref$autoLoop = _ref.autoLoop,
|
11942
|
+
autoLoop = _ref$autoLoop === void 0 ? true : _ref$autoLoop,
|
11943
|
+
_ref$duration = _ref.duration,
|
11944
|
+
duration = _ref$duration === void 0 ? 2000 : _ref$duration,
|
11945
|
+
_ref$seriesIndex = _ref.seriesIndex,
|
11946
|
+
seriesIndex = _ref$seriesIndex === void 0 ? 0 : _ref$seriesIndex,
|
11947
|
+
opts = _ref.opts,
|
11948
|
+
otherProps = _ref.otherProps;
|
11949
|
+
|
11950
|
+
var _useRAF = useRAF(),
|
11951
|
+
raf = _useRAF.raf;
|
11952
|
+
|
11953
|
+
var _useState = useState(-1),
|
11954
|
+
_useState2 = _slicedToArray(_useState, 2),
|
11955
|
+
currentIndex = _useState2[0],
|
11956
|
+
setCurrentIndex = _useState2[1];
|
11957
|
+
|
11958
|
+
var instance = useRef(null);
|
11959
|
+
var timer = useRef(null);
|
11960
|
+
var timeoutTimer = useRef(null);
|
11961
|
+
|
11962
|
+
var _useState3 = useState(false),
|
11963
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
11964
|
+
Flag = _useState4[0],
|
11965
|
+
setFlag = _useState4[1];
|
11966
|
+
|
11967
|
+
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;
|
11968
|
+
var current = option === null || option === void 0 ? void 0 : (_option$highlightData3 = option.highlightData) === null || _option$highlightData3 === void 0 ? void 0 : _option$highlightData3[currentIndex];
|
11969
|
+
var currentName = typeof current === 'string' ? current : current === null || current === void 0 ? void 0 : current.name;
|
11970
|
+
useEffect(function () {
|
11971
|
+
if (autoLoop && length > 1) {
|
11972
|
+
timer.current = raf.setInterval(function () {
|
11973
|
+
setCurrentIndex(function (index) {
|
11974
|
+
return index >= length - 1 ? 0 : index + 1;
|
11975
|
+
});
|
11976
|
+
}, duration);
|
11977
|
+
} else {
|
11978
|
+
setCurrentIndex(-1);
|
11979
|
+
timer.current && raf.clearInterval(timer.current);
|
11980
|
+
}
|
11981
|
+
|
11982
|
+
return function () {
|
11983
|
+
timer.current && raf.clearInterval(timer.current);
|
11984
|
+
};
|
11985
|
+
}, [autoLoop, duration, raf, length]);
|
11986
|
+
useEffect(function () {
|
11987
|
+
if (!instance.current) {
|
11988
|
+
return;
|
11989
|
+
}
|
11990
|
+
|
11991
|
+
instance.current.dispatchAction({
|
11992
|
+
type: 'downplay'
|
11993
|
+
});
|
11994
|
+
instance.current.dispatchAction({
|
11995
|
+
type: 'hideTip'
|
11996
|
+
});
|
11997
|
+
|
11998
|
+
if (currentIndex > -1) {
|
11999
|
+
instance.current.dispatchAction({
|
12000
|
+
type: 'showTip',
|
12001
|
+
seriesIndex: seriesIndex,
|
12002
|
+
dataIndex: currentIndex
|
12003
|
+
});
|
12004
|
+
currentName && instance.current.dispatchAction({
|
12005
|
+
type: 'highlight',
|
12006
|
+
name: currentName
|
12007
|
+
});
|
12008
|
+
}
|
12009
|
+
}, [currentIndex, instance, seriesIndex, currentName]);
|
12010
|
+
|
12011
|
+
var onChartReadyCallback = function onChartReadyCallback(chart) {
|
12012
|
+
instance.current = chart;
|
12013
|
+
onChartReady(chart, option);
|
12014
|
+
timeoutTimer.current = raf.setTimeout(function () {
|
12015
|
+
instance.current.resize();
|
12016
|
+
}, 20);
|
12017
|
+
};
|
12018
|
+
|
12019
|
+
useEffect(function () {
|
12020
|
+
filter(option);
|
12021
|
+
}, [option]);
|
12022
|
+
|
12023
|
+
var filter = function filter(option) {
|
12024
|
+
var _option$series;
|
12025
|
+
|
12026
|
+
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) {
|
12027
|
+
return !item.data || item.data.length == 0;
|
12028
|
+
});
|
12029
|
+
setFlag(flag);
|
12030
|
+
return option;
|
12031
|
+
};
|
12032
|
+
|
12033
|
+
useEffect(function () {
|
12034
|
+
var resizeHandler = function resizeHandler() {
|
12035
|
+
if (instance.current) {
|
12036
|
+
instance.current.resize();
|
12037
|
+
}
|
12038
|
+
};
|
12039
|
+
|
12040
|
+
window.addEventListener('resize', resizeHandler);
|
12041
|
+
return function () {
|
12042
|
+
timeoutTimer.current && raf.clearTimeout(timeoutTimer.current);
|
12043
|
+
window.removeEventListener('resize', resizeHandler);
|
12044
|
+
};
|
12045
|
+
}, []);
|
12046
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ReactEChartsCore, _objectSpread2({
|
12047
|
+
ref: ref,
|
12048
|
+
echarts: echarts,
|
12049
|
+
option: option,
|
12050
|
+
notMerge: true,
|
12051
|
+
lazyUpdate: true,
|
12052
|
+
style: style,
|
12053
|
+
theme: 'my_theme',
|
12054
|
+
onChartReady: onChartReadyCallback,
|
12055
|
+
onEvents: EventsDict,
|
12056
|
+
opts: opts || {}
|
12057
|
+
}, otherProps)));
|
12058
|
+
});
|
12059
|
+
|
12060
|
+
var lineOption = function lineOption(_ref) {
|
12061
|
+
var list = _ref.list,
|
12062
|
+
xdata = _ref.xdata;
|
12063
|
+
return {
|
12064
|
+
grid: {
|
12065
|
+
top: '18%',
|
12066
|
+
bottom: 1,
|
12067
|
+
left: 20,
|
12068
|
+
right: 20,
|
12069
|
+
containLabel: true
|
12070
|
+
},
|
12071
|
+
tooltip: {
|
12072
|
+
trigger: 'axis',
|
12073
|
+
backgroundColor: '#012536',
|
12074
|
+
borderColor: 'rgba(81,190,246,1)',
|
12075
|
+
textStyle: {
|
12076
|
+
color: '#daeef7',
|
12077
|
+
fontSize: calcWidth(24)
|
12078
|
+
},
|
12079
|
+
position: function position(point, params, dom, rect, size) {
|
12080
|
+
// 其中point为当前鼠标的位置,size中有两个属性:viewSize和contentSize,分别为外层div和tooltip提示框的大小
|
12081
|
+
var x = point[0]; //
|
12082
|
+
|
12083
|
+
var y = point[1];
|
12084
|
+
var viewWidth = size.viewSize[0];
|
12085
|
+
var viewHeight = size.viewSize[1];
|
12086
|
+
var boxWidth = size.contentSize[0];
|
12087
|
+
var boxHeight = size.contentSize[1];
|
12088
|
+
var posX = 0; // x坐标位置
|
12089
|
+
|
12090
|
+
var posY = 0; // y坐标位置
|
12091
|
+
|
12092
|
+
if (x < boxWidth) {
|
12093
|
+
// 左边放不开
|
12094
|
+
posX = 5;
|
12095
|
+
} else {
|
12096
|
+
// 左边放的下
|
12097
|
+
posX = x - boxWidth;
|
12098
|
+
}
|
12099
|
+
|
12100
|
+
if (y < boxHeight) {
|
12101
|
+
// 上边放不开
|
12102
|
+
posY = 5;
|
12103
|
+
} else {
|
12104
|
+
// 上边放得下
|
12105
|
+
posY = y - boxHeight;
|
12106
|
+
}
|
12107
|
+
|
12108
|
+
return [posX, posY];
|
12109
|
+
},
|
12110
|
+
axisPointer: {
|
12111
|
+
lineStyle: {
|
12112
|
+
color: {
|
12113
|
+
type: 'linear',
|
12114
|
+
x: 0,
|
12115
|
+
y: 0,
|
12116
|
+
x2: 0,
|
12117
|
+
y2: 1,
|
12118
|
+
colorStops: [{
|
12119
|
+
offset: 0,
|
12120
|
+
color: 'rgba(255,255,255,0)' // 0% 处的颜色
|
12121
|
+
|
12122
|
+
}, {
|
12123
|
+
offset: 0.5,
|
12124
|
+
color: 'rgba(255,255,255,1)' // 100% 处的颜色
|
12125
|
+
|
12126
|
+
}, {
|
12127
|
+
offset: 1,
|
12128
|
+
color: 'rgba(255,255,255,0)' // 100% 处的颜色
|
12129
|
+
|
12130
|
+
}],
|
12131
|
+
global: false // 缺省为 false
|
12132
|
+
|
12133
|
+
}
|
12134
|
+
}
|
12135
|
+
},
|
12136
|
+
formatter: function formatter(params) {
|
12137
|
+
if (params.length == 0) {
|
12138
|
+
return null;
|
12139
|
+
}
|
12140
|
+
|
12141
|
+
var dom = '';
|
12142
|
+
params.map(function (item) {
|
12143
|
+
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>");
|
12144
|
+
});
|
12145
|
+
return dom;
|
12146
|
+
}
|
12147
|
+
},
|
12148
|
+
legend: {
|
12149
|
+
top: 0,
|
12150
|
+
itemGap: calcWidth(20),
|
12151
|
+
show: true,
|
12152
|
+
textStyle: {
|
12153
|
+
fontSize: calcWidth(24),
|
12154
|
+
color: '#ccf8fb',
|
12155
|
+
lineHeight: calcHeight(20)
|
12156
|
+
},
|
12157
|
+
data: list === null || list === void 0 ? void 0 : list.map(function (item) {
|
12158
|
+
return {
|
12159
|
+
name: item.name,
|
12160
|
+
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"
|
12161
|
+
};
|
12162
|
+
}),
|
12163
|
+
itemWidth: calcWidth(20),
|
12164
|
+
itemHeight: calcHeight(20)
|
12165
|
+
},
|
12166
|
+
xAxis: [{
|
12167
|
+
type: 'category',
|
12168
|
+
axisLabel: {
|
12169
|
+
formatter: '{value}',
|
12170
|
+
// interval: 0,
|
12171
|
+
fontSize: calcWidth(24),
|
12172
|
+
color: '#ccf8fb',
|
12173
|
+
margin: 20
|
12174
|
+
},
|
12175
|
+
axisLine: {
|
12176
|
+
lineStyle: {
|
12177
|
+
color: '#2c3641'
|
12178
|
+
}
|
12179
|
+
},
|
12180
|
+
splitLine: {
|
12181
|
+
show: false,
|
12182
|
+
lineStyle: {
|
12183
|
+
color: '#2c3641'
|
12184
|
+
}
|
12185
|
+
},
|
12186
|
+
axisTick: {
|
12187
|
+
show: false
|
12188
|
+
},
|
12189
|
+
data: xdata
|
12190
|
+
}],
|
12191
|
+
yAxis: [{
|
12192
|
+
type: 'value',
|
12193
|
+
splitLine: {
|
12194
|
+
lineStyle: {
|
12195
|
+
color: '#2c3641'
|
12196
|
+
}
|
12197
|
+
},
|
12198
|
+
axisLabel: {
|
12199
|
+
fontSize: calcWidth(24),
|
12200
|
+
color: '#ccf8fb',
|
12201
|
+
margin: 20
|
12202
|
+
},
|
12203
|
+
axisLine: {
|
12204
|
+
show: true,
|
12205
|
+
lineStyle: {
|
12206
|
+
color: '#2c3641'
|
12207
|
+
}
|
12208
|
+
},
|
12209
|
+
axisTick: {
|
12210
|
+
show: false
|
12211
|
+
}
|
12212
|
+
}],
|
12213
|
+
series: list === null || list === void 0 ? void 0 : list.map(function (item) {
|
12214
|
+
return {
|
12215
|
+
name: item.name,
|
12216
|
+
type: 'line',
|
12217
|
+
sampling: 'lttb',
|
12218
|
+
symbolSize: 8,
|
12219
|
+
itemStyle: {
|
12220
|
+
color: item.color
|
12221
|
+
},
|
12222
|
+
zlevel: 3,
|
12223
|
+
lineStyle: {
|
12224
|
+
normal: {
|
12225
|
+
width: calcWidth(2),
|
12226
|
+
color: item.color
|
12227
|
+
}
|
12228
|
+
},
|
12229
|
+
data: item.data
|
12230
|
+
};
|
12231
|
+
})
|
12232
|
+
};
|
12233
|
+
};
|
12234
|
+
|
12235
|
+
function LineEcharts(_ref2) {
|
12236
|
+
var config = _ref2.config;
|
12237
|
+
console.log(config);
|
12238
|
+
return /*#__PURE__*/React.createElement(ReactECharts, {
|
12239
|
+
option: lineOption(config),
|
12240
|
+
style: {
|
12241
|
+
height: '100%'
|
12242
|
+
}
|
12243
|
+
});
|
12244
|
+
}
|
12245
|
+
|
12246
|
+
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 };
|