intc-vue-h5/src/pages/index.vue

<template>
  <view class="content">
    <view class="text-area">
      <text class="title"></text>
    </view>
    <div class="app-container" style="overflow: auto">
    <div class="header-title" ref="searchHeightRef">&nbsp;&nbsp;&nbsp;&nbsp;负债信息</div>
    <div class="header-con" ref="searchHeightRef">
      <div class="item">
        <img src="./assets/one.png" alt="" />
        <div class="info-sum">
          <div class="title">净资产</div>
          <div class="num">{{ netAsset }}<span>元</span></div>
        </div>
      </div>
      <div class="item">
        <img src="./assets/ticketSum.png" alt="" />
        <div class="info-sum">
          <div class="title">总负债</div>
          <div class="num">{{ totalDebt }}<span>元</span></div>
        </div>
      </div>
    </div>
    <div class="header-con" v-show="auth.hasPermi('invest:debitCard','invest:futureStocks:list')" ref="searchHeightRef">
      <div class="item" v-show="auth.hasPermi('invest:debitCard')">
        <img src="./assets/completionTickets.png" alt="" />
        <div class="info-sum">
          <div class="title">储蓄卡余额</div>
          <div class="num">{{ debetBalance }}<span>元</span></div>
        </div>
      </div>
      <div class="item"  v-show="auth.hasPermi('invest:futureStocks:list')">
        <img src="./assets/completionTime.png" alt="" />
        <div class="info-sum">
          <div class="title">投资账户余额</div>
          <div class="num">{{ investBalance }}<span>元</span></div>
        </div>
      </div>
    </div>
    <div class="header-con"  v-show="auth.hasPermi('invest:onlineLend','invest:creditCard')" ref="searchHeightRef">
      <div class="item"  v-show="auth.hasPermi('invest:onlineLend')">
        <img src="./assets/one.png" alt="" />
        <div class="info-sum">
          <div class="title">网贷欠款</div>
          <div class="num">{{ unClearedOnlineDebt }}<span>元</span></div>
        </div>
      </div>
      <div class="item"  v-show="auth.hasPermi('invest:creditCard')">
        <img src="./assets/ticketSum.png" alt="" />
        <div class="info-sum">
          <div class="title">信用卡已用额度</div>
          <div class="num">{{ creditBalance }}<span>元</span></div>
        </div>
      </div>
    </div>
    <div class="header-con" v-show="auth.hasPermi('invest:onlineLend')" ref="searchHeightRef">
      <div class="item">
        <img src="./assets/completionTickets.png" alt="" />
        <div class="info-sum">
          <div class="title">人情欠款</div>
          <div class="num">{{ peopleLendHistory }}<span>元</span></div>
        </div>
      </div>
    </div>
    <div class="header-title" v-show="auth.hasPermi('invest:futureStocks:list')" ref="searchHeightRef">&nbsp;&nbsp;&nbsp;&nbsp;投资收益</div>
    <div class="header-con" v-show="auth.hasPermi('invest:futureStocks:list')" ref="searchHeightRef">
      <div class="item" >
        <img src="./assets/completionTime.png" alt="" />
        <div class="info-sum">
          <div class="title">投资账户余额</div>
          <div class="num">{{ investBalance }}<span>元</span></div>
        </div>
      </div>
      <div class="item">
        <img src="./assets/one.png" alt="" />
        <div class="info-sum">
          <div class="title">总收益</div>
          <div class="num">{{ totalIncome }}<span>元</span></div>
        </div>
      </div>

    </div>
    <div class="header-con" v-show="auth.hasPermi('invest:futureStocks:list')" ref="searchHeightRef">
      <div class="item">
        <img src="./assets/ticketSum.png" alt="" />
        <div class="info-sum">
          <div class="title">期货收益</div>
          <div class="num">{{ futuresIncome }}<span>元</span></div>
        </div>
      </div>
      <div class="item">
        <img src="./assets/completionTickets.png" alt="" />
        <div class="info-sum">
          <div class="title">股票收益</div>
          <div class="num">{{ stocksIncome }}<span>元</span></div>
        </div>
      </div>
    </div>
    <div class="header-title" v-show="auth.hasPermi('invest:onlineLend')" ref="searchHeightRef">&nbsp;&nbsp;&nbsp;&nbsp;网贷信息</div>
    <div class="header-con" v-show="auth.hasPermi('invest:onlineLend')" ref="searchHeightRef">
      <div class="item">
        <img src="./assets/one.png" alt="" />
        <div class="info-sum">
          <div class="title">当月应还款</div>
          <div class="num">{{ dueOnlineDebt }}<span>元</span></div>
        </div>
      </div>
      <div class="item">
        <img src="./assets/ticketSum.png" alt="" />
        <div class="info-sum">
          <div class="title">当月已还款</div>
          <div class="num">{{ repaidOnlineDebt }}<span>元</span></div>
        </div>
      </div>
    </div>
    <div class="header-con" v-show="auth.hasPermi('invest:onlineLend')" ref="searchHeightRef">
      <div class="item">
        <img src="./assets/completionTickets.png" alt="" />
        <div class="info-sum">
          <div class="title">当月待还款</div>
          <div class="num">{{ leftOnlineDebt }}<span>元</span></div>
        </div>
      </div>
      <div class="item">
        <img src="./assets/one.png" alt="" />
        <div class="info-sum">
          <div class="title">未结清网贷笔数</div>
          <div class="num">{{ unclearedOnlineDebtCount }}<span>笔</span></div>
        </div>
      </div>
    </div>
    <div class="header-con" v-show="auth.hasPermi('invest:onlineLend')" ref="searchHeightRef">
     
      <div class="item">
        <img src="./assets/ticketSum.png" alt="" />
        <div class="info-sum">
          <div class="title">未结清网贷本金</div>
          <div class="num">{{ unClearedOnlineDebtPrinciple }}<span>元</span></div>
        </div>
      </div>
      <div class="item">
        <img src="./assets/completionTickets.png" alt="" />
        <div class="info-sum">
          <div class="title">未结清网贷利息</div>
          <div class="num">{{ unClearedOnlineDebtInterest }}<span>元</span></div>
        </div>
      </div>
    </div>
    <div class="header-con" v-show="auth.hasPermi('invest:onlineLend')" ref="searchHeightRef">
      <div class="item">
        <img src="./assets/one.png" alt="" />
        <div class="info-sum">
          <div class="title">已结清网贷笔数</div>
          <div class="num">{{ clearedOnlineDebtCount }}<span>笔</span></div>
        </div>
      </div>
      <div class="item">
        <img src="./assets/ticketSum.png" alt="" />
        <div class="info-sum">
          <div class="title">已结清网贷本金</div>
          <div class="num">{{ clearedOnlineDebtPrinciple }}<span>元</span></div>
        </div>
      </div>
    </div>
    <div class="header-con" v-show="auth.hasPermi('invest:onlineLend')" ref="searchHeightRef">

      <div class="item">
        <img src="./assets/completionTickets.png" alt="" />
        <div class="info-sum">
          <div class="title">已结清网贷利息</div>
          <div class="num">{{ clearedOnlineDebtInterest }}<span>元</span></div>
        </div>
      </div>
    </div>
  
    <div class="header-title" v-show="auth.hasPermi('invest:creditCard')" ref="searchHeightRef">&nbsp;&nbsp;&nbsp;&nbsp;信用卡信息</div>
    <div class="header-con" v-show="auth.hasPermi('invest:creditCard')" ref="searchHeightRef">
      <div class="item">
        <img src="./assets/one.png" alt="" />
        <div class="info-sum">
          <div class="title">信用卡总数</div>
          <div class="num">{{ creditCount }}<span>张</span></div>
        </div>
      </div>
      <div class="item">
        <img src="./assets/ticketSum.png" alt="" />
        <div class="info-sum">
          <div class="title">总额度</div>
          <div class="num">{{ creditLimit }}<span>元</span></div>
        </div>
      </div>
    </div>
    <div class="header-con" v-show="auth.hasPermi('invest:creditCard')" ref="searchHeightRef">
      <div class="item">
        <img src="./assets/completionTickets.png" alt="" />
        <div class="info-sum">
          <div class="title">已使用额度</div>
          <div class="num">{{ creditBalance }}<span>元</span></div>
        </div>
      </div>
      <div class="item">
        <img src="./assets/completionTime.png" alt="" />
        <div class="info-sum">
          <div class="title">可用额度</div>
          <div class="num">{{ creditAvailableLimit }}<span>元</span></div>
        </div>
      </div>
    </div>
    <div class="header-con" v-show="auth.hasPermi('invest:creditCard')" ref="searchHeightRef">
      <div class="item">
        <img src="./assets/one.png" alt="" />
        <div class="info-sum">
          <div class="title">信用卡使用率</div>
          <div class="num">{{ creditBillRate }}<span>%</span></div>
        </div>
      </div>
      <div class="item">
        <img src="./assets/ticketSum.png" alt="" />
        <div class="info-sum">
          <div class="title">当月账单</div>
          <div class="num">{{ currentCreditBill }}<span>元</span></div>
        </div>
      </div>
    </div>
    <div class="header-con" v-show="auth.hasPermi('invest:creditCard')" ref="searchHeightRef">
      <div class="item">
        <img src="./assets/completionTickets.png" alt="" />
        <div class="info-sum">
          <div class="title">当月分期本息</div>
          <div class="num">{{ creditInstallment }}<span>元</span></div>
        </div>
      </div>
      <div class="item">
        <img src="./assets/one.png" alt="" />
        <div class="info-sum">
          <div class="title">未结清分期笔数</div>
          <div class="num">{{ unclearedCreditInstallmentCount }}<span>笔</span></div>
        </div>
      </div>
    </div>
    <div class="header-con" v-show="auth.hasPermi('invest:creditCard')"  ref="searchHeightRef">

      <div class="item">
        <img src="./assets/ticketSum.png" alt="" />
        <div class="info-sum">
          <div class="title">未结清分期本息</div>
          <div class="num">{{ unclearedCreditInstallment }}<span>元</span></div>
        </div>
      </div>
      <div class="item">
        <img src="./assets/completionTickets.png" alt="" />
        <div class="info-sum">
          <div class="title">未结清分期本金</div>
          <div class="num">{{ unclearedCreditInstallmentPrinciple }}<span>元</span></div>
        </div>
      </div>
    </div>
    <div class="header-con" v-show="auth.hasPermi('invest:creditCard')" ref="searchHeightRef">
      <div class="item">
        <img src="./assets/completionTime.png" alt="" />
        <div class="info-sum">
          <div class="title">未结清分期利息</div>
          <div class="num">{{ unclearedCreditInstallmentInterest }}<span>元</span></div>
        </div>
      </div>
      <div class="item">
        <img src="./assets/one.png" alt="" />
        <div class="info-sum">
          <div class="title">已结清分期笔数</div>
          <div class="num">{{ clearedCreditInstallmentCount }}<span>笔</span></div>
        </div>
      </div>
    </div>
    <div class="header-con" v-show="auth.hasPermi('invest:creditCard')" ref="searchHeightRef">
     
      <div class="item">
        <img src="./assets/ticketSum.png" alt="" />
        <div class="info-sum">
          <div class="title">已结清分期本息</div>
          <div class="num">{{ clearedCreditInstallmentDebt }}<span>元</span></div>
        </div>
      </div>
      <div class="item">
        <img src="./assets/completionTickets.png" alt="" />
        <div class="info-sum">
          <div class="title">已结清分期本金</div>
          <div class="num">{{ clearedCreditInstallmentPrinciple }}<span>元</span></div>
        </div>
      </div>
      
    </div>
    <div class="header-con" v-show="auth.hasPermi('invest:creditCard')" ref="searchHeightRef">
      <div class="item">
        <img src="./assets/completionTime.png" alt="" />
        <div class="info-sum">
          <div class="title">已结清分期利息</div>
          <div class="num">{{ clearedCreditInstallmentInterest }}<span>元</span></div>
        </div>
      </div>
      <div class="item">
        <img src="./assets/one.png" alt="" />
        <div class="info-sum">
          <div class="title">上月账单使用率</div>
          <div class="num">{{ lastMonthUsedRate }}<span>%</span></div>
        </div>
      </div>
     
    </div>
    <div class="header-con" v-show="auth.hasPermi('invest:creditCard')" ref="searchHeightRef">
      <div class="item">
        <img src="./assets/ticketSum.png" alt="" />
        <div class="info-sum">
          <div class="title">上月账单</div>
          <div class="num">{{ lastMonthUsedLimit }}<span>元</span></div>
        </div>
      </div>
      <div class="item">
        <img src="./assets/completionTickets.png" alt="" />
        <div class="info-sum">
          <div class="title">近6月使用率</div>
          <div class="num">{{ lastSixMonthUsedRate }}<span>%</span></div>
        </div>
      </div>
    </div>
    <div class="header-con" v-show="auth.hasPermi('invest:creditCard')" ref="searchHeightRef">
      <div class="item">
        <img src="./assets/completionTime.png" alt="" />
        <div class="info-sum">
          <div class="title">近6月平均使用额度</div>
          <div class="num">{{ lastSixMonthUsedLimit }}<span>元</span></div>
        </div>
      </div>
    </div>
    <div class="header-title" v-show="auth.hasPermi('invest:creditQueryRecord:list')" ref="searchHeightRef">&nbsp;&nbsp;&nbsp;&nbsp;征信信息</div>
    <div class="header-con" v-show="auth.hasPermi('invest:creditQueryRecord:list')" ref="searchHeightRef">
      <div class="item">
        <img src="./assets/one.png" alt="" />
        <div class="info-sum">
          <div class="title">近1月硬查询</div>
          <div class="num">{{ lastOneMonths }}<span>次</span></div>
        </div>
      </div>
      <div class="item">
        <img src="./assets/ticketSum.png" alt="" />
        <div class="info-sum">
          <div class="title">近2月硬查询</div>
          <div class="num">{{ lastTwoMonths }}<span>次</span></div>
        </div>
      </div>
    </div>
    <div class="header-con" v-show="auth.hasPermi('invest:creditQueryRecord:list')" ref="searchHeightRef">
      <div class="item">
        <img src="./assets/completionTickets.png" alt="" />
        <div class="info-sum">
          <div class="title">近3月硬查询</div>
          <div class="num">{{ lastThreeMonths }}<span>次</span></div>
        </div>
      </div>
      <div class="item">
        <img src="./assets/completionTime.png" alt="" />
        <div class="info-sum">
          <div class="title">近6月硬查询</div>
          <div class="num">{{ lastSixMonths }}<span>次</span></div>
        </div>
      </div>
    </div>
    <div class="header-con" v-show="auth.hasPermi('invest:creditQueryRecord:list')" ref="searchHeightRef">
      <div class="item">
        <img src="./assets/one.png" alt="" />
        <div class="info-sum">
          <div class="title">近1年硬查询</div>
          <div class="num">{{ lastOneYears }}<span>次</span></div>
        </div>
      </div>
      <div class="item">
        <img src="./assets/ticketSum.png" alt="" />
        <div class="info-sum">
          <div class="title">近2年硬查询</div>
          <div class="num">{{ lastTwoYears }}<span>次</span></div>
        </div>
      </div>
    </div>
    <div class="header-con" v-show="auth.hasPermi('invest:creditQueryRecord:list')" ref="searchHeightRef">
      <div class="item">
        <img src="./assets/completionTickets.png" alt="" />
        <div class="info-sum">
          <div class="title">总硬查询</div>
          <div class="num">{{ lastAllYears }}<span>次</span></div>
        </div>
      </div>
      <div class="item">
        <img src="./assets/one.png" alt="" />
        <div class="info-sum">
          <div class="title">近6月个人查询</div>
          <div class="num">{{ lastSixMonthQueryCount }}<span>次</span></div>
        </div>
      </div>
    </div>
    <div class="header-con" v-show="auth.hasPermi('invest:creditQueryRecord:list')" ref="searchHeightRef">
     
      <div class="item">
        <img src="./assets/ticketSum.png" alt="" />
        <div class="info-sum">
          <div class="title">近6月贷后管理</div>
          <div class="num">{{ lastSixMonthsAfterLoan }}<span>次</span></div>
        </div>
      </div>
      <div class="item">
        <img src="./assets/completionTickets.png" alt="" />
        <div class="info-sum">
          <div class="title">近2年贷后管理</div>
          <div class="num">{{ lastTwoYearsAfterLoan }}<span>次</span></div>
        </div>
      </div>
    </div>
    <div class="header-con" v-show="auth.hasPermi('invest:creditQueryRecord:list')" ref="searchHeightRef">
     <div class="item">
       <img src="./assets/completionTime.png" alt="" />
       <div class="info-sum">
         <div class="title">贷后管理总数</div>
         <div class="num">{{ totalAfterLoan }}<span>次</span></div>
       </div>
     </div>
   </div>
    <div class="header-title" v-show="auth.hasPermi('invest:debitCard')" ref="searchHeightRef">&nbsp;&nbsp;&nbsp;&nbsp;基础信息</div>
    <div class="header-con"  v-show="auth.hasPermi('invest:posmachine:list','invest:creditCard')" ref="searchHeightRef">
      <div class="item"  v-show="auth.hasPermi('invest:posmachine:list')">
        <img src="./assets/one.png" alt="" />
        <div class="info-sum">
          <div class="title">POS机总数</div>
          <div class="num">{{ posCount }}<span>台</span></div>
        </div>
      </div>
      <div class="item"  v-show="auth.hasPermi('invest:creditCard')">
        <img src="./assets/ticketSum.png" alt="" />
        <div class="info-sum">
          <div class="title">信用卡总数</div>
          <div class="num">{{ creditCount }}<span>张</span></div>
        </div>
      </div>
    </div>
    <div class="header-con" v-show="auth.hasPermi('invest:debitCard','invest:futureStocks:list')" ref="searchHeightRef">
      <div class="item" v-show="auth.hasPermi('invest:debitCard')">
        <img src="./assets/completionTickets.png" alt="" />
        <div class="info-sum">
          <div class="title">储蓄卡总数</div>
          <div class="num">{{ debitCount }}<span>张</span></div>
        </div>
      </div>
      <div class="item" v-show="auth.hasPermi('invest:futureStocks:list')">
        <img src="./assets/one.png" alt="" />
        <div class="info-sum">
          <div class="title">股票账户总数</div>
          <div class="num">{{ stocksCount }}<span>个</span></div>
        </div>
      </div>
    </div>

    <div class="header-con" v-show="auth.hasPermi('invest:futureStocks:list')" ref="searchHeightRef">
      
      <div class="item" v-show="auth.hasPermi('invest:futureStocks:list','invest:onlineLend')">
        <img src="./assets/ticketSum.png" alt="" />
        <div class="info-sum">
          <div class="title">期货账户总数</div>
          <div class="num">{{ futuresCount }}<span>个</span></div>
        </div>
      </div>
      <div class="item" v-show="auth.hasPermi('invest:onlineLend')">
        <img src="./assets/completionTickets.png" alt="" />
        <div class="info-sum">
          <div class="title">人情总数</div>
          <div class="num">{{ peopleLendCount }}<span>人</span></div>
        </div>
      </div>
    </div>
    <div class="header-con" v-show="auth.hasPermi('invest:onlineLend')" ref="searchHeightRef">
      <div class="item" v-show="auth.hasPermi('invest:onlineLend')" >
        <img src="./assets/completionTime.png" alt="" />
        <div class="info-sum">
          <div class="title">网贷总数</div>
          <div class="num">{{ onlineLendCount }}<span>个</span></div>
        </div>
      </div>
    </div>

    <div></div>
  </div>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getBaseAccountInfo, getDebetInfo, getIncomeInfo, getCreditInfo } from '@/api/invest/accountAnalysis.js'
	import { getCreditRecordAnalysis } from '@/api/invest/creditQueryRecord'
  import auth from "@/plugins/auth"; // 建议使用auth进行鉴权操作
