wargerm 0.4.24 → 0.4.27

package/dist/index.js

@@ -56,9 +56,34 @@ var Player = require('xgplayer');
 var FlvPlayer = require('xgplayer-flv.js');
 var HlsJsPlayer = require('xgplayer-hls.js');
 var lodash = require('lodash');
+var ReactEChartsCore = require('echarts-for-react/lib/core');
+var echarts = require('echarts/core');
+var charts = require('echarts/charts');
+var components = require('echarts/components');
+var renderers = require('echarts/renderers');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () {
+            return e[k];
+          }
+        });
+      }
+    });
+  }
+  n['default'] = e;
+  return Object.freeze(n);
+}
+
 var _Button__default = /*#__PURE__*/_interopDefaultLegacy(_Button);
 var _Dropdown__default = /*#__PURE__*/_interopDefaultLegacy(_Dropdown);
 var _Menu__default = /*#__PURE__*/_interopDefaultLegacy(_Menu);
@@ -90,6 +115,8 @@ var ProTable__default = /*#__PURE__*/_interopDefaultLegacy(ProTable);
 var Player__default = /*#__PURE__*/_interopDefaultLegacy(Player);
 var FlvPlayer__default = /*#__PURE__*/_interopDefaultLegacy(FlvPlayer);
 var HlsJsPlayer__default = /*#__PURE__*/_interopDefaultLegacy(HlsJsPlayer);
