xh-client-background/bak/home.vue

<template>
  <div class="dashboard">
    <el-container>
      <el-main>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-card class="box-card">
              <template #header>
                <div class="card-header">
                  <span>{{lastYear+'年'}}贷款总额</span>
                </div>
              </template>
              <div class="card-content">
                <h2>¥ {{ formatNumber(loanAmount) }}万元</h2>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="box-card">
              <template #header>
                <div class="card-header">
                  <span>{{lastYear+'年'}}税收总额</span>
                </div>
              </template>
              <div class="card-content">
                <h2>¥ {{ formatNumber(taxAmount) }}</h2>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="box-card">
              <template #header>
                <div class="card-header">
                  <span>企业总数</span>
                </div>
              </template>
              <div class="card-content">
                <h2>{{ formatNumber(totalCompanies)+"家" }}</h2>
              </div>
            </el-card>
          </el-col>
        </el-row>

        <el-row :gutter="20" class="mt-4">
          <el-col :span="12">
            <el-card class="box-card">
              <template #header>
                <div class="card-header">
                  <span>企业评级分布</span>
                </div>
              </template>
              <div class="chart-container" ref="pieChartContainer"></div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="box-card">
              <template #header>
                <div class="card-header">
                  <span>企业评级数量</span>
                </div>
              </template>
              <el-descriptions :column="1" border>
                <el-descriptions-item label="AAA">
                  {{ companyRatings.AAA || 0 }}
                </el-descriptions-item>
                <el-descriptions-item label="AA">
                  {{ companyRatings.AA || 0 }}
                </el-descriptions-item>
                <el-descriptions-item label="A">
                  {{ companyRatings.A || 0 }}
                </el-descriptions-item>
                <el-descriptions-item label="B">
                  {{ companyRatings.B || 0 }}
                </el-descriptions-item>
                <el-descriptions-item label="C">
                  {{ companyRatings.C || 0 }}
                </el-descriptions-item>
                <el-descriptions-item label="D">
                  {{ companyRatings.D || 0 }}
                </el-descriptions-item>
              </el-descriptions>
            </el-card>
          </el-col>
        </el-row>

        <el-row :gutter="20" class="mt-4">
          <el-col :span="24">
            <el-card class="box-card">
              <template #header>
                <div class="card-header">
                  <span>快速链接</span>
                </div>
              </template>
              <div class="quick-links">
                <el-link @click="()=>{router.push('/qyxypj/xypjdj')}">
                  <el-image src="/信用报告.png" fit="cover" class="link-image">
                    <template #error>
                      <div class="image-slot">
                        企业信用评价等级图片
                      </div>
                    </template>
                  </el-image>
                  <span>企业信用评价等级</span>
                </el-link>
                <el-link @click="()=>{router.push('/qyxypj/qypjdf')}">
                  <el-image src="/得分记录.png" fit="cover" class="link-image">
                    <template #error>
                      <div class="image-slot">
                        企业评价得分图片
                      </div>
                    </template>
                  </el-image>
                  <span>企业评价得分</span>
                </el-link>
                <el-link @click="()=>{router.push('/qyjydtfx/dkfx')}">
                  <el-image src="/委托贷款放款.png" fit="cover" class="link-image">
                    <template #error>
                      <div class="image-slot">
                        贷款分析图片
                      </div>
                    </template>
                  </el-image>
                  <span>贷款分析</span>
                </el-link>
                <el-link @click="()=>{router.push('/qyjydtfx/ssfx')}">
                  <el-image src="/总税收.png" fit="cover" class="link-image">
                    <template #error>
                      <div class="image-slot">
                        税收分析图片
                      </div>
                    </template>
                  </el-image>
                  <span>税收分析</span>
                </el-link>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import request from "@/utils/request.js";
import {useRouter} from "vue-router";

const lastYear = new Date().getFullYear() - 1;
const currentYear = new Date().getFullYear()

const router = useRouter();
// 静态数据
const loanAmount = ref(0)
const taxAmount = ref(0)
const companyRatings = ref({
  AAA: 0,
  AA: 0,
  A: 0,
  B: 0,
  C: 0,
  D: 0
})

const totalCompanies = ref(0)

// 格式化数字
const formatNumber = (num) => {
  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
}

// 初始化图表
let pieChart

onMounted(() => {

})

const initPieChart = () => {
  const chartDom = document.querySelector('.chart-container')
  pieChart = echarts.init(chartDom)
  const option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'horizontal',
      left: 'center',
      top: 'bottom'
    },
    series: [
      {
        name: '企业评级',
        type: 'pie',
        radius: '50%',
        data: Object.entries(companyRatings.value).map(([key, value]) => ({ name: key, value })),
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  pieChart.setOption(option)
}

const getDkze =async ()=>{
  const res = await request.get('/basicData/xcrSummaryLoanDetails/annual-statistics',{
    params:{
      year:lastYear
    }
  });
  loanAmount.value = res.data.totalLoanAmount;
}

const getSsze =async ()=>{
  const res = await request.get('/basicData/xcrPayTaxes/of-year-list');
  taxAmount.value = res.data.ofYearDetail.reduce((acc, cur) => acc + cur.lastYearTaxesTotal, 0).toFixed(2);
}

const getQypf = async ()=>{
  const res = await request.get('/basicData/xcrEBaseinfo/getCreditScoreList',{
    params:{
      pageNum: 1,
      pageSize: 9999,
      condition: ['AAA', 'AA', 'A', 'B', 'C', 'D'].join(',')
    }
  });
  totalCompanies.value = res.data.totalSize;
  // res.data.result是数组将其中的grade属性=AAA AA A B C D 的企业拿出来赋值出去
  companyRatings.value = res.data.result.reduce((acc, cur) => {
    acc[cur.grade] = (acc[cur.grade] || 0) + 1;
    return acc;
  }, {});
  initPieChart()
}

const getData = ()=>{
  getDkze()
  getSsze()
  getQypf()
}
onMounted(()=>{
  getData();
})
</script>

<style scoped>
.dashboard {
  font-family: 'Arial', sans-serif;
  background-color: #f0f2f5;
  min-height: 100vh;
}

.el-header {
  background-color: #1890ff;
  color: white;
  line-height: 60px;
  text-align: center;
}

.el-main {
  padding: 20px;
}

.box-card {
  margin-bottom: 20px;
  transition: all 0.3s;
  height: 100%;
}

.box-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-5px);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-content {
  text-align: center;
  font-size: 24px;
  color: #1890ff;
}

.chart-container {
  height: 400px;
}

h1 {
  margin: 0;
  font-size: 24px;
}

h2 {
  margin: 0;
  font-size: 36px;
  color: #1890ff;
}

.quick-links {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 20px;
}

.el-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #1890ff;
  transition: all 0.3s;
}

.el-link:hover {
  transform: translateY(-5px);
}

.link-image {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: hidden;
}

.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  color: #909399;
  font-size: 14px;
}
</style>