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.
316 lines
12 KiB
316 lines
12 KiB
<template>
|
|
<div class="irbs-home h-full">
|
|
<div class="flex">
|
|
<div class="grow p-1.5 min-w-[300px] h-[150px]">
|
|
<q-card flat bordered class="min-h-[150px] h-full">
|
|
<q-card-section class="h-full">
|
|
<div class="grid grid-cols-4 content-between h-full">
|
|
<div class="text-center text-h6"><q-icon name="assignment" color="red"></q-icon>待办任务</div>
|
|
<div class="text-center text-h6"><q-icon name="task" color="positive"></q-icon>已办任务</div>
|
|
<div class="text-center text-h6"><q-icon name="assignment_turned_in" color="light-blue"></q-icon>办结任务</div>
|
|
<div class="text-center text-h6"><q-icon name="replay_circle_filled" color="orange"></q-icon>评级更新</div>
|
|
<div class="text-center text-h5" style="position: relative">
|
|
<span style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%)">
|
|
<a :href="void 0" class="cursor-pointer text-blue-600">0</a>
|
|
</span>
|
|
</div>
|
|
<div class="text-center text-h5" style="position: relative">
|
|
<span style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%)">
|
|
<a :href="void 0" class="cursor-pointer text-blue-600">0</a>
|
|
</span>
|
|
</div>
|
|
<div class="text-center text-h5" style="position: relative">
|
|
<span style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%)">
|
|
<a :href="void 0" class="cursor-pointer text-blue-600">0</a>
|
|
</span>
|
|
</div>
|
|
<div class="text-center text-h5">
|
|
<q-circular-progress show-value :value="80" size="50px" :thickness="0.22" color="positive" track-color="grey-3" class="q-ma-md">
|
|
80%
|
|
</q-circular-progress>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
</q-card>
|
|
</div>
|
|
<div class="grow p-1.5 min-w-[300px]">
|
|
<q-card flat bordered class="h-[150px]">
|
|
<q-card-section>
|
|
<div class="flex">
|
|
<div class="flex-none"><span class="font-bold">公告</span></div>
|
|
<div class="grow"></div>
|
|
<div class="flex-none">
|
|
<a :href="void 0" class="cursor-pointer text-xs hover:text-blue-600" @click="announcementClick">更多</a>
|
|
</div>
|
|
</div>
|
|
<q-list dense class="pt-2 text-xs">
|
|
<q-item dense>
|
|
<q-item-section>
|
|
<q-item-label lines="1"
|
|
><a :href="void 0" class="cursor-pointer hover:text-blue-600" @click="announcementClick">金融机构客户评级重要通知</a></q-item-label
|
|
>
|
|
</q-item-section>
|
|
|
|
<q-item-section side>
|
|
<q-item-label caption>2023-06-01</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-separator />
|
|
|
|
<q-item>
|
|
<q-item-section>
|
|
<q-item-label lines="1"
|
|
><a :href="void 0" class="cursor-pointer hover:text-blue-600" @click="announcementClick">老系统历史评级结果迁移通知</a></q-item-label
|
|
>
|
|
</q-item-section>
|
|
|
|
<q-item-section side>
|
|
<q-item-label caption>2023-04-29</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
|
|
<q-separator />
|
|
|
|
<q-item>
|
|
<q-item-section>
|
|
<q-item-label lines="1"
|
|
><a :href="void 0" class="cursor-pointer hover:text-blue-600" @click="announcementClick">关于部分人员无法登录系统公告</a></q-item-label
|
|
>
|
|
</q-item-section>
|
|
|
|
<q-item-section side>
|
|
<q-item-label caption>2023-04-11</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-card-section>
|
|
</q-card>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex" style="height: calc(100% - 162px)">
|
|
<div class="grow p-1.5 min-w-[300px] h-full">
|
|
<q-card flat bordered class="h-full">
|
|
<q-card-section class="w-full h-full p-0">
|
|
<q-splitter v-model="state.splitterModel" 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="ckfb" icon="equalizer" label="敞口分布" />
|
|
<q-tab name="pjfb" icon="equalizer" label="评级分布" />
|
|
<q-tab name="wyqs" icon="line_axis" 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="ckfb" class="w-full h-full p-0">
|
|
<w-echarts
|
|
:option="{
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow',
|
|
},
|
|
},
|
|
grid: {
|
|
top: '15%',
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true,
|
|
},
|
|
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, // 鼠标滚动触发平移
|
|
},
|
|
],
|
|
xAxis: {
|
|
type: 'category',
|
|
data: state.ckXAxisData,
|
|
axisTick: {
|
|
alignWithLabel: true,
|
|
},
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: '敞口',
|
|
type: 'bar',
|
|
barWidth: '20%',
|
|
data: state.ckYAxisData,
|
|
},
|
|
],
|
|
}"
|
|
></w-echarts>
|
|
</q-tab-panel>
|
|
|
|
<q-tab-panel name="pjfb" class="h-full">
|
|
<div>评级分布</div>
|
|
</q-tab-panel>
|
|
|
|
<q-tab-panel name="wyqs" class="h-full"> 违约趋势 </q-tab-panel>
|
|
</q-tab-panels>
|
|
</template>
|
|
</q-splitter>
|
|
</q-card-section>
|
|
</q-card>
|
|
</div>
|
|
<div class="flex-none p-1.5 min-w-[300px] h-full">
|
|
<q-card flat bordered class="h-full">
|
|
<q-card-section class="w-full h-full p-0">
|
|
<q-splitter v-model="state.splitterModel" unit="px" horizontal disable class="w-full h-full">
|
|
<template #before>
|
|
<q-tabs v-model="state.orgOrderTab" inline-label align="left" :breakpoint="1">
|
|
<q-tab name="orgOrder" icon="equalizer" label="机构排名" />
|
|
</q-tabs>
|
|
</template>
|
|
<template #after>
|
|
<q-tab-panels
|
|
v-model="state.orgOrderTab"
|
|
:keep-alive="true"
|
|
animated
|
|
swipeable
|
|
vertical
|
|
transition-prev="jump-up"
|
|
transition-next="jump-up"
|
|
class="w-full h-full"
|
|
>
|
|
<q-tab-panel name="orgOrder" class="w-full h-full p-0">
|
|
<w-grid
|
|
ref="gridRef"
|
|
:auto-fetch-data="false"
|
|
:pageable="false"
|
|
:sort-no="true"
|
|
:config-button="false"
|
|
dense-body
|
|
:checkbox-selection="false"
|
|
:columns="[
|
|
{ name: 'orgName', label: '机构', sortable: false },
|
|
{ name: 'custRating', label: '客户评级', sortable: false },
|
|
{ name: 'defaultCognizance', label: '违约认定(人工)', sortable: false },
|
|
{ name: 'riskExposure', label: '风险暴露(人工)', sortable: false },
|
|
{ name: 'total', label: '合计', sortable: false },
|
|
]"
|
|
></w-grid>
|
|
</q-tab-panel>
|
|
</q-tab-panels>
|
|
</template>
|
|
</q-splitter>
|
|
</q-card-section>
|
|
</q-card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, nextTick, reactive, onMounted } from 'vue';
|
|
import { axios, Environment } from 'platform-core';
|
|
|
|
const gridRef = ref();
|
|
const state = reactive({
|
|
tab: 'ckfb',
|
|
orgOrderTab: 'orgOrder',
|
|
splitterModel: 50,
|
|
ckXAxisData: [],
|
|
ckYAxisData: [],
|
|
});
|
|
|
|
const getRatingModelExposure = () => {
|
|
axios.get(Environment.apiContextPath('api/irbs/home/ratingModelExposure')).then((resp) => {
|
|
if (resp && resp.data) {
|
|
const _data = resp.data;
|
|
const x = <any>[];
|
|
const y = <any>[];
|
|
for (let i = 0; i < _data.length; i++) {
|
|
const item = _data[i];
|
|
let _key = item.key;
|
|
if (_key && _key.indexOf('-') > 0) {
|
|
_key = _key.substr(_key.indexOf('-') + 1);
|
|
}
|
|
x.push(_key);
|
|
y.push({
|
|
value: item.value,
|
|
// itemStyle: { color: echartsColor[i % 23] }
|
|
});
|
|
}
|
|
state.ckXAxisData = x;
|
|
state.ckYAxisData = y;
|
|
}
|
|
});
|
|
};
|
|
getRatingModelExposure();
|
|
|
|
const announcementClick = () => {
|
|
console.info('点击公告');
|
|
};
|
|
|
|
onMounted(() => {
|
|
gridRef.value.setLocalData([
|
|
{ orgName: '洪山支行', custRating: 264, defaultCognizance: 21, riskExposure: 9, total: 294 },
|
|
{ orgName: '光谷分行', custRating: 220, defaultCognizance: 10, riskExposure: 0, total: 230 },
|
|
]);
|
|
});
|
|
</script>
|
|
|
|
<style lang="css">
|
|
.irbs-home .q-table__middle .q-table th {
|
|
border-left-width: 0px;
|
|
border-right-width: 0px;
|
|
border-top-width: 0px;
|
|
border-bottom-width: 1px;
|
|
}
|
|
.irbs-home .q-table__middle .q-table td {
|
|
border-left-width: 0px;
|
|
border-right-width: 0px;
|
|
border-top-width: 0px;
|
|
border-bottom-width: 1px;
|
|
}
|
|
|
|
.irbs-home .q-table__card .q-table__middle {
|
|
border-color: rgba(0, 0, 0, 0.12);
|
|
border-style: none;
|
|
border-top-width: 0px;
|
|
border-left-width: 0px;
|
|
border-right-width: 0px;
|
|
border-bottom-width: 0px;
|
|
}
|
|
|
|
.irbs-home .q-table__top {
|
|
border-width: 0px;
|
|
}
|
|
|
|
.irbs-home .noDataTr .q-td {
|
|
border-width: 0px !important;
|
|
}
|
|
</style>
|
|
|