mirror of
http://112.124.100.131/GFRS/ebiz-h5.git
synced 2025-12-16 07:36:44 +08:00
319 lines
9.6 KiB
Vue
319 lines
9.6 KiB
Vue
<!-- 上头条 -->
|
|
<template>
|
|
<div style="min-height: 100vh;" class="bg-white layout">
|
|
<div class="congratulationTop text-center" v-show="showData.topList.length !== 0">
|
|
<van-row><van-col class="congratulationTitle" span="24">全国TOP30本月业绩排名</van-col></van-row>
|
|
<div :class="['rankWrapper',branchType == '0' ? 'maxHeight':'maxHeight78']" class="rankWrapper">
|
|
<div class="sticky-table">
|
|
<table>
|
|
<tr>
|
|
<th>排名</th>
|
|
<th>姓名</th>
|
|
<th class="company">营销服务部</th>
|
|
<th>预收规保</th>
|
|
<th>承保标保</th>
|
|
</tr>
|
|
<tr v-for="(item, index) in showData.topList" :key="item.code">
|
|
<td>{{ item.rank }}</td>
|
|
<td>{{ item.name }}</td>
|
|
<td class="company">{{ item.comName }}</td>
|
|
<td>{{ item.ysbb }}</td>
|
|
<td>{{ item.bzbf }}</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
<table class="data-table">
|
|
<tr>
|
|
<th>排名</th>
|
|
<th>姓名</th>
|
|
<th class="company">营销服务部</th>
|
|
<th>预收规保</th>
|
|
<th>承保标保</th>
|
|
</tr>
|
|
<tr v-for="(item, index) in showData.topList" :key="item.code" :class="{ top3: index <= 2 }">
|
|
<td>{{ item.rank }}</td>
|
|
<td>{{ item.name }}</td>
|
|
<td class="company">{{ item.comName }}</td>
|
|
<td>{{ item.ysbb }}</td>
|
|
<td>{{ item.bzbf }}</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="deadline">
|
|
<span>数据截止时间:{{ deadline }}</span>
|
|
<span>单位:万元</span>
|
|
</div>
|
|
<van-row class="m-rank pb60" v-if="branchType == '0'">
|
|
<!-- <van-col span="24" class="detail score">您的业绩</van-col> -->
|
|
<!-- <van-col span="20" offset="2" style="border-bottom: 1px solid #ff4040;"></van-col> -->
|
|
<van-col span="12" class="detail" style="border-right: 1px solid #ff4040;">
|
|
<div class="m-title mt15">本月预收规保</div>
|
|
<div class="m-number mt12">
|
|
<span class="c-gray-darker fs26 fw500"> {{ showData.achievement.selfAdvanceStand }}</span>
|
|
<span class="m-gray fs12 c-gray-dark ml20">万元</span>
|
|
</div>
|
|
</van-col>
|
|
<van-col span="12" class="detail">
|
|
<div class="m-title mt15">本月承保标保</div>
|
|
<div class="m-number mt12">
|
|
<span class="c-gray-darker fs26 fw500"> {{ showData.achievement.selfAcceptStand }}</span>
|
|
<span class="m-gray fs12 c-gray-dark ml20">万元</span>
|
|
</div>
|
|
</van-col>
|
|
<van-col span="12" class="detail" style="border-right: 1px solid #ff4040;">
|
|
<div class="m-title mt15">预收规保全系统排名</div>
|
|
<div class="m-number mt12">
|
|
<span class="m-gray fs12 c-gray-dark mr20">第</span>
|
|
<span class="c-gray-darker fs26 fw500">{{ showData.achievement.ranking }}</span>
|
|
<span class="m-gray fs12 c-gray-dark ml20">名</span>
|
|
</div>
|
|
</van-col>
|
|
<van-col span="12" class="detail">
|
|
<div class="m-title mt15"> 距上一名差距</div>
|
|
<div class="m-number mt12">
|
|
<span class="c-gray-darker fs26 fw500">{{ showData.achievement.previousGap }}</span>
|
|
<span class="m-gray fs12 c-gray-dark ml20">元</span>
|
|
</div>
|
|
</van-col>
|
|
<van-col span="12" class="detail" style="border-right: 1px solid #ff4040;">
|
|
<div class="m-title mt15">承保标保排名</div>
|
|
<div class="m-number mt12">
|
|
<span class="m-gray fs12 c-gray-dark mr20">第</span>
|
|
<span class="c-gray-darker fs26 fw500">{{ showData.achievement.rankingBb }}</span>
|
|
<span class="m-gray fs12 c-gray-dark ml20">名</span>
|
|
</div>
|
|
</van-col>
|
|
<van-col span="12" class="detail">
|
|
<div class="m-title mt15">距上一名承保标保差距</div>
|
|
<div class="m-number mt12">
|
|
<span class="c-gray-darker fs26 fw500">{{ showData.achievement.previousCbbbGap }}</span>
|
|
<span class="m-gray fs12 c-gray-dark ml20">元</span>
|
|
</div>
|
|
</van-col>
|
|
</van-row>
|
|
<van-button type="danger" class="bottom-btn" @click="nextStep" v-no-more-click="1000">大单榜</van-button>
|
|
</div>
|
|
<div v-if="showData.topList.length === 0" class="text-center">
|
|
<img class="mt40 w250" src="@/assets/images/pic_page-non.png" />
|
|
<div class="fs17 c-gray-dark mt40">暂无数据</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { Col, Row, Loading } from 'vant'
|
|
import { getCongratulationList } from '@/api/ebiz/congratulation/congratulation.js'
|
|
import dateUtil from '@/assets/js/utils/date-utils.js'
|
|
import { orgShortNames } from '@/assets/js/utils/orgShortName'
|
|
import { getAgentInfo } from '@/api/ebiz/my/my.js'
|
|
|
|
export default {
|
|
name: 'congratulationTop',
|
|
filters: {},
|
|
data() {
|
|
return {
|
|
showData: {
|
|
achievement: {
|
|
selfAdvanceStand: '',
|
|
selfAcceptStand: '',
|
|
ranking: '',
|
|
rankingBb: '',
|
|
previousGap: '',
|
|
previousCbbbGap: ''
|
|
},
|
|
topList: []
|
|
},
|
|
branchType:'' //0: 外勤1: 内勤
|
|
}
|
|
},
|
|
computed: {
|
|
deadline() {
|
|
let now = new Date()
|
|
let deadlineTime = now.getTime() - 1000 * 3600
|
|
return dateUtil.formatDate(new Date(deadlineTime), 'yyyy-MM-dd HH:mm:ss')
|
|
}
|
|
},
|
|
created() {
|
|
this.$toast.loading({
|
|
message: '加载中...',
|
|
duration: 0,
|
|
forbidClick: true,
|
|
loadingType: 'spinner'
|
|
})
|
|
this.getAgentInfoFunc()
|
|
this.init()
|
|
},
|
|
methods: {
|
|
async getAgentInfoFunc(){
|
|
const res = await getAgentInfo({})
|
|
if (res.result == 0) {
|
|
// res.branchType 以N打头的是内勤 其他是外勤,branchType 0: 外勤1: 内勤
|
|
this.branchType = /^N{1}/.test(res.branchType) ? '1' : '0'
|
|
} else {
|
|
return this.$toast(res.resultMessage)
|
|
}
|
|
},
|
|
async init() {
|
|
let currMonth = dateUtil.formatDate(new Date(), 'yyyy-MM-dd')
|
|
let data = await getCongratulationList({ date: currMonth, queryType: 'm' })
|
|
if (data.result === '0') {
|
|
let result = data.content
|
|
if (result.list && result.list.length) {
|
|
let topList = result.list.splice(0, 30)
|
|
this.showData.topList.push(...topList)
|
|
|
|
// 机构名称替换为简称
|
|
// for (let org of this.showData.topList) {
|
|
// for (let shortName of orgShortNames) {
|
|
// if (org.comCode === shortName.code) {
|
|
// org.comName = shortName.name
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
this.showData.achievement.selfAdvanceStand = result.ysbb
|
|
this.showData.achievement.selfAcceptStand = result.bzbf
|
|
this.showData.achievement.ranking = result.top
|
|
this.showData.achievement.previousGap = result.xcbf
|
|
this.showData.achievement.rankingBb = result.topBB
|
|
// 后端精度处理有问题, 让前端先直接截取处理
|
|
if (result.xccbbb.includes('.')) {
|
|
let nums = result.xccbbb.split('.')
|
|
this.showData.achievement.previousCbbbGap = `${nums[0]}.${nums[1].substring(0, 2)}`
|
|
} else {
|
|
this.showData.achievement.previousCbbbGap = result.xccbbb
|
|
}
|
|
} else {
|
|
this.$toast('暂无数据')
|
|
}
|
|
} else {
|
|
this.$toast(data.resultMessage)
|
|
}
|
|
this.$toast.clear()
|
|
},
|
|
nextStep() {
|
|
this.$jump({
|
|
flag: 'h5',
|
|
extra: {
|
|
url: location.origin + `/#/congratulation/congratulationList`,
|
|
forbidSwipeBack: '1'
|
|
},
|
|
routerInfo: {
|
|
path: `/congratulation/congratulationList`
|
|
}
|
|
})
|
|
}
|
|
},
|
|
components: {
|
|
[Col.name]: Col,
|
|
[Row.name]: Row,
|
|
[Loading.name]: Loading
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped="scoped" lang="scss">
|
|
$border: 1px solid #ff4040;
|
|
// .layout{ position: fixed; top: 0; bottom: 0; width: 100%; height: 100%; overflow: hidden; }
|
|
.congratulationTop {
|
|
min-height: 100vh;
|
|
.deadline {
|
|
font-size: 14px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
line-height: 2em;
|
|
}
|
|
|
|
.detail {
|
|
color: #ff4040;
|
|
line-height: 2em;
|
|
.m-title{
|
|
font-size: 14px;
|
|
background-color: #eb674e;
|
|
width: 150px;
|
|
height: 25px;
|
|
border-radius: 12px;
|
|
color: #fff;
|
|
line-height: 25px;
|
|
margin: 0 auto;
|
|
}
|
|
.m-number{
|
|
margin: 0 auto;
|
|
.m-gray{
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.score {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.congratulationTitle {
|
|
height: 60px;
|
|
font-size: 20px;
|
|
// text-shadow: 1px 1px 5px #333;
|
|
background-color: #DD3C1E;
|
|
color: #ffffff;
|
|
line-height:60px;
|
|
}
|
|
|
|
.maxHeight78{
|
|
max-height: 77vh;
|
|
}
|
|
|
|
.maxHeight{
|
|
max-height: 40vh;
|
|
}
|
|
.m-rank{
|
|
// height: 150px;
|
|
// overflow-y: scroll;
|
|
}
|
|
.rankWrapper {
|
|
overflow: auto;
|
|
margin-top: 3px;
|
|
.sticky-table {
|
|
font-size: 14px;
|
|
height: 30px;
|
|
overflow: hidden;
|
|
position: sticky;
|
|
top: 0;
|
|
}
|
|
.data-table {
|
|
font-size: 14px;
|
|
margin-top: -30px;
|
|
}
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
.company {
|
|
width: 6em;
|
|
}
|
|
th {
|
|
font-size: 14px;
|
|
background-color: #eb674e;
|
|
font-weight: 500;
|
|
color: #ffffff;
|
|
line-height: 30px;
|
|
height: 30px;
|
|
// opacity: 0.6;
|
|
}
|
|
td {
|
|
padding: 5px;
|
|
border: $border;
|
|
}
|
|
}
|
|
.top3 {
|
|
color: #EE3A3A;
|
|
}
|
|
}
|
|
/deep/ .van-button--danger {
|
|
background: linear-gradient(to right, #f26e43, #ac0209) !important; /*设置按钮为渐变颜色*/
|
|
border: none !important;
|
|
color: #FFCB6B;
|
|
}
|
|
</style>
|