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

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

@@ -0,0 +1,376 @@
+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 sumby from 'lodash/sumBy';
+import { useContext } from 'react';
+import { VmFactor, VmPieCharts, VmTable, VmTag, VmWrapper } from "../../../../_components";
+import useSettings from "../../../../_hooks/useSettings";
+import { MaintenanceService } from "../../../api";
+import { CarContext } from "../../../index";
+import "./index.less";
+import { sumBy } from 'lodash';
+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;
+  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()
+    }),
+    _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 _MaintenanceService$u = MaintenanceService.useInsuranceSummary(id, startDate, endDate),
+    insuranceSummary = _MaintenanceService$u.insuranceSummary;
+  var _MaintenanceService$u2 = MaintenanceService.useCurrentInsurance(id, startDate, endDate),
+    currentInsurance = _MaintenanceService$u2.currentInsurance,
+    loading = _MaintenanceService$u2.loading;
+  var _MaintenanceService$u3 = MaintenanceService.useInspectSummary(id, startDate, endDate),
+    inspectSummary = _MaintenanceService$u3.inspectSummary;
+  var _MaintenanceService$u4 = MaintenanceService.useCurrentSummary(id, startDate, endDate),
+    currentInspect = _MaintenanceService$u4.currentInspect;
+  var _MaintenanceService$u5 = MaintenanceService.useMaintainTypeSummary(id, startDate, endDate),
+    maintainTypeSummary = _MaintenanceService$u5.maintainTypeSummary;
+  var _MaintenanceService$u6 = MaintenanceService.useDepreciationSummary(id, startDate, endDate),
+    depreciationSummary = _MaintenanceService$u6.depreciationSummary;
+  var _MaintenanceService$u7 = MaintenanceService.useAccidentSummary(id, startDate, endDate),
+    accidentSummary = _MaintenanceService$u7.accidentSummary;
+  var _MaintenanceService$u8 = MaintenanceService.useAccidentTypeSummary(id, startDate, endDate),
+    accidentTypeSummary = _MaintenanceService$u8.accidentTypeSummary;
+  var _MaintenanceService$u9 = MaintenanceService.useViolationSummary(id, startDate, endDate),
+    violationSummary = _MaintenanceService$u9.violationSummary;
+  var _MaintenanceService$u10 = MaintenanceService.useViolationTypeSummary(id, startDate, endDate),
+    violationTypeSummary = _MaintenanceService$u10.violationTypeSummary;
+  var columns = [{
+    title: translateLocaleText("t('vtxcarmodal.insuranceType')"),
+    dataIndex: 'insuranceTypeName',
+    key: 'insuranceTypeName',
+    width: '20%',
+    ellipsis: true
+  }, {
+    title: translateLocaleText("t('vtxcarmodal.insuredAmountYuan')"),
+    dataIndex: 'insuranceMoney',
+    key: 'insuranceMoney',
+    width: '20%',
+    align: 'right',
+    ellipsis: true
+  }, {
+    title: translateLocaleText("t('vtxcarmodal.expirationTime')"),
+    dataIndex: 'dueDate',
+    key: 'dueDate',
+    width: '20%',
+    ellipsis: true
+  }, {
+    title: translateLocaleText("t('vtxcarmodal.remainingDaysDays')"),
+    dataIndex: 'remainDays',
+    key: 'remainDays',
+    width: '20%',
+    ellipsis: true
+  }, {
+    title: translateLocaleText("t('common.status')"),
+    dataIndex: 'statusName',
+    key: 'statusName',
+    width: '15%',
+    render: function render(text, record) {
+      return /*#__PURE__*/_jsx(VmTag, {
+        type: record.status === 'normal' ? 'green' : record.status === 'soon' ? 'yellow' : 'red',
+        title: text
+      });
+    }
+  }];
+  var tableProps = {
+    pagination: false,
+    height: 150,
+    dataSource: currentInsurance,
+    loading: loading
+  };
+  var formatAmount = function formatAmount(value) {
+    var num = Number(value);
+    return Number.isFinite(num) ? num.toLocaleString('en-US', {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2
+    }) : '0.00';
+  };
+  var depreciationRate = depreciationSummary !== null && depreciationSummary !== void 0 && depreciationSummary.procurementAmt ? ((depreciationSummary === null || depreciationSummary === void 0 ? void 0 : depreciationSummary.depreciationVal) / (depreciationSummary === null || depreciationSummary === void 0 ? void 0 : depreciationSummary.procurementAmt) * 100).toFixed(2) : '0';
+  var depreciationRows = [{
+    label: translateLocaleText("t('vtxcarmodal.purchaseAmount')"),
+    value: depreciationSummary === null || depreciationSummary === void 0 ? void 0 : depreciationSummary.procurementAmt
+  }, {
+    label: translateLocaleText("t('vtxcarmodal.depreciatedAmount')"),
+    value: depreciationSummary === null || depreciationSummary === void 0 ? void 0 : depreciationSummary.depreciationVal
+  }, {
+    label: translateLocaleText("t('vtxcarmodal.remainingDepreciationAmount')"),
+    value: depreciationSummary === null || depreciationSummary === void 0 ? void 0 : depreciationSummary.reDepreciationVal
+  }];
+  return /*#__PURE__*/_jsxs("div", {
+    className: "vtx-car-water-opt-wrap ".concat(isDark ? 'dark' : ''),
+    children: [/*#__PURE__*/_jsxs(VmWrapper, {
+      title: translateLocaleText("t('vtxcarmodal.insuranceInformation')"),
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "vtx-car-water-opt-row2",
+        children: [{
+          name: translateLocaleText("t('vtxcarmodal.compulsoryInsuranceTotalAmount')"),
+          unit: translateLocaleText("t('common.unit.yuan')"),
+          value: (insuranceSummary === null || insuranceSummary === void 0 ? void 0 : insuranceSummary.compulsoryInsuranceMoney) || 0,
+          icon: 'qzxze'
+        }, {
+          name: translateLocaleText("t('vtxcarmodal.commercialInsuranceTotalAmount')"),
+          unit: translateLocaleText("t('common.unit.yuan')"),
+          value: (insuranceSummary === null || insuranceSummary === void 0 ? void 0 : insuranceSummary.commercialInsuranceMoney) || 0,
+          icon: 'syxze'
+        }].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(VmTable, _objectSpread(_objectSpread({
+        columns: columns,
+        rowKey: "id"
+      }, tableProps), {}, {
+        size: "small"
+      }))]
+    }), /*#__PURE__*/_jsxs(VmWrapper, {
+      title: translateLocaleText("t('vtxcarmodal.annualInspectionInformation')"),
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "vtx-car-water-opt-row2",
+        children: [{
+          name: translateLocaleText("t('vtxcarmodal.annualInspectionTotalFee')"),
+          unit: translateLocaleText("t('common.unit.yuan')"),
+          value: (inspectSummary === null || inspectSummary === void 0 ? void 0 : inspectSummary.inspectMoney) || 0,
+          icon: 'njzfy'
+        }].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.currentAnnualInspection')"),
+        style: {
+          height: 134
+        },
+        headerStyle: {
+          fontSize: 14,
+          height: '40px',
+          lineHeight: '40px',
+          padding: '0 16px',
+          background: !isDark ? '#E8E8E8' : 'rgba(0,157,255,0.2)',
+          border: "1px solid ".concat(isDark ? 'rgba(0,157,255,0.2)' : '#E8E8E8')
+        },
+        extra: currentInspect !== null && currentInspect !== void 0 && currentInspect.status ? /*#__PURE__*/_jsx(VmTag, {
+          type: (currentInspect === null || currentInspect === void 0 ? void 0 : currentInspect.status) === 'normal' ? 'green' : (currentInspect === null || currentInspect === void 0 ? void 0 : currentInspect.statu) === 'soon' ? 'yellow' : 'red',
+          title: (currentInspect === null || currentInspect === void 0 ? void 0 : currentInspect.statusName) || ''
+        }) : null,
+        children: /*#__PURE__*/_jsx("div", {
+          className: "vtx-car-water-opt-row",
+          style: {
+            gridTemplateColumns: '1fr 1fr',
+            gap: 16
+          },
+          children: [{
+            name: translateLocaleText("t('vtxcarmodal.annualInspectionDate')"),
+            value: currentInspect === null || currentInspect === void 0 ? void 0 : currentInspect.inspectDate
+          }, {
+            name: translateLocaleText("t('vtxcarmodal.annualInspectionFeeYuan')"),
+            value: currentInspect === null || currentInspect === void 0 ? void 0 : currentInspect.inspectMoney
+          }, {
+            name: translateLocaleText("t('vtxcarmodal.date2')"),
+            value: currentInspect === null || currentInspect === void 0 ? void 0 : currentInspect.dueDate
+          }, {
+            name: translateLocaleText("t('vtxcarmodal.remainingDays')"),
+            value: currentInspect === null || currentInspect === void 0 ? void 0 : currentInspect.remainDays
+          }].map(function (ele) {
+            return /*#__PURE__*/_jsxs("div", {
+              children: [/*#__PURE__*/_jsx("label", {
+                children: ele.name
+              }), ": ", /*#__PURE__*/_jsx("span", {
+                children: ele.value || '-'
+              })]
+            }, ele.name);
+          })
+        })
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      className: "vtx-car-water-opt-summary2",
+      children: /*#__PURE__*/_jsxs(VmWrapper, {
+        title: translateLocaleText("t('vtxcarmodal.maintenanceInformation')"),
+        children: [/*#__PURE__*/_jsx("div", {
+          className: "vtx-car-water-opt-row2",
+          children: [{
+            name: translateLocaleText("t('vtxcarmodal.cumulativeMaintenanceCount')"),
+            unit: translateLocaleText("t('common.unit.times')"),
+            value: sumBy(maintainTypeSummary || [], 'maintainCount'),
+            icon: 'ljwbcs'
+          }, {
+            name: translateLocaleText("t('vtxcarmodal.maintenanceTotalFee')"),
+            unit: translateLocaleText("t('common.unit.yuan')"),
+            value: sumBy(maintainTypeSummary || [], 'maintainMoney'),
+            icon: 'wbzfy'
+          }].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(VmPieCharts, {
+          dataList: maintainTypeSummary || [],
+          name: translateLocaleText("t('vtxcarmodal.typeAnalysis')"),
+          total: sumBy(maintainTypeSummary || [], 'value'),
+          unit: translateLocaleText("t('common.unit.times')"),
+          loading: loading,
+          height: "150px"
+        })]
+      })
+    }), /*#__PURE__*/_jsx("div", {
+      className: "vtx-car-water-opt-summary2",
+      children: /*#__PURE__*/_jsx(VmWrapper, {
+        title: translateLocaleText("t('vtxcarmodal.depreciationInformation')"),
+        children: /*#__PURE__*/_jsxs("div", {
+          className: "vtx-car-depreciation-content",
+          children: [/*#__PURE__*/_jsxs("div", {
+            className: "vtx-car-depreciation-residual",
+            style: {
+              backgroundImage: "url(".concat(require("../../../imgs/czb_bg".concat(isDark ? '_dark' : '', ".png")), ")")
+            },
+            children: [/*#__PURE__*/_jsx("div", {
+              className: "vtx-car-depreciation-label",
+              children: translateLocaleText("t('vtxcarmodal.residualValueRatio')")
+            }), /*#__PURE__*/_jsxs("div", {
+              className: "vtx-car-depreciation-percent",
+              children: [(depreciationSummary === null || depreciationSummary === void 0 ? void 0 : depreciationSummary.residualValueRatio) || 0, /*#__PURE__*/_jsx("span", {
+                children: "%"
+              })]
+            })]
+          }), /*#__PURE__*/_jsx("div", {
+            className: "vtx-car-depreciation-bars",
+            children: depreciationRows.map(function (item) {
+              return /*#__PURE__*/_jsxs("div", {
+                className: "vtx-car-depreciation-bar",
+                children: [/*#__PURE__*/_jsx("span", {
+                  children: item.label
+                }), /*#__PURE__*/_jsxs("strong", {
+                  children: [formatAmount(item.value), /*#__PURE__*/_jsx("em", {
+                    children: translateLocaleText("t('common.unit.yuan')")
+                  })]
+                })]
+              }, item.label);
+            })
+          }), /*#__PURE__*/_jsxs("div", {
+            className: "vtx-car-depreciation-rate",
+            children: [/*#__PURE__*/_jsx("div", {
+              className: "vtx-car-depreciation-rate-img",
+              style: {
+                backgroundImage: "url(".concat(require("../../../imgs/zjl".concat(isDark ? '_dark' : '', ".png")), ")")
+              }
+            }), /*#__PURE__*/_jsxs("div", {
+              children: [/*#__PURE__*/_jsx("div", {
+                className: "vtx-car-depreciation-label",
+                children: translateLocaleText("t('vtxcarmodal.depreciationRate')")
+              }), /*#__PURE__*/_jsxs("div", {
+                className: "vtx-car-depreciation-rate-value",
+                children: [depreciationRate, "%"]
+              })]
+            })]
+          })]
+        })
+      })
+    }), /*#__PURE__*/_jsx("div", {
+      className: "vtx-car-water-opt-summary2",
+      children: /*#__PURE__*/_jsxs(VmWrapper, {
+        title: translateLocaleText("t('vtxcarmodal.accidentInformation')"),
+        children: [/*#__PURE__*/_jsx("div", {
+          className: "vtx-car-water-opt-row2",
+          children: [{
+            name: translateLocaleText("t('vtxcarmodal.accidentCount')"),
+            unit: translateLocaleText("t('common.unit.times')"),
+            value: (accidentSummary === null || accidentSummary === void 0 ? void 0 : accidentSummary.accidentCount) || 0,
+            icon: 'sgcs'
+          }, {
+            name: translateLocaleText("t('vtxcarmodal.accidentFee')"),
+            unit: translateLocaleText("t('common.unit.yuan')"),
+            value: (accidentSummary === null || accidentSummary === void 0 ? void 0 : accidentSummary.accidentFee) || 0,
+            icon: 'sgfy'
+          }].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(VmPieCharts, {
+          dataList: accidentTypeSummary || [],
+          name: translateLocaleText("t('vtxcarmodal.accidentTypeAnalysis')"),
+          total: sumby(accidentTypeSummary || [], 'value'),
+          unit: translateLocaleText("t('common.unit.times')"),
+          loading: loading,
+          height: "150px"
+        })]
+      })
+    }), /*#__PURE__*/_jsx("div", {
+      className: "vtx-car-water-opt-summary2",
+      children: /*#__PURE__*/_jsxs(VmWrapper, {
+        title: translateLocaleText("t('vtxcarmodal.violationInformation')"),
+        children: [/*#__PURE__*/_jsx("div", {
+          className: "vtx-car-water-opt-row2",
+          children: [{
+            name: translateLocaleText("t('vtxcarmodal.violationCount')"),
+            unit: translateLocaleText("t('common.unit.times')"),
+            value: (violationSummary === null || violationSummary === void 0 ? void 0 : violationSummary.violationCount) || 0,
+            icon: 'wzcs'
+          }, {
+            name: translateLocaleText("t('vtxcarmodal.violationDeduction')"),
+            unit: translateLocaleText("t('common.unit.score')"),
+            value: (violationSummary === null || violationSummary === void 0 ? void 0 : violationSummary.violationScore) || 0,
+            icon: 'wzkf'
+          }, {
+            name: translateLocaleText("t('vtxcarmodal.violationFee')"),
+            unit: translateLocaleText("t('common.unit.yuan')"),
+            value: (violationSummary === null || violationSummary === void 0 ? void 0 : violationSummary.violationFee) || 0,
+            icon: 'wzkfee'
+          }].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(VmPieCharts, {
+          dataList: violationTypeSummary || [],
+          name: translateLocaleText("t('vtxcarmodal.violationTypeAnalysis')"),
+          total: sumBy(violationTypeSummary || [], 'value'),
+          unit: translateLocaleText("t('common.unit.times')"),
+          loading: loading,
+          height: "150px"
+        })]
+      })
+    })]
+  });
+};
+export default WaterUse;

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

@@ -0,0 +1,169 @@
+.vtx-car-water-opt-wrap {
+  height: 100%;
+  display: flex;
+  flex-flow: wrap;
+  gap: 16px;
+  .vtx-car-water-opt-summary {
+    height: 260px;
+    display: flex;
+    gap: 16px;
+    flex-shrink: 0;
+  }
+  .vtx-car-water-opt-summary2 {
+    width: calc((100% - 16px) / 2);
+    height: 300px;
+  }
+  > .div-wrapper {
+    width: calc((100% - 16px) / 2);
+    height: auto;
+    min-width: 0;
+  }
+  .ant-empty {
+    margin: 0 auto;
+  }
+
+  .vtx-car-water-opt-row {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    margin-bottom: 16px;
+  }
+
+  .vtx-car-water-opt-row2 {
+    display: flex;
+    justify-content: space-evenly;
+    margin-bottom: 16px;
+  }
+
+  .vtx-car-depreciation-content {
+    height: 242px;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+  }
+
+  .vtx-car-depreciation-residual {
+    width: 132px;
+    height: 158px;
+    padding: 20px 19px;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    box-sizing: border-box;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .vtx-car-depreciation-label {
+    color: rgba(0, 0, 0, 55%);
+    font-size: 14px;
+    line-height: 20px;
+    white-space: wrap;
+  }
+
+  .vtx-car-depreciation-percent {
+    margin-top: 18px;
+    color: #111;
+    font-size: 28px;
+    font-weight: 700;
+    line-height: 40px;
+
+    span {
+      margin-left: 4px;
+      font-size: 17px;
+      font-weight: 700;
+    }
+  }
+
+  .vtx-car-depreciation-bars {
+    flex: 1;
+    min-width: 0;
+    margin: 0 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  .vtx-car-depreciation-bar {
+    width: 283px;
+    position: relative;
+    height: 42px;
+    padding: 0 32px 0 13px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    color: #fff;
+    background: linear-gradient(90deg, #4f86f6 0%, #5a8ffb 100%);
+    border-radius: 4px;
+    box-shadow: 0 2px 6px rgba(67, 123, 229, 20%);
+    clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
+
+    &:first-child {
+      width: 303px;
+    }
+
+    &:last-child {
+      width: 263px;
+    }
+
+    span {
+      font-size: 14px;
+      white-space: nowrap;
+    }
+
+    strong {
+      font-size: 20px;
+      font-weight: bold;
+      line-height: 1;
+      white-space: nowrap;
+    }
+
+    em {
+      margin-left: 10px;
+      font-size: 18px;
+      font-style: normal;
+      font-weight: bold;
+    }
+  }
+
+  .vtx-car-depreciation-rate {
+    width: 100px;
+    transform: translate3d(-18px, -24px, 0);
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-shrink: 0;
+  }
+
+  .vtx-car-depreciation-rate-img {
+    width: 51px;
+    height: 63px;
+    flex-shrink: 0;
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center;
+  }
+
+  .vtx-car-depreciation-rate-value {
+    margin-top: 10px;
+    color: #5e6169;
+    font-size: 14px;
+    line-height: 20px;
+    white-space: nowrap;
+  }
+
+  &.dark,
+  [data-theme='dark'] & {
+    .vtx-car-depreciation-label {
+      color: #fff;
+    }
+
+    .vtx-car-depreciation-percent {
+      color: #fff;
+    }
+
+    .vtx-car-depreciation-rate-value {
+      color: #fff;
+    }
+  }
+}

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

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