mirror of
http://112.124.100.131/GFRS/ebiz-h5.git
synced 2025-12-09 01:46:43 +08:00
463 lines
18 KiB
Vue
463 lines
18 KiB
Vue
<template>
|
||
<div>
|
||
<van-tabs v-model="tabActive">
|
||
<van-tab title="客户列表" name="customerList"></van-tab>
|
||
<van-tab title="数据看板" name="dataBoard"></van-tab>
|
||
<van-tab title="产品列表" name="productList"></van-tab>
|
||
</van-tabs>
|
||
<div style="height: calc(100vh - 50px);overflow: auto;">
|
||
<div v-if="tabActive == 'customerList'">
|
||
<div style="display: flex;align-items: center;padding-left: 10px;background: #fff;">
|
||
<div style="width: 30%;">
|
||
<van-dropdown-menu :overlay="dropdownmenuoverlay">
|
||
<van-dropdown-item v-model="filterType" :options="filterTypeOption" @change="dropdownMenuChange"/>
|
||
</van-dropdown-menu>
|
||
</div>
|
||
<van-search v-if="filterType == 1 || filterType == 2 || filterType == 3" v-model="searchvalue" shape="round" @search="getGBCappntlist" placeholder="搜索客户姓名/部门/科室/服务人员" style="width: 70%;"/>
|
||
<div v-if="filterType == 4" style="display: flex;align-items: center;height: 54px;">
|
||
<div @click="toChooseDate('startDate')" style="background: #f5f5f5;height: 34px;border-radius: 17px;width: 90px;display: flex;align-items: center;padding:0px 10px;">
|
||
<van-icon name="notes-o" />
|
||
<span v-if="!startDate" style="font-size: 12px;margin-left: 5px;color: #666;">请选择日期</span>
|
||
<span v-if="startDate" style="font-size: 12px;margin-left: 5px;color: #333;">{{startDate}}</span>
|
||
</div>
|
||
<span style="margin: 0px 5px;font-size: 14px;">至</span>
|
||
<div @click="toChooseDate('endDate')" style="background: #f5f5f5;height: 34px;border-radius: 17px;width: 90px;display: flex;align-items: center;padding: 0px 10px;">
|
||
<van-icon name="notes-o" />
|
||
<span v-if="!endDate" style="font-size: 12px;margin-left: 5px;color: #666;">请选择日期</span>
|
||
<span v-if="endDate" style="font-size: 12px;margin-left: 5px;color: #333;">{{endDate}}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="padding: 0px 10px 10px;">
|
||
<div v-for="(item,index) in customerList" :key="index">
|
||
<div style="padding: 20px 20px 10px;border-radius: 5px;background: #fff;margin-top: 20px;">
|
||
<div style="display: flex;font-size: 14px;line-height: 30px;border-bottom: 1px solid #eee;padding-bottom: 10px;">
|
||
<div style="width: 55%;overflow: hidden;white-space: nowrap;">
|
||
<p>客户姓名：{{item.appntName}}</p>
|
||
<p>手机号码：{{item.mobile}}</p>
|
||
<p>服务组长：{{item.teamLeader}}</p>
|
||
</div>
|
||
<div style="width: 45%;overflow: hidden;white-space: nowrap;">
|
||
<p>部门/科室：{{item.departmentName}}</p>
|
||
<p>承保保单：{{item.contSize}}份</p>
|
||
<p>服务组员：{{item.teamMember}}</p>
|
||
</div>
|
||
</div>
|
||
<div style="display: flex;justify-content: flex-end;margin-top: 10px;">
|
||
<van-button @click="goCustomerDetail(item)" type="danger" size="small" style="border-radius:5px;">查看编辑</van-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="tabActive == 'dataBoard'">
|
||
<div style="margin: 10px;padding: 10px;background: #fff;border-radius: 5px;">
|
||
<p style="font-size: 18px;line-height: 35px;font-weight: bold;">项目名称：{{calGbcProject.projectName}}</p>
|
||
<p style="color: #a7a7a7;font-size: 14px;">数据截止日期：{{calGbcProject.endDate}}</p>
|
||
<div style="display: flex;justify-content: center;margin-top: 20px;">
|
||
<van-circle v-model="currentRate" color="#E9332E" :stroke-width="60" size="80px" :rate="interviewConversionRate" :speed="100" :text="text" />
|
||
</div>
|
||
<p style="display: flex;justify-content: center;font-weight: bold;font-size: 14px;margin: 10px;">面谈转化率</p>
|
||
<div style="padding: 10px;background: rgba(251, 235, 230, 0.5);border-radius: 5px;display: flex;justify-content: flex-start;flex-wrap:wrap;">
|
||
<div v-for="(item,index) in calGbcProjectDataList" style="width: 33%;display: flex;justify-content: space-around;align-items: center;">
|
||
<div>
|
||
<div style="font-size: 12px;line-height: 22px;margin: 7px 0px;">
|
||
<p style="display: flex;justify-content: center;font-size: 14px;">{{item.value}}</p>
|
||
<p style="display: flex;justify-content: center;align-items: center;">
|
||
<span class="colorBlock" :style="{background:colorList[index]}"></span>
|
||
{{item.name}}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<!-- <div v-if="(index + 1) % 3 != 0 || index < 2" style="width: 1px;background: #FFC9AF;height: 60%;"></div>-->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="margin: 10px;padding: 10px;background: #fff;border-radius: 5px;">
|
||
<div style="border-bottom: 1px dashed #666;padding-bottom: 15px;">
|
||
<p style="font-size: 18px;line-height: 35px;font-weight: bold;">项目成员分配</p>
|
||
<p v-if="calGbcPersonList.length != 0" style="color: #a7a7a7;font-size: 14px;">数据截止日期：{{calGbcPersonList[0].endDate}}</p>
|
||
</div>
|
||
<div style="margin-top: 10px;margin-bottom: 3px;background: rgba(255, 87, 83, 0.7);line-height: 30px;display: flex;align-items: center;color: #fff;font-size: 14px;">
|
||
<span style="width: 18%;display: flex;justify-content: center;">成员</span>
|
||
<span style="width: 22%;display: flex;justify-content: center;">角色</span>
|
||
<span style="width: 30%;display: flex;justify-content: center;">累计标保(元)</span>
|
||
<span style="width: 30%;display: flex;justify-content: center;">受理标保(元)</span>
|
||
</div>
|
||
<div>
|
||
<div v-for="item in calGbcPersonList" style="background: rgba(251, 235, 230, 0.44);margin-bottom: 1px;line-height: 30px;display: flex;align-items: center;color: #333;font-size: 13px;">
|
||
<span style="width: 18%;display: flex;justify-content: center;">{{item.personName}}</span>
|
||
<span style="width: 22%;display: flex;justify-content: center;">{{item.roleName}}</span>
|
||
<span style="width: 30%;display: flex;justify-content: center;">{{item.sumStandardPrem}}</span>
|
||
<span style="width: 30%;display: flex;justify-content: center;">{{item.sumAcceptedPrem}}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="margin: 10px;padding: 10px;background: #fff;border-radius: 5px;">
|
||
<div style="border-bottom: 1px dashed #666;padding-bottom: 15px;">
|
||
<p style="font-size: 18px;line-height: 35px;font-weight: bold;">项目数据统计</p>
|
||
<p v-if="calGbcTeamList.length != 0" style="color: #a7a7a7;font-size: 14px;">数据截止日期：{{calGbcTeamList[0].endDate}}</p>
|
||
</div>
|
||
<div style="overflow: auto;">
|
||
<table cellspacing=0 style="margin-top: 10px;">
|
||
<thead style="background: rgba(255, 87, 83, 0.7);color: #fff;">
|
||
<tr class="theadClass">
|
||
<th style="padding: 0px 40px;">小组</th>
|
||
<th>组长</th>
|
||
<th>承保保费(元)</th>
|
||
<th>获客人数</th>
|
||
<th>获客率</th>
|
||
<th>筛客人数</th>
|
||
<th>筛客率</th>
|
||
<th>累计标保(元)</th>
|
||
<th>承保人数</th>
|
||
<th>承保件数(件)</th>
|
||
<th>件均(元)</th>
|
||
<th>面谈转化率</th>
|
||
<th>受理承保率</th>
|
||
<th>受理标保(元)</th>
|
||
<th>受理件数</th>
|
||
<th>重疾险件数</th>
|
||
<th>重疾标保(元)</th>
|
||
<th>重疾件均(元)</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr class="tbodyClass">
|
||
<td colspan="2">项目合并</td>
|
||
<td>{{calGbcTeamTotalDTO.sumInsuredPrem}}</td>
|
||
<td>{{calGbcTeamTotalDTO.guestNum}}</td>
|
||
<td>{{calGbcTeamTotalDTO.guestRate}}</td>
|
||
<td>{{calGbcTeamTotalDTO.guestSelectNum}}</td>
|
||
<td>{{calGbcTeamTotalDTO.guestSelectRate}}</td>
|
||
<td>{{calGbcTeamTotalDTO.sumStandardPrem}}</td>
|
||
<td>{{calGbcTeamTotalDTO.sumInsuredNum}}</td>
|
||
<td>{{calGbcTeamTotalDTO.sumInsuredCases}}</td>
|
||
<td>{{calGbcTeamTotalDTO.averagePrem}}</td>
|
||
<td>{{calGbcTeamTotalDTO.interviewConversionRate}}</td>
|
||
<td>{{calGbcTeamTotalDTO.acceptedRate}}</td>
|
||
<td>{{calGbcTeamTotalDTO.sumAcceptedPrem}}</td>
|
||
<td>{{calGbcTeamTotalDTO.sumAcceptedCases}}</td>
|
||
<td>{{calGbcTeamTotalDTO.sumMajorDiseaseCases}}</td>
|
||
<td>{{calGbcTeamTotalDTO.sumMajorDiseasePrem}}</td>
|
||
<td>{{calGbcTeamTotalDTO.averageMajorDiseasePrem}}</td>
|
||
</tr>
|
||
<tr v-for="(item,index) in calGbcTeamList" :key="index" class="tbodyClass">
|
||
<td class="teamNameTdClass">{{item.teamName}}</td>
|
||
<td>{{item.leaderName}}</td>
|
||
<td>{{item.sumInsuredPrem}}</td>
|
||
<td>{{item.guestNum}}</td>
|
||
<td>{{item.guestRate}}</td>
|
||
<td>{{item.guestSelectNum}}</td>
|
||
<td>{{item.guestSelectRate}}</td>
|
||
<td>{{item.sumStandardPrem}}</td>
|
||
<td>{{item.sumInsuredNum}}</td>
|
||
<td>{{item.sumInsuredCases}}</td>
|
||
<td>{{item.averagePrem}}</td>
|
||
<td>{{item.interviewConversionRate}}</td>
|
||
<td>{{item.acceptedRate}}</td>
|
||
<td>{{item.sumAcceptedPrem}}</td>
|
||
<td>{{item.sumAcceptedCases}}</td>
|
||
<td>{{item.sumMajorDiseaseCases}}</td>
|
||
<td>{{item.sumMajorDiseasePrem}}</td>
|
||
<td>{{item.averageMajorDiseasePrem}}</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="tabActive == 'productList'">
|
||
<div v-for="(item,index) in dataList4" @click="goProductDetail(item.productCode)" :key="index" style="background: #fff;border-radius: 5px;margin: 5px;display: flex;padding: 5px;">
|
||
<img :src="item.productImageUrl" style="display: inline-block;width: 35%;border-radius: 5px;"/>
|
||
<div style="display: inline-block;width: 65%;padding-left: 10px;">
|
||
<p style="font-size: 16px;">{{item.productName}}</p>
|
||
<p style="font-size: 14px;color: #bdbdbd;margin-top: 20px;">{{item.productDesc}}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<van-popup v-model="showDataPicker" position="bottom">
|
||
<van-datetime-picker type="date" v-model="currentDate" @confirm="onConfirmDate" @cancel="cancelDate" :max-date="maxDate" :min-date="minDate" />
|
||
</van-popup>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { Tab, Tabs, Search, DropdownMenu, DropdownItem, Circle } from 'vant'
|
||
import { getList } from '@/api/ebiz/product/product.js'
|
||
import { getGBCappntlist, dataShow } from '@/api/GBC/GBC.js'
|
||
export default {
|
||
components: {
|
||
[Tab.name]: Tab,
|
||
[Tabs.name]: Tabs,
|
||
[Search.name]: Search,
|
||
[DropdownMenu.name]: DropdownMenu,
|
||
[DropdownItem.name]: DropdownItem,
|
||
[Circle.name]: Circle,
|
||
},
|
||
data() {
|
||
return {
|
||
tabActive:1,
|
||
searchvalue:'',
|
||
filterType: 1,
|
||
startDate:'',
|
||
endDate:'',
|
||
showDataPicker:false,
|
||
minDate: new Date(2000, 0, 1),
|
||
maxDate: new Date(2050, 11, 31),
|
||
currentDate:new Date(),
|
||
datePickerType:'',
|
||
filterTypeOption: [
|
||
{ text: '按客户', value: 1 },
|
||
{ text: '按科室', value: 2 },
|
||
{ text: '按小组', value: 3 },
|
||
{ text: '按日期', value: 4 },
|
||
],
|
||
dropdownmenuoverlay:false,
|
||
customerList:[],
|
||
currentRate: 0,
|
||
colorList:['#E9332E','#CB9BFF','#54C6FA','#FF9B39','#60D64D','#4045F3','#FF59D9','#E8C0A2','#FCD338','#7584A2'],
|
||
calGbcProject: {},
|
||
interviewConversionRate: 0,
|
||
calGbcProjectDataList:[
|
||
{name:'累计受理保费(元)',value:'150,000.00', code: 'sumAcceptedPrem'},
|
||
{name:'累计标保(元)',value:'250,000.00', code: 'sumStandardPrem'},
|
||
{name:'件均保费(元)',value:'130,000.00', code: 'averagePrem'},
|
||
{name:'累计受理人数(人)',value:'10856', code: 'sumAcceptedNum'},
|
||
{name:'累计受理件数(件)',value:'356', code: 'sumAcceptedCases'},
|
||
{name:'累计承保人数(人)',value:'9569', code: 'sumInsuredNum'},
|
||
{name:'累计承保件数(件)',value:'262', code: 'sumInsuredCases'},
|
||
],
|
||
calGbcPersonList:[],
|
||
calGbcTeamList:[],
|
||
calGbcTeamTotalDTO: {},
|
||
dataList4:[],
|
||
}
|
||
},
|
||
created() {
|
||
|
||
},
|
||
mounted(){
|
||
document.title = this.$route.query.projectName
|
||
this.getGBCappntlist()
|
||
this.getProductList()
|
||
this.getDataShow()
|
||
},
|
||
methods: {
|
||
getDataShow() {
|
||
let params = {
|
||
projectCode: this.$route.query.projectCode
|
||
}
|
||
dataShow(params).then(res => {
|
||
this.calGbcPersonList = []
|
||
this.calGbcTeamList = []
|
||
if(res.result == '0') {
|
||
this.calGbcProject = res.content.calGbcProject
|
||
this.interviewConversionRate = Number(res.content.calGbcProject.interviewConversionRate)
|
||
for(let key in res.content.calGbcProject) {
|
||
this.calGbcProjectDataList.forEach(item => {
|
||
if(item.code == key) {
|
||
item.value = res.content.calGbcProject[key]
|
||
}
|
||
})
|
||
}
|
||
this.calGbcPersonList = res.content.calGbcPersonList
|
||
this.calGbcTeamList = res.content.calGbcTeamList
|
||
this.calGbcTeamTotalDTO = res.content.calGbcTeamTotalDTO
|
||
} else {
|
||
this.$toast(res.resultMessage)
|
||
}
|
||
})
|
||
},
|
||
dropdownMenuChange(value){
|
||
this.filterType = value
|
||
this.searchvalue = ''
|
||
this.startDate = ''
|
||
this.endDate = ''
|
||
if(value == 1 || value == 2 || value == 3) {
|
||
this.getGBCappntlist()
|
||
}
|
||
},
|
||
getGBCappntlist(){
|
||
let params = {
|
||
"projectCode": this.$route.query.projectCode,
|
||
"filterType": this.filterType,
|
||
"appntName": "",
|
||
"departmentName": "",
|
||
"teamMemberName": "",
|
||
"startDate": "",
|
||
"endDate": ""
|
||
}
|
||
if(this.filterType == 1){
|
||
params.appntName = this.searchvalue
|
||
}
|
||
if(this.filterType == 2){
|
||
params.departmentName = this.searchvalue
|
||
}
|
||
if(this.filterType == 3){
|
||
params.teamMemberName = this.searchvalue
|
||
}
|
||
if(this.filterType == 4) {
|
||
params.startDate = this.startDate
|
||
params.endDate = this.endDate
|
||
}
|
||
getGBCappntlist(params).then(res=>{
|
||
if(res.result == '0') {
|
||
this.customerList = []
|
||
if(res.content && res.content.length != 0) {
|
||
this.customerList = res.content
|
||
}
|
||
} else {
|
||
this.$toast(res.resultMessage)
|
||
}
|
||
})
|
||
},
|
||
toChooseDate(type){
|
||
this.datePickerType = type
|
||
if(type == 'startDate') {
|
||
this.showDataPicker = true
|
||
}
|
||
if(type == 'endDate') {
|
||
this.showDataPicker = true
|
||
}
|
||
},
|
||
onConfirmDate(date){
|
||
if(this.datePickerType == 'startDate') {
|
||
let year = date.getFullYear()
|
||
let month = String(date.getMonth() + 1).padStart(2, '0');
|
||
let day = String(date.getDate()).padStart(2, '0');
|
||
this.startDate = year + '-' + month + '-' + day;
|
||
if(this.endDate) {
|
||
this.getGBCappntlist()
|
||
}
|
||
}
|
||
if(this.datePickerType == 'endDate') {
|
||
let year = date.getFullYear()
|
||
let month = String(date.getMonth() + 1).padStart(2, '0');
|
||
let day = String(date.getDate()).padStart(2, '0');
|
||
this.endDate = year + '-' + month + '-' + day;
|
||
if(this.startDate) {
|
||
this.getGBCappntlist()
|
||
}
|
||
}
|
||
this.showDataPicker = false
|
||
},
|
||
cancelDate(){
|
||
this.showDataPicker = false
|
||
},
|
||
goCustomerDetail(data){
|
||
this.$router.push({
|
||
path:'/GBC/customerDetail',
|
||
query:{
|
||
projectCode:this.$route.query.projectCode,
|
||
appntId:data.appntId
|
||
},
|
||
})
|
||
},
|
||
getProductList(){
|
||
let params = {
|
||
type: 'app'
|
||
}
|
||
getList(params).then(res=>{
|
||
if(res.result == '0') {
|
||
this.dataList4 = this.dataList4.concat(res.productList)
|
||
} else {
|
||
this.$toast(res.resultMessage)
|
||
}
|
||
})
|
||
},
|
||
goProductDetail(productCode) {
|
||
localStorage.productDetailCode = productCode
|
||
this.$jump({
|
||
flag: 'h5',
|
||
extra: {
|
||
url: location.origin + `/#/product/ProductDetail/${productCode}`
|
||
},
|
||
routerInfo: {
|
||
path: `/product/ProductDetail/${productCode}`
|
||
}
|
||
})
|
||
},
|
||
},
|
||
// watch: {
|
||
// isShowOthenSalarySource(nVal) {
|
||
// if (!nVal) {
|
||
// this.userInfo.otherSalarySource = ''
|
||
// }
|
||
// },
|
||
// },
|
||
computed: {
|
||
text() {
|
||
return this.currentRate.toFixed(0) + '%';
|
||
},
|
||
},
|
||
beforeRouteLeave(to, from, next) {
|
||
document.body.style.backgroundColor = ''
|
||
next()
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
/deep/ .van-search__content{
|
||
background: #fff;
|
||
}
|
||
/deep/ .van-dropdown-menu{
|
||
height: 34px;
|
||
}
|
||
/deep/ .van-dropdown-item__content{
|
||
width: 40%;
|
||
left: 10px;
|
||
}
|
||
/deep/ .van-dropdown-menu{
|
||
background: #f5f5f5;
|
||
}
|
||
.colorBlock{
|
||
width: 8px;
|
||
height: 8px;
|
||
display: inline-block;
|
||
/*background: #000;*/
|
||
border-radius: 3px;
|
||
margin-right: 3px;
|
||
}
|
||
/deep/ .van-hairline--top-bottom::after{
|
||
border: none;
|
||
}
|
||
/deep/ .van-dropdown-menu{
|
||
background: #fff;
|
||
}
|
||
/deep/ .van-search__content{
|
||
background: #f5f5f5;
|
||
}
|
||
/deep/ [data-v-3f765cce] .van-dropdown-item__content{
|
||
box-shadow: 0px 0px 5px 5px #f5f5f5;
|
||
}
|
||
.theadClass{
|
||
th{
|
||
white-space: nowrap;
|
||
padding: 0px 10px;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
line-height: 30px;
|
||
}
|
||
}
|
||
.tbodyClass{
|
||
background: rgba(251, 235, 230, 0.44);
|
||
line-height: 30px;
|
||
margin-bottom: 1px;
|
||
font-size: 13px;
|
||
/*color: #fff;*/
|
||
td{
|
||
text-align: center;
|
||
border-bottom:1px solid #fff;
|
||
}
|
||
}
|
||
.teamNameTdClass{
|
||
display: block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
|
||
//width: 105px;
|
||
}
|
||
</style>
|