{"id":2629,"date":"2026-04-22T07:17:47","date_gmt":"2026-04-22T07:17:47","guid":{"rendered":"https:\/\/bbpmfg.com\/?page_id=2629"},"modified":"2026-04-22T07:21:16","modified_gmt":"2026-04-22T07:21:16","slug":"tco-calculator","status":"publish","type":"page","link":"https:\/\/bbpmfg.com\/pt\/sewage-pumps\/submersible\/tco-calculator\/","title":{"rendered":"calculadora tco"},"content":{"rendered":"\n<div class=\"wp-block-stackable-columns alignfull stk-block-columns stk-block stk-a74db99\" data-block-id=\"a74db99\"><style>.stk-a74db99 {margin-bottom:0px !important;}<\/style><div class=\"stk-row stk-inner-blocks stk-block-content stk-content-align stk-a74db99-column alignfull\">\n<div class=\"wp-block-stackable-column stk-block-column stk-column stk-block stk-b23466d\" data-v=\"4\" data-block-id=\"b23466d\"><style>.stk-b23466d-container{margin-top:var(--stk--preset--spacing--50, 1.5rem) !important;margin-right:var(--stk--preset--spacing--50, 1.5rem) !important;margin-bottom:var(--stk--preset--spacing--50, 1.5rem) !important;margin-left:var(--stk--preset--spacing--50, 1.5rem) !important;}<\/style><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-b23466d-container stk--no-background stk--no-padding\"><div class=\"has-text-align-center stk-block-content stk-inner-blocks stk-b23466d-inner-blocks\"><div class=\"ct-breadcrumbs\" data-source=\"rankmath\" ><nav aria-label=\"breadcrumbs\" class=\"rank-math-breadcrumb\"><p><span class=\"last\">Home<\/span><\/p><\/nav><\/div><\/div><\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-columns alignfull stk-block-columns stk-block stk-cda6f85\" data-block-id=\"cda6f85\"><div class=\"stk-row stk-inner-blocks stk-block-content stk-content-align stk-cda6f85-column alignfull\">\n<div class=\"wp-block-stackable-column stk-block-column stk-column stk-block stk-e9cf1b4\" data-v=\"4\" data-block-id=\"e9cf1b4\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-e9cf1b4-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-e9cf1b4-inner-blocks\">\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" \/>\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n  <title>Submersible vs Dry-Pit Pump TCO Calculator | BBP<\/title>\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/>\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=IBM+Plex+Mono:wght@300;400;500;600;700&#038;display=swap\" rel=\"stylesheet\" \/>\n  <style>\n    \/* \u2500\u2500 Custom Properties \u2500\u2500 *\/\n    :root {\n      --color-primary: #1848C0;\n      --color-primary-dark: #0f309a;\n      --color-accent: #F0C018;\n      --color-accent-dark: #c9a012;\n      --color-bg: #f4f5f7;\n      --color-surface: #ffffff;\n      --color-surface-alt: #f9fafb;\n      --color-border: #d0d5e0;\n      --color-text: #111827;\n      --color-text-muted: #6b7280;\n      --color-text-light: #9ca3af;\n      --color-submersible: #1848C0;\n      --color-drypit: #374151;\n      --color-win: #F0C018;\n      --color-savings-bg: #fffbeb;\n      --font-mono: 'IBM Plex Mono', 'Courier New', monospace;\n      --radius: 0px;\n      --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);\n      --shadow-md: 0 4px 12px rgba(0,0,0,0.12);\n      --transition: 0.18s ease;\n    }\n\n    \/* \u2500\u2500 Reset \u2500\u2500 *\/\n    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n    html { font-size: 16px; }\n    body {\n      font-family: var(--font-mono);\n      background: var(--color-bg);\n      color: var(--color-text);\n      line-height: 1.6;\n      padding: 0 16px 60px;\n    }\n\n    \/* \u2500\u2500 Layout \u2500\u2500 *\/\n    .tool-wrapper {\n      max-width: 860px;\n      margin: 0 auto;\n    }\n\n    \/* \u2500\u2500 Header \u2500\u2500 *\/\n    .tool-header {\n      background: var(--color-primary);\n      color: #fff;\n      padding: 28px 32px 24px;\n      margin-bottom: 0;\n      border-bottom: 4px solid var(--color-accent);\n    }\n    .tool-header .brand-tag {\n      font-size: 10px;\n      font-weight: 600;\n      letter-spacing: 0.15em;\n      text-transform: uppercase;\n      color: var(--color-accent);\n      margin-bottom: 6px;\n    }\n    .tool-header h1 {\n      font-size: 20px;\n      font-weight: 700;\n      letter-spacing: -0.02em;\n      line-height: 1.3;\n    }\n    .tool-header p {\n      font-size: 12px;\n      color: rgba(255,255,255,0.7);\n      margin-top: 6px;\n      font-weight: 300;\n    }\n\n    \/* \u2500\u2500 Input Panel \u2500\u2500 *\/\n    .input-panel {\n      background: var(--color-surface);\n      border: 1px solid var(--color-border);\n      border-top: none;\n      padding: 28px 32px;\n    }\n    .input-panel h2 {\n      font-size: 11px;\n      font-weight: 600;\n      letter-spacing: 0.12em;\n      text-transform: uppercase;\n      color: var(--color-text-muted);\n      margin-bottom: 20px;\n      padding-bottom: 8px;\n      border-bottom: 1px solid var(--color-border);\n    }\n\n    .input-grid {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 20px 28px;\n    }\n    @media (max-width: 580px) {\n      .input-grid { grid-template-columns: 1fr; }\n      .input-panel { padding: 20px 18px; }\n      .tool-header { padding: 20px 18px 18px; }\n    }\n\n    .field-group {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n    }\n    .field-group.full-width {\n      grid-column: 1 \/ -1;\n    }\n    label {\n      font-size: 11px;\n      font-weight: 600;\n      letter-spacing: 0.08em;\n      text-transform: uppercase;\n      color: var(--color-text-muted);\n    }\n    .field-hint {\n      font-size: 10px;\n      color: var(--color-text-light);\n      font-weight: 300;\n      margin-top: -3px;\n    }\n    input[type=\"number\"],\n    select {\n      font-family: var(--font-mono);\n      font-size: 15px;\n      font-weight: 500;\n      color: var(--color-text);\n      background: var(--color-surface-alt);\n      border: 1px solid var(--color-border);\n      border-radius: var(--radius);\n      padding: 10px 12px;\n      width: 100%;\n      transition: border-color var(--transition), box-shadow var(--transition);\n      appearance: none;\n      -webkit-appearance: none;\n    }\n    input[type=\"number\"]:focus,\n    select:focus {\n      outline: none;\n      border-color: var(--color-primary);\n      box-shadow: 0 0 0 2px rgba(24,72,192,0.15);\n    }\n    input[type=\"number\"]::-webkit-inner-spin-button,\n    input[type=\"number\"]::-webkit-outer-spin-button {\n      opacity: 1;\n    }\n\n    \/* Select arrow *\/\n    .select-wrapper {\n      position: relative;\n    }\n    .select-wrapper::after {\n      content: '\u25bc';\n      position: absolute;\n      right: 12px;\n      top: 50%;\n      transform: translateY(-50%);\n      font-size: 10px;\n      color: var(--color-text-muted);\n      pointer-events: none;\n    }\n    select {\n      padding-right: 32px;\n      cursor: pointer;\n    }\n\n    \/* Radio group *\/\n    .radio-group {\n      display: flex;\n      gap: 0;\n      border: 1px solid var(--color-border);\n    }\n    .radio-option {\n      flex: 1;\n      position: relative;\n    }\n    .radio-option input[type=\"radio\"] {\n      position: absolute;\n      opacity: 0;\n      width: 0;\n      height: 0;\n    }\n    .radio-option label {\n      display: block;\n      text-align: center;\n      padding: 10px 8px;\n      font-size: 11px;\n      font-weight: 600;\n      letter-spacing: 0.06em;\n      color: var(--color-text-muted);\n      background: var(--color-surface-alt);\n      border-right: 1px solid var(--color-border);\n      cursor: pointer;\n      transition: all var(--transition);\n      text-transform: uppercase;\n    }\n    .radio-option:last-child label {\n      border-right: none;\n    }\n    .radio-option input[type=\"radio\"]:checked + label {\n      background: var(--color-primary);\n      color: #fff;\n    }\n    .radio-option label:hover {\n      background: rgba(24,72,192,0.07);\n    }\n    .radio-option input[type=\"radio\"]:checked + label:hover {\n      background: var(--color-primary);\n    }\n\n    \/* \u2500\u2500 CTA Calculate \u2500\u2500 *\/\n    .calc-btn-wrap {\n      margin-top: 24px;\n      display: flex;\n      gap: 12px;\n      align-items: center;\n    }\n    .btn-calculate {\n      font-family: var(--font-mono);\n      font-size: 13px;\n      font-weight: 700;\n      letter-spacing: 0.08em;\n      text-transform: uppercase;\n      color: var(--color-primary);\n      background: var(--color-accent);\n      border: 2px solid var(--color-accent);\n      border-radius: var(--radius);\n      padding: 12px 28px;\n      cursor: pointer;\n      transition: all var(--transition);\n    }\n    .btn-calculate:hover {\n      background: var(--color-accent-dark);\n      border-color: var(--color-accent-dark);\n    }\n    .btn-calculate:active {\n      transform: scale(0.98);\n    }\n    .btn-reset {\n      font-family: var(--font-mono);\n      font-size: 11px;\n      font-weight: 500;\n      color: var(--color-text-muted);\n      background: transparent;\n      border: 1px solid var(--color-border);\n      border-radius: var(--radius);\n      padding: 12px 18px;\n      cursor: pointer;\n      transition: all var(--transition);\n    }\n    .btn-reset:hover {\n      border-color: var(--color-text-muted);\n      color: var(--color-text);\n    }\n\n    \/* \u2500\u2500 Results Section \u2500\u2500 *\/\n    .results-section {\n      display: none;\n      margin-top: 0;\n      animation: fadeInUp 0.3s ease;\n    }\n    .results-section.visible {\n      display: block;\n    }\n    @keyframes fadeInUp {\n      from { opacity: 0; transform: translateY(8px); }\n      to   { opacity: 1; transform: translateY(0); }\n    }\n\n    \/* \u2500\u2500 Savings Banner \u2500\u2500 *\/\n    .savings-banner {\n      background: var(--color-savings-bg);\n      border: 2px solid var(--color-accent);\n      padding: 18px 32px;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: 16px;\n      flex-wrap: wrap;\n    }\n    .savings-banner .savings-label {\n      font-size: 11px;\n      font-weight: 600;\n      letter-spacing: 0.1em;\n      text-transform: uppercase;\n      color: var(--color-text-muted);\n    }\n    .savings-banner .savings-winner {\n      font-size: 16px;\n      font-weight: 700;\n      color: var(--color-text);\n      margin-top: 2px;\n    }\n    .savings-banner .savings-winner span {\n      color: var(--color-primary);\n    }\n    .savings-amount-block {\n      text-align: right;\n    }\n    .savings-amount-block .amount {\n      font-size: 24px;\n      font-weight: 700;\n      color: var(--color-primary);\n    }\n    .savings-amount-block .pct {\n      font-size: 12px;\n      font-weight: 500;\n      color: var(--color-text-muted);\n      margin-top: 2px;\n    }\n    @media (max-width: 580px) {\n      .savings-banner { padding: 16px 18px; }\n    }\n\n    \/* \u2500\u2500 Comparison Cards \u2500\u2500 *\/\n    .comparison-grid {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 0;\n      border: 1px solid var(--color-border);\n      border-top: none;\n    }\n    @media (max-width: 580px) {\n      .comparison-grid { grid-template-columns: 1fr; }\n    }\n\n    .pump-card {\n      background: var(--color-surface);\n      padding: 24px 28px;\n      border-right: 1px solid var(--color-border);\n      position: relative;\n    }\n    .pump-card:last-child {\n      border-right: none;\n    }\n    .pump-card.is-winner {\n      background: #fefce8;\n    }\n    @media (max-width: 580px) {\n      .pump-card {\n        border-right: none;\n        border-bottom: 1px solid var(--color-border);\n        padding: 20px 18px;\n      }\n      .pump-card:last-child { border-bottom: none; }\n    }\n\n    .card-header {\n      display: flex;\n      align-items: flex-start;\n      justify-content: space-between;\n      margin-bottom: 18px;\n      padding-bottom: 14px;\n      border-bottom: 2px solid var(--color-border);\n    }\n    .pump-card.is-winner .card-header {\n      border-bottom-color: var(--color-accent);\n    }\n\n    .pump-type-label {\n      font-size: 10px;\n      font-weight: 700;\n      letter-spacing: 0.14em;\n      text-transform: uppercase;\n      color: var(--color-text-muted);\n    }\n    .pump-type-name {\n      font-size: 15px;\n      font-weight: 700;\n      margin-top: 3px;\n    }\n    .pump-card:first-child .pump-type-name { color: var(--color-submersible); }\n    .pump-card:last-child .pump-type-name { color: var(--color-drypit); }\n\n    .winner-badge {\n      display: none;\n      font-size: 10px;\n      font-weight: 700;\n      letter-spacing: 0.1em;\n      text-transform: uppercase;\n      background: var(--color-accent);\n      color: var(--color-text);\n      padding: 3px 8px;\n    }\n    .pump-card.is-winner .winner-badge {\n      display: block;\n    }\n\n    \/* Cost rows *\/\n    .cost-rows {\n      display: flex;\n      flex-direction: column;\n      gap: 10px;\n    }\n    .cost-row {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: 8px;\n    }\n    .cost-row-label {\n      font-size: 11px;\n      color: var(--color-text-muted);\n      font-weight: 400;\n      flex: 1;\n      min-width: 0;\n    }\n    .cost-row-value {\n      font-size: 13px;\n      font-weight: 600;\n      color: var(--color-text);\n      white-space: nowrap;\n    }\n    .cost-row.is-sub {\n      padding-left: 10px;\n      opacity: 0.85;\n    }\n    .cost-row.is-sub .cost-row-label {\n      font-size: 10px;\n    }\n    .cost-row.is-sub .cost-row-value {\n      font-size: 12px;\n    }\n\n    \/* Divider *\/\n    .cost-divider {\n      height: 1px;\n      background: var(--color-border);\n      margin: 4px 0;\n    }\n\n    \/* Total row *\/\n    .cost-row.is-total {\n      padding-top: 10px;\n      border-top: 2px solid var(--color-border);\n      margin-top: 6px;\n    }\n    .pump-card.is-winner .cost-row.is-total {\n      border-top-color: var(--color-accent);\n    }\n    .cost-row.is-total .cost-row-label {\n      font-size: 12px;\n      font-weight: 700;\n      color: var(--color-text);\n      text-transform: uppercase;\n      letter-spacing: 0.06em;\n    }\n    .cost-row.is-total .cost-row-value {\n      font-size: 18px;\n      font-weight: 700;\n    }\n    .pump-card:first-child .cost-row.is-total .cost-row-value {\n      color: var(--color-submersible);\n    }\n    .pump-card:last-child .cost-row.is-total .cost-row-value {\n      color: var(--color-drypit);\n    }\n\n    \/* \u2500\u2500 Bar Chart \u2500\u2500 *\/\n    .chart-section {\n      background: var(--color-surface);\n      border: 1px solid var(--color-border);\n      border-top: none;\n      padding: 24px 32px;\n    }\n    .chart-title {\n      font-size: 11px;\n      font-weight: 600;\n      letter-spacing: 0.1em;\n      text-transform: uppercase;\n      color: var(--color-text-muted);\n      margin-bottom: 20px;\n    }\n\n    .bar-chart {\n      display: flex;\n      flex-direction: column;\n      gap: 14px;\n    }\n    .bar-row {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n    .bar-label {\n      font-size: 11px;\n      font-weight: 600;\n      width: 140px;\n      flex-shrink: 0;\n      color: var(--color-text);\n      text-transform: uppercase;\n      letter-spacing: 0.06em;\n    }\n    @media (max-width: 580px) {\n      .bar-label { width: 100px; font-size: 10px; }\n      .chart-section { padding: 20px 18px; }\n    }\n    .bar-track {\n      flex: 1;\n      background: var(--color-border);\n      height: 32px;\n      position: relative;\n      overflow: hidden;\n    }\n    .bar-fill {\n      height: 100%;\n      transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1);\n      display: flex;\n      align-items: center;\n      justify-content: flex-end;\n      padding-right: 10px;\n      min-width: 4px;\n    }\n    .bar-fill.sub-fill {\n      background: var(--color-submersible);\n    }\n    .bar-fill.dry-fill {\n      background: var(--color-drypit);\n    }\n    .bar-fill.is-winner-fill.sub-fill,\n    .bar-fill.is-winner-fill.dry-fill {\n      background: var(--color-accent);\n    }\n    .bar-value {\n      font-size: 11px;\n      font-weight: 700;\n      color: var(--color-surface);\n      white-space: nowrap;\n    }\n    .bar-fill.bar-too-narrow .bar-value {\n      display: none;\n    }\n\n    \/* Stacked bar chart for TCO breakdown *\/\n    .stacked-chart {\n      display: flex;\n      flex-direction: column;\n      gap: 14px;\n      margin-top: 18px;\n    }\n    .stacked-row {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n    .stacked-track {\n      flex: 1;\n      height: 28px;\n      display: flex;\n      overflow: hidden;\n    }\n    .stacked-seg {\n      height: 100%;\n      transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1);\n    }\n    .seg-civil { background: #93c5fd; }\n    .seg-equip { background: #1848C0; }\n    .seg-energy { background: #F0C018; }\n    .seg-maint  { background: #d97706; }\n\n    \/* Chart legend *\/\n    .chart-legend {\n      display: flex;\n      gap: 16px;\n      flex-wrap: wrap;\n      margin-top: 16px;\n    }\n    .legend-item {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      font-size: 10px;\n      color: var(--color-text-muted);\n    }\n    .legend-dot {\n      width: 12px;\n      height: 12px;\n      flex-shrink: 0;\n    }\n\n    \/* \u2500\u2500 Disclaimer \u2500\u2500 *\/\n    .disclaimer {\n      background: var(--color-surface-alt);\n      border: 1px solid var(--color-border);\n      border-top: none;\n      padding: 14px 32px;\n      font-size: 10px;\n      color: var(--color-text-light);\n      line-height: 1.5;\n    }\n    @media (max-width: 580px) {\n      .disclaimer { padding: 14px 18px; }\n    }\n\n    \/* \u2500\u2500 CTA Block \u2500\u2500 *\/\n    .cta-block {\n      background: var(--color-primary);\n      border: none;\n      padding: 28px 32px;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: 20px;\n      flex-wrap: wrap;\n    }\n    .cta-block .cta-text {\n      color: #fff;\n    }\n    .cta-block .cta-headline {\n      font-size: 14px;\n      font-weight: 700;\n      letter-spacing: -0.01em;\n    }\n    .cta-block .cta-sub {\n      font-size: 11px;\n      color: rgba(255,255,255,0.65);\n      margin-top: 4px;\n      font-weight: 300;\n    }\n    .btn-cta {\n      font-family: var(--font-mono);\n      font-size: 12px;\n      font-weight: 700;\n      letter-spacing: 0.06em;\n      text-transform: uppercase;\n      color: var(--color-primary);\n      background: var(--color-accent);\n      border: 2px solid var(--color-accent);\n      border-radius: var(--radius);\n      padding: 12px 22px;\n      cursor: pointer;\n      text-decoration: none;\n      display: inline-block;\n      transition: all var(--transition);\n      white-space: nowrap;\n      flex-shrink: 0;\n    }\n    .btn-cta:hover {\n      background: #fff;\n      border-color: #fff;\n    }\n    @media (max-width: 580px) {\n      .cta-block { padding: 22px 18px; }\n      .cta-block { flex-direction: column; align-items: flex-start; }\n    }\n\n    \/* \u2500\u2500 Utility \u2500\u2500 *\/\n    .mt-4 { margin-top: 4px; }\n    .no-results-placeholder {\n      background: var(--color-surface);\n      border: 1px solid var(--color-border);\n      border-top: none;\n      padding: 40px 32px;\n      text-align: center;\n      color: var(--color-text-light);\n      font-size: 12px;\n    }\n    .no-results-placeholder .arrow {\n      font-size: 24px;\n      display: block;\n      margin-bottom: 8px;\n      color: var(--color-accent);\n    }\n\n    \/* Input unit decorators *\/\n    .input-with-unit {\n      position: relative;\n    }\n    .input-with-unit input {\n      padding-right: 44px;\n    }\n    .input-unit {\n      position: absolute;\n      right: 12px;\n      top: 50%;\n      transform: translateY(-50%);\n      font-size: 11px;\n      font-weight: 600;\n      color: var(--color-text-light);\n      pointer-events: none;\n    }\n  <\/style>\n<\/head>\n<body>\n  <div class=\"tool-wrapper\">\n\n    <!-- Header -->\n    <header class=\"tool-header\">\n      <div class=\"brand-tag\">BBP \u2014 Beijing Beibangpu Co., Ltd<\/div>\n      <h1>Submersible vs Dry-Pit Pump<br>TCO Calculator<\/h1>\n      <p>Estimate 5\u201315 year Total Cost of Ownership across civil, equipment, energy, and maintenance.<\/p>\n    <\/header>\n\n    <!-- Input Panel -->\n    <section class=\"input-panel\">\n      <h2>Project Parameters<\/h2>\n\n      <div class=\"input-grid\">\n\n        <!-- Power -->\n        <div class=\"field-group\">\n          <label for=\"pumpPower\">Pump Power<\/label>\n          <div class=\"input-with-unit\">\n            <input type=\"number\" id=\"pumpPower\" value=\"15\" min=\"1\" max=\"2000\" step=\"1\" \/>\n            <span class=\"input-unit\">kW<\/span>\n          <\/div>\n          <span class=\"field-hint\">Rated motor power of the pump unit<\/span>\n        <\/div>\n\n        <!-- Hours per day -->\n        <div class=\"field-group\">\n          <label for=\"hoursPerDay\">Operating Hours \/ Day<\/label>\n          <div class=\"input-with-unit\">\n            <input type=\"number\" id=\"hoursPerDay\" value=\"8\" min=\"0.5\" max=\"24\" step=\"0.5\" \/>\n            <span class=\"input-unit\">hr<\/span>\n          <\/div>\n          <span class=\"field-hint\">Average daily runtime across all seasons<\/span>\n        <\/div>\n\n        <!-- Electricity cost -->\n        <div class=\"field-group\">\n          <label for=\"electricityCost\">Electricity Cost<\/label>\n          <div class=\"input-with-unit\">\n            <input type=\"number\" id=\"electricityCost\" value=\"0.10\" min=\"0.01\" max=\"1.00\" step=\"0.01\" \/>\n            <span class=\"input-unit\">$\/kWh<\/span>\n          <\/div>\n          <span class=\"field-hint\">Industrial tariff (excl. demand charges)<\/span>\n        <\/div>\n\n        <!-- Service life -->\n        <div class=\"field-group\">\n          <label for=\"serviceLife\">Expected Service Life<\/label>\n          <div class=\"select-wrapper\">\n            <select id=\"serviceLife\">\n              <option value=\"5\">5 Years<\/option>\n              <option value=\"10\" selected>10 Years<\/option>\n              <option value=\"15\">15 Years<\/option>\n            <\/select>\n          <\/div>\n          <span class=\"field-hint\">Design lifespan for TCO horizon<\/span>\n        <\/div>\n\n        <!-- Installation type -->\n        <div class=\"field-group full-width\">\n          <label>Primary Installation Type<\/label>\n          <div class=\"radio-group\" role=\"group\" aria-label=\"Installation type\">\n            <div class=\"radio-option\">\n              <input type=\"radio\" id=\"typeSubm\" name=\"installType\" value=\"submersible\" checked \/>\n              <label for=\"typeSubm\">Submersible (Wet Well)<\/label>\n            <\/div>\n            <div class=\"radio-option\">\n              <input type=\"radio\" id=\"typeDry\" name=\"installType\" value=\"drypit\" \/>\n              <label for=\"typeDry\">Dry-Pit<\/label>\n            <\/div>\n          <\/div>\n          <span class=\"field-hint\">Current or preferred installation \u2014 used for recommendations only; both options are always compared<\/span>\n        <\/div>\n\n      <\/div><!-- \/.input-grid -->\n\n      <div class=\"calc-btn-wrap\">\n        <button class=\"btn-calculate\" id=\"btnCalc\" type=\"button\">Calculate TCO<\/button>\n        <button class=\"btn-reset\" id=\"btnReset\" type=\"button\">Reset<\/button>\n      <\/div>\n    <\/section>\n\n    <!-- Placeholder (before calculation) -->\n    <div class=\"no-results-placeholder\" id=\"placeholder\">\n      <span class=\"arrow\">&#9660;<\/span>\n      Enter your parameters above and click <strong>Calculate TCO<\/strong> to see the full comparison.\n    <\/div>\n\n    <!-- Results -->\n    <div class=\"results-section\" id=\"resultsSection\">\n\n      <!-- Savings Banner -->\n      <div class=\"savings-banner\" id=\"savingsBanner\">\n        <div>\n          <div class=\"savings-label\">Lower TCO Option<\/div>\n          <div class=\"savings-winner\" id=\"winnerText\"><\/div>\n        <\/div>\n        <div class=\"savings-amount-block\">\n          <div class=\"amount\" id=\"savingsAmount\"><\/div>\n          <div class=\"pct\" id=\"savingsPct\"><\/div>\n        <\/div>\n      <\/div>\n\n      <!-- Comparison Cards -->\n      <div class=\"comparison-grid\" id=\"comparisonGrid\">\n\n        <!-- Submersible Card -->\n        <div class=\"pump-card\" id=\"cardSubm\">\n          <div class=\"card-header\">\n            <div>\n              <div class=\"pump-type-label\">Type A<\/div>\n              <div class=\"pump-type-name\">Submersible<br><small style=\"font-size:11px;font-weight:400;color:var(--color-text-muted)\">Wet-Well Installation<\/small><\/div>\n            <\/div>\n            <div class=\"winner-badge\">LOWER TCO<\/div>\n          <\/div>\n          <div class=\"cost-rows\" id=\"rowsSubm\"><\/div>\n        <\/div>\n\n        <!-- Dry-Pit Card -->\n        <div class=\"pump-card\" id=\"cardDry\">\n          <div class=\"card-header\">\n            <div>\n              <div class=\"pump-type-label\">Type B<\/div>\n              <div class=\"pump-type-name\">Dry-Pit<br><small style=\"font-size:11px;font-weight:400;color:var(--color-text-muted)\">Separate Machine Room<\/small><\/div>\n            <\/div>\n            <div class=\"winner-badge\">LOWER TCO<\/div>\n          <\/div>\n          <div class=\"cost-rows\" id=\"rowsDry\"><\/div>\n        <\/div>\n\n      <\/div><!-- \/.comparison-grid -->\n\n      <!-- Bar Chart Section -->\n      <div class=\"chart-section\">\n        <div class=\"chart-title\">TCO Visual Comparison<\/div>\n\n        <!-- Simple bar chart -->\n        <div class=\"bar-chart\" id=\"barChart\">\n          <div class=\"bar-row\">\n            <div class=\"bar-label\">Submersible<\/div>\n            <div class=\"bar-track\">\n              <div class=\"bar-fill sub-fill\" id=\"barSubm\" style=\"width:0%\">\n                <span class=\"bar-value\" id=\"barSubVal\"><\/span>\n              <\/div>\n            <\/div>\n          <\/div>\n          <div class=\"bar-row\">\n            <div class=\"bar-label\">Dry-Pit<\/div>\n            <div class=\"bar-track\">\n              <div class=\"bar-fill dry-fill\" id=\"barDry\" style=\"width:0%\">\n                <span class=\"bar-value\" id=\"barDryVal\"><\/span>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <!-- Stacked cost breakdown chart -->\n        <div class=\"chart-title mt-4\" style=\"margin-top:24px;\">TCO Cost Breakdown (Stacked)<\/div>\n        <div class=\"stacked-chart\" id=\"stackedChart\">\n          <div class=\"stacked-row\">\n            <div class=\"bar-label\">Submersible<\/div>\n            <div class=\"stacked-track\" id=\"stackSubm\"><\/div>\n          <\/div>\n          <div class=\"stacked-row\">\n            <div class=\"bar-label\">Dry-Pit<\/div>\n            <div class=\"stacked-track\" id=\"stackDry\"><\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"chart-legend\">\n          <div class=\"legend-item\"><div class=\"legend-dot seg-civil\"><\/div>Civil &amp; Construction<\/div>\n          <div class=\"legend-item\"><div class=\"legend-dot seg-equip\"><\/div>Equipment Cost<\/div>\n          <div class=\"legend-item\"><div class=\"legend-dot seg-energy\"><\/div>Cumulative Energy<\/div>\n          <div class=\"legend-item\"><div class=\"legend-dot seg-maint\"><\/div>Cumulative Maintenance<\/div>\n        <\/div>\n      <\/div>\n\n      <!-- Disclaimer -->\n      <div class=\"disclaimer\">\n        <strong>Disclaimer:<\/strong> These estimates use industry-average factors for civil construction, equipment pricing, energy efficiency, and maintenance ratios. Actual costs vary based on site conditions, local labor rates, equipment specifications, and operational profiles. Contact BBP for a detailed TCO analysis based on your specific project parameters.\n      <\/div>\n\n      <!-- CTA Block -->\n      <div class=\"cta-block\">\n        <div class=\"cta-text\">\n          <div class=\"cta-headline\">Want a project-specific TCO analysis?<\/div>\n          <div class=\"cta-sub\">BBP engineers can model your exact site conditions, pump curves, and lifecycle costs.<\/div>\n        <\/div>\n        <a href=\"#ct-popup-820\" class=\"btn-cta\">Get a Detailed TCO Analysis<\/a>\n      <\/div>\n\n    <\/div><!-- \/.results-section -->\n\n  <\/div><!-- \/.tool-wrapper -->\n\n  <script>\n    \/\/ \u2500\u2500 Helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n    function fmt(n) {\n      \/\/ Format number as $X,XXX or $X,XXX,XXX\n      if (n >= 1000000) {\n        return '$' + (n \/ 1000000).toFixed(2) + 'M';\n      }\n      return '$' + Math.round(n).toLocaleString('en-US');\n    }\n\n    function fmtFull(n) {\n      return '$' + Math.round(n).toLocaleString('en-US');\n    }\n\n    function pct(a, b) {\n      \/\/ b is reference (higher)\n      return Math.round(((b - a) \/ b) * 100) + '%';\n    }\n\n    \/\/ \u2500\u2500 TCO Calculation \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n    function calcTCO(power, hours, elec, years) {\n      \/\/ \u2500\u2500 Submersible \u2500\u2500\n      const sub = {};\n      sub.civil    = power * 200;\n      sub.equip    = power * 150;\n      sub.annualEnergy = power * hours * 365 * elec * 0.75;   \/\/ 0.75 = 1\/efficiency\n      sub.annualMaint  = sub.equip * 0.03;\n      sub.cumEnergy    = sub.annualEnergy * years;\n      sub.cumMaint     = sub.annualMaint  * years;\n      sub.total    = sub.civil + sub.equip + sub.cumEnergy + sub.cumMaint;\n\n      \/\/ \u2500\u2500 Dry-Pit \u2500\u2500\n      const dry = {};\n      dry.civil    = power * 400;\n      dry.equip    = power * 120;\n      dry.annualEnergy = power * hours * 365 * elec * 0.80;   \/\/ 0.80 = 1\/efficiency\n      dry.annualMaint  = dry.equip * 0.02;\n      dry.cumEnergy    = dry.annualEnergy * years;\n      dry.cumMaint     = dry.annualMaint  * years;\n      dry.total    = dry.civil + dry.equip + dry.cumEnergy + dry.cumMaint;\n\n      return { sub, dry };\n    }\n\n    \/\/ \u2500\u2500 Render cost rows \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n    function makeRow(label, value, cls) {\n      const row = document.createElement('div');\n      row.className = 'cost-row' + (cls ? ' ' + cls : '');\n      row.innerHTML = `\n        <span class=\"cost-row-label\">${label}<\/span>\n        <span class=\"cost-row-value\">${value}<\/span>\n      `;\n      return row;\n    }\n\n    function renderRows(container, data, years) {\n      container.innerHTML = '';\n      container.appendChild(makeRow('Civil &amp; Construction', fmtFull(data.civil)));\n      container.appendChild(makeRow('Equipment Cost', fmtFull(data.equip)));\n\n      const divider = document.createElement('div');\n      divider.className = 'cost-divider';\n      container.appendChild(divider);\n\n      container.appendChild(makeRow('Annual Energy Cost', fmtFull(data.annualEnergy), 'is-sub'));\n      container.appendChild(makeRow(`Cumulative Energy (${years} yr)`, fmtFull(data.cumEnergy)));\n      container.appendChild(makeRow('Annual Maintenance', fmtFull(data.annualMaint), 'is-sub'));\n      container.appendChild(makeRow(`Cumulative Maint. (${years} yr)`, fmtFull(data.cumMaint)));\n\n      const divider2 = document.createElement('div');\n      divider2.className = 'cost-divider';\n      container.appendChild(divider2);\n\n      container.appendChild(makeRow('Total TCO', fmtFull(data.total), 'is-total'));\n    }\n\n    \/\/ \u2500\u2500 Render stacked bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n    function renderStacked(container, data, maxTotal) {\n      container.innerHTML = '';\n      const segs = [\n        { cls: 'seg-civil',   val: data.civil },\n        { cls: 'seg-equip',   val: data.equip },\n        { cls: 'seg-energy',  val: data.cumEnergy },\n        { cls: 'seg-maint',   val: data.cumMaint },\n      ];\n      segs.forEach(seg => {\n        const el = document.createElement('div');\n        el.className = 'stacked-seg ' + seg.cls;\n        const w = Math.max((seg.val \/ maxTotal) * 100, 0.5);\n        el.style.width = w.toFixed(1) + '%';\n        container.appendChild(el);\n      });\n    }\n\n    \/\/ \u2500\u2500 Main calculate function \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n    function calculate() {\n      const power  = parseFloat(document.getElementById('pumpPower').value)     || 15;\n      const hours  = parseFloat(document.getElementById('hoursPerDay').value)    || 8;\n      const elec   = parseFloat(document.getElementById('electricityCost').value)|| 0.10;\n      const years  = parseInt(document.getElementById('serviceLife').value)      || 10;\n\n      if (power <= 0 || hours <= 0 || elec <= 0 || years <= 0) {\n        alert('Please enter valid positive values for all fields.');\n        return;\n      }\n\n      const { sub, dry } = calcTCO(power, hours, elec, years);\n\n      \/\/ Determine winner\n      const submWins = sub.total <= dry.total;\n      const higherTCO = Math.max(sub.total, dry.total);\n      const lowerTCO  = Math.min(sub.total, dry.total);\n      const savings   = higherTCO - lowerTCO;\n\n      \/\/ Savings banner\n      document.getElementById('winnerText').innerHTML =\n        submWins\n          ? '<span>Submersible (Wet-Well)<\/span> is lower cost'\n          : '<span>Dry-Pit<\/span> is lower cost';\n      document.getElementById('savingsAmount').textContent = fmtFull(savings) + ' saved';\n      document.getElementById('savingsPct').textContent   =\n        'over ' + years + ' years \u2014 ' + pct(lowerTCO, higherTCO) + ' lower TCO';\n\n      \/\/ Cards\n      const cardSubm = document.getElementById('cardSubm');\n      const cardDry  = document.getElementById('cardDry');\n      cardSubm.classList.toggle('is-winner', submWins);\n      cardDry.classList.toggle('is-winner', !submWins);\n\n      renderRows(document.getElementById('rowsSubm'), sub, years);\n      renderRows(document.getElementById('rowsDry'),  dry, years);\n\n      \/\/ Bar chart\n      const maxTCO = higherTCO;\n      const subPct = ((sub.total \/ maxTCO) * 100).toFixed(1);\n      const dryPct = ((dry.total \/ maxTCO) * 100).toFixed(1);\n\n      const barSubm = document.getElementById('barSubm');\n      const barDry  = document.getElementById('barDry');\n\n      \/\/ Reset first for animation\n      barSubm.style.width = '0%';\n      barDry.style.width  = '0%';\n\n      requestAnimationFrame(() => {\n        requestAnimationFrame(() => {\n          barSubm.style.width = subPct + '%';\n          barDry.style.width  = dryPct + '%';\n        });\n      });\n\n      \/\/ Winner bar highlight\n      barSubm.classList.toggle('is-winner-fill', submWins);\n      barDry.classList.toggle('is-winner-fill', !submWins);\n\n      document.getElementById('barSubVal').textContent = fmt(sub.total);\n      document.getElementById('barDryVal').textContent = fmt(dry.total);\n\n      \/\/ Mark narrow bars\n      [{ el: barSubm, p: parseFloat(subPct) }, { el: barDry, p: parseFloat(dryPct) }].forEach(b => {\n        b.el.classList.toggle('bar-too-narrow', b.p < 18);\n      });\n\n      \/\/ Stacked bars\n      const maxForStack = Math.max(sub.total, dry.total);\n      renderStacked(document.getElementById('stackSubm'), sub, maxForStack);\n      renderStacked(document.getElementById('stackDry'),  dry, maxForStack);\n\n      \/\/ Show results\n      document.getElementById('placeholder').style.display = 'none';\n      const resultsSection = document.getElementById('resultsSection');\n      resultsSection.classList.add('visible');\n      resultsSection.scrollIntoView({ behavior: 'smooth', block: 'start' });\n    }\n\n    \/\/ \u2500\u2500 Reset \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n    function reset() {\n      document.getElementById('pumpPower').value       = '15';\n      document.getElementById('hoursPerDay').value     = '8';\n      document.getElementById('electricityCost').value = '0.10';\n      document.getElementById('serviceLife').value     = '10';\n      document.getElementById('typeSubm').checked      = true;\n\n      document.getElementById('resultsSection').classList.remove('visible');\n      document.getElementById('placeholder').style.display = '';\n    }\n\n    \/\/ \u2500\u2500 Event Listeners \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n    document.getElementById('btnCalc').addEventListener('click', calculate);\n    document.getElementById('btnReset').addEventListener('click', reset);\n\n    \/\/ Allow Enter key in inputs to trigger calculation\n    document.querySelectorAll('input[type=\"number\"]').forEach(input => {\n      input.addEventListener('keydown', function(e) {\n        if (e.key === 'Enter') calculate();\n      });\n    });\n  <\/script>\n<\/body>\n<\/html>\n\n<\/div><\/div><\/div>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Submersible vs Dry-Pit Pump TCO Calculator | BBP BBP \u2014 Beijing Beibangpu Co., Ltd Submersible vs Dry-Pit PumpTCO Calculator Estimate 5\u201315 year Total Cost of Ownership across civil, equipment, energy, and maintenance. Project Parameters Pump Power kW Rated motor power of the pump unit Operating Hours \/ Day hr Average daily runtime across all seasons [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":0,"parent":1008,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_gspb_post_css":"","footnotes":""},"class_list":["post-2629","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/bbpmfg.com\/pt\/wp-json\/wp\/v2\/pages\/2629","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bbpmfg.com\/pt\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bbpmfg.com\/pt\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bbpmfg.com\/pt\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/bbpmfg.com\/pt\/wp-json\/wp\/v2\/comments?post=2629"}],"version-history":[{"count":0,"href":"https:\/\/bbpmfg.com\/pt\/wp-json\/wp\/v2\/pages\/2629\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/bbpmfg.com\/pt\/wp-json\/wp\/v2\/pages\/1008"}],"wp:attachment":[{"href":"https:\/\/bbpmfg.com\/pt\/wp-json\/wp\/v2\/media?parent=2629"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}