+var ReactEChartsCore__default = /*#__PURE__*/_interopDefaultLegacy(ReactEChartsCore);
+var echarts__namespace = /*#__PURE__*/_interopNamespace(echarts);
 
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
@@ -578,8 +605,8 @@ Index$3.Group = _Checkbox__default['default'].Group;
 /*
  * @Author: lijin
  * @Date: 2021-10-27 22:18:49
- * @LastEditTime: 2021-10-29 14:50:11
- * @LastEditors: lijin
+ * @LastEditTime: 2022-06-30 16:51:49
+ * @LastEditors: caldelle 793238465@qq.com
  * @Description:
  * @FilePath: \wargerm\src\utils\index.ts
  * 可以输入预定的版权声明、个性签名、空行等
@@ -639,6 +666,12 @@ function getArrayLayer(arr, attr) {
 
   return newIndex;
 }
+var calcWidth = function calcWidth(width) {
+  return document.body.clientWidth / 3840 * width;
+};
+var calcHeight = function calcHeight(height) {
+  return document.body.clientHeight / 2160 * height;
+};
 
 var _excluded$1 = ["className", "frameStyle", "style", "direction", "children"];
 function FrameBox(_ref) {
@@ -11171,7 +11204,7 @@ function Xgplay(_ref, fRef) {
   var playerRef = React.useRef(null);
   React.useEffect(function () {
     if (ref.current) {
-      if ((type === null || type === void 0 ? void 0 : type.indexOf('hls')) !== -1) {
+      if ((type === null || type === void 0 ? void 0 : type.indexOf('m3u8')) !== -1) {
         playerRef.current = new HlsJsPlayer__default['default'](_objectSpread2({
           el: ref.current,
           width: '100%',
@@ -11180,6 +11213,7 @@ function Xgplay(_ref, fRef) {
           isLive: true,
           autoplayMuted: true
         }, config));
+        setRef(playerRef.current);
       } else if ((type === null || type === void 0 ? void 0 : type.indexOf('flv')) !== -1) {
         playerRef.current = new FlvPlayer__default['default'](_objectSpread2({
           el: ref.current,
@@ -11187,8 +11221,21 @@ function Xgplay(_ref, fRef) {
           height: '100%',
           autoplay: true,
           isLive: true,
-          autoplayMuted: true
+          autoplayMuted: true,
+          flvOptionalConfig: {
+            enableWorker: true,
+            enableStashBuffer: false,
+            stashInitialSize: 2048,
+            lazyLoad: true,
+            lazyLoadMaxDuration: 2 * 60,
+            autoCleanupSourceBuffer: true,
+            autoCleanupMaxBackwardDuration: 35 * 60,
+            autoCleanupMinBackwardDuration: 30 * 60,
+            reuseRedirectedURL: true //重用301/302重定向url，用于随后的请求，如查找、重新连接等
+
+          }
         }, config));
+        setRef(playerRef.current);
       } else if ((type === null || type === void 0 ? void 0 : type.indexOf('mp4')) !== -1) {
         playerRef.current = new Player__default['default'](_objectSpread2({
           el: ref.current,
@@ -11198,24 +11245,20 @@ function Xgplay(_ref, fRef) {
           isLive: true,
           autoplayMuted: true
         }, config));
+        setRef(playerRef.current);
       }
     }
 
+    console.log('playerRef.current', playerRef.current);
     return function () {
-      playerRef.current = null;
-    };
-  }, []);
-  React.useEffect(function () {
-    if (playerRef.current) {
-      setRef(playerRef.current);
-    }
-
-    return function () {
-      var _playerRef$current, _playerRef$current2;
+      var _playerRef$current, _playerRef$current2, _playerRef$current2$h, _playerRef$current3, _playerRef$current3$f, _playerRef$current4;
 
       (_playerRef$current = playerRef.current) === null || _playerRef$current === void 0 ? void 0 : _playerRef$current.pause();
-      (_playerRef$current2 = playerRef.current) === null || _playerRef$current2 === void 0 ? void 0 : _playerRef$current2.destroy(true);
+      (_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();
+      (_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();
+      (_playerRef$current4 = playerRef.current) === null || _playerRef$current4 === void 0 ? void 0 : _playerRef$current4.destroy(true);
       setRef(null);
+      playerRef.current = null;
     };
   }, []);
   React.useImperativeHandle(fRef, function () {
@@ -11260,8 +11303,10 @@ function VideoPlayer(_ref, ref) {
       config = _ref$config === void 0 ? {} : _ref$config,
       layoutIndex = _ref.layoutIndex,
       _ref$url = _ref.url,
-      url = _ref$url === void 0 ? [] : _ref$url;
-  var layouts = [{
+      url = _ref$url === void 0 ? [] : _ref$url,
+      _ref$layouts = _ref.layouts,
+      layouts = _ref$layouts === void 0 ? [] : _ref$layouts;
+  var basicLayouts = [{
     title: '1x1布局',
     style: {
       gridTemplateColumns: '1fr',
@@ -11293,6 +11338,7 @@ function VideoPlayer(_ref, ref) {
     }),
     span: 9
   }];
+  var allLayouts = [].concat(_toConsumableArray(layouts), basicLayouts);
 
   var _useState = React.useState(layoutIndex || 0),
       _useState2 = _slicedToArray(_useState, 2),
@@ -11304,7 +11350,7 @@ function VideoPlayer(_ref, ref) {
       urls = _useState4[0],
       setUrls = _useState4[1];
 
-  var initPlayerIndex = layouts[layoutIndex || 0].span >= url.length ? url.length - 1 >= 0 ? url.length - 1 : 0 : layouts[layoutIndex || 0].span - 1;
+  var initPlayerIndex = allLayouts[layoutIndex || 0].span >= url.length ? url.length - 1 >= 0 ? url.length - 1 : 0 : allLayouts[layoutIndex || 0].span - 1;
 
   var _useState5 = React.useState(initPlayerIndex),
       _useState6 = _slicedToArray(_useState5, 2),
@@ -11320,7 +11366,7 @@ function VideoPlayer(_ref, ref) {
       setPlayers = _useState8[1];
 
   var renderDom = React.useMemo(function () {
-    var arr = new Array(layouts[currentLayoutIndex].span).fill(0);
+    var arr = new Array(allLayouts[currentLayoutIndex].span).fill(0);
     return arr.map(function (item, index) {
       return /*#__PURE__*/React__default['default'].createElement("div", {
         key: index,
@@ -11401,22 +11447,24 @@ function VideoPlayer(_ref, ref) {
   }, /*#__PURE__*/React__default['default'].createElement("div", {
     ref: domRef,
     className: "videoContainer-grid",
-    style: layouts[currentLayoutIndex].style
+    style: allLayouts[currentLayoutIndex].style
   }, renderDom), footer ? /*#__PURE__*/React__default['default'].createElement("div", {
     className: "tools"
-  }, layouts.map(function (item, index) {
+  }, allLayouts.map(function (item, index) {
     return /*#__PURE__*/React__default['default'].createElement("div", {
       key: index,
       className: "btnbox",
       onClick: function onClick() {
-        var playerIndex = layouts[index || 0].span > url.length ? url.length - 1 >= 0 ? url.length : 0 : layouts[index || 0].span - 1;
+        var playerIndex = allLayouts[index || 0].span > url.length ? url.length - 1 >= 0 ? url.length : 0 : allLayouts[index || 0].span - 1;
         setCurrentPlayerIndex(playerIndex);
         setCurrentLayoutIndex(index);
       }
     }, /*#__PURE__*/React__default['default'].createElement(_Tooltip__default['default'], {
       placement: "top",
       title: item.title
-    }, item.icon));
+    }, item.icon || /*#__PURE__*/React__default['default'].createElement(IconFont, {
+      type: "icon-dantupailie"
+    })));
   })) : null));
 }
 
