@vtx/modals2 5.0.2 → 5.0.3

package/lib/_components/vm-filter/style/index.less

@@ -0,0 +1,237 @@
+.vm-range-picker {
+  --color: #1f1f1f;
+  --border: 1px solid #dadadaff;
+  --hover-color: #40a9ff;
+
+  &.dark {
+    --color: #fff;
+    --border: 1px solid #1464a6 !important;
+    --bg-color: rgba(0, 139, 237, 0.1) !important;
+    --hover-color: white;
+    .ant-picker-active-bar {
+      background: #018aff;
+    }
+    .ant-picker-separator,
+    .ant-picker-focused .ant-picker-separator {
+      color: #fff !important;
+    }
+  }
+  background-color: var(--bg-color) !important;
+  border: var(--border) !important;
+
+  .ant-picker-suffix {
+    color: var(--color);
+  }
+
+  &:hover {
+    border-color: var(--hover-color);
+  }
+
+  .ant-picker-input {
+    input {
+      color: var(--color);
+    }
+  }
+
+  .ant-picker-separator {
+    color: var(--color);
+  }
+
+  .ant-picker-clear {
+    color: var(--color);
+    background: transparent;
+  }
+}
+
+.vm-select,
+.vm-input {
+  --color: #1f1f1f;
+  --bg-color: #f5f5f5;
+  --hover-color: #f5f5f5;
+  --border-color: #f5f5f5;
+
+  &.dark {
+    --color: #fff;
+    --bg-color: #0b588e;
+    --hover-color: #018aff;
+    --border-color: #0b588e;
+  }
+
+  .ant-select-selector {
+    background: var(--bg-color) !important;
+    border-radius: 8px !important;
+    border: 1px solid var(--border-color) !important;
+  }
+  .ant-select-selection-placeholder {
+    color: var(--color);
+  }
+  &:hover {
+    .ant-select-selector {
+      border: 1px solid var(--hover-color) !important;
+    }
+  }
+  &.dark {
+    .ant-select-selector {
+      .ant-select-selection-item {
+        color: white;
+      }
+    }
+
+    .ant-select-arrow {
+      color: white;
+    }
+  }
+}
+
+.vm-input {
+  color: var(--color);
+  background: var(--bg-color);
+  border-radius: 8px;
+  border: 1px solid var(--bg-color);
+  &:hover {
+    border: 1px solid var(--hover-color);
+  }
+  .ant-input {
+    color: var(--color);
+    background: var(--bg-color);
+    border-radius: 8px;
+    border: 1px solid var(--bg-color);
+  }
+}
+
+.vm-select-dropdown {
+  &.dark {
+    background-color: #1a3e69;
+
+    .ant-select-item {
+      color: white;
+    }
+    .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
+      background-color: RGBA(30, 92, 147, 0.5);
+    }
+    .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
+      background: RGBA(30, 92, 147, 1);
+    }
+    .ant-empty-description,
+    .ant-select-dropdown-empty {
+      color: #74bbf4;
+    }
+  }
+}
+
+.vm-range-picker-dropdown {
+  &.dark {
+    .ant-picker-range-arrow {
+      background: none;
+      &::before {
+        background: rgb(23 62 110);
+      }
+    }
+    .ant-picker-panel {
+      border-bottom: 1px solid #95fff933 !important;
+    }
+
+    .ant-picker-footer {
+      border-top: 1px solid #95fff933 !important;
+    }
+    .ant-picker-panel-container {
+      background: rgb(51 95 135);
+      box-shadow: 0 3px 6px -4px #ffffff1f, 0 6px 16px #ffffff14,
+        0 9px 28px 8px #5454540d;
+      .ant-picker-header {
+        border-bottom: 1px solid #95fff933;
+        button {
+          color: white;
+          &:hover {
+            color: #95fff9;
+          }
+        }
+      }
+      .ant-picker-footer {
+        border-top: 1px solid #95fff933 !important;
+      }
+      .ant-picker-content {
+        th {
+          color: white;
+        }
+        .ant-picker-cell-inner {
+          color: white;
+        }
+        .ant-picker-cell-in-view.ant-picker-cell-in-range::before {
+          background: rgba(40, 114, 175, 1);
+        }
+        .ant-picker-cell-in-view.ant-picker-cell-range-start:not(
+            .ant-picker-cell-range-start-single
+          )::before,
+        .ant-picker-cell-in-view.ant-picker-cell-range-end:not(
+            .ant-picker-cell-range-end-single
+          )::before {
+          background: rgba(40, 114, 175, 0.6);
+        }
+        .ant-picker-cell-in-view.ant-picker-cell-selected
+          .ant-picker-cell-inner,
+        .ant-picker-cell-in-view.ant-picker-cell-range-start
+          .ant-picker-cell-inner,
+        .ant-picker-cell-in-view.ant-picker-cell-range-end
+          .ant-picker-cell-inner {
+          background: rgba(40, 114, 175, 0.6);
+        }
+        .ant-picker-cell:hover:not(.ant-picker-cell-in-view)
+          .ant-picker-cell-inner,
+        .ant-picker-cell:hover:not(.ant-picker-cell-selected):not(
+            .ant-picker-cell-range-start
+          ):not(.ant-picker-cell-range-end):not(
+            .ant-picker-cell-range-hover-start
+          ):not(.ant-picker-cell-range-hover-end)
+          .ant-picker-cell-inner {
+          background: rgba(40, 114, 175, 0.6);
+        }
+        .ant-picker-cell-in-view.ant-picker-cell-today
+          .ant-picker-cell-inner::before {
+          background: rgba(40, 114, 175, 0.6);
+        }
+
+        .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover::before,
+        .ant-picker-cell-in-view.ant-picker-cell-range-start.ant-picker-cell-range-hover::before,
+        .ant-picker-cell-in-view.ant-picker-cell-range-end.ant-picker-cell-range-hover::before,
+        .ant-picker-cell-in-view.ant-picker-cell-range-start:not(
+            .ant-picker-cell-range-start-single
+          ).ant-picker-cell-range-hover-start::before,
+        .ant-picker-cell-in-view.ant-picker-cell-range-end:not(
+            .ant-picker-cell-range-end-single
+          ).ant-picker-cell-range-hover-end::before,
+        .ant-picker-panel
+          > :not(.ant-picker-date-panel)
+          .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-start::before,
+        .ant-picker-panel
+          > :not(.ant-picker-date-panel)
+          .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-end::before {
+          background: #07749fbb;
+          border-bottom: 1px solid #95fff933;
+        }
+
+        .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-start
+          .ant-picker-cell-inner::after,
+        .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-end
+          .ant-picker-cell-inner::after {
+          background: #07749fbb !important;
+        }
+      }
+    }
+  }
+}
+
+.vm-filter {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+  margin-left: 10px;
+}
+
+.vm-filter-label {
+  font-size: 14px;
+  font-family: PingFang SC;
+  font-weight: bold;
+  color: var(--label-color);
+  margin-right: 5px;
+}

