@vtx/modals2 5.0.2 → 5.0.4

package/lib/_components/vm-map/index.js

@@ -0,0 +1,277 @@
+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); }
+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; }
+import { Circle, Dom, FeatureLayer, Map } from '@vtx/ol-map';
+import { useUpdateEffect } from 'ahooks';
+import { Tooltip } from 'antd';
+import classNames from 'classnames';
+import { useEffect, useRef, useState } from 'react';
+import useSettings from "../../_hooks/useSettings";
+import "./index.less";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function VmOlMap(_ref) {
+  var _mapInfo$olProps, _points$data2, _polygons$data2, _newPoints$data3;
+  var mapCenter = _ref.mapCenter,
+    _ref$mapType = _ref.mapType,
+    mapType = _ref$mapType === void 0 ? 'bmap' : _ref$mapType,
+    _ref$mapPoints = _ref.mapPoints,
+    mapPoints = _ref$mapPoints === void 0 ? [] : _ref$mapPoints,
+    _ref$newMapPoints = _ref.newMapPoints,
+    newMapPoints = _ref$newMapPoints === void 0 ? [] : _ref$newMapPoints,
+    _ref$mapPolygons = _ref.mapPolygons,
+    mapPolygons = _ref$mapPolygons === void 0 ? [] : _ref$mapPolygons,
+    _ref$mapCircles = _ref.mapCircles,
+    mapCircles = _ref$mapCircles === void 0 ? [] : _ref$mapCircles,
+    geometryType = _ref.geometryType,
+    address = _ref.address;
+  var mapRef = useRef({});
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    defaultCenter = _useState2[0],
+    setDefaultCenter = _useState2[1];
+  var _useSettings = useSettings(),
+    isDark = _useSettings.isDark,
+    theme = _useSettings.theme,
+    mapInfo = _useSettings.mapInfo;
+  var _useState3 = useState({
+      data: [],
+      style: {}
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    newPoints = _useState4[0],
+    setNewPoints = _useState4[1];
+  useEffect(function () {
+    if (mapInfo !== null && mapInfo !== void 0 && mapInfo.longitude) {
+      setDefaultCenter([mapInfo.longitude, mapInfo.latitude]);
+    }
+  }, [mapInfo]);
+
+  // 处理VtxMap数据为@vtx/ol-map
+  function formatData(arr, type) {
+    var data = [],
+      style = {},
+      coordType = 'wgs84';
+    arr.forEach(function (item) {
+      if (type === 'polygon' || type === 'polyline') {
+        data.push(_objectSpread(_objectSpread({}, item), {}, {
+          geometryInfo: {
+            type: type,
+            lngLats: item.rings,
+            coordType: coordType
+          }
+        }));
+        style = type === 'polygon' ? {
+          type: 'Polygon',
+          style: {
+            stroke: {
+              color: '#1899ff',
+              opacity: 1,
+              width: 2
+            },
+            fill: {
+              color: '#1899ff',
+              opacity: 0.4
+            }
+          }
+        } : {
+          type: 'Polyline',
+          style: {
+            stroke: {
+              color: '#1899ff',
+              opacity: 1,
+              width: 6
+            }
+          }
+        };
+      } else {
+        data.push(_objectSpread(_objectSpread({}, item), {}, {
+          geometryInfo: {
+            type: 'point',
+            lngLats: "".concat(item.lng, ",").concat(item.lat),
+            coordType: coordType
+          }
+        }));
+        style = {
+          type: 'Marker',
+          style: item.url ? {
+            image: item.url,
+            scale: 0.8
+          } : {
+            icon: item.icon || 'MRSS',
+            color: item.color || '#1899ff'
+          }
+        };
+      }
+    });
+    return {
+      data: data,
+      style: style
+    };
+  }
+
+  // 处理不同的点位图标
+  function newFormData(arr) {
+    var data = [];
+    arr.forEach(function (item) {
+      data.push(_objectSpread(_objectSpread({}, item), {}, {
+        geometryInfo: {
+          type: 'point',
+          lngLats: "".concat(item.lng, ",").concat(item.lat),
+          coordType: 'wgs84'
+        }
+      }));
+    });
+    return {
+      data: data
+    };
+  }
+  var points = formatData(mapPoints);
+  var polygons = formatData(mapPolygons, geometryType);
+  function fitView() {
+    if (mapRef.current && ((mapPoints === null || mapPoints === void 0 ? void 0 : mapPoints.length) > 0 || (mapPolygons === null || mapPolygons === void 0 ? void 0 : mapPolygons.length) > 0)) {
+      var _mapRef$current, _polygons$data, _points$data;
+      (_mapRef$current = mapRef.current) === null || _mapRef$current === void 0 || _mapRef$current.fitView({
+        geometryInfo: ((polygons === null || polygons === void 0 || (_polygons$data = polygons.data) === null || _polygons$data === void 0 ? void 0 : _polygons$data[0]) || (points === null || points === void 0 || (_points$data = points.data) === null || _points$data === void 0 ? void 0 : _points$data[0])).geometryInfo
+      }, {
+        maxZoom: 16,
+        padding: [10, 10, 10, 10]
+      });
+    }
+  }
+  useUpdateEffect(function () {
+    var _newPoints$data, _mapRef$current2, _newPoints$data2;
+    var _newPoints = newFormData(newMapPoints);
+    setNewPoints(_newPoints);
+    (newMapPoints === null || newMapPoints === void 0 ? void 0 : newMapPoints.length) === 1 && mapRef.current && ((_newPoints$data = _newPoints.data) === null || _newPoints$data === void 0 ? void 0 : _newPoints$data.length) > 0 && ((_mapRef$current2 = mapRef.current) === null || _mapRef$current2 === void 0 ? void 0 : _mapRef$current2.fitView({
+      geometryInfo: (_newPoints$data2 = _newPoints.data) === null || _newPoints$data2 === void 0 || (_newPoints$data2 = _newPoints$data2[0]) === null || _newPoints$data2 === void 0 ? void 0 : _newPoints$data2.geometryInfo
+    }, {
+      maxZoom: 16,
+      padding: [0, 0, 0, 0]
+    }));
+  }, [JSON.stringify(newMapPoints)]);
+  useUpdateEffect(function () {
+    fitView();
+  }, [JSON.stringify(mapPoints), JSON.stringify(mapPolygons), JSON.stringify(newMapPoints)]);
+
+  // 自定义图层逻辑
+  /**
+   * 需要引入ol.js和olScreen.js
+   */
+  var layers = [];
+  mapInfo === null || mapInfo === void 0 || (_mapInfo$olProps = mapInfo.olProps) === null || _mapInfo$olProps === void 0 || _mapInfo$olProps.olCoverage.forEach(function (item) {
+    var _window;
+    if (item.coverage && (_window = window) !== null && _window !== void 0 && _window.ol) {
+      var _window2;
+      var temp = null;
+      if (item.type === 'superMap') {
+        temp = new window.ol.layer.Tile({
+          source: new window.ol.source.TileSuperMapRest({
+            url: item.coverage
+          })
+        });
+      } else if ((_window2 = window) !== null && _window2 !== void 0 && _window2.OL_SCREEN) {
+        // eslint-disable-next-line no-eval
+        temp = eval(window.OL_SCREEN[item.coverage].initLayer);
+      }
+      if (temp) {
+        layers = layers.concat(temp);
+      }
+    }
+  });
+  //mapCenter未传参情况下，要监听defaultCenter有值
+  if (!(defaultCenter !== null && defaultCenter !== void 0 && defaultCenter.length)) return null;
+  return /*#__PURE__*/_jsx("div", {
+    className: classNames('vm-map-wrap', {
+      dark: isDark
+    }),
+    children: /*#__PURE__*/_jsxs(Map, {
+      createdMap: function createdMap(viewer) {
+        mapRef.current = viewer;
+        fitView();
+      },
+      center: (mapCenter !== null && mapCenter !== void 0 && mapCenter.length ? mapCenter : defaultCenter).map(function (v) {
+        return Number(v);
+      }),
+      zoom: 16,
+      dark: isDark || theme === 'blue',
+      tk: "1adbb6e47668cb33757cd799548bf1f4",
+      customBaseLayers: layers.length > 0 ? function () {
+        return layers;
+      } : null,
+      children: [((_points$data2 = points.data) === null || _points$data2 === void 0 ? void 0 : _points$data2.length) > 0 ? /*#__PURE__*/_jsx(FeatureLayer, _objectSpread({
+        id: "vm_ol_map_points",
+        zIndex: 8
+      }, points)) : null, ((_polygons$data2 = polygons.data) === null || _polygons$data2 === void 0 ? void 0 : _polygons$data2.length) > 0 ? /*#__PURE__*/_jsx(FeatureLayer, _objectSpread({
+        id: "vm_ol_map_polygons",
+        zIndex: 7
+      }, polygons)) : null, (mapCircles === null || mapCircles === void 0 ? void 0 : mapCircles.length) > 0 ? /*#__PURE__*/_jsx(FeatureLayer, {
+        children: mapCircles.map(function (item) {
+          return /*#__PURE__*/_jsx(Circle, {
+            data: item.data,
+            radius: item.radius,
+            style: {
+              stroke: {
+                color: '#ff0000',
+                opacity: 1,
+                width: 3
+              },
+              fill: {
+                color: '#ff0000',
+                opacity: 0.4
+              }
+            }
+          }, item.id);
+        })
+      }) : null, (newPoints === null || newPoints === void 0 || (_newPoints$data3 = newPoints.data) === null || _newPoints$data3 === void 0 ? void 0 : _newPoints$data3.length) > 0 ? newPoints.data.map(function (ele, index) {
+        return /*#__PURE__*/_jsx(Dom, {
+          data: [ele.lng, ele.lat],
+          offset: [0, 20],
+          children: /*#__PURE__*/_jsxs("div", {
+            style: {
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'center',
+              alignItems: 'center',
+              minWidth: 30
+            },
+            children: [/*#__PURE__*/_jsx("img", {
+              src: ele.url,
+              style: {
+                width: 30,
+                height: 30
+              }
+            }), !!ele.staffName && /*#__PURE__*/_jsx("div", {
+              style: {
+                padding: '0 6px',
+                color: '#096dd9',
+                fontSize: 12,
+                border: '1px solid #096dd9',
+                background: '#fff',
+                borderRadius: 4
+              },
+              children: ele.staffName
+            })]
+          })
+        }, index);
+      }) : null, address && /*#__PURE__*/_jsx("div", {
+        className: 'vm-map-address-wrap',
+        children: /*#__PURE__*/_jsx(Tooltip, {
+          title: address,
+          children: /*#__PURE__*/_jsx("div", {
+            className: 'vm-map-address',
+            children: address
+          })
+        })
+      })]
+    })
+  });
+}

package/lib/_components/vm-map/index.less

@@ -0,0 +1,46 @@
+.vm-map-wrap {
+  width: 100%;
+  height: 100%;
+  border-radius: 8px;
+  --text-color: #1F1F1F;
+  --bg-color: rgba(22, 119, 255, 0.1);
+
+  &.dark {
+    --text-color: #FFFFFF;
+    --bg-color: rgba(179, 210, 255, 0.20);
+  }
+
+  .ol-map-container {
+    border-radius: 8px;
+  }
+
+  .ol-viewport {
+    border-radius: 8px;
+  }
+
+  .vm-map-address-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+    height: 36px;
+    background: var(--bg-color);
+    border-radius: 8px;
+    padding: 0 16px;
+    backdrop-filter: blur(4px);
+    color: var(--text-color);
+
+    .vm-map-address {
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-size: 14px;
+      text-align: center;
+    }
+  }
+}
+
+

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

@@ -0,0 +1,176 @@
+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 { Spin } from 'antd';
+import ReactEcharts from 'echarts-for-react';
+import _ from 'lodash';
+import useSettings from "../../_hooks/useSettings";
+import { getPercentValue } from "../../_util";
+import "./index.less";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+var PieCharts = function PieCharts(_ref) {
+  var dataList = _ref.dataList,
+    title = _ref.title,
+    total = _ref.total,
+    name = _ref.name,
+    loading = _ref.loading,
+    unit = _ref.unit,
+    _ref$isError = _ref.isError,
+    isError = _ref$isError === void 0 ? false : _ref$isError,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? '100%' : _ref$height,
+    _ref$legendConfig = _ref.legendConfig,
+    legendConfig = _ref$legendConfig === void 0 ? {} : _ref$legendConfig,
+    _ref$nameLength = _ref.nameLength,
+    nameLength = _ref$nameLength === void 0 ? 6 : _ref$nameLength,
+    _ref$innerRadius = _ref.innerRadius,
+    innerRadius = _ref$innerRadius === void 0 ? ['30%', '45%'] : _ref$innerRadius,
+    _ref$outerRadius = _ref.outerRadius,
+    outerRadius = _ref$outerRadius === void 0 ? ['45%', '50%'] : _ref$outerRadius,
+    _ref$center = _ref.center,
+    center = _ref$center === void 0 ? null : _ref$center;
+  var _useSettings = useSettings(),
+    chartFontColor = _useSettings.chartFontColor,
+    isDark = _useSettings.isDark;
+  var colorList = ['#36A1FF', '#53CB74', '#FABB43', '#FF8746', '#31C5E9', '#6FD7C7', '#B894F9', '#fc4f66', '#5d75ff'];
+  var colorList2 = ['#e1f1ff', '#e5f7ea', '#fef5e3', '#ffede3', '#e0f6fc', '#e9f9f7', '#f4effe', '#ffe5e8', '#e7eaff'];
+  if (isDark) {
+    colorList2 = ['#0d4e7e', '#115368', '#2b505d', '#2b465c', '#0c5176', '#155472', '#214a7a', '#2b4166', '#14487d'];
+  }
+  var option = {
+    tooltip: {
+      trigger: 'item',
+      formatter: "{a} <br/>{b}: {c}".concat(unit, " ({d}%)"),
+      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%'];
+      }
+    },
+    legend: _objectSpread({
+      top: 'center',
+      right: 50,
+      orient: 'vertical',
+      type: 'scroll',
+      icon: 'circle',
+      itemWidth: 10,
+      itemHeight: 10,
+      textStyle: {
+        fontSize: 14,
+        color: chartFontColor,
+        rich: {
+          name: {
+            width: 100,
+            fontSize: 14
+          },
+          space: {
+            width: 20
+          },
+          number: {
+            width: 50,
+            align: 'right',
+            fontSize: 14,
+            color: chartFontColor
+          },
+          percent: {
+            width: 50,
+            align: 'right',
+            fontSize: 14,
+            color: isDark ? '#fff' : '#8C8C8C'
+          }
+        }
+      },
+      pageIconColor: chartFontColor,
+      pageIconInactiveColor: chartFontColor,
+      pageTextStyle: {
+        color: chartFontColor
+      },
+      formatter: function formatter(name) {
+        var index = dataList.findIndex(function (item) {
+          return item.name === name;
+        });
+        var info = dataList[index] || {};
+        var value = info.value;
+        var percent = getPercentValue(_.map(dataList, 'value'), index, 2);
+        return "{name|".concat(name.slice(0, nameLength)).concat(name.length > nameLength ? '...' : '', "}{number|").concat(value || 0).concat(unit || '', "}{space|}{percent|").concat(percent, "%}");
+      },
+      tooltip: {
+        show: true
+      }
+    }, legendConfig),
+    series: [{
+      name: name,
+      type: 'pie',
+      radius: innerRadius,
+      center: center || ['25%', '50%'],
+      labelLine: {
+        show: false // 去除从圆心指向数据块的线条
+      },
+      label: {
+        show: false
+      },
+      data: dataList.map(function (item, index) {
+        return _objectSpread(_objectSpread({}, item), {}, {
+          itemStyle: {
+            color: colorList[index % colorList.length]
+          }
+        });
+      })
+    }, {
+      name: name,
+      type: 'pie',
+      radius: outerRadius,
+      hoverAnimation: false,
+      legendHoverLink: false,
+      labelLine: {
+        show: false // 去除从圆心指向数据块的线条
+      },
+      label: {
+        show: false
+      },
+      center: center || ['25%', '50%'],
+      data: dataList.map(function (item, index) {
+        return _objectSpread(_objectSpread({}, item), {}, {
+          itemStyle: {
+            color: colorList2[index % colorList2.length]
+          }
+        });
+      })
+    }]
+  };
+  return /*#__PURE__*/_jsx("div", {
+    className: 'vtx-car-pie-charts',
+    style: {
+      height: height
+    },
+    children: loading ? /*#__PURE__*/_jsx(Spin, {}) : /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: 'vtx-car-pie-charts-title-wrap',
+        children: [/*#__PURE__*/_jsx("div", {
+          className: 'vtx-car-pie-charts-total',
+          style: {
+            color: isDark ? isError ? '#FF5861' : '#009DFF' : isError ? '#F5222D' : '#1677FF'
+          },
+          children: total
+        }), /*#__PURE__*/_jsx("div", {
+          style: {
+            color: chartFontColor
+          },
+          children: title
+        })]
+      }), /*#__PURE__*/_jsx(ReactEcharts, {
+        option: option,
+        notMerge: true,
+        lazyUpdate: true,
+        style: {
+          height: '100%',
+          width: '100%'
+        }
+      })]
+    })
+  });
+};
+export default PieCharts;

