@vtx/modals2 5.0.2 → 5.0.3

package/lib/vtx-base-modal/Tabs/index.js

@@ -0,0 +1,83 @@
+import classNames from 'classnames';
+import { AccessIcon, AlarmIcon, AnalysisIcon, AnnouncementIcon, AnnualInspectionIcon, AssessmentIcon, AssetIcon, AttendanceIcon, CalendarIcon, CaseIcon, ChargingIcon, CollectionIcon, ContractIcon, DeviceIcon, DocumentIcon, EvaluationIcon, FactoryIcon, HistoryIcon, IndexIcon, InspectionIcon, InsuranceIcon, InterviewIcon, LifeCycleIcon, LogIcon, MaintenanceIcon, MeasurementIcon, OilIcon, OperationIcon, PointIcon, ProcessIcon, ProductionUnitIcon, RouteIcon, SchedulingIcon, SparePartsIcon, SpeedCurveIcon, StatisticsIcon, SummaryIcon, TrashIcon, VideoIcon, ViolationIcon, WaterIcon, WorkInfoIcon, WorkingConditionIcon, WorkOrderIcon } from "../../_util/iconSvgHtml";
+import "./index.less";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var Tabs = function Tabs(props) {
+  var _props$tabs = props.tabs,
+    tabs = _props$tabs === void 0 ? [] : _props$tabs,
+    onChange = props.onChange,
+    active = props.active,
+    _props$theme = props.theme,
+    theme = _props$theme === void 0 ? 'light' : _props$theme;
+  var iconRender = {
+    summary: SummaryIcon,
+    history: HistoryIcon,
+    alarm: AlarmIcon,
+    water: WaterIcon,
+    oil: OilIcon,
+    video: VideoIcon,
+    calendar: CalendarIcon,
+    maintenance: MaintenanceIcon,
+    statistics: StatisticsIcon,
+    device: DeviceIcon,
+    workInfo: WorkInfoIcon,
+    collection: CollectionIcon,
+    access: AccessIcon,
+    factory: FactoryIcon,
+    asset: AssetIcon,
+    document: DocumentIcon,
+    log: LogIcon,
+    point: PointIcon,
+    interview: InterviewIcon,
+    contract: ContractIcon,
+    charging: ChargingIcon,
+    annualInspection: AnnualInspectionIcon,
+    insurance: InsuranceIcon,
+    trash: TrashIcon,
+    violation: ViolationIcon,
+    process: ProcessIcon,
+    case: CaseIcon,
+    speedCurve: SpeedCurveIcon,
+    lifeCycle: LifeCycleIcon,
+    productionUnit: ProductionUnitIcon,
+    spareParts: SparePartsIcon,
+    operation: OperationIcon,
+    inspection: InspectionIcon,
+    attendance: AttendanceIcon,
+    announcement: AnnouncementIcon,
+    analysis: AnalysisIcon,
+    route: RouteIcon,
+    measurement: MeasurementIcon,
+    workingCondition: WorkingConditionIcon,
+    evaluation: EvaluationIcon,
+    scheduling: SchedulingIcon,
+    workOrder: WorkOrderIcon,
+    assessment: AssessmentIcon,
+    index: IndexIcon
+  };
+  return tabs.length ? /*#__PURE__*/_jsx("div", {
+    className: 'vm-modal-tabs',
+    children: tabs.map(function (tab, index) {
+      var width = 26,
+        height = 26;
+      var ComponentIcon = iconRender[tab.key];
+      return /*#__PURE__*/_jsxs("div", {
+        onClick: function onClick() {
+          onChange(tab.key);
+        },
+        className: classNames('vm-modal-tabs-item', active === tab.key ? 'vm-modal-tabs-item-active' : 'vm-modal-tabs-item-normal'),
+        children: [ComponentIcon && /*#__PURE__*/_jsx(ComponentIcon, {
+          width: width,
+          height: height,
+          fill: theme === 'light' ? active === tab.key ? '#fff' : '#1F1F1F' : '#fff',
+          style: {
+            transform: 'scale(0.55)'
+          }
+        }), /*#__PURE__*/_jsx("span", {
+          children: tab.title
+        })]
+      }, index);
+    })
+  }) : null;
+};
+export default Tabs;