@@ -11652,6 +11700,595 @@ var index$4 = (function (_ref) {
   });
 });
 
+/*
+ * @Author: lijin
+ * @Date: 2021-08-04 13:22:21
+ * @LastEditTime: 2021-08-04 13:25:19
+ * @LastEditors: lijin
+ * @Description:
+ * @FilePath: \big-screen\src\components\ReactECharts\theme.ts
+ * 可以输入预定的版权声明、个性签名、空行等
+ */
+var contrastColor = '#9EA1A7';
+var backgroundColor = 'transparent';
+
+var axisCommon = function axisCommon() {
+  return {
+    axisLine: {
+      lineStyle: {
+        color: contrastColor
+      }
+    },
+    splitLine: {
+      lineStyle: {
+        color: '#2c3641'
+      }
+    },
+    splitArea: {
+      areaStyle: {
+        color: ['rgba(255,255,255,0.02)', 'rgba(255,255,255,0.05)']
+      }
+    },
+    minorSplitLine: {
+      lineStyle: {
+        color: '#20203B'
+      }
+    }
+  };
+};
+
+var colorPalette = ['#4992ff', '#7cffb2', '#fddd60', '#ff6e76', '#58d9f9', '#05c091', '#ff8a45', '#8d48e3', '#dd79ff'];
+var theme = {
+  darkMode: true,
+  color: colorPalette,
+  backgroundColor: backgroundColor,
+  axisPointer: {
+    lineStyle: {
+      color: '#817f91'
+    },
+    crossStyle: {
+      color: '#817f91'
+    },
+    label: {
+      color: contrastColor,
+      backgroundColor: '#104873'
+    }
+  },
+  legend: {
+    textStyle: {
+      color: contrastColor
+    }
+  },
+  textStyle: {
+    color: contrastColor
+  },
+  title: {
+    textStyle: {
+      color: '#EEF1FA'
+    },
+    subtextStyle: {
+      color: '#B9B8CE'
+    }
+  },
+  toolbox: {
+    iconStyle: {
+      borderColor: contrastColor
+    }
+  },
+  dataZoom: {
+    borderColor: '#71708A',
+    textStyle: {
+      color: contrastColor
+    },
+    brushStyle: {
+      color: 'rgba(135,163,206,0.3)'
+    },
+    handleStyle: {
+      color: '#353450',
+      borderColor: '#C5CBE3'
+    },
+    moveHandleStyle: {
+      color: '#B0B6C3',
+      opacity: 0.3
+    },
+    fillerColor: 'rgba(135,163,206,0.2)',
+    emphasis: {
+      handleStyle: {
+        borderColor: '#91B7F2',
+        color: '#4D587D'
+      },
+      moveHandleStyle: {
+        color: '#636D9A',
+        opacity: 0.7
+      }
+    },
+    dataBackground: {
+      lineStyle: {
+        color: '#71708A',
+        width: 1
+      },
+      areaStyle: {
+        color: '#71708A'
+      }
+    },
+    selectedDataBackground: {
+      lineStyle: {
+        color: '#87A3CE'
+      },
+      areaStyle: {
+        color: '#87A3CE'
+      }
+    }
+  },
+  visualMap: {
+    textStyle: {
+      color: contrastColor
+    }
+  },
+  timeline: {
+    lineStyle: {
+      color: contrastColor
+    },
+    label: {
+      color: contrastColor
+    },
+    controlStyle: {
+      color: contrastColor,
+      borderColor: contrastColor
+    }
+  },
+  calendar: {
+    itemStyle: {
+      color: backgroundColor
+    },
+    dayLabel: {
+      color: contrastColor
+    },
+    monthLabel: {
+      color: contrastColor
+    },
+    yearLabel: {
+      color: contrastColor
+    }
+  },
+  timeAxis: axisCommon(),
+  logAxis: axisCommon(),
+  valueAxis: axisCommon(),
+  categoryAxis: axisCommon(),
+  line: {
+    symbol: 'circle'
+  },
+  graph: {
+    color: colorPalette
+  },
+  gauge: {
+    title: {
+      color: contrastColor
+    }
+  },
+  candlestick: {
+    itemStyle: {
+      color: '#FD1050',
+      color0: '#0CF49B',
+      borderColor: '#FD1050',
+      borderColor0: '#0CF49B'
+    }
+  }
+};
+theme.categoryAxis.splitLine.show = false;
+
+var RAF = /*#__PURE__*/function () {
+  function RAF() {
+    _classCallCheck(this, RAF);
+
+    this._timerIdMap = void 0;
+    this._timerIdMap = {
+      timeout: {},
+      interval: {}
+    };
+  }
+
+  _createClass(RAF, [{
+    key: "run",
+    value: function run() {
+      var _this = this;
+
+      var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'interval';
+      var cb = arguments.length > 1 ? arguments[1] : undefined;
+      var interval = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 16.7;
+      // 每16.7毫秒刷新一次（一帧）
+      var now = Date.now;
+      var startTime = now();
+      var endTime = startTime;
+      var timerSymbol = Symbol();
+
+      var loop = function loop() {
+        _this.setIdMap(timerSymbol, type, loop);
+
+        endTime = now();
+
+        if (endTime - startTime >= interval) {
+          if (type === 'interval') {
+            startTime = now();
+            endTime = startTime;
+          }
+
+          cb();
+          type === 'timeout' && _this.clearTimeout(timerSymbol);
+        }
+      };
+
+      this.setIdMap(timerSymbol, type, loop);
+      return timerSymbol;
+    }
+  }, {
+    key: "setIdMap",
+    value: function setIdMap(timerSymbol, type, loop) {
+      var id = requestAnimationFrame(loop);
+      this._timerIdMap[type][timerSymbol] = id;
+    }
+  }, {
+    key: "setTimeout",
+    value: function setTimeout(cb, interval) {
+      return this.run('timeout', cb, interval);
+    }
+  }, {
+    key: "clearTimeout",
+    value: function clearTimeout(timer) {
+      cancelAnimationFrame(this._timerIdMap.timeout[timer]);
+    }
+  }, {
+    key: "setInterval",
+    value: function setInterval(cb, interval) {
+      return this.run('interval', cb, interval);
+    }
+  }, {
+    key: "clearInterval",
+    value: function clearInterval(timer) {
+      cancelAnimationFrame(this._timerIdMap.interval[timer]);
+    }
+  }]);
+
+  return RAF;
+}();
+
+/*
+ * @Author: lijin
+ * @Date: 2022-06-20 15:27:46
+ * @LastEditTime: 2022-06-30 17:32:49
+ * @LastEditors: caldelle 793238465@qq.com
+ * @Description:
+ * @FilePath: \hefeihz-web-bigscreen\src\hooks\useRAF.ts
+ * 可以输入预定的版权声明、个性签名、空行等
+ */
+function useRAF() {
+  var raf = React.useMemo(function () {
+    return new RAF();
+  }, []);
+  return {
+    raf: raf
+  };
+}
+
+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]);
+echarts.registerTheme('my_theme', theme); // The usage of ReactEChartsCore are same with above.
+
+var ReactECharts = /*#__PURE__*/React__default['default'].memo(function (_ref) {
+  var _option$highlightData, _option$highlightData2, _option$highlightData3;
+
+  var option = _ref.option,
+      _ref$onChartReady = _ref.onChartReady,
+      onChartReady = _ref$onChartReady === void 0 ? function () {} : _ref$onChartReady,
+      _ref$EventsDict = _ref.EventsDict,
+      EventsDict = _ref$EventsDict === void 0 ? {} : _ref$EventsDict,
+      _ref$style = _ref.style,
+      style = _ref$style === void 0 ? {} : _ref$style,
+      ref = _ref.ref,
+      _ref$autoLoop = _ref.autoLoop,
+      autoLoop = _ref$autoLoop === void 0 ? true : _ref$autoLoop,
+      _ref$duration = _ref.duration,
+      duration = _ref$duration === void 0 ? 2000 : _ref$duration,
+      _ref$seriesIndex = _ref.seriesIndex,
+      seriesIndex = _ref$seriesIndex === void 0 ? 0 : _ref$seriesIndex,
+      opts = _ref.opts,
+      otherProps = _ref.otherProps;
+
+  var _useRAF = useRAF(),
+      raf = _useRAF.raf;
+
+  var _useState = React.useState(-1),
+      _useState2 = _slicedToArray(_useState, 2),
+      currentIndex = _useState2[0],
+      setCurrentIndex = _useState2[1];
+
+  var instance = React.useRef(null);
+  var timer = React.useRef(null);
+  var timeoutTimer = React.useRef(null);
+
+  var _useState3 = React.useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      Flag = _useState4[0],
+      setFlag = _useState4[1];
+
+  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;
+  var current = option === null || option === void 0 ? void 0 : (_option$highlightData3 = option.highlightData) === null || _option$highlightData3 === void 0 ? void 0 : _option$highlightData3[currentIndex];
+  var currentName = typeof current === 'string' ? current : current === null || current === void 0 ? void 0 : current.name;
+  React.useEffect(function () {
+    if (autoLoop && length > 1) {
+      timer.current = raf.setInterval(function () {
+        setCurrentIndex(function (index) {
+          return index >= length - 1 ? 0 : index + 1;
+        });
+      }, duration);
+    } else {
+      setCurrentIndex(-1);
+      timer.current && raf.clearInterval(timer.current);
+    }
+
+    return function () {
+      timer.current && raf.clearInterval(timer.current);
+    };
+  }, [autoLoop, duration, raf, length]);
+  React.useEffect(function () {
+    if (!instance.current) {
+      return;
+    }
+
+    instance.current.dispatchAction({
+      type: 'downplay'
+    });
+    instance.current.dispatchAction({
+      type: 'hideTip'
+    });
+
+    if (currentIndex > -1) {
+      instance.current.dispatchAction({
+        type: 'showTip',
+        seriesIndex: seriesIndex,
+        dataIndex: currentIndex
+      });
+      currentName && instance.current.dispatchAction({
+        type: 'highlight',
+        name: currentName
+      });
+    }
+  }, [currentIndex, instance, seriesIndex, currentName]);
+
+  var onChartReadyCallback = function onChartReadyCallback(chart) {
+    instance.current = chart;
+    onChartReady(chart, option);
+    timeoutTimer.current = raf.setTimeout(function () {
+      instance.current.resize();
+    }, 20);
+  };
+
+  React.useEffect(function () {
+    filter(option);
+  }, [option]);
+
+  var filter = function filter(option) {
+    var _option$series;
+
+    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) {
+      return !item.data || item.data.length == 0;
+    });
+    setFlag(flag);
+    return option;
+  };
+
+  React.useEffect(function () {
+    var resizeHandler = function resizeHandler() {
+      if (instance.current) {
+        instance.current.resize();
+      }
+    };
+
+    window.addEventListener('resize', resizeHandler);
+    return function () {
+      timeoutTimer.current && raf.clearTimeout(timeoutTimer.current);
+      window.removeEventListener('resize', resizeHandler);
+    };
+  }, []);
+  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(ReactEChartsCore__default['default'], _objectSpread2({
+    ref: ref,
+    echarts: echarts__namespace,
+    option: option,
+    notMerge: true,
+    lazyUpdate: true,
+    style: style,
+    theme: 'my_theme',
+    onChartReady: onChartReadyCallback,
+    onEvents: EventsDict,
+    opts: opts || {}
+  }, otherProps)));
+});
+
+var lineOption = function lineOption(_ref) {
+  var list = _ref.list,
+      xdata = _ref.xdata;
+  return {
+    grid: {
+      top: '18%',
+      bottom: 1,
+      left: 20,
+      right: 20,
+      containLabel: true
+    },
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor: '#012536',
+      borderColor: 'rgba(81,190,246,1)',
+      textStyle: {
+        color: '#daeef7',
+        fontSize: calcWidth(24)
+      },
+      position: function position(point, params, dom, rect, size) {
+        // 其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
+        var x = point[0]; //
+
+        var y = point[1];
+        var viewWidth = size.viewSize[0];
+        var viewHeight = size.viewSize[1];
+        var boxWidth = size.contentSize[0];
+        var boxHeight = size.contentSize[1];
+        var posX = 0; // x坐标位置
+
+        var posY = 0; // y坐标位置
+
+        if (x < boxWidth) {
+          // 左边放不开
+          posX = 5;
+        } else {
+          // 左边放的下
+          posX = x - boxWidth;
+        }
+
+        if (y < boxHeight) {
+          // 上边放不开
+          posY = 5;
+        } else {
+          // 上边放得下
+          posY = y - boxHeight;
+        }
+
+        return [posX, posY];
+      },
+      axisPointer: {
+        lineStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [{
+              offset: 0,
+              color: 'rgba(255,255,255,0)' // 0% 处的颜色
+
+            }, {
+              offset: 0.5,
+              color: 'rgba(255,255,255,1)' // 100% 处的颜色
+
+            }, {
+              offset: 1,
+              color: 'rgba(255,255,255,0)' // 100% 处的颜色
+
+            }],
+            global: false // 缺省为 false
+
+          }
+        }
+      },
+      formatter: function formatter(params) {
+        if (params.length == 0) {
+          return null;
+        }
+
+        var dom = '';
+        params.map(function (item) {
+          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>");
+        });
+        return dom;
+      }
+    },
+    legend: {
+      top: 0,
+      itemGap: calcWidth(20),
+      show: true,
+      textStyle: {
+        fontSize: calcWidth(24),
+        color: '#ccf8fb',
+        lineHeight: calcHeight(20)
+      },
+      data: list === null || list === void 0 ? void 0 : list.map(function (item) {
+        return {
+          name: item.name,
+          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"
+        };
+      }),
+      itemWidth: calcWidth(20),
+      itemHeight: calcHeight(20)
+    },
+    xAxis: [{
+      type: 'category',
+      axisLabel: {
+        formatter: '{value}',
+        // interval: 0,
+        fontSize: calcWidth(24),
+        color: '#ccf8fb',
+        margin: 20
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#2c3641'
+        }
+      },
+      splitLine: {
+        show: false,
+        lineStyle: {
+          color: '#2c3641'
+        }
+      },
+      axisTick: {
+        show: false
+      },
+      data: xdata
+    }],
+    yAxis: [{
+      type: 'value',
+      splitLine: {
+        lineStyle: {
+          color: '#2c3641'
+        }
+      },
+      axisLabel: {
+        fontSize: calcWidth(24),
+        color: '#ccf8fb',
+        margin: 20
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#2c3641'
+        }
+      },
+      axisTick: {
+        show: false
+      }
+    }],
+    series: list === null || list === void 0 ? void 0 : list.map(function (item) {
+      return {
+        name: item.name,
+        type: 'line',
+        sampling: 'lttb',
+        symbolSize: 8,
+        itemStyle: {
+          color: item.color
+        },
+        zlevel: 3,
+        lineStyle: {
+          normal: {
+            width: calcWidth(2),
+            color: item.color
+          }
+        },
+        data: item.data
+      };
+    })
+  };
+};
+
+function LineEcharts(_ref2) {
+  var config = _ref2.config;
+  console.log(config);
+  return /*#__PURE__*/React__default['default'].createElement(ReactECharts, {
+    option: lineOption(config),
+    style: {
+      height: '100%'
+    }
+  });
+}
+
 exports.AutoScroll = Index$9;
 exports.Breadcrumb = Index$b;
 exports.Button = WButton;
@@ -11663,6 +12300,7 @@ exports.DatePicker = Index$1;
 exports.IconFont = index;
 exports.Input = Index;
 exports.InputNumber = WInputNumber;
+exports.LineEcharts = LineEcharts;
 exports.Modal = Modal;
 exports.ModalForm = ModalForm$1;
 exports.ModalTips = Modal$1;