|
|
@ -1,59 +1,102 @@ |
|
|
<template> |
|
|
<template> |
|
|
<div class="demo-wrap min-flex-right"> |
|
|
<div class="demo-wrap min-flex-right"> |
|
|
<div class="flex-between"> |
|
|
<div class="flex-between"> |
|
|
<h2>{{pageTitle}}</h2> |
|
|
<h2>{{ pageTitle }}</h2> |
|
|
<CustomDropdown ref="dropdownRef" :placeholder="'（'+viewDesc[this.view]+')'+text" width="280px"> |
|
|
<CustomDropdown ref="dropdownRef" |
|
|
<DateSelect slot="normal" :view="view" v-model="selectedDate" @update-count="handleUpdateView" @change="handleDateChange" /> |
|
|
:placeholder="'（'+viewDesc[this.view]+')'+text" |
|
|
|
|
|
width="280px"> |
|
|
|
|
|
<DateSelect slot="normal" |
|
|
|
|
|
:view="view" |
|
|
|
|
|
v-model="selectedDate" |
|
|
|
|
|
@update-count="handleUpdateView" |
|
|
|
|
|
@change="handleDateChange"/> |
|
|
</CustomDropdown> |
|
|
</CustomDropdown> |
|
|
</div> |
|
|
</div> |
|
|
<div class=" flex-common" id=""> |
|
|
<div class=" flex-common" id=""> |
|
|
<el-form> |
|
|
<el-form> |
|
|
<el-table :data="tableData" style="width: 100%" @sort-change="handleSortChange" @cell-mouse-enter="handleRowHover"> |
|
|
<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="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]"> |
|
|
<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"> |
|
|
<template slot="header"> |
|
|
<el-select class="custom-select" v-model="selectedType" @change="changeRankType"> |
|
|
<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-option v-for="(item,type) in type_select" |
|
|
|
|
|
:key="type" |
|
|
|
|
|
:label="item" |
|
|
|
|
|
:value="type"> |
|
|
|
|
|
</el-option> |
|
|
</el-select> |
|
|
</el-select> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<template slot-scope="scope"> |
|
|
<template slot-scope="scope"> |
|
|
{{ scope.row.name }} |
|
|
{{ scope.row.name }} |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
</el-table-column> |
|
|
</el-table-column> |
|
|
<el-table-column v-else prop="name" :label="type_desc[dataType]" width="150"></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"> |
|
|
<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 }"> |
|
|
<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"> |
|
|
<el-popover v-model="row.id_popover" |
|
|
|
|
|
placement="top" |
|
|
|
|
|
trigger="manual" |
|
|
|
|
|
:ref="`popover-${$index}`" |
|
|
|
|
|
@show="popshow"> |
|
|
|
|
|
|
|
|
<div class="pop-wrap"> |
|
|
<div class="pop-wrap"> |
|
|
<div class="flex-between flex pop-top"> |
|
|
<div class="flex-between flex pop-top"> |
|
|
<h3>{{ text }} {{ row.name }} <span @click="goLookMoreData(row.id)">查看更多</span></h3> |
|
|
<h3> |
|
|
<span class="flex point" @click="closePop(row,'id')">关闭 <img src="@/assets/register/close.svg" alt=""></span> |
|
|
{{ text }} {{ row.name }} |
|
|
|
|
|
<span @click="goLookMoreData(row.id)">查看更多</span> |
|
|
|
|
|
</h3> |
|
|
|
|
|
<span class="flex point" @click="closePop(row,'id')"> |
|
|
|
|
|
关闭<img src="@/assets/register/close.svg"> |
|
|
|
|
|
</span> |
|
|
</div> |
|
|
</div> |
|
|
<el-table :data="tableData1" style="width: 100%"> |
|
|
<el-table :data="tableData1" style="width: 100%"> |
|
|
<el-table-column prop="value_1" width="208" label="日期"></el-table-column> |
|
|
<el-table-column prop="value_1" width="208" label="日期"></el-table-column> |
|
|
|
|
|
|
|
|
<el-table-column width="348" :label="rank_type_desc[dataRank]"> |
|
|
<el-table-column width="348" :label="rank_type_desc[dataRank]"> |
|
|
<template slot-scope="scope"> |
|
|
<template slot-scope="scope"> |
|
|
<div class="flex"> |
|
|
<div class="flex"> |
|
|
{{ scope.row.value_2 }} |
|
|
{{ scope.row.value_2 }} |
|
|
<template v-if="Object.keys(growth_list1).length > 0"> |
|
|
<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]" |
|
|
|
|
|
class="flex growth-text"> |
|
|
<span v-if="growth_list1[scope.row.id].value>0"> |
|
|
<span v-if="growth_list1[scope.row.id].value>0"> |
|
|
<span class="growth-up"> |
|
|
<span class="growth-up"> |
|
|
<img class="edit_icon" src="@/assets/super/growth-up.svg" alt="">{{growth_list1[scope.row.id].value}}% |
|
|
<img class="edit_icon" |
|
|
|
|
|
src="@/assets/super/growth-up.svg"> |
|
|
|
|
|
{{ growth_list1[scope.row.id].value }}% |
|
|
</span>同比上年 |
|
|
</span>同比上年 |
|
|
</span> |
|
|
</span> |
|
|
<span v-if="growth_list1[scope.row.id].value<0"> |
|
|
<span v-if="growth_list1[scope.row.id].value<0"> |
|
|
<span class="growth-down"> |
|
|
<span class="growth-down"> |
|
|
<img class="edit_icon" src="@/assets/super/growth-down.svg" alt="">{{growth_list1[scope.row.id].value}}% |
|
|
<img class="edit_icon" |
|
|
|
|
|
src="@/assets/super/growth-down.svg"> |
|
|
|
|
|
{{ growth_list1[scope.row.id].value }}% |
|
|
</span>同比上年 |
|
|
</span>同比上年 |
|
|
</span> |
|
|
</span> |
|
|
<span v-if="growth_list1[scope.row.id].value==0"> |
|
|
<span v-if="growth_list1[scope.row.id].value==0"> |
|
|
<img class="edit_icon" src="@/assets/super/growth-flat.svg" alt="">同比上年持平 |
|
|
<img class="edit_icon" |
|
|
|
|
|
src="@/assets/super/growth-flat.svg">同比上年持平 |
|
|
</span> |
|
|
</span> |
|
|
</span> |
|
|
</span> |
|
|
<span class="flex growth-text" v-else>上年无数据</span> |
|
|
<span v-else class="flex growth-text">上年无数据</span> |
|
|
</template> |
|
|
</template> |
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
@ -61,29 +104,31 @@ |
|
|
</el-table> |
|
|
</el-table> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex" slot="reference" > |
|
|
<div class="flex" slot="reference"> |
|
|
{{ row[field] }} |
|
|
{{ row[field] }} |
|
|
<template v-if="Object.keys(growth_list).length > 0"> |
|
|
<template v-if="Object.keys(growth_list).length > 0"> |
|
|
<template v-if="growth_list[row.id] && growth_list[row.id][field]"> |
|
|
<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 v-if="growth_list[row.id][field].value > 0" class="growth-text"> |
|
|
<span class="growth-up"> |
|
|
<span class="growth-up"> |
|
|
<img class="edit_icon" src="@/assets/super/growth-up.svg" alt="" /> |
|
|
<img class="edit_icon" src="@/assets/super/growth-up.svg"/> |
|
|
{{ growth_list[row.id][field].value }}% |
|
|
{{ growth_list[row.id][field].value }}% |
|
|
</span>同比上年 |
|
|
</span>同比上年 |
|
|
</span> |
|
|
</span> |
|
|
<span v-else-if="growth_list[row.id][field].value < 0" class="growth-text"> |
|
|
<span v-else-if="growth_list[row.id][field].value < 0" class="growth-text"> |
|
|
<span class="growth-down"> |
|
|
<span class="growth-down"> |
|
|
<img class="edit_icon" src="@/assets/super/growth-down.svg" alt="" /> |
|
|
<img class="edit_icon" src="@/assets/super/growth-down.svg"/> |
|
|
{{ growth_list[row.id][field].value }}% |
|
|
{{ growth_list[row.id][field].value }}% |
|
|
</span>同比上年 |
|
|
</span>同比上年 |
|
|
</span> |
|
|
</span> |
|
|
<span v-else class="growth-text"> |
|
|
<span v-else class="growth-text"> |
|
|
<img class="edit_icon" src="@/assets/super/growth-flat.svg" alt="" />同比上年持平 |
|
|
<img class="edit_icon" src="@/assets/super/growth-flat.svg"/>同比上年持平 |
|
|
</span> |
|
|
</span> |
|
|
</template> |
|
|
</template> |
|
|
<span v-else class="growth-text">上年无数据</span> |
|
|
<span v-else class="growth-text">上年无数据</span> |
|
|
</template> |
|
|
</template> |
|
|
<img @click="handleClick(row, $index, 'id')" v-if="show_detail_index == row.sort" class="detail_icon" src="@/assets/super/list-detail.svg" alt=""> |
|
|
<img v-if="show_detail_index == row.sort" |
|
|
|
|
|
@click="handleClick(row, $index, 'id')" |
|
|
|
|
|
class="detail_icon" src="@/assets/super/list-detail.svg"> |
|
|
</div> |
|
|
</div> |
|
|
</el-popover> |
|
|
</el-popover> |
|
|
</template> |
|
|
</template> |
|
|
@ -94,21 +139,19 @@ |
|
|
<template v-if="growth_list[scope.row.id] && growth_list[scope.row.id][field]"> |
|
|
<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 v-if="growth_list[scope.row.id][field].value > 0" class="growth-text"> |
|
|
<span class="growth-up"> |
|
|
<span class="growth-up"> |
|
|
<img class="edit_icon" src="@/assets/super/growth-up.svg" alt="" /> |
|
|
<img class="edit_icon" src="@/assets/super/growth-up.svg"/> |
|
|
{{ growth_list[scope.row.id][field].value }}% |
|
|
{{ growth_list[scope.row.id][field].value }}% |
|
|
</span> |
|
|
</span>同比上年 |
|
|
同比上年 |
|
|
|
|
|
</span> |
|
|
</span> |
|
|
<span v-else-if="growth_list[scope.row.id][field].value < 0" class="growth-text"> |
|
|
<span v-else-if="growth_list[scope.row.id][field].value < 0" |
|
|
|
|
|
class="growth-text"> |
|
|
<span class="growth-down"> |
|
|
<span class="growth-down"> |
|
|
<img class="edit_icon" src="@/assets/super/growth-down.svg" alt="" /> |
|
|
<img class="edit_icon" src="@/assets/super/growth-down.svg"/> |
|
|
{{ growth_list[scope.row.id][field].value }}% |
|
|
{{ growth_list[scope.row.id][field].value }}% |
|
|
</span> |
|
|
</span>同比上年 |
|
|
同比上年 |
|
|
|
|
|
</span> |
|
|
</span> |
|
|
<span v-else class="growth-text"> |
|
|
<span v-else class="growth-text"> |
|
|
<img class="edit_icon" src="@/assets/super/growth-flat.svg" alt="" /> |
|
|
<img class="edit_icon" src="@/assets/super/growth-flat.svg"/>同比上年持平 |
|
|
同比上年持平 |
|
|
|
|
|
</span> |
|
|
</span> |
|
|
</template> |
|
|
</template> |
|
|
<span v-else class="growth-text">上年无数据</span> |
|
|
<span v-else class="growth-text">上年无数据</span> |
|
|
@ -117,34 +160,37 @@ |
|
|
</template> |
|
|
</template> |
|
|
</el-table-column> |
|
|
</el-table-column> |
|
|
</el-table> |
|
|
</el-table> |
|
|
<el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange' |
|
|
<el-pagination background |
|
|
:current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper" |
|
|
@size-change='handleSizeChange' |
|
|
:total="total"> |
|
|
@current-change='handleCurrentChange' |
|
|
|
|
|
:current-page="currentPage" |
|
|
|
|
|
:page-size=pageSize |
|
|
|
|
|
layout="prev, pager, next,jumper" |
|
|
|
|
|
:total="total"> |
|
|
</el-pagination> |
|
|
</el-pagination> |
|
|
</el-form> |
|
|
</el-form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
<script> |
|
|
<script> |
|
|
// import GuipForm from '@/components/GuipForm.vue' |
|
|
|
|
|
import DateSelect from '@/components/super/DateSelect.vue'; |
|
|
import DateSelect from '@/components/super/DateSelect.vue'; |
|
|
import CustomDropdown from '@/components/CustomDropdown.vue'; |
|
|
import CustomDropdown from '@/components/CustomDropdown.vue'; |
|
|
|
|
|
|
|
|
export default { |
|
|
export default { |
|
|
name: 'rank_batch_list', |
|
|
name: 'rank_batch_list', |
|
|
props: { |
|
|
props: { |
|
|
pageTitle: { |
|
|
pageTitle: { |
|
|
type: String, |
|
|
type: String, |
|
|
default: '' |
|
|
default: '' |
|
|
}, |
|
|
}, |
|
|
rank_type: { |
|
|
rank_type: { |
|
|
type: Number, |
|
|
type: Number, |
|
|
default: 0 |
|
|
default: 0 |
|
|
}, |
|
|
}, |
|
|
type: { |
|
|
type: { |
|
|
type: String, |
|
|
type: String, |
|
|
default: '' |
|
|
default: '' |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
components: { |
|
|
components: { |
|
|
DateSelect, |
|
|
DateSelect, |
|
|
@ -152,37 +198,37 @@ export default { |
|
|
}, |
|
|
}, |
|
|
data() { |
|
|
data() { |
|
|
return { |
|
|
return { |
|
|
viewDesc:{ |
|
|
viewDesc: { |
|
|
'month':'月份', |
|
|
'month': '月份', |
|
|
'monthTwo':'月份', |
|
|
'monthTwo': '月份', |
|
|
'year':'年份', |
|
|
'year': '年份', |
|
|
}, |
|
|
}, |
|
|
rank_type_desc:{ |
|
|
rank_type_desc: { |
|
|
1:'毛利润/元', |
|
|
1: '毛利润/元', |
|
|
2:'订单数', |
|
|
2: '订单数', |
|
|
3:'退单数', |
|
|
3: '退单数', |
|
|
4:'充值金额', |
|
|
4: '充值金额', |
|
|
}, |
|
|
}, |
|
|
type_desc:{ |
|
|
type_desc: { |
|
|
'agent':'代理商昵称', |
|
|
'agent': '代理商昵称', |
|
|
'ver_type':'品牌名称', |
|
|
'ver_type': '品牌名称', |
|
|
'check_type':'服务名称', |
|
|
'check_type': '服务名称', |
|
|
}, |
|
|
}, |
|
|
type_select:{ |
|
|
type_select: { |
|
|
'ver_type':'按品牌名称', |
|
|
'ver_type': '按品牌名称', |
|
|
'check_type':'按服务名称', |
|
|
'check_type': '按服务名称', |
|
|
}, |
|
|
}, |
|
|
selectedType: 'check_type', |
|
|
selectedType: 'check_type', |
|
|
view:'month', |
|
|
view: 'month', |
|
|
labels:['','','',''], |
|
|
labels: ['', '', '', ''], |
|
|
valueFields:['value_1','value_2','value_3','value_4'], |
|
|
valueFields: ['value_1', 'value_2', 'value_3', 'value_4'], |
|
|
currentPage: 1, //当前页 |
|
|
currentPage: 1, //当前页 |
|
|
pageSize: 20, //每页的容量 |
|
|
pageSize: 20, //每页的容量 |
|
|
total: 0, //列表总数 |
|
|
total: 0, //列表总数 |
|
|
sortBy: 4, |
|
|
sortBy: 4, |
|
|
sortOrder: 2, |
|
|
sortOrder: 2, |
|
|
text:'',//下拉框显示具体文案 |
|
|
text: '',//下拉框显示具体文案 |
|
|
selectedDate:new Date(),//默认当天日期 |
|
|
selectedDate: new Date(),//默认当天日期 |
|
|
dataType: '', |
|
|
dataType: '', |
|
|
dataRank: '', |
|
|
dataRank: '', |
|
|
tableData: [], |
|
|
tableData: [], |
|
|
@ -195,46 +241,44 @@ export default { |
|
|
mounted() { |
|
|
mounted() { |
|
|
this.init() |
|
|
this.init() |
|
|
}, |
|
|
}, |
|
|
computed: { |
|
|
computed: {}, |
|
|
}, |
|
|
|
|
|
watch: { |
|
|
watch: { |
|
|
'$route'() { |
|
|
'$route'() { |
|
|
this.init() |
|
|
this.init() |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
methods: { |
|
|
methods: { |
|
|
init(){ |
|
|
init() { |
|
|
this.text = this.getNowDate()//初始赋值 |
|
|
this.text = this.getNowDate() |
|
|
|
|
|
|
|
|
this.dataType = this.type |
|
|
this.dataType = this.type |
|
|
this.dataRank = this.rank_type |
|
|
this.dataRank = this.rank_type |
|
|
|
|
|
|
|
|
this.getRankingData(); // 每次路由变化都重新获取数据 |
|
|
this.getRankingData(); |
|
|
}, |
|
|
}, |
|
|
handleUpdateView(newView) { |
|
|
handleUpdateView(newView) { |
|
|
this.view = newView; |
|
|
this.view = newView; |
|
|
}, |
|
|
}, |
|
|
getNowDate(){ |
|
|
getNowDate() { |
|
|
const now = new Date(); |
|
|
const now = new Date(); |
|
|
const year = now.getFullYear(); |
|
|
const year = now.getFullYear(); |
|
|
const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，补零 |
|
|
const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，补零 |
|
|
const currentYearMonth = `${year}-${month}`; |
|
|
const currentYearMonth = `${year}-${month}`; |
|
|
return `${currentYearMonth}` |
|
|
return `${currentYearMonth}` |
|
|
}, |
|
|
}, |
|
|
getDate(dateStr){ |
|
|
getDate(dateStr) { |
|
|
const date = new Date(dateStr); |
|
|
const date = new Date(dateStr); |
|
|
const year = date.getFullYear(); // 2025 |
|
|
const year = date.getFullYear(); // 2025 |
|
|
const month = date.getMonth() + 1; // 3 (表示3月) |
|
|
const month = date.getMonth() + 1; // 3 (表示3月) |
|
|
if(this.view == 'year'){ |
|
|
if (this.view == 'year') { |
|
|
return `${year}` |
|
|
return `${year}` |
|
|
}else{ |
|
|
} else { |
|
|
return `${year}-${month}` |
|
|
return `${year}-${month}` |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
handleDateChange(date) { |
|
|
handleDateChange(date) { |
|
|
this.text = this.getDate(date) |
|
|
this.text = this.getDate(date) |
|
|
this.selectedDate = date; |
|
|
this.selectedDate = date; |
|
|
localStorage.setItem('date',JSON.stringify(date)) |
|
|
localStorage.setItem('date', JSON.stringify(date)) |
|
|
|
|
|
|
|
|
this.$refs.dropdownRef.closeDropdown(); |
|
|
this.$refs.dropdownRef.closeDropdown(); |
|
|
|
|
|
|
|
|
@ -245,21 +289,21 @@ export default { |
|
|
let query = {} |
|
|
let query = {} |
|
|
query.date = this.text |
|
|
query.date = this.text |
|
|
query.rank_type = this.dataRank |
|
|
query.rank_type = this.dataRank |
|
|
if(this.dataType == 'agent') { |
|
|
if (this.dataType == 'agent') { |
|
|
query.aid = id |
|
|
query.aid = id |
|
|
} |
|
|
} |
|
|
if(this.dataType == 'ver_type') { |
|
|
if (this.dataType == 'ver_type') { |
|
|
query.ver_type = id |
|
|
query.ver_type = id |
|
|
} |
|
|
} |
|
|
if(this.dataType == 'check_type') { |
|
|
if (this.dataType == 'check_type') { |
|
|
query.check_type = id |
|
|
query.check_type = id |
|
|
} |
|
|
} |
|
|
window.open(this.$router.resolve({ |
|
|
window.open(this.$router.resolve({ |
|
|
path: '/super/ranking/detail', |
|
|
path: '/super/ranking/detail', |
|
|
query: query |
|
|
query: query |
|
|
}).href, '_blank') |
|
|
}).href, '_blank') |
|
|
}, |
|
|
}, |
|
|
closePop(row,type){ |
|
|
closePop(row, type) { |
|
|
row[type + '_popover'] = false; // 关闭弹框 |
|
|
row[type + '_popover'] = false; // 关闭弹框 |
|
|
}, |
|
|
}, |
|
|
handleClick(row, index, type) { |
|
|
handleClick(row, index, type) { |
|
|
@ -273,14 +317,14 @@ export default { |
|
|
row[type + '_popover'] = true; |
|
|
row[type + '_popover'] = true; |
|
|
|
|
|
|
|
|
let obj = {} |
|
|
let obj = {} |
|
|
if(this.dataType == 'agent') { |
|
|
if (this.dataType == 'agent') { |
|
|
obj.aid = row.id |
|
|
obj.aid = row.id |
|
|
} |
|
|
} |
|
|
if(this.dataType == 'ver_type') { |
|
|
if (this.dataType == 'ver_type') { |
|
|
obj.ver_type = row.id |
|
|
obj.ver_type = row.id |
|
|
} |
|
|
} |
|
|
if(this.dataType == 'check_type') { |
|
|
if (this.dataType == 'check_type') { |
|
|
obj.check_type = row.id |
|
|
obj.check_type = row.id |
|
|
} |
|
|
} |
|
|
this.getRankingDetail(obj); |
|
|
this.getRankingDetail(obj); |
|
|
}, |
|
|
}, |
|
|
@ -295,7 +339,7 @@ export default { |
|
|
item.removeAttribute('aria-hidden') |
|
|
item.removeAttribute('aria-hidden') |
|
|
}) |
|
|
}) |
|
|
}, |
|
|
}, |
|
|
handleSortChange({ prop, order }) { |
|
|
handleSortChange({prop, order}) { |
|
|
this.sortBy = 4; |
|
|
this.sortBy = 4; |
|
|
this.sortOrder = 2; |
|
|
this.sortOrder = 2; |
|
|
if (order == 'ascending') { |
|
|
if (order == 'ascending') { |
|
|
@ -312,103 +356,109 @@ export default { |
|
|
handleRowHover(row) { |
|
|
handleRowHover(row) { |
|
|
this.show_detail_index = row.sort |
|
|
this.show_detail_index = row.sort |
|
|
}, |
|
|
}, |
|
|
changeRankType(){ |
|
|
changeRankType() { |
|
|
this.dataType = this.selectedType |
|
|
this.dataType = this.selectedType |
|
|
this.getRankingData() |
|
|
this.getRankingData() |
|
|
}, |
|
|
}, |
|
|
getRankingData() { |
|
|
getRankingData() { |
|
|
this.setLabelText(); |
|
|
this.setLabelText(); |
|
|
|
|
|
|
|
|
if(this.dataType == 'agent') { |
|
|
if (this.dataType == 'agent') { |
|
|
this.getAgentRanking() |
|
|
if (this.dataRank == 4) { |
|
|
|
|
|
this.getAgentRecharge() |
|
|
|
|
|
} else { |
|
|
|
|
|
this.getAgentRanking() |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
if(this.dataType == 'ver_type') { |
|
|
if (this.dataType == 'ver_type') { |
|
|
this.getVerRanking() |
|
|
this.getVerRanking() |
|
|
} |
|
|
} |
|
|
if(this.dataType == 'check_type') { |
|
|
if (this.dataType == 'check_type') { |
|
|
this.getTypeRanking() |
|
|
this.getTypeRanking() |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
setLabelText(){ |
|
|
setLabelText() { |
|
|
const date = new Date(this.text); |
|
|
const date = new Date(this.text); |
|
|
const year = date.getFullYear(); // 2025 |
|
|
const year = date.getFullYear(); |
|
|
const month = date.getMonth() + 1; // 3 (表示3月) |
|
|
const month = date.getMonth() + 1; |
|
|
|
|
|
|
|
|
this.labels = []; |
|
|
this.labels = []; |
|
|
if (this.view === 'year') { |
|
|
if (this.view === 'year') { |
|
|
for (let i = 3; i >= 0; i--) { |
|
|
for (let i = 3; i >= 0; i--) { |
|
|
this.labels.push((year - i) + '年' + this.rank_type_desc[this.dataRank]); |
|
|
this.labels.push((year - i) + '年' + this.rank_type_desc[this.dataRank]); |
|
|
} |
|
|
} |
|
|
} else { |
|
|
} else { |
|
|
const monthLabels = []; |
|
|
const monthLabels = []; |
|
|
for (let i = 3; i >= 0; i--) { |
|
|
for (let i = 3; i >= 0; i--) { |
|
|
let m = month - i; |
|
|
let m = month - i; |
|
|
if (m <= 0) m += 12; |
|
|
if (m <= 0) m += 12; |
|
|
monthLabels.push(m + '月' + this.rank_type_desc[this.dataRank]); |
|
|
monthLabels.push(m + '月' + this.rank_type_desc[this.dataRank]); |
|
|
} |
|
|
} |
|
|
this.labels = monthLabels; |
|
|
this.labels = monthLabels; |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
getAgentRanking() { |
|
|
getAgentRanking() { |
|
|
|
|
|
//代理商排行 |
|
|
const that = this |
|
|
const that = this |
|
|
//充值排行 |
|
|
this.$http('POST', '/supernew/ajax_get_agent_batch_list', { |
|
|
if(that.dataRank == 4){ |
|
|
|
|
|
this.$http('POST', '/supernew/ajax_get_rank_recharge', { |
|
|
|
|
|
date: that.text, |
|
|
date: that.text, |
|
|
|
|
|
rank_type: that.dataRank, |
|
|
sortBy: that.sortBy, |
|
|
sortBy: that.sortBy, |
|
|
sortOrder: that.sortOrder, |
|
|
sortOrder: that.sortOrder, |
|
|
cur_page: that.currentPage, |
|
|
cur_page: that.currentPage, |
|
|
page_size: that.pageSize, |
|
|
page_size: that.pageSize, |
|
|
}).then(response => { |
|
|
}).then(response => { |
|
|
this.$nextTick(() => { |
|
|
this.$nextTick(() => { |
|
|
that.tableData = response.data.list |
|
|
that.tableData = response.data.list |
|
|
that.growth_list = response.data.growth_list |
|
|
that.growth_list = response.data.growth_list |
|
|
that.total = response.data.total |
|
|
that.total = response.data.total |
|
|
}) |
|
|
}) |
|
|
}).catch(error => { |
|
|
}).catch(error => { |
|
|
console.error(error, 'error') |
|
|
console.error(error, 'error') |
|
|
}) |
|
|
}) |
|
|
return |
|
|
}, |
|
|
} |
|
|
getAgentRecharge() { |
|
|
|
|
|
//充值排行 |
|
|
this.$http('POST', '/supernew/ajax_get_agent_batch_list', { |
|
|
const that = this |
|
|
|
|
|
this.$http('POST', '/supernew/ajax_get_rank_recharge', { |
|
|
date: that.text, |
|
|
date: that.text, |
|
|
rank_type: that.dataRank, |
|
|
|
|
|
sortBy: that.sortBy, |
|
|
sortBy: that.sortBy, |
|
|
sortOrder: that.sortOrder, |
|
|
sortOrder: that.sortOrder, |
|
|
cur_page: that.currentPage, |
|
|
cur_page: that.currentPage, |
|
|
page_size: that.pageSize, |
|
|
page_size: that.pageSize, |
|
|
}).then(response => { |
|
|
}).then(response => { |
|
|
this.$nextTick(() => { |
|
|
this.$nextTick(() => { |
|
|
that.tableData = response.data.list |
|
|
that.tableData = response.data.list |
|
|
that.growth_list = response.data.growth_list |
|
|
that.growth_list = response.data.growth_list |
|
|
that.total = response.data.total |
|
|
that.total = response.data.total |
|
|
}) |
|
|
}) |
|
|
}).catch(error => { |
|
|
}).catch(error => { |
|
|
console.error(error, 'error') |
|
|
console.error(error, 'error') |
|
|
}) |
|
|
}) |
|
|
}, |
|
|
}, |
|
|
getVerRanking() { |
|
|
getVerRanking() { |
|
|
const that = this |
|
|
//品牌排行 |
|
|
this.$http('POST', '/supernew/ajax_get_ver_batch_list', { |
|
|
const that = this |
|
|
date: that.text, |
|
|
this.$http('POST', '/supernew/ajax_get_ver_batch_list', { |
|
|
rank_type: that.dataRank, |
|
|
date: that.text, |
|
|
sortBy: that.sortBy, |
|
|
rank_type: that.dataRank, |
|
|
sortOrder: that.sortOrder, |
|
|
sortBy: that.sortBy, |
|
|
cur_page: that.currentPage, |
|
|
sortOrder: that.sortOrder, |
|
|
page_size: that.pageSize, |
|
|
cur_page: that.currentPage, |
|
|
}).then(response => { |
|
|
page_size: that.pageSize, |
|
|
this.$nextTick(() => { |
|
|
}).then(response => { |
|
|
that.tableData = response.data.list |
|
|
this.$nextTick(() => { |
|
|
that.top_list = response.data.top_list |
|
|
that.tableData = response.data.list |
|
|
that.growth_list = response.data.growth_list |
|
|
that.top_list = response.data.top_list |
|
|
that.total = response.data.total |
|
|
that.growth_list = response.data.growth_list |
|
|
}) |
|
|
that.total = response.data.total |
|
|
}).catch(error => { |
|
|
}) |
|
|
console.error(error, 'error') |
|
|
}).catch(error => { |
|
|
}) |
|
|
console.error(error, 'error') |
|
|
|
|
|
}) |
|
|
}, |
|
|
}, |
|
|
getTypeRanking() { |
|
|
getTypeRanking() { |
|
|
|
|
|
//产品排行 |
|
|
const that = this |
|
|
const that = this |
|
|
this.$http('POST', '/supernew/ajax_get_type_batch_list', { |
|
|
this.$http('POST', '/supernew/ajax_get_type_batch_list', { |
|
|
date: that.text, |
|
|
date: that.text, |
|
|
@ -419,13 +469,13 @@ export default { |
|
|
page_size: that.pageSize, |
|
|
page_size: that.pageSize, |
|
|
}).then(response => { |
|
|
}).then(response => { |
|
|
this.$nextTick(() => { |
|
|
this.$nextTick(() => { |
|
|
that.tableData = response.data.list |
|
|
that.tableData = response.data.list |
|
|
that.top_list = response.data.top_list |
|
|
that.top_list = response.data.top_list |
|
|
that.growth_list = response.data.growth_list |
|
|
that.growth_list = response.data.growth_list |
|
|
that.total = response.data.total |
|
|
that.total = response.data.total |
|
|
}) |
|
|
}) |
|
|
}).catch(error => { |
|
|
}).catch(error => { |
|
|
console.error(error, 'error') |
|
|
console.error(error, 'error') |
|
|
}) |
|
|
}) |
|
|
}, |
|
|
}, |
|
|
getRankingDetail(obj) { |
|
|
getRankingDetail(obj) { |
|
|
@ -459,32 +509,40 @@ export default { |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</script> |
|
|
<style scoped lang="scss"> |
|
|
<style scoped lang="scss"> |
|
|
.growth-up{ |
|
|
.growth-up { |
|
|
padding: 0 5px; |
|
|
padding: 0 5px; |
|
|
color:#22C55E; |
|
|
color: #22C55E; |
|
|
} |
|
|
} |
|
|
.growth-down{ |
|
|
|
|
|
|
|
|
.growth-down { |
|
|
padding: 0 5px; |
|
|
padding: 0 5px; |
|
|
color:#EF4444; |
|
|
color: #EF4444; |
|
|
} |
|
|
} |
|
|
.growth-text{ |
|
|
|
|
|
color:#9CA3AF; |
|
|
.growth-text { |
|
|
|
|
|
color: #9CA3AF; |
|
|
padding-left: 5px; |
|
|
padding-left: 5px; |
|
|
} |
|
|
} |
|
|
.edit_icon{ |
|
|
|
|
|
|
|
|
.edit_icon { |
|
|
padding: 0 5px; |
|
|
padding: 0 5px; |
|
|
vertical-align: middle; |
|
|
vertical-align: middle; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.demo-wrap { |
|
|
.demo-wrap { |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
letter-spacing: 0.08em; |
|
|
letter-spacing: 0.08em; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.custom-select { |
|
|
.custom-select { |
|
|
width: 120px; |
|
|
width: 210px; |
|
|
border: none; |
|
|
border: none; |
|
|
border-radius: 0; |
|
|
border-radius: 0; |
|
|
font-size: 14px; |
|
|
font-size: 14px; |
|
|
|
|
|
line-height: 18px; |
|
|
|
|
|
height: 30px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.custom-select ::v-deep(.el-input__inner) { |
|
|
.custom-select ::v-deep(.el-input__inner) { |
|
|
background: none; |
|
|
background: none; |
|
|
border: 1px solid transparent; |
|
|
border: 1px solid transparent; |
|
|
@ -495,58 +553,89 @@ export default { |
|
|
font-weight: bold; |
|
|
font-weight: bold; |
|
|
padding: 0; |
|
|
padding: 0; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.custom-select ::v-deep(.el-input:focus-within) { |
|
|
.custom-select ::v-deep(.el-input:focus-within) { |
|
|
background: none; |
|
|
background: none; |
|
|
border-color: #F5F7FA!important; |
|
|
border-color: #F5F7FA !important; |
|
|
border-radius: 0; |
|
|
border-radius: 0; |
|
|
box-shadow: none; |
|
|
box-shadow: none; |
|
|
outline:none; |
|
|
outline: none; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.el-select-dropdown__item { |
|
|
|
|
|
color: #1E2226; |
|
|
|
|
|
margin: 0 12px; |
|
|
|
|
|
padding: 0 12px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.el-select-dropdown__item:first-child { |
|
|
|
|
|
margin-top: 6px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.el-select-dropdown__item:last-child { |
|
|
|
|
|
margin-bottom: 6px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.el-select-dropdown__item:hover { |
|
|
|
|
|
background: #F6F7FA; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.el-select-dropdown__item.selected { |
|
|
|
|
|
font-weight: normal; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.el-select-dropdown__item.selected::after { |
|
|
|
|
|
content: ""; |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
top: 50%; |
|
|
|
|
|
right: 10px; |
|
|
|
|
|
transform: translateY(-50%); |
|
|
|
|
|
width: 16px; |
|
|
|
|
|
height: 16px; |
|
|
|
|
|
background-image: url('../../../assets/super/select-active.svg'); |
|
|
|
|
|
background-size: contain; |
|
|
|
|
|
background-repeat: no-repeat; |
|
|
|
|
|
opacity: 1; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.detail_icon { |
|
|
.detail_icon { |
|
|
vertical-align: text-top; |
|
|
vertical-align: text-top; |
|
|
padding-left: 5px; |
|
|
padding-left: 5px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
::v-deep .el-popover.el-popper { |
|
|
::v-deep .el-popover.el-popper { |
|
|
padding: 20px; |
|
|
padding: 20px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.pop-wrap { |
|
|
.pop-wrap { |
|
|
// width: 596px; |
|
|
display: flex; |
|
|
// height: 320px; |
|
|
flex-direction: column; |
|
|
/* 自动布局 */ |
|
|
gap: 20px; |
|
|
display: flex; |
|
|
box-sizing: border-box; |
|
|
flex-direction: column; |
|
|
|
|
|
// padding: 20px; |
|
|
.pop-top { |
|
|
gap: 20px; |
|
|
h3 { |
|
|
box-sizing: border-box; |
|
|
font-family: Microsoft YaHei UI; |
|
|
|
|
|
font-size: 16px; |
|
|
// background: #FFFFFF; |
|
|
font-weight: bold; |
|
|
/* 阴影/常规阴影 */ |
|
|
line-height: 18px; |
|
|
// box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.16); |
|
|
letter-spacing: 0.08em; |
|
|
.pop-top { |
|
|
color: #1D2129; |
|
|
h3 { |
|
|
margin: 0; |
|
|
/* body/body 1_bold */ |
|
|
|
|
|
font-family: Microsoft YaHei UI; |
|
|
span { |
|
|
font-size: 16px; |
|
|
display: inline-block; |
|
|
font-weight: bold; |
|
|
margin-left: 12px; |
|
|
line-height: 18px; |
|
|
font-size: 14px; |
|
|
letter-spacing: 0.08em; |
|
|
line-height: 18px; |
|
|
color: #1D2129; |
|
|
color: #006AFF; |
|
|
margin: 0; |
|
|
} |
|
|
|
|
|
} |
|
|
span { |
|
|
|
|
|
display: inline-block; |
|
|
img { |
|
|
margin-left: 12px; |
|
|
width: 20px; |
|
|
font-size: 14px; |
|
|
height: 20px; |
|
|
line-height: 18px; |
|
|
|
|
|
color: #006AFF; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
img{ |
|
|
|
|
|
width: 20px; |
|
|
|
|
|
height: 20px; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</style> |
pengda
3 months ago
