Skip to content

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

数据大屏

parent 1989e220
Hide whitespace changes
Inline Side-by-side
Showing with 224 additions and 297 deletions
src/api/dataScreen.js
View file @ 711a2c2a
...@@ -10,4 +10,8 @@ export const getMapByTenant = (params) => { ...@@ -10,4 +10,8 @@ export const getMapByTenant = (params) => {
// 产品回款率 // 产品回款率
export const getReturnRateByPlatform = (params) => { export const getReturnRateByPlatform = (params) => {
return request.get('/Loan/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 @@ ...@@ -8,107 +8,61 @@
import ECharts from "@/components/ECharts/index.vue"; import ECharts from "@/components/ECharts/index.vue";
import { ranking1, ranking2, ranking3, ranking4 } from "../assets/ranking-icon"; import { ranking1, ranking2, ranking3, ranking4 } from "../assets/ranking-icon";
import echarts from "@/components/ECharts/config"; import echarts from "@/components/ECharts/config";
import { getReturnRateByPlatform } from '@/api/dataScreen'; import { getReturn } from '@/api/dataScreen';
import { computed } from "vue";
import { reactive, ref } from 'vue';
const list = ref([]);
var salvProName =["西南调解中心","雄安调解中心","大同调解中心","成都调解中心"]; var colorList = ['#73DDFF', '#73ACFF', '#3074c7', '#415b98', '#709cf5', '#9ac0fa', '#58D5FF']
var salvProValue =[400000,39500, 5000, 4000, 3000]; getReturn().then(res => {
var salvProMax =[];//背景按最大值 console.log('reee', res)
for (let i = 0; i < salvProValue.length; i++) { if(res.result) {
salvProMax.push(salvProValue[0]) list.value = res.result.map(v => ({name: v.name, value: v.totalReturn}))
} }
const colors = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"]; })
const option = computed(() => {
return {
const option = {
grid: {
left: '2%',
right: '2%',
bottom: '2%',
top: '2%',
containLabel: true
},
tooltip: { tooltip: {
trigger: 'axis', trigger: 'item'
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
},
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: [{ series: [{
name: '值', type: 'pie',
type: 'bar', center: ['50%', '50%'],
zlevel: 1, radius: ['34%', '60%'],
itemStyle: { clockwise: true,
normal: { avoidLabelOverlap: true,
barBorderRadius: 30, hoverOffset: 15,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ itemStyle: {
offset: 0, normal: {
color: 'rgb(57,89,255,1)' color: function(params) {
}, { return colorList[params.dataIndex]
offset: 1, }
color: 'rgb(46,200,207,1)' }
}]), },
}, label: {
color: '#fff',
fontSize: 14,
show: true,
position: 'outside',
formatter: (params) => {
return params.name + '\n¥' + params.value + '\n' + params.percent + '%'
}, },
barWidth: 20,
data: salvProValue
}, },
{ labelLine: {
name: '背景', normal: {
type: 'bar', length: 14,
barWidth: 20, length2: 8,
barGap: '-100%', lineStyle: {
data: salvProMax, width: 1,
itemStyle: { color: '#fff'
normal: {
color: '#05091e',
barBorderRadius: 30,
} }
}, }
}, },
] data: list.value,
}; }]
}
})
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.echarts { .echarts {
......
src/views/data-screen/components/HotPlateChart.vue
View file @ 711a2c2a
...@@ -9,18 +9,23 @@ import ECharts from "@/components/ECharts/index.vue"; ...@@ -9,18 +9,23 @@ import ECharts from "@/components/ECharts/index.vue";
import { ranking1, ranking2, ranking3, ranking4 } from "../assets/ranking-icon"; import { ranking1, ranking2, ranking3, ranking4 } from "../assets/ranking-icon";
import echarts from "@/components/ECharts/config"; import echarts from "@/components/ECharts/config";
import { getReturnRateByPlatform } from '@/api/dataScreen'; import { getReturnRateByPlatform } from '@/api/dataScreen';
import { computed } from "vue";
import { reactive, ref } from 'vue';
var salvProName =["还呗","360借条"]; var salvProName =ref([]);
var salvProValue =[70,65]; var salvProValue =ref([]);
var salvProMax =[];//背景按最大值 getReturnRateByPlatform().then(res => {
for (let i = 0; i < salvProValue.length; i++) { if (res.result) {
salvProMax.push(100) const arr = res.result
} arr.sort((a,b) => a.rate - b.rate)
salvProName.value = arr.map(v => v.loanPlatform)
const colors = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"]; salvProValue.value = arr.map(v => v.rate)
}
})
const option = { const option = computed(() => {
return {
grid: { grid: {
left: '2%', left: '2%',
right: '2%', right: '2%',
...@@ -60,7 +65,7 @@ const option = { ...@@ -60,7 +65,7 @@ const option = {
axisLine: { axisLine: {
show: false show: false
}, },
data: salvProName data: salvProName.value
}, { }, {
type: 'category', type: 'category',
inverse: true, inverse: true,
...@@ -73,7 +78,7 @@ const option = { ...@@ -73,7 +78,7 @@ const option = {
fontSize: '14' fontSize: '14'
}, },
}, },
data:salvProValue data:salvProValue.value
}], }],
series: [{ series: [{
name: '值', name: '值',
...@@ -93,7 +98,7 @@ const option = { ...@@ -93,7 +98,7 @@ const option = {
}, },
label: { label: {
normal: { normal: {
color: '#b3ccf8', color: '#fff',
show: true, show: true,
position: [0, '-24px'], position: [0, '-24px'],
textStyle: { textStyle: {
...@@ -105,14 +110,14 @@ const option = { ...@@ -105,14 +110,14 @@ const option = {
} }
}, },
barWidth: 50, barWidth: 50,
data: salvProValue data: salvProValue.value
}, },
{ {
name: '背景', name: '背景',
type: 'bar', type: 'bar',
barWidth: 50, barWidth: 50,
barGap: '-100%', barGap: '-100%',
data: salvProMax, data: salvProValue.value.map(v => 100),
itemStyle: { itemStyle: {
normal: { normal: {
color: '#05091e', color: '#05091e',
...@@ -121,7 +126,8 @@ const option = { ...@@ -121,7 +126,8 @@ const option = {
}, },
}, },
] ]
}; }
})
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.echarts { .echarts {
......
src/views/data-screen/index.scss
View file @ 711a2c2a
...@@ -99,12 +99,104 @@ ...@@ -99,12 +99,104 @@
white-space: nowrap; white-space: nowrap;
} }
} }
.dataScreen-Number {
text-align: center;
position: relative;
margin-top: 48px;
align-items: flex-end;
width: 100%;
.number-box{
height: 90px;
flex: 1;
text-align: center;
position: relative;
&::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;
}
&:first-child,&:last-child {
flex: 0.5;
height: 100px;
}
&:first-child::after, &:nth-child(4)::after {
height: 90px;
}
&:last-child::after {
display: none;
}
}
.number-title{
color: #fff;
font-size: 20px;
line-height: 4px;
}
.number-value {
font-size: 44px;
}
}
.dataScreen-cb {
position: relative;
box-sizing: border-box;
width: 100%;
height: 252px;
background: #100c476b;
padding-top: 54px;
}
.dataScreen-map-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%;
}
.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 { .dataScreen-main {
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex: 1; flex: 1;
width: 100%; width: 100%;
padding: 12px 42px 20px; padding: 12px 0 20px;
.dataScreen-lf { .dataScreen-lf {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -122,7 +214,7 @@ ...@@ -122,7 +214,7 @@
padding-top: 54px; padding-top: 54px;
} }
.dataScreen-top { .dataScreen-top {
height: 37%; height: 100%;
} }
.dataScreen-center { .dataScreen-center {
height: 30%; height: 30%;
...@@ -139,81 +231,13 @@ ...@@ -139,81 +231,13 @@
justify-content: space-between; justify-content: space-between;
height: 100%; height: 100%;
margin-right: 40px; margin-right: 40px;
.dataScreen-Number {
height: 90px;
text-align: center;
position: relative;
margin-top: 58px;
}
.number-box{
height: 90px;
width: 120px;
background-color: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 10px;
}
.number-title{
color: #05e8fe;
}
.dataScreen-map { .dataScreen-map {
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
flex: 1; flex: 1;
width: 100%; width: 100%;
.dataScreen-map-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%;
}
.dataScreen-alarm {
position: absolute;
top: 0;
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;
}
span {
font-size: 18px;
color: rgb(255 183 0 / 74.7%);
}
}
}
}
.dataScreen-cb {
position: relative;
box-sizing: border-box;
width: 100%;
height: 252px;
padding-top: 54px;
} }
} }
.dataScreen-rg { .dataScreen-rg {
display: flex; display: flex;
...@@ -234,38 +258,14 @@ ...@@ -234,38 +258,14 @@
height: 37%; height: 37%;
} }
.dataScreen-center { .dataScreen-center {
height: 30%; height: 100%;
} }
.dataScreen-bottom { .dataScreen-bottom {
height: 27%; height: 27%;
margin-bottom: 0; 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 { .dataScreen-main-chart {
width: 100%; width: 100%;
height: 100%; height: 100%;
......
src/views/data-screen/index.vue
View file @ 711a2c2a
...@@ -14,92 +14,47 @@ ...@@ -14,92 +14,47 @@
<span class="header-time">当前时间：{{ time }}</span> <span class="header-time">当前时间：{{ time }}</span>
</div> </div>
</div> </div>
<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="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="number-box">
<p class="number-value text-white">422002</p>
<p class="number-title text-lg">回款金额</p>
</div>
<div class="number-box">
<p class="number-value text-white">78%</p>
<p class="number-title text-lg">回款率</p>
</div>
</div>
<div class="dataScreen-main"> <div class="dataScreen-main">
<div class="dataScreen-lf"> <div class="dataScreen-lf">
<div class="dataScreen-top"> <div class="dataScreen-top">
<div class="dataScreen-main-title"> <div class="dataScreen-main-title">
调解中心作业量 产品回款率
</div>
<div class="dataScreen-main-chart">
<RealTimeAccessChart />
</div>
</div>
<div class="dataScreen-center">
<div class="dataScreen-main-title">
调解中心在案回款率
</div>
<div class="dataScreen-main-chart">
<MaleFemaleRatioChart />
</div>
</div>
<div class="dataScreen-bottom">
<div class="dataScreen-main-title">
案件人年龄比例
</div> </div>
<div class="dataScreen-main-chart"> <div class="dataScreen-main-chart">
<AgeRatioChart /> <HotPlateChart />
</div> </div>
</div> </div>
</div> </div>
<div class="dataScreen-ct"> <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">
<div class="dataScreen-map-title">调解中心分布点</div> <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 /> <ChinaMapChart />
</div> </div>
<div class="dataScreen-cb">
<div class="dataScreen-main-title">
历史30天调解催记趋势
</div>
<div class="dataScreen-main-chart">
<OverNext30Chart />
</div>
</div>
</div> </div>
<div class="dataScreen-rg"> <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-center">
<div class="dataScreen-main-title"> <div class="dataScreen-main-title">
调解中心回款金额 调解中心回款金额
...@@ -108,15 +63,18 @@ ...@@ -108,15 +63,18 @@
<AnnualUseChart /> <AnnualUseChart />
</div> </div>
</div> </div>
<div class="dataScreen-bottom"> </div>
<div class="dataScreen-main-title"> </div>
调解中心累计回款率 <div class="dataScreen-cb">
</div> <div class="flex justify-between">
<div class="dataScreen-main-chart"> <div class="dataScreen-main-title">
<PlatformSourceChart /> 作业量趋势分析
</div>
</div> </div>
</div> </div>
<div class="dataScreen-main-chart">
<OverNext30Chart />
</div>
</div> </div>
</div> </div>
</div> </div>
......
src/views/infoGather/customerGather/components/Credit.vue
View file @ 711a2c2a
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
v-model="showModal" v-model="showModal"
title="网贷&信用贷详情" title="网贷&信用贷详情"
height="512" height="512"
width="1303" width="1003"
show-footer show-footer
esc-closable esc-closable
> >
......
src/views/infoGather/customerGather/components/Creditcard.vue
View file @ 711a2c2a
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
v-model="showModal" v-model="showModal"
title="信用卡详情" title="信用卡详情"
height="512" height="512"
width="1303" width="1003"
show-footer show-footer
esc-closable esc-closable
> >
......
src/views/infoGather/customerGather/components/Customer.vue
View file @ 711a2c2a
...@@ -284,22 +284,22 @@ ...@@ -284,22 +284,22 @@
</table> </table>
</div> </div>
<div id="customerStaticWd" style="padding: 10px"> <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>
<h1 style="text-align: center;font-size: 20px">客户信息收集表(信用贷、网贷版)</h1> <table style="table-layout:fixed; page-break-after:always">
<table style="table-layout:fixed; page-break-after:always"> <customerPrint :data="form"></customerPrint>
<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> <creditPrint :data="item" :index="index" :sum="form.lending.length" style="page-break-after:always"></creditPrint>
</table> </template>
</div> </table>
</div> </div>
<div id="customerStaticXyk" style="padding: 10px"> <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>
<h1 style="text-align: center;font-size: 20px">客户信息收集表(信用卡)</h1> <table style="table-layout:fixed; page-break-after:always">
<table style="table-layout:fixed; page-break-after:always"> <customerPrint :data="form"></customerPrint>
<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> <cardPrint :data="item" :index="index" :sum="form.creditCard.length" style="page-break-after:always"></cardPrint>
</table> </template>
</div> </table>
</div> </div>
</div> </div>
</div> </div>
...@@ -441,6 +441,11 @@ const handleQuery = () => { ...@@ -441,6 +441,11 @@ const handleQuery = () => {
form.value = res.result form.value = res.result
cardConfig.data = res.result.creditCard cardConfig.data = res.result.creditCard
creditArr.value = res.result.lending 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