package/lib/_components/vm-pie-charts/index.less

@@ -0,0 +1,26 @@
+.vtx-car-pie-charts {
+    height: 100%;
+    width: 100%;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &-title-wrap {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        position: absolute;
+        left: 25%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+    }
+
+    &-total {
+        font-weight: bold;
+        font-size: 20px;
+        line-height: 20px;
+        height: 20px;
+    }
+}

package/lib/_components/vm-progress/index.js

@@ -0,0 +1,83 @@
+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); }
+var _excluded = ["rate", "type", "strokeWidth", "trailColor", "strokeColor", "width", "name", "unit", "info"];
+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); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import { Progress } from 'antd';
+import useSettings from "../../_hooks/useSettings";
+import "./style";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function Line(props) {
+  var _useSettings = useSettings(),
+    isDark = _useSettings.isDark;
+  var _props$rate = props.rate,
+    rate = _props$rate === void 0 ? 0 : _props$rate,
+    trailColor = props.trailColor,
+    strokeColor = props.strokeColor,
+    _props$width = props.width,
+    width = _props$width === void 0 ? 120 : _props$width;
+  return /*#__PURE__*/_jsx(Progress, {
+    percent: rate,
+    width: width,
+    strokeColor: strokeColor ? strokeColor : rate > 100 ? {
+      from: '#FF5861',
+      to: '#FF000E'
+    } : isDark ? {
+      from: '#139DFF',
+      to: '#00FFF6'
+    } : '#1677FF',
+    trailColor: trailColor ? trailColor : isDark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)',
+    showInfo: false
+  });
+}
+var Circle = function Circle(props) {
+  var _useSettings2 = useSettings(),
+    isDark = _useSettings2.isDark;
+  var _props$rate2 = props.rate,
+    rate = _props$rate2 === void 0 ? 0 : _props$rate2,
+    _props$type = props.type,
+    type = _props$type === void 0 ? 'circle' : _props$type,
+    _props$strokeWidth = props.strokeWidth,
+    strokeWidth = _props$strokeWidth === void 0 ? 8 : _props$strokeWidth,
+    trailColor = props.trailColor,
+    strokeColor = props.strokeColor,
+    _props$width2 = props.width,
+    width = _props$width2 === void 0 ? 120 : _props$width2,
+    _props$name = props.name,
+    name = _props$name === void 0 ? '有效作业率' : _props$name,
+    _props$unit = props.unit,
+    unit = _props$unit === void 0 ? '%' : _props$unit,
+    info = props.info,
+    restProps = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/_jsx(Progress, _objectSpread({
+    percent: rate,
+    type: type,
+    width: width,
+    strokeWidth: strokeWidth,
+    strokeLinecap: "round",
+    strokeColor: strokeColor || (isDark ? {
+      '0%': '#009DFF',
+      '100%': '#44FF98'
+    } : '#1677FF'),
+    trailColor: trailColor ? trailColor : isDark ? 'rgba(0, 157, 255, 0.68)' : '#e1ecfd',
+    format: function format(percent) {
+      return /*#__PURE__*/_jsxs("div", {
+        className: "vm-progress-text ".concat(isDark ? 'dark' : ''),
+        children: [info !== null && info !== void 0 ? info : percent, /*#__PURE__*/_jsx("span", {
+          children: unit
+        }), /*#__PURE__*/_jsx("div", {
+          className: "vm-progress-text-name",
+          children: name
+        })]
+      });
+    }
+  }, restProps));
+};
+export default {
+  Line: Line,
+  Circle: Circle
+};

package/lib/_components/vm-progress/style/index.js

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

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

@@ -0,0 +1,28 @@
+.vm-progress-text {
+  --color: #009dff;
+  --text-color: #595959;
+
+  &.dark {
+    --color: #baddff;
+    --text-color: #baddff;
+  }
+
+  font-family: D-DIN Exp-DINExp, D-DIN Exp-DINExp;
+  font-weight: bold;
+  font-size: 22px;
+  color: var(--color);
+  line-height: 22px;
+
+  span {
+    font-size: 14px;
+  }
+
+  &-name {
+    font-family: PingFang SC, PingFang SC;
+    font-weight: 400;
+    font-size: 12px;
+    color: var(--text-color);
+    line-height: 14px;
+    text-align: center;
+  }
+}