package/lib/vtx-base-modal/Tabs/index.less

@@ -0,0 +1,31 @@
+.vm-modal-tabs {
+  width: 100%;
+  height: 60px;
+  background: var(--vm-tabs-bg);
+  border-radius: 8px 8px 0 0;
+  border: none;
+  // border: 2px solid var(--vm-tab-border-color);
+  display: flex;
+  justify-content: center;
+  gap: 16px;
+  align-items: center;
+
+  &-item {
+    display: flex;
+    height: 36px;
+    padding: 0 14px;
+    font-size: 16px;
+    gap: 8px;
+    color: var(--vm-tabs-font-color);
+    cursor: pointer;
+    align-items: center;
+    justify-content: center;
+
+    &-active {
+      background: var(--vm-tab-item-active-bg-color);
+      border-radius: 26px;
+      color: var(--vm-tab-item-active-color);
+      box-shadow: var(--vm-tab-item-active-box-shadow);
+    }
+  }
+}

package/lib/vtx-base-modal/index.js

@@ -0,0 +1,202 @@
+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 { getVtxToken } from '@vtx/utils';
+import { useMemoizedFn, useSetState } from 'ahooks';
+import dayjs from 'dayjs';
+import React, { useEffect, useMemo, useState } from 'react';
+import { VmIframeModal } from "../_components";
+import VtxThemeProvider from "../_components/vm-theme-provider";
+import VmHeader from "./Header";
+import { getTenantById, getUmsConfig } from "./service";
+import "./style";
+import VmTabs from "./Tabs";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+var VmBaseModal = function VmBaseModal(props) {
+  var _props$tabs = props.tabs,
+    tabs = _props$tabs === void 0 ? [] : _props$tabs,
+    _props$contents = props.contents,
+    contents = _props$contents === void 0 ? {} : _props$contents,
+    _props$title = props.title,
+    title = _props$title === void 0 ? '' : _props$title,
+    _props$theme = props.theme,
+    theme = _props$theme === void 0 ? 'light' : _props$theme,
+    _props$type = props.type,
+    type = _props$type === void 0 ? 'car' : _props$type,
+    id = props.id,
+    startDate = props.startDate,
+    endDate = props.endDate,
+    date = props.date,
+    tabChose = props.tabChose,
+    _props$mask = props.mask,
+    mask = _props$mask === void 0 ? true : _props$mask,
+    _props$tagList = props.tagList,
+    tagList = _props$tagList === void 0 ? [] : _props$tagList,
+    frameParams = props.frameParams,
+    modalHeight = props.modalHeight,
+    width = props.width;
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentTabKey = _useState2[0],
+    setCurrentTabKey = _useState2[1];
+  var _useState3 = useState({}),
+    _useState4 = _slicedToArray(_useState3, 2),
+    mapInfo = _useState4[0],
+    setMapInfo = _useState4[1];
+  var _useState5 = useState(''),
+    _useState6 = _slicedToArray(_useState5, 2),
+    tabPosition = _useState6[0],
+    setTabPosition = _useState6[1];
+  var _useSetState = useSetState({
+      src: '',
+      visible: false,
+      title: ''
+    }),
+    _useSetState2 = _slicedToArray(_useSetState, 2),
+    iframeModalInfo = _useSetState2[0],
+    setIframeModalInfo = _useSetState2[1];
+  useEffect(function () {
+    getTenantById(getVtxToken('tenantId')).then(function (res) {
+      if (res !== null && res !== void 0 && res.data) {
+        var _JSON$parse, _res$data;
+        var data = ((_JSON$parse = JSON.parse(res.data.mapDefJson)) === null || _JSON$parse === void 0 ? void 0 : _JSON$parse.find(function (ele) {
+          return ele.defaultMap;
+        })) || {};
+        if ((_res$data = res.data) !== null && _res$data !== void 0 && _res$data.longitudeDone) {
+          data.longitude = res.data.longitudeDone;
+          data.latitude = res.data.latitudeDone;
+        }
+        setMapInfo(data);
+      } else {
+        setMapInfo({});
+      }
+    });
+    getUmsConfig('POPUP_TAB_POSITION').then(function (res) {
+      var _res$data2;
+      setTabPosition((res === null || res === void 0 || (_res$data2 = res.data) === null || _res$data2 === void 0 || (_res$data2 = _res$data2.rows) === null || _res$data2 === void 0 || (_res$data2 = _res$data2[0]) === null || _res$data2 === void 0 ? void 0 : _res$data2.configInfo) || 'top');
+    });
+  }, []);
+  useEffect(function () {
+    if (tabs.length > 0) {
+      if (tabChose && tabs.find(function (item) {
+        return item.key === tabChose;
+      })) {
+        setCurrentTabKey(tabChose);
+      } else {
+        setCurrentTabKey(tabs[0].key);
+      }
+    }
+  }, [JSON.stringify(tabs), tabChose]);
+  var onCancel = function onCancel() {
+    if (props.onCancel && typeof props.onCancel === 'function') {
+      props.onCancel();
+    }
+  };
+  var value = useMemo(function () {
+    return {
+      theme: theme,
+      startDate: startDate,
+      endDate: endDate,
+      date: date,
+      mapInfo: mapInfo,
+      tabPosition: tabPosition,
+      chartFontColor: theme === 'light' ? '#595959' : '#FFFFFF',
+      chartLineColor: theme === 'light' ? 'rgba(0,0,26,0.15)' : 'rgba(255,255,255,0.15)'
+    };
+  }, [theme, startDate, endDate, date, mapInfo, tabPosition]);
+  var openHistory = useMemoizedFn(function () {
+    var src = '';
+    var prefix = '';
+    var prefixList = location.pathname.split('/').filter(function (item) {
+      return item;
+    });
+    if (prefixList.length === 2) {
+      prefix = "/".concat(prefixList[0]);
+    }
+    var _theme = theme === 'blue' ? 'dark' : theme;
+    if (type === 'car') {
+      var path = 'index';
+      src = "".concat(prefix, "/carHistory/#/").concat(path, "?carId=").concat(id, "&theme=").concat(_theme, "&startTime=").concat(startDate ? dayjs(startDate).format('YYYY-MM-DD 00:00:00') : '', "&endTime=").concat(endDate ? dayjs(endDate).format('YYYY-MM-DD 23:59:59') : '');
+    }
+    if (type === 'staff') {
+      src = "".concat(prefix, "/carHistory/#/staffIndex?staffId=").concat(id, "&theme=").concat(_theme);
+    }
+    if (type === 'qyry') {
+      src = "".concat(prefix, "/carHistory/#/qyryHistory?staffId=").concat(id, "&theme=").concat(_theme);
+    }
+    if (frameParams) {
+      var param = [];
+      for (var key in frameParams) {
+        param.push("".concat(key, "=").concat(frameParams[key] || ''));
+      }
+      if (param.length > 0) {
+        src = "".concat(src, "&").concat(param.join('&'));
+      }
+    }
+    setIframeModalInfo({
+      title: type === 'car' ? '车辆轨迹' : '人员轨迹',
+      visible: true,
+      src: src
+    });
+  });
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: theme === 'light' ? 'vm-modal-light' : 'vm-modal-dark',
+      children: [mask && /*#__PURE__*/_jsx("div", {
+        className: 'vm-base-modal-mask'
+      }), /*#__PURE__*/_jsxs("div", {
+        className: 'vm-base-modal-wrap',
+        style: {
+          height: modalHeight,
+          width: width,
+          maxHeight: modalHeight
+        },
+        children: [/*#__PURE__*/_jsx(VmHeader, {
+          title: title,
+          id: id,
+          type: type,
+          theme: theme,
+          tagList: tagList,
+          onCancel: onCancel,
+          openHistory: openHistory
+        }), /*#__PURE__*/_jsxs("div", {
+          className: 'vm-base-modal-body',
+          children: [tabs.length > 1 && /*#__PURE__*/_jsx(VmTabs, {
+            tabs: tabs,
+            onChange: function onChange(key) {
+              setCurrentTabKey(key);
+            },
+            active: currentTabKey,
+            theme: "dark"
+          }), /*#__PURE__*/_jsx(VtxThemeProvider, {
+            value: value,
+            children: /*#__PURE__*/_jsx("div", {
+              className: 'vm-base-modal-content-wrap',
+              children: /*#__PURE__*/_jsx("div", {
+                className: 'vm-base-modal-content',
+                children: contents[currentTabKey]
+              })
+            })
+          })]
+        })]
+      })]
+    }), /*#__PURE__*/_jsx(VmIframeModal, _objectSpread(_objectSpread({}, iframeModalInfo), {}, {
+      theme: theme,
+      onCancel: function onCancel() {
+        return setIframeModalInfo({
+          visible: false
+        });
+      }
+    }))]
+  });
+};
+export default VmBaseModal;