package/lib/_components/vm-iframe-modal/index.js

@@ -0,0 +1,43 @@
+import VtxBaseModal from "../../vtx-base-modal";
+import "./index.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+var Content = function Content(_ref) {
+  var src = _ref.src;
+  return /*#__PURE__*/_jsx("div", {
+    className: "vm-iframe-wrap",
+    style: {
+      height: 'calc(100vh - 70px)'
+    },
+    children: /*#__PURE__*/_jsx("iframe", {
+      src: src,
+      className: "vm-iframe"
+    })
+  });
+};
+var VmIframeModal = function VmIframeModal(_ref2) {
+  var title = _ref2.title,
+    visible = _ref2.visible,
+    onCancel = _ref2.onCancel,
+    theme = _ref2.theme,
+    src = _ref2.src;
+  return visible ? /*#__PURE__*/_jsx(VtxBaseModal, {
+    width: "100vw",
+    height: "100vh",
+    top: 0,
+    left: 0,
+    title: title,
+    visible: visible,
+    theme: theme,
+    onCancel: onCancel,
+    tabs: [{
+      key: 'info'
+    }],
+    contents: {
+      info: /*#__PURE__*/_jsx(Content, {
+        src: src
+      })
+    },
+    modalHeight: "100vh"
+  }) : null;
+};
+export default VmIframeModal;

package/lib/_components/vm-iframe-modal/index.less

@@ -0,0 +1,9 @@
+.vm-iframe-wrap {
+    height: calc(~'100vh - 70px - 50px');
+    width: 100%;
+    display: flex;
+    .vm-iframe {
+        width: 100%;
+        border: none;
+    }
+}

package/lib/_components/vm-info-collection/index.js

