mirror of
http://112.124.100.131/GFRS/ebiz-h5.git
synced 2025-12-09 05:16:44 +08:00
494 lines
14 KiB
Vue
494 lines
14 KiB
Vue
<template>
|
||
<div v-cloak class="group-office-container">
|
||
<!-- <van-nav-bar left-text="机构业绩" left-arrow @click-left="onBack"> -->
|
||
<!-- <template #right>
|
||
<img @click="getlComPremDetil" :src="refreshLogo" />
|
||
</template> -->
|
||
<!-- </van-nav-bar> -->
|
||
<!-- 业绩和人力 -->
|
||
<!-- <van-tabs @click="onClickMain" type="card" class="p0 title">
|
||
<van-tab title="机构业绩排名"></van-tab>
|
||
<van-tab title="机构人力排名"></van-tab>
|
||
</van-tabs> -->
|
||
<!-- 年月日选择 -->
|
||
<van-tabs @click="onClickRabs" type="card" class="pl20 pr20 pt10 pb10 bg-red">
|
||
<van-tab title="实时"></van-tab>
|
||
<van-tab @click="showDatePicker=true" title="日"></van-tab>
|
||
<van-tab title="月"></van-tab>
|
||
<van-tab title="年"></van-tab>
|
||
</van-tabs>
|
||
<div class="p10 pl40 pr40">
|
||
<van-row>
|
||
<van-col span="3">
|
||
<img :src="calendar" />
|
||
</van-col>
|
||
<van-col class="fs14 mp2" span="9"><span v-if="showText">截至</span>{{timeVal}}</van-col>
|
||
<van-col span="3">
|
||
<img :src="point" />
|
||
</van-col>
|
||
<van-col span="9">
|
||
<span class="fs14" @click="showPicker=true">{{sortTypeText}}</span>
|
||
</van-col>
|
||
<van-popup v-model="showPicker" position="bottom">
|
||
<van-picker
|
||
show-toolbar
|
||
:columns="queryColumns"
|
||
@confirm="onConfirm"
|
||
@cancel="showPicker = false"
|
||
/>
|
||
</van-popup>
|
||
<!-- 时间选择器 -->
|
||
<!-- 日 -->
|
||
<van-popup v-model="showDatePicker" position="bottom">
|
||
<van-datetime-picker
|
||
v-model="currentDate"
|
||
type="date"
|
||
:min-date="minDate"
|
||
:max-date="maxDate"
|
||
@confirm="onConfirmDate"
|
||
@cancel="showDatePicker = false"
|
||
/>
|
||
</van-popup>
|
||
<!-- 月 -->
|
||
<van-popup v-model="showMonthPicker" position="bottom">
|
||
<van-datetime-picker
|
||
v-model="currentMonthDate"
|
||
type="year-month"
|
||
:min-date="minDate"
|
||
:max-date="maxDate"
|
||
:formatter="formatter"
|
||
@confirm="onConfirmDate"
|
||
@cancel="showMonthPicker = false"
|
||
/>
|
||
</van-popup>
|
||
<!-- 年 -->
|
||
<van-popup v-model="showYearPicker" position="bottom">
|
||
<van-picker
|
||
v-model="currentYearDate"
|
||
show-toolbar
|
||
:columns="YearColumns"
|
||
@confirm="onConfirmDate"
|
||
@cancel="showYearPicker = false"
|
||
/>
|
||
</van-popup>
|
||
<!-- /时间选择器 -->
|
||
</van-row>
|
||
</div>
|
||
<div class="layer-box">
|
||
<div class="layer">
|
||
<table class="fs14" style="table-layout：fixed;padding-left:14.5em;">
|
||
<tr class="title">
|
||
<th class="td-1" style="height: 1.2em;">排名</th>
|
||
<th class="td-2" style="height: 1.2em;width:8.6em">机构</th>
|
||
<th>预收标保</th>
|
||
<th>承保标保</th>
|
||
<th>承保保费</th>
|
||
<th>预收件数</th>
|
||
<th>承保件数</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
<tr>
|
||
<th class="td-1 white" style="width:4.3em">1</th>
|
||
<th class="td-2">合计</th>
|
||
<th>{{ysbbTotal.toFixed(2)}}</th>
|
||
<th>{{bzbfTotol.toFixed(2)}}</th>
|
||
<th>{{cbbfTotal.toFixed(2)}}</th>
|
||
<th>{{ysjsTotal}}</th>
|
||
<th>{{cbjsTotal}}</th>
|
||
</tr>
|
||
<tr v-for="(item,index) in tableData" :key="index">
|
||
<td class="td-1">{{index+1}}</td>
|
||
<td class="td-2">
|
||
<div style="width:10em">{{item.name}}</div>
|
||
</td>
|
||
<td>{{item.ysbb}}</td>
|
||
<td>{{item.bzbf}}</td>
|
||
<td>{{item.cbbf}}</td>
|
||
<td>{{item.ysjs}}</td>
|
||
<td>{{item.cbjs}}</td>
|
||
<td>
|
||
<span @click="toDetail(item.code)" class="red">查看</span>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
// import { XTable } from 'vux'
|
||
import { branchOfficeApi } from '@/api/ebiz/branchOffice/branchOffice'
|
||
import refreshLogo from '@/assets/images/ebiz/refresh.png'
|
||
import calendar from '@/assets/images/ebiz/calendar.png'
|
||
import point from '@/assets/images/ebiz/point.png'
|
||
import { Tabs, Tab } from 'vant'
|
||
export default {
|
||
name: 'districtOffice',
|
||
components: {
|
||
// XTable,
|
||
[Tabs.name]: Tabs,
|
||
[Tab.name]: Tab,
|
||
},
|
||
data() {
|
||
return {
|
||
curMainType:"01",
|
||
showText:true,
|
||
YearColumns: ['2020', '2019'],
|
||
minDate: new Date(2019, 0, 1),
|
||
maxDate: new Date(2020, 10, 1),
|
||
currentMonthDate: new Date(),
|
||
currentYearDate: new Date(),
|
||
currentDate: new Date(),
|
||
sortType: '1',
|
||
// 总和
|
||
ysbbTotal:0,
|
||
bzbfTotol:0,
|
||
ysjsTotal: 0,
|
||
ysbbTotol: 0,
|
||
cbjsTotal: 0,
|
||
cbbfTotal: 0,
|
||
bzbfTotal: 0,
|
||
tableData: [],
|
||
timeVal: '',
|
||
sortTypeText: '预收标保',
|
||
queryColumns: ['预收件数', '预收标保', '承保件数', '承保标保', '承保标保'],
|
||
showPicker: false,
|
||
// 年月日选择器
|
||
showDatePicker: false,
|
||
showMonthPicker: false,
|
||
showYearPicker: false,
|
||
//
|
||
refreshLogo,
|
||
calendar,
|
||
point,
|
||
active: 0,
|
||
// 当前的机构编码
|
||
curCode: '',
|
||
dateType: 'now',
|
||
dateVal: '',
|
||
curTab: '',
|
||
shitimeVal:""
|
||
}
|
||
},
|
||
methods: {
|
||
formatterYear(type, val) {
|
||
if (type === 'year') {
|
||
return val + '年'
|
||
}
|
||
return val
|
||
},
|
||
formatter(type, val) {
|
||
if (type === 'year') {
|
||
return `${val}年`
|
||
} else if (type === 'month') {
|
||
return `${val}月`
|
||
}
|
||
return val
|
||
},
|
||
onClickMain(name) {
|
||
console.log(name)
|
||
if (name == 1) {
|
||
this.curMainType = '02'
|
||
} else {
|
||
this.curMainType = '01'
|
||
}
|
||
this.getlComPremDetil()
|
||
},
|
||
onClickRabs(name, title) {
|
||
this.curTab = name
|
||
if (name == 1) {
|
||
this.showDatePicker = true
|
||
} else if (name == 2) {
|
||
this.showMonthPicker = true
|
||
} else if(name == 3) {
|
||
this.showYearPicker = true
|
||
} else {
|
||
// "截至"文字显示出来
|
||
this.showText=true
|
||
// 实时的时候date清空
|
||
this.dateType = 'now'
|
||
this.dateVal = ''
|
||
// 左侧时间实时赋值
|
||
this.timeVal= this.shitimeVal
|
||
// 调接口
|
||
this.getlComPremDetil()
|
||
}
|
||
},
|
||
toDetail(manageCode) {
|
||
this.$router.push({
|
||
path: '/institutionalPerform/personalOffice',
|
||
query: {
|
||
manageCode: manageCode,
|
||
timeVal:this.timeVal,
|
||
showText:this.showText
|
||
},
|
||
})
|
||
},
|
||
//修改月、天的格式，保持两位数显示
|
||
add0(m) {
|
||
return m < 10 ? '0' + m : m
|
||
},
|
||
getCurrentDate() {
|
||
var timeStr = ''
|
||
var curDate = new Date()
|
||
var curMonth = curDate.getMonth() + 1 //获取当前月份(0-11,0代表1月)
|
||
var curDay = curDate.getDate() //获取当前日(1-31)
|
||
|
||
var curHour = curDate.getHours() //获取当前小时数(0-23)
|
||
var curMinute = curDate.getMinutes() // 获取当前分钟数(0-59)
|
||
var curSec = curDate.getSeconds() //获取当前秒数(0-59)
|
||
if (curHour < 10) {
|
||
if (curMinute < 10) {
|
||
timeStr += ' 0' + curHour + ':0' + curMinute
|
||
} else {
|
||
timeStr += ' 0' + curHour + ':' + curMinute
|
||
}
|
||
} else {
|
||
if (curMinute < 10) {
|
||
timeStr += ' ' + curHour + ':0' + curMinute
|
||
} else {
|
||
timeStr += ' ' + curHour + ':' + curMinute
|
||
}
|
||
}
|
||
// 一直在获取时间
|
||
this.shitimeVal = this.add0(curMonth) + '-' + this.add0(curDay) + timeStr
|
||
// 存页面上值得一个变量
|
||
this.timeVal= this.shitimeVal
|
||
},
|
||
dateFormat(time) {
|
||
// 时间格式化 2019-09-08
|
||
let year = time.getFullYear()
|
||
let month = time.getMonth() + 1
|
||
let day = time.getDate()
|
||
return year + '-' + this.add0(month) + '-' + this.add0(day)
|
||
},
|
||
onConfirmDate(value, index) {
|
||
// 点击确定那么文字“截至”就隐藏
|
||
this.showText=false;
|
||
console.log(this.curTab)
|
||
console.log(value)
|
||
if (this.curTab == 1) {
|
||
// now：当前 y:年 m:月 d:日
|
||
// 日
|
||
this.dateType = 'd'
|
||
this.dateVal = this.dateFormat(this.currentDate)
|
||
console.log(this.dateVal)
|
||
// 左侧时间实时赋值
|
||
this.timeVal=this.dateVal
|
||
} else if (this.curTab == 2) {
|
||
// 月
|
||
this.dateType = 'm'
|
||
this.dateVal = this.dateFormat(this.currentMonthDate)
|
||
// 左侧时间实时赋值
|
||
this.timeVal=this.dateVal.substring(0,7)
|
||
} else if (this.curTab == 3) {
|
||
// 年
|
||
this.dateType = 'y'
|
||
this.dateVal = value+'-' + '01' + '-' + '01'
|
||
// 左侧时间实时赋值
|
||
this.timeVal=this.dateVal.substring(0,4)
|
||
}
|
||
this.showDatePicker=false,
|
||
this.showMonthPicker=false,
|
||
this.showYearPicker= false,
|
||
this.getlComPremDetil()
|
||
},
|
||
onConfirm(value, index) {
|
||
this.sortTypeText = value
|
||
switch (value) {
|
||
// '预收件数', '预收标保', '承保件数', '承保标保', '承保标保
|
||
case '预收件数':
|
||
this.sortType = '1'
|
||
break
|
||
case '预收标保':
|
||
this.sortType = '2'
|
||
break
|
||
case '承保件数':
|
||
this.sortType = '3'
|
||
break
|
||
case '承保标保':
|
||
this.sortType = '4'
|
||
break
|
||
case '承保标保':
|
||
this.sortType = '5'
|
||
break
|
||
}
|
||
this.showPicker = false
|
||
this.getlComPremDetil()
|
||
},
|
||
onBack() {
|
||
this.$router.go(-1);
|
||
},
|
||
//获取列表
|
||
getlComPremDetil() {
|
||
let $this = this
|
||
let data = {
|
||
manageCode: this.$route.query.manageCode,
|
||
manageLv: "07",
|
||
sortType: this.sortType,
|
||
queryType: this.dateType,
|
||
date: this.dateVal,
|
||
//01：保费排行 02：人力排行
|
||
type: this.curMainType,
|
||
}
|
||
// 去除对象里面是空的属性
|
||
for (var key in data) {
|
||
if (data[key] === '') {
|
||
delete data[key]
|
||
}
|
||
}
|
||
branchOfficeApi(data)
|
||
.then((res) => {
|
||
if (res.result == 0) {
|
||
console.log(res.content.list)
|
||
$this.tableData = res.content.list
|
||
|
||
$this.ysjsTotal = 0
|
||
$this.ysbbTotol = 0
|
||
$this.cbjsTotal = 0
|
||
$this.cbbfTotal = 0
|
||
$this.bzbfTotal = 0
|
||
$this.ysbbTotal =0
|
||
$this.bzbfTotol=0
|
||
// 业绩排名的 总计计算
|
||
$this.tableData.map(function (val) {
|
||
$this.bzbfTotol = Number($this.bzbfTotol) + Number(val.ysbb)
|
||
$this.ysbbTotal = Number($this.ysbbTotal) + Number(val.ysbb)
|
||
$this.ysjsTotal = Number($this.ysjsTotal) + Number(val.ysjs)
|
||
$this.ysbbTotol = Number($this.ysbbTotol) + Number(val.ysbb)
|
||
$this.cbjsTotal = Number($this.cbjsTotal) + Number(val.cbjs)
|
||
$this.cbbfTotal = Number($this.cbbfTotal) + Number(val.cbbf)
|
||
$this.bzbfTotal = Number($this.bzbfTotal) + Number(val.bzbf)
|
||
})
|
||
console.log($this.tableData)
|
||
}
|
||
})
|
||
.catch((err) => {})
|
||
},
|
||
},
|
||
created() {
|
||
setTimeout(() => {
|
||
// eslint-disable-next-line no-undef
|
||
EWebBridge.webCallAppInJs('webview_right_button', {
|
||
btns: [
|
||
{
|
||
img: this.$assetsUrl + 'images/ebiz/refresh.png',
|
||
route: {
|
||
flag: '',
|
||
extra: {
|
||
url: location.origin + '/#/institutionalPerform/BranchOffice',
|
||
},
|
||
},
|
||
},
|
||
],
|
||
})
|
||
}, 1000)
|
||
},
|
||
mounted() {
|
||
setInterval(this.getCurrentDate(), 1000 * 60)
|
||
this.timeVal=this.$route.query.timeVal||""
|
||
this.showText=this.$route.query.showText
|
||
this.getlComPremDetil()
|
||
},
|
||
}
|
||
</script>
|
||
<style lang="scss">
|
||
.group-office-container {
|
||
.van-tabs__nav--card .van-tab.van-tab--active {
|
||
color: red;
|
||
background-color: #fff;
|
||
}
|
||
.van-tabs__nav--card .van-tab {
|
||
color: #232020;
|
||
background-color: #e6e6e6;
|
||
border-right: 1px solid #8e8d8d;
|
||
}
|
||
.van-nav-bar .van-icon,
|
||
.van-nav-bar__text {
|
||
color: #232020;
|
||
}
|
||
.slide-box {
|
||
display: -webkit-box;
|
||
overflow-x: scroll;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
table.gridtable {
|
||
font-family: verdana, arial, sans-serif;
|
||
font-size: 11px;
|
||
color: #333333;
|
||
border-width: 1px;
|
||
border-color: #666666;
|
||
border-collapse: collapse;
|
||
}
|
||
table .title th {
|
||
color: #fff;
|
||
padding: 5px 10px;
|
||
|
||
white-space: nowrap;
|
||
border-width: 1px;
|
||
border-color: #666666;
|
||
background-color: #f56123;
|
||
border-top: 0;
|
||
border-left: 0;
|
||
border-right: 0;
|
||
}
|
||
table td {
|
||
text-align: center;
|
||
border-width: 1px;
|
||
padding: 8px;
|
||
// border-style: solid;
|
||
// border-color: #666666;
|
||
background-color: #ffffff;
|
||
border-top: 0;
|
||
border-left: 0;
|
||
border-right: 0;
|
||
}
|
||
table {
|
||
border: 0;
|
||
}
|
||
.title .van-tabs__nav--card {
|
||
margin: 0;
|
||
border: 1px solid #bdbdbd;
|
||
border-left: none;
|
||
border-right: none;
|
||
}
|
||
.title .van-tabs__nav--card .van-tab {
|
||
background-color: transparent;
|
||
}
|
||
// 固定表头
|
||
td,th{
|
||
/* color: #333;
|
||
font-size: 14px;
|
||
border-right: 1px solid #333;
|
||
line-height: 30px; */
|
||
/* box-sizing: border-box; */
|
||
background: #fff;
|
||
}
|
||
.layer-box{
|
||
width: 100%;
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
.layer{
|
||
width: 100%;
|
||
overflow: hidden;
|
||
overflow-x: scroll;
|
||
}
|
||
.td-1{
|
||
position: absolute;
|
||
left: 0;
|
||
z-index: 2;
|
||
width: 3em;
|
||
}
|
||
.td-2{
|
||
position: absolute;
|
||
left: 4.6em;
|
||
z-index: 2;
|
||
width: 10em;
|
||
padding: 0;
|
||
height: 2.3em;
|
||
}
|
||
}
|
||
</style>
|