mirror of
http://112.124.100.131/GFRS/ebiz-h5.git
synced 2025-12-24 13:42:52 +08:00
多个fiexd布局问题
This commit is contained in:
liyuetong
@@ -154,4 +154,20 @@ export function getBranchByUser(data) {
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
// 查询个人数据
|
||||
export function queryPersonal(data) {
|
||||
return request({
|
||||
url: getUrl('/agent/laure/queryPersonal', 1),
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
// 查询团队数据
|
||||
export function queryTeamList(data) {
|
||||
return request({
|
||||
url: getUrl('/agent/laure/queryTeamList', 1),
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
BIN
src/assets/images/laurelClub/bgData.png
Normal file
BIN
src/assets/images/laurelClub/bgData.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 596 KiB |
BIN
src/assets/images/laurelClub/crown.png
Normal file
BIN
src/assets/images/laurelClub/crown.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
BIN
src/assets/images/laurelClub/m-bg.png
Normal file
BIN
src/assets/images/laurelClub/m-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 178 KiB |
BIN
src/assets/images/laurelClub/waiting.png
Normal file
BIN
src/assets/images/laurelClub/waiting.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 657 KiB |
@@ -8,7 +8,7 @@
|
||||
<div v-else-if="defaultStyle == 'style03'" @click="DatePickerShow(flag)" class="fs12 mr15">
|
||||
<span v-if="value">{{ value }} </span>
|
||||
<span v-else>{{ placeholder }} </span>
|
||||
<img style="margin-top:-2px" src="@/assets/images/u80.png" alt class="absolute ml5" />
|
||||
<img src="@/assets/images/u80.png" alt class="absolute ml5" />
|
||||
</div>
|
||||
<van-field
|
||||
v-else
|
||||
@@ -22,7 +22,7 @@
|
||||
:name="label"
|
||||
right-icon="arrow"
|
||||
/>
|
||||
<van-popup v-model="showDataPicker" position="bottom">
|
||||
<van-popup v-model="showDataPicker" position="bottom" style="z-index：9999">
|
||||
<van-datetime-picker :type="type" v-model="data" @confirm="onConfirmDate" @cancel="cancel" :max-date="maxDate" :min-date="minDate" />
|
||||
</van-popup>
|
||||
</div>
|
||||
|
||||
110
src/components/ebiz/laurelClub/tableDetail.vue
Normal file
110
src/components/ebiz/laurelClub/tableDetail.vue
Normal file
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<div class="statisticsTable">
|
||||
<table cellspacing="0" summary cellpadding="1">
|
||||
<thead>
|
||||
<tr>
|
||||
<th :class="{ 'th-fixed': index < 1 }" v-for="(item, index) in theads" :key="index">{{ item }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(item, index) in tableData" :key="index">
|
||||
<td class="th-fixed" @click="goLink(item)">{{ item.name }}</td>
|
||||
<td class="th-fixed">{{ item.ysfyc }}</td>
|
||||
<td>{{ item.fyc }}</td>
|
||||
<td>{{ item.ggap }}</td>
|
||||
<td>{{ item.lastglevel }}</td>
|
||||
<td>{{ item.sgrp }}</td>
|
||||
<td>{{ item.lastslevel }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'tableDetail',
|
||||
props: {
|
||||
theads: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
isLink: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
tableData: {
|
||||
type: Array,
|
||||
default: []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
goLink(item) {
|
||||
if (this.isLink) {
|
||||
this.$emit('goLink', item)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.statisticsTable th {
|
||||
width: 800px;
|
||||
}
|
||||
.statisticsTable {
|
||||
// overflow-y: scroll;
|
||||
// height: 400px;
|
||||
// width: 100%;
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
tbody{
|
||||
// overflow-y: scroll;
|
||||
// height: 400px;
|
||||
// width: 100%;
|
||||
td {
|
||||
// border-bottom: 1px solid #142162;
|
||||
border: 1px solid #7886c8;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
// line-height: 30px;
|
||||
background: #fff;
|
||||
padding: 12px 0;
|
||||
}
|
||||
}
|
||||
thead {
|
||||
th {
|
||||
border: 1px solid #7886c8;
|
||||
// border-bottom: 1px solid #142162;
|
||||
// border-top: 1px solid #142162;
|
||||
text-align: center;
|
||||
height: 40px;
|
||||
line-height: 20px;
|
||||
// font-size: 14px;
|
||||
background: #7886c8;
|
||||
color: #fff;
|
||||
// font-weight: 400;
|
||||
padding: 9px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.th-fixed {
|
||||
// position: sticky;
|
||||
left: 0;
|
||||
width: 150px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
.td-fixed {
|
||||
// position: sticky;
|
||||
width: 150px;
|
||||
padding: 0 5px;
|
||||
left: 0;
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
@@ -1,69 +1,107 @@
|
||||
<template>
|
||||
<div v-if="isNoOrganization == 0" class="text-center">
|
||||
<img class="w40 h40 mt60 mb20" src="@/assets/images/ebiz/waiting.png" alt="" />
|
||||
<p class="f10 gray">该功能暂未开放，敬请期待！</p>
|
||||
</div>
|
||||
<div v-else-if="isNoOrganization == 1">
|
||||
<div class="filterDate">
|
||||
<div class="number">
|
||||
<van-button type="info" @click="switchDayOrMonth(0)" :plain="currentIndex == 0 ? true : false" size="small">当月</van-button>
|
||||
<van-button type="info" @click="switchDayOrMonth(1)" :plain="currentIndex == 1 ? true : false" size="small">当天</van-button>
|
||||
<div class="bg">
|
||||
<div :class="[active == 'Team' ? 'pt10 pb10 position01' : 'pt10 pb10']" style="background-color: #f5f5f5">
|
||||
<div class="m-filterDate">
|
||||
<div class="number">
|
||||
<span :class="[currentIndex == '0' ? 'checkedLeft' : 'unCheckedLeft']" @click="switchDayOrMonth(1)">今日</span>
|
||||
<span :class="[currentIndex == '1' ? 'checkedRight' : 'unCheckedRight']" @click="switchDayOrMonth(0)">本月</span>
|
||||
</div>
|
||||
<div class="filterTime">
|
||||
<FieldDatePicter
|
||||
label=""
|
||||
name=""
|
||||
:isDefault="true"
|
||||
:value.sync="filterDate"
|
||||
type="year-month"
|
||||
:flag="true"
|
||||
defaultStyle="style03"
|
||||
placeholder="时间筛选"
|
||||
@confirm="onDateConfirm($event, '2')"
|
||||
:maxDate="maxDate"
|
||||
:minDate="minDate"
|
||||
></FieldDatePicter>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fs12 mt20 mr20 number">
|
||||
<span :class="[currentIndex == 0 ? 'checkedLeft mr2' : 'unCheckedLeft mr2']" @click="switchDayOrMonth(0)">当月</span>
|
||||
<span :class="[currentIndex == 1 ? 'checkedRight' : 'unCheckedRight']" @click="switchDayOrMonth(1)">当天</span>
|
||||
</div>
|
||||
<div class="filterTime">
|
||||
<FieldDatePicter
|
||||
label=""
|
||||
name=""
|
||||
:isDefault="true"
|
||||
:value.sync="filterDate"
|
||||
type="year-month"
|
||||
:flag="true"
|
||||
defaultStyle="style03"
|
||||
placeholder="时间筛选"
|
||||
@confirm="onDateConfirm($event, '2')"
|
||||
:maxDate="maxDate"
|
||||
></FieldDatePicter>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="classification">
|
||||
<span>机构名称: </span>
|
||||
<span v-if="manageLv == '06' || manageLv == '07' || manageLv == '08'">
|
||||
<span>{{ OrgLv2Name }}</span>
|
||||
<van-icon name="arrow" />
|
||||
</span>
|
||||
<span v-else-if="manageLv == '04' || manageLv == '05'" @click="isOrgLv2ConditionShow = true">
|
||||
<span>{{ OrgLv2Name }}</span>
|
||||
<van-icon name="arrow-down" />
|
||||
</span>
|
||||
|
||||
<template v-if="isMoreConditionShow">
|
||||
<span v-if="manageLv == '07' || manageLv == '08'">
|
||||
<span>{{ OrgLv3Name }}</span>
|
||||
<van-icon name="arrow" />
|
||||
</span>
|
||||
<span v-else-if="manageLv == '04' || manageLv == '05' || manageLv == '06'" @click="isOrgLv3ConditionShow = true">
|
||||
<span>{{ OrgLv3Name }}</span>
|
||||
<van-icon name="arrow-down" />
|
||||
</span>
|
||||
|
||||
<span v-if="manageLv == '08'">
|
||||
<span>{{ OrgLv4Name }}</span>
|
||||
</span>
|
||||
<span v-else-if="manageLv == '04' || manageLv == '05' || manageLv == '06' || manageLv == '07'" @click="isOrgLv4ConditionShow = true">
|
||||
<span>{{ OrgLv4Name }}</span>
|
||||
<van-icon name="arrow-down" />
|
||||
</span>
|
||||
</template>
|
||||
<div :class="[active == 'Team' ? 'fs12 bntTab mt30 position02' : 'fs12 bntTab mt30']" class="fs12 bntTab mt30">
|
||||
<span :class="[active == 'Personal' ? 'tabLeft mr2' : 'unTabLeft mr2']" @click="tabChange('Personal')">个人数据</span>
|
||||
<span :class="[active == 'Team' ? 'tabRight mr2' : 'unTabRight mr2']" @click="tabChange('Team')">团队数据</span>
|
||||
</div>
|
||||
|
||||
<div class="table">
|
||||
<van-list v-model="loading" :finished="finished" @load="queryOutOrderListFunc" :immediate-check="false" finished-text="没有更多数据了">
|
||||
<tableDetail :theads="theads" :tableData="tableData"></tableDetail>
|
||||
</van-list>
|
||||
<!-- 个人数据 -->
|
||||
<div v-if="active == 'Personal'" class="pl40 pr40 mb40">
|
||||
<div class="m-bg">
|
||||
<img class="crown" :src="crownImg" alt="" />
|
||||
<span class="text">预收佣金（元）</span>
|
||||
<span class="number">{{ queryPersonalData.ysfyc }}</span>
|
||||
</div>
|
||||
<div class="m-bg">
|
||||
<img class="crown" :src="crownImg" alt="" />
|
||||
<span class="text">承保佣金（元）</span>
|
||||
<span class="number">{{ queryPersonalData.fyc }}</span>
|
||||
</div>
|
||||
<div class="m-bg">
|
||||
<img class="crown" :src="crownImg" alt="" />
|
||||
<span class="text">与桂冠差距（元）</span>
|
||||
<span class="number">{{ queryPersonalData.ggap }}</span>
|
||||
</div>
|
||||
<div class="m-bg">
|
||||
<img class="crown" :src="crownImg" alt="" />
|
||||
<span class="text">上月桂冠冠级</span>
|
||||
<span class="number">{{ queryPersonalData.lastglevel }}</span>
|
||||
</div>
|
||||
<div class="m-bg">
|
||||
<img class="crown" :src="crownImg" alt="" />
|
||||
<span class="text">与双冠差距（元）</span>
|
||||
<span class="number">{{ queryPersonalData.sgrp }}</span>
|
||||
</div>
|
||||
<div class="m-bg">
|
||||
<img class="crown" :src="crownImg" alt="" />
|
||||
<span class="text">上月双冠冠级</span>
|
||||
<span class="number">{{ queryPersonalData.lastslevel }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 团队数据 -->
|
||||
<div v-else-if="active == 'Team'" class="mt20">
|
||||
<div v-if="isNoOrganization == 0" class="text-center">
|
||||
<img class="w260 h260 mt40 mb20" src="@/assets/images/laurelClub/waiting.png" alt="" />
|
||||
</div>
|
||||
<div v-else>
|
||||
<div :class="[active == 'Team' ? 'position03 classification' : 'classification']">
|
||||
<span>机构名称: </span>
|
||||
<span v-if="manageLv == '06' || manageLv == '07' || manageLv == '08'">
|
||||
<span>{{ OrgLv2Name }}</span>
|
||||
<van-icon name="arrow" />
|
||||
</span>
|
||||
<span v-else-if="manageLv == '04' || manageLv == '05'" @click="isOrgLv2ConditionShow = true">
|
||||
<span>{{ OrgLv2Name }}</span>
|
||||
<van-icon name="arrow-down" />
|
||||
</span>
|
||||
|
||||
<template v-if="isMoreConditionShow">
|
||||
<span v-if="manageLv == '07' || manageLv == '08'">
|
||||
<span>{{ OrgLv3Name }}</span>
|
||||
<van-icon name="arrow" />
|
||||
</span>
|
||||
<span v-else-if="manageLv == '04' || manageLv == '05' || manageLv == '06'" @click="isOrgLv3ConditionShow = true">
|
||||
<span>{{ OrgLv3Name }}</span>
|
||||
<van-icon name="arrow-down" />
|
||||
</span>
|
||||
|
||||
<span v-if="manageLv == '08'">
|
||||
<span>{{ OrgLv4Name }}</span>
|
||||
</span>
|
||||
<span v-else-if="manageLv == '04' || manageLv == '05' || manageLv == '06' || manageLv == '07'" @click="isOrgLv4ConditionShow = true">
|
||||
<span>{{ OrgLv4Name }}</span>
|
||||
<van-icon name="arrow-down" />
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
<div class="table mt300">
|
||||
<van-list v-model="loading" :finished="finished" @load="queryOutOrderListFunc" :immediate-check="false" finished-text="没有更多数据了">
|
||||
<tableDetail :theads="theads" :tableData="tableData"></tableDetail>
|
||||
</van-list>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 二级机构筛选栏 -->
|
||||
@@ -83,10 +121,12 @@
|
||||
|
||||
<script>
|
||||
import { Icon } from 'vant'
|
||||
import tableDetail from '@/components/ebiz/billingDetail/tableDetail'
|
||||
import tableDetail from '@/components/ebiz/laurelClub/tableDetail'
|
||||
import { getMisBranchComList } from '@/api/ebiz/branchOffice/branchOffice'
|
||||
import FieldDatePicter from '@/components/ebiz/FieldDatePicter'
|
||||
import { queryOutOrderList, getBranchByUser } from '@/api/ebiz/billingDetail/billingDetail'
|
||||
import { getBranchByUser } from '@/api/ebiz/billingDetail/billingDetail'
|
||||
import { queryPersonal, queryTeamList } from '@/api/ebiz/laurelClub/laurelClub'
|
||||
import crownImg from '@/assets/images/laurelClub/crown.png'
|
||||
|
||||
// 当前时间
|
||||
const currentDate = new Date()
|
||||
@@ -99,14 +139,14 @@ export default {
|
||||
},
|
||||
province() {
|
||||
const name = []
|
||||
this.OrgLv2s.forEach(item => {
|
||||
this.OrgLv2s.forEach((item) => {
|
||||
name.push(item.name)
|
||||
})
|
||||
return name
|
||||
},
|
||||
city() {
|
||||
const city = ['全部']
|
||||
this.OrgLv3s.forEach(item => {
|
||||
this.OrgLv3s.forEach((item) => {
|
||||
if (item.upBranchCode === this.OrgLv2Code) {
|
||||
city.push(item.name)
|
||||
}
|
||||
@@ -115,7 +155,7 @@ export default {
|
||||
},
|
||||
area() {
|
||||
const area = ['全部']
|
||||
this.OrgLv4s.forEach(item => {
|
||||
this.OrgLv4s.forEach((item) => {
|
||||
if (item.upBranchCode === this.OrgLv3Code) {
|
||||
area.push(item.name)
|
||||
}
|
||||
@@ -125,18 +165,29 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dateFlag: 'd',
|
||||
isNoOrganization: null,
|
||||
currentIndex: 0, //0 当月 1当天
|
||||
theads: ['姓名', '产品名称', '保费（元）', '预收时间', '承保时间'],
|
||||
crownImg: crownImg, //皇冠图片
|
||||
active: 'Personal', //tab 个人 团队
|
||||
dateFlag: 'd', //当月 d 当天 m 标识
|
||||
queryPersonalData: { //个人数据data
|
||||
ysfyc: '0',
|
||||
fyc: '0',
|
||||
ggap: '0',
|
||||
lastglevel: '0',
|
||||
sgrp: '0',
|
||||
lastslevel: '0'
|
||||
},
|
||||
isNoOrganization: null, //是否有权限查看团队数据
|
||||
currentIndex: '0', //0 当月 1当天
|
||||
theads: ['姓名', '预收佣金(元)', '承保佣金(元)', '桂冠差距(元)', '上月桂冠冠级', '双冠差距(元)', '上月双冠冠级'],
|
||||
tableData: [],
|
||||
maxDate: new Date(),
|
||||
filterDate: '2019-10',
|
||||
minDate: new Date('2019-10'),
|
||||
filterDate: '',
|
||||
postDate: '', //实际给后台传的时间
|
||||
loading: false,
|
||||
finished: false,
|
||||
pageNum: 1,
|
||||
pageSize: 5,
|
||||
pageSize: 10,
|
||||
manageLv: 1, //当前人机构等级
|
||||
// 二级机构筛选是否显示
|
||||
isOrgLv2ConditionShow: false,
|
||||
@@ -171,6 +222,7 @@ export default {
|
||||
methods: {
|
||||
//切换当月、当天
|
||||
switchDayOrMonth(index) {
|
||||
let that = this
|
||||
this.filterDate = ''
|
||||
// currentIndex 0 当月 1当天
|
||||
let nowDate = new Date()
|
||||
@@ -188,20 +240,80 @@ export default {
|
||||
} else {
|
||||
this.postDate = date.year + '-' + date.month + '-' + date.date
|
||||
}
|
||||
//选择当月，当天时，日期选择器默认到当年当月
|
||||
this.filterDate = date.year + '-' + date.month
|
||||
this.dateFlag = index == 0 ? 'm' : 'd'
|
||||
this.currentIndex = index == 0 ? 1 : 0
|
||||
this.pageNum = 1
|
||||
this.tableData = []
|
||||
this.queryOutOrderListFunc()
|
||||
if (that.active == 'Personal') {
|
||||
that.initDataPersonal()
|
||||
} else {
|
||||
that.queryOutOrderListFunc()
|
||||
}
|
||||
},
|
||||
//时间筛选
|
||||
onDateConfirm(data) {
|
||||
let that = this
|
||||
this.dateFlag = 'm'
|
||||
this.postDate = data
|
||||
console.log(this.postDate, 'this.postDate')
|
||||
this.pageNum = 1
|
||||
this.tableData = []
|
||||
this.queryOutOrderListFunc()
|
||||
// 点击【选择日期】确定之后，前端页面回显出选择的时间段（如原型），同时【今日】【本月】均为未选中状态
|
||||
this.currentIndex = ''
|
||||
if (that.active == 'Personal') {
|
||||
that.initDataPersonal()
|
||||
} else {
|
||||
that.queryOutOrderListFunc()
|
||||
}
|
||||
},
|
||||
//tab按钮切换
|
||||
tabChange(active) {
|
||||
let that = this
|
||||
if (that.active != active) {
|
||||
//数据重置--开始
|
||||
let date = new Date()
|
||||
let month = date.getMonth() + 1
|
||||
if (month <= 9) {
|
||||
month = '0' + month
|
||||
}
|
||||
//默认展示当天数据
|
||||
this.postDate = date.getFullYear() + '-' + month + '-' + date.getDate()
|
||||
this.filterDate = date.getFullYear() + '-' + month
|
||||
this.dateFlag = 'd'
|
||||
this.currentIndex = '0'
|
||||
//数据重置--结束
|
||||
that.active = active
|
||||
if (that.active == 'Personal') {
|
||||
that.initDataPersonal()
|
||||
} else {
|
||||
that.initData()
|
||||
}
|
||||
}
|
||||
},
|
||||
// 团队数据
|
||||
async initDataPersonal() {
|
||||
let data = {
|
||||
mdType: this.dateFlag,
|
||||
monthStr: this.postDate.split('-')[0] + this.postDate.split('-')[1]
|
||||
}
|
||||
let resData = await queryPersonal(data)
|
||||
if (resData.result != '0') return this.$toast(resData.resultMessage)
|
||||
if (resData.content.length) {
|
||||
this.queryPersonalData = resData.content[0]
|
||||
} else {
|
||||
this.queryPersonalData = {
|
||||
ysfyc: '0',
|
||||
fyc: '0',
|
||||
ggap: '0',
|
||||
lastglevel: '0',
|
||||
sgrp: '0',
|
||||
lastslevel: '0'
|
||||
}
|
||||
}
|
||||
},
|
||||
// 团队数据
|
||||
async initData() {
|
||||
// 初始化年份筛选数据
|
||||
// const currentYear = new Date().getFullYear()
|
||||
@@ -270,15 +382,15 @@ export default {
|
||||
},
|
||||
// 查询列表数据
|
||||
queryOutOrderListFunc() {
|
||||
queryOutOrderList({
|
||||
dateFlag: this.dateFlag,
|
||||
appntDate: this.postDate,
|
||||
distCode: this.OrgLv2Code,
|
||||
depCode: this.OrgLv3Code,
|
||||
orgCode: this.OrgLv4Code,
|
||||
queryTeamList({
|
||||
mdType: this.dateFlag,
|
||||
monthStr: this.postDate.split('-')[0] + this.postDate.split('-')[1],
|
||||
qubranchattr: this.OrgLv2Code,
|
||||
bubranchattr: this.OrgLv3Code,
|
||||
zubranchattr: this.OrgLv4Code,
|
||||
pageNum: this.pageNum,
|
||||
pageSize: this.pageSize
|
||||
}).then(res => {
|
||||
}).then((res) => {
|
||||
if (res.result == 0) {
|
||||
if (res.content) {
|
||||
this.pageNum++
|
||||
@@ -298,7 +410,7 @@ export default {
|
||||
// 筛选二级机构-区
|
||||
async onOrgLv2ConditionConfirm(data, status) {
|
||||
this.isOrgLv2ConditionShow = false
|
||||
let OrgLv2 = this.OrgLv2s.find(item => item.name === data)
|
||||
let OrgLv2 = this.OrgLv2s.find((item) => item.name === data)
|
||||
if (OrgLv2) {
|
||||
this.OrgLv2Code = OrgLv2.code
|
||||
this.params.manageCode = this.OrgLv2Code
|
||||
@@ -332,7 +444,7 @@ export default {
|
||||
async onOrgLv3ConditionConfirm(data, status) {
|
||||
this.isOrgLv3ConditionShow = false
|
||||
this.OrgLv3Name = data
|
||||
let OrgLv3 = this.OrgLv3s.find(item => item.name === data)
|
||||
let OrgLv3 = this.OrgLv3s.find((item) => item.name === data)
|
||||
if (OrgLv3) {
|
||||
this.OrgLv3Code = OrgLv3.code
|
||||
this.params.manageCode = this.OrgLv3Code
|
||||
@@ -366,7 +478,7 @@ export default {
|
||||
async onOrgLv4ConditionConfirm(data) {
|
||||
this.isOrgLv4ConditionShow = false
|
||||
this.OrgLv4Name = data
|
||||
let area = this.OrgLv4s.find(item => item.name === data)
|
||||
let area = this.OrgLv4s.find((item) => item.name === data)
|
||||
if (area) {
|
||||
this.OrgLv4Code = area.code
|
||||
this.params.manageCode = this.OrgLv4Code
|
||||
@@ -391,16 +503,206 @@ export default {
|
||||
}
|
||||
//默认展示当天数据
|
||||
this.postDate = date.getFullYear() + '-' + month + '-' + date.getDate()
|
||||
this.initData()
|
||||
this.filterDate = date.getFullYear() + '-' + month
|
||||
this.initDataPersonal()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bg {
|
||||
background: url('../../../assets/images/laurelClub/bgData.png') center center no-repeat;
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
min-height: 100vh;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
// 时间选择置顶
|
||||
.position01{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.position02{
|
||||
position: fixed;
|
||||
top: 78px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
.position03{
|
||||
position: fixed;
|
||||
top: 178px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
.position04{
|
||||
position: absolute;
|
||||
top: 230px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
//tab按钮置顶
|
||||
|
||||
//团队数据表头置顶
|
||||
|
||||
//顶部-时间选择
|
||||
.m-filterDate {
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
.number {
|
||||
flex-shrink: 0;
|
||||
margin: 0 7px;
|
||||
font-size: 12px;
|
||||
.unCheckedLeft {
|
||||
background-color: #fff;
|
||||
color: #333333;
|
||||
border: 1px solid #2e4591;
|
||||
border-radius: 6px 0 0 6px;
|
||||
width: 54px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
border-right: 0;
|
||||
}
|
||||
.checkedLeft {
|
||||
background-color: #2e4591;
|
||||
color: #fff;
|
||||
border: 1px solid #2e4591;
|
||||
border-radius: 6px 0 0 6px;
|
||||
width: 54px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
.unCheckedRight {
|
||||
background-color: #fff;
|
||||
color: #333333;
|
||||
border: 1px solid #2e4591;
|
||||
border-radius: 0 6px 6px 0;
|
||||
width: 54px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
.checkedRight {
|
||||
background-color: #2e4591;
|
||||
color: #fff;
|
||||
border: 1px solid #2e4591;
|
||||
border-radius: 0 6px 6px 0;
|
||||
width: 54px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.filterTime {
|
||||
width: 70px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
/deep/.van-field__label {
|
||||
width: 0px;
|
||||
}
|
||||
|
||||
// 顶部tab按钮
|
||||
.bntTab {
|
||||
text-align: center;
|
||||
.unTabLeft {
|
||||
background-color: #fff;
|
||||
color: #333333;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 10px 0 0 10px;
|
||||
width: 114px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
.tabLeft {
|
||||
background: linear-gradient(135deg, #30339a 0%, #181935 100%);
|
||||
color: #ffcb6b;
|
||||
border: 1px solid rgba(222, 144, 34, 1);
|
||||
border-radius: 10px 0 0 10px;
|
||||
width: 114px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
.unTabRight {
|
||||
background-color: #fff;
|
||||
color: #333333;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 0 10px 10px 0;
|
||||
width: 114px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
.tabRight {
|
||||
background: linear-gradient(135deg, #30339a 0%, #181935 100%);
|
||||
color: #ffcb6b;
|
||||
border: 1px solid rgba(222, 144, 34, 1);
|
||||
border-radius: 0 10px 10px 0;
|
||||
width: 114px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
// 个人数据
|
||||
.m-bg {
|
||||
width: 124px;
|
||||
height: 100px;
|
||||
display: inline-block;
|
||||
background: linear-gradient(135deg, #30339a 0%, #181935 100%);
|
||||
border-radius: 6px;
|
||||
border: 2px solid rgba(222, 144, 34, 1);
|
||||
margin: 60px 30px 0 0;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
.crown {
|
||||
width: 80px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
top: -32px;
|
||||
left: 22px;
|
||||
}
|
||||
.text {
|
||||
color: #ffcb6b;
|
||||
font-size: 14px;
|
||||
display: block;
|
||||
margin-top: 26px;
|
||||
}
|
||||
.number {
|
||||
color: #ffcb6b;
|
||||
font-size: 20px;
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
.m-bg:nth-child(even) {
|
||||
margin-right: 0;
|
||||
}
|
||||
// 团队数据
|
||||
.classification {
|
||||
font-size: 14px;
|
||||
padding: 15px;
|
||||
background: #ee3030;
|
||||
background: #7886c8;
|
||||
color: #fff;
|
||||
}
|
||||
.van-icon {
|
||||
@@ -412,71 +714,50 @@ export default {
|
||||
margin-right: 5px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.filterDate {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 7px 0;
|
||||
.number {
|
||||
flex-shrink: 0;
|
||||
margin: 0 7px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.filterTime {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
/deep/.van-field__label {
|
||||
width: 0px;
|
||||
}
|
||||
.table {
|
||||
//overflow-x: auto;导致 List 无法正确地判断滚动容器。解决方法是去除该样式
|
||||
// overflow-x: auto;
|
||||
margin: 5px;
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
margin-top: 245px;
|
||||
overflow-y: scroll;
|
||||
height: 400px;
|
||||
// table {
|
||||
// width: 180vw;
|
||||
// border-collapse: collapse;
|
||||
// th {
|
||||
// width: 130px;
|
||||
// }
|
||||
// }
|
||||
// table,
|
||||
// th,
|
||||
// td {
|
||||
// border: 1px solid #999;
|
||||
// text-align: center;
|
||||
// font-size: 14px;
|
||||
// line-height: 30px;
|
||||
// background: #fff;
|
||||
// }
|
||||
// thead {
|
||||
// th {
|
||||
// height: 40px;
|
||||
// line-height: 40px;
|
||||
// background: #7886c8;
|
||||
// color: #fff;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
.table th {
|
||||
width: 130px;
|
||||
}
|
||||
table {
|
||||
width: 180vw;
|
||||
}
|
||||
.table {
|
||||
margin-top: 10px;
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table,
|
||||
th,
|
||||
td {
|
||||
border: 1px solid #999;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
background: #fff;
|
||||
}
|
||||
thead {
|
||||
th {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
background: #e9332e;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.th-fixed {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
width: 200px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
.td-fixed {
|
||||
position: sticky;
|
||||
width: 200px;
|
||||
padding: 0 5px;
|
||||
left: 0;
|
||||
text-decoration: underline;
|
||||
}
|
||||
// .th-fixed {
|
||||
// position: sticky;
|
||||
// left: 0;
|
||||
// width: 200px;
|
||||
// padding: 0 5px;
|
||||
// }
|
||||
// .td-fixed {
|
||||
// position: sticky;
|
||||
// width: 200px;
|
||||
// padding: 0 5px;
|
||||
// left: 0;
|
||||
// text-decoration: underline;
|
||||
// }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user