@@ -0,0 +1,185 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { VtxImage, VtxUpload } from '@vtx/components';
+import { isNumber } from 'lodash';
+import "./style";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function InfoCollection(props) {
+  var _props$data = props.data,
+    data = _props$data === void 0 ? [] : _props$data,
+    _props$width = props.width,
+    width = _props$width === void 0 ? '100%' : _props$width,
+    _props$gap = props.gap,
+    gap = _props$gap === void 0 ? 8 : _props$gap,
+    _props$horizontal = props.horizontal,
+    horizontal = _props$horizontal === void 0 ? false : _props$horizontal,
+    _props$ellipsis = props.ellipsis,
+    ellipsis = _props$ellipsis === void 0 ? false : _props$ellipsis,
+    padding = props.padding,
+    _props$style = props.style,
+    style = _props$style === void 0 ? {} : _props$style,
+    isValueCenter = props.isValueCenter,
+    _props$labelStyle = props.labelStyle,
+    labelStyle = _props$labelStyle === void 0 ? {} : _props$labelStyle;
+  if (!data.length) return /*#__PURE__*/_jsx(_Fragment, {});
+  return /*#__PURE__*/_jsx("div", {
+    className: horizontal ? 'info-collection-horizontal' : 'info-collection',
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      padding: padding !== null && padding !== void 0 ? padding : 'unset'
+    }),
+    children: data.map(function (item) {
+      var _item$value;
+      var style = {};
+      if (item !== null && item !== void 0 && item.color) style.color = item.color;
+      return /*#__PURE__*/_jsxs("div", {
+        className: "info-line",
+        style: {
+          marginRight: horizontal ? 0 : 12,
+          marginBottom: gap,
+          alignItems: isValueCenter ? 'center' : 'unset',
+          width: item.isAddress || ['address', 'divisionName', 'accUnitName', 'manageUnitName', 'description', 'panoramaLinkAddress'].includes(item.key) || item.key.indexOf('hoto') > -1 || ['MAP', 'GD_ENTRANCE'].includes(item.componentType || '') ? '100%' : item.width || width
+        },
+        children: [/*#__PURE__*/_jsx("div", {
+          className: "info-label-b",
+          style: labelStyle,
+          children: /*#__PURE__*/_jsxs("div", {
+            title: item.label,
+            className: "ellipsis info-label-b-text",
+            children: [item.label, " \uFF1A"]
+          })
+        }), item.label === '地址' || item.isAddress ? /*#__PURE__*/_jsx("div", {
+          className: "value",
+          style: style,
+          title: item.value || '',
+          children: item.value || '--'
+        }) : item.key === 'panoramaLinkAddress' ? /*#__PURE__*/_jsx("div", {
+          className: 'value',
+          children: (item === null || item === void 0 || (_item$value = item.value) === null || _item$value === void 0 ? void 0 : _item$value.indexOf('http')) > -1 ? /*#__PURE__*/_jsx("a", {
+            onClick: function onClick() {
+              window.open(item.value);
+            },
+            children: item.value
+          }) : item.value || '--'
+        }) : /*#__PURE__*/_jsx("div", {
+          className: "value ".concat(ellipsis ? 'ellipsis' : ''),
+          style: style,
+          title: ValueDom(item.componentType || '', item.value, !!item.componentType),
+          children: typeof item.render === 'function' ? item.render() : ValueDom(item.componentType || '', item.value)
+        })]
+      }, item.key);
+    })
+  });
+}
+export default InfoCollection;
+var QUARTER_MAP = {
+  '01': 'Q1',
+  '04': 'Q2',
+  '07': 'Q3',
+  10: 'Q4'
+};
+/* eslint-disable no-case-declarations */
+var ValueDom = function ValueDom(componentType, value, isTitle) {
+  var _value$join;
+  if (isTitle) {
+    return '';
+  }
+  var node;
+  switch (componentType) {
+    case 'MONTH_PERIOD':
+      node = (_value$join = value.join) === null || _value$join === void 0 ? void 0 : _value$join.call(value, '~');
+      break;
+    case 'QUARTER':
+      var _value$split = value.split('-'),
+        _value$split2 = _slicedToArray(_value$split, 2),
+        year = _value$split2[0],
+        quarter = _value$split2[1];
+      node = "".concat(year, "-").concat(QUARTER_MAP[quarter]);
+      break;
+    case 'ATTACHS':
+      var files = JSON.parse(value || '[]');
+      if (files.length) {
+        node = /*#__PURE__*/_jsx(VtxUpload, {
+          name: "file",
+          viewMode: true,
+          fileList: files,
+          downloadUrl: "".concat(process.env.PREFIX || '', "/cloudFile/common/downloadFile?id=")
+        });
+      } else {
+        node = '--';
+      }
+      break;
+    case 'MAP':
+      var lngLats = (value === null || value === void 0 ? void 0 : value.lngLats) || '';
+      node = lngLats;
+      break;
+    case 'SWITCH':
+      node = value || (value ? '是' : '否');
+      break;
+    case 'GARBAGE_CAN':
+      var arr = [];
+      Array.isArray(value) && (value === null || value === void 0 ? void 0 : value.forEach(function (item) {
+        arr.push("".concat(item.garbageTypeName, "x").concat(item.throwDoorCount));
+      }));
+      node = arr;
+      break;
+    case 'TIME_PERIOD':
+      if (Array.isArray(value)) {
+        var _value$map;
+        node = value === null || value === void 0 || (_value$map = value.map(function (item) {
+          return "".concat(item.startTime, "~").concat(item.endTime);
+        })) === null || _value$map === void 0 ? void 0 : _value$map.join('；');
+      }
+      break;
+    case 'IMAGE':
+      var photos = value ? JSON.parse(value || '[]') : [];
+      if (photos.length) {
+        node = /*#__PURE__*/_jsx(VtxUpload, {
+          name: "file",
+          viewMode: true,
+          useThumbnail: true,
+          listType: 'picture-card',
+          fileList: photos,
+          flag: Math.random() * 100,
+          headers: {
+            authorization: 'authorization-text'
+          },
+          downloadUrl: "".concat(process.env.PREFIX || '', "/cloudFile/common/downloadFile?id="),
+          previewUrl: "".concat(process.env.PREFIX || '', "/cloudFile/common/downloadFile?id=")
+        });
+      } else {
+        node = '--';
+      }
+      break;
+    case 'qrCode':
+      node = /*#__PURE__*/_jsx(VtxImage, {
+        aspectFit: true,
+        src: value
+      });
+      break;
+    case 'GD_ENTRANCE':
+      node = /*#__PURE__*/_jsx("div", {
+        children: value === null || value === void 0 ? void 0 : value.map(function (item, index) {
+          var _item$location, _item$location2;
+          return /*#__PURE__*/_jsxs("div", {
+            title: "".concat(item === null || item === void 0 ? void 0 : item.name, "\uFF1A").concat(item === null || item === void 0 || (_item$location = item.location) === null || _item$location === void 0 ? void 0 : _item$location.lngLats),
+            children: [item === null || item === void 0 ? void 0 : item.name, "\uFF1A", item === null || item === void 0 || (_item$location2 = item.location) === null || _item$location2 === void 0 ? void 0 : _item$location2.lngLats]
+          }, index);
+        })
+      });
+      break;
+    default:
+      node = value;
+      break;
+  }
+  return node || isNumber(node) ? node : '--';
+};

