|
|
@ -25,7 +25,7 @@ |
|
|
v-if="(dataRank == 1 || dataRank == 2) && (dataType == 'ver_type' || dataType == 'check_type')" |
|
|
v-if="(dataRank == 1 || dataRank == 2) && (dataType == 'ver_type' || dataType == 'check_type')" |
|
|
prop="name" |
|
|
prop="name" |
|
|
:key="selectedType" |
|
|
:key="selectedType" |
|
|
:label="type_select[selectedType]"> |
|
|
:label="type_select[selectedType]" width="200"> |
|
|
|
|
|
|
|
|
<template slot="header"> |
|
|
<template slot="header"> |
|
|
<el-select class="custom-select" popper-class="custom-select-dropdown" v-model="selectedType" @change="changeRankType"> |
|
|
<el-select class="custom-select" popper-class="custom-select-dropdown" v-model="selectedType" @change="changeRankType"> |
|
|
@ -46,10 +46,11 @@ |
|
|
|
|
|
|
|
|
<el-table-column v-for="(field, index) in valueFields" |
|
|
<el-table-column v-for="(field, index) in valueFields" |
|
|
:key="field" |
|
|
:key="field" |
|
|
:label="labels[index]" |
|
|
:label="labels[index] + (index == 3 ? current_month : '')" |
|
|
:prop="String(index + 1)" |
|
|
:prop="String(index + 1)" |
|
|
sortable="custom"> |
|
|
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" |
|
|
<el-popover v-model="row.id_popover" |
|
|
placement="top" |
|
|
placement="top" |
|
|
@ -68,35 +69,15 @@ |
|
|
</span> |
|
|
</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="200" label="日期"></el-table-column> |
|
|
|
|
|
|
|
|
<el-table-column width="348" :label="rank_type_desc[dataRank]"> |
|
|
<el-table-column width="200" :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 v-if="growth_list1[scope.row.id]" |
|
|
<GrowthText :value="growth_list1[scope.row.id] ? growth_list1[scope.row.id].value : false" |
|
|
class="flex growth-text"> |
|
|
:prop="'growth'+index"/> |
|
|
<span v-if="growth_list1[scope.row.id].value>0"> |
|
|
|
|
|
<span class="growth-up"> |
|
|
|
|
|
<img class="edit_icon" |
|
|
|
|
|
src="@/assets/super/growth-up.svg"> |
|
|
|
|
|
{{ 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"> |
|
|
|
|
|
{{ 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">同比上年持平 |
|
|
|
|
|
</span> |
|
|
|
|
|
</span> |
|
|
|
|
|
<span v-else class="flex growth-text">上年无数据</span> |
|
|
|
|
|
</template> |
|
|
</template> |
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
@ -106,59 +87,63 @@ |
|
|
|
|
|
|
|
|
<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="view === 'month' && (index != 3 || current_month == '')"> |
|
|
<template v-if="growth_list[row.id] && growth_list[row.id][field]"> |
|
|
<GrowthText :value="growth_list[row.id] && growth_list[row.id][field] ? growth_list[row.id][field].value : false" |
|
|
<span v-if="growth_list[row.id][field].value > 0" class="growth-text"> |
|
|
:prop="'growth'+index"/> |
|
|
<span class="growth-up"> |
|
|
|
|
|
<img class="edit_icon" src="@/assets/super/growth-up.svg"/> |
|
|
|
|
|
{{ 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"/> |
|
|
|
|
|
{{ growth_list[row.id][field].value }}% |
|
|
|
|
|
</span>同比上年 |
|
|
|
|
|
</span> |
|
|
|
|
|
<span v-else class="growth-text"> |
|
|
|
|
|
<img class="edit_icon" src="@/assets/super/growth-flat.svg"/>同比上年持平 |
|
|
|
|
|
</span> |
|
|
|
|
|
</template> |
|
|
|
|
|
<span v-else class="growth-text">上年无数据</span> |
|
|
|
|
|
</template> |
|
|
</template> |
|
|
<img v-if="show_detail_index == row.sort" |
|
|
<HoverImage v-if="show_detail_index == row.sort && row[field] > 0" |
|
|
@click="handleClick(row, $index, 'id')" |
|
|
@click="handleClick(row, $index, 'id')" |
|
|
class="detail_icon" src="@/assets/super/list-detail.svg"> |
|
|
:normal="require('@/assets/super/list-detail.svg')" |
|
|
|
|
|
:hover="require('@/assets/super/list-detail-hover.svg')"/> |
|
|
</div> |
|
|
</div> |
|
|
</el-popover> |
|
|
</el-popover> |
|
|
</template> |
|
|
</template> |
|
|
<template v-else slot-scope="scope"> |
|
|
<template v-else slot-scope="scope"> |
|
|
<div class="flex"> |
|
|
<div class="flex"> |
|
|
{{ scope.row[field] }} |
|
|
{{ scope.row[field] }} |
|
|
<template v-if="Object.keys(growth_list).length > 0"> |
|
|
<template v-if="view === 'month' && (index != 3 || current_month == '')"> |
|
|
<template v-if="growth_list[scope.row.id] && growth_list[scope.row.id][field]"> |
|
|
<GrowthText :value="growth_list[scope.row.id] && growth_list[scope.row.id][field] ? growth_list[scope.row.id][field].value : false" |
|
|
<span v-if="growth_list[scope.row.id][field].value > 0" class="growth-text"> |
|
|
:prop="'growth'+index"/> |
|
|
<span class="growth-up"> |
|
|
|
|
|
<img class="edit_icon" src="@/assets/super/growth-up.svg"/> |
|
|
|
|
|
{{ 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"/> |
|
|
|
|
|
{{ 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"/>同比上年持平 |
|
|
|
|
|
</span> |
|
|
|
|
|
</template> |
|
|
|
|
|
<span v-else class="growth-text">上年无数据</span> |
|
|
|
|
|
</template> |
|
|
</template> |
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
</el-table-column> |
|
|
</el-table-column> |
|
|
|
|
|
|
|
|
|
|
|
<!--产品利润排行展示代理商排行--> |
|
|
|
|
|
<el-table-column v-if="dataRank == 1 && (dataType == 'ver_type' || dataType == 'check_type')" key="top" prop="top" :label="'代理商排行'+current_month"> |
|
|
|
|
|
<template v-slot="{ row, $index }"> |
|
|
|
|
|
<el-popover v-model="row.id_popover_2" |
|
|
|
|
|
placement="top" |
|
|
|
|
|
trigger="manual" |
|
|
|
|
|
:ref="`popover_2-${$index}`" |
|
|
|
|
|
@show="popshow"> |
|
|
|
|
|
<div class="pop-wrap"> |
|
|
|
|
|
<div class="flex-between flex pop-top"> |
|
|
|
|
|
<h3> |
|
|
|
|
|
{{ row.name }} 代理商排行 |
|
|
|
|
|
<span @click="goLookMoreRank(row.id)">查看更多</span> |
|
|
|
|
|
</h3> |
|
|
|
|
|
<span class="flex point" @click="closePop(row,'id')"> |
|
|
|
|
|
关闭<img src="@/assets/register/close.svg"> |
|
|
|
|
|
</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="200" label="代理商"></el-table-column> |
|
|
|
|
|
<el-table-column prop="value_1" width="200" label="销售额"></el-table-column> |
|
|
|
|
|
</el-table> |
|
|
|
|
|
</div> |
|
|
|
|
|
<span v-if="top_list[row.id]" slot="reference"> |
|
|
|
|
|
No.1 {{ top_list[row.id]['name'] }} |
|
|
|
|
|
<HoverImage v-if="show_detail_index == row.sort" |
|
|
|
|
|
@click="handleClick2(row, $index, 'id')" |
|
|
|
|
|
:normal="require('@/assets/super/list-detail.svg')" |
|
|
|
|
|
:hover="require('@/assets/super/list-detail-hover.svg')"/> |
|
|
|
|
|
</span> |
|
|
|
|
|
<span v-else slot="reference">暂无排行</span> |
|
|
|
|
|
</el-popover> |
|
|
|
|
|
</template> |
|
|
|
|
|
</el-table-column> |
|
|
</el-table> |
|
|
</el-table> |
|
|
<el-pagination background |
|
|
<el-pagination background |
|
|
@size-change='handleSizeChange' |
|
|
@size-change='handleSizeChange' |
|
|
@ -174,6 +159,8 @@ |
|
|
</template> |
|
|
</template> |
|
|
<script> |
|
|
<script> |
|
|
import DateSelect from '@/components/super/DateSelect.vue'; |
|
|
import DateSelect from '@/components/super/DateSelect.vue'; |
|
|
|
|
|
import HoverImage from '@/components/super/HoverImage.vue'; |
|
|
|
|
|
import GrowthText from '@/components/super/GrowthText.vue'; |
|
|
import CustomDropdown from '@/components/CustomDropdown.vue'; |
|
|
import CustomDropdown from '@/components/CustomDropdown.vue'; |
|
|
|
|
|
|
|
|
export default { |
|
|
export default { |
|
|
@ -193,6 +180,8 @@ export default { |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
components: { |
|
|
components: { |
|
|
|
|
|
HoverImage, |
|
|
|
|
|
GrowthText, |
|
|
DateSelect, |
|
|
DateSelect, |
|
|
CustomDropdown |
|
|
CustomDropdown |
|
|
}, |
|
|
}, |
|
|
@ -221,6 +210,7 @@ export default { |
|
|
selectedType: 'check_type', |
|
|
selectedType: 'check_type', |
|
|
view: 'month', |
|
|
view: 'month', |
|
|
labels: ['', '', '', ''], |
|
|
labels: ['', '', '', ''], |
|
|
|
|
|
current_month:'', |
|
|
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, //每页的容量 |
|
|
@ -232,6 +222,7 @@ export default { |
|
|
dataType: '', |
|
|
dataType: '', |
|
|
dataRank: '', |
|
|
dataRank: '', |
|
|
tableData: [], |
|
|
tableData: [], |
|
|
|
|
|
top_list: [], |
|
|
growth_list: [], |
|
|
growth_list: [], |
|
|
tableData1: [], |
|
|
tableData1: [], |
|
|
growth_list1: [], |
|
|
growth_list1: [], |
|
|
@ -305,12 +296,33 @@ export default { |
|
|
query: query |
|
|
query: query |
|
|
}).href, '_blank') |
|
|
}).href, '_blank') |
|
|
}, |
|
|
}, |
|
|
|
|
|
goLookMoreRank(id) { |
|
|
|
|
|
let query = {} |
|
|
|
|
|
query.date = this.text |
|
|
|
|
|
query.rank_type = this.dataRank |
|
|
|
|
|
query.type = 'agent' |
|
|
|
|
|
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/list', |
|
|
|
|
|
query: query |
|
|
|
|
|
}).href, '_blank') |
|
|
|
|
|
}, |
|
|
closePop(row, type) { |
|
|
closePop(row, type) { |
|
|
row[type + '_popover'] = false; // 关闭弹框 |
|
|
row[type + '_popover'] = false; |
|
|
|
|
|
row[type + '_popover_2'] = false; |
|
|
}, |
|
|
}, |
|
|
handleClick(row, index, type) { |
|
|
handleClick(row, index, type) { |
|
|
// 关闭其他行的弹框 |
|
|
// 关闭其他行的弹框 |
|
|
this.tableData.forEach((item, i) => { |
|
|
this.tableData.forEach((item, i) => { |
|
|
|
|
|
item[type + '_popover_2'] = false; |
|
|
if (i !== index) { |
|
|
if (i !== index) { |
|
|
item[type + '_popover'] = false; |
|
|
item[type + '_popover'] = false; |
|
|
} |
|
|
} |
|
|
@ -330,6 +342,29 @@ export default { |
|
|
} |
|
|
} |
|
|
this.getRankingDetail(obj); |
|
|
this.getRankingDetail(obj); |
|
|
}, |
|
|
}, |
|
|
|
|
|
handleClick2(row, index, type) { |
|
|
|
|
|
// 关闭其他行的弹框 |
|
|
|
|
|
this.tableData.forEach((item, i) => { |
|
|
|
|
|
item[type + '_popover'] = false; |
|
|
|
|
|
if (i !== index) { |
|
|
|
|
|
item[type + '_popover_2'] = false; |
|
|
|
|
|
} |
|
|
|
|
|
}); |
|
|
|
|
|
// 打开当前行的弹框 |
|
|
|
|
|
row[type + '_popover_2'] = 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.getRankingList(obj); |
|
|
|
|
|
}, |
|
|
popshow() { |
|
|
popshow() { |
|
|
var ariaEls = document.querySelectorAll('.el-popover') |
|
|
var ariaEls = document.querySelectorAll('.el-popover') |
|
|
ariaEls.forEach((item) => { |
|
|
ariaEls.forEach((item) => { |
|
|
@ -380,6 +415,14 @@ export default { |
|
|
const year = date.getFullYear(); |
|
|
const year = date.getFullYear(); |
|
|
const month = date.getMonth() + 1; |
|
|
const month = date.getMonth() + 1; |
|
|
|
|
|
|
|
|
|
|
|
const currentYear = new Date().getFullYear(); |
|
|
|
|
|
const currentMonth = new Date().getMonth() + 1; |
|
|
|
|
|
|
|
|
|
|
|
this.current_month = ''; |
|
|
|
|
|
if(this.view === 'month' && year == currentYear && month == currentMonth){ |
|
|
|
|
|
this.current_month = '(当月)'; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
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--) { |
|
|
@ -390,6 +433,7 @@ export default { |
|
|
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; |
|
|
@ -484,6 +528,24 @@ export default { |
|
|
console.error(error, 'error') |
|
|
console.error(error, 'error') |
|
|
}) |
|
|
}) |
|
|
}, |
|
|
}, |
|
|
|
|
|
getRankingList(obj) { |
|
|
|
|
|
const that = this |
|
|
|
|
|
that.tableData1 = [] |
|
|
|
|
|
that.growth_list1 = [] |
|
|
|
|
|
this.$http('POST', '/supernew/ajax_get_agent_rank_list', { |
|
|
|
|
|
date: that.text, |
|
|
|
|
|
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') |
|
|
|
|
|
}) |
|
|
|
|
|
}, |
|
|
handleSizeChange(val) { |
|
|
handleSizeChange(val) { |
|
|
this.pageSize = val |
|
|
this.pageSize = val |
|
|
this.getRankingData() |
|
|
this.getRankingData() |
|
|
|
