| | |
| | | <template> |
| | | <template> |
| | | <div class="home"> |
| | | <div class="home_inlet"> |
| | | <div class="home_inlet_label">快捷入口</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" > |
| | | <div class="home_content_left_item" v-if="userInfo.type == 0" ref="picture1"></div> |
| | | <div class="home_content_left_item" v-if="userInfo.type == 1" ref="picture4"></div> |
| | | <div class="home_content_left_item" ref="picture2"></div> |
| | | <div class="home_content_left_item" ref="picture3"></div> |
| | | <div class="home_content_left_item" v-if="userInfo.type == 0" ref="picture3"></div> |
| | | <div class="home_content_left_item" v-if="userInfo.type == 1" ref="picture6"></div> |
| | | </div> |
| | | <div class="home_content_right"> |
| | | <div class="home_content_right_label" v-if="tabs && tabs.length>0" >代办事项</div> |
| | | <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> |
| | | <el-badge v-if="getTotalNoticeCount(a) >0" :value="getTotalNoticeCount(a) " class="item"></el-badge> |
| | | </span> |
| | | </el-tab-pane> |
| | | </el-tabs> |
| | |
| | | <div class="list_item_left"> |
| | | <span>{{item.title}}({{ item.typeDetail }})</span> |
| | | <span>{{item.info}}({{item.content}})</span> |
| | | <!-- |
| | | <span style="font-size: 12px;color: #8c939d;margin-top: 10px">{{item.createDate}}</span> |
| | | --> |
| | | </div> |
| | | <div class="list_item_center"> |
| | | <span>{{item.companyName}}</span> |
| | |
| | | </el-pagination> |
| | | </div> |
| | | </div> |
| | | <div v-if="activeName === '6'"> |
| | | <div class="home_content_right_list" v-if="tableData6 && tableData6.length"> |
| | | <div class="list_item" v-for="(item, index) in tableData6" :key="index"> |
| | | <div class="list_item_left"> |
| | | <span>{{item.title}}({{ item.typeDetail }})</span> |
| | | <span>{{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="jump('/business/contract')">查看</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="handleCurrentChange6" |
| | | :current-page="page6" |
| | | :page-size="5" |
| | | layout="total, prev, pager, next, jumper" |
| | | :total="totalPage6"> |
| | | </el-pagination> |
| | | </div> |
| | | </div> |
| | | <div v-if="activeName === '7'"> |
| | | <div class="home_content_right_list" v-if="tableData7 && tableData7.length"> |
| | | <div class="list_item" v-for="(item, index) in tableData7" :key="index"> |
| | | <div class="list_item_left"> |
| | | <span>{{item.title}}({{ item.typeDetail }})</span> |
| | | <span>{{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="jump('/business/solutions')">查看</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="handleCurrentChange7" |
| | | :current-page="page7" |
| | | :page-size="5" |
| | | layout="total, prev, pager, next, jumper" |
| | | :total="totalPage7"> |
| | | </el-pagination> |
| | | </div> |
| | | </div> |
| | | <div v-if="activeName === '8'"> |
| | | <div class="home_content_right_list" v-if="tableData8 && tableData8.length"> |
| | | <div class="list_item" v-for="(item, index) in tableData8" :key="index"> |
| | | <div class="list_item_left"> |
| | | <span>{{item.title}}(待审核)</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="jump('/business/companyUserApply')">查看</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="handleCurrentChange8" |
| | | :current-page="page8" |
| | | :page-size="5" |
| | | layout="total, prev, pager, next, jumper" |
| | | :total="totalPage8"> |
| | | </el-pagination> |
| | | </div> |
| | | </div> |
| | | |
| | | </div> |
| | | </div> |
| | | <OperaInsuranceApplyWindow ref="operaInsuranceApplyWindow" @success="handleCurrentChange0()"/> |
| | | <OperaInsuranceApplyShopWindow ref="operaInsuranceApplyShopWindow" @success="handleCurrentChange0()"/> |
| | | <OperaWtbApplyShopWindow ref="OperaWatbApplyShopWindow" @success="handleCurrentChange0()"/> |
| | | <dispatchUnitDetailsPlat ref="dispatchUnitDetailsPlat" @success="handleCurrentChange0()"/> |
| | | <OperaSettleClaimsWindow ref="operaSettleClaimsWindow" @success="handleCurrentChange2()"/> |
| | | <OperaApplyChangeUnitDetailWindow ref="operaApplyChangeUnitDetailWindow" @success="handleCurrentChange0()"/> |
| | |
| | | import * as echarts from 'echarts' |
| | | import { mapState } from 'vuex' |
| | | import OperaInsuranceApplyWindow from '@/components/business/OperaInsuranceApplyWindow' |
| | | import OperaInsuranceApplyShopWindow from '@/components/business/OperaInsuranceApplyShopWindow' |
| | | import dispatchUnitDetailsPlat from '@/components/business/dispatchUnitDetailsPlat' |
| | | import OperaApplyChangeUnitDetailWindow from '@/components/business/OperaApplyChangeUnitDetailWindow' |
| | | import OperaSettleClaimsWindow from '@/components/business/OperaSettleClaimsWindow' |
| | | import OperaApplyChangeDetailWindow from '@/components/business/OperaApplyChangeDetailWindow' |
| | | import OperaTaxesWindow from '@/components/business/OperaTaxesWindow' |
| | | import { fetchList as noticeList, deleById } from '@/api/business/notices' |
| | | import { getAddReduceData, getSettleClaimsMoney, getInsuranceNum, getInsuranceApplyStatusData, getInsuranceMemberData, getInsuranceApplyDataVO, getInsuranceApplyReportDataVO } from '@/api/business/insuranceApply' |
| | | import OperaWtbApplyShopWindow from '@/components/business/OperaWtbApplyShopWindow' |
| | | |
| | | export default { |
| | | components: { |
| | | OperaWtbApplyShopWindow, |
| | | OperaInsuranceApplyWindow, |
| | | dispatchUnitDetailsPlat, |
| | | OperaTaxesWindow, |
| | | OperaSettleClaimsWindow, |
| | | OperaApplyChangeDetailWindow, |
| | | OperaApplyChangeUnitDetailWindow, |
| | | OperaInsuranceApplyShopWindow |
| | | OperaApplyChangeUnitDetailWindow |
| | | }, |
| | | name: 'Index', |
| | | data () { |
| | |
| | | page0: 1, |
| | | page1: 1, |
| | | page2: 1, |
| | | page6: 1, |
| | | page7: 1, |
| | | page8: 1, |
| | | totalPage8: 0, |
| | | totalPage7: 0, |
| | | totalPage6: 0, |
| | | totalPage2: 0, |
| | | totalPage1: 0, |
| | | totalPage0: 0, |
| | | tableData0: [], |
| | | tableData1: [], |
| | | tableData2: [], |
| | | tableData6: [], |
| | | tableData7: [], |
| | | tableData8: [], |
| | | cate: [ |
| | | { |
| | | name: '投保申请', |
| | |
| | | ...mapState(['userInfo']) |
| | | }, |
| | | mounted () { |
| | | this.setPicture1() |
| | | if (this.userInfo.type == 0) { |
| | | this.setPicture1() |
| | | this.setPicture3() |
| | | } else if (this.userInfo.type == 1) { |
| | | this.setPicture4() |
| | | this.setPicture6() |
| | | } |
| | | this.setPicture2() |
| | | this.setPicture3() |
| | | this.initPanel() |
| | | this.setLoadTimer() |
| | | }, |
| | | methods: { |
| | | getTotalNoticeCount (a) { |
| | | if (a.name == 0) { |
| | | return this.totalPage0 |
| | | } else if (a.name == 1) { |
| | | return this.totalPage1 |
| | | } else if (a.name == 2) { |
| | | return this.totalPage2 |
| | | } else if (a.name == 6) { |
| | | return this.totalPage6 |
| | | } else if (a.name == 7) { |
| | | return this.totalPage7 |
| | | } else if (a.name == 8) { |
| | | return this.totalPage8 |
| | | } |
| | | |
| | | return 0 |
| | | }, |
| | | detail (obj) { |
| | | if (obj.objType === 0) { |
| | | if(obj.solutionType == 1){ |
| | | this.$refs.operaInsuranceApplyWindow.open('投保申请详情', { id: obj.objId }) |
| | | }else{ |
| | | this.$refs.operaInsuranceApplyWindow.open('投保申请详情', { id: obj.objId }) |
| | | } |
| | | getDetail(obj.objId).then(res => { |
| | | if (res.solutionType == 0) { |
| | | this.$refs.operaInsuranceApplyWindow.open('投保申请详情', { id: obj.objId }) |
| | | } else { |
| | | this.$refs.OperaWtbApplyShopWindow.open('委托投保申请详情', { id: obj.objId }) |
| | | } |
| | | }).catch(err => { |
| | | }) |
| | | } else if (obj.objType === 1) { |
| | | this.$refs.operaApplyChangeDetailWindow.open('加减保详情', { id: obj.objId, applyId: obj.param1 }) |
| | | getChangeDetail(obj.objId).then(res => { |
| | | this.$refs.operaApplyChangeDetailWindow.open('加减保详情', { id: obj.objId, applyId: res.applyId }) |
| | | }).catch(err => { |
| | | }) |
| | | } else if (obj.objType === 2) { |
| | | this.$refs.operaApplyChangeUnitDetailWindow.open('更换派遣单位申请详情', { id: obj.objId, applyId: obj.param1 }) |
| | | getChangeDetail(obj.objId).then(res => { |
| | | this.$refs.operaApplyChangeUnitDetailWindow.open('更换派遣单位申请详情', { id: obj.objId, applyId: res.applyId }) |
| | | }).catch(err => { |
| | | }) |
| | | } else if (obj.objType === 3) { |
| | | this.$refs.dispatchUnitDetailsPlat.open('派遣单详情', { id: obj.objId }) |
| | | } else if (obj.objType === 4) { |
| | | this.$refs.OperaTaxesWindow.open('开票申请详情', { id: obj.objId }) |
| | | } else if (obj.objType === 5) { |
| | | deleById(obj.id) |
| | | .then(res => { |
| | | this.tableData2.forEach((item, index) => { |
| | | if (item.id === obj.id) { |
| | | this.tableData2.splice(index, 1) |
| | | this.totalPage2 = this.totalPage2 - 1 |
| | | } |
| | | this.$refs.operaSettleClaimsWindow.open('报案理赔详情', obj.objId) |
| | | if ([1, 4, 7, 13, 14, 15, 16, 17, 18].includes(obj.type)) { |
| | | // 如果是提醒累消息,删除通知 |
| | | deleById(obj.id) |
| | | .then(res => { |
| | | this.tableData2.forEach((item, index) => { |
| | | if (item.id === obj.id) { |
| | | this.tableData2.splice(index, 1) |
| | | this.totalPage2 = this.totalPage2 - 1 |
| | | } |
| | | }) |
| | | // this.$refs.operaSettleClaimsWindow.open('报案理赔详情', obj.objId) |
| | | }) |
| | | this.$refs.operaSettleClaimsWindow.open('理赔详情', { id: obj.objId }) |
| | | }) |
| | | } |
| | | } |
| | | }, |
| | | setLoadTimer () { |
| | |
| | | clearInterval(window.timer) |
| | | } |
| | | window.timer = setInterval(() => { |
| | | that.initLoadData() |
| | | that.initLoadData() |
| | | }, 60000) |
| | | }, |
| | | initLoadData(){ |
| | | initLoadData () { |
| | | var pemissons = this.userInfo.permissions |
| | | if (pemissons.includes('business:notice:insurance')) { |
| | | this.handleCurrentChange0(0) |
| | |
| | | if (type === 1) { |
| | | this.tableData1 = response.records |
| | | this.totalPage1 = response.total |
| | | } if (type === 2) { |
| | | } |
| | | if (type === 2) { |
| | | this.tableData2 = response.records |
| | | this.totalPage2 = response.total |
| | | } |
| | | if (type === 6) { |
| | | this.tableData6 = response.records |
| | | this.totalPage6 = response.total |
| | | } |
| | | if (type === 7) { |
| | | this.tableData7 = response.records |
| | | this.totalPage7 = response.total |
| | | } |
| | | if (type === 8) { |
| | | this.tableData8 = response.records |
| | | this.totalPage8 = response.total |
| | | } |
| | | }) |
| | | .catch(e => { |
| | |
| | | var pemissons = this.userInfo.permissions |
| | | |
| | | if (pemissons.includes('business:notice:insurance')) { |
| | | this.tabs.push({ name: '0', label: '投保代办' }) |
| | | this.tabs.push({ name: '0', label: '投保待办' }) |
| | | // this.handleCurrentChange0(0); |
| | | } |
| | | if (pemissons.includes('business:notice:tax') && this.userInfo.type !== 1) { |
| | | this.tabs.push({ name: '1', label: '发票代办' }) |
| | | this.tabs.push({ name: '1', label: '发票待办' }) |
| | | // this.handleCurrentChange1(0); |
| | | } |
| | | if (pemissons.includes('business:notice:settle')) { |
| | | this.tabs.push({ name: '2', label: '理赔提醒' }) |
| | | this.tabs.push({ name: '2', label: '报案理赔' }) |
| | | // this.handleCurrentChange2(0); |
| | | } |
| | | if (this.userInfo.type === 1) { |
| | | this.tabs.push({ name: '7', label: '方案签署提醒' }) |
| | | } |
| | | this.tabs.push({ name: '6', label: '合同签署提醒' }) |
| | | if (this.userInfo.type === 0) { |
| | | this.tabs.push({ name: '8', label: '集团申请提醒' }) |
| | | } |
| | | /* if (pemissons.includes('business:notice:insurance')) { |
| | | this.getNoticeList(0, this.page0) |
| | |
| | | this.handleCurrentChange1(0) |
| | | } else if (this.activeName === '2') { |
| | | this.handleCurrentChange2(0) |
| | | } else if (this.activeName === '6') { |
| | | this.handleCurrentChange6(0) |
| | | } else if (this.activeName === '7') { |
| | | this.handleCurrentChange7(0) |
| | | } else if (this.activeName === '8') { |
| | | this.handleCurrentChange8(0) |
| | | } |
| | | }, |
| | | handleCurrentChange0 (page) { |
| | |
| | | this.page2 = page |
| | | this.getNoticeList(2, this.page2) |
| | | }, |
| | | handleCurrentChange6 (page) { |
| | | this.page6 = page |
| | | this.getNoticeList(6, this.page6) |
| | | }, |
| | | handleCurrentChange7 (page) { |
| | | this.page7 = page |
| | | this.getNoticeList(7, this.page7) |
| | | }, |
| | | handleCurrentChange8 (page) { |
| | | this.page8 = page |
| | | this.getNoticeList(8, this.page8) |
| | | }, |
| | | 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)' |
| | | getInsuranceNum() |
| | | .then(res => { |
| | | const chartDom = this.$refs.picture1 |
| | | const myChart = echarts.init(chartDom) |
| | | const option = { |
| | | title: { |
| | | text: '已投保单', |
| | | left: '5%', |
| | | top: '5%' |
| | | }, |
| | | legend: { |
| | | orient: 'vertical', |
| | | left: 'right', |
| | | top: '30%' |
| | | }, |
| | | tooltip: { |
| | | trigger: 'item' |
| | | }, |
| | | label: { |
| | | alignTo: 'edge', |
| | | formatter: '{b}: ({d}%)', |
| | | minMargin: 5, |
| | | edgeDistance: 10, |
| | | lineHeight: 15, |
| | | rich: { |
| | | time: { |
| | | fontSize: 10, |
| | | color: '#999' |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | series: [ |
| | | { |
| | | type: 'pie', |
| | | data: [ |
| | | { value: res.zbInsuranceNum || 0, name: '直保' }, |
| | | { value: res.wtbInsuranceNum || 0, name: '委托投保' } |
| | | ], |
| | | radius: ['30%', '50%'], |
| | | avoidLabelOverlap: false, |
| | | emphasis: { |
| | | itemStyle: { |
| | | shadowBlur: 10, |
| | | shadowOffsetX: 0, |
| | | shadowColor: 'rgba(0, 0, 0, 0.5)' |
| | | } |
| | | } |
| | | } |
| | | ] |
| | | } |
| | | ] |
| | | } |
| | | |
| | | option && myChart.setOption(option) |
| | | option && myChart.setOption(option) |
| | | }) |
| | | }, |
| | | setPicture4 () { |
| | | getInsuranceApplyStatusData() |
| | | .then(res => { |
| | | const chartDom = this.$refs.picture4 |
| | | const myChart = echarts.init(chartDom) |
| | | var yd = [] |
| | | if (res && res.length > 0) { |
| | | res.forEach(item => { |
| | | yd.push({ name: item.dataFirst, value: item.dataSecond || 0 }) |
| | | }) |
| | | } |
| | | const option = { |
| | | title: { |
| | | text: '已投保单各状态占比', |
| | | left: '5%', |
| | | top: '5%' |
| | | }, |
| | | legend: { |
| | | orient: 'vertical', |
| | | left: 'right', |
| | | top: '30%' |
| | | }, |
| | | tooltip: { |
| | | trigger: 'item' |
| | | }, |
| | | label: { |
| | | alignTo: 'edge', |
| | | formatter: '{b}: ({c}个)', |
| | | minMargin: 5, |
| | | edgeDistance: 10, |
| | | lineHeight: 15, |
| | | rich: { |
| | | time: { |
| | | fontSize: 10, |
| | | color: '#999' |
| | | } |
| | | } |
| | | }, |
| | | series: [ |
| | | { |
| | | type: 'pie', |
| | | data: yd, |
| | | radius: ['30%', '50%'], |
| | | avoidLabelOverlap: false, |
| | | emphasis: { |
| | | itemStyle: { |
| | | shadowBlur: 10, |
| | | shadowOffsetX: 0, |
| | | shadowColor: 'rgba(0, 0, 0, 0.5)' |
| | | } |
| | | } |
| | | } |
| | | ] |
| | | } |
| | | |
| | | option && myChart.setOption(option) |
| | | }) |
| | | }, |
| | | setPicture6 () { |
| | | getInsuranceMemberData() |
| | | .then(res => { |
| | | const chartDom = this.$refs.picture6 |
| | | const myChart = echarts.init(chartDom) |
| | | var yd = [] |
| | | if (res && res.length > 0) { |
| | | res.forEach(item => { |
| | | yd.push({ name: item.dataFirst, value: item.dataSecond || 0 }) |
| | | }) |
| | | } |
| | | const option = { |
| | | title: { |
| | | text: '在保员工', |
| | | left: '5%', |
| | | top: '5%' |
| | | }, |
| | | grid: { |
| | | left: '3%', |
| | | right: '3%', |
| | | top: '25%', |
| | | bottom: '0%', |
| | | containLabel: true |
| | | }, |
| | | legend: { |
| | | orient: 'vertical', |
| | | left: 'right', |
| | | top: '30%' |
| | | }, |
| | | tooltip: { |
| | | trigger: 'item' |
| | | }, |
| | | label: { |
| | | alignTo: 'edge', |
| | | formatter: '{b}: ({c}人)', |
| | | minMargin: 5, |
| | | edgeDistance: 10, |
| | | lineHeight: 15, |
| | | rich: { |
| | | time: { |
| | | fontSize: 10, |
| | | color: '#999' |
| | | } |
| | | } |
| | | }, |
| | | series: [ |
| | | { |
| | | type: 'pie', |
| | | data: yd, |
| | | radius: ['30%', '50%'], |
| | | avoidLabelOverlap: false, |
| | | 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' |
| | | getAddReduceData() |
| | | .then(res => { |
| | | var xd = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] |
| | | var yd = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] |
| | | var yd1 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] |
| | | if (res && res.length > 0) { |
| | | xd = [] |
| | | yd = [] |
| | | yd1 = [] |
| | | res.forEach(item => { |
| | | xd.push(item.dataFirst) |
| | | yd.push(item.dataSecond) |
| | | yd1.push(item.dataThird) |
| | | }) |
| | | } |
| | | ] |
| | | } |
| | | const chartDom = this.$refs.picture2 |
| | | const myChart = echarts.init(chartDom) |
| | | const option = { |
| | | title: { |
| | | text: '每月加减保人数', |
| | | left: '5%', |
| | | top: '1%' |
| | | }, |
| | | grid: { |
| | | left: '3%', |
| | | right: '3%', |
| | | top: '25%', |
| | | bottom: '0%', |
| | | containLabel: true |
| | | }, |
| | | tooltip: { |
| | | trigger: 'axis', |
| | | axisPointer: { |
| | | type: 'shadow' |
| | | } |
| | | }, |
| | | legend: { |
| | | top: '5%', |
| | | left: 'right' |
| | | }, |
| | | xAxis: { |
| | | type: 'category', |
| | | // boundaryGap: false, |
| | | data: xd |
| | | }, |
| | | yAxis: { |
| | | type: 'value' |
| | | }, |
| | | series: [ |
| | | { |
| | | name: '加保', |
| | | data: yd, |
| | | type: 'bar', |
| | | areaStyle: { |
| | | opacity: 0.5, |
| | | color: '#f07e6f' |
| | | }, |
| | | lineStyle: { |
| | | color: '#f07e6f' |
| | | } |
| | | }, |
| | | { |
| | | name: '减保', |
| | | data: yd1, |
| | | type: 'bar', |
| | | areaStyle: { |
| | | opacity: 0.5, |
| | | color: '#f07e6f' |
| | | }, |
| | | lineStyle: { |
| | | color: '#f07e6f' |
| | | } |
| | | } |
| | | ] |
| | | } |
| | | option && myChart.setOption(option) |
| | | |
| | | option && myChart.setOption(option) |
| | | console.log(res) |
| | | }) |
| | | }, |
| | | 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' |
| | | getSettleClaimsMoney() |
| | | .then(res => { |
| | | var xd = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] |
| | | var yd = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] |
| | | if (res && res.length > 0) { |
| | | xd = [] |
| | | yd = [] |
| | | res.forEach(item => { |
| | | xd.push(item.dataFirst) |
| | | yd.push(item.dataSecond) |
| | | }) |
| | | } |
| | | }, |
| | | 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] |
| | | const chartDom = this.$refs.picture3 |
| | | const myChart = echarts.init(chartDom) |
| | | const option = { |
| | | title: { |
| | | text: '每月赔付金额', |
| | | left: '5%', |
| | | top: '5%' |
| | | }, |
| | | grid: { |
| | | left: '3%', |
| | | right: '3%', |
| | | top: '25%', |
| | | bottom: '0%', |
| | | containLabel: true |
| | | }, |
| | | tooltip: { |
| | | trigger: 'axis', |
| | | axisPointer: { |
| | | type: 'shadow' |
| | | } |
| | | }, |
| | | legend: { |
| | | top: '5%', |
| | | left: 'right' |
| | | }, |
| | | xAxis: { |
| | | type: 'category', |
| | | // boundaryGap: false, |
| | | data: xd |
| | | }, |
| | | yAxis: { |
| | | type: 'value' |
| | | }, |
| | | series: [ |
| | | { |
| | | data: yd, |
| | | type: 'line', |
| | | smooth: true, |
| | | areaStyle: { |
| | | opacity: 0.5, |
| | | color: '#f07e6f' |
| | | }, |
| | | lineStyle: { |
| | | color: '#f07e6f' |
| | | } |
| | | } |
| | | ] |
| | | } |
| | | ] |
| | | } |
| | | option && myChart.setOption(option) |
| | | |
| | | option && myChart.setOption(option) |
| | | console.log(res) |
| | | }) |
| | | } |
| | | } |
| | | } |
| | |
| | | } |
| | | .home_content { |
| | | width: 100%; |
| | | height: calc(100% - 170px); |
| | | /*height: calc(100% - 170px);*/ |
| | | margin-top: 10px; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | /*align-items: center;*/ |
| | | /*justify-content: space-between;*/ |
| | | .home_content_left { |
| | | width: 350px; |
| | | height: 100%; |
| | | |
| | | /*height: 100%;*/ |
| | | height: auto; |
| | | flex-shrink: 0; |
| | | display: flex; |
| | | flex-direction: column; |
| | | justify-content: space-between; |
| | | .home_content_left_item { |
| | | width: 100%; |
| | | height: 32%; |
| | | /*height: 32%;*/ |
| | | height: 200px; |
| | | background: #ffffff; |
| | | margin-bottom: 10px; |
| | | } |
| | | } |
| | | .home_content_right { |
| | |
| | | box-sizing: border-box; |
| | | width: 100%; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | border: 1px solid #ececec; |
| | | margin-bottom: 15px; |
| | |
| | | } |
| | | } |
| | | .list_item_right { |
| | | flex-shrink: 0; |
| | | height: 100%; |
| | | display: flex; |
| | | align-items: center; |