//投资收益
const futuresIncome = ref(0)
const totalIncome = ref(0)
const stocksIncome = ref(0)
const investBalance = ref(0)

//基础信息
const posCount = ref(0)
const debitCount = ref(0)
const stocksCount = ref(0)
const futuresCount = ref(0)
const peopleLendCount = ref(0)
const onlineLendCount = ref(0)
const creditCount = ref(0)

//网贷信息-公共
const creditInstallmentHistory = ref(0)
const peopleLendHistory = ref(0)
const totalDebt = ref(0)
const debetBalance = ref(0)
const netAsset = ref(0)

//网贷信息
const unclearedOnlineDebtCount = ref(0)
const unClearedOnlineDebt = ref(0)
const unClearedOnlineDebtPrinciple = ref(0)
const unClearedOnlineDebtInterest = ref(0)
const clearedOnlineDebtCount = ref(0)
const clearedOnlineDebt = ref(0)
const clearedOnlineDebtPrinciple = ref(0)
const clearedOnlineDebtInterest = ref(0)
const dueOnlineDebt = ref(0)
const repaidOnlineDebt = ref(0)
const leftOnlineDebt = ref(0)

//信用卡信息

const currentCreditBill = ref(0)
const creditInstallment = ref(0)
const creditLimit = ref(0)
const lastSixMonthUsedLimit = ref(0)
const lastSixMonthUsedRate = ref(0)
const lastMonthUsedLimit = ref(0)
const lastMonthUsedRate = ref(0)
const creditBalance = ref(0)
const creditAvailableLimit = ref(0)
const creditBillRate = ref(0)
const unclearedCreditInstallmentCount = ref(0)
const unclearedCreditInstallment = ref(0)
const unclearedCreditInstallmentPrinciple = ref(0)
const unclearedCreditInstallmentInterest = ref(0)
const clearedCreditInstallmentCount = ref(0)
const clearedCreditInstallmentDebt = ref(0)
const clearedCreditInstallmentPrinciple = ref(0)
const clearedCreditInstallmentInterest = ref(0)

