zq
1 month ago
8 changed files with 3897 additions and 7384 deletions
File diff suppressed because it is too large
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 4.2 KiB |
@ -0,0 +1,272 @@ |
|||||
|
<template> |
||||
|
<aside class="sidebar"> |
||||
|
<ul> |
||||
|
<li v-for="(item, index) in menuList" :key="item.path"> |
||||
|
<div :class="[$route.path == item.path ? 'active' : '', 'flex', $route.path == item.path ? curIndex = index : '']" |
||||
|
@click="gotoPath(item.path,index)"> |
||||
|
<img v-if="$route.path == item.path" :src="item.imgActive" alt=""> |
||||
|
<img v-else :src="item.img" alt=""> |
||||
|
{{ item.name }} |
||||
|
</div> |
||||
|
<p :class="['flex', activeFloor == item1.desc ? 'curActive' : '']" |
||||
|
v-for="(item1) in item.list" @click="setActiveCur(item1.desc,item)" :key="item1.name">{{ item1.name }}</p> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</aside> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
// :class="[$route.path != item.path ? 'not-point' : '', 'flex', activeFloor == item1.desc ? 'curActive' : '']" |
||||
|
import { mapState } from 'vuex'; |
||||
|
import store from '../../store'; |
||||
|
export default { |
||||
|
name: 'Sidebar', |
||||
|
props: { |
||||
|
// menuList: { |
||||
|
// type: Array, |
||||
|
// required: true |
||||
|
// }, |
||||
|
// activeFloor:{ |
||||
|
// type:String |
||||
|
// }, |
||||
|
// curIndex:{ |
||||
|
// type:Number |
||||
|
// } |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
activeFloor: null, |
||||
|
curIndex: 0, |
||||
|
scrollLock: false, |
||||
|
menuList: [ |
||||
|
{ |
||||
|
name: '总利润', |
||||
|
img: require('@/assets/super/ranking-menu.svg'), |
||||
|
imgActive: require('@/assets/super/ranking-menu.svg'), |
||||
|
list: [ |
||||
|
{ |
||||
|
name: '年排行', |
||||
|
path: '/super/ranking/yearProfit', |
||||
|
desc: 'siteMessage1' |
||||
|
}, |
||||
|
{ |
||||
|
name: '月排行', |
||||
|
path: '/super/ranking/yearProfit', |
||||
|
desc: 'siteMessage2' |
||||
|
}, |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
name: '产品', |
||||
|
img: require('@/assets/super/ranking-menu.svg'), |
||||
|
imgActive: require('@/assets/super/ranking-menu.svg'), |
||||
|
list: [ |
||||
|
{ |
||||
|
name: '毛利润排行', |
||||
|
path: '/super/ranking/yearProfit', |
||||
|
desc: 'siteMessage4' |
||||
|
}, |
||||
|
{ |
||||
|
name: '订单数排行', |
||||
|
path: '/super/ranking/yearProfit', |
||||
|
desc: 'siteMessage5' |
||||
|
}, |
||||
|
{ |
||||
|
name: '退单数排行', |
||||
|
path: '/super/ranking/yearProfit', |
||||
|
desc: 'siteMessage6' |
||||
|
}, |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
name: '代理商', |
||||
|
img: require('@/assets/super/ranking-menu.svg'), |
||||
|
imgActive: require('@/assets/super/ranking-menu.svg'), |
||||
|
list: [ |
||||
|
{ |
||||
|
name: '毛利润排行', |
||||
|
path: '/super/ranking/yearProfit', |
||||
|
desc: 'siteMessage9' |
||||
|
}, |
||||
|
{ |
||||
|
name: '充值排行', |
||||
|
path: '/super/ranking/yearProfit', |
||||
|
desc: 'siteMessage10' |
||||
|
}, |
||||
|
{ |
||||
|
name: '新加盟', |
||||
|
path: '/super/ranking/yearProfit', |
||||
|
desc: 'siteMessage11' |
||||
|
}, |
||||
|
] |
||||
|
}, |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
// console.log(this.curIndex,'this.curIndex'); |
||||
|
this.activeFloor = this.menuList[this.curIndex]['list'][0]['desc']; |
||||
|
this.calculateFloorOffsets(); |
||||
|
this.$nextTick(() => { |
||||
|
// console.log(this.$parent.$refs.scrollContainer, 'this.$refs.scrollContainer--'); |
||||
|
}) |
||||
|
this.$parent.$refs.scrollContainer.addEventListener('scroll', this.handleScroll); |
||||
|
}, |
||||
|
created() { |
||||
|
// console.log(this.$parent.$refs.scrollContainer,'this.$refs.sc--rollContainer--'); |
||||
|
}, |
||||
|
computed: { |
||||
|
...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中 |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
this.$parent.$refs.scrollContainer.removeEventListener('scroll', this.handleScroll); |
||||
|
}, |
||||
|
methods: { |
||||
|
calculateFloorOffsets() { |
||||
|
this.menuList.forEach(item => { |
||||
|
item.list.forEach(every => { |
||||
|
const el = document.getElementById(every.desc); |
||||
|
if (el) { |
||||
|
every.offsetTop = el.offsetTop; |
||||
|
} |
||||
|
}) |
||||
|
}); |
||||
|
}, |
||||
|
handleScroll() { |
||||
|
if (this.scrollLock) return |
||||
|
const scrollContainer = this.$parent.$refs.scrollContainer; |
||||
|
const scrollHeight = scrollContainer.scrollTop; |
||||
|
let activeFloor = this.menuList[this.curIndex]['list'][0]['desc']; |
||||
|
this.menuList[this.curIndex]['list'].forEach(item => { |
||||
|
if (scrollHeight + 72 >= item.offsetTop) { |
||||
|
activeFloor = item.desc; // 更新当前激活的楼层ID |
||||
|
} else { |
||||
|
return false; // 一旦找到第一个小于当前滚动位置的楼层，停止循环 |
||||
|
} |
||||
|
}); |
||||
|
this.activeFloor = activeFloor; // 更新数据以触发视图更新 |
||||
|
}, |
||||
|
setActiveCur(dom,item) { |
||||
|
if(this.$route.path != item.path){ |
||||
|
this.$router.push(item.path) |
||||
|
store.commit('SET_PAGETITLE', item.name); |
||||
|
} |
||||
|
setTimeout(()=>{ |
||||
|
this.activeFloor = dom; |
||||
|
this.setHighActive(dom) |
||||
|
},500) |
||||
|
}, |
||||
|
gotoPath(path,index) { |
||||
|
if(this.$route.path != path){ |
||||
|
this.curIndex = index |
||||
|
this.scrollLock = false; |
||||
|
this.handleScroll() |
||||
|
// 重置页面滚动高度 |
||||
|
const dom = document.getElementById('main-content') |
||||
|
dom.scrollTop = 0 |
||||
|
this.$router.push(path) |
||||
|
} |
||||
|
}, |
||||
|
activeArea(type) { |
||||
|
console.log(type); |
||||
|
}, |
||||
|
setHighActive(dom) { |
||||
|
this.scrollLock = true; |
||||
|
const ele = document.getElementById(dom) |
||||
|
if(!ele)return |
||||
|
ele.classList.add('ceshi') |
||||
|
ele.scrollIntoView({ behavior: 'smooth', block: 'start' }) |
||||
|
setTimeout(() => { |
||||
|
ele.classList.remove('ceshi') |
||||
|
}, 1000) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.sidebar { |
||||
|
width: 158px; |
||||
|
padding: 21px; |
||||
|
box-sizing: border-box; |
||||
|
background: #FFFFFF; |
||||
|
box-shadow: 0px 0px 11px 2px rgba(147, 147, 147, 0.11); |
||||
|
} |
||||
|
|
||||
|
.ceshi { |
||||
|
// animation: fadeInOut 2s infinite; |
||||
|
} |
||||
|
|
||||
|
ul { |
||||
|
list-style: none; |
||||
|
padding: 0; |
||||
|
} |
||||
|
|
||||
|
.not-point { |
||||
|
pointer-events: none; |
||||
|
/* 阻止鼠标事件 */ |
||||
|
opacity: 0.5; |
||||
|
/* 可选，降低透明度以视觉上表示不可用 */ |
||||
|
cursor: not-allowed; |
||||
|
/* 改变鼠标光标样式，表示不可用 */ |
||||
|
} |
||||
|
|
||||
|
li { |
||||
|
margin-bottom: 10px; |
||||
|
|
||||
|
div { |
||||
|
letter-spacing: 0.08em; |
||||
|
color: #1E2226; |
||||
|
margin: 11px 0; |
||||
|
cursor: pointer; |
||||
|
|
||||
|
img { |
||||
|
margin-right: 6px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
p { |
||||
|
margin: 9px 0; |
||||
|
letter-spacing: 0.08em; |
||||
|
line-height: 18px; |
||||
|
color: #8A9099; |
||||
|
cursor: pointer; |
||||
|
|
||||
|
&:hover { |
||||
|
color: #006AFF; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.curActive { |
||||
|
color: #006AFF; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* { |
||||
|
display: block; |
||||
|
padding: 8px 12px; |
||||
|
text-decoration: none; |
||||
|
color: #333; |
||||
|
border-radius: 4px; |
||||
|
} */ |
||||
|
/* |
||||
|
:hover { |
||||
|
background: #e0e0e0; |
||||
|
} */ |
||||
|
|
||||
|
.active { |
||||
|
font-weight: bold; |
||||
|
letter-spacing: 0.08em; |
||||
|
color: #006AFF; |
||||
|
} |
||||
|
|
||||
|
.item-active { |
||||
|
color: #006AFF; |
||||
|
} |
||||
|
|
||||
|
/* |
||||
|
.exact-active { |
||||
|
background: #1976d2; |
||||
|
color: white; |
||||
|
} */ |
||||
|
</style> |
||||
@ -0,0 +1,54 @@ |
|||||
|
<template> |
||||
|
<div class="siteSetting-wrap"> |
||||
|
<RankingLeftMenu /> |
||||
|
<!--:menuList="menuList" :activeFloor="activeFloor" :curIndex="curIndex" --> |
||||
|
<!-- 主内容区域 --> |
||||
|
<main class="main-content" ref="scrollContainer"> |
||||
|
<router-view></router-view> |
||||
|
<Footer></Footer> |
||||
|
</main> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import Footer from '@/components/Footer.vue'; |
||||
|
import RankingLeftMenu from '@/components/super/RankingLeftMenu.vue' |
||||
|
export default { |
||||
|
// 站点设置 |
||||
|
name: '', |
||||
|
props: [''], |
||||
|
components: { |
||||
|
Footer, |
||||
|
RankingLeftMenu, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
path:'' |
||||
|
} |
||||
|
}, |
||||
|
mounted(){ |
||||
|
this.path =this.$route.path; |
||||
|
console.log(this.$route.path,'090-9090'); |
||||
|
// this.$refs.scrollContainer.scrollTo(0) |
||||
|
}, |
||||
|
methods: { |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped lang="scss"> |
||||
|
.siteSetting-wrap { |
||||
|
display: flex; |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
// .sidebar { |
||||
|
// width: 250px; |
||||
|
// background: #f5f5f5; |
||||
|
// padding: 20px; |
||||
|
// } |
||||
|
|
||||
|
.main-content { |
||||
|
flex: 1; |
||||
|
padding: 12px; |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,158 @@ |
|||||
|
<template> |
||||
|
<div class="demo-wrap min-flex-right"> |
||||
|
<div class="flex-between"> |
||||
|
<h2>总利润 - 年排行</h2> |
||||
|
<GuipForm /> |
||||
|
</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 type="index" label="排序" width="100"> |
||||
|
<template #default="scope"> |
||||
|
{{ scope.row.sort }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<!-- 其他列 --> |
||||
|
<el-table-column prop="1" label="年份" sortable="custom"> |
||||
|
<template #default="scope"> |
||||
|
{{ scope.row.value_1 }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="2" label="总利润/元" sortable="custom"> |
||||
|
<template #default="scope"> |
||||
|
<div class="flex"> |
||||
|
{{ scope.row.value_2 }} |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column label="代理商排行"> |
||||
|
<template #default="scope"> |
||||
|
<span v-if="profit_top_list[scope.row.id]['name']"> |
||||
|
No.1 {{ profit_top_list[scope.row.id]['name'] }} <img v-if="show_detail_index == scope.row.sort" class="detail_icon" src="../../../assets/super/list-detail.svg" alt=""> |
||||
|
</span> |
||||
|
</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' |
||||
|
export default { |
||||
|
// 站点设置 |
||||
|
name: '', |
||||
|
props: [''], |
||||
|
components: { |
||||
|
GuipForm |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
currentPage: 1, //当前页 |
||||
|
pageSize: 20, //每页的容量 |
||||
|
total: 0, //列表总数 |
||||
|
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: [], |
||||
|
profit_top_list: [], |
||||
|
show_detail_index:0, |
||||
|
form: { |
||||
|
payword: '0', |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
// this.$refs.scrollContainer.scrollTo(0) |
||||
|
this.getRankingData(); |
||||
|
}, |
||||
|
methods: { |
||||
|
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.profit_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; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue