@vtx/modals2 6.0.0-beta.1 → 6.0.0-beta.11

package/lib/vtx-car-modal/content/Common/EleUse/index.js

@@ -0,0 +1,218 @@
+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 { useSetState } from 'ahooks';
+import dayjs from 'dayjs';
+import { useContext } from 'react';
+import { VmBarCharts, VmFactor, VmTable, VmWrapper } from "../../../../_components";
+import useSettings from "../../../../_hooks/useSettings";
+import { MaintenanceService } from "../../../api";
+import { CarContext } from "../../../index";
+import "./index.less";
+import { translateLocaleText } from "./../../../../hooks/useTranslation.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var WaterUse = function WaterUse() {
+  var _useSettings = useSettings(),
+    isDark = _useSettings.isDark,
+    chartFontColor = _useSettings.chartFontColor;
+  var _useContext = useContext(CarContext),
+    id = _useContext.id,
+    sDate = _useContext.startDate,
+    eDate = _useContext.endDate;
+  var _useSetState = useSetState({
+      startDate: sDate ? sDate : dayjs().subtract(6, 'day'),
+      endDate: eDate ? eDate : dayjs(),
+      sorter: 'chargeTime,ASC'
+    }),
+    _useSetState2 = _slicedToArray(_useSetState, 2),
+    state = _useSetState2[0],
+    setState = _useSetState2[1];
+  var startDate = dayjs(state.startDate).format('YYYY-MM-DD');
+  var endDate = dayjs(state.endDate).format('YYYY-MM-DD');
+  var filterChange = function filterChange(dateValue) {
+    setState({
+      startDate: dateValue[0],
+      endDate: dateValue[1]
+    });
+  };
+  var _MaintenanceService$u = MaintenanceService.useEleSummary(id, startDate, endDate),
+    eleSummary = _MaintenanceService$u.eleSummary;
+  var _MaintenanceService$u2 = MaintenanceService.useEleRecord(id, "".concat(startDate, " 00:00:00"), "".concat(endDate, " 23:59:59"), state.sorter),
+    recordRes = _MaintenanceService$u2.recordRes,
+    loading = _MaintenanceService$u2.loading;
+  var _MaintenanceService$u3 = MaintenanceService.useEleTypeSummary(id, startDate, endDate),
+    eleTypeSummary = _MaintenanceService$u3.eleTypeSummary,
+    loadingType = _MaintenanceService$u3.loading;
+  var columns = [{
+    title: translateLocaleText("t('vtxcarmodal.chargeTime')"),
+    dataIndex: 'chargeTime',
+    key: 'chargeTime',
+    sorter: true,
+    width: '30%'
+  }, {
+    title: translateLocaleText("t('vtxcarmodal.chargeLocation')"),
+    dataIndex: 'chargeAddress',
+    key: 'chargeAddress',
+    width: '30%',
+    render: function render(text) {
+      return /*#__PURE__*/_jsx("div", {
+        children: text || '--'
+      });
+    }
+  }, {
+    title: translateLocaleText("t('vtxcarmodal.chargeMoneyYuan')"),
+    dataIndex: 'chargeMoney',
+    key: 'chargeMoney',
+    width: '30%',
+    align: 'right'
+  }];
+  var handleTableChange = function handleTableChange(sorter) {
+    setState({
+      sorter: "".concat(sorter.columnKey || 'waterTime', ",").concat(sorter.order === 'ascend' ? 'ASC' : 'DESC')
+    });
+  };
+  var tableProps = {
+    pagination: {
+      total: (recordRes === null || recordRes === void 0 ? void 0 : recordRes.total) || 0,
+      defaultPageSize: 10
+    },
+    height: 360,
+    dataSource: (recordRes === null || recordRes === void 0 ? void 0 : recordRes.rows) || [],
+    loading: loading,
+    handleTableChange: handleTableChange
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    className: 'vtx-car-water-use-wrap',
+    children: [/*#__PURE__*/_jsx(VmWrapper, {
+      title: translateLocaleText("t('vtxcarmodal.statisticalScope')"),
+      filterType: "rangePicker",
+      dateValue: [state.startDate, state.endDate],
+      filterChange: filterChange,
+      showContent: false,
+      style: {
+        height: 50
+      },
+      headerStyle: {
+        borderBottom: 'none'
+      },
+      extraStyle: {
+        left: 100,
+        right: 'unset'
+      }
+    }), /*#__PURE__*/_jsxs("div", {
+      className: "vtx-car-water-use-summary",
+      children: [/*#__PURE__*/_jsx(VmWrapper, {
+        title: translateLocaleText("t('vtxcarmodal.chargeSummary')"),
+        children: /*#__PURE__*/_jsx("div", {
+          className: "vtx-car-water-use-row",
+          children: [{
+            name: translateLocaleText("t('vtxcarmodal.chargeCount')"),
+            unit: translateLocaleText("t('common.unit.times')"),
+            value: (eleSummary === null || eleSummary === void 0 ? void 0 : eleSummary.chargeCount) || 0,
+            icon: 'cdcs'
+          }, {
+            name: translateLocaleText("t('vtxcarmodal.chargeMoney')"),
+            unit: translateLocaleText("t('common.unit.yuan')"),
+            value: (eleSummary === null || eleSummary === void 0 ? void 0 : eleSummary.chargeMoney) || 0,
+            icon: 'cdje'
+          }, {
+            name: translateLocaleText("t('vtxcarmodal.singleChargeMoney')"),
+            unit: translateLocaleText("t('common.unit.yuanPerTimes')"),
+            value: (eleSummary === null || eleSummary === void 0 ? void 0 : eleSummary.singleChargeMoney) || 0,
+            icon: 'dccdje'
+          }, {
+            name: translateLocaleText("t('vtxcarmodal.chargeFrequency')"),
+            unit: translateLocaleText("t('common.unit.dayPerTimes')"),
+            value: (eleSummary === null || eleSummary === void 0 ? void 0 : eleSummary.chargeFrequency) || 0,
+            icon: 'cdpc'
+          }, {
+            name: translateLocaleText("t('vtxcarmodal.day2')"),
+            unit: 'km',
+            value: (eleSummary === null || eleSummary === void 0 ? void 0 : eleSummary.distance) || 0,
+            icon: 'xslc'
+          }, {
+            name: translateLocaleText("t('vtxcarmodal.electricCost')"),
+            unit: translateLocaleText("t('common.unit.yuanPerKm')"),
+            value: (eleSummary === null || eleSummary === void 0 ? void 0 : eleSummary.electricCost) || 0,
+            icon: 'ydcb'
+          }].map(function (ele) {
+            return /*#__PURE__*/_jsx(VmFactor, {
+              name: translateLocaleText(ele.name),
+              unit: ele.unit,
+              value: ele.value,
+              img: require("../../../imgs/factor/".concat(ele.icon).concat(isDark ? '_dark' : '', ".png"))
+            }, ele.name);
+          })
+        })
+      }), /*#__PURE__*/_jsx(VmWrapper, {
+        title: translateLocaleText("t('vtxcarmodal.chargeTimePreferenceAnalysis')"),
+        children: /*#__PURE__*/_jsx(VmBarCharts, {
+          name: translateLocaleText("t('vtxcarmodal.chargeTimePreferenceAnalysis')"),
+          unit: translateLocaleText("t('common.unit.times')"),
+          loading: loadingType,
+          dataList: [{
+            name: translateLocaleText("t('vtxcarmodal.chargeCount')"),
+            data: _.map(eleTypeSummary, 'value'),
+            color: 'geekblue'
+          }],
+          yAxisList: [{
+            key: '',
+            unit: translateLocaleText("t('common.unit.times')"),
+            name: ''
+          }],
+          otherProps: {
+            xAxis: {
+              type: 'value',
+              unit: translateLocaleText("t('common.unit.times')"),
+              name: translateLocaleText("t('common.unit.times')"),
+              axisLabel: {
+                color: chartFontColor
+              }
+            },
+            yAxis: {
+              type: 'category',
+              data: _.map(eleTypeSummary, 'name'),
+              axisLabel: {
+                color: chartFontColor
+              }
+            },
+            grid: {
+              left: '5%',
+              right: '5%',
+              bottom: '5%',
+              top: '5%',
+              containLabel: true
+            }
+          }
+        })
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      style: {
+        flex: 1,
+        minHeight: 0
+      },
+      children: /*#__PURE__*/_jsx(VmWrapper, {
+        title: translateLocaleText("t('vtxcarmodal.chargeDetail')"),
+        children: /*#__PURE__*/_jsx("div", {
+          style: {
+            height: '360px'
+          },
+          children: /*#__PURE__*/_jsx(VmTable, _objectSpread({
+            columns: columns,
+            rowKey: "id"
+          }, tableProps))
+        })
+      })
+    })]
+  });
+};
+export default WaterUse;

package/lib/vtx-car-modal/content/Common/EleUse/index.less

@@ -0,0 +1,19 @@
+.vtx-car-water-use-wrap {
+  height: 100%;
+  display: flex;
+  gap: 16px;
+  flex-direction: column;
+
+  .vtx-car-water-use-summary {
+    height: 240px;
+    display: flex;
+    gap: 16px;
+    flex-shrink: 0;
+  }
+
+  .vtx-car-water-use-row {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 40px 0;
+  }
+}

package/lib/vtx-car-modal/content/Common/OilConsumption/index.less

@@ -1,6 +1,6 @@
-.vtx-car-oil-wrap {
-  height: 100%;
-  display: flex;
-  gap: 16px;
-  flex-direction: column;
-}
+.vtx-car-oil-wrap {
+  height: 100%;
+  display: flex;
+  gap: 16px;
+  flex-direction: column;
+}

package/lib/vtx-car-modal/content/Common/OilUse/index.js

@@ -0,0 +1,230 @@
+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 { useSetState } from 'ahooks';
+import dayjs from 'dayjs';
+import { useContext } from 'react';
+import { VmBarCharts, VmFactor, VmTable, VmWrapper } from "../../../../_components";
+import useSettings from "../../../../_hooks/useSettings";
+import { MaintenanceService } from "../../../api";
+import { CarContext } from "../../../index";
+import "./index.less";
+import { translateLocaleText } from "../../../../hooks/useTranslation";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var OilUse = function OilUse() {
+  var _useSettings = useSettings(),
+    chartFontColor = _useSettings.chartFontColor,
+    isDark = _useSettings.isDark;
+  var _useContext = useContext(CarContext),
+    id = _useContext.id,
+    sDate = _useContext.startDate,
+    eDate = _useContext.endDate;
+  var _useSetState = useSetState({
+      startDate: sDate ? sDate : dayjs().subtract(6, 'day'),
+      endDate: eDate ? eDate : dayjs(),
+      sorter: 'oilTime,ASC'
+    }),
+    _useSetState2 = _slicedToArray(_useSetState, 2),
+    state = _useSetState2[0],
+    setState = _useSetState2[1];
+  var startDate = dayjs(state.startDate).format('YYYY-MM-DD');
+  var endDate = dayjs(state.endDate).format('YYYY-MM-DD');
+  var filterChange = function filterChange(dateValue) {
+    setState({
+      startDate: dateValue[0],
+      endDate: dateValue[1]
+    });
+  };
+  var _MaintenanceService$u = MaintenanceService.useOilSummary(id, startDate, endDate),
+    oilUseSummary = _MaintenanceService$u.oilUseSummary;
+  var _MaintenanceService$u2 = MaintenanceService.useOilRecord(id, "".concat(startDate, " 00:00:00"), "".concat(endDate, " 23:59:59"), state.sorter),
+    recordRes = _MaintenanceService$u2.recordRes,
+    loading = _MaintenanceService$u2.loading;
+  var _MaintenanceService$u3 = MaintenanceService.useOilTypeSummary(id, startDate, endDate),
+    oilUseTypeSummary = _MaintenanceService$u3.oilUseTypeSummary,
+    loadingType = _MaintenanceService$u3.loading;
+  var columns = [{
+    title: translateLocaleText("t('vtxcarmodal.oilRefuelTime')"),
+    dataIndex: 'oilTime',
+    key: 'oilTime',
+    sorter: true,
+    width: '15%'
+  }, {
+    title: translateLocaleText("t('vtxcarmodal.oilRefuelPoint')"),
+    dataIndex: 'oilPoint',
+    key: 'oilPoint',
+    width: '15%'
+  }, {
+    title: translateLocaleText("t('vtxcarmodal.oilProduct')"),
+    dataIndex: 'oilType',
+    key: 'oilType',
+    width: '15%'
+  }, {
+    title: translateLocaleText("t('vtxcarmodal.oilRefuelAmountL')"),
+    dataIndex: 'oilCount',
+    key: 'oilCount',
+    align: 'right',
+    width: '15%'
+  }, {
+    title: translateLocaleText("t('vtxcarmodal.totalPriceYuan')"),
+    dataIndex: 'totalPrice',
+    key: 'totalPrice',
+    align: 'right',
+    width: '15%'
+  }, {
+    title: translateLocaleText("t('vtxcarmodal.mileageKm')"),
+    dataIndex: 'mileage',
+    key: 'mileage',
+    align: 'right',
+    width: '15%'
+  }];
+  var handleTableChange = function handleTableChange(sorter) {
+    setState({
+      sorter: "".concat(sorter.columnKey || 'oilTime', ",").concat(sorter.order === 'ascend' ? 'ASC' : 'DESC')
+    });
+  };
+  var tableProps = {
+    pagination: {
+      total: (recordRes === null || recordRes === void 0 ? void 0 : recordRes.total) || 0,
+      defaultPageSize: 10
+    },
+    height: 360,
+    dataSource: (recordRes === null || recordRes === void 0 ? void 0 : recordRes.rows) || [],
+    loading: loading,
+    handleTableChange: handleTableChange
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    className: 'vtx-car-water-use-wrap',
+    children: [/*#__PURE__*/_jsx(VmWrapper, {
+      title: translateLocaleText("t('vtxcarmodal.statisticalScope')"),
+      filterType: "rangePicker",
+      dateValue: [state.startDate, state.endDate],
+      filterChange: filterChange,
+      showContent: false,
+      style: {
+        height: 50
+      },
+      headerStyle: {
+        borderBottom: 'none'
+      },
+      extraStyle: {
+        left: 100,
+        right: 'unset'
+      }
+    }), /*#__PURE__*/_jsxs("div", {
+      className: "vtx-car-water-use-summary",
+      children: [/*#__PURE__*/_jsx(VmWrapper, {
+        title: translateLocaleText("t('vtxcarmodal.oilRefuelSummary')"),
+        children: /*#__PURE__*/_jsx("div", {
+          className: "vtx-car-water-use-row",
+          children: [{
+            name: translateLocaleText("t('vtxcarmodal.oilRefuelCount')"),
+            unit: translateLocaleText("t('common.unit.times')"),
+            value: (oilUseSummary === null || oilUseSummary === void 0 ? void 0 : oilUseSummary.oilCount) || 0,
+            icon: 'jycs'
+          }, {
+            name: translateLocaleText("t('vtxcarmodal.oilRefuelAmount')"),
+            unit: 'L',
+            value: (oilUseSummary === null || oilUseSummary === void 0 ? void 0 : oilUseSummary.oilAmount) || 0,
+            icon: 'jyl'
+          }, {
+            name: translateLocaleText("t('vtxcarmodal.oilRefuelMoney')"),
+            unit: translateLocaleText("t('common.unit.yuan')"),
+            value: (oilUseSummary === null || oilUseSummary === void 0 ? void 0 : oilUseSummary.oilMoney) || 0,
+            icon: 'jyje'
+          }, {
+            name: translateLocaleText("t('vtxcarmodal.day2')"),
+            unit: 'km',
+            value: (oilUseSummary === null || oilUseSummary === void 0 ? void 0 : oilUseSummary.distance) || 0,
+            icon: 'xslc'
+          }, {
+            name: translateLocaleText("t('vtxcarmodal.fuelConsumptionPer100Km')"),
+            unit: 'L',
+            value: (oilUseSummary === null || oilUseSummary === void 0 ? void 0 : oilUseSummary.averageOilUse) || 0,
+            icon: 'bglyh'
+          }, {
+            name: translateLocaleText("t('vtxcarmodal.oilCost')"),
+            unit: translateLocaleText("t('common.unit.yuanPerKm')"),
+            value: (oilUseSummary === null || oilUseSummary === void 0 ? void 0 : oilUseSummary.oilCost) || 0,
+            icon: 'yhcb'
+          }].map(function (ele) {
+            return /*#__PURE__*/_jsx(VmFactor, {
+              name: translateLocaleText(ele.name),
+              unit: ele.unit,
+              value: ele.value,
+              img: require("../../../imgs/factor/".concat(ele.icon).concat(isDark ? '_dark' : '', ".png"))
+            }, ele.name);
+          })
+        })
+      }), /*#__PURE__*/_jsx(VmWrapper, {
+        title: translateLocaleText("t('vtxcarmodal.oilRefuelTimePreferenceAnalysis')"),
+        children: /*#__PURE__*/_jsx(VmBarCharts, {
+          name: translateLocaleText("t('vtxcarmodal.oilRefuelTimePreferenceAnalysis')"),
+          unit: translateLocaleText("t('common.unit.times')"),
+          loading: loadingType,
+          dataList: [{
+            name: translateLocaleText("t('vtxcarmodal.oilRefuelCount')"),
+            data: _.map(oilUseTypeSummary, 'value'),
+            color: 'geekblue'
+          }],
+          yAxisList: [{
+            key: '',
+            unit: translateLocaleText("t('common.unit.times')"),
+            name: ''
+          }],
+          otherProps: {
+            xAxis: {
+              type: 'value',
+              unit: translateLocaleText("t('common.unit.times')"),
+              name: translateLocaleText("t('common.unit.times')"),
+              axisLabel: {
+                color: chartFontColor
+              }
+            },
+            yAxis: {
+              type: 'category',
+              data: _.map(oilUseTypeSummary, 'name'),
+              axisLabel: {
+                color: chartFontColor
+              }
+            },
+            grid: {
+              left: '5%',
+              right: '5%',
+              bottom: '5%',
+              top: '5%',
+              containLabel: true
+            }
+          }
+        })
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      style: {
+        flex: 1,
+        minHeight: 0
+      },
+      children: /*#__PURE__*/_jsx(VmWrapper, {
+        title: translateLocaleText("t('vtxcarmodal.oilRefuelDetail')"),
+        children: /*#__PURE__*/_jsx("div", {
+          style: {
+            height: '360px'
+          },
+          children: /*#__PURE__*/_jsx(VmTable, _objectSpread({
+            columns: columns,
+            rowKey: "id"
+          }, tableProps))
+        })
+      })
+    })]
+  });
+};
+export default OilUse;

package/lib/vtx-car-modal/content/Common/OilUse/index.less

@@ -0,0 +1,19 @@
+.vtx-car-water-use-wrap {
+  height: 100%;
+  display: flex;
+  gap: 16px;
+  flex-direction: column;
+
+  .vtx-car-water-use-summary {
+    height: 240px;
+    display: flex;
+    gap: 16px;
+    flex-shrink: 0;
+  }
+
+  .vtx-car-water-use-row {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 40px 0;
+  }
+}