//征信信息
const lastOneMonths = ref(0)
const lastTwoMonths = ref(0)
const lastThreeMonths = ref(0)
const lastSixMonths = ref(0)
const lastOneYears = ref(0)
const lastTwoYears = ref(0)
const lastAllYears = ref(0)
const lastSixMonthQueryCount = ref(0)
const lastSixMonthsAfterLoan = ref(0)
const lastTwoYearsAfterLoan = ref(0)
const totalAfterLoan = ref(0)

const getIncomeInfoData = () => {
  getIncomeInfo().then((res) => {
    totalIncome.value = res.data.totalIncome
    futuresIncome.value = res.data.futuresIncome
    stocksIncome.value = res.data.stocksIncome
    investBalance.value = res.data.investBalance
  })
}

const getBaseAccountInfoData = () => {
  getBaseAccountInfo().then((res) => {
    posCount.value = res.data.posCount
    creditCount.value = res.data.creditCount
    debitCount.value = res.data.debitCount
    stocksCount.value = res.data.stocksCount
    futuresCount.value = res.data.futuresCount
    peopleLendCount.value = res.data.peopleLendCount
    onlineLendCount.value = res.data.onlineLendCount
  })
}

const getCreditInfoData = () => {
  getCreditInfo().then((res) => {
    currentCreditBill.value = res.data.currentCreditBill
    creditInstallment.value = res.data.creditInstallment
    creditLimit.value = res.data.creditLimit
    lastSixMonthUsedLimit.value = res.data.lastSixMonthUsedLimit
    lastSixMonthUsedRate.value = res.data.lastSixMonthUsedRate
    lastMonthUsedLimit.value = res.data.lastMonthUsedLimit
    lastMonthUsedRate.value = res.data.lastMonthUsedRate
    creditBalance.value = res.data.creditBalance
    creditAvailableLimit.value = res.data.creditAvailableLimit
    creditBillRate.value = res.data.creditBillRate
    unclearedCreditInstallmentCount.value = res.data.unclearedCreditInstallmentCount
    unclearedCreditInstallment.value = res.data.unclearedCreditInstallment
    unclearedCreditInstallmentPrinciple.value = res.data.unclearedCreditInstallmentPrinciple
    unclearedCreditInstallmentInterest.value = res.data.unclearedCreditInstallmentInterest
    clearedCreditInstallmentCount.value = res.data.clearedCreditInstallmentCount
    clearedCreditInstallmentDebt.value = res.data.clearedCreditInstallmentDebt
    clearedCreditInstallmentPrinciple.value = res.data.clearedCreditInstallmentPrinciple
    clearedCreditInstallmentInterest.value = res.data.clearedCreditInstallmentInterest
  })
}
const getDebetInfoData = () => {
  getDebetInfo().then((res) => {
    unClearedOnlineDebt.value = res.data.unClearedOnlineDebt
    creditInstallmentHistory.value = res.data.creditInstallmentHistory
    totalDebt.value = res.data.totalDebt
    netAsset.value = res.data.netAsset
    debetBalance.value = res.data.debetBalance
    peopleLendHistory.value = res.data.peopleLendHistory
    unclearedOnlineDebtCount.value = res.data.unclearedOnlineDebtCount
    clearedOnlineDebtCount.value = res.data.clearedOnlineDebtCount
    clearedOnlineDebt.value = res.data.clearedOnlineDebt
    dueOnlineDebt.value = res.data.dueOnlineDebt
    repaidOnlineDebt.value = res.data.repaidOnlineDebt
    leftOnlineDebt.value = res.data.leftOnlineDebt
    unClearedOnlineDebtPrinciple.value = res.data.unClearedOnlineDebtPrinciple
    unClearedOnlineDebtInterest.value = res.data.unClearedOnlineDebtInterest
    clearedOnlineDebtPrinciple.value = res.data.clearedOnlineDebtPrinciple
    clearedOnlineDebtInterest.value = res.data.clearedOnlineDebtInterest
  })
}
const getCreditRecordAnalysisData = () => {
  getCreditRecordAnalysis().then((res) => {
    lastOneMonths.value = res.data.lastOneMonths
    lastTwoMonths.value = res.data.lastTwoMonths
    lastThreeMonths.value = res.data.lastThreeMonths
    lastSixMonths.value = res.data.lastSixMonths
    lastOneYears.value = res.data.lastOneYears
    lastTwoYears.value = res.data.lastTwoYears
    lastAllYears.value = res.data.lastAllYears
    lastSixMonthQueryCount.value = res.data.lastSixMonthQueryCount
    lastSixMonthsAfterLoan.value = res.data.lastSixMonthsAfterLoan
    lastTwoYearsAfterLoan.value = res.data.lastTwoYearsAfterLoan
    totalAfterLoan.value = res.data.totalAfterLoan
  })
}

onMounted(() => {
  getIncomeInfoData()
  getBaseAccountInfoData()
  getCreditInfoData()
  getDebetInfoData()
  getCreditRecordAnalysisData()
})
</script>

<style lang="scss" scoped>
.app-container {
  .header-con {
    width: 100%;
    height: 100px;
    background-color: #ffffff;
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .item {
      width: 50%;
      height: 100%;
      display: flex;
      position: relative;
      align-items: center;
      margin: 0px 5px 0px 5px;
      .title {
        margin-left: 5px;
        color: rgb(133, 133, 148);
        margin-bottom: 5px;
        font-size: 14px;
      }
      .num {
        margin-left: 5px;
        font-weight: bold;
        font-size: 14px;
      }
    }
    img {
      height: 30px;
      width: 30px;
    }
  }
  .header-title {
    width: 100%;
    height: 30px;
    background-color: #ffffff;
    margin-bottom: 3px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
  }
}
</style>