ahyd_DIB/pages/nationalPage/rankPage.vue
2024-04-07 09:30:41 +08:00

1185 lines
48 KiB
Vue

<template>
<div class="main">
<div :class="selectFestival===0?'top springTop':selectFestival===1?'top qmTop':''">
<div :class="selectFestival===0?'header headerSpring':selectFestival===1?'header headerQm':'' " :style="{height:menu.height + menu.top + 'px',top:0+'px'}">
<image :style="{bottom: ((statusBarHeight-24)/4)+'px' }" class="backArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/leftArrowWhite.svg" @click="handleBack"/>
</div>
</div>
<div class="contentPage">
<div class="revenueDetail">
<div :class="selectFestival===0?'revenueDetailTitleBox springTitleBox':selectFestival===1?'revenueDetailTitleBox qmTitleBox':''">
<div class="left">
<img class="detailLogo" :src="selectFestival===0?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/serverDetail.png':selectFestival===1?'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/qmServicepartDetail.png':''"/>
<!-- <text class="modalUnit">{{selectDateText || ''}}</text>-->
<text class="modalUnit">{{`/统计到${allDateDay || ''}`}}</text>
</div>
<div class="right">
<div class="typeChangeBox">
<div :class="pageType===1?'normal select':'normal'" @click="handleChangeType(1)">按天统计</div>
<div :class="pageType===2?'normal select':'normal'" @click="handleChangeType(2)">累计统计</div>
</div>
</div>
</div>
<div class="revenueContent">
<div class="navBigList" v-if="pageType===1">
<!-- <div class="allBox">-->
<!-- <div :class="currentScroll==='all'?'scrollItem selectItem':'scrollItem'" @click="handleChangeTime('all')">累计</div>-->
<!-- </div>-->
<scroll-view scroll-x="true" :class="selectFestival===0?'navList springNav':selectFestival===1?'navList qmNav':''" :scrollIntoView="currentScroll" :scroll-with-animation="true">
<div :class="currentScroll==='item'+item.value?'scrollItem selectItem':'scrollItem'" v-for="(item,index) in scrollList" :key="index" :id="'item'+item.value" @click="handleChangeTime(item.value)">{{item.label}}</div>
</scroll-view>
</div>
<!-- <span class="dateText">{{selectDateText || ''}}</span>-->
<div class="modalBox">
<div class="modalTitleBox">
<div class="modalTitleItem" :style="{width: 'calc(100% - 390rpx)',textAlign:'left'}">
<div class="modalIndex" :style="{background: selectFestival===0?'#DB6465':selectFestival===1?'#3B9285':''}"></div>
<text class="modalText">{{ type===1?'对客销售':type===2?'营业收入':type===3?'入区车流':'' }}</text>
<text class="modalUnit">{{type===3?'/万辆':'/万元'}}</text>
</div>
</div>
<view class="sortBox">
<view class="sortItem" @click="handleChangeSortName(1)">
<text class="sortText">{{ `24年${type === 1 ? '销售' : type === 2 ? '营收' : type === 3 ? '车流' : ''}` }}</text>
<view class="sortIconBox">
<image class="upIcon" :style="{transform: sortName===1?sortType===1?``:`rotate(180deg)`:``}" :src="sortType===1?'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg':sortName===1?'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg':'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'"/>
<image class="bottomIcon" :style="{transform: sortName===1?sortType===1?``:`rotate(180deg)`:'rotate(-180deg)'}":src="sortType===1 && sortName===1?'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg':'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'"/>
</view>
</view>
<view class="sortItem" @click="handleChangeSortName(2)">
<text class="sortText">{{ `23年${type === 1 ? '销售' : type === 2 ? '营收' : type === 3 ? '车流' : ''}` }}</text>
<view class="sortIconBox">
<image class="upIcon" :style="{transform: sortName===2?sortType===1?``:`rotate(180deg)`:``}" :src="sortType===1?'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg':sortName===2?'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg':'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'"/>
<image class="bottomIcon" :style="{transform: sortName===2?sortType===1?``:`rotate(180deg)`:'rotate(-180deg)'}":src="sortType===1 && sortName===2?'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg':'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'"/>
</view>
</view>
<view class="sortItem" @click="handleChangeSortName(3)">
<text class="sortText">{{ `${type === 1 ? '销售' : type === 2 ? '营收' : type === 3 ? '车流' : ''}增长` }}</text>
<view class="sortIconBox">
<image class="upIcon" :style="{transform: sortName===3?sortType===1?``:`rotate(180deg)`:``}" :src="sortType===1?'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg':sortName===3?'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg':'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'"/>
<image class="bottomIcon" :style="{transform: sortName===3?sortType===1?``:`rotate(180deg)`:'rotate(-180deg)'}":src="sortType===1 && sortName===3?'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg':'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'"/>
</view>
</view>
<view class="sortItem" @click="handleChangeSortName(4)">
<text class="sortText">{{ `${type === 1 ? '销售' : type === 2 ? '营收' : type === 3 ? '车流' : ''}增幅` }}</text>
<view class="sortIconBox">
<image class="upIcon" :style="{transform: sortName===4?sortType===1?``:`rotate(180deg)`:``}" :src="sortType===1?'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg':sortName===4?'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg':'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'"/>
<image class="bottomIcon" :style="{transform: sortName===4?sortType===1?``:`rotate(180deg)`:'rotate(-180deg)'}":src="sortType===1 && sortName===4?'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg':'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'"/>
</view>
</view>
</view>
<div class="modalDetail">
<!-- <div class="modalDetailTitle">-->
<!-- <div class="titleItem" :style="{width: 'calc(100% - 440rpx)',textAlign:'left'}">服务区</div>-->
<!-- <div class="titleItem" style="width: 110rpx">2024年</div>-->
<!-- <div class="titleItem" style="width: 110rpx">2023年</div>-->
<!-- <div class="titleItem" style="width: 110rpx">增长</div>-->
<!-- <div class="titleItem" style="width: 110rpx">增幅</div>-->
<!-- </div>-->
<scroll-view :scroll-y="true" class="typeFirst" >
<div class="listItem" v-for="(item,index) in dataList" :key="index">
<div class="itemLeft" >
<image class="bg" src="https://eshangtech.com/ShopICO/ahyd-BID/car/itemLeftBg.svg"/>
<view class="nameBox">
<text class="serviceName">{{item.ServerpartName ? item.ServerpartName.split('服务区')[0]:''}}</text>
<text class="serviceLabel">服务区</text>
</view>
</div>
<div class="contentRight">
<div class="rightTop">
<view class="rightTopLeft">
<view class="indexBox" :style="{backgroundImage:`url(${index===0?'https://eshangtech.com/ShopICO/ahyd-BID/car/1stBg.svg':index===1?'https://eshangtech.com/ShopICO/ahyd-BID/car/2stBg.svg':index===2?'https://eshangtech.com/ShopICO/ahyd-BID/car/3stBg.svg':'https://eshangtech.com/ShopICO/ahyd-BID/car/4stBg.svg'})`}">{{index+1}}</view>
</view>
<view class="rightTopRight">
<text class="entryRateLabel">增幅</text>
<div class="entryRateValue">
<span :style="{color: type===1?item.RevenueINC.increaseRate>0?'#E83944':'#0E9976': type===2?item.AccountINC.increaseRate>0?'#E83944':'#0E9976': type===3?item.BayonetINC.increaseRate>0?'#E83944':'#0E9976':'-'}">
{{type===1?item.RevenueINC.increaseRate>0?'+':'': type===2?item.AccountINC.increaseRate>0?'+':'': type===3?item.BayonetINC.increaseRate>0?'+':'':'-'}}
</span>
<span :style="{color: type===1?item.RevenueINC.increaseRate>0?'#E83944':'#0E9976': type===2?item.AccountINC.increaseRate>0?'#E83944':'#0E9976': type===3?item.BayonetINC.increaseRate>0?'#E83944':'#0E9976':'-'}">
{{type===1?item.RevenueINC.increaseRate?item.RevenueINC.increaseRate:'-' :
type===2?item.AccountINC.increaseRate?item.AccountINC.increaseRate:'-' :
type===3?item.BayonetINC.increaseRate?item.BayonetINC.increaseRate:'-' :'-'}}%
</span>
</div>
</view>
</div>
<div class="rightBottom">
<view class="rightBottomItem">
<text class="itemLabel">{{curYear}}</text>
<text class="itemValue">
{{type===1?item.RevenueINC.curYearData?$util.getMoney(item.RevenueINC.curYearData / 10000):'0.00':
type===2?item.AccountINC.curYearData?$util.getMoney(item.AccountINC.curYearData / 10000):'0.00':
type===3?item.BayonetINC.curYearData?$util.getMoney(item.BayonetINC.curYearData / 10000):'0.00':'-'}}
</text>
</view>
<view class="rightBottomItem">
<text class="itemLabel">{{ compareYear }}</text>
<text class="itemValue">
{{type===1?item.RevenueINC.lYearData?$util.getMoney(item.RevenueINC.lYearData / 10000):'0.00':
type===2?item.AccountINC.lYearData?$util.getMoney(item.AccountINC.lYearData / 10000):'0.00':
type===3?item.BayonetINC.lYearData?$util.getMoney(item.BayonetINC.lYearData / 10000):'0.00':'-'}}
</text>
</view>
<view class="rightBottomItem">
<text class="itemLabel">增长</text>
<text class="itemValue">
{{type===1?item.RevenueINC.increaseData?$util.getMoney(item.RevenueINC.increaseData / 10000):'0.00':
type===2?item.AccountINC.increaseData?$util.getMoney(item.AccountINC.increaseData / 10000):'0.00':
type===3?item.BayonetINC.increaseData?$util.getMoney(item.BayonetINC.increaseData / 10000):'0.00':'-'}}
</text>
</view>
</div>
<div class="otherCarBox" v-if="type!==3">
<div class="left">
<span class="carLabel">车流增幅</span>
<span :style="{color: item.BayonetINC.increaseRate>1000?'':item.BayonetINC.increaseRate>0?'#E83944':item.BayonetINC.increaseRate<0?'#0E9976':''}">
{{item.BayonetINC.increaseRate>1000?'':item.BayonetINC.increaseRate>0?'+':''}}
</span>
<span :style="{color: item.BayonetINC.increaseRate>1000?'':item.BayonetINC.increaseRate>0?'#E83944':item.BayonetINC.increaseRate<0?'#0E9976':''}">
{{item.BayonetINC.increaseRate?item.BayonetINC.increaseRate>1000?'-':item.BayonetINC.increaseRate:'-'}}%
</span>
</div>
<div class="MoreBox" @click="handleGoServerPartDetail(item)">
<img class="goMoreIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/goMore.svg"/>
</div>
</div>
</div>
</div>
<!-- <div class="row" v-for="(item,index) in dataList" :key="index">-->
<!-- <div class="valueItem bigFather" :style="{width: 'calc(100% - 430rpx)',textAlign:'left'}">{{item.ServerpartName.split('服务区')[0]}}</div>-->
<!-- <div class="compareItem" style="width: 110rpx">-->
<!-- {{type===1?item.RevenueINC.curYearData?$util.getMoney(item.RevenueINC.curYearData / 10000):'0.00':-->
<!-- type===2?'':-->
<!-- type===3?item.BayonetINC.curYearData?$util.getMoney(item.BayonetINC.curYearData / 10000):'0.00':'-'}}-->
<!-- </div>-->
<!-- <div class="compareItem" style="width: 110rpx">-->
<!-- {{type===1?item.RevenueINC.lYearData?$util.getMoney(item.RevenueINC.lYearData / 10000):'0.00':-->
<!-- type===2?'':-->
<!-- type===3?item.BayonetINC.lYearData?$util.getMoney(item.BayonetINC.lYearData / 10000):'0.00':'-'}}-->
<!-- </div>-->
<!-- <div class="compareItem" style="width: 110rpx">-->
<!-- <span>{{type===1?item.RevenueINC.increaseData?$util.getMoney(item.RevenueINC.increaseData / 10000):'0.00':-->
<!-- type===2?'':-->
<!-- type===3?item.BayonetINC.increaseData?$util.getMoney(item.BayonetINC.increaseData / 10000):'0.00':'-'}}</span>-->
<!-- </div>-->
<!-- <div class="addItem" style="width: 110rpx">-->
<!-- <span :style="{color: type===1?item.RevenueINC.increaseRate>0?'#E83944':'#0E9976': type===2?'': type===3?item.BayonetINC.increaseRate>0?'#E83944':'#0E9976':'-'}">-->
<!-- {{type===1?item.RevenueINC.increaseRate>0?'+':'': type===2?'': type===3?item.BayonetINC.increaseRate>0?'+':'':'-'}}-->
<!-- </span>-->
<!-- <span :style="{color: type===1?item.RevenueINC.increaseRate>0?'#E83944':'#0E9976': type===2?'': type===3?item.BayonetINC.increaseRate>0?'#E83944':'#0E9976':'-'}">-->
<!-- {{type===1?item.RevenueINC.increaseRate?item.RevenueINC.increaseRate:'-' :-->
<!-- type===2?'':-->
<!-- type===3?item.BayonetINC.increaseRate?item.BayonetINC.increaseRate:'-' :'-'}}%-->
<!-- </span>-->
<!-- </div>-->
<!-- </div>-->
</scroll-view>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import request from '@/util/index.js'
import moment from "moment";
export default {
name: "rankPage",
data(){
return {
scrollList:[],
selectDateText:'',
currentScroll:'',
lastDay:'',
allDateDay:'',
dataList:[],
type: 0,
useInfo:{},
curYear:'',
compareYear:'',
ServerpartIds:'',
sortType: 1,// 正序降序 0正序 1降序
sortName: 3,// 排序字段 1 24年营收 2 23年营收 3营收增长 4营收增幅
statusBarHeight:0,
menu:'',
pageType:1,// 选择的类型
serverPartList:[],// 服务区列表
selectFestival:0,// 选择的节日
}
},
onLoad(query){
console.log('query',query)
// 获取手机参数对页面进行适配
let systemInfo = uni.getSystemInfoSync()
this.statusBarHeight = Number(systemInfo.statusBarHeight)
this.menu = uni.getMenuButtonBoundingClientRect()
if (query.type){
this.type = Number(query.type)
}
this.lastDay = uni.getStorageSync('lastDay')
// this.lastDay = '2024-04-03'
if (query.festivalType){
this.selectFestival = Number(query.festivalType)
}
if (this.selectFestival===0){
if (query.time){
this.currentScroll = 'item'+ query.time
}else{
this.currentScroll = 'item'+ '2024-03-05'
}
}else if (this.selectFestival===1){
this.currentScroll = 'item'+ this.lastDay
}
this.ServerpartIds = query.ServerpartIds
// 获取用户信息
let userInfo = uni.getStorageSync('vuex')
userInfo = JSON.parse(userInfo)
this.useInfo = JSON.parse(JSON.stringify(userInfo))
// 拿到是春运开始的第几天
let dayNumber = 0
const lastDate = new Date(this.lastDay)
let y = lastDate.getFullYear()
this.curYear = y
this.compareYear = y - 1
let lastMonth = lastDate.getMonth() + 1
let lastDays = lastDate.getDate()
this.allDateDay = `${lastMonth<10?'0'+lastMonth:lastMonth}${lastDays<10?'0'+lastDays:lastDays}`
// 24年春运开始时间为 1.26
// if (lastMonth === 1){
// dayNumber = lastDays - 26 + 1
// }else{
// dayNumber = 6 + lastDays
// }
if (this.selectFestival===0){
dayNumber = moment().diff("2024-01-26", "days")
this.howDayNumber = dayNumber<=40?dayNumber:40
}else if(this.selectFestival===1){
dayNumber = moment().diff("2024-04-03", "days")
if (dayNumber<=5){
this.howDayNumber = dayNumber
}else{
this.howDayNumber = 5
this.currentScroll = 'item'+ '2024-04-07'
}
}
let dateList = []
for (let i = 1;i<=this.howDayNumber;i++){
if (this.selectFestival===0){
dateList.push({label:`${i}`,value:moment("2024-01-25").add(i, 'days').format("YYYY-MM-DD")})
}else if(this.selectFestival===1){
dateList.push({label:`${i}`,value:moment("2024-04-02").add(i, 'days').format("YYYY-MM-DD")})
}
// if (i<7){
// dateList.push({label:`${i}`,value:`2024-01-${26+i-1}`})
// }else{
// dateList.push({label:`${i}`,value:`2024-02-${i - 7 + 1<10?`0${i - 7 + 1}`:i - 7 + 1}`})
// }
}
if(dateList && dateList.length>0){
this.scrollList = dateList
this.selectDateText = dateList[this.howDayNumber-1].value
}
this.handleGetData()
},
methods:{
// 点击了累计还是选择了日期
handleChangeTime(date){
if (date==='all'){
this.currentScroll = 'all'
const time = new Date(this.lastDay)
let m = time.getMonth()+1
let d = time.getDate()
this.allDateDay = `${m<10?'0'+m:m}${d<10?'0' + d:d}`
}else{
this.currentScroll = 'item'+ date
const time = new Date(date)
let m = time.getMonth()+1
let d = time.getDate()
this.allDateDay = `${m<10?'0'+m:m}${d<10?'0' + d:d}`
}
this.handleGetData(date)
},
// 获取排名信息
async handleGetData(date){
uni.showLoading({
title: '正在加载...'
})
let time = date?
date==='all'?this.lastDay:
this.currentScroll.split('item')[1]:
this.currentScroll.split('item')[1]
const req = {
calcType:this.pageType,
pushProvinceCode: this.useInfo.userData.ProvinceCode || '340000',
curYear: this.curYear,
compareYear: this.compareYear,
HolidayType:this.selectFestival===0?2:this.selectFestival===1?3:'',
StatisticsDate:time,
businessRegion:1,
SortStr:`${this.type===1?'revenue':this.type===2?'account':this.type===3?'bayonet':''} ${this.sortType===0?'asc':'desc'}`
}
// this.dataList
const data = await request.$webGet('CommercialApi/Revenue/GetServerpartINCAnalysis',req)
console.log('data',data)
if (data.Result_Data){
this.dataList = this.handleGetSort(data.Result_Data.List)
let list = []
if (data.Result_Data.List && data.Result_Data.List.length>0){
data.Result_Data.List.forEach(item=>{
list.push({name:item.ServerpartName,value:item.ServerpartId})
})
}
this.serverPartList = list
}
uni.hideLoading()
},
// 修改排序字段
handleChangeSortName(value){
uni.showLoading({
title: '正在加载...'
})
if (value===this.sortName){
if (this.sortType===1){
this.sortType=0
}else{
this.sortType=1
}
}else{
this.sortName = value
this.sortType=1
}
let list = this.handleGetSort(this.dataList)
this.dataList = list
console.log('this.dataList',this.dataList)
this.$forceUpdate()
uni.hideLoading()
},
// 切换模块
handleChangeType(value){
this.pageType = value
if (value===2){
this.handleGetData('all')
}else{
this.handleGetData()
}
},
handleBack(){
uni.navigateBack({
delta: 1
});
},
// 排序方法
handleGetSort(list){
var len = list.length;
for (var i = 0; i < len - 1; i++) {
for (var j = 0; j < len - 1 - i; j++) {
// 判断按照那个排序
if (this.type===1){
// 正序
if (this.sortType===0){
// 24年营收
if (this.sortName===1){
if (list[j].RevenueINC.curYearData > list[j + 1].RevenueINC.curYearData) { // 比较相邻元素大小并交换位置
var temp = list[j];
list[j] = list[j + 1];
list[j + 1] = temp;
}
// 23年营收
}else if(this.sortName===2){
if (list[j].RevenueINC.lYearData > list[j + 1].RevenueINC.lYearData) { // 比较相邻元素大小并交换位置
var temp = list[j];
list[j] = list[j + 1];
list[j + 1] = temp;
}
// 营收增长
}else if(this.sortName===3){
if (list[j].RevenueINC.increaseData > list[j + 1].RevenueINC.increaseData) { // 比较相邻元素大小并交换位置
var temp = list[j];
list[j] = list[j + 1];
list[j + 1] = temp;
}
// 营收增幅
}else if(this.sortName===4){
if (list[j].RevenueINC.increaseRate > list[j + 1].RevenueINC.increaseRate ) { // 比较相邻元素大小并交换位置
var temp = list[j];
list[j] = list[j + 1];
list[j + 1] = temp;
}
}
}
else{
// 降序
// 24年营收
if (this.sortName===1){
if (list[j].RevenueINC.curYearData < list[j + 1].RevenueINC.curYearData) { // 比较相邻元素大小并交换位置
var temp = list[j];
list[j] = list[j + 1];
list[j + 1] = temp;
}
// 23年营收
}else if(this.sortName===2){
if (list[j].RevenueINC.lYearData < list[j + 1].RevenueINC.lYearData) { // 比较相邻元素大小并交换位置
var temp = list[j];
list[j] = list[j + 1];
list[j + 1] = temp;
}
// 营收增长
}else if(this.sortName===3){
if (list[j].RevenueINC.increaseData < list[j + 1].RevenueINC.increaseData) { // 比较相邻元素大小并交换位置
var temp = list[j];
list[j] = list[j + 1];
list[j + 1] = temp;
}
// 营收增幅
}else if(this.sortName===4){
if (list[j].RevenueINC.increaseRate < list[j + 1].RevenueINC.increaseRate ) { // 比较相邻元素大小并交换位置
var temp = list[j];
list[j] = list[j + 1];
list[j + 1] = temp;
}
}
}
}
else if(this.type===2){
// 正序
if (this.sortType===0){
// 24年营收
if (this.sortName===1){
if (list[j].AccountINC.curYearData > list[j + 1].AccountINC.curYearData) { // 比较相邻元素大小并交换位置
var temp = list[j];
list[j] = list[j + 1];
list[j + 1] = temp;
}
// 23年营收
}else if(this.sortName===2){
if (list[j].AccountINC.lYearData > list[j + 1].AccountINC.lYearData ) { // 比较相邻元素大小并交换位置
var temp = list[j];
list[j] = list[j + 1];
list[j + 1] = temp;
}
// 营收增长
}else if(this.sortName===3){
if (list[j].AccountINC.increaseData > list[j + 1].AccountINC.increaseData ) { // 比较相邻元素大小并交换位置
var temp = list[j];
list[j] = list[j + 1];
list[j + 1] = temp;
}
// 营收增幅
}else if(this.sortName===4){
if (list[j].AccountINC.increaseRate > list[j + 1].AccountINC.increaseRate ) { // 比较相邻元素大小并交换位置
var temp = list[j];
list[j] = list[j + 1];
list[j + 1] = temp;
}
}
}
// 降序
else{
// 24年营收
if (this.sortName===1){
if (list[j].AccountINC.curYearData < list[j + 1].AccountINC.curYearData) { // 比较相邻元素大小并交换位置
var temp = list[j];
list[j] = list[j + 1];
list[j + 1] = temp;
}
// 23年营收
}else if(this.sortName===2){
if (list[j].AccountINC.lYearData < list[j + 1].AccountINC.lYearData ) { // 比较相邻元素大小并交换位置
var temp = list[j];
list[j] = list[j + 1];
list[j + 1] = temp;
}
// 营收增长
}else if(this.sortName===3){
if (list[j].AccountINC.increaseData < list[j + 1].AccountINC.increaseData ) { // 比较相邻元素大小并交换位置
var temp = list[j];
list[j] = list[j + 1];
list[j + 1] = temp;
}
// 营收增幅
}else if(this.sortName===4){
if (list[j].AccountINC.increaseRate < list[j + 1].AccountINC.increaseRate ) { // 比较相邻元素大小并交换位置
var temp = list[j];
list[j] = list[j + 1];
list[j + 1] = temp;
}
}
}
}
else if(this.type===3){
// 正序
if (this.sortType===0){
// 24年车流
if (this.sortName===1){
if (list[j].BayonetINC.curYearData > list[j + 1].BayonetINC.curYearData) { // 比较相邻元素大小并交换位置
var temp = list[j];
list[j] = list[j + 1];
list[j + 1] = temp;
}
// 23年营收
}else if(this.sortName===2){
if (list[j].BayonetINC.lYearData > list[j + 1].BayonetINC.lYearData ) { // 比较相邻元素大小并交换位置
var temp = list[j];
list[j] = list[j + 1];
list[j + 1] = temp;
}
// 营收增长
}else if(this.sortName===3){
if (list[j].BayonetINC.increaseData > list[j + 1].BayonetINC.increaseData ) { // 比较相邻元素大小并交换位置
var temp = list[j];
list[j] = list[j + 1];
list[j + 1] = temp;
}
// 营收增幅
}else if(this.sortName===4){
if (list[j].BayonetINC.increaseRate > list[j + 1].BayonetINC.increaseRate) { // 比较相邻元素大小并交换位置
var temp = list[j];
list[j] = list[j + 1];
list[j + 1] = temp;
}
}
}else{
// 降序
// 24年车流
if (this.sortName===1){
if (list[j].BayonetINC.curYearData < list[j + 1].BayonetINC.curYearData) { // 比较相邻元素大小并交换位置
var temp = list[j];
list[j] = list[j + 1];
list[j + 1] = temp;
}
// 23年营收
}else if(this.sortName===2){
if (list[j].BayonetINC.lYearData < list[j + 1].BayonetINC.lYearData ) { // 比较相邻元素大小并交换位置
var temp = list[j];
list[j] = list[j + 1];
list[j + 1] = temp;
}
// 营收增长
}else if(this.sortName===3){
if (list[j].BayonetINC.increaseData < list[j + 1].BayonetINC.increaseData ) { // 比较相邻元素大小并交换位置
var temp = list[j];
list[j] = list[j + 1];
list[j + 1] = temp;
}
// 营收增幅
}else if(this.sortName===4){
if (list[j].BayonetINC.increaseRate < list[j + 1].BayonetINC.increaseRate) { // 比较相邻元素大小并交换位置
var temp = list[j];
list[j] = list[j + 1];
list[j + 1] = temp;
}
}
}
}
}
}
return list;
},
// 跳转去看服务区排名
handleGoServerPartDetail(obj){
let springObj = {
SERVERPART_NAME: obj.ServerpartName,
SPREGIONTYPE_NAME: obj.SPRegionTypeName,
SPRegionType_ID: obj.SPRegionTypeId,
Serverpart_ID: obj.ServerpartId,
}
uni.setStorageSync('springService',springObj) //当前选中服务区信息
this.$util.toNextRoute('navigateTo', `/pages/nationalPage/merchantRevenue?ServerpartId=${obj.ServerpartId}&type=${this.type}&serverPartList=${JSON.stringify(this.serverPartList)}&currentScroll=${this.currentScroll}&festivalType=${this.selectFestival}`)
}
}
}
</script>
<style scoped lang="scss">
.main{
width: 100%;
background: #fff;
.springTop{
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/rankBg.png");
}
.qmTop{
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/smallQmBg.png");
}
.top{
width: 100%;
height: 324rpx;
//background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/rankBg.png");
//background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/smallQmBg.png");
background-repeat: no-repeat;
background-position: 0 0;
background-size: 100% 100%;
.headerSpring{
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/rankBg.png");
}
.headerQm{
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/smallQmBg.png");
}
.header{
position: fixed;
width: 100%;
padding: 0 16px;
box-sizing: border-box;
//background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/rankBg.png");
//background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/smallQmBg.png");
background-repeat: no-repeat;
background-position: 0 0;
background-size: 100% 324rpx;
display: flex;
align-items: center;
z-index: 2;
.backArrow{
width: 24px;
height: 24px;
margin-right: 16px;
position: absolute;
}
}
}
.contentPage{
width: 100%;
box-sizing: border-box;
transform: translateY(-120rpx);
.revenueDetail{
width: 100%;
background: #fff;
border-radius: 16rpx;
box-sizing: border-box;
padding: 2rpx;
margin-top: 24rpx;
.springTitleBox{
background: linear-gradient(360deg, rgba(255,200,198,0) 0%, #FFC8C6 100%);
}
.qmTitleBox{
background: linear-gradient(360deg, rgba(204,231,224,0) 0%, #CCE7E0 100%);
}
.revenueDetailTitleBox{
width: 100%;
height: 90rpx;
//background: linear-gradient(360deg, rgba(255,200,198,0) 0%, #FFC8C6 100%);
//background: linear-gradient(360deg, rgba(204,231,224,0) 0%, #CCE7E0 100%);
border-radius: 14rpx 14rpx 0rpx 0rpx;
box-sizing: border-box;
padding: 36rpx 34rpx 22rpx;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
.left{
.detailLogo{
width: 178rpx;
height: 32rpx;
}
.modalUnit{
font-size: 24rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #9A9A9A;
line-height: 36rpx;
position: absolute;
left: 220rpx;
top: 30rpx;
}
}
.right{
.typeChangeBox{
display: flex;
align-items: center;
background: #FFFFFF;
border-radius: 6rpx;
box-sizing: border-box;
padding: 4rpx;
.normal{
font-size: 24rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #786B6C;
line-height: 36rpx;
padding: 6rpx 16rpx;
}
.select{
font-size: 24rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #160002;
line-height: 36rpx;
background: #F5EFEF;
border-radius: 6rpx;
}
}
}
}
.revenueContent{
width: 100%;
box-sizing: border-box;
padding: 0 32rpx 24rpx;
.navBigList{
width: 100%;
height: 40rpx;
display: flex;
align-items: center;
margin-top: 32rpx;
.allBox{
width: 70rpx;
height: 100%;
.scrollItem{
font-size: 28rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #A69E9F;
line-height: 40rpx;
}
.selectItem{
font-size: 28rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 600;
color: #ED3E48;
line-height: 40rpx;
}
}
.navList{
width: 100%;
height: 40rpx;
display: flex;
align-items: center;
white-space: nowrap;
padding-bottom: 24rpx;
border-bottom: 1px solid #F5F4F4;
.scrollItem{
font-size: 28rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #A69E9F;
line-height: 40rpx;
margin-right: 32rpx;
display: inline-block;
}
.selectItem{
font-size: 28rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 600;
//color: #ED3E48;
//color: #226C61;
line-height: 40rpx;
}
}
.springNav{
.selectItem {
color: #ED3E48!important;
}
}
.qmNav{
.selectItem {
color: #226C61!important;
}
}
}
.dateText{
font-size: 24rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #A69E9F;
margin: 16rpx 0;
display: inline-block;
}
.modalBox{
margin-top: 40rpx;
.modalTitleBox{
width: 100%;
box-sizing: border-box;
padding: 0 24rpx;
margin-bottom: 16rpx;
display: flex;
align-items: center;
justify-content: space-between;
.modalTitleItem{
display: flex;
align-items: center;
.modalIndex{
width: 12rpx;
height: 12rpx;
background: #DB6465;
border-radius: 50%;
margin-right: 12rpx;
}
.modalText{
font-size: 24rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 600;
color: #160002;
line-height: 40rpx;
margin-right: 4rpx;
}
.modalUnit{
font-size: 24rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #9A9A9A;
line-height: 36rpx;
}
}
.moreBox{
display: flex;
align-items: center;
.moreText{
font-size: 24rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #9A9A9A;
line-height: 36rpx;
}
.moreIcon{
width: 24rpx;
height: 36rpx;
margin-left: 4rpx;
}
}
.modalTitleItem1{
font-size: 24rpx;
text-align: center;
}
}
.sortBox{
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16rpx;
.sortItem{
display: flex;
align-items: center;
.sortText{
font-size: 24rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #9A9A9A;
line-height: 36rpx;
}
.sortIconBox{
display: flex;
flex-direction: column;
margin-left: 16rpx;
.upIcon{
width: 16rpx;
height: 12rpx;
margin-bottom: 4rpx;
}
.bottomIcon{
width: 16rpx;
height: 12rpx;
}
}
}
}
.modalDetail{
width: 100%;
box-sizing: border-box;
.modalDetailTitle{
display: flex;
align-items: center;
padding: 8rpx 0;
.titleItem{
font-size: 24rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #9A9A9A;
line-height: 32rpx;
text-align: center;
}
}
.typeFirst{
height: calc(100vh - 300px);
.row{
margin-top: 32rpx;
display: flex;
align-items: center;
margin-top: 32rpx;
.valueItem{
font-size: 24rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #160002;
line-height: 40rpx;
text-align: center;
text-indent: 8rpx;
}
.bigFather{
position: relative;
font-weight: 600;
}
.bigFather:before{
position: absolute;
top: 50%;
left: -8rpx;
transform: translateY(-50%);
content:'';
display: inline-block;
width: 8rpx;
height: 8rpx;
border-radius: 50%;
background: #DB6465;
}
.father{
position: relative;
font-weight: 600;
}
.father:before{
position: absolute;
top: 50%;
left: -8rpx;
transform: translateY(-50%);
content:'';
display: inline-block;
width: 8rpx;
height: 8rpx;
border-radius: 50%;
background: #3188FF;
}
.son{
position: relative;
}
.son:before{
position: absolute;
top: 50%;
left: -8rpx;
transform: translateY(-50%);
content:'';
display: inline-block;
width: 8rpx;
height: 8rpx;
border-radius: 50%;
background: orangered;
}
.compareItem{
font-size: 24rpx;
font-family: DINAlternate, DINAlternate;
color: #160002;
line-height: 40rpx;
text-align: center;
}
.addItem{
font-size: 24rpx;
font-family: DINAlternate, DINAlternate;
color: #E83944;
line-height: 40rpx;
text-align: center;
}
}
.listItem{
width:100%;
padding: 24rpx;
box-sizing: border-box;
border-radius: 16rpx;
background: #F7F7F7;
margin-bottom: 24rpx;
display: flex;
.itemLeft{
width: 160rpx;
height: 160rpx;
border-radius: 16rpx;
//border: 2rpx solid #E6E6E6;
position: relative;
background-repeat: no-repeat;
background-size: cover;
.bg{
position: absolute;
width: 160rpx;
height: 160rpx;
top: 0;left: 0;
z-index: 1;
}
.statueBox{
position: absolute;
z-index: 2;
top: 0;right: 0;
width: 76rpx;
height: 32rpx;
font-size: 20rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #FFFFFF;
line-height: 28rpx;
background-repeat: no-repeat;
background-size: 100% 100%;
text-align: center;
}
.nameBox{
position: absolute;
z-index: 2;
top: 32rpx;
left: 20rpx;
display: flex;
flex-direction: column;
.serviceName{
font-size: 30rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 500;
color: #7F020B;
line-height: 30rpx;
margin-bottom: 6rpx;
}
.serviceLabel{
font-size: 20rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 500;
color: #7F020B;
line-height: 20rpx;
}
}
}
.contentRight{
width: calc(100% - 176rpx);
margin-left: 16rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
.rightTop{
display: flex;
align-items: center;
justify-content: space-between;
.rightTopLeft{
display: flex;
align-items: center;
.indexBox{
width: 36rpx;
height: 32rpx;
font-size: 24rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #FEFFFF;
line-height: 28rpx;
text-align: center;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.areaName{
font-size: 28rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #160002;
line-height: 40rpx;
margin-left: 8rpx;
}
}
.rightTopRight{
display: flex;
align-items: center;
.entryRateLabel{
font-size: 24rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #9A9A9A;
line-height: 32rpx;
}
.entryRateValue{
font-size: 28rpx;
font-family: DINAlternate, DINAlternate;
font-weight: bold;
color: #E83944;
line-height: 32rpx;
margin-left: 4rpx;
}
}
}
.rightBottom{
display: flex;
justify-content: space-between;
.rightBottomItem{
display: flex;
flex-direction: column;
align-items: center;
.itemLabel{
font-size: 24rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #9A9A9A;
line-height: 36rpx;
}
.itemValue{
font-size: 28rpx;
font-family: DINAlternate, DINAlternate;
font-weight: bold;
color: #160002;
line-height: 32rpx;
margin-top: 8rpx;
}
}
}
.otherCarBox{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.left{
font-size: 24rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #9A9A9A;
line-height: 36rpx;
}
.MoreBox{
width: 30%;
height: 32rpx;
display: flex;
align-items: center;
justify-content: flex-end;
.goMoreIcon{
width: 32rpx;
height: 32rpx;
}
}
}
}
}
}
.typeSecond{
.listValueBox{
width: 100%;
.row{
width: 100%;
display: flex;
margin-top: 32rpx;
.rowItem{
text-align: center;
font-size: 24rpx;
font-family: DINAlternate, DINAlternate;
color: #160002;
line-height: 40rpx;
}
}
}
}
}
}
}
}
}
}
</style>