pengda
3 months ago
6 changed files with 1088 additions and 309 deletions
@ -0,0 +1,552 @@ |
|||||
|
<template> |
||||
|
<div class="demo-wrap min-flex-right"> |
||||
|
<div class="flex-between"> |
||||
|
<h2>{{pageTitle}}</h2> |
||||
|
<CustomDropdown ref="dropdownRef" :placeholder="'（'+viewDesc[this.view]+')'+text" width="280px"> |
||||
|
<DateSelect slot="normal" :view="view" v-model="selectedDate" @update-count="handleUpdateView" @change="handleDateChange" /> |
||||
|
</CustomDropdown> |
||||
|
</div> |
||||
|
<div class=" flex-common" id=""> |
||||
|
<el-form> |
||||
|
<el-table :data="tableData" style="width: 100%" @sort-change="handleSortChange" @cell-mouse-enter="handleRowHover"> |
||||
|
<el-table-column prop="sort" label="排序" width="100"></el-table-column> |
||||
|
|
||||
|
<el-table-column v-if="(dataRank == 1 || dataRank == 2) && (dataType == 'ver_type' || dataType == 'check_type')" prop="name" :key="selectedType" :label="type_select[selectedType]"> |
||||
|
<template slot="header"> |
||||
|
<el-select class="custom-select" v-model="selectedType" @change="changeRankType"> |
||||
|
<el-option v-for="(item,type) in type_select" :key="type" :label="item" :value="type"></el-option> |
||||
|
</el-select> |
||||
|
</template> |
||||
|
<template slot-scope="scope"> |
||||
|
{{ scope.row.name }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column v-else prop="name" :label="type_desc[dataType]" width="150"></el-table-column> |
||||
|
|
||||
|
<el-table-column v-for="(field, index) in valueFields" :key="field" :label="labels[index]" :prop="String(index + 1)" sortable="custom"> |
||||
|
<template v-if="index == 3 && dataRank == 1 && type != 'agent'" v-slot="{ row, $index }"> |
||||
|
<el-popover v-model="row.id_popover" placement="top" trigger="manual" :ref="`popover-${$index}`" @show="popshow"> |
||||
|
<div class="pop-wrap"> |
||||
|
<div class="flex-between flex pop-top"> |
||||
|
<h3>{{ text }} {{ row.name }} <span @click="goLookMoreData(row.id)">查看更多</span></h3> |
||||
|
<span class="flex point" @click="closePop(row,'id')">关闭 <img src="@/assets/register/close.svg" alt=""></span> |
||||
|
</div> |
||||
|
<el-table :data="tableData1" style="width: 100%"> |
||||
|
<el-table-column prop="value_1" width="208" label="日期"></el-table-column> |
||||
|
<el-table-column width="348" :label="rank_type_desc[dataRank]"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div class="flex"> |
||||
|
{{ scope.row.value_2 }} |
||||
|
<template v-if="Object.keys(growth_list1).length > 0"> |
||||
|
<span class="flex growth-text" v-if="growth_list1[scope.row.id]"> |
||||
|
<span v-if="growth_list1[scope.row.id].value>0"> |
||||
|
<span class="growth-up"> |
||||
|
<img class="edit_icon" src="@/assets/super/growth-up.svg" alt="">{{growth_list1[scope.row.id].value}}% |
||||
|
</span>同比上年 |
||||
|
</span> |
||||
|
<span v-if="growth_list1[scope.row.id].value<0"> |
||||
|
<span class="growth-down"> |
||||
|
<img class="edit_icon" src="@/assets/super/growth-down.svg" alt="">{{growth_list1[scope.row.id].value}}% |
||||
|
</span>同比上年 |
||||
|
</span> |
||||
|
<span v-if="growth_list1[scope.row.id].value==0"> |
||||
|
<img class="edit_icon" src="@/assets/super/growth-flat.svg" alt="">同比上年持平 |
||||
|
</span> |
||||
|
</span> |
||||
|
<span class="flex growth-text" v-else>上年无数据</span> |
||||
|
</template> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
|
||||
|
<div class="flex" slot="reference" > |
||||
|
{{ row[field] }} |
||||
|
<template v-if="Object.keys(growth_list).length > 0"> |
||||
|
<template v-if="growth_list[row.id] && growth_list[row.id][field]"> |
||||
|
<span v-if="growth_list[row.id][field].value > 0" class="growth-text"> |
||||
|
<span class="growth-up"> |
||||
|
<img class="edit_icon" src="@/assets/super/growth-up.svg" alt="" /> |
||||
|
{{ growth_list[row.id][field].value }}% |
||||
|
</span>同比上年 |
||||
|
</span> |
||||
|
<span v-else-if="growth_list[row.id][field].value < 0" class="growth-text"> |
||||
|
<span class="growth-down"> |
||||
|
<img class="edit_icon" src="@/assets/super/growth-down.svg" alt="" /> |
||||
|
{{ growth_list[row.id][field].value }}% |
||||
|
</span>同比上年 |
||||
|
</span> |
||||
|
<span v-else class="growth-text"> |
||||
|
<img class="edit_icon" src="@/assets/super/growth-flat.svg" alt="" />同比上年持平 |
||||
|
</span> |
||||
|
</template> |
||||
|
<span v-else class="growth-text">上年无数据</span> |
||||
|
</template> |
||||
|
<img @click="handleClick(row, $index, 'id')" v-if="show_detail_index == row.sort" class="detail_icon" src="@/assets/super/list-detail.svg" alt=""> |
||||
|
</div> |
||||
|
</el-popover> |
||||
|
</template> |
||||
|
<template v-else slot-scope="scope"> |
||||
|
<div class="flex"> |
||||
|
{{ scope.row[field] }} |
||||
|
<template v-if="Object.keys(growth_list).length > 0"> |
||||
|
<template v-if="growth_list[scope.row.id] && growth_list[scope.row.id][field]"> |
||||
|
<span v-if="growth_list[scope.row.id][field].value > 0" class="growth-text"> |
||||
|
<span class="growth-up"> |
||||
|
<img class="edit_icon" src="@/assets/super/growth-up.svg" alt="" /> |
||||
|
{{ growth_list[scope.row.id][field].value }}% |
||||
|
</span> |
||||
|
同比上年 |
||||
|
</span> |
||||
|
<span v-else-if="growth_list[scope.row.id][field].value < 0" class="growth-text"> |
||||
|
<span class="growth-down"> |
||||
|
<img class="edit_icon" src="@/assets/super/growth-down.svg" alt="" /> |
||||
|
{{ growth_list[scope.row.id][field].value }}% |
||||
|
</span> |
||||
|
同比上年 |
||||
|
</span> |
||||
|
<span v-else class="growth-text"> |
||||
|
<img class="edit_icon" src="@/assets/super/growth-flat.svg" alt="" /> |
||||
|
同比上年持平 |
||||
|
</span> |
||||
|
</template> |
||||
|
<span v-else class="growth-text">上年无数据</span> |
||||
|
</template> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange' |
||||
|
:current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper" |
||||
|
:total="total"> |
||||
|
</el-pagination> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
// import GuipForm from '@/components/GuipForm.vue' |
||||
|
import DateSelect from '@/components/super/DateSelect.vue'; |
||||
|
import CustomDropdown from '@/components/CustomDropdown.vue'; |
||||
|
|
||||
|
export default { |
||||
|
name: 'rank_batch_list', |
||||
|
props: { |
||||
|
pageTitle: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
}, |
||||
|
rank_type: { |
||||
|
type: Number, |
||||
|
default: 0 |
||||
|
}, |
||||
|
type: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
} |
||||
|
}, |
||||
|
components: { |
||||
|
DateSelect, |
||||
|
CustomDropdown |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
viewDesc:{ |
||||
|
'month':'月份', |
||||
|
'monthTwo':'月份', |
||||
|
'year':'年份', |
||||
|
}, |
||||
|
rank_type_desc:{ |
||||
|
1:'毛利润/元', |
||||
|
2:'订单数', |
||||
|
3:'退单数', |
||||
|
4:'充值金额', |
||||
|
}, |
||||
|
type_desc:{ |
||||
|
'agent':'代理商昵称', |
||||
|
'ver_type':'品牌名称', |
||||
|
'check_type':'服务名称', |
||||
|
}, |
||||
|
type_select:{ |
||||
|
'ver_type':'按品牌名称', |
||||
|
'check_type':'按服务名称', |
||||
|
}, |
||||
|
selectedType: 'check_type', |
||||
|
view:'month', |
||||
|
labels:['','','',''], |
||||
|
valueFields:['value_1','value_2','value_3','value_4'], |
||||
|
currentPage: 1, //当前页 |
||||
|
pageSize: 20, //每页的容量 |
||||
|
total: 0, //列表总数 |
||||
|
sortBy: 4, |
||||
|
sortOrder: 2, |
||||
|
text:'',//下拉框显示具体文案 |
||||
|
selectedDate:new Date(),//默认当天日期 |
||||
|
dataType: '', |
||||
|
dataRank: '', |
||||
|
tableData: [], |
||||
|
growth_list: [], |
||||
|
tableData1: [], |
||||
|
growth_list1: [], |
||||
|
show_detail_index: 0, |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.init() |
||||
|
}, |
||||
|
computed: { |
||||
|
}, |
||||
|
watch: { |
||||
|
'$route'() { |
||||
|
this.init() |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
init(){ |
||||
|
this.text = this.getNowDate()//初始赋值 |
||||
|
|
||||
|
this.dataType = this.type |
||||
|
this.dataRank = this.rank_type |
||||
|
|
||||
|
this.getRankingData(); // 每次路由变化都重新获取数据 |
||||
|
}, |
||||
|
handleUpdateView(newView) { |
||||
|
this.view = newView; |
||||
|
}, |
||||
|
getNowDate(){ |
||||
|
const now = new Date(); |
||||
|
const year = now.getFullYear(); |
||||
|
const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，补零 |
||||
|
const currentYearMonth = `${year}-${month}`; |
||||
|
return `${currentYearMonth}` |
||||
|
}, |
||||
|
getDate(dateStr){ |
||||
|
const date = new Date(dateStr); |
||||
|
const year = date.getFullYear(); // 2025 |
||||
|
const month = date.getMonth() + 1; // 3 (表示3月) |
||||
|
if(this.view == 'year'){ |
||||
|
return `${year}` |
||||
|
}else{ |
||||
|
return `${year}-${month}` |
||||
|
} |
||||
|
}, |
||||
|
handleDateChange(date) { |
||||
|
this.text = this.getDate(date) |
||||
|
this.selectedDate = date; |
||||
|
localStorage.setItem('date',JSON.stringify(date)) |
||||
|
|
||||
|
this.$refs.dropdownRef.closeDropdown(); |
||||
|
|
||||
|
this.currentPage = 1; |
||||
|
this.getRankingData() |
||||
|
}, |
||||
|
goLookMoreData(id) { |
||||
|
let query = {} |
||||
|
query.date = this.text |
||||
|
query.rank_type = this.dataRank |
||||
|
if(this.dataType == 'agent') { |
||||
|
query.aid = id |
||||
|
} |
||||
|
if(this.dataType == 'ver_type') { |
||||
|
query.ver_type = id |
||||
|
} |
||||
|
if(this.dataType == 'check_type') { |
||||
|
query.check_type = id |
||||
|
} |
||||
|
window.open(this.$router.resolve({ |
||||
|
path: '/super/ranking/detail', |
||||
|
query: query |
||||
|
}).href, '_blank') |
||||
|
}, |
||||
|
closePop(row,type){ |
||||
|
row[type + '_popover'] = false; // 关闭弹框 |
||||
|
}, |
||||
|
handleClick(row, index, type) { |
||||
|
// 关闭其他行的弹框 |
||||
|
this.tableData.forEach((item, i) => { |
||||
|
if (i !== index) { |
||||
|
item[type + '_popover'] = false; |
||||
|
} |
||||
|
}); |
||||
|
// 打开当前行的弹框 |
||||
|
row[type + '_popover'] = true; |
||||
|
|
||||
|
let obj = {} |
||||
|
if(this.dataType == 'agent') { |
||||
|
obj.aid = row.id |
||||
|
} |
||||
|
if(this.dataType == 'ver_type') { |
||||
|
obj.ver_type = row.id |
||||
|
} |
||||
|
if(this.dataType == 'check_type') { |
||||
|
obj.check_type = row.id |
||||
|
} |
||||
|
this.getRankingDetail(obj); |
||||
|
}, |
||||
|
popshow() { |
||||
|
var ariaEls = document.querySelectorAll('.el-popover') |
||||
|
ariaEls.forEach((item) => { |
||||
|
item.removeAttribute('aria-hidden') |
||||
|
}) |
||||
|
|
||||
|
ariaEls = document.querySelectorAll('.el-radio__original') |
||||
|
ariaEls.forEach((item) => { |
||||
|
item.removeAttribute('aria-hidden') |
||||
|
}) |
||||
|
}, |
||||
|
handleSortChange({ prop, order }) { |
||||
|
this.sortBy = 4; |
||||
|
this.sortOrder = 2; |
||||
|
if (order == 'ascending') { |
||||
|
this.sortBy = prop; |
||||
|
this.sortOrder = 1; |
||||
|
} |
||||
|
if (order == 'descending') { |
||||
|
this.sortBy = prop; |
||||
|
this.sortOrder = 2; |
||||
|
} |
||||
|
this.currentPage = 1; |
||||
|
this.getRankingData() |
||||
|
}, |
||||
|
handleRowHover(row) { |
||||
|
this.show_detail_index = row.sort |
||||
|
}, |
||||
|
changeRankType(){ |
||||
|
this.dataType = this.selectedType |
||||
|
this.getRankingData() |
||||
|
}, |
||||
|
getRankingData() { |
||||
|
this.setLabelText(); |
||||
|
|
||||
|
if(this.dataType == 'agent') { |
||||
|
this.getAgentRanking() |
||||
|
} |
||||
|
if(this.dataType == 'ver_type') { |
||||
|
this.getVerRanking() |
||||
|
} |
||||
|
if(this.dataType == 'check_type') { |
||||
|
this.getTypeRanking() |
||||
|
} |
||||
|
}, |
||||
|
setLabelText(){ |
||||
|
const date = new Date(this.text); |
||||
|
const year = date.getFullYear(); // 2025 |
||||
|
const month = date.getMonth() + 1; // 3 (表示3月) |
||||
|
|
||||
|
this.labels = []; |
||||
|
if (this.view === 'year') { |
||||
|
for (let i = 3; i >= 0; i--) { |
||||
|
this.labels.push((year - i) + '年' + this.rank_type_desc[this.dataRank]); |
||||
|
} |
||||
|
} else { |
||||
|
const monthLabels = []; |
||||
|
for (let i = 3; i >= 0; i--) { |
||||
|
let m = month - i; |
||||
|
if (m <= 0) m += 12; |
||||
|
monthLabels.push(m + '月' + this.rank_type_desc[this.dataRank]); |
||||
|
} |
||||
|
this.labels = monthLabels; |
||||
|
} |
||||
|
}, |
||||
|
getAgentRanking() { |
||||
|
const that = this |
||||
|
//充值排行 |
||||
|
if(that.dataRank == 4){ |
||||
|
this.$http('POST', '/supernew/ajax_get_rank_recharge', { |
||||
|
date: that.text, |
||||
|
sortBy: that.sortBy, |
||||
|
sortOrder: that.sortOrder, |
||||
|
cur_page: that.currentPage, |
||||
|
page_size: that.pageSize, |
||||
|
}).then(response => { |
||||
|
this.$nextTick(() => { |
||||
|
that.tableData = response.data.list |
||||
|
that.growth_list = response.data.growth_list |
||||
|
that.total = response.data.total |
||||
|
}) |
||||
|
}).catch(error => { |
||||
|
console.error(error, 'error') |
||||
|
}) |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
this.$http('POST', '/supernew/ajax_get_agent_batch_list', { |
||||
|
date: that.text, |
||||
|
rank_type: that.dataRank, |
||||
|
sortBy: that.sortBy, |
||||
|
sortOrder: that.sortOrder, |
||||
|
cur_page: that.currentPage, |
||||
|
page_size: that.pageSize, |
||||
|
}).then(response => { |
||||
|
this.$nextTick(() => { |
||||
|
that.tableData = response.data.list |
||||
|
that.growth_list = response.data.growth_list |
||||
|
that.total = response.data.total |
||||
|
}) |
||||
|
}).catch(error => { |
||||
|
console.error(error, 'error') |
||||
|
}) |
||||
|
}, |
||||
|
getVerRanking() { |
||||
|
const that = this |
||||
|
this.$http('POST', '/supernew/ajax_get_ver_batch_list', { |
||||
|
date: that.text, |
||||
|
rank_type: that.dataRank, |
||||
|
sortBy: that.sortBy, |
||||
|
sortOrder: that.sortOrder, |
||||
|
cur_page: that.currentPage, |
||||
|
page_size: that.pageSize, |
||||
|
}).then(response => { |
||||
|
this.$nextTick(() => { |
||||
|
that.tableData = response.data.list |
||||
|
that.top_list = response.data.top_list |
||||
|
that.growth_list = response.data.growth_list |
||||
|
that.total = response.data.total |
||||
|
}) |
||||
|
}).catch(error => { |
||||
|
console.error(error, 'error') |
||||
|
}) |
||||
|
}, |
||||
|
getTypeRanking() { |
||||
|
const that = this |
||||
|
this.$http('POST', '/supernew/ajax_get_type_batch_list', { |
||||
|
date: that.text, |
||||
|
rank_type: that.dataRank, |
||||
|
sortBy: that.sortBy, |
||||
|
sortOrder: that.sortOrder, |
||||
|
cur_page: that.currentPage, |
||||
|
page_size: that.pageSize, |
||||
|
}).then(response => { |
||||
|
this.$nextTick(() => { |
||||
|
that.tableData = response.data.list |
||||
|
that.top_list = response.data.top_list |
||||
|
that.growth_list = response.data.growth_list |
||||
|
that.total = response.data.total |
||||
|
}) |
||||
|
}).catch(error => { |
||||
|
console.error(error, 'error') |
||||
|
}) |
||||
|
}, |
||||
|
getRankingDetail(obj) { |
||||
|
const that = this |
||||
|
that.tableData1 = [] |
||||
|
that.growth_list1 = [] |
||||
|
this.$http('POST', '/supernew/ajax_get_rank_detail', { |
||||
|
date: that.text, |
||||
|
rank_type: that.dataRank, |
||||
|
sortBy: 2, |
||||
|
sortOrder: 2, |
||||
|
...obj |
||||
|
}).then(response => { |
||||
|
this.$nextTick(() => { |
||||
|
that.tableData1 = response.data.list.slice(0, 5) |
||||
|
that.growth_list1 = response.data.growth_list |
||||
|
}) |
||||
|
}).catch(error => { |
||||
|
console.error(error, 'error') |
||||
|
}) |
||||
|
}, |
||||
|
handleSizeChange(val) { |
||||
|
this.pageSize = val |
||||
|
this.getRankingData() |
||||
|
}, |
||||
|
handleCurrentChange(val) { |
||||
|
this.currentPage = val |
||||
|
this.getRankingData() |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped lang="scss"> |
||||
|
.growth-up{ |
||||
|
padding: 0 5px; |
||||
|
color:#22C55E; |
||||
|
} |
||||
|
.growth-down{ |
||||
|
padding: 0 5px; |
||||
|
color:#EF4444; |
||||
|
} |
||||
|
.growth-text{ |
||||
|
color:#9CA3AF; |
||||
|
padding-left: 5px; |
||||
|
} |
||||
|
.edit_icon{ |
||||
|
padding: 0 5px; |
||||
|
vertical-align: middle; |
||||
|
} |
||||
|
.demo-wrap { |
||||
|
width: 100%; |
||||
|
letter-spacing: 0.08em; |
||||
|
} |
||||
|
.custom-select { |
||||
|
width: 120px; |
||||
|
border: none; |
||||
|
border-radius: 0; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
.custom-select ::v-deep(.el-input__inner) { |
||||
|
background: none; |
||||
|
border: 1px solid transparent; |
||||
|
border-radius: 0; |
||||
|
box-shadow: none; |
||||
|
font-size: 14px; |
||||
|
color: #1e2226; |
||||
|
font-weight: bold; |
||||
|
padding: 0; |
||||
|
} |
||||
|
.custom-select ::v-deep(.el-input:focus-within) { |
||||
|
background: none; |
||||
|
border-color: #F5F7FA!important; |
||||
|
border-radius: 0; |
||||
|
box-shadow: none; |
||||
|
outline:none; |
||||
|
} |
||||
|
|
||||
|
.detail_icon { |
||||
|
vertical-align: text-top; |
||||
|
padding-left: 5px; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-popover.el-popper { |
||||
|
padding: 20px; |
||||
|
} |
||||
|
.pop-wrap { |
||||
|
// width: 596px; |
||||
|
// height: 320px; |
||||
|
/* 自动布局 */ |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
// padding: 20px; |
||||
|
gap: 20px; |
||||
|
box-sizing: border-box; |
||||
|
|
||||
|
// background: #FFFFFF; |
||||
|
/* 阴影/常规阴影 */ |
||||
|
// box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.16); |
||||
|
.pop-top { |
||||
|
h3 { |
||||
|
/* body/body 1_bold */ |
||||
|
font-family: Microsoft YaHei UI; |
||||
|
font-size: 16px; |
||||
|
font-weight: bold; |
||||
|
line-height: 18px; |
||||
|
letter-spacing: 0.08em; |
||||
|
color: #1D2129; |
||||
|
margin: 0; |
||||
|
|
||||
|
span { |
||||
|
display: inline-block; |
||||
|
margin-left: 12px; |
||||
|
font-size: 14px; |
||||
|
line-height: 18px; |
||||
|
color: #006AFF; |
||||
|
} |
||||
|
} |
||||
|
img{ |
||||
|
width: 20px; |
||||
|
height: 20px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,479 @@ |
|||||
|
<template> |
||||
|
<div class="demo-wrap min-flex-right"> |
||||
|
<div class="flex-between"> |
||||
|
<h2>{{filterTitle ? filterTitle : pageTitle}}</h2> |
||||
|
<CustomDropdown ref="dropdownRef" :placeholder="'（'+viewDesc[this.view]+')'+text" width="280px" v-if="showDateSelect"> |
||||
|
<DateSelect slot="normal" :view="view" :onlyYear="onlyYear" v-model="selectedDate" @update-count="handleUpdateView" @change="handleDateChange" /> |
||||
|
</CustomDropdown> |
||||
|
</div> |
||||
|
<div class=" flex-common" v-if="type == 'year'"> |
||||
|
<el-form> |
||||
|
<el-table :data="tableData" style="width: 100%" @sort-change="handleSortChange" @cell-mouse-enter="handleRowHover"> |
||||
|
<el-table-column prop="sort" label="排序" width="100"></el-table-column> |
||||
|
<!-- 其他列 --> |
||||
|
<el-table-column prop="1" label="年份" sortable="custom"> |
||||
|
<template slot-scope="scope"> |
||||
|
{{ scope.row.value_1 }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="2" :label="rank_type_desc[dataRank]" sortable="custom"> |
||||
|
<template slot-scope="scope"> |
||||
|
{{ scope.row.value_2 }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column label="代理商排行"> |
||||
|
<template v-slot="{ row, $index }"> |
||||
|
<el-popover v-model="row.id_popover" placement="top" trigger="manual" :ref="`popover-${$index}`" @show="popshow"> |
||||
|
<div class="pop-wrap"> |
||||
|
<div class="flex-between flex pop-top"> |
||||
|
<h3>{{ row.value_1 }} {{rank_type_desc[dataRank]}}<span @click="goLookMoreData(row.value_1)">查看更多</span></h3> |
||||
|
<span class="flex point" @click="closePop(row,'id')">关闭 <img src="@/assets/register/close.svg" alt=""></span> |
||||
|
</div> |
||||
|
<el-table :data="tableData1" style="width: 100%"> |
||||
|
<el-table-column prop="sort" width="100" label="排行"></el-table-column> |
||||
|
<el-table-column prop="name" width="208" label="代理商"></el-table-column> |
||||
|
<el-table-column prop="value_1" width="348" label="销售额"></el-table-column> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
<!-- 触发弹框的按钮 --> |
||||
|
<span v-if="top_list[row.id]" slot="reference" > |
||||
|
No.1 {{ top_list[row.id]['name'] }} |
||||
|
<img @click="handleClick(row, $index, 'id')" v-if="show_detail_index == row.sort" class="detail_icon" src="@/assets/super/list-detail.svg" alt=""> |
||||
|
</span> |
||||
|
</el-popover> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
|
||||
|
<div class=" flex-common" v-if="type == 'month'"> |
||||
|
<el-form> |
||||
|
<el-table :data="tableData" style="width: 100%" @sort-change="handleSortChange" @cell-mouse-enter="handleRowHover"> |
||||
|
<el-table-column prop="sort" label="排序" width="100"></el-table-column> |
||||
|
<!-- 其他列 --> |
||||
|
<el-table-column prop="1" label="月份" sortable="custom"> |
||||
|
<template slot-scope="scope"> |
||||
|
{{ scope.row.value_1 }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column prop="2" :label="rank_type_desc[dataRank]" sortable="custom"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div class="flex"> |
||||
|
{{ scope.row.value_2 }} |
||||
|
<span class="flex growth-text" v-if="growth_list[scope.row.id]"> |
||||
|
<span v-if="growth_list[scope.row.id].value>0"> |
||||
|
<span class="growth-up"> |
||||
|
<img class="edit_icon" src="@/assets/super/growth-up.svg" alt="">{{growth_list[scope.row.id].value}}% |
||||
|
</span>同比上年 |
||||
|
</span> |
||||
|
<span v-if="growth_list[scope.row.id].value<0"> |
||||
|
<span class="growth-down"> |
||||
|
<img class="edit_icon" src="@/assets/super/growth-down.svg" alt="">{{growth_list[scope.row.id].value}}% |
||||
|
</span>同比上年 |
||||
|
</span> |
||||
|
<span v-if="growth_list[scope.row.id].value==0"> |
||||
|
<img class="edit_icon" src="@/assets/super/growth-flat.svg" alt="">同比上年持平 |
||||
|
</span> |
||||
|
</span> |
||||
|
<span class="flex growth-text" v-else>上年无数据</span> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column label="代理商排行"> |
||||
|
<template v-slot="{ row, $index }"> |
||||
|
<el-popover v-model="row.id_popover" placement="top" trigger="manual" :ref="`popover-${$index}`" @show="popshow"> |
||||
|
<div class="pop-wrap"> |
||||
|
<div class="flex-between flex pop-top"> |
||||
|
<h3>{{ row.value_1 }} {{rank_type_desc[dataRank]}}<span @click="goLookMoreData(row.value_1)">查看更多</span></h3> |
||||
|
<span class="flex point" @click="closePop(row,'id')">关闭 <img src="@/assets/register/close.svg" alt=""></span> |
||||
|
</div> |
||||
|
<el-table :data="tableData1" style="width: 100%"> |
||||
|
<el-table-column prop="sort" width="100" label="排行"></el-table-column> |
||||
|
<el-table-column prop="name" width="208" label="代理商"></el-table-column> |
||||
|
<el-table-column prop="value_1" width="348" label="销售额"></el-table-column> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
<!-- 触发弹框的按钮 --> |
||||
|
<span v-if="top_list[row.id]" slot="reference"> |
||||
|
No.1 {{ top_list[row.id]['name'] }} |
||||
|
<img @click="handleClick(row, $index, 'id')" v-if="show_detail_index == row.sort" class="detail_icon" src="@/assets/super/list-detail.svg" alt=""> |
||||
|
</span> |
||||
|
<span slot="reference" v-else>暂无排行</span> |
||||
|
</el-popover> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
|
||||
|
<div class=" flex-common" v-if="type == 'day'"> |
||||
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;"> |
||||
|
<h3 style="margin: 0;"></h3> |
||||
|
<span style="font-size: 14px; color: #999;">总{{rank_type_desc[dataRank]}}：{{total_value}}</span> |
||||
|
</div> |
||||
|
|
||||
|
<el-form> |
||||
|
<el-table :data="tableData" style="width: 100%" @sort-change="handleSortChange" @cell-mouse-enter="handleRowHover"> |
||||
|
<el-table-column prop="sort" label="排序"></el-table-column> |
||||
|
<!-- 其他列 --> |
||||
|
<el-table-column prop="1" label="日期" sortable="custom"> |
||||
|
<template slot-scope="scope"> |
||||
|
{{ scope.row.value_1 }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column prop="2" :label="rank_type_desc[dataRank]" sortable="custom"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div class="flex"> |
||||
|
{{ scope.row.value_2 }} |
||||
|
<template v-if="Object.keys(growth_list).length > 0"> |
||||
|
<span class="flex growth-text" v-if="growth_list[scope.row.id]"> |
||||
|
<span v-if="growth_list[scope.row.id].value>0"> |
||||
|
<span class="growth-up"> |
||||
|
<img class="edit_icon" src="@/assets/super/growth-up.svg" alt="">{{growth_list[scope.row.id].value}}% |
||||
|
</span>同比上年 |
||||
|
</span> |
||||
|
<span v-if="growth_list[scope.row.id].value<0"> |
||||
|
<span class="growth-down"> |
||||
|
<img class="edit_icon" src="@/assets/super/growth-down.svg" alt="">{{growth_list[scope.row.id].value}}% |
||||
|
</span>同比上年 |
||||
|
</span> |
||||
|
<span v-if="growth_list[scope.row.id].value==0"> |
||||
|
<img class="edit_icon" src="@/assets/super/growth-flat.svg" alt="">同比上年持平 |
||||
|
</span> |
||||
|
</span> |
||||
|
<span class="flex growth-text" v-else>上年无数据</span> |
||||
|
</template> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
|
||||
|
<div class=" flex-common" v-if="type == 'agentnew'"> |
||||
|
<el-form> |
||||
|
<el-table :data="tableData" style="width: 100%" @sort-change="handleSortChange" @cell-mouse-enter="handleRowHover"> |
||||
|
<el-table-column prop="1" label="加盟时间" sortable="custom"> |
||||
|
<template slot-scope="scope"> |
||||
|
{{ scope.row.regtime }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="nick" label="代理商昵称"></el-table-column> |
||||
|
<el-table-column prop="real_name" label="负责人"></el-table-column> |
||||
|
<el-table-column prop="phone" label="电话"></el-table-column> |
||||
|
<el-table-column prop="2" label="账户余额" sortable="custom"> |
||||
|
<template slot-scope="scope"> |
||||
|
{{ scope.row.remain_money }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="3" label="累计总额/元" sortable="custom"> |
||||
|
<template slot-scope="scope"> |
||||
|
{{ scope.row.total_money }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
// import GuipForm from '@/components/GuipForm.vue' |
||||
|
import DateSelect from '@/components/super/DateSelect.vue'; |
||||
|
import CustomDropdown from '@/components/CustomDropdown.vue'; |
||||
|
|
||||
|
export default { |
||||
|
name: 'rank_detail', |
||||
|
props: { |
||||
|
pageTitle: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
}, |
||||
|
rank_type: { |
||||
|
type: Number, |
||||
|
default: 0 |
||||
|
}, |
||||
|
type: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
}, |
||||
|
showDateSelect: { |
||||
|
type: Boolean, |
||||
|
default: true |
||||
|
} |
||||
|
}, |
||||
|
components: { |
||||
|
DateSelect, |
||||
|
CustomDropdown |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
viewDesc:{ |
||||
|
'month':'月份', |
||||
|
'monthTwo':'月份', |
||||
|
'year':'年份', |
||||
|
}, |
||||
|
rank_type_desc:{ |
||||
|
1:'毛利润/元', |
||||
|
2:'订单数', |
||||
|
3:'退单数', |
||||
|
}, |
||||
|
aid:0, |
||||
|
ver_type:0, |
||||
|
check_type:0, |
||||
|
showfilterTitle:false, |
||||
|
filterTitle:"", |
||||
|
view:'year', |
||||
|
onlyYear:true, |
||||
|
dataRank:'', |
||||
|
text:'',//下拉框显示具体文案 |
||||
|
selectedDate:new Date(),//默认当天日期 |
||||
|
tableData: [], |
||||
|
total_value: 0, |
||||
|
tableData1: [], |
||||
|
top_list: [], |
||||
|
growth_list: [], |
||||
|
show_detail_index: 0, |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.init() |
||||
|
}, |
||||
|
computed: { |
||||
|
}, |
||||
|
watch: { |
||||
|
'$route'() { |
||||
|
this.init() |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
init(){ |
||||
|
if(this.showDateSelect){ |
||||
|
this.text = this.getNowYear()//初始赋值 |
||||
|
} |
||||
|
this.dataRank = this.rank_type |
||||
|
this.aid = this.$route.query.aid |
||||
|
this.ver_type = this.$route.query.ver_type |
||||
|
this.check_type = this.$route.query.check_type |
||||
|
if(this.$route.query.date) this.text = this.$route.query.date |
||||
|
if(this.$route.query.rank_type) this.dataRank = this.$route.query.rank_type |
||||
|
if(Object.keys(this.$route.query).length > 0) this.showfilterTitle = true |
||||
|
|
||||
|
if(this.type == 'agentnew'){ |
||||
|
this.getAgentNew() |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
this.getRankingDetail() |
||||
|
}, |
||||
|
handleUpdateView(newView) { |
||||
|
this.view = newView; |
||||
|
}, |
||||
|
getNowYear(){ |
||||
|
const now = new Date(); |
||||
|
const year = now.getFullYear(); |
||||
|
const currentYearMonth = `${year}`; |
||||
|
return `${currentYearMonth}` |
||||
|
}, |
||||
|
getDate(dateStr){ |
||||
|
const date = new Date(dateStr); |
||||
|
const year = date.getFullYear(); // 2025 |
||||
|
const month = date.getMonth() + 1; // 3 (表示3月) |
||||
|
if(this.view == 'year'){ |
||||
|
return `${year}` |
||||
|
}else{ |
||||
|
return `${year}-${month}` |
||||
|
} |
||||
|
}, |
||||
|
handleDateChange(date) { |
||||
|
this.text = this.getDate(date) |
||||
|
this.selectedDate = date; |
||||
|
localStorage.setItem('date',JSON.stringify(date)) |
||||
|
|
||||
|
this.$refs.dropdownRef.closeDropdown(); |
||||
|
this.getRankingDetail() |
||||
|
}, |
||||
|
goLookMoreData(date) { |
||||
|
let query = {} |
||||
|
query.date = date |
||||
|
query.rank_type = this.dataRank |
||||
|
query.type = 'agent' |
||||
|
window.open(this.$router.resolve({ |
||||
|
path: '/super/ranking/list', |
||||
|
query: query |
||||
|
}).href, '_blank') |
||||
|
}, |
||||
|
closePop(row,type){ |
||||
|
row[type + '_popover'] = false; // 关闭弹框 |
||||
|
}, |
||||
|
handleClick(row, index, type) { |
||||
|
// 关闭其他行的弹框 |
||||
|
this.tableData.forEach((item, i) => { |
||||
|
if (i !== index) { |
||||
|
item[type + '_popover'] = false; |
||||
|
} |
||||
|
}); |
||||
|
// 打开当前行的弹框 |
||||
|
row[type + '_popover'] = true; |
||||
|
this.getRankingList({date:row.value_1}); |
||||
|
}, |
||||
|
popshow() { |
||||
|
var ariaEls = document.querySelectorAll('.el-popover') |
||||
|
ariaEls.forEach((item) => { |
||||
|
item.removeAttribute('aria-hidden') |
||||
|
}) |
||||
|
|
||||
|
ariaEls = document.querySelectorAll('.el-radio__original') |
||||
|
ariaEls.forEach((item) => { |
||||
|
item.removeAttribute('aria-hidden') |
||||
|
}) |
||||
|
}, |
||||
|
handleSortChange({ prop, order }) { |
||||
|
this.currentPage = 1; |
||||
|
|
||||
|
let sortBy = 0; |
||||
|
let sortOrder = 0; |
||||
|
if (order == 'ascending') { |
||||
|
sortBy = prop; |
||||
|
sortOrder = 1; |
||||
|
} |
||||
|
if (order == 'descending') { |
||||
|
sortBy = prop; |
||||
|
sortOrder = 2; |
||||
|
} |
||||
|
if(this.type == 'agentnew'){ |
||||
|
this.getAgentNew({ sortBy: sortBy, sortOrder: sortOrder }) |
||||
|
return |
||||
|
} |
||||
|
this.getRankingDetail({ sortBy: sortBy, sortOrder: sortOrder }) |
||||
|
}, |
||||
|
handleRowHover(row) { |
||||
|
this.show_detail_index = row.sort |
||||
|
}, |
||||
|
getRankingDetail(obj) { |
||||
|
const that = this |
||||
|
that.tableData1 = [] |
||||
|
this.$http('POST', '/supernew/ajax_get_rank_detail', { |
||||
|
rank_type: that.dataRank, |
||||
|
aid:that.aid, |
||||
|
ver_type:that.ver_type, |
||||
|
check_type:that.check_type, |
||||
|
date: that.text, |
||||
|
...obj |
||||
|
}).then(response => { |
||||
|
this.$nextTick(() => { |
||||
|
that.tableData = response.data.list |
||||
|
that.total_value = response.data.total_value |
||||
|
that.top_list = response.data.top_list |
||||
|
that.growth_list = response.data.growth_list |
||||
|
that.total = response.data.total |
||||
|
|
||||
|
if(that.showfilterTitle) that.filterTitle = response.data.title |
||||
|
}) |
||||
|
}).catch(error => { |
||||
|
console.error(error, 'error') |
||||
|
}) |
||||
|
}, |
||||
|
getRankingList(obj) { |
||||
|
const that = this |
||||
|
this.$http('POST', '/supernew/ajax_get_agent_rank_list', { |
||||
|
rank_type: that.dataRank, |
||||
|
cur_page: 1, |
||||
|
page_size: 5, |
||||
|
...obj |
||||
|
}).then(response => { |
||||
|
this.$nextTick(() => { |
||||
|
that.tableData1 = response.data.list |
||||
|
}) |
||||
|
}).catch(error => { |
||||
|
console.error(error, 'error') |
||||
|
}) |
||||
|
}, |
||||
|
getAgentNew(obj) { |
||||
|
const that = this |
||||
|
this.$http('POST', '/supernew/ajax_new_agent_list', { |
||||
|
...obj |
||||
|
}).then(response => { |
||||
|
this.$nextTick(() => { |
||||
|
that.tableData = response.data.list |
||||
|
}) |
||||
|
}).catch(error => { |
||||
|
console.error(error, 'error') |
||||
|
}) |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped lang="scss"> |
||||
|
.growth-up{ |
||||
|
padding: 0 5px; |
||||
|
color:#22C55E; |
||||
|
} |
||||
|
.growth-down{ |
||||
|
padding: 0 5px; |
||||
|
color:#EF4444; |
||||
|
} |
||||
|
.growth-text{ |
||||
|
color:#9CA3AF; |
||||
|
padding-left: 5px; |
||||
|
} |
||||
|
.edit_icon{ |
||||
|
padding: 0 5px; |
||||
|
vertical-align: middle; |
||||
|
} |
||||
|
.demo-wrap { |
||||
|
width: 100%; |
||||
|
letter-spacing: 0.08em; |
||||
|
} |
||||
|
|
||||
|
.detail_icon { |
||||
|
vertical-align: text-top; |
||||
|
padding-left: 5px; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-popover.el-popper { |
||||
|
padding: 20px; |
||||
|
} |
||||
|
.pop-wrap { |
||||
|
// width: 596px; |
||||
|
// height: 320px; |
||||
|
/* 自动布局 */ |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
// padding: 20px; |
||||
|
gap: 20px; |
||||
|
box-sizing: border-box; |
||||
|
|
||||
|
// background: #FFFFFF; |
||||
|
/* 阴影/常规阴影 */ |
||||
|
// box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.16); |
||||
|
.pop-top { |
||||
|
h3 { |
||||
|
/* body/body 1_bold */ |
||||
|
font-family: Microsoft YaHei UI; |
||||
|
font-size: 16px; |
||||
|
font-weight: bold; |
||||
|
line-height: 18px; |
||||
|
letter-spacing: 0.08em; |
||||
|
color: #1D2129; |
||||
|
margin: 0; |
||||
|
|
||||
|
span { |
||||
|
display: inline-block; |
||||
|
margin-left: 12px; |
||||
|
font-size: 14px; |
||||
|
line-height: 18px; |
||||
|
color: #006AFF; |
||||
|
} |
||||
|
} |
||||
|
img{ |
||||
|
width: 20px; |
||||
|
height: 20px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -1,284 +0,0 @@ |
|||||
<template> |
|
||||
<div class="demo-wrap min-flex-right"> |
|
||||
<div class="flex-between"> |
|
||||
<h2>总利润 - 年排行</h2> |
|
||||
<CustomDropdown :placeholder="text" width="280px"> |
|
||||
<DateSelect slot="normal" :view="view" v-model="selectedDate" @update-count="handleUpdateView" @change="handleDateChange" /> |
|
||||
</CustomDropdown> |
|
||||
</div> |
|
||||
<div class=" flex-common" id=""> |
|
||||
<el-form> |
|
||||
<el-table :data="tableData" style="width: 100%" @sort-change="handleSortChange" |
|
||||
@cell-mouse-enter="handleRowHover"> |
|
||||
<el-table-column prop="sort" label="排序" width="100"> |
|
||||
</el-table-column> |
|
||||
<!-- 其他列 --> |
|
||||
<el-table-column prop="value_1" label="年份" sortable="custom"> |
|
||||
</el-table-column> |
|
||||
<el-table-column prop="value_2" label="总利润/元" sortable="custom"> |
|
||||
</el-table-column> |
|
||||
|
|
||||
<el-table-column label="代理商排行"> |
|
||||
<template v-slot="{ row, $index }"> |
|
||||
<el-popover v-model="row.id_popover" placement="top" trigger="manual" |
|
||||
:ref="`popover-${$index}`" @show="popshow"> |
|
||||
<div class="pop-wrap"> |
|
||||
<div class="flex-between flex pop-top"> |
|
||||
<h3>{{ row.id }} <span @click="goLookMoreData">查看更多</span></h3> |
|
||||
<span class="flex point" @click="closePop(row,'id')">关闭 <img src="@/assets/register/close.svg" alt=""></span> |
|
||||
</div> |
|
||||
<el-table :data="tableData1" style="width: 100%" @sort-change="handleSortChange" |
|
||||
@cell-mouse-enter="handleRowHover"> |
|
||||
<el-table-column prop="value_1" width="208" label="日期/月"></el-table-column> |
|
||||
<el-table-column prop="value_2" width="348" label="毛利润/元" |
|
||||
sortable="custom"></el-table-column> |
|
||||
</el-table> |
|
||||
</div> |
|
||||
<!-- 触发弹框的按钮 --> |
|
||||
<span v-if="profit_top_list[row.id]['name']" slot="reference" |
|
||||
@click="handleClick(row, $index, 'id')"> |
|
||||
No.1 {{ profit_top_list[row.id]['name'] }} <img v-if="show_detail_index == row.sort" |
|
||||
class="detail_icon" src="@/assets/super/list-detail.svg" alt=""> |
|
||||
</span> |
|
||||
</el-popover> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
</el-table> |
|
||||
<el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange' |
|
||||
:current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper" |
|
||||
:total="tableData.length"> |
|
||||
</el-pagination> |
|
||||
</el-form> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script> |
|
||||
// import GuipForm from '@/components/GuipForm.vue' |
|
||||
import DateSelect from '@/components/super/DateSelect.vue'; |
|
||||
import CustomDropdown from '@/components/CustomDropdown.vue'; |
|
||||
|
|
||||
export default { |
|
||||
// 站点设置 |
|
||||
name: '', |
|
||||
props: [''], |
|
||||
components: { |
|
||||
DateSelect, |
|
||||
CustomDropdown |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
viewDesc:{ |
|
||||
'month':'月份', |
|
||||
'monthTwo':'月份', |
|
||||
'year':'年份', |
|
||||
}, |
|
||||
view:'month', |
|
||||
currentPage: 1, //当前页 |
|
||||
pageSize: 20, //每页的容量 |
|
||||
total: 0, //列表总数 |
|
||||
text:'',//下拉框显示具体文案 |
|
||||
selectedDate:new Date(),//默认当天日期 |
|
||||
options_payword: [ |
|
||||
{ |
|
||||
label: '按篇', value: '0' |
|
||||
}, |
|
||||
{ |
|
||||
label: '按字符', value: '1' |
|
||||
}, |
|
||||
], |
|
||||
options: [ |
|
||||
{ label: '选项1', value: '1' }, |
|
||||
{ label: '选项2', value: '2' }, |
|
||||
{ label: '选项3', value: '3' }, |
|
||||
// 更多选项... |
|
||||
], |
|
||||
filteredOptions: this.options, |
|
||||
tableData: [ |
|
||||
], |
|
||||
tableData1: [], |
|
||||
profit_top_list: { |
|
||||
}, |
|
||||
show_detail_index: 0, |
|
||||
form: { |
|
||||
payword: '0', |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
mounted() { |
|
||||
this.text = this.getNowDate()//初始赋值 |
|
||||
this.getRankingData() |
|
||||
}, |
|
||||
computed: { |
|
||||
}, |
|
||||
methods: { |
|
||||
handleUpdateView(newView) { |
|
||||
this.view = newView; |
|
||||
}, |
|
||||
getNowDate(){ |
|
||||
const now = new Date(); |
|
||||
const year = now.getFullYear(); |
|
||||
const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，补零 |
|
||||
const currentYearMonth = `(${this.viewDesc[this.view]})${year}年${month}月`; |
|
||||
return `${currentYearMonth}` |
|
||||
}, |
|
||||
getDate(dateStr){ |
|
||||
const date = new Date(dateStr); |
|
||||
const year = date.getFullYear(); // 2025 |
|
||||
const month = date.getMonth() + 1; // 3 (表示3月) |
|
||||
if(this.view == 'year'){ |
|
||||
return `(${this.viewDesc[this.view]})${year}年` |
|
||||
}else{ |
|
||||
return `(${this.viewDesc[this.view]})${year}年${month}月` |
|
||||
} |
|
||||
}, |
|
||||
handleDateChange(date) { |
|
||||
this.text = this.getDate(date) |
|
||||
this.selectedDate = date; |
|
||||
localStorage.setItem('date',JSON.stringify(date)) |
|
||||
// 更新数据 |
|
||||
// this.getRankingData() |
|
||||
console.log('日期已更改:', date); |
|
||||
}, |
|
||||
goLookMoreData() { |
|
||||
this.$router.push('/') |
|
||||
}, |
|
||||
closePop(row,type){ |
|
||||
row[type + '_popover'] = false; // 关闭弹框 |
|
||||
|
|
||||
}, |
|
||||
handleClick(row, index, type) { |
|
||||
// 关闭其他行的弹框 |
|
||||
this.tableData.forEach((item, i) => { |
|
||||
if (i !== index) { |
|
||||
item[type + '_popover'] = false; |
|
||||
} |
|
||||
}); |
|
||||
// 打开当前行的弹框 |
|
||||
row[type + '_popover'] = true; |
|
||||
console.log(this.tableData,'this.tableData'); |
|
||||
}, |
|
||||
popshow() { |
|
||||
var ariaEls = document.querySelectorAll('.el-popover') |
|
||||
ariaEls.forEach((item) => { |
|
||||
item.removeAttribute('aria-hidden') |
|
||||
}) |
|
||||
|
|
||||
ariaEls = document.querySelectorAll('.el-radio__original') |
|
||||
ariaEls.forEach((item) => { |
|
||||
item.removeAttribute('aria-hidden') |
|
||||
}) |
|
||||
}, |
|
||||
handleSortChange({ prop, order }) { |
|
||||
this.currentPage = 1; |
|
||||
|
|
||||
let sortBy = 0; |
|
||||
let sortOrder = 0; |
|
||||
if (order == 'ascending') { |
|
||||
sortBy = prop; |
|
||||
sortOrder = 1; |
|
||||
} |
|
||||
if (order == 'descending') { |
|
||||
sortBy = prop; |
|
||||
sortOrder = 2; |
|
||||
} |
|
||||
this.getRankingData({ sortBy: sortBy, sortOrder: sortOrder }) |
|
||||
}, |
|
||||
handleRowHover(row) { |
|
||||
this.show_detail_index = row.sort |
|
||||
}, |
|
||||
getRankingData(obj) { |
|
||||
const that = this |
|
||||
this.$http('POST', this.reqUri + '/super/ajax_get_rank_detail', { |
|
||||
rank_type: 1, |
|
||||
cur_page: that.currentPage, |
|
||||
page_size: that.pageSize, |
|
||||
...obj |
|
||||
}).then(response => { |
|
||||
this.$nextTick(() => { |
|
||||
that.tableData = response.data.list |
|
||||
that.profit_top_list = response.data.top_list |
|
||||
that.total = response.data.total |
|
||||
}) |
|
||||
}) |
|
||||
.catch(error => { |
|
||||
console.error(error, 'error') |
|
||||
}) |
|
||||
}, |
|
||||
// 列筛选 |
|
||||
filterHandler(value, row, column) { |
|
||||
// console.log(value, row, column,'======'); |
|
||||
const property = column['property']; |
|
||||
if (value == 0) { |
|
||||
return row[property] != value |
|
||||
} |
|
||||
return row[property] === value; |
|
||||
}, |
|
||||
// 自定义搜索筛选 |
|
||||
customFilter(keyword, options) { |
|
||||
if (!keyword) return options |
|
||||
return options.filter(item => { |
|
||||
// 自定义筛选逻辑 |
|
||||
return item.label.includes(keyword) || item.value.includes(keyword) |
|
||||
}) |
|
||||
}, |
|
||||
handleSizeChange(val) { |
|
||||
this.pageSize = val |
|
||||
}, |
|
||||
handleCurrentChange(val) { |
|
||||
this.currentPage = val |
|
||||
}, |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
<style scoped lang="scss"> |
|
||||
.demo-wrap { |
|
||||
width: 100%; |
|
||||
letter-spacing: 0.08em; |
|
||||
} |
|
||||
|
|
||||
.detail_icon { |
|
||||
vertical-align: text-top; |
|
||||
} |
|
||||
|
|
||||
::v-deep .el-popover.el-popper { |
|
||||
padding: 20px; |
|
||||
} |
|
||||
.pop-wrap { |
|
||||
// width: 596px; |
|
||||
// height: 320px; |
|
||||
/* 自动布局 */ |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
// padding: 20px; |
|
||||
gap: 20px; |
|
||||
box-sizing: border-box; |
|
||||
|
|
||||
// background: #FFFFFF; |
|
||||
/* 阴影/常规阴影 */ |
|
||||
// box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.16); |
|
||||
.pop-top { |
|
||||
h3 { |
|
||||
/* body/body 1_bold */ |
|
||||
font-family: Microsoft YaHei UI; |
|
||||
font-size: 16px; |
|
||||
font-weight: bold; |
|
||||
line-height: 18px; |
|
||||
letter-spacing: 0.08em; |
|
||||
color: #1D2129; |
|
||||
margin: 0; |
|
||||
|
|
||||
span { |
|
||||
display: inline-block; |
|
||||
margin-left: 12px; |
|
||||
font-size: 14px; |
|
||||
line-height: 18px; |
|
||||
color: #006AFF; |
|
||||
} |
|
||||
} |
|
||||
img{ |
|
||||
width: 20px; |
|
||||
height: 20px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
Loading…
Reference in new issue