package/lib/vtx-base-modal/service.js

@@ -0,0 +1,39 @@
+import { getVtxToken } from '@vtx/utils';
+import http from "../_util/http";
+var prefix = process.env.PREFIX || '';
+
+// 获取收藏信息
+export var fetchFavorite = function fetchFavorite(params) {
+  return http.get('/cloud/management/api/v101/user/favorites/getUserFavoritesIds', {
+    body: params
+  });
+};
+// 添加收藏
+export var saveFavorite = function saveFavorite(params) {
+  return http.post('/cloud/management/api/v101/user/favorites/saveUserFavorites', {
+    body: params
+  });
+};
+// 取消收藏
+export var cancelFavorite = function cancelFavorite(params) {
+  return http.post('/cloud/management/api/v101/user/favorites/deleteUserFavorites', {
+    body: params
+  });
+};
+export var getTenantById = function getTenantById(id) {
+  return http.get("".concat(prefix, "/cloud/management/rest/np/tenant/getTenantById"), {
+    body: {
+      parameters: JSON.stringify({
+        id: id
+      })
+    }
+  });
+};
+export var getUmsConfig = function getUmsConfig(componentCode) {
+  return http.get("".concat(prefix, "/cloud/management/api/v101/user/config/component/page"), {
+    body: {
+      componentCode: componentCode,
+      userId: getVtxToken('userId')
+    }
+  });
+};

