fix bugs

Chuiantw1212 · May 10, 2024 · 53bca0f · 53bca0f
1 parent 47f5fbd
commit 53bca0f
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 52 deletions.
diff --git a/components/calculator/asset.vue b/components/calculator/asset.vue
@@ -28,7 +28,7 @@
                 </el-col>
                 <el-col :span="12">
                     <el-form-item label="定期定額">
-                        <el-text>{{ Number(career.monthlySaving).toLocaleString() }} NTD / 月</el-text>
+                        <el-text>{{ Number(career.monthlySaving).toLocaleString() }} / 月</el-text>
                     </el-form-item>
                 </el-col>
             </el-row>
@@ -157,9 +157,9 @@ const asset = computed(() => {
     return props.modelValue
 })
 const isFormDisabled = computed(() => {
-    const { yearToRetirement } = props.retirement
+    const { yearsToRetirement } = props.retirement
     const { monthlyBasicSalary } = props.career
-    return !yearToRetirement || !monthlyBasicSalary
+    return !yearsToRetirement || !monthlyBasicSalary
 })
 watch(() => props.config.portfolioIRR, () => {
     setPortfolioMarks()
@@ -194,7 +194,7 @@ function calculatePortfolio() {
 
 }
 function calculateInvestmentPeriod() {
-    asset.value.period = props.retirement.yearToRetirement
+    asset.value.period = props.retirement.yearsToRetirement
 }
 
 const unableToDraw = computed(() => {
@@ -235,7 +235,7 @@ function drawLifeAssetChart(propagate = true) {
     const spouseContribution: number[] = []
     const childExpenseData: number[] = []
 
-    for (let year = currentYear; year < currentYear + period; year++) {
+    for (let year = currentYear + 1; year <= currentYear + period; year++) {
         valueModifier *= inflatoinRatio
         /**
          * 影響存量重大事件
@@ -248,14 +248,33 @@ function drawLifeAssetChart(propagate = true) {
         } else {
             downpayData.push(0)
         }
+
+        let calculatedPmt = 0
+        /**
+         * 不受到通膨影響的PMT
+         */
+        // 房貸利息影響每月儲蓄
+        const mortgageStartYear = downpayYear
+        const mortgageEndYear = downpayYear + loanTerm
+        let mortgagePmt = 0
+        let inflatedTotalPrice = 0
+        if (mortgageStartYear <= year && fv > 0) {
+            if (year < mortgageEndYear) {
+                mortgagePmt = monthlyRepay * 12
+            }
+            inflatedTotalPrice = Math.floor(totalPrice * valueModifier)
+        }
+        estateData.push(inflatedTotalPrice)
+        mortgageData.push(Math.floor(-mortgagePmt))
+        calculatedPmt -= mortgagePmt
         /**
          * 會受到通膨影響的PMT
          */
         // 執業收支 
         const { monthlySaving } = props.career
-        const annualSaving = monthlySaving * 12
-        let calculatedPmt = annualSaving * valueModifier
-        investingData.push(calculatedPmt)
+        const annualSaving = monthlySaving * 12 * valueModifier
+        investingData.push(Math.floor(annualSaving))
+        calculatedPmt += annualSaving
 
         // 育兒開支影響每月儲蓄
         const { firstBornYear, secondBornYear, independantAge, childAnnualExpense } = props.parenting
@@ -280,25 +299,6 @@ function drawLifeAssetChart(propagate = true) {
             spouseContribution.push(0)
             childExpenseData.push(0)
         }
-        // 加計通貨膨脹
-        calculatedPmt *= valueModifier
-        /**
-         * 不受到通膨影響的PMT
-         */
-        // 房貸利息影響每月儲蓄
-        const mortgageStartYear = downpayYear
-        const mortgageEndYear = downpayYear + loanTerm
-        let mortgagePmt = 0
-        let inflatedTotalPrice = 0
-        if (mortgageStartYear <= year && fv > 0) {
-            if (year < mortgageEndYear) {
-                mortgagePmt = monthlyRepay * 12
-            }
-            inflatedTotalPrice = Math.floor(totalPrice * valueModifier)
-        }
-        estateData.push(inflatedTotalPrice)
-        mortgageData.push(Math.floor(-mortgagePmt))
-        calculatedPmt -= mortgagePmt
 
         // 計算複利終值
         fv = pv * irrModifier
@@ -331,7 +331,7 @@ function drawLifeAssetChart(propagate = true) {
     const hasChildExpense = childExpenseData.some(value => value !== 0)
     if (hasChildExpense) {
         datasets.push({
-            label: '育兒支出',
+            label: '育兒收支',
             data: childExpenseData,
         })
     }

diff --git a/components/calculator/index.vue b/components/calculator/index.vue
@@ -294,7 +294,7 @@ const userForm = reactive({
     retirement: {
         age: 65,
         lifeExpectancy: 0,
-        yearToRetirement: 0,
+        yearsToRetirement: 0,
         annuitySum: 0,
         insurance: {
             monthlyAnnuity: 0,

diff --git a/components/calculator/mortgage.vue b/components/calculator/mortgage.vue
@@ -5,8 +5,8 @@
                 <el-col :span="18">
                     <el-form-item label="房屋總價">
                         <el-text v-if="mortgage.totalPriceEstimated">= 單價({{ estatePrice.unitPrice }}萬/坪) x 權狀({{
-                    estateSize.floorSize }}坪) = {{
-                    Number(mortgage.totalPriceEstimated).toLocaleString() }} NTD</el-text>
+                            estateSize.floorSize }}坪) = {{
+                                Number(mortgage.totalPriceEstimated).toLocaleString() }} NTD</el-text>
                         <el-input-number v-else v-model="mortgage.totalPrice" :min="0" :step="1000000"
                             @change="calculateMortgage({ setDownpay: true })" />
                     </el-form-item>
@@ -98,7 +98,7 @@
                 </el-col>
                 <el-col :span="12">
                     <el-form-item label="房貸利息" prop="floorSize">
-                        <el-text>{{ Number(mortgage.monthlyRepay).toLocaleString() }} NTD / 月</el-text>
+                        <el-text>{{ Number(mortgage.monthlyRepay).toLocaleString() }} / 月</el-text>
                     </el-form-item>
                 </el-col>
             </el-row>
@@ -409,7 +409,7 @@ function drawDownpayChart(propagate = false) {
     }
     const { irr, } = props.asset
     const { inflationRate, currentYear } = props.config
-    const { downpayGoal } = mortgage.value
+    const { downpayGoal, downpayYear } = mortgage.value
     const { presentAsset } = props.asset
     const { monthlySaving } = props.career
     const irrModifier: number = 1 + irr / 100
@@ -441,7 +441,24 @@ function drawDownpayChart(propagate = false) {
         estateTotalPrice.push(Math.floor(goal))
         pv = fv
     } while (fv < goal)
-    calculateYearsToDownpay(period)
+
+    mortgage.value.yearsToDownpay = period
+    mortgage.value.downpayYearEstimated = props.config.currentYear + period
+    if (downpayYear > mortgage.value.downpayYearEstimated) {
+        for (let i = 0; i < downpayYear - mortgage.value.downpayYearEstimated; i++) {
+            pmt *= inflationRatio
+            goal *= inflationRatio
+
+            fv = pv * irrModifier
+            preparedDownpayData.push(Math.floor(fv))
+            fv += pmt
+            annualSavingData.push(Math.floor(pmt))
+            labels.push(currentYear + ++period)
+            estateTotalPrice.push(Math.floor(goal))
+            pv = fv
+        }
+    }
+
     const datasets = [
         {
             label: '已備增值',
@@ -490,7 +507,6 @@ function drawDownpayChart(propagate = false) {
     downPayChartInstance = shallowRef(chartInstance)
 }
 function calculateYearsToDownpay(years) {
-    mortgage.value.yearsToDownpay = years
 
 }
 function calculateDownpayYear() {

diff --git a/components/calculator/parenting.vue b/components/calculator/parenting.vue
@@ -10,7 +10,7 @@
                 </el-col>
                 <el-col :span="12">
                     <el-form-item v-if="spouse.monthlyContribution" label="配偶貢獻">
-                        <el-text>{{ Number(spouse.monthlyContribution).toLocaleString() }} NTD / 月</el-text>
+                        <el-text>{{ Number(spouse.monthlyContribution * 12).toLocaleString() }} / 年</el-text>
                     </el-form-item>
                 </el-col>
             </el-row>
@@ -73,7 +73,7 @@
                 </el-col>
                 <el-col :span="12">
                     <el-form-item label="資產投報率">
-                        <el-text>{{ config.portfolioIRR[asset.allocationETF] }} %</el-text>
+                        <el-text>{{ config.portfolioIRR[asset.allocationETF] }} % / 年</el-text>
                     </el-form-item>
                 </el-col>
             </el-row>

diff --git a/components/calculator/retirement.vue b/components/calculator/retirement.vue
@@ -18,8 +18,8 @@
                     </el-form-item>
                 </el-col>
                 <el-col :span="12">
-                    <el-form-item label="距離退休">
-                        <el-text>{{ retirement.yearToRetirement }} 年</el-text>
+                    <el-form-item label="退休年">
+                        <el-text>{{ retirement.yearOfRetire }} ({{ retirement.yearsToRetirement }} 年後)</el-text>
                     </el-form-item>
                 </el-col>
             </el-row>
@@ -58,10 +58,10 @@
                         <el-col :span="12">
                             <el-form-item label="每月年金">
                                 <el-text v-if="['employee', 'entrepreneur'].includes(profile.careerInsuranceType)">{{
-                Number(retirement.insurance.monthlyAnnuity).toLocaleString() }} /
+                                    Number(retirement.insurance.monthlyAnnuity).toLocaleString() }} /
                                     月</el-text>
                                 <el-text v-if="['civilServant',].includes(profile.careerInsuranceType)">{{
-                Number(retirement.pension.monthlyAnnuity).toLocaleString() }} /
+                                    Number(retirement.pension.monthlyAnnuity).toLocaleString() }} /
                                     月</el-text>
                             </el-form-item>
                         </el-col>
@@ -147,8 +147,8 @@
                         <el-radio-group v-model="retirement.qualityLevel" @change="calculateRetirement($event)"
                             :disabled="isFormDisabled">
                             <el-radio v-for="(item, key) in config.retirementQuartile" :value="key + 1">{{
-                item.label
-            }}</el-radio>
+                                item.label
+                                }}</el-radio>
                         </el-radio-group>
                     </el-form-item>
                 </el-col>
@@ -312,12 +312,12 @@ const unableToDraw = computed(() => {
         irrOverDecade
     } = retirement.value.pension
     const {
-        yearToRetirement,
+        yearsToRetirement,
         lifeExpectancy,
         annualExpense,
     } = retirement.value
     const noIncome = !monthlyBasicSalary
-    const noBefore = !irrOverDecade || !yearToRetirement
+    const noBefore = !irrOverDecade || !yearsToRetirement
     const noAfter = !lifeExpectancy || !annualExpense
     return noIncome || noBefore || noAfter
 })
@@ -442,9 +442,11 @@ function calculateExpenseQuartileMarks() {
 function calculateRetireLife() {
     const { age: currentAge, lifeExpectancy } = props.profile
     const { age: retireAge } = retirement.value
+    const { currentYear } = props.config
     if (currentAge && lifeExpectancy && retireAge) {
-        retirement.value.yearToRetirement = retireAge - currentAge
-        const rawNumber = lifeExpectancy - retirement.value.yearToRetirement
+        retirement.value.yearsToRetirement = retireAge - currentAge
+        retirement.value.yearOfRetire = currentYear + retirement.value.yearsToRetirement
+        const rawNumber = lifeExpectancy - retirement.value.yearsToRetirement
         const maxZero = Math.max(0, rawNumber)
         retirement.value.lifeExpectancy = Number(Number(maxZero).toFixed(2))
     }
@@ -506,7 +508,7 @@ async function drawRetirementAssetChart(propagate = false) {
     const { monthlyContribution } = props.career.pension
     const { currentYear } = props.config
     const {
-        yearToRetirement,
+        yearsToRetirement,
         lifeExpectancy,
         annualExpense,
     } = retirement.value
@@ -518,7 +520,7 @@ async function drawRetirementAssetChart(propagate = false) {
     let inflationModifier = 1
 
     let pv = 0
-    const n = yearToRetirement
+    const n = yearsToRetirement
     const pensionContribution = monthlyContribution * 12
     const pensionIrr = 1 + (irrOverDecade / 100)
     let fv = 0 // fv = pv * n + pmt
@@ -533,7 +535,7 @@ async function drawRetirementAssetChart(propagate = false) {
     if (['employee', 'entrepreneur'].includes(careerInsuranceType)) {
         pv = employerContribution + employeeContrubution + employerContributionIncome + employeeContrubutionIncome
         // 退休前資產累積
-        for (let i = 0; i < n; i++) {
+        for (let i = 1; i <= n; i++) {
             const calculatedYear = currentYear + i
             labels.push(calculatedYear)
             annualAnnuityData.push([0, 0])
@@ -559,7 +561,7 @@ async function drawRetirementAssetChart(propagate = false) {
     let insuranceAnnuityInflationModifier = 1
     let pmt = 0
     let inflatedAnnualExpense = 0
-    for (let i = 0; i < lifeExpectancy; i++) {
+    for (let i = 1; i <= lifeExpectancy; i++) {
         inflationModifier *= inflationRate
         insuranceAnnuityInflationModifier *= inflationRate
         // 年金收入計算
@@ -569,7 +571,7 @@ async function drawRetirementAssetChart(propagate = false) {
         retirementAnnualExpenseData.push([0, -inflatedAnnualExpense])
         pmt = annutalAnnuity - inflatedAnnualExpense
         // 未還完的房貸支出
-        const simYear = currentYear + yearToRetirement + i
+        const simYear = currentYear + yearsToRetirement + i
         const annualRepay = monthlyRepay * 12
         if (loanEndYear >= simYear) {
             pmt -= annualRepay