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.
350 lines
13 KiB
350 lines
13 KiB
<template>
|
|
<div class="h-full">
|
|
<q-splitter v-model="state.splitterModel" horizontal class="h-full">
|
|
<template #before>
|
|
<w-grid
|
|
ref="rptRatingAdjustGridRef"
|
|
title="客户评级特例调整情况报表"
|
|
:data-url="Environment.apiContextPath('api/irbs/rptRatingAdjust/list')"
|
|
:sort-no="true"
|
|
:checkbox-selection="false"
|
|
:query-form-cols-num="4"
|
|
:query-form-fields="rptRatingAdjustGrid.queryFormFields"
|
|
:columns="rptRatingAdjustGrid.columns"
|
|
:toolbar-actions="rptRatingAdjustGrid.buttons"
|
|
:pageable="false"
|
|
:dense="true"
|
|
@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="range" icon="text_rotation_angleup" 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: '10%',
|
|
label: {
|
|
show: true, //开启显示
|
|
position: 'top', //在上方显示
|
|
textStyle: {
|
|
//数值样式
|
|
color: 'black', //字体颜色
|
|
fontSize: 10, //字体大小
|
|
},
|
|
},
|
|
emphasis: {
|
|
focus: 'series',
|
|
},
|
|
data: state.custData.ratingCnt,
|
|
},
|
|
{
|
|
name: '调整客户数',
|
|
type: 'bar',
|
|
barWidth: '10%',
|
|
label: {
|
|
show: true, //开启显示
|
|
position: 'top', //在上方显示
|
|
textStyle: {
|
|
//数值样式
|
|
color: 'black', //字体颜色
|
|
fontSize: 10, //字体大小
|
|
},
|
|
},
|
|
emphasis: {
|
|
focus: 'series',
|
|
},
|
|
data: state.custData.overturnCnt,
|
|
},
|
|
{
|
|
name: '调整占比',
|
|
type: 'line',
|
|
yAxisIndex: 1,
|
|
data: state.custData.overturnRatio,
|
|
},
|
|
],
|
|
}"
|
|
></w-echarts>
|
|
</q-tab-panel>
|
|
<q-tab-panel name="range" class="w-full h-full p-0">
|
|
<w-echarts
|
|
:option="{
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow',
|
|
},
|
|
},
|
|
toolbox: {
|
|
feature: {
|
|
saveAsImage: { show: true },
|
|
},
|
|
},
|
|
legend: {
|
|
data: ['1级', '2级', '3级', '3级以上'],
|
|
},
|
|
grid: {
|
|
top: '15%',
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: state.xData,
|
|
axisTick: {
|
|
alignWithLabel: true,
|
|
},
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
interval: 10,
|
|
axisLabel: {
|
|
formatter: '{value} %',
|
|
},
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: '1级',
|
|
type: 'line',
|
|
data: state.range.l1,
|
|
},
|
|
{
|
|
name: '2级',
|
|
type: 'line',
|
|
data: state.range.l2,
|
|
},
|
|
{
|
|
name: '3级',
|
|
type: 'line',
|
|
data: state.range.l3,
|
|
},
|
|
{
|
|
name: '3级以上',
|
|
type: 'line',
|
|
data: state.range.ln,
|
|
},
|
|
],
|
|
}"
|
|
></w-echarts>
|
|
</q-tab-panel>
|
|
</q-tab-panels>
|
|
</template>
|
|
</q-splitter>
|
|
</div>
|
|
</template>
|
|
</q-splitter>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, reactive } from 'vue';
|
|
import { useQuasar } from 'quasar';
|
|
import { Environment, EnumTools, DictionaryTools, Options, Formater, axios, NotifyManager } from 'platform-core';
|
|
import { Round, RatioFormat } from '@/views/custRating/CustRating.ts';
|
|
|
|
const $q = useQuasar();
|
|
const rptRatingAdjustGridRef = ref();
|
|
|
|
const state = reactive({
|
|
splitterModel: 55,
|
|
echartsSplitterModel: 50,
|
|
tab: 'cust',
|
|
xData: <any>[],
|
|
custData: {
|
|
ratingCnt: <any>[],
|
|
overturnCnt: <any>[],
|
|
overturnRatio: <any>[],
|
|
},
|
|
range: {
|
|
l1: <any>[],
|
|
l2: <any>[],
|
|
l3: <any>[],
|
|
ln: <any>[],
|
|
},
|
|
});
|
|
|
|
const afterRequestData = (args) => {
|
|
state.xData = [];
|
|
state.custData.ratingCnt = [];
|
|
state.custData.overturnCnt = [];
|
|
state.custData.overturnRatio = [];
|
|
state.range.l1 = [];
|
|
state.range.l2 = [];
|
|
state.range.l3 = [];
|
|
state.range.ln = [];
|
|
if (args.rows && args.rows.length > 0) {
|
|
args.rows.forEach((item) => {
|
|
state.xData.push(item['ratingMonth']);
|
|
state.custData.ratingCnt.push(item['custCnt']);
|
|
state.custData.overturnCnt.push(item['adjCnt']);
|
|
state.custData.overturnRatio.push(item['adjRatio'] && typeof item['adjRatio'] === 'number' ? Round(item['adjRatio'] * 100, 2) : 0);
|
|
state.range.l1.push(item['oneLvlRatio'] && typeof item['oneLvlRatio'] === 'number' ? Round(item['oneLvlRatio'] * 100, 2) : 0);
|
|
state.range.l2.push(item['twoLvlRatio'] && typeof item['twoLvlRatio'] === 'number' ? Round(item['twoLvlRatio'] * 100, 2) : 0);
|
|
state.range.l3.push(item['threeLvlRatio'] && typeof item['threeLvlRatio'] === 'number' ? Round(item['threeLvlRatio'] * 100, 2) : 0);
|
|
state.range.ln.push(item['threeMoreLvlRatio'] && typeof item['threeMoreLvlRatio'] === 'number' ? Round(item['threeMoreLvlRatio'] * 100, 2) : 0);
|
|
});
|
|
}
|
|
};
|
|
|
|
const rptRatingAdjustGrid = {
|
|
buttons: [
|
|
{
|
|
extend: 'query',
|
|
click: () => {
|
|
const QueryParams = rptRatingAdjustGridRef.value.getQueryForm().getData();
|
|
axios.get(Environment.apiContextPath('api/irbs/rptRatingAdjust/list'), { params: QueryParams }).then((resp) => {
|
|
rptRatingAdjustGridRef.value.setLocalData(resp.data);
|
|
});
|
|
},
|
|
},
|
|
'reset',
|
|
'separator',
|
|
'export',
|
|
'separator',
|
|
],
|
|
queryFormFields: [
|
|
{ label: '报表日期', name: 'ratingMonth', type: 'w-date', defaultValue: '2023-07-01' },
|
|
{
|
|
label: '模型敞口',
|
|
name: 'modelCode',
|
|
type: 'w-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: 'w-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: 'ratingMonth', align: 'center' },
|
|
{ label: '评级客户数', name: 'custCnt', align: 'center' },
|
|
{ label: '调整客户数', name: 'adjCnt', align: 'center' },
|
|
{ label: '调整客户占比', name: 'adjRatio', align: 'center', format: RatioFormat },
|
|
{
|
|
label: '调整级别',
|
|
name: 'adjustLevelHeader',
|
|
columns: [
|
|
{ label: '1级', name: 'oneLvlRatio', format: RatioFormat },
|
|
{ label: '2级', name: 'twoLvlRatio', format: RatioFormat },
|
|
{ label: '3级', name: 'threeLvlRatio', format: RatioFormat },
|
|
{ label: '3级以上', name: 'threeMoreLvlRatio', format: RatioFormat },
|
|
],
|
|
},
|
|
],
|
|
};
|
|
</script>
|
|
|