<template>
|
<div class="home">
|
<div class="home_inlet">
|
<div class="home_inlet_label">快捷入口</div>
|
<div class="home_inlet_list" v-if="userInfo.type==2" >
|
<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" :name="a.name" >
|
<span slot="label" title="点击刷新"> {{a.label }}
|
<el-badge v-if="(a.name==0?totalPage0:(a.name==1?totalPage1:totalPage2)) >0" :value="(a.name==0?totalPage0:(a.name==1?totalPage1:totalPage2)) " class="item"></el-badge>
|
</span>
|
</el-tab-pane>
|
</el-tabs>
|
<div v-if="activeName === '0'" >
|
<div class="home_content_right_list" v-if="tableData0&&tableData0.length">
|
<div class="list_item" v-for="(item, index) in tableData0" :key="index">
|
<div class="list_item_left">
|
<span>{{item.title}}（{{ item.typeDetail }}）</span>
|
<span>{{item.info}}（{{item.content}}）</span>
|
</div>
|
<div class="list_item_center">
|
<span>{{item.companyName}}</span>
|
<span>提交时间 {{item.createDate}}</span>
|
</div>
|
<div class="list_item_right">
|
<span @click="detail(item)">查看</span>
|
</div>
|
</div>
|
</div>
|
<div class="home_content_right_list" v-else>
|
<div class="list_item" style="width: 100%;font-size: 12px;display:block;color: #8c939d;text-align: center; padding: 20px">
|
暂无消息
|
</div>
|
</div>
|
<div class="home_content_right_page">
|
<el-pagination
|
@current-change="handleCurrentChange0"
|
:current-page="page0"
|
:page-size="5"
|
layout="total, prev, pager, next, jumper"
|
:total="totalPage0">
|
</el-pagination>
|
</div>
|
</div>
|
<div v-if="activeName === '1'" >
|
<div class="home_content_right_list" v-if="tableData1&&tableData1.length">
|
<div class="list_item" v-for="(item, index) in tableData1" :key="index">
|
<div class="list_item_left">
|
<span>{{item.title}}（{{ item.typeDetail }}）</span>
|
<span>{{item.info}}（{{item.content}}）</span>
|
</div>
|
<div class="list_item_center">
|
<span>{{item.companyName}}</span>
|
<span>提交时间 {{item.createDate}}</span>
|
</div>
|
<div class="list_item_right">
|
<span @click="detail(item)">查看</span>
|
</div>
|
</div>
|
</div>
|
<div class="home_content_right_list" v-else>
|
<div class="list_item" style="width: 100%;font-size: 12px;display:block;color: #8c939d;text-align: center; padding: 20px">
|
暂无消息
|
</div>
|
</div>
|
<div class="home_content_right_page">
|
<el-pagination
|
@current-change="handleCurrentChange1"
|
:current-page="page1"
|
:page-size="5"
|
layout="total, prev, pager, next, jumper"
|
:total="totalPage1">
|
</el-pagination>
|
</div>
|
</div>
|
</div>
|
</div>
|
<OperaInsuranceApplyWindow ref="operaInsuranceApplyWindow" @success="handleCurrentChange0()"/>
|
<OperaWtbApplyShopWindow ref="OperaWtbApplyShopWindow" @success="handleCurrentChange0()"/>
|
<OperaApplyChangeUnitDetailWindow ref="operaApplyChangeUnitDetailWindow" @success="handleCurrentChange0()"/>
|
<OperaApplyChangeDetailWindow ref="operaApplyChangeDetailWindow" @success="handleCurrentChange0()"/>
|
</div>
|
</template>
|
|
<script>
|
import * as echarts from 'echarts'
|
import { mapState } from 'vuex'
|
import OperaInsuranceApplyWindow from '@/components/business/OperaInsuranceApplyWindow'
|
import OperaWtbApplyShopWindow from '@/components/business/OperaWtbApplyShopWindow'
|
import OperaApplyChangeUnitDetailWindow from '@/components/business/OperaApplyChangeUnitDetailWindow'
|
import OperaApplyChangeDetailWindow from '@/components/business/OperaApplyChangeDetailWindow'
|
import { fetchList as noticeList } from '@/api/business/notices'
|
export default {
|
components: {
|
OperaInsuranceApplyWindow,
|
OperaApplyChangeDetailWindow,
|
OperaApplyChangeUnitDetailWindow,
|
OperaWtbApplyShopWindow
|
},
|
name: 'Index',
|
data () {
|
return {
|
activeName: '0',
|
tabs: [],
|
page0: 1,
|
page1: 1,
|
page2: 1,
|
totalPage2: 0,
|
totalPage1: 0,
|
totalPage0: 0,
|
tableData0: [],
|
tableData1: [],
|
tableData2: [],
|
cate: [
|
{
|
name: '投保申请审核',
|
url: '/business/insuranceApplyShop',
|
icon: require('../assets/icons/plat/apply_check.png')
|
},
|
{
|
name: '加/减保申请审核',
|
url: '/business/applyChangeShop',
|
icon: require('../assets/icons/plat/change_apply_check.png')
|
},
|
{
|
name: '更换派遣单位申请审核',
|
url: '/business/switchCourtShop',
|
icon: require('../assets/icons/plat/apply_check.png')
|
} ,
|
{
|
name: '投保审核',
|
url: '/business/insuranceApply',
|
icon: require('../assets/icons/plat/apply_check.png')
|
},
|
{
|
name: '加/减保审核',
|
url: '/business/applyChange',
|
icon: require('../assets/icons/plat/change_apply_check.png')
|
},
|
{
|
name: '更换派遣单位审核',
|
url: '/business/switchCourt',
|
icon: require('../assets/icons/plat/apply_check.png')
|
}
|
]
|
}
|
},
|
computed: {
|
...mapState(['userInfo'])
|
},
|
mounted () {
|
this.setPicture1()
|
this.setPicture2()
|
this.setPicture3()
|
this.initPanel()
|
this.setLoadTimer()
|
},
|
methods: {
|
detail (obj) {
|
if(obj && obj.type === 7){
|
if (obj.objType === 0) {
|
this.$refs.OperaWtbApplyShopWindow.open('投保申请详情', { id: obj.objId })
|
} else if (obj.objType === 1) {
|
this.$refs.operaApplyChangeDetailWindow.open('加减保详情', { id: obj.objId, applyId: obj.param1 })
|
} else if (obj.objType === 2) {
|
this.$refs.operaApplyChangeUnitDetailWindow.open('更换派遣单位申请详情', { id: obj.objId, applyId: obj.param1 })
|
}
|
}else {
|
if (obj.objType === 0) {
|
this.$refs.operaInsuranceApplyWindow.open('投保申请详情', { id: obj.objId })
|
} else if (obj.objType === 1) {
|
this.$refs.operaApplyChangeDetailWindow.open('加减保详情', { id: obj.objId, applyId: obj.param1 })
|
} else if (obj.objType === 2) {
|
this.$refs.operaApplyChangeUnitDetailWindow.open('更换派遣单位申请详情', { id: obj.objId, applyId: obj.param1 })
|
}
|
}
|
},
|
setLoadTimer () {
|
var that = this
|
this.initLoadData()
|
if (window.timer) {
|
clearInterval(window.timer)
|
}
|
window.timer = setInterval(() => {
|
that.initLoadData()
|
}, 60000)
|
},
|
initLoadData () {
|
this.handleCurrentChange0(0)
|
this.handleCurrentChange1(0)
|
},
|
getNoticeList (type, page) {
|
noticeList({
|
page: page,
|
capacity: 5,
|
model: { queryType: type },
|
sorts: []
|
})
|
.then(response => {
|
if (type === 3) {
|
this.tableData0 = response.records
|
this.totalPage0 = response.total
|
}
|
if (type === 4) {
|
this.tableData1 = response.records
|
this.totalPage1 = response.total
|
}
|
})
|
.catch(e => {
|
this.$tip.apiFailed(e)
|
})
|
},
|
initPanel () {
|
this.tabs.push({ name: '0', label: '直接投保待办' })
|
this.tabs.push({ name: '1', label: '委托投保待办' })
|
},
|
handleClick (e) {
|
this.activeName = e.name
|
if (this.activeName === '0') {
|
this.handleCurrentChange0(0)
|
} else if (this.activeName === '1') {
|
this.handleCurrentChange1(0)
|
}
|
},
|
handleCurrentChange0 (page) {
|
this.page0 = page
|
this.getNoticeList(3, this.page0)
|
},
|
handleCurrentChange1 (page) {
|
this.page1 = page
|
this.getNoticeList(4, this.page1)
|
},
|
jump (url) {
|
if (!url) return
|
this.$router.push({ path: url })
|
},
|
setPicture1 () {
|
const chartDom = this.$refs.picture1
|
const 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 () {
|
const chartDom = this.$refs.picture2
|
const 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 () {
|
const chartDom = this.$refs.picture3
|
const 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;
|
width: 60%;
|
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: relative;
|
bottom: 20px;
|
left: 20px;
|
box-sizing: border-box;
|
}
|
}
|
}
|
}
|
</style>
|
