mirror of
http://112.124.100.131/GFRS/ebiz-h5.git
synced 2025-12-09 23:56:43 +08:00
Merge branch 'feature/开门红业绩查询' into feature/开门红
# Conflicts: # src/api/ebiz/goodStart/index.js # src/router/ebiz/goodStart.js
This commit is contained in:
mengxiaolong
@@ -11,7 +11,6 @@ export function getComList(data) {
|
||||
}
|
||||
|
||||
// 百宝箱菜单列表查询
|
||||
|
||||
export function getTreasureMenus(data) {
|
||||
return request({
|
||||
url: getUrl('/app/code/getCodeValue', 1),
|
||||
@@ -19,3 +18,12 @@ export function getTreasureMenus(data) {
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
// 业绩查询
|
||||
export function getComPerformance(data) {
|
||||
return request({
|
||||
url: getUrl('/data/performance/getComPerformance', 1),
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
// 开门红业绩排名
|
||||
const PerformanceReport = () => import('@/views/ebiz/goodStart/PerformanceReport')
|
||||
// 开门红专区
|
||||
const Prefecture = () => import('@/views/ebiz/goodStart/Prefecture')
|
||||
const Treasure = () => import('@/views/ebiz/goodStart/Treasure')
|
||||
@@ -12,6 +14,14 @@ const spreadParams = function(route) {
|
||||
}
|
||||
|
||||
export default [
|
||||
{
|
||||
path: '/goodStart/performanceReport',
|
||||
name: 'PerformanceReport',
|
||||
component: PerformanceReport,
|
||||
meta: {
|
||||
title: '开门红业绩排名'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/goodStart/prefecture',
|
||||
name: 'Prefecture',
|
||||
|
||||
157
src/views/ebiz/goodStart/Organization.vue
Normal file
157
src/views/ebiz/goodStart/Organization.vue
Normal file
@@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<div class="organization">
|
||||
<van-tabs :ellipsis="false" :line-width="20" @change="updateQueryConditon">
|
||||
<van-tab v-for="(tab, index) in tabs" :key="index" :title="tab" />
|
||||
</van-tabs>
|
||||
<div class="table-wrapper">
|
||||
<table class="myTable mb30" cellspacing="0" cellpadding="0">
|
||||
<tr>
|
||||
<th class="sticky">排名</th>
|
||||
<th v-for="(column, index) in tableColumns" :key="index" :class="{ orgName: index === 0 }">
|
||||
{{ column.name }}
|
||||
</th>
|
||||
</tr>
|
||||
<tr v-for="(value, index) in values" :key="index">
|
||||
<td class="sticky bleft bright">{{ index + 1 }}</td>
|
||||
<td v-for="(key, i) in needGettingKey" :key="i" class="bright">{{ value[key] | blankFilter }}</td>
|
||||
</tr>
|
||||
<tr v-if="values.length === 0">
|
||||
<td class="nodata bleft bright" :colspan="tableColumns.length + 1">暂无数据</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Tab, Tabs } from 'vant'
|
||||
export default {
|
||||
name: 'Organization',
|
||||
components: {
|
||||
[Tab.name]: Tab,
|
||||
[Tabs.name]: Tabs
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tabs: ['中心支公司', '营销服务部', '下辖营业区', '下辖营业部', '下辖营业组'],
|
||||
needGettingKey: ['name', 'ysbb', 'ysjs', 'bzbf', 'cbjs'],
|
||||
tableColumns: [
|
||||
{ name: '机构', key: 'name' },
|
||||
{ name: '预收标保(万元)', key: 'ysbb' },
|
||||
{ name: '预收件数(件)', key: 'ysjs' },
|
||||
{ name: '承保标保(万元)', key: 'bzbf' },
|
||||
{ name: '承保件数(件)', key: 'cbjs' }
|
||||
],
|
||||
values: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateQueryConditon(index) {
|
||||
this.$emit('updateQueryCom', index)
|
||||
},
|
||||
setTableData(data) {
|
||||
data = data.filter(item => {
|
||||
return item.name
|
||||
})
|
||||
data.map(item => {
|
||||
item.bzbf = parseFloat(item.bzbf).toFixed(2)
|
||||
item.ysbb = parseFloat(item.ysbb).toFixed(2)
|
||||
return item
|
||||
})
|
||||
this.values = data
|
||||
},
|
||||
calculate() {
|
||||
let allPrice = this.values.reduce((prevVal, currVal) => {
|
||||
return prevVal + Number(currVal.cbbb)
|
||||
}, 0)
|
||||
this.values.map(product => {
|
||||
product.percent = ((product.cbbb / allPrice) * 100).toFixed(2)
|
||||
return product
|
||||
})
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
blankFilter(val) {
|
||||
return val ? val : '-'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$border: 1px solid #e4e4e4;
|
||||
$bgRed: #f03;
|
||||
$white: #fff;
|
||||
|
||||
.orgName {
|
||||
width: 8em;
|
||||
}
|
||||
|
||||
.organization {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
::v-deep .van-tabs__wrap {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
::v-deep .van-tabs__nav {
|
||||
border-radius: 5px;
|
||||
border: 1px solid #e4e4e4;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
::v-deep .van-tabs__line {
|
||||
width: 50px;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
::v-deep .van-tab--active {
|
||||
// font-size: 14px;
|
||||
font-weight: bolder;
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
|
||||
.table-wrapper {
|
||||
overflow: auto;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.myTable {
|
||||
text-align: center;
|
||||
min-width: 200vw;
|
||||
}
|
||||
|
||||
.myTable td,
|
||||
.myTable th {
|
||||
font-size: 14px;
|
||||
padding: 10px 5px;
|
||||
border-bottom: $border;
|
||||
border-collapse: collapse;
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
.myTable th {
|
||||
background-color: $bgRed;
|
||||
border: none;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.sticky {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.bleft {
|
||||
border-left: $border;
|
||||
}
|
||||
|
||||
.bright {
|
||||
border-right: $border;
|
||||
}
|
||||
|
||||
.nodata {
|
||||
text-align: left;
|
||||
text-indent: 10em;
|
||||
}
|
||||
</style>
|
||||
420
src/views/ebiz/goodStart/PerformanceReport.vue
Normal file
420
src/views/ebiz/goodStart/PerformanceReport.vue
Normal file
@@ -0,0 +1,420 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="header">
|
||||
<div class="header-left">
|
||||
<van-button>
|
||||
<img :src="point" />
|
||||
<span class="ml5 mr5">标保</span>
|
||||
</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">
|
||||
<div :style="scrollObj">
|
||||
<span>机构名称: </span>
|
||||
<span v-for="(level, index) in 6" :key="index" class="filter" @click="showLevelCondition(level)">
|
||||
<span>{{ levelNames[level] }}</span>
|
||||
<van-icon name="arrow-down" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<Organization ref="organization" @updateQueryCom="updateQueryCom" @updateData="updateData" />
|
||||
</div>
|
||||
<!-- 机构筛选栏 -->
|
||||
<van-popup v-for="(level, index) in 6" :key="index" v-model="popCondition[index]" position="bottom" :style="{ height: '40vh' }">
|
||||
<van-picker show-toolbar :columns="columns[level]" @confirm="onLevelConditionConfirm($event, level)" @cancel="closeLevelConditionPopup(level)" />
|
||||
</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="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 Organization from './Organization.vue'
|
||||
import dateUtil from '@/assets/js/utils/date-utils.js'
|
||||
import { getComPerformance, getComList } from '@/api/ebiz/goodStart'
|
||||
|
||||
// 当前时间
|
||||
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,
|
||||
Organization
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
scrollObj: { width: 'auto', whiteSpace: 'nowrap' },
|
||||
popCondition: [false, false, false, false, false, false],
|
||||
columns: {
|
||||
1: ['全国'],
|
||||
2: ['全部'],
|
||||
3: ['全部'],
|
||||
4: ['全部'],
|
||||
5: ['全部'],
|
||||
6: ['全部']
|
||||
},
|
||||
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,
|
||||
active: 0,
|
||||
// 日期筛选是否显示
|
||||
isTimeBarShow: false,
|
||||
// 日筛选是否显示
|
||||
isDayConditionShow: false,
|
||||
// 月筛选是否展示
|
||||
isMonthConditionShow: false,
|
||||
// 年筛选是否显示
|
||||
isYearConditionShow: false,
|
||||
point,
|
||||
levelNames: {
|
||||
1: '全国',
|
||||
2: '全部',
|
||||
3: '全部',
|
||||
4: '全部',
|
||||
5: '全部',
|
||||
6: '全部'
|
||||
},
|
||||
level1Code: 0,
|
||||
level1Objs: [],
|
||||
level2Code: 0,
|
||||
level2Objs: [],
|
||||
level3Code: 0,
|
||||
level3Objs: [],
|
||||
level4Code: 0,
|
||||
level4Objs: [],
|
||||
level5Code: 0,
|
||||
level5Objs: [],
|
||||
level6Code: 0,
|
||||
level6Objs: [],
|
||||
provinceCode: 0,
|
||||
provinceObjs: [],
|
||||
cityCode: 0,
|
||||
cityObjs: [],
|
||||
areaCode: 0,
|
||||
areaObjs: [],
|
||||
years: [],
|
||||
params: {
|
||||
// 86: 全国
|
||||
manageCode: '86',
|
||||
// 01: 全国, 02: 中心支公司, 03: 营销服务部, 04: 下辖营业区
|
||||
manageLv: '01',
|
||||
// 日期类型: 年/月/日/实时
|
||||
queryType: 'd',
|
||||
date: currentDate,
|
||||
type: 'KMH',
|
||||
queryCom: 'z'
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initData()
|
||||
this.setRightBtn()
|
||||
},
|
||||
methods: {
|
||||
showLevelCondition(level) {
|
||||
this.$set(this.popCondition, level - 1, true)
|
||||
},
|
||||
closeLevelConditionPopup(level) {
|
||||
this.$set(this.popCondition, level - 1, false)
|
||||
},
|
||||
// 查询某一层级机构筛选选项
|
||||
async getLevelFilterColumn(manageCode = '', manageLv = '') {
|
||||
return await getComList({
|
||||
manageCode,
|
||||
manageLv
|
||||
})
|
||||
},
|
||||
setLevelColumns(level) {
|
||||
console.log(level)
|
||||
const columns = [level === 1 ? '全国' : '全部']
|
||||
this[`level${level}Objs`].forEach(item => {
|
||||
columns.push(item.name)
|
||||
})
|
||||
this.$set(this.columns, level, columns)
|
||||
},
|
||||
async onLevelConditionConfirm(data, level) {
|
||||
// 关闭弹出框
|
||||
this.closeLevelConditionPopup(level)
|
||||
// 设置选择的机构名称
|
||||
this.levelNames[level] = data
|
||||
// 将当前机构下属机构设置为全部
|
||||
for (let i = level + 1; i <= 6; i++) {
|
||||
this.$set(this.levelNames, i, '全部')
|
||||
}
|
||||
const target = this[`level${level}Objs`].find(item => {
|
||||
return item.name === data
|
||||
})
|
||||
// 查询下一级机构列表
|
||||
if (target && level < 6) {
|
||||
this[`level${level}Code`] = target.code
|
||||
const data = await this.getLevelFilterColumn(target.code, `0${level + 1}`)
|
||||
|
||||
this[`level${level + 1}Objs`].splice(0)
|
||||
this[`level${level + 1}Objs`].push(...data.content)
|
||||
this.setLevelColumns(level + 1)
|
||||
}
|
||||
// level1~3取code, level4~6取inCode
|
||||
if (level >= 4) {
|
||||
if (data === '全部') {
|
||||
this.params.manageCode = this[`level${level}Code`]
|
||||
} else {
|
||||
this.params.manageCode = target.inCode
|
||||
}
|
||||
} else {
|
||||
if (data === '全国') {
|
||||
this.params.manageCode = '86'
|
||||
} else if (data === '全部') {
|
||||
this.params.manageCode = this[`level${level - 1}Code`]
|
||||
} else {
|
||||
this.params.manageCode = target.code
|
||||
}
|
||||
}
|
||||
if (data === '全国') {
|
||||
this.params.manageLv = '01'
|
||||
} else if (data === '全部') {
|
||||
this.params.manageLv = `0${level}`
|
||||
} else {
|
||||
this.params.manageLv = `0${level + 1}`
|
||||
}
|
||||
// 发送接口查数据
|
||||
this.getSetDate()
|
||||
},
|
||||
reset() {
|
||||
location.reload()
|
||||
},
|
||||
async getSetDate() {
|
||||
let result = await this.getSummarizingData()
|
||||
this.$refs.organization.setTableData(result.content.list)
|
||||
},
|
||||
appCallBack(data) {
|
||||
if (data.trigger == 'right_button_click') {
|
||||
this.reset()
|
||||
}
|
||||
},
|
||||
async dataTypeChange() {
|
||||
this.getSetDate()
|
||||
},
|
||||
setRightBtn() {
|
||||
setTimeout(() => {
|
||||
window.EWebBridge.webCallAppInJs('webview_right_button', {
|
||||
btns: [
|
||||
{
|
||||
img: this.$assetsUrl + 'images/ebiz/refresh.png'
|
||||
}
|
||||
]
|
||||
})
|
||||
}, 1000)
|
||||
window.appCallBack = this.appCallBack
|
||||
},
|
||||
updateData() {
|
||||
this.getSummarizingData()
|
||||
},
|
||||
async initData() {
|
||||
// 初始化年份筛选数据
|
||||
const currentYear = new Date().getFullYear()
|
||||
const startYear = currentYear - 10
|
||||
for (let year = startYear; year <= currentYear; year++) {
|
||||
this.years.unshift(year)
|
||||
}
|
||||
// 查询全部分公司
|
||||
const res = await this.getLevelFilterColumn()
|
||||
const firsts = res.content
|
||||
|
||||
this.level1Objs = firsts
|
||||
this.setLevelColumns(1)
|
||||
// 查询默认数据
|
||||
let result = await this.getSummarizingData()
|
||||
this.$refs.organization.setTableData(result.content.list)
|
||||
},
|
||||
async getSummarizingData() {
|
||||
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')
|
||||
let result = await getComPerformance(this.params)
|
||||
return result
|
||||
},
|
||||
async onDayConditionConfirm() {
|
||||
this.isDayConditionShow = false
|
||||
this.timeType = 0
|
||||
this.getSetDate()
|
||||
},
|
||||
async onMonthConditionConfirm() {
|
||||
this.isMonthConditionShow = false
|
||||
this.timeType = 1
|
||||
this.getSetDate()
|
||||
},
|
||||
async onYearConditionConfirm() {
|
||||
this.isYearConditionShow = false
|
||||
this.timeType = 2
|
||||
this.getSetDate()
|
||||
},
|
||||
// 筛选时间确认事件
|
||||
async onDayTimeConditionConfirm(time) {
|
||||
this.isTimeBarShow = false
|
||||
this.timeType = 3
|
||||
this.timeCondition = dateUtil.formatDate(time, 'MM-dd HH:mm')
|
||||
this.params.date = ''
|
||||
this.getSetDate()
|
||||
},
|
||||
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
|
||||
case 3:
|
||||
this.params.queryCom = 'b'
|
||||
break
|
||||
case 4:
|
||||
this.params.queryCom = 'zz'
|
||||
break
|
||||
}
|
||||
let result = await this.getSummarizingData()
|
||||
this.$refs.organization.setTableData(result.content.list)
|
||||
},
|
||||
setSummarizingData(data) {
|
||||
if (data.result === '0') {
|
||||
this.$refs.organization.setTableData(data.content.list)
|
||||
} else {
|
||||
this.$toast(data.resultMessage)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</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;
|
||||
}
|
||||
.btn-gray {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
.activeBtn {
|
||||
color: red;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.classification {
|
||||
font-size: 14px;
|
||||
margin: 15px;
|
||||
overflow: hidden;
|
||||
overflow-x: auto;
|
||||
.filter {
|
||||
margin-left: 5px;
|
||||
.van-icon {
|
||||
vertical-align: middle;
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.van-icon {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
::v-deep .van-button__text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
::v-deep .van-button {
|
||||
padding: 0 10px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user