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.
466 lines
17 KiB
466 lines
17 KiB
<template>
|
|
<div class="h-full">
|
|
<q-splitter v-model="state.splitterModel" horizontal class="h-full">
|
|
<template #before>
|
|
<w-grid
|
|
ref="rptRatingIndustryFocusDistGridRef"
|
|
title="客户评级行业集中度分布报表"
|
|
:data-url="Environment.apiContextPath('api/irbs/rptRatingIndustryFocusDist/list')"
|
|
:sort-no="true"
|
|
:checkbox-selection="false"
|
|
:query-form-cols-num="4"
|
|
:query-form-fields="rptRatingIndustryFocusDistGrid.queryFormFields"
|
|
:columns="rptRatingIndustryFocusDistGrid.tableColumns"
|
|
:toolbar-actions="rptRatingIndustryFocusDistGrid.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="ratio" icon="timelapse" 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: state.legendData,
|
|
},
|
|
dataZoom: [
|
|
{
|
|
type: 'slider',
|
|
show: true, // 是否显示滚动条
|
|
borderColor: '#e3e3e3', // 边框颜色
|
|
showDetail: false, // 是否显示detail，即拖拽时显示详细数值信息
|
|
startValue: 0, // 开始数值
|
|
endValue: 8, // 结束数值
|
|
filterMode: 'empty',
|
|
width: '80%', // 滚动条宽度
|
|
height: 8, // 滚动条高度
|
|
left: 'center', // 居中显示
|
|
zoomLoxk: true, // 是否锁定选择区域的大小
|
|
handleSize: 0, // 控制手柄的尺寸
|
|
bottom: 0, // 距离容器下侧的距离
|
|
},
|
|
{
|
|
type: 'inside',
|
|
zoomOnMouseWheel: false, // 滚动不触发缩放
|
|
moveOnMouseMove: true, // 鼠标移动触发平移
|
|
moveOnMouseWheel: true, // 鼠标滚动触发平移
|
|
},
|
|
],
|
|
grid: {
|
|
top: '15%',
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: state.xData,
|
|
axisLabel: {
|
|
//x轴文字的配置
|
|
show: true,
|
|
interval: 0, //使x轴文字显示全
|
|
rotate: 10,
|
|
},
|
|
axisTick: {
|
|
alignWithLabel: true,
|
|
},
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
},
|
|
// {
|
|
// type: 'value',
|
|
// interval: 10,
|
|
// axisLabel: {
|
|
// formatter: '{value} %',
|
|
// },
|
|
// },
|
|
],
|
|
series: state.seriesData,
|
|
}"
|
|
></w-echarts>
|
|
</q-tab-panel>
|
|
<q-tab-panel name="ratio" class="w-full h-full p-0">
|
|
<w-echarts
|
|
:option="{
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow',
|
|
},
|
|
},
|
|
toolbox: {
|
|
feature: {
|
|
saveAsImage: { show: true },
|
|
},
|
|
},
|
|
legend: {
|
|
data: state.ratioSeriesData,
|
|
},
|
|
dataZoom: [
|
|
{
|
|
type: 'slider',
|
|
show: true, // 是否显示滚动条
|
|
borderColor: '#e3e3e3', // 边框颜色
|
|
showDetail: false, // 是否显示detail，即拖拽时显示详细数值信息
|
|
startValue: 0, // 开始数值
|
|
endValue: 8, // 结束数值
|
|
filterMode: 'empty',
|
|
width: '80%', // 滚动条宽度
|
|
height: 8, // 滚动条高度
|
|
left: 'center', // 居中显示
|
|
zoomLoxk: true, // 是否锁定选择区域的大小
|
|
handleSize: 0, // 控制手柄的尺寸
|
|
bottom: 0, // 距离容器下侧的距离
|
|
},
|
|
{
|
|
type: 'inside',
|
|
zoomOnMouseWheel: false, // 滚动不触发缩放
|
|
moveOnMouseMove: true, // 鼠标移动触发平移
|
|
moveOnMouseWheel: true, // 鼠标滚动触发平移
|
|
},
|
|
],
|
|
grid: {
|
|
top: '15%',
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: state.xData,
|
|
axisLabel: {
|
|
//x轴文字的配置
|
|
show: true,
|
|
interval: 0, //使x轴文字显示全
|
|
rotate: 10,
|
|
},
|
|
axisTick: {
|
|
alignWithLabel: true,
|
|
},
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
interval: 10,
|
|
axisLabel: {
|
|
formatter: '{value} %',
|
|
},
|
|
},
|
|
],
|
|
series: state.ratioSeriesData,
|
|
}"
|
|
></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 rptRatingIndustryFocusDistGridRef = ref();
|
|
|
|
const state = reactive({
|
|
splitterModel: 55,
|
|
echartsSplitterModel: 50,
|
|
tab: 'cust',
|
|
legendData: <any>[],
|
|
xData: <any>[],
|
|
seriesData: <any>[],
|
|
ratioLegendData: <any>[],
|
|
ratioSeriesData: <any>[],
|
|
});
|
|
|
|
const afterRequestData = (data) => {
|
|
if (data && data.length > 0) {
|
|
state.xData = [];
|
|
state.seriesData = [];
|
|
state.legendData = [];
|
|
state.ratioSeriesData = [];
|
|
const ratingLevel = <any>[];
|
|
const totalData = {};
|
|
for (let i = 1; i < rptRatingIndustryFocusDistGrid.tableColumns.length; i++) {
|
|
ratingLevel.push([
|
|
rptRatingIndustryFocusDistGrid.tableColumns[i]['label'],
|
|
[rptRatingIndustryFocusDistGrid.tableColumns[i]['columns'][0]['name'], rptRatingIndustryFocusDistGrid.tableColumns[i]['columns'][1]['name']],
|
|
]);
|
|
totalData[rptRatingIndustryFocusDistGrid.tableColumns[i]['columns'][0]['name']] = [];
|
|
totalData[rptRatingIndustryFocusDistGrid.tableColumns[i]['columns'][1]['name']] = [];
|
|
}
|
|
data.forEach((item) => {
|
|
state.xData.push(item['industryName']);
|
|
|
|
Object.keys(totalData).forEach((key) => {
|
|
if (key.indexOf('Ratio') > -1) {
|
|
totalData[key].push(item[key] && typeof item[key] === 'number' ? Round(item[key] * 100, 2) : 0);
|
|
} else {
|
|
totalData[key].push(item[key] ? item[key] : 0);
|
|
}
|
|
});
|
|
});
|
|
ratingLevel.forEach((item) => {
|
|
const cntSerie = {
|
|
name: item[0] + '客户数',
|
|
emphasis: {
|
|
focus: 'series',
|
|
},
|
|
type: 'bar',
|
|
barWidth: '5%',
|
|
data: totalData[item[1][0]],
|
|
};
|
|
state.seriesData.push(cntSerie);
|
|
state.legendData.push(item[0] + '客户数');
|
|
const ratioSerie = { name: item[0] + '占比', type: 'line', data: totalData[item[1][1]] };
|
|
state.ratioSeriesData.push(ratioSerie);
|
|
state.ratioLegendData.push(item[0] + '占比');
|
|
});
|
|
}
|
|
};
|
|
|
|
const rptRatingIndustryFocusDistGrid = {
|
|
buttons: [
|
|
{
|
|
extend: 'query',
|
|
click: () => {
|
|
const QueryParams = rptRatingIndustryFocusDistGridRef.value.getQueryForm().getData();
|
|
axios.get(Environment.apiContextPath('api/irbs/rptRatingIndustryFocusDist/list'), { params: QueryParams }).then((resp) => {
|
|
rptRatingIndustryFocusDistGridRef.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支行' },
|
|
],
|
|
},
|
|
],
|
|
tableColumns: [
|
|
{ label: '所属行业', name: 'industryName', align: 'left' },
|
|
{
|
|
name: 'AAA+',
|
|
label: 'AAA+',
|
|
columns: [
|
|
{ label: '客户数', name: 'aaaPlusCnt', align: 'center' },
|
|
{ label: '占比', name: 'aaaPlusRatio', align: 'center', format: RatioFormat },
|
|
],
|
|
},
|
|
{
|
|
name: 'AAA',
|
|
label: 'AAA',
|
|
columns: [
|
|
{ label: '客户数', name: 'aaaCnt', align: 'center' },
|
|
{ label: '占比', name: 'aaaRatio', align: 'center', format: RatioFormat },
|
|
],
|
|
},
|
|
{
|
|
name: 'AA+',
|
|
label: 'AA+',
|
|
columns: [
|
|
{ label: '客户数', name: 'aaPlusCnt', align: 'center' },
|
|
{ label: '占比', name: 'aaPlusRatio', align: 'center', format: RatioFormat },
|
|
],
|
|
},
|
|
{
|
|
name: 'AA',
|
|
label: 'AA',
|
|
columns: [
|
|
{ label: '客户数', name: 'aaCnt', align: 'center' },
|
|
{ label: '占比', name: 'aaRatio', align: 'center', format: RatioFormat },
|
|
],
|
|
},
|
|
{
|
|
name: 'AA-',
|
|
label: 'AA-',
|
|
columns: [
|
|
{ label: '客户数', name: 'aaMinusCnt', align: 'center' },
|
|
{ label: '占比', name: 'aaMinusRatio', align: 'center', format: RatioFormat },
|
|
],
|
|
},
|
|
{
|
|
name: 'A+',
|
|
label: 'A+',
|
|
columns: [
|
|
{ label: '客户数', name: 'aPlusCnt', align: 'center' },
|
|
{ label: '占比', name: 'aPlusRatio', align: 'center', format: RatioFormat },
|
|
],
|
|
},
|
|
{
|
|
name: 'A',
|
|
label: 'A',
|
|
columns: [
|
|
{ label: '客户数', name: 'aCnt', align: 'center' },
|
|
{ label: '占比', name: 'aRatio', align: 'center', format: RatioFormat },
|
|
],
|
|
},
|
|
{
|
|
name: 'A-',
|
|
label: 'A-',
|
|
columns: [
|
|
{ label: '客户数', name: 'aMinusCnt', align: 'center' },
|
|
{ label: '占比', name: 'aMinusRatio', align: 'center', format: RatioFormat },
|
|
],
|
|
},
|
|
{
|
|
name: 'BBB',
|
|
label: 'BBB',
|
|
columns: [
|
|
{ label: '客户数', name: 'bbbCnt', align: 'center' },
|
|
{ label: '占比', name: 'bbbRatio', align: 'center', format: RatioFormat },
|
|
],
|
|
},
|
|
{
|
|
name: 'BB',
|
|
label: 'BB',
|
|
columns: [
|
|
{ label: '客户数', name: 'bbCnt', align: 'center' },
|
|
{ label: '占比', name: 'bbRatio', align: 'center', format: RatioFormat },
|
|
],
|
|
},
|
|
{
|
|
name: 'B',
|
|
label: 'B',
|
|
columns: [
|
|
{ label: '客户数', name: 'bCnt', align: 'center' },
|
|
{ label: '占比', name: 'bRatio', align: 'center', format: RatioFormat },
|
|
],
|
|
},
|
|
{
|
|
name: 'CCC',
|
|
label: 'CCC',
|
|
columns: [
|
|
{ label: '客户数', name: 'cccCnt', align: 'center' },
|
|
{ label: '占比', name: 'cccRatio', align: 'center', format: RatioFormat },
|
|
],
|
|
},
|
|
{
|
|
name: 'CC',
|
|
label: 'CC',
|
|
columns: [
|
|
{ label: '客户数', name: 'ccCnt', align: 'center' },
|
|
{ label: '占比', name: 'ccRatio', align: 'center', format: RatioFormat },
|
|
],
|
|
},
|
|
{
|
|
name: 'C',
|
|
label: 'C',
|
|
columns: [
|
|
{ label: '客户数', name: 'cCnt', align: 'center' },
|
|
{ label: '占比', name: 'cRatio', align: 'center', format: RatioFormat },
|
|
],
|
|
},
|
|
{
|
|
name: 'D',
|
|
label: 'D',
|
|
columns: [
|
|
{ label: '客户数', name: 'dCnt', align: 'center' },
|
|
{ label: '占比', name: 'dRatio', align: 'center', format: RatioFormat },
|
|
],
|
|
},
|
|
],
|
|
};
|
|
</script>
|
|
|