<template>
|
<div class="box">
|
<div class="box_shua">
|
<el-button icon="el-icon-refresh" type="primary" @click="getChatData(),getData()">刷新数据</el-button>
|
</div>
|
<div class="box_head">
|
<div class="box_head_info">
|
<i class="el-icon-info"></i>
|
<span>展示当前系统合计总数，每天更新数据</span>
|
</div>
|
<div class="box_head_list" >
|
<div class="box_head_list_item">
|
<div class="box_head_list_item_top">
|
<span>累计投保企业</span>
|
<span>本月 +{{info.monthAddInsuranceCompanyNum || 0}}</span>
|
</div>
|
<div class="box_head_list_item_bottom">{{info.insuranceCompanyNum || 0}}</div>
|
</div>
|
<div class="box_head_list_item">
|
<div class="box_head_list_item_top">
|
<span>累计有效保单</span>
|
<span>本月 +{{info.monthAddInsuranceNum || 0 }}</span>
|
</div>
|
<div class="box_head_list_item_bottom">{{info.insuranceNum || 0}}</div>
|
</div>
|
<div class="box_head_list_item">
|
<div class="box_head_list_item_top">
|
<span>累计保障人员</span>
|
<span>本月 +{{info.monthAddMemberNum || 0}}</span>
|
</div>
|
<div class="box_head_list_item_bottom">{{info.memberNum || 0}}</div>
|
</div>
|
<div class="box_head_list_item">
|
<div class="box_head_list_item_top">
|
<span>合计总费用(元)</span>
|
<span>本月 +¥{{info.monthAddTotalFee || 0}}</span>
|
</div>
|
<div class="box_head_list_item_bottom">¥{{info.totalFee || 0}}</div>
|
</div>
|
</div>
|
</div>
|
<div class="box_content">
|
<div class="box_content_left">
|
<div class="box_content_left_title">当前在保数据</div>
|
<div class="box_content_left_list">
|
<div class="box_content_left_list_item" :style="{ backgroundColor: item.title!= ''? item.backgroundColor :'#fff'}" v-for="(item, index) in list" :key="index">
|
<div class="box_content_left_list_item_top" v-if="item.title != ''" >
|
<span>{{item.title}}</span>
|
</div>
|
<div class="box_content_left_list_item_bottom" v-if="item.title!= ''">
|
<span>{{item.num}}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="box_chart" >
|
<div class="box_chart_item" style="height: 400px">
|
<div class="box_content_right_title">
|
<span>直保和委托保占比</span>
|
</div>
|
<div class="box_chart_item_tu" id="tu1" ></div>
|
</div>
|
<div class="box_chart_item" style="height: 400px">
|
<div class="box_content_right_title">
|
<span>每月加减保人数</span>
|
</div>
|
<div class="box_chart_item_tu" id="tu2"></div>
|
</div>
|
</div>
|
<div class="box_chart">
|
<div class="box_chart_item" style=" width: 49.5%;height: 600px;">
|
<div class="box_content_right_title" >
|
<span>累计企业投保金额top10</span>
|
</div>
|
<div class="box_chart_item_tu" id="tu3"></div>
|
</div>
|
<div class="box_chart_item" style=" width: 49.5%;height: 600px;">
|
<div class="box_content_right_title">
|
<span>热门保险方案</span>
|
</div>
|
<div class="box_chart_item_tu" >
|
<el-table
|
v-loading="isWorking"
|
:data="dataList"
|
stripe
|
>
|
<el-table-column label="排名" width="80px">
|
<template slot-scope="scope">
|
<span>{{scope.$index + 1}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="name" label="子方案名称" min-width="100px">
|
<template slot-scope="{row}" >{{row.solutions.name||''}}</template>
|
</el-table-column>
|
<el-table-column prop="solutionBaseName" label="所属主方案" min-width="100px">
|
<template slot-scope="{row}">{{row.solutions.solutionBaseName}}</template>
|
</el-table-column>
|
<el-table-column prop="price" label="方案费用" min-width="100px">
|
<template slot-scope="{row}">
|
<span v-if="row.solutions.timeUnit == 3"> {{row.solutions.price ||0}}/人/年</span>
|
<span v-else-if="row.solutions.timeUnit == 2"> {{row.solutions.price ||0}}/人/月</span>
|
<span v-else-if="row.solutions.timeUnit == 1"> {{row.solutions.price ||0}}/人/半月</span>
|
<span v-else> {{row.solutions.fee ||0}}/人/天</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="dataSecond" label="使用数量" min-width="100px"></el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import * as echarts from 'echarts'
|
import 'echarts-wordcloud'
|
import { getInsuranceApplyDataVO, getInsuranceApplyReportDataVO } from '@/api/business/insuranceApply'
|
export default {
|
name: 'dataBoard',
|
data () {
|
return {
|
isWorking: false,
|
dataList: [],
|
dateType: 0,
|
list: [
|
{
|
title: '在保企业数',
|
num: 0,
|
percentage: 0,
|
color: '#EF4444',
|
backgroundColor: '#fdf6ec'
|
},
|
{
|
title: '在保保单数',
|
num: 0,
|
percentage: 0,
|
color: '#368157',
|
backgroundColor: '#fcfbe7'
|
},
|
{
|
title: '在保人数',
|
num: 0,
|
percentage: 0,
|
color: '#CA8A04',
|
backgroundColor: '#d6f7e5'
|
},
|
{
|
title: '',
|
num: 0,
|
color: '#9333EA',
|
backgroundColor: '#FAF5FF'
|
}
|
],
|
info: {},
|
tu1Data: [{ name: '直保', value: 0 }, { name: '委托保', value: 0 }],
|
chatData: null
|
}
|
},
|
created () {
|
this.$nextTick(() => {
|
this.setChartTu1(this.tu1Data)
|
this.setChartTu2(['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
|
, [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
|
, [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0])
|
this.setChartTu3([]
|
, [])
|
// this.setChartTu4([],[])
|
})
|
this.getInsuranceApplyReportDataVO()
|
this.getInsuranceApplyDataVO()
|
},
|
methods: {
|
getInsuranceApplyDataVO () {
|
getInsuranceApplyDataVO()
|
.then(res => {
|
this.info = res
|
this.info.monthAddTotalFee = (res.monthAddTotalFee || 0).toFixed(2)
|
this.info.totalFee = (res.totalFee || 0).toFixed(2)
|
this.list[0].num = this.info.useCompanyNum || 0
|
this.list[1].num = this.info.useInsuranceNum || 0
|
this.list[2].num = this.info.useMemberNum || 0
|
this.tu1Data[0].value = this.info.zbInsuranceNum || 0
|
this.tu1Data[1].value = this.info.wtbInsuranceNum || 0
|
this.setChartTu1(this.tu1Data)
|
console.log(res)
|
})
|
},
|
getInsuranceApplyReportDataVO () {
|
getInsuranceApplyReportDataVO()
|
.then(res => {
|
this.initChartData2(res)
|
this.initChartData3(res)
|
this.initChartData4(res)
|
})
|
},
|
initChartData4(res){
|
this.dataList = res.hotSolutionList || []
|
},
|
initChartData2 (res) {
|
var monthAddReduceList = res.monthAddReduceList || []
|
if (monthAddReduceList.length > 0) {
|
var data1 = []
|
var data2 = []
|
var data3 = []
|
monthAddReduceList.forEach(item => {
|
data1.push(item.dataFirst)
|
data2.push(item.dataSecond)
|
data3.push(item.dataThird)
|
})
|
this.setChartTu2(data1, data2, data3)
|
}
|
},
|
initChartData3 (res) {
|
var companyTopFeeList = res.companyTopFeeList || []
|
if (companyTopFeeList.length > 0) {
|
var data1 = []
|
var data2 = []
|
companyTopFeeList.forEach(item => {
|
data1.push(item.dataFirst)
|
data2.push(item.dataSecond)
|
})
|
this.setChartTu3(data1, data2)
|
}
|
},
|
changeDataType (type) {
|
this.dateType = type
|
},
|
setChartTu1 (data) {
|
const chartDom = document.getElementById('tu1')
|
const myChart = echarts.init(chartDom)
|
const option = {
|
tooltip: {
|
trigger: 'item'
|
},
|
label: {
|
alignTo: 'edge',
|
formatter: '{b}: ({d}%)',
|
minMargin: 5,
|
edgeDistance: 10,
|
lineHeight: 15,
|
rich: {
|
time: {
|
fontSize: 10,
|
color: '#999'
|
}
|
}
|
},
|
labelLine: {
|
length: 15,
|
length2: 0,
|
maxSurfaceAngle: 80
|
},
|
legend: {
|
top: '5%',
|
left: 'center'
|
},
|
series: [
|
{
|
name: '直保和委托保占比',
|
type: 'pie',
|
radius: ['40%', '70%'],
|
avoidLabelOverlap: false,
|
// label: {
|
// show: false,
|
// position: 'center'
|
// },
|
// emphasis: {
|
// label: {
|
// show: true,
|
// fontSize: 40,
|
// fontWeight: 'bold'
|
// }
|
// },
|
// labelLine: {
|
// show: true
|
// },
|
data: data
|
}
|
]
|
}
|
option && myChart.setOption(option)
|
window.addEventListener('resize', function () { // 执行
|
myChart.resize()
|
})
|
},
|
setChartTu2 (xData, yData, yData2) {
|
const chartDom = document.getElementById('tu2')
|
const myChart = echarts.init(chartDom)
|
const option = this.getBarOption2(xData, yData, yData2, 'rgba(207,58,24,0.83)')
|
option && myChart.setOption(option)
|
window.addEventListener('resize', function () { // 执行
|
myChart.resize()
|
})
|
},
|
setChartTu3 (dataX, dataY) {
|
var chartDom = document.getElementById('tu3')
|
var myChart = echarts.init(chartDom)
|
var option = {
|
grid: {
|
left: '3%',
|
right: '4%',
|
bottom: '3%',
|
containLabel: true
|
},
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'shadow'
|
}
|
},
|
xAxis: {
|
// position: 'top',
|
type: 'value'
|
// boundaryGap: [0, 0.01]
|
},
|
yAxis: {
|
type: 'category',
|
data: dataX,
|
inverse: true
|
},
|
series: [
|
{
|
name: '金额(元)',
|
type: 'bar',
|
itemStyle: {
|
color: '#f6d68d'
|
},
|
data: dataY
|
}
|
]
|
}
|
option && myChart.setOption(option)
|
window.addEventListener('resize', function () { // 执行
|
myChart.resize()
|
})
|
},
|
getBarOption2 (xd, yd, yd1, color) {
|
const option = {
|
grid: {
|
left: '3%',
|
right: '3%',
|
top: '10%',
|
bottom: '0%',
|
containLabel: true
|
},
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'shadow'
|
}
|
},
|
legend: {},
|
xAxis: {
|
type: 'category',
|
// boundaryGap: false,
|
data: xd
|
},
|
yAxis: {
|
type: 'value'
|
},
|
series: [
|
{
|
data: yd,
|
type: 'bar',
|
areaStyle: {
|
opacity: 0.5,
|
color: color || '#f07e6f'
|
},
|
lineStyle: {
|
color: color || '#f07e6f'
|
}
|
},
|
{
|
data: yd1,
|
type: 'bar',
|
areaStyle: {
|
opacity: 0.5,
|
color: color || '#f07e6f'
|
},
|
lineStyle: {
|
color: color || '#f07e6f'
|
}
|
}
|
]
|
}
|
return option
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.box {
|
width: 100%;
|
padding: 0 10px 30px 10px;
|
|
box-sizing: border-box;
|
.box_shua {
|
width: 100%;
|
display: flex;
|
justify-content: end;
|
margin-bottom: 10px;
|
}
|
.box_head {
|
width: 100%;
|
padding: 0 15px 15px 15px;
|
box-sizing: border-box;
|
background-color: #ffffff;
|
border-radius: 20px;
|
display: flex;
|
flex-direction: column;
|
box-shadow: 0 2px 6px 0 rgba(206,206,206,0.21);
|
.box_head_info {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
margin: 8px 0;
|
span {
|
color: rgba(16,16,16,1);
|
font-size: 14px;
|
margin-left: 5px;
|
}
|
}
|
.box_head_list {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.box_head_list_item {
|
width: 24%;
|
height: 100px;
|
padding: 15px;
|
box-sizing: border-box;
|
background-color: rgba(239,246,255,1);
|
border-radius: 20px;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
.box_head_list_item_top {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
span {
|
&:nth-child(1) {
|
color: rgba(154,154,154,1);
|
font-size: 14px;
|
}
|
&:nth-child(2) {
|
color: rgba(255,58,48,1);
|
font-size: 14px;
|
}
|
}
|
}
|
.box_head_list_item_bottom {
|
color: rgba(16,16,16,1);
|
font-size: 22px;
|
font-weight: bold;
|
}
|
}
|
}
|
}
|
.box_chart {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-top: 15px;
|
.datetype{
|
cursor: pointer;
|
color: #8c939d;
|
margin-right: 10px;
|
padding: 2px 10px;
|
font-size: 14px;
|
border: solid 1px #8c939d;
|
}
|
.seldatetype{
|
cursor: pointer;
|
color: #3170fe;
|
margin-right: 10px;
|
padding: 2px 10px;
|
font-size: 14px;
|
border: solid 1px #3170fe;
|
}
|
.box_chart_item {
|
&:nth-child(1) {
|
width: 32.5%;
|
}
|
&:nth-child(2) {
|
width: 67%;
|
}
|
height: 225px;
|
padding: 15px;
|
box-sizing: border-box;
|
background-color: #ffffff;
|
border-radius: 20px;
|
box-shadow: 0 2px 6px 0 rgba(206,206,206,0.21);
|
.box_chart_item_info {
|
display: flex;
|
align-items: center;
|
span {
|
color: rgba(154,154,154,1);
|
font-size: 14px;
|
margin-right: 5px;
|
}
|
}
|
.box_content_right_title {
|
font-weight: bold;
|
font-size: 16px;
|
color: #101010;
|
margin-bottom: 15px;
|
}
|
.box_chart_item_price {
|
color: rgba(16,16,16,1);
|
font-size: 22px;
|
margin-top: 4px;
|
font-weight: bold;
|
}
|
.box_chart_item_tu {
|
width: 100%;
|
height: 90%;
|
}
|
}
|
}
|
.box_shuju {
|
width: 32.5%;
|
height: 93px;
|
border-radius: 20px;
|
margin-top: 15px;
|
margin-bottom: 15px;
|
padding: 15px;
|
box-sizing: border-box;
|
background-color: #ffffff;
|
box-shadow: 0 2px 6px 0 rgba(206,206,206,0.21);
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.box_shuju_item {
|
width: 33%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
align-items: center;
|
.box_shuju_item_top {
|
display: flex;
|
align-items: center;
|
span {
|
color: rgba(154,154,154,1);
|
font-size: 14px;
|
margin-right: 4px;
|
}
|
}
|
.box_shuju_item_bottom {
|
color: rgba(16,16,16,1);
|
font-size: 22px;
|
font-weight: bold;
|
}
|
}
|
}
|
.box_content {
|
width: 100%;
|
height: 32s0px;
|
margin-top: 15px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.box_content_left {
|
width: 100%;
|
height: 100%;
|
background-color: #fff;
|
padding: 15px;
|
box-sizing: border-box;
|
.box_content_left_title {
|
font-weight: bold;
|
font-size: 22px;
|
color: #101010;
|
margin-top: 50px;
|
margin-bottom: 30px;
|
}
|
.box_content_left_list {
|
width: 100%;
|
display: flex;
|
flex-wrap: wrap;
|
align-items: center;
|
justify-content: space-between;
|
.box_content_left_list_item {
|
width: 24%;
|
height: 150px;
|
padding: 16px 20px;
|
box-sizing: border-box;
|
border-radius: 15px;
|
background-color: #FEF2F2;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
margin-bottom: 15px;
|
.box_content_left_list_item_top {
|
width: 100%;
|
flex: 1;
|
display: flex;
|
align-items: center;
|
text-align: center;
|
span {
|
width: 100%;
|
&:nth-child(1) {
|
color: rgba(75,85,99,1);
|
font-size: 18px;
|
}
|
}
|
}
|
.box_content_left_list_item_bottom {
|
width: 100%;
|
flex: 2;
|
display: flex;
|
align-items: center;
|
text-align: center;
|
font-weight: bold;
|
span {
|
width: 100%;
|
color: rgba(16,16,16,1);
|
font-size: 22px;
|
margin-right: 6px;
|
}
|
}
|
}
|
}
|
}
|
.box_content_right {
|
width: 0%;
|
height: 100%;
|
padding: 15px;
|
box-sizing: border-box;
|
background-color: #fff;
|
.box_content_right_title {
|
font-weight: bold;
|
font-size: 16px;
|
color: #101010;
|
margin-bottom: 15px;
|
}
|
.box_chart_item_tu {
|
width: 100%;
|
height: 130px;
|
}
|
}
|
}
|
}
|
</style>
|
