You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
397 lines
14 KiB
397 lines
14 KiB
<template>
|
|
<div class="h-full">
|
|
<q-splitter v-model="state.splitterModel" horizontal class="h-full">
|
|
<template #before>
|
|
<w-grid
|
|
ref="rptRatingDistributionGridRef"
|
|
title="客户评级分布列表"
|
|
:data-url="Environment.apiContextPath('api/irbs/rptRatingDistribution/list')"
|
|
:sort-no="true"
|
|
:dense="true"
|
|
:checkbox-selection="false"
|
|
:query-form-cols-num="3"
|
|
:query-form-fields="rptRatingDistributionGrid.queryFormFields"
|
|
:columns="rptRatingDistributionGrid.columns"
|
|
:toolbar-actions="rptRatingDistributionGrid.buttons"
|
|
:pageable="false"
|
|
@after-request-data="afterRequestData"
|
|
></w-grid>
|
|
</template>
|
|
<template #after>
|
|
<div class="h-full">
|
|
<q-splitter v-model="state.echartsSplitterModel" unit="px" horizontal disable class="w-full h-full">
|
|
<template #before>
|
|
<q-tabs v-model="state.tab" inline-label indicator-color="primary" align="left" :breakpoint="1">
|
|
<q-tab name="cust" icon="account_box" label="全部客户" />
|
|
<q-tab name="creditBalance" icon="currency_yen" label="信贷余额" />
|
|
</q-tabs>
|
|
</template>
|
|
<template #after>
|
|
<q-tab-panels
|
|
v-model="state.tab"
|
|
:keep-alive="true"
|
|
animated
|
|
swipeable
|
|
vertical
|
|
transition-prev="jump-up"
|
|
transition-next="jump-up"
|
|
class="w-full h-full"
|
|
>
|
|
<q-tab-panel name="cust" class="w-full h-full p-0">
|
|
<w-echarts
|
|
:option="{
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow',
|
|
},
|
|
},
|
|
toolbox: {
|
|
feature: {
|
|
saveAsImage: { show: true },
|
|
},
|
|
},
|
|
legend: {
|
|
data: ['客户数', '本月新增客户数', '违约客户数', '占比', '本月新增占比', '违约占比'],
|
|
},
|
|
grid: {
|
|
top: '15%',
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: state.xData,
|
|
axisTick: {
|
|
alignWithLabel: true,
|
|
},
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
},
|
|
{
|
|
type: 'value',
|
|
interval: 10,
|
|
axisLabel: {
|
|
formatter: '{value} %',
|
|
},
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: '客户数',
|
|
type: 'bar',
|
|
barWidth: '20%',
|
|
data: state.custData.number,
|
|
},
|
|
{
|
|
name: '占比',
|
|
type: 'line',
|
|
yAxisIndex: 1,
|
|
data: state.custData.ratio,
|
|
},
|
|
{
|
|
name: '本月新增客户数',
|
|
type: 'bar',
|
|
barWidth: '20%',
|
|
data: state.custData.addNumber,
|
|
},
|
|
{
|
|
name: '本月新增占比',
|
|
type: 'line',
|
|
yAxisIndex: 1,
|
|
data: state.custData.addRatio,
|
|
},
|
|
{
|
|
name: '违约客户数',
|
|
type: 'bar',
|
|
barWidth: '20%',
|
|
data: state.custData.defaultNumber,
|
|
},
|
|
{
|
|
name: '违约占比',
|
|
type: 'line',
|
|
yAxisIndex: 1,
|
|
data: state.custData.defaultRatio,
|
|
},
|
|
],
|
|
}"
|
|
></w-echarts>
|
|
</q-tab-panel>
|
|
<q-tab-panel name="creditBalance" class="w-full h-full p-0">
|
|
<w-echarts
|
|
:option="{
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow',
|
|
},
|
|
},
|
|
toolbox: {
|
|
feature: {
|
|
saveAsImage: { show: true },
|
|
},
|
|
},
|
|
legend: {
|
|
data: ['信贷余额', '占比'],
|
|
},
|
|
grid: {
|
|
top: '15%',
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: state.xData,
|
|
axisTick: {
|
|
alignWithLabel: true,
|
|
},
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
},
|
|
{
|
|
type: 'value',
|
|
interval: 10,
|
|
axisLabel: {
|
|
formatter: '{value} %',
|
|
},
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: '信贷余额',
|
|
type: 'bar',
|
|
barWidth: '20%',
|
|
data: state.custData.creditBalance,
|
|
},
|
|
{
|
|
name: '占比',
|
|
type: 'line',
|
|
yAxisIndex: 1,
|
|
data: state.custData.creditRatio,
|
|
},
|
|
],
|
|
}"
|
|
></w-echarts>
|
|
</q-tab-panel>
|
|
</q-tab-panels>
|
|
</template>
|
|
</q-splitter>
|
|
</div>
|
|
</template>
|
|
</q-splitter>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { Round } from '@/views/custRating/CustRating.ts';
|
|
import { axios, Environment, Formater } from 'platform-core';
|
|
import { useQuasar } from 'quasar';
|
|
import { reactive, ref } from 'vue';
|
|
|
|
const $q = useQuasar();
|
|
const rptRatingDistributionGridRef = ref();
|
|
const state = reactive({
|
|
splitterModel: 60,
|
|
echartsSplitterModel: 50,
|
|
tab: 'cust',
|
|
xData: <any>[],
|
|
custData: {
|
|
number: <any>[],
|
|
ratio: <any>[],
|
|
addNumber: <any>[],
|
|
addRatio: <any>[],
|
|
defaultNumber: <any>[],
|
|
defaultRatio: <any>[],
|
|
creditBalance: <any>[],
|
|
creditRatio: <any>[],
|
|
},
|
|
});
|
|
|
|
const afterRequestData = () => {
|
|
const rows = rptRatingDistributionGridRef.value.getRows();
|
|
state.xData = [];
|
|
state.custData.number = [];
|
|
state.custData.ratio = [];
|
|
state.custData.addNumber = [];
|
|
state.custData.addRatio = [];
|
|
state.custData.defaultNumber = [];
|
|
state.custData.defaultRatio = [];
|
|
state.custData.creditBalance = [];
|
|
state.custData.creditRatio = [];
|
|
rows.forEach((item) => {
|
|
state.xData.push(item['ratingLevel']);
|
|
state.custData.number.push(item['custCnt']);
|
|
state.custData.ratio.push(item['custRatio'] && typeof item['custRatio'] === 'number' ? Round(item['custRatio'] * 100, 2) : 0);
|
|
state.custData.addNumber.push(item['currInctCnt']);
|
|
state.custData.addRatio.push(item['currInctRatio'] && typeof item['currInctRatio'] === 'number' ? Round(item['currInctRatio'] * 100, 2) : 0);
|
|
state.custData.defaultNumber.push(item['defCustCnt']);
|
|
state.custData.defaultRatio.push(item['defCustRatio'] && typeof item['defCustRatio'] === 'number' ? Round(item['defCustRatio'] * 100, 2) : 0);
|
|
state.custData.creditBalance.push(item['borrBal']);
|
|
state.custData.creditRatio.push(item['borrBalRatio'] && typeof item['borrBalRatio'] === 'number' ? Round(item['borrBalRatio'] * 100, 2) : 0);
|
|
});
|
|
};
|
|
|
|
const rptRatingDistributionGrid = {
|
|
buttons: [
|
|
{
|
|
extend: 'query',
|
|
click: () => {
|
|
const QueryParams = rptRatingDistributionGridRef.value.getQueryForm().getData();
|
|
axios.get(Environment.apiContextPath('api/irbs/rptRatingDistribution/list'), { params: QueryParams }).then((resp) => {
|
|
rptRatingDistributionGridRef.value.setLocalData(resp.data);
|
|
});
|
|
},
|
|
},
|
|
'reset',
|
|
'separator',
|
|
'export',
|
|
'separator',
|
|
],
|
|
queryFormFields: [
|
|
{ label: '报表日期', name: 'ratingMonth', type: 'date', defaultValue: '2023-07-01' },
|
|
{
|
|
label: '模型敞口',
|
|
name: 'modelCode',
|
|
type: 'select',
|
|
options: [
|
|
{ value: 'WHM1', label: '政府投融资平台' },
|
|
{ value: 'WHM2', label: '事业单位' },
|
|
{ value: 'WHM3', label: '银行类金融机构' },
|
|
{ value: 'WHM41', label: '金融租赁与消费金融公司' },
|
|
{ value: 'WHM42', label: '证券公司' },
|
|
{ value: 'WHM43', label: '其他非银行金融机构' },
|
|
{ value: 'WHM44', label: '基金公司' },
|
|
{ value: 'WHM5', label: '新建企业' },
|
|
{ value: 'WHM6', label: '综合性集团' },
|
|
{ value: 'WHM7', label: '大型其他行业' },
|
|
{ value: 'WHM8', label: '中小微其他行业' },
|
|
{ value: 'WHM9', label: '大中型租赁和商务服务行业' },
|
|
{ value: 'WHM10', label: '小微租赁和商务服务业' },
|
|
{ value: 'WHM12', label: '房地产业' },
|
|
{ value: 'WHM13', label: '大中型农林牧渔业' },
|
|
{ value: 'WHM14', label: '小微农林牧渔业' },
|
|
{ value: 'WHM15', label: '大型建筑业' },
|
|
{ value: 'WHM16', label: '中小微建筑业' },
|
|
{ value: 'WHM17', label: '大中型制造业' },
|
|
{ value: 'WHM18', label: '小微制造业' },
|
|
{ value: 'WHM19', label: '大中型批发和零售业' },
|
|
{ value: 'WHM20', label: '小微批发和零售业' },
|
|
{ value: 'WHM22', label: '科技行业' },
|
|
],
|
|
},
|
|
{
|
|
label: '分支机构',
|
|
name: 'managerOrgCode',
|
|
type: 'select',
|
|
options: [
|
|
{ value: '01002', label: '总行营业部' },
|
|
{ value: '01003', label: 'JJJS开发区支行' },
|
|
{ value: '01005', label: 'XF支行' },
|
|
{ value: '01006', label: 'GCZ支行' },
|
|
{ value: '01007', label: 'ZL支行' },
|
|
{ value: '01008', label: 'HKJ支行' },
|
|
{ value: '01009', label: 'HL支行' },
|
|
{ value: '01010', label: 'LJ支行' },
|
|
{ value: '01012', label: 'GG分行' },
|
|
{ value: '01013', label: 'ZY支行' },
|
|
{ value: '01014', label: 'ZD支行' },
|
|
{ value: '01015', label: 'HK支行' },
|
|
{ value: '01016', label: 'DS支行' },
|
|
{ value: '01017', label: 'LF支行' },
|
|
{ value: '01018', label: 'GS支行' },
|
|
{ value: '01019', label: 'LX支行' },
|
|
{ value: '01020', label: 'BX支行' },
|
|
{ value: '01021', label: 'ZQ支行' },
|
|
{ value: '01022', label: 'JF支行' },
|
|
{ value: '01023', label: 'CC支行' },
|
|
{ value: '01024', label: 'LQ支行' },
|
|
{ value: '01025', label: 'DH支行' },
|
|
{ value: '01027', label: 'SGH支行' },
|
|
],
|
|
},
|
|
],
|
|
columns: [
|
|
{ label: '评级等级', name: 'ratingLevel', align: 'center' },
|
|
{
|
|
label: '全部客户',
|
|
name: 'totalCustHeader',
|
|
columns: [
|
|
{ label: '客户数', name: 'custCnt', align: 'center' },
|
|
{
|
|
label: '占比',
|
|
name: 'custRatio',
|
|
align: 'center',
|
|
format: (val) => {
|
|
if (val && typeof val === 'number') {
|
|
return Round(val * 100, 2) + '%';
|
|
}
|
|
return val;
|
|
},
|
|
},
|
|
],
|
|
},
|
|
{
|
|
label: '本月新增客户',
|
|
name: 'currInctCustHeader',
|
|
columns: [
|
|
{ label: '客户数', name: 'currInctCnt', align: 'center' },
|
|
{
|
|
label: '占比',
|
|
name: 'currInctRatio',
|
|
align: 'center',
|
|
format: (val) => {
|
|
if (val && typeof val === 'number') {
|
|
return Round(val * 100, 2) + '%';
|
|
}
|
|
return val;
|
|
},
|
|
},
|
|
],
|
|
},
|
|
{
|
|
label: '违约客户',
|
|
name: 'defCustHeader',
|
|
columns: [
|
|
{ label: '客户数', name: 'defCustCnt', align: 'center' },
|
|
{
|
|
label: '违约率',
|
|
name: 'defCustRatio',
|
|
align: 'center',
|
|
format: (val) => {
|
|
if (val && typeof val === 'number') {
|
|
return Round(val * 100, 2) + '%';
|
|
}
|
|
return val;
|
|
},
|
|
},
|
|
],
|
|
},
|
|
{
|
|
label: '信贷余额',
|
|
name: 'borrBalHeader',
|
|
columns: [
|
|
{ label: '余额', name: 'borrBal', align: 'center', format: Formater.thousands() },
|
|
{
|
|
label: '占比',
|
|
name: 'borrBalRatio',
|
|
align: 'center',
|
|
format: (val) => {
|
|
if (val && typeof val === 'number') {
|
|
return Round(val * 100, 2) + '%';
|
|
}
|
|
return val;
|
|
},
|
|
},
|
|
],
|
|
},
|
|
],
|
|
};
|
|
</script>
|
|
|