@ -11,22 +11,32 @@
< div class = "text-center text-h6" > < q -icon name = "replay_circle_filled" color = "orange" > < / q - i c o n > 评 级 更 新 < / d i v >
< div class = "text-center text-h6" > < q -icon name = "replay_circle_filled" color = "orange" > < / q - i c o n > 评 级 更 新 < / d i v >
< div class = "text-center text-h5" style = "position: relative" >
< div class = "text-center text-h5" style = "position: relative" >
< span style = "position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%)" >
< span style = "position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%)" >
< a : href = "void 0" class = "cursor-pointer text-blue-600" > 0 < / a >
< a : href = "void 0" class = "cursor-pointer text-blue-600" @click ="gotoWaitTask" > {{ state.totalInfo.waitTask }} < / a >
< / span >
< / span >
< / div >
< / div >
< div class = "text-center text-h5" style = "position: relative" >
< div class = "text-center text-h5" style = "position: relative" >
< span style = "position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%)" >
< span style = "position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%)" >
< a : href = "void 0" class = "cursor-pointer text-blue-600" > 0 < / a >
< a : href = "void 0" class = "cursor-pointer text-blue-600" @click ="gotoCompleteTask" > {{ state.totalInfo.completeTask }} < / a >
< / span >
< / span >
< / div >
< / div >
< div class = "text-center text-h5" style = "position: relative" >
< div class = "text-center text-h5" style = "position: relative" >
< span style = "position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%)" >
< span style = "position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%)" >
< a : href = "void 0" class = "cursor-pointer text-blue-600" > 0 < / a >
< a : href = "void 0" class = "cursor-pointer text-blue-600" @click ="gotoEndTask" > {{ state.totalInfo.endTask }} < / a >
< / span >
< / span >
< / div >
< / div >
< div class = "text-center text-h5" >
< 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" >
< q -circular -progress
80 %
show - value
: min = "0"
: max = "100"
: value = "state.totalInfo.ratingUpdate"
size = "50px"
: thickness = "0.22"
color = "positive"
track - color = "grey-3"
class = "q-ma-md"
>
{ { state . totalInfo . ratingUpdate } } %
< / q - c i r c u l a r - p r o g r e s s >
< / q - c i r c u l a r - p r o g r e s s >
< / div >
< / div >
< / div >
< / div >
@ -97,7 +107,7 @@
< q -tabs v-model ="state.tab" inline-label indicator-color="primary" align="left" :breakpoint ="1" >
< 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 = "ckfb" icon = "equalizer" label = "敞口分布" / >
< q -tab name = "pjfb" icon = "equalizer" label = "评级分布" / >
< q -tab name = "pjfb" icon = "equalizer" label = "评级分布" / >
< q -tab name = "wyqs" icon = "line_axis" label = "违约趋势" / >
<!-- < q -tab name = "wyqs" icon = "line_axis" label = "违约趋势" / > -- >
< / q - t a b s >
< / q - t a b s >
< / template >
< / template >
< template # after >
< template # after >
@ -215,7 +225,7 @@
] ,
] ,
xAxis : {
xAxis : {
type : 'category' ,
type : 'category' ,
data : state . ck XAxisData,
data : state . pj XAxisData,
axisTick : {
axisTick : {
alignWithLabel : true ,
alignWithLabel : true ,
} ,
} ,
@ -230,21 +240,82 @@
name : '数量' ,
name : '数量' ,
type : 'bar' ,
type : 'bar' ,
barWidth : '20%' ,
barWidth : '20%' ,
data : state . ck YAxisData,
data : state . pj YAxisData,
} ,
} ,
] ,
] ,
} "
} "
> < / w - e c h a r t s >
> < / w - e c h a r t s >
< / q - t a b - p a n e l >
< / q - t a b - p a n e l >
< q -tab -panel name = "wyqs" class = "h-full" > < / q - t a b - p a n e l >
<!--
< q -tab -panel name = "wyqs" class = "h-full" >
< w -echarts
: option = " {
tooltip : {
trigger : 'axis' ,
axisPointer : {
type : 'line' ,
} ,
} ,
grid : {
left : '3%' ,
right : '4%' ,
bottom : '3%' ,
containLabel : true ,
} ,
dataZoom : [
{
type : 'slider' ,
show : true , / / 是 否 显 示 滚 动 条
borderColor : '#e3e3e3' , / / 边 框 颜 色
showDetail : false , / / 是 否 显 示 d e t a i l , 即 拖 拽 时 显 示 详 细 数 值 信 息
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 : echartsData . wyXAxisData ,
axisTick : {
alignWithLabel : true ,
} ,
} ,
yAxis : [
{
type : 'value' ,
} ,
] ,
series : [
{
name : '违约占比' ,
type : 'line' ,
smooth : true ,
data : echartsData . wyYAxisData ,
} ,
] ,
} "
> < / w - e c h a r t s >
< / q - t a b - p a n e l > - - >
< / q - t a b - p a n e l s >
< / q - t a b - p a n e l s >
< / template >
< / template >
< / q - s p l i t t e r >
< / q - s p l i t t e r >
< / q - c a r d - s e c t i o n >
< / q - c a r d - s e c t i o n >
< / q - c a r d >
< / q - c a r d >
< / div >
< / div >
< div class = "grow p-1.5 h-full" >
< div class = "grow py -1.5 h-full" >
< q -card flat bordered class = "h-full" >
< q -card flat bordered class = "h-full" >
< q -card -section class = "w-full h-full p-0" >
< 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" >
< q -splitter v-model ="state.splitterModel" unit="px" horizontal disable class="w-full h-full" >
@ -295,16 +366,27 @@
< script setup lang = "ts" >
< script setup lang = "ts" >
import { ref , nextTick , reactive , onMounted } from 'vue' ;
import { ref , nextTick , reactive , onMounted } from 'vue' ;
import { axios , Environment } from 'platform-core' ;
import { axios , Environment } from 'platform-core' ;
import { useRouter } from 'vue-router' ;
const router = useRouter ( ) ;
const gridRef = ref ( ) ;
const gridRef = ref ( ) ;
const state = reactive ( {
const state = reactive ( {
tab : 'ckfb' ,
tab : 'ckfb' ,
orgOrderTab : 'orgOrder' ,
orgOrderTab : 'orgOrder' ,
splitterModel : 50 ,
splitterModel : 50 ,
totalInfo : {
waitTask : 0 ,
completeTask : 0 ,
endTask : 0 ,
ratingUpdate : 0 ,
} ,
ckXAxisData : [ ] ,
ckXAxisData : [ ] ,
ckYAxisData : [ ] ,
ckYAxisData : [ ] ,
pjXAxisData : [ ] ,
pjXAxisData : [ 'AAA' , 'AA' , 'A' , 'BBB' , 'BB' , 'B' , 'CCC' , 'CC' , 'C' , 'D' ] ,
pjYAxisData : [ ] ,
pjYAxisData : [ ] ,
wyXAxisData : [ '2024-01' , '2024-02' , '2024-03' , '2024-04' , '2024-05' , '2024-06' ] ,
wyYAxisData : [ ] ,
} ) ;
} ) ;
const getRatingModelExposure = ( ) => {
const getRatingModelExposure = ( ) => {
@ -330,13 +412,60 @@ const getRatingModelExposure = () => {
}
}
} ) ;
} ) ;
} ;
} ;
getRatingModelExposure ( ) ;
const getRatingLevelExposure = ( ) => {
axios . get ( Environment . apiContextPath ( 'api/irbs/home/ratingLevelExposure' ) ) . 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 ,
/ / i t e m S t y l e : { c o l o r : e c h a r t s C o l o r [ i % 2 3 ] }
} ) ;
}
state . pjXAxisData = x ;
state . pjYAxisData = y ;
}
} ) ;
} ;
const getTotalInfo = ( ) => {
axios . get ( Environment . apiContextPath ( 'api/irbs/home/getTotalInfo' ) ) . then ( ( resp ) => {
if ( resp ? . data ) {
state . totalInfo . waitTask = resp . data [ 'waitTask' ] ;
state . totalInfo . completeTask = resp . data [ 'completeTask' ] ;
state . totalInfo . endTask = resp . data [ 'endTask' ] ;
state . totalInfo . ratingUpdate = resp . data [ 'ratingUpdate' ] ;
}
} ) ;
} ;
const gotoWaitTask = ( ) => {
router . push ( { name : 'route.irbs.work.todoTask' } ) ;
} ;
const gotoCompleteTask = ( ) => {
router . push ( { name : 'route.irbs.work.doneTask' } ) ;
} ;
const gotoEndTask = ( ) => {
router . push ( { name : 'route.irbs.work.endTask' } ) ;
} ;
const announcementClick = ( ) => {
const announcementClick = ( ) => {
console . info ( '点击公告' ) ;
console . info ( '点击公告' ) ;
} ;
} ;
onMounted ( ( ) => {
onMounted ( ( ) => {
getRatingModelExposure ( ) ;
getRatingLevelExposure ( ) ;
getTotalInfo ( ) ;
gridRef . value . setLocalData ( [
gridRef . value . setLocalData ( [
{ orgName : '洪山支行' , custRating : 264 , defaultCognizance : 21 , riskExposure : 9 , total : 294 } ,
{ orgName : '洪山支行' , custRating : 264 , defaultCognizance : 21 , riskExposure : 9 , total : 294 } ,
{ orgName : '光谷分行' , custRating : 220 , defaultCognizance : 10 , riskExposure : 0 , total : 230 } ,
{ orgName : '光谷分行' , custRating : 220 , defaultCognizance : 10 , riskExposure : 0 , total : 230 } ,