package/lib/vtx-base-modal/style/index.js

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

package/lib/vtx-base-modal/style/index.less

@@ -0,0 +1,78 @@
+.vm-base-modal-mask {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  height: 100%;
+  background-color: var(--modal-mask-bg-color);
+}
+
+.vm-base-modal-wrap {
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 1200px;
+  height: calc(100vh * 0.9);
+  max-height: 748px;
+  min-height: 500px;
+  z-index: 1000;
+  border-radius: 12px;
+  background: var(--modal-bg-color);
+  box-shadow: var(--modal-shadow-color);
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--modal-border-color);
+    border-radius: 12px;
+    padding: 1px;
+    -webkit-mask: linear-gradient(#fff 0 0) content-box,
+      linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+    z-index: -1;
+  }
+  .vm-base-modal-body {
+    position: absolute;
+    top: 56px;
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    background: var(--modal-content-bg);
+    border-radius: 8px;
+  }
+  .vm-base-modal-content-wrap {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+    padding: 0 16px 16px;
+    .vm-base-modal-content {
+      height: 100%;
+      overflow: auto;
+    }
+  }
+  * {
+    &::-webkit-scrollbar {
+      width: 0;
+      height: 0;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+      border-radius: 5px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: transparent;
+      border-radius: 5px;
+    }
+
+    &::-webkit-scrollbar-corner {
+      background-color: transparent;
+    }
+  }
+}