package/lib/_components/vm-info-collection/style/index.js

@@ -0,0 +1 @@
+import "./index.less";

package/lib/_components/vm-info-collection/style/index.less

@@ -0,0 +1,45 @@
+.info-collection {
+  width: fit-content;
+  .info-line {
+    display: flex;
+  }
+}
+.info-collection-horizontal {
+  display: flex;
+  flex-flow: wrap;
+  .info-line {
+    display: flex;
+    justify-content: start;
+    align-items: center;
+    margin-right: 12px;
+  }
+}
+.info-collection,
+.info-collection-horizontal {
+  width: 100%;
+  font-size: 14px;
+
+  .value {
+    color: var(--modal-title-color);
+    font-weight: 400;
+    min-width: 98px;
+    text-align: left;
+  }
+  .ellipsis {
+    min-width: 98px;
+    max-width: 350px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    &.info-label-b-text {
+      min-width: 78px;
+    }
+  }
+  .info-label-b {
+    .ellipsis;
+    min-width: 80px;
+    color: var(--label-color);
+    white-space: nowrap;
+    margin-right: 4px;
+  }
+}

package/lib/_components/vm-line-charts/index.js

@@ -0,0 +1,151 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { Row, Spin } from 'antd';
+import ReactEcharts from 'echarts-for-react';
+import useSettings from "../../_hooks/useSettings";
+import { jsx as _jsx } from "react/jsx-runtime";
+var LineCharts = function LineCharts(_ref) {
+  var _ref$dataList = _ref.dataList,
+    dataList = _ref$dataList === void 0 ? [] : _ref$dataList,
+    loading = _ref.loading,
+    _ref$unit = _ref.unit,
+    unit = _ref$unit === void 0 ? '' : _ref$unit,
+    _ref$xAxis = _ref.xAxis,
+    xAxis = _ref$xAxis === void 0 ? [] : _ref$xAxis,
+    _ref$yMax = _ref.yMax,
+    yMax = _ref$yMax === void 0 ? null : _ref$yMax,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? '100%' : _ref$height,
+    _ref$showLegend = _ref.showLegend,
+    showLegend = _ref$showLegend === void 0 ? true : _ref$showLegend,
+    _ref$showDataZoom = _ref.showDataZoom,
+    showDataZoom = _ref$showDataZoom === void 0 ? false : _ref$showDataZoom,
+    _ref$gridOption = _ref.gridOption,
+    gridOption = _ref$gridOption === void 0 ? {} : _ref$gridOption,
+    _ref$xAxisOption = _ref.xAxisOption,
+    xAxisOption = _ref$xAxisOption === void 0 ? {} : _ref$xAxisOption,
+    _ref$yAxisOption = _ref.yAxisOption,
+    yAxisOption = _ref$yAxisOption === void 0 ? {} : _ref$yAxisOption,
+    _ref$tooltipOption = _ref.tooltipOption,
+    tooltipOption = _ref$tooltipOption === void 0 ? {} : _ref$tooltipOption,
+    _ref$legendOption = _ref.legendOption,
+    legendOption = _ref$legendOption === void 0 ? {} : _ref$legendOption;
+  var lineColors = ['#438EF7', '#40AAF3', '#62C4F9', '#20BB70', '#1DD27B', '#49E6A2', '#F2953A', '#FAAB59', '#F9C665', '#8A7FEE'];
+  var _useSettings = useSettings(),
+    chartFontColor = _useSettings.chartFontColor,
+    chartLineColor = _useSettings.chartLineColor,
+    theme = _useSettings.theme;
+  var option = {
+    tooltip: _objectSpread({
+      trigger: 'axis',
+      valueFormatter: function valueFormatter(value) {
+        return "".concat(value).concat(unit);
+      },
+      position: function position(point, _params, _dom, _rect, size) {
+        // 固定在顶部
+        var leftSize = point[0] - size.contentSize[0];
+        return [point[0] + size.contentSize[0] > size.viewSize[0] ? leftSize < 0 ? '35%' : leftSize : point[0], '0%'];
+      }
+    }, tooltipOption),
+    dataZoom: [{
+      type: 'slider',
+      show: showDataZoom,
+      bottom: 20,
+      fillerColor: theme === 'light' ? 'rgba(22, 119, 255, 0.10)' : 'rgba(0, 157, 255, 0.10)',
+      textStyle: {
+        color: chartFontColor
+      }
+    }],
+    legend: _objectSpread({
+      show: showLegend,
+      right: dataList.length === 1 ? '5%' : 'center',
+      itemGap: 8,
+      itemHeight: 2,
+      itemWidth: 16,
+      textStyle: {
+        color: chartFontColor
+      },
+      itemStyle: {
+        opacity: 0
+      }
+    }, legendOption),
+    grid: _objectSpread({
+      left: 50,
+      right: 50,
+      bottom: showDataZoom ? 50 : 20
+    }, gridOption),
+    xAxis: _objectSpread({
+      type: 'category',
+      data: xAxis,
+      axisPointer: {
+        type: 'shadow'
+      },
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        color: chartFontColor
+      },
+      axisLine: {
+        show: false
+      }
+    }, xAxisOption),
+    yAxis: _objectSpread({
+      type: 'value',
+      name: unit ? "(".concat(unit, ")") : '',
+      min: 0,
+      max: yMax,
+      nameTextStyle: {
+        color: chartFontColor,
+        padding: [0, 30, 0, 0]
+      },
+      splitNumber: 5,
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        color: chartFontColor
+      },
+      splitLine: {
+        lineStyle: {
+          type: 'dashed',
+          color: chartLineColor
+        }
+      }
+    }, yAxisOption),
+    series: dataList.map(function (item, index) {
+      var color = item.color || lineColors[index % lineColors.length];
+      return _objectSpread({
+        type: 'line',
+        symbolSize: 4,
+        lineStyle: {
+          color: color
+        },
+        itemStyle: {
+          color: color
+        }
+      }, item);
+    })
+  };
+  return loading ? /*#__PURE__*/_jsx(Row, {
+    style: {
+      height: height
+    },
+    align: 'middle',
+    justify: 'center',
+    children: /*#__PURE__*/_jsx(Spin, {})
+  }) : /*#__PURE__*/_jsx(ReactEcharts, {
+    option: option,
+    notMerge: true,
+    lazyUpdate: true,
+    style: {
+      height: height,
+      width: '100%'
+    }
+  });
+};
+export default LineCharts;