|
|
|
@ -1,87 +1,67 @@ |
|
|
|
<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"/> |
|
|
|
<div class="flex-between flex-end pagetitle"> |
|
|
|
<h4>{{ pageTitle }}</h4> |
|
|
|
<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 v-if="dataRank == 1 && (dataType == 'ver_type' || dataType == 'check_type')" style="margin-bottom: 20px;text-align: left"> |
|
|
|
<el-alert type="info" :closable="false" show-icon> |
|
|
|
<template #title> |
|
|
|
未计成本 |
|
|
|
</template> |
|
|
|
<div style="margin-top: 8px; line-height: 1.6; font-size: 14px; color: #606266;"> |
|
|
|
<template v-if="dataType == 'ver_type'"> |
|
|
|
1. AI（服务器成本） <span v-if="view == 'year'" style="color:red;">2025年（含）后计入成本</span><br /> |
|
|
|
2. Turnitin <span v-if="view == 'year'" style="color:red;">2025年（含）后计入成本</span><br /> |
|
|
|
3. 学术（知网PMLC，硕博VIP）<span v-if="view == 'year'" style="color:red;">2025年（含）后计入成本</span><br /> |
|
|
|
</template> |
|
|
|
<template v-if="dataType == 'check_type'"> |
|
|
|
1. AI（服务器成本）<br /> |
|
|
|
2. Turnitin国际版、TurnitinUK版、Turnitin国际版+AI<br /> |
|
|
|
3. 知网PMLC，硕博VIP <span v-if="view == 'year'" style="color:red;">2025年（含）后计入成本</span><br /> |
|
|
|
</template> |
|
|
|
<div v-if="dataRank == 1 && (dataType == 'ver_type' || dataType == 'check_type')" |
|
|
|
style="margin-bottom: 20px;text-align: left" class="beforeNotice"> |
|
|
|
<p class="noticeTop flex"><img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 未计成本</p> |
|
|
|
<div v-if="dataType == 'ver_type'" class="noticeBot column"> |
|
|
|
<p>1. AI（服务器成本） <span v-if="view == 'year'" style="color:red;">2025年（含）后计入成本</span></p> |
|
|
|
<p>2. Turnitin <span v-if="view == 'year'" style="color:red;">2025年（含）后计入成本</span></p> |
|
|
|
<p>3. 学术（知网PMLC，硕博VIP）<span v-if="view == 'year'" style="color:red;">2025年（含）后计入成本</span></p> |
|
|
|
</div> |
|
|
|
<div v-if="dataType == 'check_type'" class="noticeBot column"> |
|
|
|
<p>1. AI（服务器成本）</p> |
|
|
|
<p>2. Turnitin国际版、TurnitinUK版、Turnitin国际版+AI</p> |
|
|
|
<p>3. 知网PMLC，硕博VIP <span v-if="view == 'year'" style="color:red;">2025年（含）后计入成本</span></p> |
|
|
|
</div> |
|
|
|
</el-alert> |
|
|
|
</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="95"></el-table-column> |
|
|
|
|
|
|
|
<GuipTable :tableData="tableData" style="width: 100%" :border="true" @sort-change="handleSortChange" |
|
|
|
:loading="loading" @cell-mouse-enter="handleRowHover"> |
|
|
|
<el-table-column fixed="left" prop="sort" label="排序" width="70"></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]" width="250"> |
|
|
|
prop="name" :key="selectedType" :label="type_select[selectedType]" min-width="120"> |
|
|
|
|
|
|
|
<template slot="header"> |
|
|
|
<el-select class="custom-select" popper-class="custom-select-dropdown" v-model="selectedType" @change="changeRankType"> |
|
|
|
<el-option v-for="(item,type) in type_select" |
|
|
|
:key="type" |
|
|
|
:label="item" |
|
|
|
:value="type"> |
|
|
|
<el-select class="custom-select tableHeaderSelect" popper-class="custom-select-dropdown" |
|
|
|
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 }} |
|
|
|
<GuipToolTip :content=" scope.row.name"> |
|
|
|
<span class=nowrap>{{ scope.row.name }}</span> |
|
|
|
</GuipToolTip> |
|
|
|
</template> |
|
|
|
|
|
|
|
</el-table-column> |
|
|
|
<el-table-column v-else prop="name" :label="type_desc[dataType]" width="250"></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] + (index == 3 ? current_month : '')" |
|
|
|
<el-table-column v-for="(field, index) in valueFields" :key="field" :label="labels[index]" |
|
|
|
:prop="String(index + 1)" |
|
|
|
sortable="custom"> |
|
|
|
:render-header=" (h, scope) => index == 3 ? renderHeaderWithIcon(h, scope, require('@/assets/require.svg')) : scope.column.label" |
|
|
|
sortable="custom" min-width="170"> |
|
|
|
|
|
|
|
<!--产品利润排行展示查看更多--> |
|
|
|
<template v-if="index == 3 && dataRank == 1" 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}`" :append-to-body="false" :visible-arrow="true" |
|
|
|
popper-class="custom-popover" @show="popshow"> |
|
|
|
|
|
|
|
<div v-if="type != 'agent'" class="pop-wrap"> |
|
|
|
<div class="flex-between flex pop-top"> |
|
|
|
<h3> |
|
|
|
{{ text }} {{ row.name }} |
|
|
|
<span @click="goLookMoreData(row.id)">查看更多</span> |
|
|
|
<span class="lookMore" @click="goLookMoreData(row.id)">查看更多</span> |
|
|
|
</h3> |
|
|
|
<span class="flex point" @click="closePop(row,'id')"> |
|
|
|
关闭<img src="@/assets/register/close.svg"> |
|
|
|
@ -103,14 +83,16 @@ |
|
|
|
<div class="flex-between flex pop-top"> |
|
|
|
<h3> |
|
|
|
{{ text }} {{ row.name }} |
|
|
|
<span @click="goLookCheckTypeRank(row.id)">查看更多</span> |
|
|
|
<span class="lookMore" @click="goLookCheckTypeRank(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="95" label="排序"></el-table-column> |
|
|
|
<el-table-column prop="sort" width="95" label="排序"> |
|
|
|
|
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="name" width="250" label="服务名称"></el-table-column> |
|
|
|
<el-table-column prop="rate" width="130" label="毛利占比"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
@ -132,33 +114,32 @@ |
|
|
|
|
|
|
|
<div class="flex" slot="reference"> |
|
|
|
{{ row[field] }} |
|
|
|
<HoverImage v-if="show_detail_index == row.sort && row[field] > 0" |
|
|
|
@click="handleClick(row, $index, 'id')" |
|
|
|
:normal="require('@/assets/super/list-detail.svg')" |
|
|
|
:hover="require('@/assets/super/list-detail-hover.svg')"/> |
|
|
|
<svg-icon v-if="row[field] > 0" :size="14" |
|
|
|
:path="require('@/assets/super/list-detail.svg')" :color="'#8A9099'" |
|
|
|
:hoverColor="'#006AFF'" @click="handleClick(row, $index, 'id')" /> |
|
|
|
</div> |
|
|
|
</el-popover> |
|
|
|
|
|
|
|
</template> |
|
|
|
<template v-else slot-scope="scope"> |
|
|
|
<div class="flex"> |
|
|
|
<template v-else slot-scope="scope" > |
|
|
|
<div class="flex" > |
|
|
|
{{ scope.row[field] }} |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
|
|
|
|
<!--产品利润排行展示代理商排行--> |
|
|
|
<el-table-column v-if="dataRank == 1 && (dataType == 'ver_type' || dataType == 'check_type')" key="top" prop="top" :label="'代理商排行'+current_month" width="250"> |
|
|
|
<el-table-column v-if="dataRank == 1 && (dataType == 'ver_type' || dataType == 'check_type')" |
|
|
|
:render-header=" (h, scope) => renderHeaderWithIcon(h, scope, require('@/assets/require.svg')) " |
|
|
|
key="top" prop="top" label="代理商排行" width="250" fixed="right"> |
|
|
|
<template v-slot="{ row, $index }"> |
|
|
|
<el-popover v-model="row.id_popover_2" |
|
|
|
placement="top" |
|
|
|
trigger="manual" |
|
|
|
:ref="`popover_2-${$index}`" |
|
|
|
@show="popshow"> |
|
|
|
<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="goLookAgentRank(row.id)">查看更多</span> |
|
|
|
<span class="lookMore" @click="goLookAgentRank(row.id)">查看更多</span> |
|
|
|
</h3> |
|
|
|
<span class="flex point" @click="closePop(row,'id')"> |
|
|
|
关闭<img src="@/assets/register/close.svg"> |
|
|
|
@ -172,22 +153,17 @@ |
|
|
|
</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')"/> |
|
|
|
<svg-icon :size="14" @click="handleClick2(row, $index, 'id')" |
|
|
|
:path="require('@/assets/super/list-detail.svg')" :color="'#8A9099'" |
|
|
|
:hoverColor="'#006AFF'" /> |
|
|
|
</span> |
|
|
|
<span v-else slot="reference">暂无排行</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" |
|
|
|
</GuipTable> |
|
|
|
<el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange' |
|
|
|
:current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper" |
|
|
|
:total="parseInt(total)"> |
|
|
|
</el-pagination> |
|
|
|
</el-form> |
|
|
|
@ -196,9 +172,10 @@ |
|
|
|
</template> |
|
|
|
<script> |
|
|
|
import DateSelect from '@/components/super/DateSelect.vue'; |
|
|
|
import HoverImage from '@/components/super/HoverImage.vue'; |
|
|
|
import GuipTable from '@/components/GuipTable.vue'; |
|
|
|
import CustomDropdown from '@/components/CustomDropdown.vue'; |
|
|
|
|
|
|
|
import SvgIcon from '@/components/SvgIcon.vue'; |
|
|
|
import GuipToolTip from '@/components/GuipToolTip.vue'; |
|
|
|
export default { |
|
|
|
name: 'rank_batch_list', |
|
|
|
props: { |
|
|
|
@ -216,12 +193,16 @@ export default { |
|
|
|
} |
|
|
|
}, |
|
|
|
components: { |
|
|
|
HoverImage, |
|
|
|
// HoverImage, |
|
|
|
GuipToolTip, |
|
|
|
SvgIcon, |
|
|
|
GuipTable, |
|
|
|
DateSelect, |
|
|
|
CustomDropdown |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
loading: false, |
|
|
|
viewDesc: { |
|
|
|
'month': '月份', |
|
|
|
'monthTwo': '月份', |
|
|
|
@ -245,10 +226,10 @@ export default { |
|
|
|
selectedType: 'check_type', |
|
|
|
view: 'month', |
|
|
|
labels: ['', '', '', ''], |
|
|
|
current_month:'', |
|
|
|
current_month: '', |
|
|
|
valueFields: ['value_1', 'value_2', 'value_3', 'value_4'], |
|
|
|
currentPage: 1, //当前页 |
|
|
|
pageSize: 20, //每页的容量 |
|
|
|
pageSize: 10, //每页的容量 |
|
|
|
total: 0, //列表总数 |
|
|
|
sort_by: 4, |
|
|
|
sort_order: 2, |
|
|
|
@ -381,11 +362,11 @@ export default { |
|
|
|
if (this.dataType == 'check_type') { |
|
|
|
obj.check_type = row.id |
|
|
|
} |
|
|
|
if(this.dataType == 'agent'){ |
|
|
|
if (this.dataType == 'agent') { |
|
|
|
let obj = {} |
|
|
|
obj.aid = row.id |
|
|
|
this.getCheckTypeRankingList(obj); |
|
|
|
}else{ |
|
|
|
} else { |
|
|
|
this.getRankingDetail(obj); |
|
|
|
} |
|
|
|
}, |
|
|
|
@ -423,7 +404,8 @@ export default { |
|
|
|
item.removeAttribute('aria-hidden') |
|
|
|
}) |
|
|
|
}, |
|
|
|
handleSortChange({prop, order}) { |
|
|
|
handleSortChange({ prop, order }) { |
|
|
|
console.log('prop--排序',prop); |
|
|
|
this.sort_by = 4; |
|
|
|
this.sort_order = 2; |
|
|
|
if (order == 'ascending') { |
|
|
|
@ -466,7 +448,7 @@ export default { |
|
|
|
const currentMonth = new Date().getMonth() + 1; |
|
|
|
|
|
|
|
this.current_month = ''; |
|
|
|
if(this.view === 'month' && year == currentYear && month == currentMonth){ |
|
|
|
if (this.view === 'month' && year == currentYear && month == currentMonth) { |
|
|
|
this.current_month = '(当月)'; |
|
|
|
} |
|
|
|
|
|
|
|
@ -533,6 +515,7 @@ export default { |
|
|
|
const that = this |
|
|
|
that.tableData = [] |
|
|
|
that.top_list = [] |
|
|
|
this.loading = true; |
|
|
|
this.$http('POST', '/supernew/ajax_get_type_batch_list', { |
|
|
|
date: that.text, |
|
|
|
rank_type: that.dataRank, |
|
|
|
@ -541,6 +524,7 @@ export default { |
|
|
|
cur_page: that.currentPage, |
|
|
|
page_size: that.pageSize, |
|
|
|
}).then(response => { |
|
|
|
this.loading = false; |
|
|
|
this.$nextTick(() => { |
|
|
|
that.tableData = response.data.list |
|
|
|
that.top_list = response.data.top_list |
|
|
|
@ -613,4 +597,40 @@ export default { |
|
|
|
} |
|
|
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
|
|
.pagetitle{ |
|
|
|
h4{ |
|
|
|
margin-bottom: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
.lookMore { |
|
|
|
cursor: pointer; |
|
|
|
font-weight: 400; |
|
|
|
} |
|
|
|
.beforeNotice{ |
|
|
|
margin-top: 12px; |
|
|
|
border-radius: 4px; |
|
|
|
background: #F2F7FF; |
|
|
|
border: 1px solid #BFDAFF; |
|
|
|
padding: 20px 14px; |
|
|
|
color: #1E2226; |
|
|
|
letter-spacing: 0.08em; |
|
|
|
.noticeTop{ |
|
|
|
gap: 8px; |
|
|
|
margin-bottom: 12px; |
|
|
|
|
|
|
|
} |
|
|
|
.noticeBot{ |
|
|
|
gap: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.tableHeaderSelect ::v-deep .el-input__inner { |
|
|
|
font-size: 14px; |
|
|
|
font-weight: normal; |
|
|
|
letter-spacing: 0.08em; |
|
|
|
font-family: Microsoft YaHei UI; |
|
|
|
color: #1E2226; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
</style> |
