<template>
|
<div class="home">
|
<div class="home_inlet">
|
<div class="home_inlet_label">快捷入口</div>
|
<div class="home_inlet_list">
|
<div class="home_inlet_item" v-for="(item, index) in cate" :key="index" @click="jump(item.url)">
|
<img :src="item.icon" />
|
<span>{{item.name}}</span>
|
</div>
|
</div>
|
</div>
|
<div class="home_content">
|
<div class="home_content_left">
|
<div class="home_content_left_item" ref="picture1"></div>
|
<div class="home_content_left_item" ref="picture2"></div>
|
<div class="home_content_left_item" ref="picture3"></div>
|
</div>
|
<div class="home_content_right">
|
<div class="home_content_right_label" v-if="tabs && tabs.length>0" >代办事项</div>
|
<el-tabs v-model="activeName" @tab-click="handleClick" >
|
<el-tab-pane v-for="a in tabs" :key="a.path" :label="a.label" :name="a.name"></el-tab-pane>
|
</el-tabs>
|
<div v-if="activeName === '0'" v-permissions="['business:notice:insurance']" >
|
<div class="home_content_right_list">
|
<div class="list_item" v-for="(item, index) in 1" :key="index">
|
<div class="list_item_left">
|
<span>投保申请（待签署）</span>
|
<span>保险方案（雇主责任险A）</span>
|
</div>
|
<div class="list_item_center">
|
<span>安徽平安人力资源有限公司</span>
|
<span>提交时间 2023-09-11 00:00:00</span>
|
</div>
|
<div class="list_item_right">
|
<span>查看详情</span>
|
</div>
|
</div>
|
</div>
|
<div class="home_content_right_page">
|
<el-pagination
|
@current-change="handleCurrentChange"
|
:current-page="page"
|
:page-size="5"
|
layout="total, prev, pager, next, jumper"
|
:total="0">
|
</el-pagination>
|
</div>
|
</div>
|
<div v-if="activeName === '1'" v-permissions="['business:notice:tax']">
|
<div class="home_content_right_list">
|
<div class="list_item" v-for="(item, index) in 1" :key="index">
|
<div class="list_item_left">
|
<span>投保申请（待签署1）</span>
|
<span>保险方案（雇主责任险A）</span>
|
</div>
|
<div class="list_item_center">
|
<span>安徽平安人力资源有限公司</span>
|
<span>提交时间 2023-09-11 00:00:00</span>
|
</div>
|
<div class="list_item_right">
|
<span>查看详情</span>
|
</div>
|
</div>
|
</div>
|
<div class="home_content_right_page">
|
<el-pagination
|
@current-change="handleCurrentChange"
|
:current-page="page"
|
:page-size="5"
|
layout="total, prev, pager, next, jumper"
|
:total="0">
|
</el-pagination>
|
</div>
|
</div>
|
<div v-if="activeName === '2'" v-permissions="['business:notice:settle']">
|
<div class="home_content_right_list">
|
<div class="list_item" v-for="(item, index) in 1" :key="index">
|
<div class="list_item_left">
|
<span>投保申请（待签署2）</span>
|
<span>保险方案（雇主责任险A）</span>
|
</div>
|
<div class="list_item_center">
|
<span>安徽平安人力资源有限公司</span>
|
<span>提交时间 2023-09-11 00:00:00</span>
|
</div>
|
<div class="list_item_right">
|
<span>查看详情</span>
|
</div>
|
</div>
|
</div>
|
<div class="home_content_right_page">
|
<el-pagination
|
@current-change="handleCurrentChange"
|
:current-page="page"
|
:page-size="5"
|
layout="total, prev, pager, next, jumper"
|
:total="0">
|
</el-pagination>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import * as echarts from 'echarts';
|
import {mapState} from "vuex";
|
export default {
|
name: 'Index',
|
data () {
|
return {
|
activeName: '0',
|
tabs:[],
|
page: 1,
|
table:null,
|
cate: [
|
{
|
name: '投保申请',
|
url: '',
|
icon: require('../assets/logo.png')
|
},
|
{
|
name: '加保申请',
|
url: '',
|
icon: require('../assets/logo.png')
|
},
|
{
|
name: '减保申请',
|
url: '',
|
icon: require('../assets/logo.png')
|
},
|
{
|
name: '合同管理',
|
url: '',
|
icon: require('../assets/logo.png')
|
},
|
{
|
name: '提交报案',
|
url: '',
|
icon: require('../assets/logo.png')
|
}
|
]
|
}
|
},
|
computed: {
|
...mapState(['userInfo'])
|
},
|
mounted() {
|
this.setPicture1()
|
this.setPicture2()
|
this.setPicture3()
|
this.initPanel()
|
},
|
methods: {
|
initPanel(){
|
var pemissons = this.userInfo.permissions;
|
if(pemissons.includes("business:notice:insurance")){
|
this.tabs.push( {name:"0",label:"投保代办"})
|
}
|
if(pemissons.includes("business:notice:tax")){
|
this.tabs.push( {name:"1",label:"发票代办"})
|
}
|
if(pemissons.includes("business:notice:settle")){
|
this.tabs.push( {name:"2",label:"理赔代办"})
|
}
|
},
|
handleClick(e) {
|
this.activeName = e.name
|
},
|
handleCurrentChange(page) {
|
this.page = page
|
},
|
jump(url) {
|
if (!url) return;
|
this.$router.push({ path: url });
|
},
|
setPicture1 () {
|
let chartDom = this.$refs.picture1;
|
let myChart = echarts.init(chartDom);
|
let option
|
option = {
|
title: {
|
text: '当月保险金额',
|
left: '5%',
|
top: '5%'
|
},
|
tooltip: {
|
trigger: 'item'
|
},
|
series: [
|
{
|
type: 'pie',
|
radius: '50%',
|
data: [
|
{ value: 1048, name: '保障中' },
|
{ value: 735, name: '不在保' },
|
],
|
emphasis: {
|
itemStyle: {
|
shadowBlur: 10,
|
shadowOffsetX: 0,
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
}
|
}
|
}
|
]
|
};
|
|
option && myChart.setOption(option);
|
},
|
setPicture2 () {
|
let chartDom = this.$refs.picture2;
|
let myChart = echarts.init(chartDom);
|
let option
|
option = {
|
title: {
|
text: '当月在保人数',
|
left: '5%',
|
top: '5%'
|
},
|
grid: {
|
left: '3%',
|
right: '4%',
|
bottom: '13%',
|
containLabel: true
|
},
|
tooltip: {
|
trigger: 'axis'
|
},
|
xAxis: {
|
type: 'category',
|
data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
|
},
|
yAxis: {
|
type: 'value'
|
},
|
series: [
|
{
|
data: [10, 30, 25, 16, 21, 18, 5, 30, 30, 30, 30, 30],
|
type: 'line'
|
}
|
]
|
};
|
|
option && myChart.setOption(option);
|
},
|
setPicture3 () {
|
let chartDom = this.$refs.picture3;
|
let myChart = echarts.init(chartDom);
|
let option
|
option = {
|
title: {
|
text: '总赔付率 78%',
|
left: '5%',
|
top: '5%'
|
},
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'shadow'
|
}
|
},
|
grid: {
|
left: '3%',
|
right: '4%',
|
bottom: '25%',
|
containLabel: true
|
},
|
xAxis: {
|
type: 'value',
|
// boundaryGap: [0, 0.01]
|
},
|
yAxis: {
|
type: 'category',
|
data: ['保险A赔付率', '保险B赔付率', '总赔付率']
|
},
|
series: [
|
{
|
type: 'bar',
|
stack: 'total',
|
barWidth: '60%',
|
data: [10, 20, 30]
|
},
|
{
|
type: 'bar',
|
stack: 'total',
|
barWidth: '60%',
|
data: [15, 16, 24]
|
}
|
]
|
};
|
|
option && myChart.setOption(option);
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
@import "@/assets/style/variables.scss";
|
.home {
|
width: 100%;
|
height: 100%;
|
.home_inlet {
|
width: 100%;
|
height: 160px;
|
display: flex;
|
flex-direction: column;
|
padding: 20px;
|
box-sizing: border-box;
|
background: #ffffff;
|
.home_inlet_label {
|
width: 100%;
|
font-size: 18px;
|
font-weight: bold;
|
color: black;
|
margin-bottom: 20px;
|
}
|
.home_inlet_list {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
.home_inlet_item {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
cursor: pointer;
|
img {
|
width: 40px;
|
height: 40px;
|
}
|
span {
|
font-size: 14px;
|
color: black;
|
margin-top: 5px;
|
}
|
}
|
}
|
}
|
.home_content {
|
width: 100%;
|
height: calc(100% - 170px);
|
margin-top: 10px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.home_content_left {
|
width: 350px;
|
height: 100%;
|
flex-shrink: 0;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
.home_content_left_item {
|
width: 100%;
|
height: 32%;
|
background: #ffffff;
|
}
|
}
|
.home_content_right {
|
flex: 1;
|
height: 100%;
|
background: #ffffff;
|
margin-left: 10px;
|
padding: 20px;
|
box-sizing: border-box;
|
position: relative;
|
.home_content_right_label {
|
font-size: 18px;
|
color: black;
|
font-weight: bold;
|
}
|
.home_content_right_list {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
.list_item {
|
padding: 10px;
|
box-sizing: border-box;
|
width: 100%;
|
display: flex;
|
justify-content: space-between;
|
border: 1px solid #ececec;
|
margin-bottom: 15px;
|
&:last-child {
|
margin-bottom: 0 !important;
|
}
|
.list_item_left {
|
display: flex;
|
flex-direction: column;
|
span {
|
&:nth-child(1) {
|
font-size: 14px;
|
color: black;
|
font-weight: bold;
|
}
|
&:nth-child(2) {
|
font-size: 14px;
|
color: black;
|
margin-top: 5px;
|
}
|
}
|
}
|
.list_item_center {
|
display: flex;
|
flex-direction: column;
|
span {
|
font-size: 14px;
|
color: black;
|
&:nth-child(2) {
|
margin-top: 5px;
|
}
|
}
|
}
|
.list_item_right {
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
span {
|
font-size: 14px;
|
color: #1890FF;
|
margin-top: 10px;
|
cursor: pointer;
|
}
|
}
|
}
|
}
|
.home_content_right_page {
|
margin-top: 20px;
|
position: absolute;
|
bottom: 20px;
|
left: 20px;
|
box-sizing: border-box;
|
}
|
}
|
}
|
}
|
</style>
|
