mirror of
http://112.124.100.131/GFRS/ebiz-h5.git
synced 2025-12-09 07:36:44 +08:00
601 lines
16 KiB
Vue
601 lines
16 KiB
Vue
<template>
|
||
<div>
|
||
<div class="header">
|
||
<div class="header-left" @click="changeSearchType">
|
||
<van-button>
|
||
<img :src="point" />
|
||
<span class="ml5 mr5">{{ typeName }}</span>
|
||
<van-icon name="arrow-down" />
|
||
</van-button>
|
||
</div>
|
||
<div class="header-center">
|
||
<van-button class="btn-gray" :class="{ activeBtn: timeType === 0 }" @click="isDayConditionShow = true">日</van-button>
|
||
<van-button class="btn-gray month" :class="{ activeBtn: timeType === 1 }" @click="isMonthConditionShow = true">月</van-button>
|
||
<van-button class="btn-gray" :class="{ activeBtn: timeType === 2 }" @click="isYearConditionShow = true">年</van-button>
|
||
</div>
|
||
<div class="header-right">
|
||
<van-button @click="isTimeBarShow = true">
|
||
<span class="mr5">{{ timeCondition }}</span>
|
||
<van-icon name="arrow-down" />
|
||
</van-button>
|
||
</div>
|
||
</div>
|
||
<!-- 筛选 -->
|
||
<div class="classification">
|
||
<span>机构名称: </span>
|
||
<span @click="isOrgLv2ConditionShow = true">
|
||
<span>{{ OrgLv2Name }}</span>
|
||
<van-icon name="arrow-down" />
|
||
</span>
|
||
<template v-if="isMoreConditionShow">
|
||
<span @click="isOrgLv3ConditionShow = true">
|
||
<span>{{ OrgLv4Name }}</span>
|
||
<van-icon name="arrow-down" />
|
||
</span>
|
||
<span @click="isOrgLv4ConditionShow = true">
|
||
<span>{{ OrgLv3Name }}</span>
|
||
<van-icon name="arrow-down" />
|
||
</span>
|
||
</template>
|
||
</div>
|
||
<div class="content">
|
||
<van-tabs v-model="active">
|
||
<van-tab title="汇总">
|
||
<Summarizing ref="summarizing" :typeIndex="typeIndex" />
|
||
</van-tab>
|
||
<van-tab title="分机构">
|
||
<Organization ref="organization" :dataType.sync="typeIndex" :timeType.sync="timeType" @updateQueryCom="updateQueryCom" />
|
||
</van-tab>
|
||
</van-tabs>
|
||
</div>
|
||
<!-- 侧边栏 -->
|
||
<van-popup v-model="isSideBarShow" position="left" :style="{ width: '50vw', height: '100vh' }" @close="onSidebarClose">
|
||
<p class="title">指标</p>
|
||
<span class="data-type" :class="{ 'data-active': index === typeIndex }" v-for="(type, index) in dataTypes" :key="index" @click="changeDataType(index)">{{
|
||
type
|
||
}}</span>
|
||
</van-popup>
|
||
<!-- 时间筛选栏 -->
|
||
<van-popup v-model="isTimeBarShow" position="bottom" :style="{ height: '40vh' }">
|
||
<van-datetime-picker v-model="dayTimeCondition" type="datetime" :max-date="maxDate" @confirm="onDayTimeConditionConfirm" />
|
||
</van-popup>
|
||
<!-- 二级机构筛选栏 -->
|
||
<van-popup v-model="isOrgLv2ConditionShow" position="bottom" :style="{ height: '40vh' }">
|
||
<van-picker show-toolbar :columns="province" @confirm="onOrgLv2ConditionConfirm" @cancel="isOrgLv2ConditionShow = false" />
|
||
</van-popup>
|
||
<!-- 三级机构筛选栏 -->
|
||
<van-popup v-model="isOrgLv3ConditionShow" position="bottom" :style="{ height: '40vh' }">
|
||
<van-picker show-toolbar :columns="city" @confirm="onOrgLv3ConditionConfirm" @cancel="isOrgLv3ConditionShow = false" />
|
||
</van-popup>
|
||
<!-- 四级机构筛选栏 -->
|
||
<van-popup v-model="isOrgLv4ConditionShow" position="bottom" :style="{ height: '40vh' }">
|
||
<van-picker show-toolbar :columns="area" @confirm="onOrgLv4ConditionConfirm" @cancel="isOrgLv4ConditionShow = false" />
|
||
</van-popup>
|
||
<!-- 日 -->
|
||
<van-popup v-model="isDayConditionShow" position="bottom" :style="{ height: '40vh' }">
|
||
<van-datetime-picker v-model="dayCondition" type="date" :max-date="maxDate" @confirm="onDayConditionConfirm" />
|
||
</van-popup>
|
||
<!-- 月 -->
|
||
<van-popup v-model="isMonthConditionShow" position="bottom" :style="{ height: '40vh' }">
|
||
<van-datetime-picker v-model="monthCondition" type="year-month" :max-date="maxDate" @confirm="onMonthConditionConfirm" />
|
||
</van-popup>
|
||
<!-- 年 -->
|
||
<van-popup v-model="isYearConditionShow" position="bottom" :style="{ height: '40vh' }">
|
||
<van-picker show-toolbar :columns="years" @confirm="onYearConditionConfirm" />
|
||
</van-popup>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import point from '@/assets/images/ebiz/point.png'
|
||
import { Popup, Tab, Tabs, DatetimePicker, Picker, Toast } from 'vant'
|
||
import Summarizing from './Summarizing.vue'
|
||
import Organization from './Organization.vue'
|
||
import dateUtil from '@/assets/js/utils/date-utils.js'
|
||
import { getComPerformance, getOrgList } from '@/api/ebiz/branchOffice/branchOffice'
|
||
|
||
// 当前时间
|
||
const currentDate = new Date()
|
||
|
||
export default {
|
||
name: 'UnderOffice',
|
||
components: {
|
||
[Popup.name]: Popup,
|
||
[Tab.name]: Tab,
|
||
[Tabs.name]: Tabs,
|
||
[DatetimePicker.name]: DatetimePicker,
|
||
[Picker.name]: Picker,
|
||
[Toast.name]: Toast,
|
||
Summarizing,
|
||
Organization
|
||
},
|
||
data() {
|
||
return {
|
||
timeType: 0,
|
||
// 最大查询日期
|
||
maxDate: currentDate,
|
||
// 日期筛选条件
|
||
dayCondition: currentDate,
|
||
// 月份筛选条件
|
||
monthCondition: currentDate,
|
||
// 年份筛选条件
|
||
yearCondition: currentDate.getFullYear(),
|
||
// 实时筛选时间条件
|
||
timeCondition: dateUtil.formatDate(currentDate, 'MM-dd HH:mm'),
|
||
dayTimeCondition: currentDate,
|
||
// 0: 标保, 1: 人力, 2: 产品
|
||
typeIndex: 0,
|
||
dataTypes: ['期交', '人力指标', '产品'],
|
||
active: 0,
|
||
// 侧边栏是否显示
|
||
isSideBarShow: false,
|
||
// 日期筛选是否显示
|
||
isTimeBarShow: false,
|
||
// 二级机构筛选是否显示
|
||
isOrgLv2ConditionShow: false,
|
||
// 三级机构筛选是否显示
|
||
isOrgLv3ConditionShow: false,
|
||
// 四级机构筛选是否显示
|
||
isOrgLv4ConditionShow: false,
|
||
// 日筛选是否显示
|
||
isDayConditionShow: false,
|
||
// 月筛选是否展示
|
||
isMonthConditionShow: false,
|
||
// 年筛选是否显示
|
||
isYearConditionShow: false,
|
||
point,
|
||
OrgLv2Name: '全国',
|
||
OrgLv4Name: '全部',
|
||
OrgLv3Name: '全部',
|
||
OrgLv2Code: 0,
|
||
OrgLv2s: [],
|
||
OrgLv3Code: 0,
|
||
OrgLv3s: [],
|
||
areaCode: 0,
|
||
OrgLv4s: [],
|
||
years: [],
|
||
params: {
|
||
// 86: 全国
|
||
manageCode: '86',
|
||
// 01: 全国, 02: 中心支公司, 03: 营销服务部, 04: 下辖营业区
|
||
manageLv: '01',
|
||
// 日期类型: 年/月/日/实时
|
||
queryType: 'd',
|
||
date: currentDate,
|
||
// all: 汇总, prem: 保费排行, active：人力排行, product: 产品
|
||
type: 'all',
|
||
// 1: 中心支公司, 2: 营销服务部, 3: 下辖营业区
|
||
queryCom: ''
|
||
},
|
||
performance: {
|
||
pysbb: 0,
|
||
pysjs: 0,
|
||
pbzbf: 0,
|
||
pcbjs: 0
|
||
},
|
||
manpower: {},
|
||
products: []
|
||
}
|
||
},
|
||
computed: {
|
||
isMoreConditionShow() {
|
||
return this.OrgLv2Name !== '全国'
|
||
},
|
||
province() {
|
||
const name = ['全国']
|
||
this.OrgLv2s.forEach(item => {
|
||
name.push(item.name)
|
||
})
|
||
return name
|
||
},
|
||
city() {
|
||
const city = ['全部']
|
||
this.OrgLv3s.forEach(item => {
|
||
if (item.upBranchCode === this.OrgLv2Code) {
|
||
city.push(item.name)
|
||
}
|
||
})
|
||
return city
|
||
},
|
||
area() {
|
||
const area = ['全部']
|
||
this.OrgLv4s.forEach(item => {
|
||
if (item.upBranchCode === this.OrgLv3Code) {
|
||
area.push(item.name)
|
||
}
|
||
})
|
||
return area
|
||
},
|
||
typeName() {
|
||
return this.dataTypes[this.typeIndex]
|
||
}
|
||
},
|
||
mounted() {
|
||
this.setRightBtn()
|
||
this.initData()
|
||
},
|
||
methods: {
|
||
onSidebarClose() {
|
||
document.title = '排名'
|
||
},
|
||
changeSearchType() {
|
||
this.isSideBarShow = true
|
||
document.title = '返回'
|
||
},
|
||
async reset() {
|
||
location.reload()
|
||
},
|
||
async setRankData() {
|
||
let result = await this.getRankData()
|
||
if (result.result === '0') {
|
||
if (this.active === 0) {
|
||
this.setSummarizingData(result)
|
||
} else {
|
||
this.$refs.organization.setTableData(result.content, this.params.type)
|
||
}
|
||
} else {
|
||
this.$toast(result.resultMessage)
|
||
}
|
||
},
|
||
appCallBack(data) {
|
||
if (data.trigger == 'right_button_click') {
|
||
this.reset()
|
||
}
|
||
},
|
||
dataTypeChange() {
|
||
this.setRankData()
|
||
},
|
||
setRightBtn() {
|
||
setTimeout(() => {
|
||
window.EWebBridge.webCallAppInJs('webview_right_button', {
|
||
btns: [
|
||
{
|
||
img: this.$assetsUrl + 'images/ebiz/refresh.png'
|
||
}
|
||
]
|
||
})
|
||
}, 1000)
|
||
window.appCallBack = this.appCallBack
|
||
},
|
||
async initData() {
|
||
// 初始化年份筛选数据
|
||
const currentYear = new Date().getFullYear()
|
||
const startYear = currentYear - 10
|
||
for (let year = startYear; year <= currentYear; year++) {
|
||
this.years.unshift(year)
|
||
}
|
||
/**
|
||
* 查询机构下拉列表
|
||
* manageCode, manageLv传空查全国所有二级机构
|
||
**/
|
||
console.log('getOrgList :>> ', getOrgList)
|
||
const res = await getOrgList({
|
||
bussinessType: 'normal',
|
||
manageCode: '',
|
||
manageLv: ''
|
||
})
|
||
if (res.result === '0') {
|
||
this.OrgLv2s.push(...res.content)
|
||
} else {
|
||
this.$toast(res.resultMessage)
|
||
}
|
||
// 查询默认数据
|
||
const result = await this.getRankData()
|
||
this.setSummarizingData(result)
|
||
},
|
||
async getRankData() {
|
||
let date = null
|
||
switch (this.timeType) {
|
||
case 0:
|
||
date = this.dayCondition
|
||
this.params.queryType = 'd'
|
||
break
|
||
case 1:
|
||
date = this.monthCondition
|
||
this.params.queryType = 'm'
|
||
break
|
||
case 2:
|
||
date = new Date(String(this.yearCondition))
|
||
this.params.queryType = 'y'
|
||
break
|
||
case 3:
|
||
date = this.dayTimeCondition
|
||
this.params.queryType = 'd'
|
||
break
|
||
}
|
||
this.params.date = dateUtil.formatDate(date, 'yyyy-MM-dd')
|
||
console.log('this.params :>> ', this.params)
|
||
let result = await getComPerformance(this.params)
|
||
return result
|
||
},
|
||
// 按日筛选
|
||
onDayConditionConfirm() {
|
||
this.isDayConditionShow = false
|
||
this.timeType = 0
|
||
this.setRankData()
|
||
},
|
||
// 按月筛选
|
||
onMonthConditionConfirm() {
|
||
this.isMonthConditionShow = false
|
||
this.timeType = 1
|
||
this.setRankData()
|
||
},
|
||
// 按年筛选
|
||
onYearConditionConfirm(year) {
|
||
this.yearCondition = year
|
||
this.isYearConditionShow = false
|
||
this.timeType = 2
|
||
this.setRankData()
|
||
},
|
||
// 筛选二级机构
|
||
async onOrgLv2ConditionConfirm(data) {
|
||
this.isOrgLv2ConditionShow = false
|
||
let OrgLv2 = this.OrgLv2s.find(item => item.name === data)
|
||
if (OrgLv2) {
|
||
this.OrgLv2Code = OrgLv2.code
|
||
this.params.manageCode = this.OrgLv2Code
|
||
this.params.manageLv = '02'
|
||
}
|
||
if (data === '全国') {
|
||
this.params.manageCode = '86'
|
||
this.params.manageLv = '01'
|
||
}
|
||
this.OrgLv2Name = data
|
||
this.OrgLv4Name = '全部'
|
||
this.OrgLv3Name = '全部'
|
||
// 查询三级机构
|
||
const res = await getOrgList({
|
||
bussinessType: 'normal',
|
||
manageCode: this.OrgLv2Code,
|
||
manageLv: '02'
|
||
})
|
||
this.OrgLv3s.splice(0)
|
||
this.OrgLv3s.push(...res.content)
|
||
this.setRankData()
|
||
},
|
||
// 筛选三级机构
|
||
async onOrgLv3ConditionConfirm(data) {
|
||
this.isOrgLv3ConditionShow = false
|
||
this.OrgLv4Name = data
|
||
let OrgLv3 = this.OrgLv3s.find(item => item.name === data)
|
||
if (OrgLv3) {
|
||
this.OrgLv3Code = OrgLv3.code
|
||
this.params.manageCode = this.OrgLv3Code
|
||
this.params.manageLv = '03'
|
||
}
|
||
if (data === '全部') {
|
||
this.params.manageCode = this.OrgLv2Code
|
||
this.params.manageLv = '02'
|
||
}
|
||
this.OrgLv3Name = '全部'
|
||
// 查询四级机构
|
||
const res = await getOrgList({
|
||
bussinessType: 'normal',
|
||
manageCode: this.OrgLv3Code,
|
||
manageLv: '03'
|
||
})
|
||
this.OrgLv4s.splice(0)
|
||
this.OrgLv4s.push(...res.content)
|
||
this.setRankData()
|
||
},
|
||
// 筛选四级机构
|
||
async onOrgLv4ConditionConfirm(data) {
|
||
this.isOrgLv4ConditionShow = false
|
||
this.OrgLv3Name = data
|
||
let area = this.OrgLv4s.find(item => item.name === data)
|
||
if (area) {
|
||
this.areaCode = area.code
|
||
this.params.manageCode = this.areaCode
|
||
this.params.manageLv = '04'
|
||
}
|
||
if (data === '全部') {
|
||
this.params.manageCode = this.OrgLv3Code
|
||
this.params.manageLv = '03'
|
||
}
|
||
this.setRankData()
|
||
},
|
||
// 筛选时间确认事件
|
||
async onDayTimeConditionConfirm(time) {
|
||
this.isTimeBarShow = false
|
||
this.timeType = 3
|
||
this.timeCondition = dateUtil.formatDate(time, 'MM-dd HH:mm')
|
||
this.params.date = ''
|
||
this.setRankData()
|
||
},
|
||
// 切换数据类型事件
|
||
changeDataType(index) {
|
||
if (this.typeIndex === index) {
|
||
this.isSideBarShow = false
|
||
return
|
||
}
|
||
this.typeIndex = index
|
||
if (this.active === 0) {
|
||
this.params.type = 'all'
|
||
this.isSideBarShow = false
|
||
return
|
||
} else {
|
||
switch (this.typeIndex) {
|
||
case 0:
|
||
this.params.type = 'prem'
|
||
break
|
||
case 1:
|
||
this.params.type = 'active'
|
||
break
|
||
case 2:
|
||
this.params.type = 'product'
|
||
break
|
||
}
|
||
}
|
||
this.isSideBarShow = false
|
||
},
|
||
async updateQueryCom(val) {
|
||
switch (val) {
|
||
case 0:
|
||
this.params.queryCom = 'z'
|
||
break
|
||
case 1:
|
||
this.params.queryCom = 'y'
|
||
break
|
||
case 2:
|
||
this.params.queryCom = 'q'
|
||
break
|
||
}
|
||
switch (this.typeIndex) {
|
||
case 0:
|
||
this.params.type = 'prem'
|
||
break
|
||
case 1:
|
||
this.params.type = 'active'
|
||
break
|
||
case 2:
|
||
this.params.type = 'product'
|
||
break
|
||
}
|
||
let result = await this.getRankData()
|
||
this.$refs.organization.setTableData(result.content, this.params.type)
|
||
},
|
||
setSummarizingData(data) {
|
||
if (data.result === '0') {
|
||
const preDTO = data.content.preDTO ? data.content.preDTO : {}
|
||
const rlDTO = data.content.rlDTO ? data.content.rlDTO : {}
|
||
const productDTO = data.content.productDTO ? data.content.productDTO : {}
|
||
// 汇总业绩显示
|
||
this.$refs.summarizing.setPerformance(preDTO)
|
||
this.$refs.summarizing.setProducts(productDTO)
|
||
this.$refs.summarizing.setManpower(rlDTO)
|
||
} else {
|
||
this.$toast(data.resultMessage)
|
||
}
|
||
}
|
||
},
|
||
watch: {
|
||
active(nv) {
|
||
// nv = 0 查询汇总
|
||
if (nv === 0) {
|
||
this.params.type = 'all'
|
||
this.setRankData()
|
||
} else {
|
||
switch (this.typeIndex) {
|
||
case 0:
|
||
this.params.type = 'prem'
|
||
break
|
||
case 1:
|
||
this.params.type = 'active'
|
||
break
|
||
case 2:
|
||
this.params.type = 'product'
|
||
break
|
||
}
|
||
this.$nextTick(() => {
|
||
this.updateQueryCom(this.$refs.organization.active)
|
||
})
|
||
}
|
||
},
|
||
async typeIndex() {
|
||
this.setRankData()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.header {
|
||
font-size: 14px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 8px;
|
||
background: #f03;
|
||
.header-left,
|
||
.header-center,
|
||
.header-right {
|
||
border-radius: 5px;
|
||
overflow: hidden;
|
||
}
|
||
.header-center {
|
||
.month {
|
||
border-left: none;
|
||
border-right: none;
|
||
}
|
||
.van-button {
|
||
border-radius: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.classification {
|
||
font-size: 14px;
|
||
padding: 15px;
|
||
}
|
||
|
||
.content {
|
||
padding: 0 10px;
|
||
}
|
||
|
||
.title {
|
||
font-weight: bolder;
|
||
margin: 15px;
|
||
}
|
||
|
||
.data-type {
|
||
display: inline-block;
|
||
padding: 5px 10px;
|
||
border-radius: 10px;
|
||
margin: 10px;
|
||
border: 1px solid #ccc;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.data-active {
|
||
display: inline-block;
|
||
padding: 5px 10px;
|
||
background: red;
|
||
border-radius: 10px;
|
||
margin: 10px;
|
||
color: #fff;
|
||
border: 1px solid red;
|
||
}
|
||
|
||
.btn-gray {
|
||
background-color: #f2f2f2;
|
||
}
|
||
|
||
.activeBtn {
|
||
color: red;
|
||
background-color: #fff;
|
||
}
|
||
|
||
::v-deep .van-tab__pane {
|
||
background-color: #fff;
|
||
}
|
||
|
||
::v-deep .van-button__text {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
::v-deep .van-button {
|
||
padding: 0 10px;
|
||
}
|
||
|
||
::v-deep [class*='van-hairline']::after {
|
||
border: none;
|
||
}
|
||
|
||
.van-icon {
|
||
font-weight: bolder;
|
||
}
|
||
|
||
::v-deep .classification .van-icon {
|
||
vertical-align: middle;
|
||
margin-right: 5px;
|
||
margin-bottom: 3px;
|
||
}
|
||
|
||
::v-deep .van-tab--active {
|
||
font-size: 16px;
|
||
font-weight: bolder;
|
||
transition: all 0.1s ease;
|
||
}
|
||
</style>
|