From b906927fffe6e89f0182889deedab64c7202f5e4 Mon Sep 17 00:00:00 2001
From: tianyongbao <tianyongbao@haier.com>
Date: Fri, 20 Feb 2026 02:36:53 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=B5=84=E4=BA=A7=E5=A4=A7=E5=B1=8F?=
 =?UTF-8?q?=E7=BB=9F=E8=AE=A1=E9=A1=B5=E9=9D=A2=E6=96=B0=E5=A2=9E=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/invest/accountBigScreen/index.vue | 2238 +++++++++++++++++++
 1 file changed, 2238 insertions(+)
 create mode 100644 src/views/invest/accountBigScreen/index.vue

diff --git a/src/views/invest/accountBigScreen/index.vue b/src/views/invest/accountBigScreen/index.vue
new file mode 100644
index 0000000..c4350ec
--- /dev/null
+++ b/src/views/invest/accountBigScreen/index.vue
@@ -0,0 +1,2238 @@
+<template>
+  <div class="big-screen">
+    <!-- <div class="bs-header">
+      <div class="bs-header-left">
+        <div class="bs-time-label">当前时间</div>
+        <div class="bs-time-value">{{ nowTime }}</div>
+      </div>
+      <div class="bs-header-center">
+        <div class="bs-title">资产智能分析大屏</div>
+        <div class="bs-subtitle">基于账户总览的实时资产与负债可视化</div>
+      </div>
+      <div class="bs-header-right">
+        <el-button class="bs-back-btn" type="primary" @click="goBackend">
+          <span class="bs-back-btn-shine"></span>
+          <span class="bs-back-btn-content">
+            <el-icon class="bs-back-icon"><ArrowRight /></el-icon>
+            <span>进入后台</span>
+          </span>
+        </el-button>
+      </div>
+    </div> -->
+
+    <div class="bs-main">
+      <!-- 第一行：核心指标 -->
+      <div class="bs-row bs-row-top">
+        <div class="bs-card">
+          <div class="bs-card-label">净资产</div>
+          <div class="bs-card-value">{{ Number(netAsset || 0).toFixed(2) }}<span>元</span></div>
+        </div>
+        <div class="bs-card">
+          <div class="bs-card-label">总负债</div>
+          <div class="bs-card-value">{{ Number(totalDebt || 0).toFixed(2) }}<span>元</span></div>
+        </div>
+        <div class="bs-card">
+          <div class="bs-card-label">总资产（储蓄账户+投资账户）</div>
+          <div class="bs-card-value">{{ Number(totalAsset || 0).toFixed(2) }}<span>元</span></div>
+        </div>
+        <div class="bs-card" v-if="Number(creditBalance) > 0">
+          <div class="bs-card-label">信用卡已用额度</div>
+          <div class="bs-card-value">{{ Number(creditBalance || 0).toFixed(2) }}<span>元</span></div>
+        </div>
+        <div class="bs-card" v-if="Number(unClearedOnlineDebt) > 0">
+          <div class="bs-card-label">未结清贷款本息</div>
+          <div class="bs-card-value">{{ Number(unClearedOnlineDebt || 0).toFixed(2) }}<span>元</span></div>
+        </div>
+        <div class="bs-card" v-if="Number(peopleLendHistory) > 0">
+          <div class="bs-card-label">人情欠款</div>
+          <div class="bs-card-value">{{ Number(peopleLendHistory || 0).toFixed(2) }}<span>元</span></div>
+        </div>
+      </div>
+      <!-- 未结清分期及贷款 -->
+      <div class="bs-row bs-row-middle">
+        <div class="bs-monthly-section">
+          <div class="bs-section-title">未结清信用卡分期及贷款</div>
+          <div class="bs-cards bs-cards-secondary">
+            <div class="bs-card">
+              <div class="bs-card-label">未结清分期笔数</div>
+              <div class="bs-card-value">{{ Number(unclearedCreditInstallmentCount || 0) }}<span>笔</span></div>
+            </div>
+            <!-- <div class="bs-card">
+              <div class="bs-card-label">未结清分期本息</div>
+              <div class="bs-card-value">{{ Number(unclearedCreditInstallment || 0).toFixed(2) }}<span>元</span></div>
+            </div> -->
+            <div class="bs-card">
+              <div class="bs-card-label">未结清分期本金</div>
+              <div class="bs-card-value">{{ Number(unclearedCreditInstallmentPrinciple || 0).toFixed(2) }}<span>元</span></div>
+            </div>
+            <div class="bs-card">
+              <div class="bs-card-label">未结清分期利息</div>
+              <div class="bs-card-value">{{ Number(unclearedCreditInstallmentInterest || 0).toFixed(2) }}<span>元</span></div>
+            </div>
+            <div class="bs-card">
+              <div class="bs-card-label">未结清贷款笔数</div>
+              <div class="bs-card-value">{{ Number(unclearedOnlineDebtCount || 0) }}<span>笔</span></div>
+            </div>
+            <div class="bs-card">
+              <div class="bs-card-label">未结清贷款本金</div>
+              <div class="bs-card-value">{{ Number(unClearedOnlineDebtPrinciple || 0).toFixed(2) }}<span>元</span></div>
+            </div>
+            <div class="bs-card">
+              <div class="bs-card-label">未结清贷款利息</div>
+              <div class="bs-card-value">{{ Number(unClearedOnlineDebtInterest || 0).toFixed(2) }}<span>元</span></div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 账户信息统计 -->
+      <div class="bs-row bs-row-middle">
+        <div class="bs-monthly-section">
+          <div class="bs-section-title">账户信息</div>
+          <div class="bs-cards bs-cards-secondary">
+            <div class="bs-card">
+              <div class="bs-card-label">信用卡</div>
+              <div class="bs-card-value">{{ Number(creditCount || 0) }}<span>张</span></div>
+            </div>
+            <div class="bs-card">
+              <div class="bs-card-label">I类储蓄卡</div>
+              <div class="bs-card-value">{{ Number(debitICount || 0) }}<span>张</span></div>
+            </div>
+            <div class="bs-card">
+              <div class="bs-card-label">II类储蓄卡</div>
+              <div class="bs-card-value">{{ Number(debitIICount || 0) }}<span>张</span></div>
+            </div>
+            <div class="bs-card">
+              <div class="bs-card-label">网络账户</div>
+              <div class="bs-card-value">{{ Number(debitOnlineCount || 0) }}<span>个</span></div>
+            </div>
+            <div class="bs-card">
+              <div class="bs-card-label">储值卡</div>
+              <div class="bs-card-value">{{ Number(storedValueCardCount || 0) }}<span>张</span></div>
+            </div>
+            <div class="bs-card">
+              <div class="bs-card-label">贷款账户</div>
+              <div class="bs-card-value">{{ Number(onlineLendCount || 0) }}<span>个</span></div>
+            </div>
+            <div class="bs-card">
+              <div class="bs-card-label">人情账户</div>
+              <div class="bs-card-value">{{ Number(peopleLendCount || 0) }}<span>人</span></div>
+            </div>
+            <div class="bs-card">
+              <div class="bs-card-label">POS机</div>
+              <div class="bs-card-value">{{ Number(posCount || 0) }}<span>台</span></div>
+            </div>
+            <div class="bs-card">
+              <div class="bs-card-label">股票账户</div>
+              <div class="bs-card-value">{{ Number(stocksCount || 0) }}<span>个</span></div>
+            </div>
+            <div class="bs-card">
+              <div class="bs-card-label">期货账户</div>
+              <div class="bs-card-value">{{ Number(futuresCount || 0) }}<span>个</span></div>
+            </div>
+            <div class="bs-card">
+              <div class="bs-card-label">近3月硬查询</div>
+              <div class="bs-card-value">{{ Number(lastThreeMonths || 0) }}<span>次</span></div>
+            </div>
+            <div class="bs-card">
+              <div class="bs-card-label">近6月硬查询</div>
+              <div class="bs-card-value">{{ Number(lastSixMonths || 0) }}<span>次</span></div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 中间行：本月数据概览 -->
+      <div class="bs-row bs-row-middle">
+        <div class="bs-monthly-section">
+          <div class="bs-section-title">本月数据</div>
+          <div class="bs-cards bs-cards-secondary">
+            <div class="bs-card">
+              <div class="bs-card-label">收支差额</div>
+              <div class="bs-card-value">{{ Number(monthlyBalance || 0).toFixed(2) }}<span>元</span></div>
+            </div>
+            <div class="bs-card">
+              <div class="bs-card-label">总支出</div>
+              <div class="bs-card-value">{{ Number(monthlyTotalOutcome || 0).toFixed(2) }}<span>元</span></div>
+            </div>
+
+            <div class="bs-card">
+              <div class="bs-card-label">工资收益</div>
+              <div class="bs-card-value">{{ Number(monthlySalaryIncome || 0).toFixed(2) }}<span>元</span></div>
+            </div>
+
+            <div class="bs-card">
+              <div class="bs-card-label">投资收益</div>
+              <div class="bs-card-value">{{ Number(monthlyInvestIncome || 0).toFixed(2) }}<span>元</span></div>
+            </div>
+            <div class="bs-card">
+              <div class="bs-card-label">日常支出</div>
+              <div class="bs-card-value">{{ Number(monthlyExpenses || 0).toFixed(2) }}<span>元</span></div>
+            </div>
+            <div class="bs-card">
+              <div class="bs-card-label">手续费利息支出</div>
+              <div class="bs-card-value">{{ Number(monthlyNotDailyExpenses || 0).toFixed(2) }}<span>元</span></div>
+            </div>
+            <div class="bs-card">
+              <div class="bs-card-label">信用卡账单</div>
+              <div class="bs-card-value">{{ Number(monthlyCreditBill || 0).toFixed(2) }}<span>元</span></div>
+            </div>
+            <div class="bs-card">
+              <div class="bs-card-label">POS刷卡次数</div>
+              <div class="bs-card-value">{{ Number(monthlyPosCount || 0) }}<span>次</span></div>
+            </div>
+            <div class="bs-card">
+              <div class="bs-card-label">POS刷卡金额</div>
+              <div class="bs-card-value">{{ Number(monthlyPosAmount || 0).toFixed(2) }}<span>元</span></div>
+            </div>
+            <div class="bs-card">
+              <div class="bs-card-label">POS刷卡手续费</div>
+              <div class="bs-card-value">{{ Number(monthlyPosFee || 0).toFixed(2) }}<span>元</span></div>
+            </div>
+            <!-- <div class="bs-card">
+              <div class="bs-card-label">POS入账金额</div>
+              <div class="bs-card-value">{{ Number(monthlyPosActualAmount || 0).toFixed(2) }}<span>元</span></div>
+            </div> -->
+
+            <!-- <div class="bs-card">
+              <div class="bs-card-label">储蓄卡结算</div>
+              <div class="bs-card-value">{{ Number(monthlyDebitCount || 0) }}<span>次</span></div>
+            </div>
+            <div class="bs-card">
+              <div class="bs-card-label">储蓄卡收款</div>
+              <div class="bs-card-value">{{ Number(monthlyDebitAmount || 0).toFixed(2) }}<span>元</span></div>
+            </div> -->
+
+            <div class="bs-card">
+              <div class="bs-card-label">信用卡分期本息</div>
+              <div class="bs-card-value">{{ Number(monthlyCreditInstallment || 0).toFixed(2) }}<span>元</span></div>
+            </div>
+            <div class="bs-card">
+              <div class="bs-card-label">信用卡分期本金</div>
+              <div class="bs-card-value">{{ Number(monthlyCreditInstallmentPrincipal || 0).toFixed(2) }}<span>元</span></div>
+            </div>
+            <div class="bs-card">
+              <div class="bs-card-label">信用卡分期利息</div>
+              <div class="bs-card-value">{{ Number(monthlyCreditInstallmentInterest || 0).toFixed(2) }}<span>元</span></div>
+            </div>
+            <div class="bs-card">
+              <div class="bs-card-label">信用卡可用额度</div>
+              <div class="bs-card-value">{{ Number(monthlyCreditAvailable || 0).toFixed(2) }}<span>元</span></div>
+            </div>
+
+            <div class="bs-card">
+              <div class="bs-card-label">借贷应还本息</div>
+              <div class="bs-card-value">{{ Number(monthlyLendDue || 0).toFixed(2) }}<span>元</span></div>
+            </div>
+            <div class="bs-card">
+              <div class="bs-card-label">借贷已还本息</div>
+              <div class="bs-card-value">{{ Number(monthlyLendRepaid || 0).toFixed(2) }}<span>元</span></div>
+            </div>
+
+            <div class="bs-card">
+              <div class="bs-card-label">借贷利息</div>
+              <div class="bs-card-value">{{ Number(monthlyLendInterest || 0).toFixed(2) }}<span>元</span></div>
+            </div>
+            <div class="bs-card">
+              <div class="bs-card-label">借贷待还款</div>
+              <div class="bs-card-value">{{ Number(monthlyLendRepayment || 0).toFixed(2) }}<span>元</span></div>
+            </div>
+            <!-- <div class="bs-card">
+              <div class="bs-card-label">征信硬查询</div>
+              <div class="bs-card-value">{{ Number(monthlyCreditRecord || 0) }}<span>次</span></div>
+            </div> -->
+          </div>
+        </div>
+      </div>
+
+      <!-- 第二行：资产结构 / 负债结构 / 信用压力雷达图 -->
+      <div class="bs-row bs-row-bottom">
+        <div class="bs-chart" id="assetStructureChart"></div>
+        <div class="bs-chart" id="debtStructureChart"></div>
+        <div class="bs-chart" id="creditRiskRadarChart"></div>
+      </div>
+      <!-- 贷款还款计划图 -->
+      <div class="bs-row bs-row-credit">
+        <div class="bs-chart" id="lendRepaymentChart"></div>
+      </div>
+      <!-- 近一周数据趋势图 -->
+      <div class="bs-row bs-row-weekly">
+        <div class="bs-chart-wrapper">
+          <div class="bs-chart-tabs">
+            <span
+              :class="['bs-chart-tab', { active: expenseActiveTab === 'week' }]"
+              @click="
+                expenseActiveTab = 'week'
+                initWeeklyExpenseChart()
+              "
+            >
+              近一周日常支出趋势
+            </span>
+            <span
+              :class="['bs-chart-tab', { active: expenseActiveTab === 'month' }]"
+              @click="
+                expenseActiveTab = 'month'
+                initWeeklyExpenseChart()
+              "
+            >
+              近一月日常支出趋势
+            </span>
+          </div>
+          <div class="bs-chart" id="weeklyExpenseChart"></div>
+        </div>
+        <div class="bs-chart-wrapper">
+          <div class="bs-chart-tabs">
+            <span
+              :class="['bs-chart-tab', { active: investIncomeActiveTab === 'week' }]"
+              @click="
+                investIncomeActiveTab = 'week'
+                initWeeklyInvestIncomeChart()
+              "
+            >
+              近一周投资收益趋势
+            </span>
+            <span
+              :class="['bs-chart-tab', { active: investIncomeActiveTab === 'month' }]"
+              @click="
+                investIncomeActiveTab = 'month'
+                initWeeklyInvestIncomeChart()
+              "
+            >
+              近一月投资收益趋势
+            </span>
+          </div>
+          <div class="bs-chart" id="weeklyInvestIncomeChart"></div>
+        </div>
+      </div>
+
+      <!-- 账户收支统计图 -->
+      <div class="bs-row bs-row-credit">
+        <div class="bs-chart-wrapper">
+          <div class="bs-chart-tabs">
+            <span
+              :class="['bs-chart-tab', { active: balanceActiveTab === 'week' }]"
+              @click="
+                balanceActiveTab = 'week'
+                initBalanceChart()
+              "
+            >
+              近一周账户收支统计
+            </span>
+            <span
+              :class="['bs-chart-tab', { active: balanceActiveTab === 'month' }]"
+              @click="
+                balanceActiveTab = 'month'
+                initBalanceChart()
+              "
+            >
+              近一月账户收支统计
+            </span>
+          </div>
+          <div class="bs-chart" id="balanceChart"></div>
+        </div>
+      </div>
+      <!-- 信用卡账单统计图 -->
+      <div class="bs-row bs-row-credit">
+        <div class="bs-chart" id="creditBillChart"></div>
+      </div>
+
+      <!-- 储蓄卡开卡统计图 -->
+      <div class="bs-row bs-row-credit">
+        <div class="bs-chart" id="openCardChart"></div>
+      </div>
+
+      <!-- 净资产趋势分析图 -->
+      <div class="bs-row bs-row-credit">
+        <div class="bs-chart" id="netAssetTrendChart"></div>
+      </div>
+
+      <!-- POS机刷卡统计图 -->
+      <div class="bs-row bs-row-credit">
+        <div class="bs-chart" id="posCardChart"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup name="AccountBigScreen">
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
+import { useRouter } from 'vue-router'
+import * as echarts from 'echarts'
+import { ArrowRight } from '@element-plus/icons-vue'
+import {
+  getPosAccountsInfo,
+  getInvestAccountsInfo,
+  getCreditReportInfo,
+  getLendAccountsInfo,
+  getCreditAccountsInfo,
+  getDebitAccountsInfo
+} from '@/api/invest/accountAnalysis.js'
+import {
+  getDailyExpensesAnalysis,
+  getCreditAnalysis,
+  getFuturesStocksAnalysis,
+  getPosAnalysis,
+  getAcccountsOutInAnalysis,
+  getDebitCardAnalysis,
+  getCreditRecordsAnalysis,
+  getInstallmentHistoryAnalysis,
+  getAcccountsDealAnalysis,
+  getOpenCardList
+} from '@/api/invest/statisticAnalysis'
+import { listDailyLiabilities } from '@/api/invest/dailyLiabilities'
+
+// 时间展示
+const nowTime = ref('')
+let timer = null
+const router = useRouter()
+
+const updateTime = () => {
+  const d = new Date()
+  const pad = (n) => String(n).padStart(2, '0')
+  nowTime.value = `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
+}
+
+// 核心数值
+const debitTotalBalance = ref(0) // 储蓄账户余额
+const debitBalance = ref(0) // 储蓄卡余额
+const investBalance = ref(0) // 投资账户余额
+const unClearedOnlineDebt = ref(0) // 未结清贷款本息
+const creditBalance = ref(0) // 信用卡已使用额度
+const peopleLendHistory = ref(0) // 人情欠款
+
+const housingFundBalance = ref(0)
+const medicalBalance = ref(0)
+const personalPensionBalance = ref(0)
+const storedValueCardBalance = ref(0)
+const debitOnlineBalance = ref(0)
+
+const creditLimit = ref(0)
+const unclearedCreditInstallment = ref(0)
+const unclearedCreditInstallmentPrinciple = ref(0)
+const unclearedCreditInstallmentInterest = ref(0)
+const unclearedCreditInstallmentCount = ref(0)
+
+const unclearedOnlineDebtCount = ref(0)
+const unClearedOnlineDebtPrinciple = ref(0)
+const unClearedOnlineDebtInterest = ref(0)
+
+// 账户数量统计
+const creditCount = ref(0) // 信用卡张数
+const debitICount = ref(0) // I类储蓄卡张数
+const debitIICount = ref(0) // II类储蓄卡张数
+const debitOnlineCount = ref(0) // 网络账户数
+const storedValueCardCount = ref(0) // 储值卡张数
+const onlineLendCount = ref(0) // 贷款账户个数
+const peopleLendCount = ref(0) // 人情账户数量
+const posCount = ref(0) // POS机台数
+const stocksCount = ref(0) // 股票账户个数
+const futuresCount = ref(0) // 期货账户个数
+
+const lastMonthUsedRate = ref(0)
+const lastSixMonthUsedRate = ref(0)
+const creditBillRate = ref(0)
+
+const lastThreeMonths = ref(0)
+const lastSixMonths = ref(0)
+const lastOneYears = ref(0)
+const lastTwoYears = ref(0)
+const lastAllYears = ref(0)
+
+const monthlyExpenses = ref(0)
+const monthlyCreditBill = ref(0)
+const monthlyInvestIncome = ref(0)
+const monthlyPosAmount = ref(0)
+const monthlyPosActualAmount = ref(0)
+const monthlyPosCount = ref(0)
+const monthlyBalance = ref(0)
+const monthlyTotalOutcome = ref(0)
+const monthlySalaryIncome = ref(0)
+const monthlyDebitCount = ref(0)
+const monthlyDebitAmount = ref(0)
+const monthlyCreditRecord = ref(0)
+
+// 本月其他数据
+const monthlyCreditInstallment = ref(0) // 本月信用卡分期本息
+const monthlyLendRepayment = ref(0) // 本月借贷待还款
+const monthlyPosFee = ref(0) // 本月POS刷卡手续费
+const monthlyNotDailyExpenses = ref(0) // 本月手续费利息支出
+const monthlyCreditInstallmentPrincipal = ref(0) // 当月信用卡分期本金
+const monthlyCreditInstallmentInterest = ref(0) // 当月信用卡分期利息
+const monthlyLendDue = ref(0) // 当月借贷应还本息
+const monthlyLendRepaid = ref(0) // 当月借贷已还本息
+const monthlyLendInterest = ref(0) // 当月借贷利息
+const monthlyCreditAvailable = ref(0) // 信用卡可用额度
+
+// 近一周数据
+const weeklyExpenseData = ref([])
+const weeklyInvestIncomeData = ref([])
+
+// 近一月数据
+const monthlyExpenseData = ref([])
+const monthlyInvestIncomeData = ref([])
+
+// Tab 状态
+const expenseActiveTab = ref('week')
+const investIncomeActiveTab = ref('week')
+
+// 信用卡账单数据
+const creditBillData = ref([])
+
+// 贷款还款数据
+const lendRepaymentData = ref([])
+
+// 账户收支数据
+const weeklyBalanceData = ref([])
+const monthlyBalanceData = ref([])
+
+// 账户收支 Tab 状态
+const balanceActiveTab = ref('week')
+
+// 储蓄卡开卡统计数据
+const openCardData = ref([])
+
+// 净资产趋势数据
+const netAssetTrendData = ref([])
+
+// POS机刷卡统计数据
+const posCardData = ref([])
+
+// 派生指标
+const totalAsset = computed(() => {
+  return Number(debitTotalBalance.value) + Number(investBalance.value)
+})
+
+const totalDebt = computed(() => {
+  return Number(unClearedOnlineDebt.value) + Number(creditBalance.value) + Number(peopleLendHistory.value)
+})
+
+const netAsset = computed(() => {
+  return totalAsset.value - totalDebt.value
+})
+
+const debtRatio = computed(() => {
+  if (!totalAsset.value) return 0
+  return (totalDebt.value / totalAsset.value) * 100
+})
+
+// ECharts 实例
+let assetStructureChart = null
+let debtStructureChart = null
+let creditRiskRadarChart = null
+let weeklyExpenseChart = null
+let weeklyInvestIncomeChart = null
+let creditBillChart = null
+let lendRepaymentChart = null
+let balanceChart = null
+let openCardChart = null
+let netAssetTrendChart = null
+let posCardChart = null
+
+const initAssetStructureChart = () => {
+  const el = document.getElementById('assetStructureChart')
+  if (!el) return
+  if (!assetStructureChart) {
+    assetStructureChart = echarts.init(el)
+  }
+
+  const data = [
+    { name: '储蓄卡余额', value: Number(debitBalance.value) || 0 },
+    { name: '投资账户余额', value: Number(investBalance.value) || 0 },
+    { name: '住房公积金', value: Number(housingFundBalance.value) || 0 },
+    { name: '职工医保', value: Number(medicalBalance.value) || 0 },
+    { name: '个人养老金', value: Number(personalPensionBalance.value) || 0 },
+    { name: '储值卡余额', value: Number(storedValueCardBalance.value) || 0 },
+    { name: '网络账户余额', value: Number(debitOnlineBalance.value) || 0 }
+  ].filter((item) => item.value > 0)
+
+  // 计算资产总和
+  const totalAssetSum = data.reduce((sum, item) => sum + item.value, 0)
+
+  assetStructureChart.setOption({
+    backgroundColor: 'transparent',
+    title: {
+      text: '资产结构占比',
+      subtext: `总计: ${totalAssetSum.toFixed(2)} 元`,
+      left: 16,
+      top: 10,
+      textStyle: { color: '#e5e7eb', fontSize: 14 },
+      subtextStyle: { color: '#10b981', fontSize: 12, fontWeight: 'bold' }
+    },
+    tooltip: { trigger: 'item', formatter: '{b}<br/>{c} 元 ({d}%)' },
+    legend: {
+      bottom: 10,
+      textStyle: { color: '#9ca3af', fontSize: 11 },
+      itemGap: 8
+    },
+    series: [
+      {
+        type: 'pie',
+        radius: ['40%', '65%'],
+        center: ['50%', '45%'],
+        data,
+        label: {
+          show: false
+        },
+        emphasis: {
+          label: {
+            show: true,
+            fontSize: 14,
+            fontWeight: 'bold',
+            color: '#e5e7eb'
+          }
+        },
+        itemStyle: {
+          borderColor: '#020617',
+          borderWidth: 2
+        }
+      }
+    ]
+  })
+}
+
+const initDebtStructureChart = () => {
+  const el = document.getElementById('debtStructureChart')
+  if (!el) return
+  if (!debtStructureChart) {
+    debtStructureChart = echarts.init(el)
+  }
+
+  const data = [
+    { name: '未结清贷款本息', value: Number(unClearedOnlineDebt.value) || 0 },
+    { name: '信用卡已用额度', value: Number(creditBalance.value) || 0 },
+    { name: '人情欠款', value: Number(peopleLendHistory.value) || 0 }
+  ].filter((item) => item.value > 0)
+
+  // 计算负债总和
+  const totalDebtSum = data.reduce((sum, item) => sum + item.value, 0)
+
+  debtStructureChart.setOption({
+    backgroundColor: 'transparent',
+    title: {
+      text: '负债结构占比',
+      subtext: `负债综合: ${totalDebtSum.toFixed(2)} 元`,
+      left: 16,
+      top: 10,
+      textStyle: { color: '#e5e7eb', fontSize: 14 },
+      subtextStyle: { color: '#ef4444', fontSize: 12, fontWeight: 'bold' }
+    },
+    tooltip: { trigger: 'item', formatter: '{b}<br/>{c} 元 ({d}%)' },
+    legend: {
+      bottom: 10,
+      textStyle: { color: '#9ca3af', fontSize: 11 },
+      itemGap: 8
+    },
+    series: [
+      {
+        type: 'pie',
+        roseType: 'radius',
+        radius: ['20%', '65%'],
+        center: ['50%', '45%'],
+        data,
+        label: {
+          show: false
+        },
+        emphasis: {
+          label: {
+            show: true,
+            fontSize: 14,
+            fontWeight: 'bold',
+            color: '#e5e7eb'
+          }
+        },
+        itemStyle: {
+          borderColor: '#020617',
+          borderWidth: 2
+        }
+      }
+    ]
+  })
+}
+
+const initCreditRiskRadar = () => {
+  const el = document.getElementById('creditRiskRadarChart')
+  if (!el) return
+  if (!creditRiskRadarChart) {
+    creditRiskRadarChart = echarts.init(el)
+  }
+
+  const safeTotalAsset = totalAsset.value || 1
+  const safeCreditLimit = Number(creditLimit.value) || 1
+
+  const debtAssetRatio = (totalDebt.value / safeTotalAsset) * 100
+  const installmentLimitRatio = (Number(unclearedCreditInstallment.value) / safeCreditLimit) * 100
+
+  const indicator = [
+    { name: '信用卡使用率', max: 100 },
+    { name: '上月账单使用率', max: 100 },
+    { name: '近6月平均使用率', max: 100 },
+    { name: '资产负债率', max: 100 },
+    { name: '分期占额度比', max: 100 }
+  ]
+
+  const data = [
+    Number(creditBillRate.value) || 0,
+    Number(lastMonthUsedRate.value) || 0,
+    Number(lastSixMonthUsedRate.value) || 0,
+    Number(debtAssetRatio.toFixed(1)) || 0,
+    Number(installmentLimitRatio.toFixed(1)) || 0
+  ]
+
+  creditRiskRadarChart.setOption({
+    backgroundColor: 'transparent',
+    title: {
+      text: '信用压力雷达图',
+      left: 16,
+      top: 10,
+      textStyle: { color: '#e5e7eb', fontSize: 14 }
+    },
+    tooltip: {},
+    radar: {
+      indicator,
+      radius: '65%',
+      splitLine: { lineStyle: { color: 'rgba(148,163,184,0.4)' } },
+      splitArea: { areaStyle: { color: ['rgba(15,23,42,0.9)', 'rgba(30,64,175,0.1)'] } },
+      axisLine: { lineStyle: { color: 'rgba(148,163,184,0.6)' } },
+      name: { textStyle: { color: '#e5e7eb', fontSize: 11 } }
+    },
+    series: [
+      {
+        type: 'radar',
+        data: [
+          {
+            value: data,
+            areaStyle: {
+              color: 'rgba(56,189,248,0.35)'
+            },
+            lineStyle: {
+              color: '#38bdf8'
+            },
+            symbol: 'circle',
+            symbolSize: 4,
+            itemStyle: {
+              color: '#38bdf8'
+            }
+          }
+        ]
+      }
+    ]
+  })
+}
+
+const initWeeklyExpenseChart = () => {
+  const el = document.getElementById('weeklyExpenseChart')
+  if (!el) return
+  if (!weeklyExpenseChart) {
+    weeklyExpenseChart = echarts.init(el)
+  }
+
+  // 根据当前 tab 选择数据源
+  const isWeek = expenseActiveTab.value === 'week'
+  const sourceData = isWeek ? weeklyExpenseData.value : monthlyExpenseData.value
+
+  const dates = sourceData.map((item) => item.date)
+  const values = sourceData.map((item) => item.value)
+  const totalExpense = values.reduce((sum, val) => sum + val, 0)
+
+  weeklyExpenseChart.setOption({
+    backgroundColor: 'transparent',
+    title: [
+      {
+        text: '',
+        left: 16,
+        top: 10,
+        textStyle: { color: '#e5e7eb', fontSize: 14 }
+      },
+      {
+        text: `总计: ${totalExpense.toFixed(2)} 元`,
+        right: 16,
+        top: 10,
+        textStyle: { color: '#f59e0b', fontSize: 13, fontWeight: 'bold' }
+      }
+    ],
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: { type: 'cross' },
+      formatter: '{b}<br/>{c} 元'
+    },
+    grid: {
+      left: 50,
+      right: 30,
+      top: 50,
+      bottom: 30
+    },
+    xAxis: {
+      type: 'category',
+      data: dates,
+      axisLine: { lineStyle: { color: '#9ca3af' } },
+      axisLabel: { color: '#9ca3af', fontSize: 11 }
+    },
+    yAxis: {
+      type: 'value',
+      axisLine: { lineStyle: { color: '#9ca3af' } },
+      axisLabel: { color: '#9ca3af', fontSize: 11 },
+      splitLine: { lineStyle: { color: 'rgba(148,163,184,0.2)' } }
+    },
+    series: [
+      {
+        type: 'line',
+        data: values,
+        smooth: true,
+        lineStyle: { color: '#f59e0b', width: 2 },
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              { offset: 0, color: 'rgba(245,158,11,0.3)' },
+              { offset: 1, color: 'rgba(245,158,11,0.05)' }
+            ]
+          }
+        },
+        itemStyle: { color: '#f59e0b' },
+        symbol: 'circle',
+        symbolSize: 6
+      }
+    ]
+  })
+}
+
+const initWeeklyInvestIncomeChart = () => {
+  const el = document.getElementById('weeklyInvestIncomeChart')
+  if (!el) return
+  if (!weeklyInvestIncomeChart) {
+    weeklyInvestIncomeChart = echarts.init(el)
+  }
+
+  // 根据当前 tab 选择数据源
+  const isWeek = investIncomeActiveTab.value === 'week'
+  const sourceData = isWeek ? weeklyInvestIncomeData.value : monthlyInvestIncomeData.value
+
+  const dates = sourceData.map((item) => item.date)
+  const values = sourceData.map((item) => item.value)
+  const totalIncome = values.reduce((sum, val) => sum + val, 0)
+  const totalColor = totalIncome >= 0 ? '#10b981' : '#ef4444' // 盈利绿色，亏损红色
+
+  weeklyInvestIncomeChart.setOption({
+    backgroundColor: 'transparent',
+    title: [
+      {
+        text: '',
+        left: 16,
+        top: 10,
+        textStyle: { color: '#e5e7eb', fontSize: 14 }
+      },
+      {
+        text: `总计: ${totalIncome >= 0 ? '+' : ''}${totalIncome.toFixed(2)} 元`,
+        right: 16,
+        top: 10,
+        textStyle: { color: totalColor, fontSize: 13, fontWeight: 'bold' }
+      }
+    ],
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: { type: 'cross' },
+      formatter: '{b}<br/>{c} 元'
+    },
+    grid: {
+      left: 50,
+      right: 30,
+      top: 50,
+      bottom: 30
+    },
+    xAxis: {
+      type: 'category',
+      data: dates,
+      axisLine: { lineStyle: { color: '#9ca3af' } },
+      axisLabel: { color: '#9ca3af', fontSize: 11 }
+    },
+    yAxis: {
+      type: 'value',
+      axisLine: { lineStyle: { color: '#9ca3af' } },
+      axisLabel: { color: '#9ca3af', fontSize: 11 },
+      splitLine: { lineStyle: { color: 'rgba(148,163,184,0.2)' } }
+    },
+    series: [
+      {
+        type: 'line',
+        data: values,
+        smooth: true,
+        lineStyle: { color: '#10b981', width: 2 },
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              { offset: 0, color: 'rgba(16,185,129,0.3)' },
+              { offset: 1, color: 'rgba(16,185,129,0.05)' }
+            ]
+          }
+        },
+        itemStyle: { color: '#10b981' },
+        symbol: 'circle',
+        symbolSize: 6
+      }
+    ]
+  })
+}
+
+const initCreditBillChart = () => {
+  const el = document.getElementById('creditBillChart')
+  if (!el) {
+    return
+  }
+  if (!creditBillChart) {
+    creditBillChart = echarts.init(el)
+  }
+
+  if (!creditBillData.value || creditBillData.value.length === 0) {
+    creditBillChart.setOption({
+      backgroundColor: 'transparent',
+      title: {
+        text: '近一年信用卡账单统计',
+        subtext: '暂无数据',
+        left: 16,
+        top: 10,
+        textStyle: { color: '#e5e7eb', fontSize: 14 },
+        subtextStyle: { color: '#9ca3af', fontSize: 12 }
+      }
+    })
+    return
+  }
+
+  const dates = creditBillData.value.map((item) => item.time)
+  const values = creditBillData.value.map((item) => Number(item.value) || 0)
+  const totalBill = values.reduce((sum, val) => sum + val, 0)
+
+  creditBillChart.setOption({
+    backgroundColor: 'transparent',
+    title: [
+      {
+        text: '近一年信用卡账单统计',
+        left: 16,
+        top: 10,
+        textStyle: { color: '#e5e7eb', fontSize: 14 }
+      },
+      {
+        text: `累计: ${totalBill.toFixed(2)} 元`,
+        right: 16,
+        top: 10,
+        textStyle: { color: '#f59e0b', fontSize: 13, fontWeight: 'bold' }
+      }
+    ],
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: { type: 'cross' },
+      formatter: '{b}<br/>账单金额: {c} 元'
+    },
+    grid: {
+      left: 60,
+      right: 30,
+      top: 50,
+      bottom: 30
+    },
+    xAxis: {
+      type: 'category',
+      data: dates,
+      axisLine: { lineStyle: { color: '#9ca3af' } },
+      axisLabel: { color: '#9ca3af', fontSize: 11 }
+    },
+    yAxis: {
+      type: 'value',
+      axisLine: { lineStyle: { color: '#9ca3af' } },
+      axisLabel: { color: '#9ca3af', fontSize: 11 },
+      splitLine: { lineStyle: { color: 'rgba(148,163,184,0.2)' } }
+    },
+    series: [
+      {
+        data: values,
+        type: 'line',
+        smooth: true,
+        lineStyle: { color: '#4181c9', width: 2 },
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              { offset: 0, color: 'rgba(65,129,201,0.7)' },
+              { offset: 1, color: 'rgba(65,129,201,0.1)' }
+            ]
+          }
+        },
+        itemStyle: { color: '#4181c9' },
+        symbol: 'circle',
+        symbolSize: 6
+      }
+    ]
+  })
+}
+
+const initLendRepaymentChart = () => {
+  const el = document.getElementById('lendRepaymentChart')
+  if (!el) {
+    return
+  }
+  if (!lendRepaymentChart) {
+    lendRepaymentChart = echarts.init(el)
+  }
+
+  if (!lendRepaymentData.value || lendRepaymentData.value.length === 0) {
+    lendRepaymentChart.setOption({
+      backgroundColor: 'transparent',
+      title: {
+        text: '未来3个月贷款还款计划',
+        subtext: '暂无数据',
+        left: 16,
+        top: 10,
+        textStyle: { color: '#e5e7eb', fontSize: 14 },
+        subtextStyle: { color: '#9ca3af', fontSize: 12 }
+      }
+    })
+    return
+  }
+
+  const dates = lendRepaymentData.value.map((item) => item.time)
+  const values = lendRepaymentData.value.map((item) => Number(item.value) || 0)
+  const totalRepayment = values.reduce((sum, val) => sum + val, 0)
+
+  lendRepaymentChart.setOption({
+    backgroundColor: 'transparent',
+    title: [
+      {
+        text: '未来3个月贷款还款计划',
+        left: 16,
+        top: 10,
+        textStyle: { color: '#e5e7eb', fontSize: 14 }
+      },
+      {
+        text: `待还总计: ${totalRepayment.toFixed(2)} 元`,
+        right: 16,
+        top: 10,
+        textStyle: { color: '#ef4444', fontSize: 13, fontWeight: 'bold' }
+      }
+    ],
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: { type: 'shadow' },
+      formatter: '{b}<br/>待还款金额: {c} 元'
+    },
+    grid: {
+      left: 60,
+      right: 30,
+      top: 50,
+      bottom: 30
+    },
+    xAxis: {
+      type: 'category',
+      data: dates,
+      axisLine: { lineStyle: { color: '#9ca3af' } },
+      axisLabel: { color: '#9ca3af', fontSize: 11 }
+    },
+    yAxis: {
+      type: 'value',
+      axisLine: { lineStyle: { color: '#9ca3af' } },
+      axisLabel: { color: '#9ca3af', fontSize: 11 },
+      splitLine: { lineStyle: { color: 'rgba(148,163,184,0.2)' } }
+    },
+    series: [
+      {
+        data: values,
+        type: 'line',
+        smooth: true,
+        lineStyle: { color: '#4181c9', width: 2 },
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              { offset: 0, color: 'rgba(65,129,201,0.7)' },
+              { offset: 1, color: 'rgba(65,129,201,0.1)' }
+            ]
+          }
+        },
+        itemStyle: { color: '#4181c9' },
+        symbol: 'circle',
+        symbolSize: 6
+      }
+    ]
+  })
+}
+
+const initBalanceChart = () => {
+  const el = document.getElementById('balanceChart')
+  if (!el) {
+    return
+  }
+  if (!balanceChart) {
+    balanceChart = echarts.init(el)
+  }
+
+  // 根据当前 tab 选择数据源
+  const isWeek = balanceActiveTab.value === 'week'
+  const sourceData = isWeek ? weeklyBalanceData.value : monthlyBalanceData.value
+
+  const dates = sourceData.map((item) => item.date)
+  const values = sourceData.map((item) => item.value)
+  const totalBalance = values.reduce((sum, val) => sum + val, 0)
+  const balanceColor = totalBalance >= 0 ? '#10b981' : '#ef4444'
+
+  balanceChart.setOption({
+    backgroundColor: 'transparent',
+    title: [
+      {
+        text: '',
+        left: 16,
+        top: 10,
+        textStyle: { color: '#e5e7eb', fontSize: 14 }
+      },
+      {
+        text: `收支差额: ${totalBalance >= 0 ? '+' : ''}${totalBalance.toFixed(2)} 元`,
+        right: 16,
+        top: 10,
+        textStyle: { color: balanceColor, fontSize: 13, fontWeight: 'bold' }
+      }
+    ],
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: { type: 'cross' },
+      formatter: '{b}<br/>收支差额: {c} 元'
+    },
+    grid: {
+      left: 50,
+      right: 30,
+      top: 50,
+      bottom: 30
+    },
+    xAxis: {
+      type: 'category',
+      data: dates,
+      axisLine: { lineStyle: { color: '#9ca3af' } },
+      axisLabel: { color: '#9ca3af', fontSize: 11 }
+    },
+    yAxis: {
+      type: 'value',
+      axisLine: { lineStyle: { color: '#9ca3af' } },
+      axisLabel: { color: '#9ca3af', fontSize: 11 },
+      splitLine: { lineStyle: { color: 'rgba(148,163,184,0.2)' } }
+    },
+    series: [
+      {
+        type: 'line',
+        data: values,
+        smooth: true,
+        lineStyle: { color: '#4181c9', width: 2 },
+        itemStyle: {
+          color: function (params) {
+            return params.data >= 0 ? '#10b981' : '#ef4444'
+          }
+        },
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              { offset: 0, color: 'rgba(65,129,201,0.7)' },
+              { offset: 1, color: 'rgba(65,129,201,0.1)' }
+            ]
+          }
+        },
+        symbol: 'circle',
+        symbolSize: 6
+      }
+    ]
+  })
+}
+
+const initOpenCardChart = () => {
+  const el = document.getElementById('openCardChart')
+  if (!el) {
+    return
+  }
+  if (!openCardChart) {
+    openCardChart = echarts.init(el)
+  }
+
+  if (!openCardData.value || openCardData.value.length === 0) {
+    openCardChart.setOption({
+      backgroundColor: 'transparent',
+      title: {
+        text: '近两年储蓄卡开卡统计',
+        subtext: '暂无数据',
+        left: 16,
+        top: 10,
+        textStyle: { color: '#e5e7eb', fontSize: 14 },
+        subtextStyle: { color: '#9ca3af', fontSize: 12 }
+      }
+    })
+    return
+  }
+
+  const dates = openCardData.value.map((item) => item.time)
+  const values = openCardData.value.map((item) => Number(item.value) || 0)
+  const totalCards = values.reduce((sum, val) => sum + val, 0)
+
+  openCardChart.setOption({
+    backgroundColor: 'transparent',
+    title: [
+      {
+        text: '近两年储蓄卡开卡统计',
+        left: 16,
+        top: 10,
+        textStyle: { color: '#e5e7eb', fontSize: 14 }
+      },
+      {
+        text: `累计开卡: ${totalCards} 张`,
+        right: 16,
+        top: 10,
+        textStyle: { color: '#10b981', fontSize: 13, fontWeight: 'bold' }
+      }
+    ],
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: { type: 'shadow' },
+      formatter: '{b}<br/>开卡数量: {c} 张'
+    },
+    grid: {
+      left: 60,
+      right: 30,
+      top: 50,
+      bottom: 30
+    },
+    xAxis: {
+      type: 'category',
+      data: dates,
+      axisLine: { lineStyle: { color: '#9ca3af' } },
+      axisLabel: { color: '#9ca3af', fontSize: 11 }
+    },
+    yAxis: {
+      type: 'value',
+      axisLine: { lineStyle: { color: '#9ca3af' } },
+      axisLabel: { color: '#9ca3af', fontSize: 11 },
+      splitLine: { lineStyle: { color: 'rgba(148,163,184,0.2)' } }
+    },
+    series: [
+      {
+        data: values,
+        type: 'bar',
+        barMaxWidth: 50,
+        itemStyle: {
+          color: function (params) {
+            return params.data <= 2 ? '#10b981' : '#ef4444'
+          }
+        }
+      }
+    ]
+  })
+}
+
+const initNetAssetTrendChart = () => {
+  const el = document.getElementById('netAssetTrendChart')
+  if (!el) {
+    return
+  }
+  if (!netAssetTrendChart) {
+    netAssetTrendChart = echarts.init(el)
+  }
+
+  if (!netAssetTrendData.value || netAssetTrendData.value.length === 0) {
+    netAssetTrendChart.setOption({
+      backgroundColor: 'transparent',
+      title: {
+        text: '近15天净资产趋势分析',
+        subtext: '暂无数据',
+        left: 16,
+        top: 10,
+        textStyle: { color: '#e5e7eb', fontSize: 14 },
+        subtextStyle: { color: '#9ca3af', fontSize: 12 }
+      }
+    })
+    return
+  }
+
+  const dates = netAssetTrendData.value.map((item) => {
+    // 提取日期部分，显示YYYY-MM-DD
+    const dateStr = item.recordDate || ''
+    if (dateStr.includes(' ')) {
+      return dateStr.split(' ')[0] // 取YYYY-MM-DD部分
+    }
+    return dateStr // 如果没有时间，直接返回
+  })
+  const values = netAssetTrendData.value.map((item) => Number(item.totalBalance) || 0)
+  const latestValue = values[values.length - 1] || 0
+
+  netAssetTrendChart.setOption({
+    backgroundColor: 'transparent',
+    title: [
+      {
+        text: '近15天净资产趋势分析',
+        left: 16,
+        top: 10,
+        textStyle: { color: '#e5e7eb', fontSize: 14 }
+      },
+      {
+        text: `当前净资产: ${latestValue.toFixed(2)} 元`,
+        right: 16,
+        top: 10,
+        textStyle: { color: '#10b981', fontSize: 13, fontWeight: 'bold' }
+      }
+    ],
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: { type: 'cross' },
+      formatter: '{b}<br/>净资产: {c} 元'
+    },
+    grid: {
+      left: 60,
+      right: 30,
+      top: 50,
+      bottom: 30
+    },
+    xAxis: {
+      type: 'category',
+      data: dates,
+      axisLine: { lineStyle: { color: '#9ca3af' } },
+      axisLabel: { color: '#9ca3af', fontSize: 11 }
+    },
+    yAxis: {
+      type: 'value',
+      axisLine: { lineStyle: { color: '#9ca3af' } },
+      axisLabel: { color: '#9ca3af', fontSize: 11 },
+      splitLine: { lineStyle: { color: 'rgba(148,163,184,0.2)' } }
+    },
+    series: [
+      {
+        data: values,
+        type: 'line',
+        smooth: true,
+        lineStyle: { color: '#4181c9', width: 2 },
+        itemStyle: { color: '#4181c9' },
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              { offset: 0, color: 'rgba(65,129,201,0.7)' },
+              { offset: 1, color: 'rgba(65,129,201,0.1)' }
+            ]
+          }
+        },
+        symbol: 'emptyCircle',
+        symbolSize: 6
+      }
+    ]
+  })
+}
+
+const initPosCardChart = () => {
+  const el = document.getElementById('posCardChart')
+  if (!el) {
+    return
+  }
+  if (!posCardChart) {
+    posCardChart = echarts.init(el)
+  }
+
+  if (!posCardData.value || posCardData.value.length === 0) {
+    posCardChart.setOption({
+      backgroundColor: 'transparent',
+      title: {
+        text: '近2个月POS机刷卡统计',
+        subtext: '暂无数据',
+        left: 16,
+        top: 10,
+        textStyle: { color: '#e5e7eb', fontSize: 14 },
+        subtextStyle: { color: '#9ca3af', fontSize: 12 }
+      }
+    })
+    return
+  }
+
+  const dates = posCardData.value.map((item) => item.time)
+  const values = posCardData.value.map((item) => Number(item.value) || 0)
+  const totalAmount = values.reduce((sum, val) => sum + val, 0)
+
+  posCardChart.setOption({
+    backgroundColor: 'transparent',
+    title: [
+      {
+        text: '近2个月POS机刷卡统计',
+        left: 16,
+        top: 10,
+        textStyle: { color: '#e5e7eb', fontSize: 14 }
+      },
+      {
+        text: `累计刷卡: ${totalAmount.toFixed(2)} 元`,
+        right: 16,
+        top: 10,
+        textStyle: { color: '#f59e0b', fontSize: 13, fontWeight: 'bold' }
+      }
+    ],
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: { type: 'shadow' },
+      formatter: '{b}<br/>刷卡金额: {c} 元'
+    },
+    grid: {
+      left: 60,
+      right: 30,
+      top: 50,
+      bottom: 30
+    },
+    xAxis: {
+      type: 'category',
+      data: dates,
+      axisLine: { lineStyle: { color: '#9ca3af' } },
+      axisLabel: { color: '#9ca3af', fontSize: 11 }
+    },
+    yAxis: {
+      type: 'value',
+      axisLine: { lineStyle: { color: '#9ca3af' } },
+      axisLabel: { color: '#9ca3af', fontSize: 11 },
+      splitLine: { lineStyle: { color: 'rgba(148,163,184,0.2)' } }
+    },
+    series: [
+      {
+        data: values,
+        type: 'line',
+        smooth: true,
+        lineStyle: { color: '#4181c9', width: 2 },
+        itemStyle: { color: '#4181c9' },
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              { offset: 0, color: 'rgba(65,129,201,0.7)' },
+              { offset: 1, color: 'rgba(65,129,201,0.1)' }
+            ]
+          }
+        },
+        symbol: 'emptyCircle',
+        symbolSize: 6
+      }
+    ]
+  })
+}
+
+const initAllCharts = () => {
+  initAssetStructureChart()
+  initDebtStructureChart()
+  initCreditRiskRadar()
+  initWeeklyExpenseChart()
+  initWeeklyInvestIncomeChart()
+  initCreditBillChart()
+  initLendRepaymentChart()
+  initBalanceChart()
+  initOpenCardChart()
+  initNetAssetTrendChart()
+  initPosCardChart()
+}
+
+const goBackend = () => {
+  router.push('/accountCalendar')
+}
+
+// 数据加载
+const loadAllData = async () => {
+  const today = new Date()
+  const year = today.getFullYear()
+  const month = String(today.getMonth() + 1).padStart(2, '0')
+  const day = String(today.getDate()).padStart(2, '0')
+  const monthStartDay = `${year}-${month}-01`
+  const todayStr = `${year}-${month}-${day}`
+  const monthKey = `${year}-${month}`
+
+  // 计算当月最后一天
+  const lastDayOfMonth = new Date(year, today.getMonth() + 1, 0).getDate()
+  const monthEndDay = `${year}-${month}-${String(lastDayOfMonth).padStart(2, '0')}`
+
+  // 计算近7天的日期
+  const weekAgo = new Date(today)
+  weekAgo.setDate(weekAgo.getDate() - 6)
+  const weekStartDay = `${weekAgo.getFullYear()}-${String(weekAgo.getMonth() + 1).padStart(2, '0')}-${String(weekAgo.getDate()).padStart(2, '0')}`
+
+  try {
+    // 等待所有基础账户接口返回
+    const [debitRes, investRes, lendRes, creditRes, creditReportRes, posRes] = await Promise.all([
+      getDebitAccountsInfo(),
+      getInvestAccountsInfo(),
+      getLendAccountsInfo(),
+      getCreditAccountsInfo(),
+      getCreditReportInfo(),
+      getPosAccountsInfo()
+    ])
+
+    // 所有数据都拿到后，一次性赋值
+    debitTotalBalance.value = debitRes.data.debitTotalBalance || 0
+    debitBalance.value = debitRes.data.debitBalance || 0
+    debitOnlineBalance.value = debitRes.data.debitOnlineBalance || 0
+    storedValueCardBalance.value = debitRes.data.storedValueCardBalance || 0
+    housingFundBalance.value = debitRes.data.housingFundBalance || 0
+    medicalBalance.value = debitRes.data.medicalBalance || 0
+    personalPensionBalance.value = debitRes.data.personalPensionBalance || 0
+    // 储蓄账户数量统计
+    debitICount.value = debitRes.data.debitICount || 0
+    debitIICount.value = debitRes.data.debitIICount || 0
+    debitOnlineCount.value = debitRes.data.debitOnlineCount || 0
+    storedValueCardCount.value = debitRes.data.storedValueCardCount || 0
+
+    investBalance.value = investRes.data.investBalance || 0
+    // 投资账户数量统计
+    stocksCount.value = investRes.data.stocksCount || 0
+    futuresCount.value = investRes.data.futuresCount || 0
+
+    unClearedOnlineDebt.value = lendRes.data.unClearedOnlineDebt || 0
+    peopleLendHistory.value = lendRes.data.peopleLendHistory || 0
+    monthlyLendRepayment.value = lendRes.data.leftOnlineDebt || 0 // 当月待还款
+    unclearedOnlineDebtCount.value = lendRes.data.unclearedOnlineDebtCount || 0
+    unClearedOnlineDebtPrinciple.value = lendRes.data.unClearedOnlineDebtPrinciple || 0
+    unClearedOnlineDebtInterest.value = lendRes.data.unClearedOnlineDebtInterest || 0
+    // 借贷账户数量统计
+    onlineLendCount.value = lendRes.data.onlineLendCount || 0
+    peopleLendCount.value = lendRes.data.peopleLendCount || 0
+
+    creditBalance.value = creditRes.data.creditBalance || 0
+    creditLimit.value = creditRes.data.creditLimit || 0
+    unclearedCreditInstallment.value = creditRes.data.unclearedCreditInstallment || 0
+    unclearedCreditInstallmentPrinciple.value = creditRes.data.unclearedCreditInstallmentPrinciple || 0
+    unclearedCreditInstallmentInterest.value = creditRes.data.unclearedCreditInstallmentInterest || 0
+    unclearedCreditInstallmentCount.value = creditRes.data.unclearedCreditInstallmentCount || 0
+    lastSixMonthUsedRate.value = creditRes.data.lastSixMonthUsedRate || 0
+    lastMonthUsedRate.value = creditRes.data.lastMonthUsedRate || 0
+    creditBillRate.value = creditRes.data.creditBillRate || 0
+    monthlyCreditInstallment.value = creditRes.data.creditInstallment || 0 // 当月分期本息
+    // 信用卡数量统计
+    creditCount.value = creditRes.data.creditCount || 0
+
+    lastThreeMonths.value = creditReportRes.data.lastThreeMonths || 0
+    lastSixMonths.value = creditReportRes.data.lastSixMonths || 0
+    lastOneYears.value = creditReportRes.data.lastOneYears || 0
+    lastTwoYears.value = creditReportRes.data.lastTwoYears || 0
+    lastAllYears.value = creditReportRes.data.lastAllYears || 0
+
+    // POS机数量统计
+    posCount.value = posRes.data.posCount || 0
+
+    // 基础数据加载完成后，再加载统计分析数据
+    await Promise.all([
+      getDailyExpensesAnalysis({
+        type: 1,
+        startTime: monthStartDay,
+        endTime: todayStr,
+        dataType: '1'
+      }).then((res) => {
+        monthlyExpenses.value = (res && res.data && res.data.dailyExpenses) || 0
+      }),
+      getCreditAnalysis({
+        type: 2,
+        startTime: monthKey,
+        endTime: monthKey
+      }).then((res) => {
+        monthlyCreditBill.value = (res && res.data && res.data.actualCreditBill) || 0
+        monthlyCreditAvailable.value = (res && res.data && res.data.creditAvailableLimit) || 0
+      }),
+      getFuturesStocksAnalysis({
+        type: 2,
+        startTime: monthKey,
+        endTime: monthKey
+      }).then((res) => {
+        monthlyInvestIncome.value = (res && res.data && res.data.accumulateIncome) || 0
+      }),
+      getPosAnalysis({
+        type: 1,
+        startTime: monthStartDay,
+        endTime: todayStr
+      }).then((res) => {
+        monthlyPosAmount.value = (res && res.data && res.data.amount) || 0
+        monthlyPosActualAmount.value = (res && res.data && res.data.actualAmount) || 0
+        monthlyPosCount.value = (res && res.data && res.data.count) || 0
+        monthlyPosFee.value = (res && res.data && res.data.commission) || 0
+      }),
+      getAcccountsOutInAnalysis({
+        type: 1,
+        startTime: monthStartDay,
+        endTime: monthEndDay
+      }).then((res) => {
+        monthlyBalance.value = (res && res.data && res.data.balance) || 0
+        monthlyTotalOutcome.value = (res && res.data && res.data.totalOutcome) || 0
+        monthlySalaryIncome.value = (res && res.data && res.data.salaryIncome) || 0
+        monthlyNotDailyExpenses.value = (res && res.data && res.data.notDailyExpenses) || 0
+      }),
+
+      getDebitCardAnalysis({}).then((res) => {
+        monthlyDebitCount.value = (res && res.data && res.data.oneMonthCount) || 0
+        monthlyDebitAmount.value = (res && res.data && res.data.oneMonthAmount) || 0
+      }),
+
+      getCreditRecordsAnalysis({
+        type: 2,
+        startTime: monthKey,
+        endTime: monthKey
+      }).then((res) => {
+        monthlyCreditRecord.value = (res && res.data && res.data.lastOneMonths) || 0
+      }),
+
+      // 获取当月信用卡分期数据
+      getInstallmentHistoryAnalysis({
+        type: 1,
+        startTime: monthStartDay,
+        endTime: monthEndDay,
+        dataType: '2'
+      }).then((res) => {
+        // 使用接口返回的汇总数据
+        const dueDetail = Number(res.data.dueDetail) || 0 // 当期应还本息
+        const dueInterest = Number(res.data.dueInterest) || 0 // 当期利息
+        const duePrincipal = dueDetail - dueInterest // 当期本金 = 本息 - 利息
+
+        monthlyCreditInstallmentPrincipal.value = duePrincipal
+        monthlyCreditInstallmentInterest.value = dueInterest
+      }),
+
+      // 获取当月借贷数据
+      getInstallmentHistoryAnalysis({
+        type: 1,
+        startTime: monthStartDay,
+        endTime: monthEndDay,
+        dataType: '3'
+      }).then((res) => {
+        monthlyLendDue.value = (res && res.data && res.data.dueDetail) || 0
+        monthlyLendRepaid.value = (res && res.data && res.data.repaidDetail) || 0
+        monthlyLendInterest.value = (res && res.data && res.data.dueInterest) || 0
+      })
+    ])
+
+    // 加载信用卡账单数据（近12个月）
+    // 计算11个月前的日期（当月 + 过去11个月 = 近12个月）
+    const billStartDate = new Date(year, today.getMonth() - 11, 1)
+    const billStartMonth = `${billStartDate.getFullYear()}-${String(billStartDate.getMonth() + 1).padStart(2, '0')}`
+    const billEndMonth = monthKey
+
+    await getCreditAnalysis({
+      type: 2,
+      startTime: billStartMonth,
+      endTime: billEndMonth
+    })
+      .then((res) => {
+        if (res && res.data && res.data.creditBillList) {
+          creditBillData.value = res.data.creditBillList
+        }
+      })
+      .catch(() => {})
+
+    // 加载储蓄卡开卡统计数据（近2年，按月统计）
+    const twoYearsAgo = new Date(year, today.getMonth() - 23, 1) // 24个月前
+    const openCardStartMonth = `${twoYearsAgo.getFullYear()}-${String(twoYearsAgo.getMonth() + 1).padStart(2, '0')}`
+    const openCardEndMonth = monthKey
+
+    await getOpenCardList({
+      type: 2,
+      startTime: openCardStartMonth,
+      endTime: openCardEndMonth,
+      dataType: '1'
+    })
+      .then((res) => {
+        if (res && res.data && res.data.debitList) {
+          openCardData.value = res.data.debitList
+        }
+      })
+      .catch(() => {})
+
+    // 加载净资产趋势数据（近15天）
+    const fifteenDaysAgo = new Date(today)
+    fifteenDaysAgo.setDate(today.getDate() - 14) // 包含今天共15天
+    const trendStartDay = `${fifteenDaysAgo.getFullYear()}-${String(fifteenDaysAgo.getMonth() + 1).padStart(2, '0')}-${String(
+      fifteenDaysAgo.getDate()
+    ).padStart(2, '0')}`
+
+    await listDailyLiabilities({
+      startTime: trendStartDay,
+      endTime: todayStr,
+      pageNum: 1,
+      pageSize: 100
+    })
+      .then((res) => {
+        if (res && res.rows) {
+          netAssetTrendData.value = res.rows.slice().reverse() // 倒序，时间从旧到新
+        }
+      })
+      .catch(() => {})
+
+    // 加载POS机刷卡统计数据（近2个月，按日查询）
+    const twoMonthsAgo = new Date(today)
+    twoMonthsAgo.setMonth(today.getMonth() - 2)
+    const posStartDay = `${twoMonthsAgo.getFullYear()}-${String(twoMonthsAgo.getMonth() + 1).padStart(2, '0')}-${String(twoMonthsAgo.getDate()).padStart(
+      2,
+      '0'
+    )}`
+
+    await getPosAnalysis({
+      type: 1,
+      startTime: posStartDay,
+      endTime: todayStr
+    })
+      .then((res) => {
+        if (res && res.data && res.data.posList) {
+          posCardData.value = res.data.posList
+        }
+      })
+      .catch(() => {})
+
+    // 加载贷款还款计划数据（未来6个月，按日期查询）
+    // 计算未来6个月的结束日期
+    const futureDate = new Date(year, today.getMonth() + 3, 0) // 6个月后的最后一天
+    const lendEndDay = `${futureDate.getFullYear()}-${String(futureDate.getMonth() + 1).padStart(2, '0')}-${String(futureDate.getDate()).padStart(2, '0')}`
+
+    try {
+      const res = await getInstallmentHistoryAnalysis({
+        type: 1,
+        startTime: todayStr,
+        endTime: lendEndDay,
+        dataType: '3'
+      })
+      if (res && res.data && res.data.historyDetailList) {
+        lendRepaymentData.value = res.data.historyDetailList
+      }
+    } catch (err) {
+      // 静默处理错误
+    }
+
+    // 加载近一周数据
+
+    // 生成近7天的日期数组（用于图表展示）
+    const weekDates = []
+    for (let i = 6; i >= 0; i--) {
+      const date = new Date(today)
+      date.setDate(date.getDate() - i)
+      weekDates.push(`${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`)
+    }
+
+    // 一次性查询近7天的数据（而不是循环7次）
+    const [weeklyExpenseRes, weeklyInvestRes] = await Promise.all([
+      getDailyExpensesAnalysis({
+        type: 1,
+        startTime: weekStartDay,
+        endTime: todayStr,
+        dataType: '1'
+      }),
+      getAcccountsDealAnalysis({
+        type: 1,
+        startTime: weekStartDay,
+        endTime: todayStr,
+        dataType: '5',
+        dealCategory: '2'
+      })
+    ])
+
+    // 处理近一周支出数据（使用 acccountsDateList 字段）
+    if (weeklyExpenseRes && weeklyExpenseRes.data && weeklyExpenseRes.data.acccountsDateList) {
+      weeklyExpenseData.value = weeklyExpenseRes.data.acccountsDateList.map((item) => ({
+        date: item.time.substring(5), // 只显示 MM-DD
+        value: Number(item.value) || 0
+      }))
+    } else {
+      weeklyExpenseData.value = weekDates.map((date) => ({ date, value: 0 }))
+    }
+
+    // 处理近一周投资收益数据（使用 tableAccountsList 字段）
+    if (weeklyInvestRes && weeklyInvestRes.data && weeklyInvestRes.data.tableAccountsList) {
+      weeklyInvestIncomeData.value = weeklyInvestRes.data.tableAccountsList.map((item) => ({
+        date: item.time.substring(5), // 只显示 MM-DD
+        value: Number(item.value) || 0
+      }))
+    } else {
+      weeklyInvestIncomeData.value = weekDates.map((date) => ({ date, value: 0 }))
+    }
+
+    // 加载近一周账户收支数据
+
+    const weeklyBalanceRes = await getAcccountsOutInAnalysis({
+      type: 1,
+      startTime: weekStartDay,
+      endTime: todayStr
+    })
+
+    // 处理近一周账户收支数据（使用 acccountsList 字段）
+    if (weeklyBalanceRes && weeklyBalanceRes.data && weeklyBalanceRes.data.acccountsList) {
+      weeklyBalanceData.value = weeklyBalanceRes.data.acccountsList.map((item) => ({
+        date: item.time.substring(5), // 只显示 MM-DD
+        value: Number(item.value) || 0
+      }))
+    } else {
+      weeklyBalanceData.value = weekDates.map((date) => ({ date, value: 0 }))
+    }
+
+    // 加载近一月数据
+
+    // 计算近30天的起始日期
+    const monthAgo = new Date(today)
+    monthAgo.setDate(monthAgo.getDate() - 29) // 30天前
+    const month30StartDay = `${monthAgo.getFullYear()}-${String(monthAgo.getMonth() + 1).padStart(2, '0')}-${String(monthAgo.getDate()).padStart(2, '0')}`
+
+    // 查询近30天的数据
+    const [monthlyExpenseRes, monthlyInvestRes] = await Promise.all([
+      getDailyExpensesAnalysis({
+        type: 1,
+        startTime: month30StartDay,
+        endTime: todayStr,
+        dataType: '1'
+      }),
+      getAcccountsDealAnalysis({
+        type: 1,
+        startTime: month30StartDay,
+        endTime: todayStr,
+        dataType: '5',
+        dealCategory: '2'
+      })
+    ])
+
+    // 处理近一月支出数据
+    if (monthlyExpenseRes && monthlyExpenseRes.data && monthlyExpenseRes.data.acccountsDateList) {
+      monthlyExpenseData.value = monthlyExpenseRes.data.acccountsDateList.map((item) => ({
+        date: item.time.substring(5), // 只显示 MM-DD
+        value: Number(item.value) || 0
+      }))
+    } else {
+      monthlyExpenseData.value = []
+    }
+
+    // 处理近一月投资收益数据（使用 tableAccountsList 字段）
+    if (monthlyInvestRes && monthlyInvestRes.data && monthlyInvestRes.data.tableAccountsList) {
+      monthlyInvestIncomeData.value = monthlyInvestRes.data.tableAccountsList.map((item) => ({
+        date: item.time.substring(5), // 只显示 MM-DD
+        value: Number(item.value) || 0
+      }))
+    } else {
+      monthlyInvestIncomeData.value = []
+    }
+
+    // 加载近一月账户收支数据
+
+    const monthlyBalanceRes = await getAcccountsOutInAnalysis({
+      type: 1,
+      startTime: month30StartDay,
+      endTime: todayStr
+    })
+
+    // 处理近一月账户收支数据（使用 acccountsList 字段）
+    if (monthlyBalanceRes && monthlyBalanceRes.data && monthlyBalanceRes.data.acccountsList) {
+      monthlyBalanceData.value = monthlyBalanceRes.data.acccountsList.map((item) => ({
+        date: item.time.substring(5), // 只显示 MM-DD
+        value: Number(item.value) || 0
+      }))
+    } else {
+      monthlyBalanceData.value = []
+    }
+
+    initAllCharts()
+  } catch (error) {
+    // 静默处理错误
+  }
+}
+
+onMounted(() => {
+  updateTime()
+  timer = setInterval(updateTime, 1000)
+  loadAllData()
+  window.addEventListener('resize', initAllCharts)
+})
+
+onBeforeUnmount(() => {
+  if (timer) {
+    clearInterval(timer)
+  }
+  window.removeEventListener('resize', initAllCharts)
+  assetStructureChart && assetStructureChart.dispose()
+  debtStructureChart && debtStructureChart.dispose()
+  creditRiskRadarChart && creditRiskRadarChart.dispose()
+  weeklyExpenseChart && weeklyExpenseChart.dispose()
+  weeklyInvestIncomeChart && weeklyInvestIncomeChart.dispose()
+  creditBillChart && creditBillChart.dispose()
+  lendRepaymentChart && lendRepaymentChart.dispose()
+  balanceChart && balanceChart.dispose()
+  openCardChart && openCardChart.dispose()
+  netAssetTrendChart && netAssetTrendChart.dispose()
+  posCardChart && posCardChart.dispose()
+})
+</script>
+
+<style scoped lang="scss">
+.big-screen {
+  width: 100%;
+  height: 100vh;
+  background: radial-gradient(circle at top, #0f172a 0%, #020617 55%, #020617 100%);
+  color: #e5e7eb;
+  display: flex;
+  flex-direction: column;
+  padding: 16px 20px 80px 20px;
+  box-sizing: border-box;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.bs-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 24px;
+  border-radius: 12px;
+  background: linear-gradient(135deg, rgba(56, 189, 248, 0.12), rgba(129, 140, 248, 0.06));
+  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.7);
+  border: 1px solid rgba(148, 163, 184, 0.4);
+  margin-bottom: 16px;
+  position: relative;
+}
+
+.bs-header-left {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  align-items: flex-start;
+}
+
+.bs-header-center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.bs-header-right {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  justify-content: flex-end;
+}
+
+.bs-title {
+  font-size: 28px;
+  font-weight: 700;
+  letter-spacing: 3px;
+  background: linear-gradient(135deg, #38bdf8, #818cf8);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.bs-subtitle {
+  margin-top: 6px;
+  font-size: 12px;
+  color: #9ca3af;
+  letter-spacing: 1px;
+}
+
+.bs-time-label {
+  font-size: 11px;
+  color: #9ca3af;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.bs-time-value {
+  margin-top: 4px;
+  font-family: 'DIN', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+  font-size: 16px;
+  font-weight: 500;
+  color: #e5e7eb;
+}
+
+.bs-back-btn {
+  position: relative;
+  height: 44px;
+  padding: 0 28px 0 24px;
+  font-size: 15px;
+  font-weight: 600;
+  border-radius: 10px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border: none;
+  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4), 0 8px 25px rgba(118, 75, 162, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
+  cursor: pointer;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+    transition: left 0.6s ease;
+  }
+
+  &:hover {
+    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
+    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5), 0 10px 35px rgba(118, 75, 162, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
+    transform: translateY(-3px) scale(1.02);
+
+    &::before {
+      left: 100%;
+    }
+
+    .bs-back-icon {
+      transform: translateX(4px);
+    }
+  }
+
+  &:active {
+    transform: translateY(-1px) scale(0.98);
+    box-shadow: 0 3px 10px rgba(102, 126, 234, 0.4), 0 5px 20px rgba(118, 75, 162, 0.3);
+  }
+}
+
+.bs-back-btn-shine {
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
+  animation: rotate 8s linear infinite;
+  pointer-events: none;
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.bs-back-btn-content {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  z-index: 1;
+}
+
+.bs-back-icon {
+  font-size: 18px;
+  transition: transform 0.3s ease;
+  font-weight: bold;
+}
+
+.bs-main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.bs-row {
+  display: grid;
+  gap: 16px;
+}
+
+.bs-row-top {
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 16px;
+}
+
+.bs-row-middle {
+  grid-template-columns: 1fr;
+}
+
+.bs-row-weekly {
+  grid-template-columns: 1fr;
+}
+
+.bs-row-credit {
+  grid-template-columns: 1fr;
+}
+
+.bs-monthly-section {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.bs-section-title {
+  font-size: 18px;
+  font-weight: 700;
+  color: #e5e7eb;
+  padding: 8px 16px;
+  background: linear-gradient(135deg, rgba(56, 189, 248, 0.15), rgba(129, 140, 248, 0.08));
+  border-left: 4px solid #38bdf8;
+  border-radius: 8px;
+  letter-spacing: 2px;
+}
+
+.bs-row-bottom {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.bs-cards {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.bs-cards-secondary {
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+}
+
+@media (max-width: 1600px) {
+  .bs-cards-secondary {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 1400px) {
+  .bs-cards-secondary {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 1200px) {
+  .bs-cards-secondary {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+.bs-card {
+  padding: 14px 16px;
+  border-radius: 12px;
+  background: radial-gradient(circle at top left, rgba(56, 189, 248, 0.18), transparent 55%), rgba(15, 23, 42, 0.95);
+  border: 1px solid rgba(148, 163, 184, 0.5);
+  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.8);
+}
+
+.bs-card-label {
+  font-size: 13px;
+  color: #9ca3af;
+  margin-bottom: 6px;
+}
+
+.bs-card-value {
+  font-size: 22px;
+  font-family: 'DIN', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+  font-weight: 700;
+  letter-spacing: 1px;
+  display: flex;
+  align-items: baseline;
+  gap: 4px;
+
+  span {
+    font-size: 13px;
+    color: #9ca3af;
+  }
+}
+
+.bs-card-formula {
+  margin-top: 8px;
+  font-size: 11px;
+  color: #64748b;
+  line-height: 1.5;
+  font-family: ui-sans-serif, system-ui, sans-serif;
+}
+
+.bs-chart {
+  height: 280px;
+  background: radial-gradient(circle at top, rgba(56, 189, 248, 0.16), transparent 60%), #020617;
+  border-radius: 16px;
+  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.75);
+  border: 1px solid rgba(148, 163, 184, 0.45);
+  overflow: hidden;
+}
+
+.bs-chart-wrapper {
+  position: relative;
+  background: radial-gradient(circle at top, rgba(56, 189, 248, 0.16), transparent 60%), #020617;
+  border-radius: 16px;
+  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.75);
+  border: 1px solid rgba(148, 163, 184, 0.45);
+  overflow: hidden;
+
+  .bs-chart {
+    height: 280px;
+    background: transparent;
+    border: none;
+    box-shadow: none;
+    border-radius: 0;
+  }
+}
+
+.bs-chart-tabs {
+  display: flex;
+  padding: 8px 12px 0;
+  gap: 4px;
+}
+
+.bs-chart-tab {
+  padding: 6px 16px;
+  font-size: 13px;
+  color: #9ca3af;
+  cursor: pointer;
+  border-radius: 6px 6px 0 0;
+  transition: all 0.3s ease;
+  user-select: none;
+
+  &:hover {
+    color: #e5e7eb;
+    background: rgba(148, 163, 184, 0.1);
+  }
+
+  &.active {
+    color: #38bdf8;
+    background: rgba(56, 189, 248, 0.15);
+    font-weight: 600;
+  }
+}
+
+@media (max-width: 1400px) {
+  .bs-row-top {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .bs-row-bottom {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    .bs-chart:last-child {
+      grid-column: span 2;
+    }
+  }
+}
+
+@media (max-width: 1024px) {
+  .big-screen {
+    padding: 12px;
+  }
+
+  .bs-row-top {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .bs-row-bottom {
+    grid-template-columns: 1fr;
+  }
+
+  .bs-chart {
+    height: 260px;
+  }
+}
+</style>