likunming
/
new_irbs
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

修改长度

main
likunming 8 months ago
parent
5103c3b424
commit
681fea2024
1 changed files with 214 additions and 68 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 206
      irbs.frontend/src/views/report/RptRatingDistribution.vue

206
irbs.frontend/src/views/report/RptRatingDistribution.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<div class="h-full"> <div class="h-full">
<q-splitter v-model="splitterModel" horizontal class="h-full"> <q-splitter v-model="state.splitterModel" horizontal class="h-full">
<template #before> <template #before>
<w-grid <w-grid
ref="rptRatingDistributionGridRef" ref="rptRatingDistributionGridRef"
title="客户评级分布报表" title="客户评级分布列表"
:data-url="Environment.apiContextPath('api/irbs/rptRatingDistribution/list')" :data-url="Environment.apiContextPath('api/irbs/rptRatingDistribution/list')"
:sort-no="true" :sort-no="true"
:dense="true" :dense="true"
@ -14,10 +14,30 @@
:columns="rptRatingDistributionGrid.columns" :columns="rptRatingDistributionGrid.columns"
:toolbar-actions="rptRatingDistributionGrid.buttons" :toolbar-actions="rptRatingDistributionGrid.buttons"
:pageable="false" :pageable="false"
@after-request-data="afterRequestData"
></w-grid> ></w-grid>
</template> </template>
<template #after> <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 <w-echarts
:option="{ :option="{
tooltip: { tooltip: {
@ -26,39 +46,108 @@
type: 'shadow', type: 'shadow',
}, },
}, },
toolbox: {
feature: {
saveAsImage: { show: true },
},
},
legend: {
data: ['客户数', '本月新增客户数', '违约客户数', '占比', '本月新增占比', '违约占比'],
},
grid: { grid: {
top: '10%', top: '15%',
left: '3%', left: '3%',
right: '4%', right: '4%',
bottom: '3%', bottom: '3%',
containLabel: true, containLabel: true,
}, },
dataZoom: [ xAxis: {
type: 'category',
data: state.xData,
axisTick: {
alignWithLabel: true,
},
},
yAxis: [
{ {
type: 'slider', type: 'value',
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', type: 'value',
zoomOnMouseWheel: false, // 滚动不触发缩放 interval: 10,
moveOnMouseMove: true, // 鼠标移动触发平移 axisLabel: {
moveOnMouseWheel: true, // 鼠标滚动触发平移 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: { xAxis: {
type: 'category', type: 'category',
data: ['AAA', 'AA', 'A', 'BBB', 'BB', 'B', 'CCC', 'CC', 'C', 'D'], data: state.xData,
axisTick: { axisTick: {
alignWithLabel: true, alignWithLabel: true,
}, },
@ -67,31 +156,88 @@
{ {
type: 'value', type: 'value',
}, },
{
type: 'value',
interval: 10,
axisLabel: {
formatter: '{value} %',
},
},
], ],
series: [ series: [
{ {
name: '数量', name: '信贷余额',
type: 'bar', type: 'bar',
barWidth: '20%', barWidth: '20%',
data: [1, 2, 3, 4, 5, 6, 7, 8, 9], data: state.custData.creditBalance,
},
{
name: '占比',
type: 'line',
yAxisIndex: 1,
data: state.custData.creditRatio,
}, },
], ],
}" }"
></w-echarts> ></w-echarts>
</q-tab-panel>
</q-tab-panels>
</template>
</q-splitter>
</div>
</template> </template>
</q-splitter> </q-splitter>
</div> </div>
</template> </template>
<script setup lang="ts"> <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 } from '@/views/custRating/CustRating.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 $q = useQuasar();
const rptRatingDistributionGridRef = ref(); const rptRatingDistributionGridRef = ref();
const splitterModel = ref(60); 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 = { const rptRatingDistributionGrid = {
buttons: [ buttons: [
@ -173,7 +319,7 @@ const rptRatingDistributionGrid = {
}, },
], ],
columns: [ columns: [
{ label: '<span>评级</span><br/>等级', name: 'ratingLevel', align: 'center' }, { label: '评级等级', name: 'ratingLevel', align: 'center' },
{ {
label: '全部客户', label: '全部客户',
name: 'totalCustHeader', name: 'totalCustHeader',

Write Preview
Loading…
Cancel
Save