<template>
|
<div class="box">
|
<div class="box_shua">
|
<el-button icon="el-icon-refresh" type="primary">刷新数据</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>本月 +3</span>
|
</div>
|
<div class="box_head_list_item_bottom">32</div>
|
</div>
|
<div class="box_head_list_item">
|
<div class="box_head_list_item_top">
|
<span>保单数</span>
|
<span>本月 +12</span>
|
</div>
|
<div class="box_head_list_item_bottom">88</div>
|
</div>
|
<div class="box_head_list_item">
|
<div class="box_head_list_item_top">
|
<span>在保人数</span>
|
<span>本月 +300</span>
|
</div>
|
<div class="box_head_list_item_bottom">2,000</div>
|
</div>
|
<div class="box_head_list_item">
|
<div class="box_head_list_item_top">
|
<span>已收费用合计</span>
|
<span>本月 +813,789.00</span>
|
</div>
|
<div class="box_head_list_item_bottom">¥6,345,654.00</div>
|
</div>
|
</div>
|
</div>
|
<div class="box_chart">
|
<div class="box_chart_item">
|
<div class="box_chart_item_info">
|
<span>总理赔金额</span>
|
<i class="el-icon-info"></i>
|
</div>
|
<div class="box_chart_item_price">¥2,345,654.00</div>
|
<div class="box_chart_item_tu" id="tu1"></div>
|
</div>
|
<div class="box_chart_item">
|
<div class="box_chart_item_info">
|
<span>总理赔案件数</span>
|
<i class="el-icon-info"></i>
|
</div>
|
<div class="box_chart_item_price">1,234</div>
|
<div class="box_chart_item_tu" id="tu2"></div>
|
</div>
|
<div class="box_chart_item">
|
<div class="box_chart_item_info">
|
<span>平均理赔处理时长</span>
|
<i class="el-icon-info"></i>
|
</div>
|
<div class="box_chart_item_price">10.5天</div>
|
<div class="box_chart_item_tu" id="tu3"></div>
|
</div>
|
</div>
|
<div class="box_shuju">
|
<div class="box_shuju_item">
|
<div class="box_shuju_item_top">
|
<span>受理率</span>
|
<i class="el-icon-info"></i>
|
</div>
|
<div class="box_shuju_item_bottom">95.3%</div>
|
</div>
|
<div class="box_shuju_item">
|
<div class="box_shuju_item_top">
|
<span>拒赔率</span>
|
<i class="el-icon-info"></i>
|
</div>
|
<div class="box_shuju_item_bottom">12.8%</div>
|
</div>
|
<div class="box_shuju_item">
|
<div class="box_shuju_item_top">
|
<span>结案率</span>
|
<i class="el-icon-info"></i>
|
</div>
|
<div class="box_shuju_item_bottom">88.9%</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.backgroundColor }" v-for="(item, index) in list" :key="index">
|
<div class="box_content_left_list_item_top">
|
<span>{{item.title}}</span>
|
<span :style="{ color: item.color }">{{item.num}}</span>
|
</div>
|
<div class="box_content_left_list_item_bottom">
|
<span>较上月</span>
|
<div class="box_content_left_list_item_bottom_lv">
|
8.3%
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="box_content_right">
|
<div class="box_content_right_title">风险案件监控</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import * as echarts from 'echarts'
|
export default {
|
name: "dataBoard",
|
data() {
|
return {
|
list: [
|
{
|
title: '多次出险',
|
num: 0,
|
color: '#EF4444',
|
backgroundColor: '#FEF2F2'
|
},
|
{
|
title: '重复报案',
|
num: 0,
|
color: '#EA580C',
|
backgroundColor: '#FFF7ED'
|
},
|
{
|
title: '索赔过多',
|
num: 0,
|
color: '#CA8A04',
|
backgroundColor: '#FEFCE8'
|
},
|
{
|
title: '多次出险',
|
num: 0,
|
color: '#2563EB',
|
backgroundColor: '#EFF6FF'
|
},
|
{
|
title: '新员工出险',
|
num: 0,
|
color: '#9333EA',
|
backgroundColor: '#FAF5FF'
|
},
|
{
|
title: '延迟报案',
|
num: 0,
|
color: '#4F46E5',
|
backgroundColor: '#EEF2FF'
|
}
|
]
|
}
|
},
|
created() {
|
this.$nextTick(() => {
|
this.setChart1()
|
this.setChart2()
|
this.setChart3()
|
})
|
},
|
methods: {
|
setChart1() {
|
const chartDom = document.getElementById('tu1')
|
const myChart = echarts.init(chartDom)
|
let option
|
option = {
|
grid: {
|
left: '3%',
|
right: '3%',
|
top: '10%',
|
bottom: '0%',
|
containLabel: true
|
},
|
xAxis: {
|
type: 'category',
|
boundaryGap: false,
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
},
|
yAxis: {
|
type: 'value'
|
},
|
series: [
|
{
|
data: [2, 7, 3, 12, 16, 9, 6],
|
type: 'line',
|
areaStyle: {},
|
smooth: true
|
}
|
]
|
}
|
|
option && myChart.setOption(option)
|
},
|
setChart2() {
|
const chartDom = document.getElementById('tu2')
|
const myChart = echarts.init(chartDom)
|
let option
|
option = {
|
grid: {
|
left: '3%',
|
right: '3%',
|
top: '10%',
|
bottom: '0%',
|
containLabel: true
|
},
|
xAxis: {
|
type: 'category',
|
boundaryGap: false,
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
},
|
yAxis: {
|
type: 'value'
|
},
|
series: [
|
{
|
data: [2, 7, 3, 12, 16, 9, 6],
|
type: 'line',
|
areaStyle: {},
|
smooth: true
|
}
|
]
|
}
|
|
option && myChart.setOption(option)
|
},
|
setChart3() {
|
const chartDom = document.getElementById('tu3')
|
const myChart = echarts.init(chartDom)
|
let option
|
option = {
|
grid: {
|
left: '3%',
|
right: '3%',
|
top: '10%',
|
bottom: '0%',
|
containLabel: true
|
},
|
xAxis: {
|
type: 'category',
|
boundaryGap: false,
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
},
|
yAxis: {
|
type: 'value'
|
},
|
series: [
|
{
|
data: [2, 7, 3, 12, 16, 9, 6],
|
type: 'line',
|
areaStyle: {},
|
smooth: true
|
}
|
]
|
}
|
|
option && myChart.setOption(option)
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.box {
|
width: 100%;
|
padding: 0 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;
|
.box_chart_item {
|
width: 32.5%;
|
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_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: 130px;
|
}
|
}
|
}
|
.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: 270px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.box_content_left {
|
width: 66%;
|
height: 100%;
|
background-color: #fff;
|
padding: 15px;
|
box-sizing: border-box;
|
.box_content_left_title {
|
font-weight: bold;
|
font-size: 16px;
|
color: #101010;
|
margin-bottom: 15px;
|
}
|
.box_content_left_list {
|
width: 100%;
|
display: flex;
|
flex-wrap: wrap;
|
align-items: center;
|
justify-content: space-between;
|
.box_content_left_list_item {
|
width: 32%;
|
height: 94px;
|
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%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
span {
|
&:nth-child(1) {
|
color: rgba(75,85,99,1);
|
font-size: 18px;
|
}
|
&:nth-child(2) {
|
color: rgba(239,68,68,1);
|
font-size: 16px;
|
}
|
}
|
}
|
.box_content_left_list_item_bottom {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
span {
|
color: rgba(16,16,16,1);
|
font-size: 14px;
|
margin-right: 6px;
|
}
|
.box_content_left_list_item_bottom_lv {
|
color: rgba(239,68,68,1);
|
font-size: 14px;
|
}
|
}
|
}
|
}
|
}
|
.box_content_right {
|
width: 33%;
|
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;
|
}
|
}
|
}
|
}
|
</style>
|
