Skip to content

Y
yishuju-ui
Commit 711a2c2a authored by 沈翠玲's avatar 沈翠玲
Browse files
Options

数据大屏

parent 1989e220
Show whitespace changes
Inline Side-by-side
Showing with 224 additions and 297 deletions
src/api/dataScreen.js
View file @ 711a2c2a
......@@ -11,3 +11,7 @@ export const getMapByTenant = (params) => {
export const getReturnRateByPlatform = (params) => {
return request.get('/Loan/getReturnRateByPlatform', params);
};
// 回款金额 总金额
export const getReturn = (params) => {
return request.get('/Loan/getReturn', params);
};
\ No newline at end of file
src/views/data-screen/components/AnnualUseChart.vue
View file @ 711a2c2a
......@@ -8,107 +8,61 @@
import ECharts from "@/components/ECharts/index.vue";
import { ranking1, ranking2, ranking3, ranking4 } from "../assets/ranking-icon";
import echarts from "@/components/ECharts/config";
import { getReturnRateByPlatform } from '@/api/dataScreen';
var salvProName =["西南调解中心","雄安调解中心","大同调解中心","成都调解中心"];
var salvProValue =[400000,39500, 5000, 4000, 3000];
var salvProMax =[];//背景按最大值
for (let i = 0; i < salvProValue.length; i++) {
salvProMax.push(salvProValue[0])
}
const colors = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
import { getReturn } from '@/api/dataScreen';
import { computed } from "vue";
import { reactive, ref } from 'vue';
const list = ref([]);
var colorList = ['#73DDFF', '#73ACFF', '#3074c7', '#415b98', '#709cf5', '#9ac0fa', '#58D5FF']
getReturn().then(res => {
console.log('reee', res)
if(res.result) {
list.value = res.result.map(v => ({name: v.name, value: v.totalReturn}))
}
const option = {
grid: {
left: '2%',
right: '2%',
bottom: '2%',
top: '2%',
containLabel: true
},
})
const option = computed(() => {
return {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'none'
},
formatter: function(params) {
return params[0].name + ' : ' + params[0].value
}
},
xAxis: {
show: false,
type: 'value'
},
yAxis: [{
type: 'category',
inverse: true,
axisLabel: {
show: true,
textStyle: {
color: '#fff',
fontSize: '14'
},
},
splitLine: {
show: false
trigger: 'item'
},
axisTick: {
show: false
},
axisLine: {
show: false
},
data: salvProName
}, {
type: 'category',
inverse: true,
axisTick: 'none',
axisLine: 'none',
show: true,
axisLabel: {
textStyle: {
color: '#ffffff',
fontSize: '14'
},
},
data:salvProValue
}],
series: [{
name: '值',
type: 'bar',
zlevel: 1,
type: 'pie',
center: ['50%', '50%'],
radius: ['34%', '60%'],
clockwise: true,
avoidLabelOverlap: true,
hoverOffset: 15,
itemStyle: {
normal: {
barBorderRadius: 30,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: 'rgb(57,89,255,1)'
}, {
offset: 1,
color: 'rgb(46,200,207,1)'
}]),
color: function(params) {
return colorList[params.dataIndex]
}
}
},
label: {
color: '#fff',
fontSize: 14,
show: true,
position: 'outside',
formatter: (params) => {
return params.name + '\n¥' + params.value + '\n' + params.percent + '%'
},
barWidth: 20,
data: salvProValue
},
{
name: '背景',
type: 'bar',
barWidth: 20,
barGap: '-100%',
data: salvProMax,
itemStyle: {
labelLine: {
normal: {
color: '#05091e',
barBorderRadius: 30,
length: 14,
length2: 8,
lineStyle: {
width: 1,
color: '#fff'
}
}
},
},
]
};
data: list.value,
}]
}
})
</script>
<style lang="scss" scoped>
.echarts {
......
src/views/data-screen/components/HotPlateChart.vue
View file @ 711a2c2a
......@@ -9,18 +9,23 @@ import ECharts from "@/components/ECharts/index.vue";
import { ranking1, ranking2, ranking3, ranking4 } from "../assets/ranking-icon";
import echarts from "@/components/ECharts/config";
import { getReturnRateByPlatform } from '@/api/dataScreen';
import { computed } from "vue";
import { reactive, ref } from 'vue';
var salvProName =["还呗","360借条"];
var salvProValue =[70,65];
var salvProMax =[];//背景按最大值
for (let i = 0; i < salvProValue.length; i++) {
salvProMax.push(100)
}
const colors = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
var salvProName =ref([]);
var salvProValue =ref([]);
getReturnRateByPlatform().then(res => {
if (res.result) {
const arr = res.result
arr.sort((a,b) => a.rate - b.rate)
salvProName.value = arr.map(v => v.loanPlatform)
salvProValue.value = arr.map(v => v.rate)
}
})
const option = {
const option = computed(() => {
return {
grid: {
left: '2%',
right: '2%',
......@@ -60,7 +65,7 @@ const option = {
axisLine: {
show: false
},
data: salvProName
data: salvProName.value
}, {
type: 'category',
inverse: true,
......@@ -73,7 +78,7 @@ const option = {
fontSize: '14'
},
},
data:salvProValue
data:salvProValue.value
}],
series: [{
name: '值',
......@@ -93,7 +98,7 @@ const option = {
},
label: {
normal: {
color: '#b3ccf8',
color: '#fff',
show: true,
position: [0, '-24px'],
textStyle: {
......@@ -105,14 +110,14 @@ const option = {
}
},
barWidth: 50,
data: salvProValue
data: salvProValue.value
},
{
name: '背景',
type: 'bar',
barWidth: 50,
barGap: '-100%',
data: salvProMax,
data: salvProValue.value.map(v => 100),
itemStyle: {
normal: {
color: '#05091e',
......@@ -121,7 +126,8 @@ const option = {
},
},
]
};
}
})
</script>
<style lang="scss" scoped>
.echarts {
......
src/views/data-screen/index.scss
View file @ 711a2c2a
......@@ -99,67 +99,56 @@
white-space: nowrap;
}
}
.dataScreen-main {
box-sizing: border-box;
display: flex;
flex: 1;
width: 100%;
padding: 12px 42px 20px;
.dataScreen-lf {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 500px;
background: #100c476b;
height: 100%;
margin-right: 40px;
.dataScreen-top,
.dataScreen-center,
.dataScreen-bottom {
.dataScreen-Number {
text-align: center;
position: relative;
box-sizing: border-box;
margin-top: 48px;
align-items: flex-end;
width: 100%;
padding-top: 54px;
}
.dataScreen-top {
height: 37%;
}
.dataScreen-center {
height: 30%;
}
.dataScreen-bottom {
height: 27%;
margin-bottom: 0;
}
}
.dataScreen-ct {
display: flex;
flex: 1;
flex-direction: column;
justify-content: space-between;
height: 100%;
margin-right: 40px;
.dataScreen-Number {
.number-box{
height: 90px;
flex: 1;
text-align: center;
position: relative;
margin-top: 58px;
&::after {
height: 60px;
position: absolute;
width: 1px;
top: 50%;
transform: translateY(-50%);
right: 0px;
content: '';
background: linear-gradient(transparent 0%, #fff 20%, #fff 80%,transparent 100%);
display: block;
}
.number-box{
&:first-child,&:last-child {
flex: 0.5;
height: 100px;
}
&:first-child::after, &:nth-child(4)::after {
height: 90px;
width: 120px;
background-color: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 10px;
}
&:last-child::after {
display: none;
}
}
.number-title{
color: #05e8fe;
color: #fff;
font-size: 20px;
line-height: 4px;
}
.dataScreen-map {
.number-value {
font-size: 44px;
}
}
.dataScreen-cb {
position: relative;
box-sizing: border-box;
flex: 1;
width: 100%;
height: 252px;
background: #100c476b;
padding-top: 54px;
}
.dataScreen-map-title {
position: absolute;
top: 10px;
......@@ -177,43 +166,78 @@
background: url("./images/map-title-bg.png") no-repeat;
background-size: 100% 100%;
}
.dataScreen-alarm {
.dataScreen-main-title {
position: absolute;
top: 0;
top: 10px;
left: 0;
z-index: 99;
box-sizing: border-box;
width: 100%;
height: 76px;
padding: 2px 30px;
overflow: hidden;
background: url("./images/dataScreen-warn-bg.png") no-repeat;
background-size: 100% 100%;
.map-item {
display: flex;
align-items: center;
height: 37px;
cursor: pointer;
img {
width: 15px;
height: 15px;
margin-top: 3px;
margin-right: 6px;
}
width: 270px;
height: 25px;
padding-left: 30px;
font-size: 14px;
color: #ffffff;
letter-spacing: 5px;
background: url("./images/map-title-bg.png") no-repeat;
background-size: 100% 100%;
span {
margin-bottom: 12px;
font-family: YouSheBiaoTiHei;
font-size: 18px;
color: rgb(255 183 0 / 74.7%);
line-height: 16px;
color: #ffffff;
letter-spacing: 1px;
}
}
.dataScreen-main {
box-sizing: border-box;
display: flex;
flex: 1;
width: 100%;
padding: 12px 0 20px;
.dataScreen-lf {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 500px;
background: #100c476b;
height: 100%;
margin-right: 40px;
.dataScreen-top,
.dataScreen-center,
.dataScreen-bottom {
position: relative;
box-sizing: border-box;
width: 100%;
padding-top: 54px;
}
.dataScreen-top {
height: 100%;
}
.dataScreen-cb {
.dataScreen-center {
height: 30%;
}
.dataScreen-bottom {
height: 27%;
margin-bottom: 0;
}
}
.dataScreen-ct {
display: flex;
flex: 1;
flex-direction: column;
justify-content: space-between;
height: 100%;
margin-right: 40px;
.dataScreen-map {
position: relative;
box-sizing: border-box;
flex: 1;
width: 100%;
height: 252px;
padding-top: 54px;
}
}
.dataScreen-rg {
display: flex;
......@@ -234,38 +258,14 @@
height: 37%;
}
.dataScreen-center {
height: 30%;
height: 100%;
}
.dataScreen-bottom {
height: 27%;
margin-bottom: 0;
}
}
.dataScreen-main-title {
position: absolute;
top: 10px;
left: 0;
z-index: 99;
box-sizing: border-box;
display: flex;
align-items: center;
width: 270px;
height: 25px;
padding-left: 30px;
font-size: 14px;
color: #ffffff;
letter-spacing: 5px;
background: url("./images/map-title-bg.png") no-repeat;
background-size: 100% 100%;
span {
margin-bottom: 12px;
font-family: YouSheBiaoTiHei;
font-size: 18px;
line-height: 16px;
color: #ffffff;
letter-spacing: 1px;
}
}
.dataScreen-main-chart {
width: 100%;
height: 100%;
......
src/views/data-screen/index.vue
View file @ 711a2c2a
......@@ -14,92 +14,47 @@
<span class="header-time">当前时间：{{ time }}</span>
</div>
</div>
<div class="dataScreen-main">
<div class="dataScreen-lf">
<div class="dataScreen-top">
<div class="dataScreen-main-title">
调解中心作业量
<div class="dataScreen-Number flex justify-between">
<div class="number-box">
<p class="number-value text-white">1222</p>
<p class="number-title text-lg">案件总数</p>
</div>
<div class="dataScreen-main-chart">
<RealTimeAccessChart />
<div class="number-box">
<p class="number-value text-white">1222</p>
<p class="number-title text-lg">案件人数</p>
</div>
<div class="number-box">
<p class="number-value text-white">122002</p>
<p class="number-title text-lg">案件总额</p>
</div>
<div class="dataScreen-center">
<div class="dataScreen-main-title">
调解中心在案回款率
<div class="number-box">
<p class="number-value text-white">422002</p>
<p class="number-title text-lg">回款金额</p>
</div>
<div class="dataScreen-main-chart">
<MaleFemaleRatioChart />
<div class="number-box">
<p class="number-value text-white">78%</p>
<p class="number-title text-lg">回款率</p>
</div>
</div>
<div class="dataScreen-bottom">
<div class="dataScreen-main">
<div class="dataScreen-lf">
<div class="dataScreen-top">
<div class="dataScreen-main-title">
案件人年龄比例
产品回款率
</div>
<div class="dataScreen-main-chart">
<AgeRatioChart />
<HotPlateChart />
</div>
</div>
</div>
<div class="dataScreen-ct">
<div class="dataScreen-Number flex justify-between">
<div class="number-box">
<p class="number-title text-lg pt-3">案件人数</p>
<p class=" text-xl text-white pt-2">1222 <span class=" text-base text-gray-400">人</span></p>
</div>
<div class="number-box ml-2">
<p class="number-title text-lg pt-3">案件总数</p>
<p class=" text-xl text-white pt-2">1222 <span class=" text-base text-gray-400">件</span></p>
</div>
<div class="number-box ml-2">
<p class="number-title text-lg pt-3">案件总额</p>
<p class=" text-xl text-white pt-2">122002 <span class=" text-base text-gray-400">元</span></p>
</div>
<div class="number-box ml-2">
<p class="number-title text-lg pt-3">回款金额</p>
<p class=" text-xl text-white pt-2">422002 <span class=" text-base text-gray-400">元</span></p>
</div>
<div class="number-box ml-2">
<p class="number-title text-lg pt-3">回款率</p>
<p class=" text-xl text-white pt-2">78 <span class=" text-base text-gray-400">%</span></p>
</div>
</div>
<div class="dataScreen-map">
<div class="dataScreen-map-title">调解中心分布点</div>
<!-- <vue3-seamless-scroll
:list="alarmData"
class="dataScreen-alarm"
:step="0.5"
:hover="true"
:limitScrollNum="3"
>
<div class="dataScreen-alarm">
<div class="map-item" v-for="item in alarmData" :key="item.id">
<img src="./images/dataScreen-alarm.png" alt="" />
<span class="map-alarm sle">{{ item.label }} 预警：{{ item.warnMsg }}</span>
</div>
</div>
</vue3-seamless-scroll> -->
<ChinaMapChart />
</div>
<div class="dataScreen-cb">
<div class="dataScreen-main-title">
历史30天调解催记趋势
</div>
<div class="dataScreen-main-chart">
<OverNext30Chart />
</div>
</div>
</div>
<div class="dataScreen-rg">
<div class="dataScreen-top">
<div class="dataScreen-main-title">
产品回款率排名
</div>
<div class="dataScreen-main-chart">
<HotPlateChart />
</div>
</div>
<div class="dataScreen-center">
<div class="dataScreen-main-title">
调解中心回款金额
......@@ -108,14 +63,17 @@
<AnnualUseChart />
</div>
</div>
<div class="dataScreen-bottom">
<div class="dataScreen-main-title">
调解中心累计回款率
</div>
<div class="dataScreen-main-chart">
<PlatformSourceChart />
</div>
<div class="dataScreen-cb">
<div class="flex justify-between">
<div class="dataScreen-main-title">
作业量趋势分析
</div>
</div>
<div class="dataScreen-main-chart">
<OverNext30Chart />
</div>
</div>
</div>
......
src/views/infoGather/customerGather/components/Credit.vue
View file @ 711a2c2a
......@@ -4,7 +4,7 @@
v-model="showModal"
title="网贷&信用贷详情"
height="512"
width="1303"
width="1003"
show-footer
esc-closable
>
......
src/views/infoGather/customerGather/components/Creditcard.vue
View file @ 711a2c2a
......@@ -4,7 +4,7 @@
v-model="showModal"
title="信用卡详情"
height="512"
width="1303"
width="1003"
show-footer
esc-closable
>
......
src/views/infoGather/customerGather/components/Customer.vue
View file @ 711a2c2a
......@@ -284,25 +284,25 @@
</table>
</div>
<div id="customerStaticWd" style="padding: 10px">
<div v-for="(item, index) in form.lending" :key="'lending' + index">
<h1 style="text-align: center;font-size: 20px">客户信息收集表(信用贷、网贷版)</h1>
<table style="table-layout:fixed; page-break-after:always">
<customerPrint :data="form"></customerPrint>
<template v-for="(item, index) in form.lending" :key="'lending' + index">
<creditPrint :data="item" :index="index" :sum="form.lending.length" style="page-break-after:always"></creditPrint>
</template>
</table>
</div>
</div>
<div id="customerStaticXyk" style="padding: 10px">
<div v-for="(item, index) in form.creditCard" :key="'creditCard' + index">
<h1 style="text-align: center;font-size: 20px">客户信息收集表(信用卡)</h1>
<table style="table-layout:fixed; page-break-after:always">
<customerPrint :data="form"></customerPrint>
<template v-for="(item, index) in form.creditCard" :key="'creditCard' + index">
<cardPrint :data="item" :index="index" :sum="form.creditCard.length" style="page-break-after:always"></cardPrint>
</template>
</table>
</div>
</div>
</div>
</div>
<idCardModel ref="idCardModelRef"/>
</div>
</template>
......@@ -441,6 +441,11 @@ const handleQuery = () => {
form.value = res.result
cardConfig.data = res.result.creditCard
creditArr.value = res.result.lending
} else {
ElMessage.warning({
message: '您输入的身份证不存在，请手工输入详细信息',
plain: true,
});
}
})
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment