mirror of
http://112.124.100.131/GFRS/ebiz-h5.git
synced 2025-12-23 20:12:53 +08:00
Merge branch 'feature/【机构业绩查询】' into dev
# Conflicts: # src/main.js # src/router/ebiz/index.js
This commit is contained in:
zhu.wenli@ebiz-digits.com
11
src/api/ebiz/branchOffice/branchOffice.js
Normal file
11
src/api/ebiz/branchOffice/branchOffice.js
Normal file
@@ -0,0 +1,11 @@
|
||||
import request from '@/assets/js/utils/request'
|
||||
import getUrl from '@/assets/js/utils/get-url'
|
||||
|
||||
// 代理人客户列表
|
||||
export function branchOfficeApi(data) {
|
||||
return request({
|
||||
url: getUrl('/data/performance/getlComPremDetil', 1),
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
BIN
src/assets/images/ebiz/calendar.png
Normal file
BIN
src/assets/images/ebiz/calendar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 476 B |
BIN
src/assets/images/ebiz/point.png
Normal file
BIN
src/assets/images/ebiz/point.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 407 B |
BIN
src/assets/images/ebiz/refresh.png
Normal file
BIN
src/assets/images/ebiz/refresh.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 496 B |
20
src/main.js
20
src/main.js
@@ -13,15 +13,33 @@ import vueHashCalendar from 'vue-hash-calendar'
|
||||
import 'vue-hash-calendar/lib/vue-hash-calendar.css'
|
||||
|
||||
import {
|
||||
Cell, CellGroup,
|
||||
DatetimePicker ,
|
||||
Popup ,
|
||||
Picker,
|
||||
Col,
|
||||
Row,
|
||||
Tab,
|
||||
Tabs,
|
||||
NavBar,
|
||||
Toast,
|
||||
Button,
|
||||
Dialog,
|
||||
Icon,
|
||||
Lazyload
|
||||
} from 'vant'
|
||||
|
||||
Vue.use(Cell);
|
||||
Vue.use(CellGroup)
|
||||
Vue.use(DatetimePicker);
|
||||
Vue.use(Popup)
|
||||
Vue.use(Picker)
|
||||
Vue.use(Col)
|
||||
Vue.use(Row);
|
||||
Vue.use(Tab)
|
||||
Vue.use(Tabs);
|
||||
Vue.use(Icon)
|
||||
Vue.use(vueHashCalendar)
|
||||
Vue.use(NavBar);
|
||||
Vue.use(Toast)
|
||||
Vue.use(Button)
|
||||
Vue.use(Dialog)
|
||||
|
||||
@@ -21,6 +21,8 @@ import exercising from './exercising'
|
||||
import productStore from './product-store'
|
||||
import performance from './performance'
|
||||
import attendance from './attendance'
|
||||
// 机构业绩
|
||||
import institutionalPerform from './institutionalPerform'
|
||||
export default [
|
||||
...proposal,
|
||||
...sale,
|
||||
@@ -45,5 +47,6 @@ export default [
|
||||
...claims,
|
||||
...productStore,
|
||||
...performance,
|
||||
...attendance
|
||||
...attendance,
|
||||
...institutionalPerform
|
||||
] //根据需要进行删减
|
||||
|
||||
91
src/router/ebiz/institutionalPerform.js
Normal file
91
src/router/ebiz/institutionalPerform.js
Normal file
@@ -0,0 +1,91 @@
|
||||
//客户管理 定义相关组件
|
||||
const BranchOffice = () => import('@/views/ebiz/institutionalPerform/BranchOffice')
|
||||
const UnderOffice = () => import('@/views/ebiz/institutionalPerform/UnderOffice')
|
||||
const DistrictOffice = () => import('@/views/ebiz/institutionalPerform/DistrictOffice')
|
||||
const DepartmentOffice = () => import('@/views/ebiz/institutionalPerform/DepartmentOffice')
|
||||
const GroupOffice = () => import('@/views/ebiz/institutionalPerform/GroupOffice')
|
||||
const PersonalOffice = () => import('@/views/ebiz/institutionalPerform/PersonalOffice')
|
||||
const ServiceDepartOffice = () => import('@/views/ebiz/institutionalPerform/ServiceDepartOffice')
|
||||
const RegionalOffice = () => import('@/views/ebiz/institutionalPerform/RegionalOffice')
|
||||
export default [
|
||||
// 分公司
|
||||
{
|
||||
path: '/institutionalPerform/BranchOffice',
|
||||
name: 'BranchOffice',
|
||||
component: BranchOffice,
|
||||
meta: {
|
||||
title: '机构业绩',
|
||||
index: 1
|
||||
}
|
||||
},
|
||||
// 支公司 02
|
||||
{
|
||||
path: '/institutionalPerform/underOffice',
|
||||
name: 'underOffice',
|
||||
component: UnderOffice,
|
||||
meta: {
|
||||
title: '机构业绩',
|
||||
index: 1
|
||||
}
|
||||
},
|
||||
// 营销服务部 03
|
||||
{
|
||||
path: '/institutionalPerform/serviceDepartOffice',
|
||||
name: 'serviceDepartOffice',
|
||||
component: ServiceDepartOffice,
|
||||
meta: {
|
||||
title: '机构业绩',
|
||||
index: 1
|
||||
}
|
||||
},
|
||||
// 区公司 04
|
||||
{
|
||||
path: '/institutionalPerform/districtOffice',
|
||||
name: 'districtOffice',
|
||||
component: DistrictOffice,
|
||||
meta: {
|
||||
title: '机构业绩',
|
||||
index: 1
|
||||
}
|
||||
},
|
||||
// 直辖区 05
|
||||
{
|
||||
path: '/institutionalPerform/regionalOffice',
|
||||
name: 'regionalOffice',
|
||||
component: RegionalOffice,
|
||||
meta: {
|
||||
title: '机构业绩',
|
||||
index: 1
|
||||
}
|
||||
},
|
||||
// 营业部公司 06
|
||||
{
|
||||
path: '/institutionalPerform/departmentOffice',
|
||||
name: 'departmentOffice',
|
||||
component: DepartmentOffice,
|
||||
meta: {
|
||||
title: '机构业绩',
|
||||
index: 1
|
||||
}
|
||||
},
|
||||
// 组 07
|
||||
{
|
||||
path: '/institutionalPerform/groupOffice',
|
||||
name: 'groupOffice',
|
||||
component: GroupOffice,
|
||||
meta: {
|
||||
title: '机构业绩',
|
||||
index: 1
|
||||
}
|
||||
},
|
||||
// 个人 08
|
||||
{
|
||||
path: '/institutionalPerform/personalOffice',
|
||||
name: 'personalOffice',
|
||||
component: PersonalOffice,
|
||||
meta: {
|
||||
title: '机构业绩',
|
||||
index: 1
|
||||
}
|
||||
}
|
||||
]
|
||||
402
src/views/ebiz/institutionalPerform/BranchOffice.vue
Normal file
402
src/views/ebiz/institutionalPerform/BranchOffice.vue
Normal file
@@ -0,0 +1,402 @@
|
||||
<template>
|
||||
<div class="branch-office-container bg-white">
|
||||
<van-nav-bar left-text="机构业绩" left-arrow @click-left="onBack">
|
||||
<template #right>
|
||||
<img @click="getlComPremDetil" :src="refreshLogo" />
|
||||
</template>
|
||||
</van-nav-bar>
|
||||
<!-- 业绩和人力 -->
|
||||
<!-- <van-tabs type="card">
|
||||
<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" span="9">截至{{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="slide-box">
|
||||
<table class="fs14">
|
||||
<tr class="title">
|
||||
<th>排名</th>
|
||||
<th>机构</th>
|
||||
<th>预收件数</th>
|
||||
<th>预收标保</th>
|
||||
<th>承保件数</th>
|
||||
<th>承保保费</th>
|
||||
<th>标准保费</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>合计</th>
|
||||
<th>{{ysjsTotal}}</th>
|
||||
<th>{{ysbbTotol}}</th>
|
||||
<th>{{cbjsTotal}}</th>
|
||||
<th>{{cbbfTotal}}</th>
|
||||
<th>{{bzbfTotal}}</th>
|
||||
</tr>
|
||||
<tr v-for="(item,index) in tableData" :key="index">
|
||||
<td>{{index+1}}</td>
|
||||
<td>{{item.name}}</td>
|
||||
<td>{{item.ysjs}}</td>
|
||||
<td>{{item.ysbb}}</td>
|
||||
<td>{{item.cbjs}}</td>
|
||||
<td>{{item.cbbf}}</td>
|
||||
<td>{{item.bzbf}}</td>
|
||||
<td>
|
||||
<!-- 分公司 -->
|
||||
<span @click="toZhi(item.code)" class="red">查看</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</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: 'BranchOffice',
|
||||
components: {
|
||||
// XTable,
|
||||
[Tabs.name]: Tabs,
|
||||
[Tab.name]: Tab,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
YearColumns: ['2020', '2019', '2018', '2017', '2016', '2015'],
|
||||
minDate: new Date(1997, 0, 1),
|
||||
maxDate: new Date(2020, 10, 1),
|
||||
currentMonthDate: new Date(),
|
||||
currentYearDate: new Date(),
|
||||
currentDate: new Date(),
|
||||
sortType: '1',
|
||||
// 总和
|
||||
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
|
||||
},
|
||||
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 {
|
||||
// 实时的时候date清空
|
||||
this.dateType = 'now'
|
||||
this.dateVal = ''
|
||||
// 左侧时间实时赋值
|
||||
this.timeVal = this.shitimeVal
|
||||
// 调接口
|
||||
this.getlComPremDetil()
|
||||
}
|
||||
},
|
||||
toZhi(manageCode) {
|
||||
this.$router.push({
|
||||
path: '/institutionalPerform/underOffice',
|
||||
query: {
|
||||
manageCode: manageCode,
|
||||
},
|
||||
})
|
||||
},
|
||||
//修改月、天的格式，保持两位数显示
|
||||
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) {
|
||||
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
|
||||
} else if (this.curTab == 3) {
|
||||
// 年
|
||||
this.dateType = 'y'
|
||||
this.dateVal = value + '-' + '01' + '-' + '01'
|
||||
// 左侧时间实时赋值
|
||||
this.timeVal = this.dateVal
|
||||
}
|
||||
;(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.curCode,
|
||||
// manageLv: this.showItem,
|
||||
sortType: this.sortType,
|
||||
queryType: this.dateType,
|
||||
date: this.dateVal,
|
||||
}
|
||||
// 去除对象里面是空的属性
|
||||
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.tableData.map(function (val) {
|
||||
console.log(val.ysjs)
|
||||
$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) => {})
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
setInterval(this.getCurrentDate(), 1000 * 60)
|
||||
|
||||
this.getlComPremDetil()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.branch-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;
|
||||
white-space: nowrap;
|
||||
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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
399
src/views/ebiz/institutionalPerform/DepartmentOffice.vue
Normal file
399
src/views/ebiz/institutionalPerform/DepartmentOffice.vue
Normal file
@@ -0,0 +1,399 @@
|
||||
<template>
|
||||
<div class="department-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="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" span="9">截至{{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="slide-box">
|
||||
<table class="fs14">
|
||||
<tr class="title">
|
||||
<th>排名</th>
|
||||
<th>机构</th>
|
||||
<th>预收件数</th>
|
||||
<th>预收标保</th>
|
||||
<th>承保件数</th>
|
||||
<th>承保保费</th>
|
||||
<th>标准保费</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>合计</th>
|
||||
<th>{{ysjsTotal}}</th>
|
||||
<th>{{ysbbTotol}}</th>
|
||||
<th>{{cbjsTotal}}</th>
|
||||
<th>{{cbbfTotal}}</th>
|
||||
<th>{{bzbfTotal}}</th>
|
||||
</tr>
|
||||
<tr v-for="(item,index) in tableData" :key="index">
|
||||
<td>{{index+1}}</td>
|
||||
<td>{{item.name}}</td>
|
||||
<td>{{item.ysjs}}</td>
|
||||
<td>{{item.ysbb}}</td>
|
||||
<td>{{item.cbjs}}</td>
|
||||
<td>{{item.cbbf}}</td>
|
||||
<td>{{item.bzbf}}</td>
|
||||
<td>
|
||||
<span @click="toDetail(item.code)" class="red">查看</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</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 {
|
||||
YearColumns: ['2020', '2019', '2018', '2017', '2016', '2015'],
|
||||
minDate: new Date(1997, 0, 1),
|
||||
maxDate: new Date(2020, 10, 1),
|
||||
currentMonthDate: new Date(),
|
||||
currentYearDate: new Date(),
|
||||
currentDate: new Date(),
|
||||
sortType: '1',
|
||||
// 总和
|
||||
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
|
||||
},
|
||||
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 {
|
||||
// 实时的时候date清空
|
||||
this.dateType = 'now'
|
||||
this.dateVal = ''
|
||||
// 左侧时间实时赋值
|
||||
this.timeVal= this.shitimeVal
|
||||
// 调接口
|
||||
this.getlComPremDetil()
|
||||
}
|
||||
},
|
||||
toDetail(manageCode) {
|
||||
this.$router.push({
|
||||
path: '/institutionalPerform/groupOffice',
|
||||
query: {
|
||||
manageCode: manageCode,
|
||||
},
|
||||
})
|
||||
},
|
||||
//修改月、天的格式，保持两位数显示
|
||||
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) {
|
||||
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
|
||||
} else if (this.curTab == 3) {
|
||||
// 年
|
||||
this.dateType = 'y'
|
||||
this.dateVal = value+'-' + '01' + '-' + '01'
|
||||
// 左侧时间实时赋值
|
||||
this.timeVal=this.dateVal
|
||||
}
|
||||
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: "06",
|
||||
sortType: this.sortType,
|
||||
queryType: this.dateType,
|
||||
date: this.dateVal,
|
||||
}
|
||||
// 去除对象里面是空的属性
|
||||
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.tableData.map(function (val) {
|
||||
console.log(val.ysjs)
|
||||
$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) => {})
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
setInterval(this.getCurrentDate(), 1000 * 60)
|
||||
|
||||
this.getlComPremDetil()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.department-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;
|
||||
white-space: nowrap;
|
||||
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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
398
src/views/ebiz/institutionalPerform/DistrictOffice.vue
Normal file
398
src/views/ebiz/institutionalPerform/DistrictOffice.vue
Normal file
@@ -0,0 +1,398 @@
|
||||
<template>
|
||||
<div class="destrict-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="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" span="9">截至{{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="slide-box">
|
||||
<table class="fs14">
|
||||
<tr class="title">
|
||||
<th>排名</th>
|
||||
<th>机构</th>
|
||||
<th>预收件数</th>
|
||||
<th>预收标保</th>
|
||||
<th>承保件数</th>
|
||||
<th>承保保费</th>
|
||||
<th>标准保费</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>合计</th>
|
||||
<th>{{ysjsTotal}}</th>
|
||||
<th>{{ysbbTotol}}</th>
|
||||
<th>{{cbjsTotal}}</th>
|
||||
<th>{{cbbfTotal}}</th>
|
||||
<th>{{bzbfTotal}}</th>
|
||||
</tr>
|
||||
<tr v-for="(item,index) in tableData" :key="index">
|
||||
<td>{{index+1}}</td>
|
||||
<td>{{item.name}}</td>
|
||||
<td>{{item.ysjs}}</td>
|
||||
<td>{{item.ysbb}}</td>
|
||||
<td>{{item.cbjs}}</td>
|
||||
<td>{{item.cbbf}}</td>
|
||||
<td>{{item.bzbf}}</td>
|
||||
<td>
|
||||
<span @click="toDetail(item.code)" class="red">查看</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</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 {
|
||||
YearColumns: ['2020', '2019', '2018', '2017', '2016', '2015'],
|
||||
minDate: new Date(1997, 0, 1),
|
||||
maxDate: new Date(2020, 10, 1),
|
||||
currentMonthDate: new Date(),
|
||||
currentYearDate: new Date(),
|
||||
currentDate: new Date(),
|
||||
sortType: '1',
|
||||
// 总和
|
||||
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
|
||||
},
|
||||
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 {
|
||||
// 实时的时候date清空
|
||||
this.dateType = 'now'
|
||||
this.dateVal = ''
|
||||
// 左侧时间实时赋值
|
||||
this.timeVal= this.shitimeVal
|
||||
// 调接口
|
||||
this.getlComPremDetil()
|
||||
}
|
||||
},
|
||||
toDetail(manageCode) {
|
||||
this.$router.push({
|
||||
path: '/institutionalPerform/regionalOffice',
|
||||
query: {
|
||||
manageCode: manageCode,
|
||||
},
|
||||
})
|
||||
},
|
||||
//修改月、天的格式，保持两位数显示
|
||||
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) {
|
||||
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
|
||||
} else if (this.curTab == 3) {
|
||||
// 年
|
||||
this.dateType = 'y'
|
||||
this.dateVal = value+'-' + '01' + '-' + '01'
|
||||
// 左侧时间实时赋值
|
||||
this.timeVal=this.dateVal
|
||||
}
|
||||
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: "04",
|
||||
sortType: this.sortType,
|
||||
queryType: this.dateType,
|
||||
date: this.dateVal,
|
||||
}
|
||||
// 去除对象里面是空的属性
|
||||
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.tableData.map(function (val) {
|
||||
console.log(val.ysjs)
|
||||
$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) => {})
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
setInterval(this.getCurrentDate(), 1000 * 60)
|
||||
this.getlComPremDetil()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.destrict-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;
|
||||
white-space: nowrap;
|
||||
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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
399
src/views/ebiz/institutionalPerform/GroupOffice.vue
Normal file
399
src/views/ebiz/institutionalPerform/GroupOffice.vue
Normal file
@@ -0,0 +1,399 @@
|
||||
<template>
|
||||
<div 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="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" span="9">截至{{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="slide-box">
|
||||
<table class="fs14">
|
||||
<tr class="title">
|
||||
<th>排名</th>
|
||||
<th>机构</th>
|
||||
<th>预收件数</th>
|
||||
<th>预收标保</th>
|
||||
<th>承保件数</th>
|
||||
<th>承保保费</th>
|
||||
<th>标准保费</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>合计</th>
|
||||
<th>{{ysjsTotal}}</th>
|
||||
<th>{{ysbbTotol}}</th>
|
||||
<th>{{cbjsTotal}}</th>
|
||||
<th>{{cbbfTotal}}</th>
|
||||
<th>{{bzbfTotal}}</th>
|
||||
</tr>
|
||||
<tr v-for="(item,index) in tableData" :key="index">
|
||||
<td>{{index+1}}</td>
|
||||
<td>{{item.name}}</td>
|
||||
<td>{{item.ysjs}}</td>
|
||||
<td>{{item.ysbb}}</td>
|
||||
<td>{{item.cbjs}}</td>
|
||||
<td>{{item.cbbf}}</td>
|
||||
<td>{{item.bzbf}}</td>
|
||||
<td>
|
||||
<span @click="toDetail(item.code)" class="red">查看</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</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 {
|
||||
YearColumns: ['2020', '2019', '2018', '2017', '2016', '2015'],
|
||||
minDate: new Date(1997, 0, 1),
|
||||
maxDate: new Date(2020, 10, 1),
|
||||
currentMonthDate: new Date(),
|
||||
currentYearDate: new Date(),
|
||||
currentDate: new Date(),
|
||||
sortType: '1',
|
||||
// 总和
|
||||
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
|
||||
},
|
||||
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 {
|
||||
// 实时的时候date清空
|
||||
this.dateType = 'now'
|
||||
this.dateVal = ''
|
||||
// 左侧时间实时赋值
|
||||
this.timeVal= this.shitimeVal
|
||||
// 调接口
|
||||
this.getlComPremDetil()
|
||||
}
|
||||
},
|
||||
toDetail(manageCode) {
|
||||
this.$router.push({
|
||||
path: '/institutionalPerform/personalOffice',
|
||||
query: {
|
||||
manageCode: manageCode,
|
||||
},
|
||||
})
|
||||
},
|
||||
//修改月、天的格式，保持两位数显示
|
||||
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) {
|
||||
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
|
||||
} else if (this.curTab == 3) {
|
||||
// 年
|
||||
this.dateType = 'y'
|
||||
this.dateVal = value+'-' + '01' + '-' + '01'
|
||||
// 左侧时间实时赋值
|
||||
this.timeVal=this.dateVal
|
||||
}
|
||||
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,
|
||||
}
|
||||
// 去除对象里面是空的属性
|
||||
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.tableData.map(function (val) {
|
||||
console.log(val.ysjs)
|
||||
$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) => {})
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
setInterval(this.getCurrentDate(), 1000 * 60)
|
||||
|
||||
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;
|
||||
white-space: nowrap;
|
||||
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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
388
src/views/ebiz/institutionalPerform/PersonalOffice.vue
Normal file
388
src/views/ebiz/institutionalPerform/PersonalOffice.vue
Normal file
@@ -0,0 +1,388 @@
|
||||
<template>
|
||||
<div class="personal-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="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" span="9">截至{{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="slide-box">
|
||||
<table class="fs14">
|
||||
<tr class="title">
|
||||
<th>排名</th>
|
||||
<th>机构</th>
|
||||
<th>预收件数</th>
|
||||
<th>预收标保</th>
|
||||
<th>承保件数</th>
|
||||
<th>承保保费</th>
|
||||
<th>标准保费</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>合计</th>
|
||||
<th>{{ysjsTotal}}</th>
|
||||
<th>{{ysbbTotol}}</th>
|
||||
<th>{{cbjsTotal}}</th>
|
||||
<th>{{cbbfTotal}}</th>
|
||||
<th>{{bzbfTotal}}</th>
|
||||
</tr>
|
||||
<tr v-for="(item,index) in tableData" :key="index">
|
||||
<td>{{index+1}}</td>
|
||||
<td>{{item.name}}</td>
|
||||
<td>{{item.ysjs}}</td>
|
||||
<td>{{item.ysbb}}</td>
|
||||
<td>{{item.cbjs}}</td>
|
||||
<td>{{item.cbbf}}</td>
|
||||
<td>{{item.bzbf}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</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 {
|
||||
YearColumns: ['2020', '2019', '2018', '2017', '2016', '2015'],
|
||||
minDate: new Date(1997, 0, 1),
|
||||
maxDate: new Date(2020, 10, 1),
|
||||
currentMonthDate: new Date(),
|
||||
currentYearDate: new Date(),
|
||||
currentDate: new Date(),
|
||||
sortType: '1',
|
||||
// 总和
|
||||
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
|
||||
},
|
||||
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 {
|
||||
// 实时的时候date清空
|
||||
this.dateType = 'now'
|
||||
this.dateVal = ''
|
||||
// 左侧时间实时赋值
|
||||
this.timeVal= this.shitimeVal
|
||||
// 调接口
|
||||
this.getlComPremDetil()
|
||||
}
|
||||
},
|
||||
|
||||
//修改月、天的格式，保持两位数显示
|
||||
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) {
|
||||
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
|
||||
} else if (this.curTab == 3) {
|
||||
// 年
|
||||
this.dateType = 'y'
|
||||
this.dateVal = value+'-' + '01' + '-' + '01'
|
||||
// 左侧时间实时赋值
|
||||
this.timeVal=this.dateVal
|
||||
}
|
||||
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: "08",
|
||||
sortType: this.sortType,
|
||||
queryType: this.dateType,
|
||||
date: this.dateVal,
|
||||
}
|
||||
// 去除对象里面是空的属性
|
||||
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.tableData.map(function (val) {
|
||||
console.log(val.ysjs)
|
||||
$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) => {})
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
setInterval(this.getCurrentDate(), 1000 * 60)
|
||||
|
||||
this.getlComPremDetil()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.personal-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;
|
||||
white-space: nowrap;
|
||||
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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
399
src/views/ebiz/institutionalPerform/RegionalOffice.vue
Normal file
399
src/views/ebiz/institutionalPerform/RegionalOffice.vue
Normal file
@@ -0,0 +1,399 @@
|
||||
<template>
|
||||
<div class="regional-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="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" span="9">截至{{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="slide-box">
|
||||
<table class="fs14">
|
||||
<tr class="title">
|
||||
<th>排名</th>
|
||||
<th>机构</th>
|
||||
<th>预收件数</th>
|
||||
<th>预收标保</th>
|
||||
<th>承保件数</th>
|
||||
<th>承保保费</th>
|
||||
<th>标准保费</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>合计</th>
|
||||
<th>{{ysjsTotal}}</th>
|
||||
<th>{{ysbbTotol}}</th>
|
||||
<th>{{cbjsTotal}}</th>
|
||||
<th>{{cbbfTotal}}</th>
|
||||
<th>{{bzbfTotal}}</th>
|
||||
</tr>
|
||||
<tr v-for="(item,index) in tableData" :key="index">
|
||||
<td>{{index+1}}</td>
|
||||
<td>{{item.name}}</td>
|
||||
<td>{{item.ysjs}}</td>
|
||||
<td>{{item.ysbb}}</td>
|
||||
<td>{{item.cbjs}}</td>
|
||||
<td>{{item.cbbf}}</td>
|
||||
<td>{{item.bzbf}}</td>
|
||||
<td>
|
||||
<span @click="toDetail(item.code)" class="red">查看</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</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 {
|
||||
YearColumns: ['2020', '2019', '2018', '2017', '2016', '2015'],
|
||||
minDate: new Date(1997, 0, 1),
|
||||
maxDate: new Date(2020, 10, 1),
|
||||
currentMonthDate: new Date(),
|
||||
currentYearDate: new Date(),
|
||||
currentDate: new Date(),
|
||||
sortType: '1',
|
||||
// 总和
|
||||
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
|
||||
},
|
||||
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 {
|
||||
// 实时的时候date清空
|
||||
this.dateType = 'now'
|
||||
this.dateVal = ''
|
||||
// 左侧时间实时赋值
|
||||
this.timeVal= this.shitimeVal
|
||||
// 调接口
|
||||
this.getlComPremDetil()
|
||||
}
|
||||
},
|
||||
toDetail(manageCode) {
|
||||
this.$router.push({
|
||||
path: '/institutionalPerform/departmentOffice',
|
||||
query: {
|
||||
manageCode: manageCode,
|
||||
},
|
||||
})
|
||||
},
|
||||
//修改月、天的格式，保持两位数显示
|
||||
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) {
|
||||
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
|
||||
} else if (this.curTab == 3) {
|
||||
// 年
|
||||
this.dateType = 'y'
|
||||
this.dateVal = value+'-' + '01' + '-' + '01'
|
||||
// 左侧时间实时赋值
|
||||
this.timeVal=this.dateVal
|
||||
}
|
||||
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: "05",
|
||||
sortType: this.sortType,
|
||||
queryType: this.dateType,
|
||||
date: this.dateVal,
|
||||
}
|
||||
// 去除对象里面是空的属性
|
||||
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.tableData.map(function (val) {
|
||||
console.log(val.ysjs)
|
||||
$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) => {})
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
setInterval(this.getCurrentDate(), 1000 * 60)
|
||||
|
||||
this.getlComPremDetil()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.regional-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;
|
||||
white-space: nowrap;
|
||||
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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
399
src/views/ebiz/institutionalPerform/ServiceDepartOffice.vue
Normal file
399
src/views/ebiz/institutionalPerform/ServiceDepartOffice.vue
Normal file
@@ -0,0 +1,399 @@
|
||||
<template>
|
||||
<div class="service-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="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" span="9">截至{{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="slide-box">
|
||||
<table class="fs14">
|
||||
<tr class="title">
|
||||
<th>排名</th>
|
||||
<th>机构</th>
|
||||
<th>预收件数</th>
|
||||
<th>预收标保</th>
|
||||
<th>承保件数</th>
|
||||
<th>承保保费</th>
|
||||
<th>标准保费</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>合计</th>
|
||||
<th>{{ysjsTotal}}</th>
|
||||
<th>{{ysbbTotol}}</th>
|
||||
<th>{{cbjsTotal}}</th>
|
||||
<th>{{cbbfTotal}}</th>
|
||||
<th>{{bzbfTotal}}</th>
|
||||
</tr>
|
||||
<tr v-for="(item,index) in tableData" :key="index">
|
||||
<td>{{index+1}}</td>
|
||||
<td>{{item.name}}</td>
|
||||
<td>{{item.ysjs}}</td>
|
||||
<td>{{item.ysbb}}</td>
|
||||
<td>{{item.cbjs}}</td>
|
||||
<td>{{item.cbbf}}</td>
|
||||
<td>{{item.bzbf}}</td>
|
||||
<td>
|
||||
<span @click="toDetail(item.code)" class="red">查看</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</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 {
|
||||
YearColumns: ['2020', '2019', '2018', '2017', '2016', '2015'],
|
||||
minDate: new Date(1997, 0, 1),
|
||||
maxDate: new Date(2020, 10, 1),
|
||||
currentMonthDate: new Date(),
|
||||
currentYearDate: new Date(),
|
||||
currentDate: new Date(),
|
||||
sortType: '1',
|
||||
// 总和
|
||||
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
|
||||
},
|
||||
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 {
|
||||
// 实时的时候date清空
|
||||
this.dateType = 'now'
|
||||
this.dateVal = ''
|
||||
// 左侧时间实时赋值
|
||||
this.timeVal= this.shitimeVal
|
||||
// 调接口
|
||||
this.getlComPremDetil()
|
||||
}
|
||||
},
|
||||
toDetail(manageCode) {
|
||||
this.$router.push({
|
||||
path: '/institutionalPerform/districtOffice',
|
||||
query: {
|
||||
manageCode: manageCode,
|
||||
},
|
||||
})
|
||||
},
|
||||
//修改月、天的格式，保持两位数显示
|
||||
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) {
|
||||
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
|
||||
} else if (this.curTab == 3) {
|
||||
// 年
|
||||
this.dateType = 'y'
|
||||
this.dateVal = value+'-' + '01' + '-' + '01'
|
||||
// 左侧时间实时赋值
|
||||
this.timeVal=this.dateVal
|
||||
}
|
||||
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: "03",
|
||||
sortType: this.sortType,
|
||||
queryType: this.dateType,
|
||||
date: this.dateVal,
|
||||
}
|
||||
// 去除对象里面是空的属性
|
||||
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.tableData.map(function (val) {
|
||||
console.log(val.ysjs)
|
||||
$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) => {})
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
setInterval(this.getCurrentDate(), 1000 * 60)
|
||||
|
||||
this.getlComPremDetil()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.service-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;
|
||||
white-space: nowrap;
|
||||
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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
408
src/views/ebiz/institutionalPerform/UnderOffice.vue
Normal file
408
src/views/ebiz/institutionalPerform/UnderOffice.vue
Normal file
@@ -0,0 +1,408 @@
|
||||
<template>
|
||||
<div class="under-office-container">
|
||||
<van-nav-bar left-text="机构业绩" left-arrow @click-left="onBack">
|
||||
<template #right>
|
||||
<img @click="getlComPremDetil" :src="refreshLogo" />
|
||||
</template>
|
||||
</van-nav-bar>
|
||||
<van-nav-bar left-text="机构业绩" left-arrow @click-left="onBack">
|
||||
<template #right>
|
||||
<img @click="getlComPremDetil" :src="refreshLogo" />
|
||||
</template>
|
||||
</van-nav-bar>
|
||||
<!-- 年月日选择 -->
|
||||
<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" span="9">截至{{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="slide-box">
|
||||
<table class="fs14">
|
||||
<tr class="title">
|
||||
<th>排名</th>
|
||||
<th>机构</th>
|
||||
<th>预收件数</th>
|
||||
<th>预收标保</th>
|
||||
<th>承保件数</th>
|
||||
<th>承保保费</th>
|
||||
<th>标准保费</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>合计</th>
|
||||
<th>{{ysjsTotal}}</th>
|
||||
<th>{{ysbbTotol}}</th>
|
||||
<th>{{cbjsTotal}}</th>
|
||||
<th>{{cbbfTotal}}</th>
|
||||
<th>{{bzbfTotal}}</th>
|
||||
</tr>
|
||||
<tr v-for="(item,index) in tableData" :key="index">
|
||||
<td>{{index+1}}</td>
|
||||
<td>{{item.name}}</td>
|
||||
<td>{{item.ysjs}}</td>
|
||||
<td>{{item.ysbb}}</td>
|
||||
<td>{{item.cbjs}}</td>
|
||||
<td>{{item.cbbf}}</td>
|
||||
<td>{{item.bzbf}}</td>
|
||||
<td>
|
||||
<span @click="toDetail(item.code)" class="red">查看</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</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 {
|
||||
YearColumns: ['2020', '2019', '2018', '2017', '2016', '2015'],
|
||||
minDate: new Date(1997, 0, 1),
|
||||
maxDate: new Date(2020, 10, 1),
|
||||
currentMonthDate: new Date(),
|
||||
currentYearDate: new Date(),
|
||||
currentDate: new Date(),
|
||||
sortType: '1',
|
||||
// 总和
|
||||
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
|
||||
},
|
||||
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 {
|
||||
// 实时的时候date清空
|
||||
this.dateType = 'now'
|
||||
this.dateVal = ''
|
||||
// 左侧时间实时赋值
|
||||
this.timeVal= this.shitimeVal
|
||||
// 调接口
|
||||
this.getlComPremDetil()
|
||||
}
|
||||
},
|
||||
toDetail(manageCode) {
|
||||
this.$router.push({
|
||||
path: '/institutionalPerform/serviceDepartOffice',
|
||||
query: {
|
||||
manageCode: manageCode,
|
||||
},
|
||||
})
|
||||
},
|
||||
//修改月、天的格式，保持两位数显示
|
||||
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) {
|
||||
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
|
||||
} else if (this.curTab == 3) {
|
||||
// 年
|
||||
this.dateType = 'y'
|
||||
this.dateVal = value+'-' + '01' + '-' + '01'
|
||||
// 左侧时间实时赋值
|
||||
this.timeVal=this.dateVal
|
||||
}
|
||||
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: "02",
|
||||
sortType: this.sortType,
|
||||
queryType: this.dateType,
|
||||
date: this.dateVal,
|
||||
}
|
||||
// 去除对象里面是空的属性
|
||||
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.tableData.map(function (val) {
|
||||
console.log(val.ysjs)
|
||||
$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) => {})
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
setInterval(this.getCurrentDate(), 1000 * 60)
|
||||
|
||||
this.getlComPremDetil()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.under-office-container {
|
||||
.oneTab .van-tabs__nav--card .van-tab {
|
||||
background-color: #fff;
|
||||
border-right: 1px solid #fff;
|
||||
}
|
||||
.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;
|
||||
white-space: nowrap;
|
||||
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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user