1113 lines
45 KiB
Vue
1113 lines
45 KiB
Vue
<template>
|
|
<view class="main">
|
|
<view class="bigBg">
|
|
<view class="top" :style="{height: (menu.bottom + 18) + 'px'}">
|
|
<view class="header" :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"/>
|
|
</view>
|
|
</view>
|
|
<view class="contentPage">
|
|
<view class="revenueDetail">
|
|
<view class="revenueDetailTitleBox">
|
|
<view class="left">
|
|
<span class="contentMonth">{{thisMonth?thisMonth+'月':'累计'}}</span>
|
|
<span class="leftText">服务区明细</span>
|
|
<!-- <img class="detailLogo" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/serverDetail.png"/>-->
|
|
<!-- <text class="modalUnit">{{selectDateText || ''}}</text>-->
|
|
</view>
|
|
<view class="right">
|
|
<view class="typeChangeBox">
|
|
<view :class="pageType===1?'normal select':'normal'" @click="handleChangeType(1)">按月统计</view>
|
|
<view :class="pageType===2?'normal select':'normal'" @click="handleChangeType(2)">累计统计</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="revenueContent">
|
|
<view class="navBigList" v-if="pageType===1">
|
|
<!-- <view class="allBox">-->
|
|
<!-- <view :class="currentScroll==='all'?'scrollItem selectItem':'scrollItem'" @click="handleChangeTime('all')">累计</view>-->
|
|
<!-- </view>-->
|
|
<scroll-view scroll-x="true" class="navList" :scrollIntoView="currentScroll" :scroll-with-animation="true">
|
|
<view :style="{width: `${60*scrollList.length + 40}px`,height:'100%'}">
|
|
<view :class="currentScroll===`item${index+1}`?'scrollItem selectItem':'scrollItem'" v-for="(item,index) in scrollList" :key="index" :id="`item${index+1}`" @click="handleChangeTime(index+1)">{{item}}</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<view class="modalBox">
|
|
<view class="modalTitleBox">
|
|
<view class="modalTitleItem" :style="{width: 'calc(100% - 390rpx)',textAlign:'left'}">
|
|
<view class="modalIndex"></view>
|
|
<text class="modalText">{{ type===1?'对客销售':type===2?'营业收入':type===3?'入区车流':'' }}</text>
|
|
<text class="modalUnit">{{type===3?'/万辆':'/万元'}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="sortBox">
|
|
<view class="sortItem" @click="handleChangeSortName(1)">
|
|
<text class="sortText">{{ `${Number(curYear.toString().slice(2))}年${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">{{ `${Number(curYear.toString().slice(2)) - 1}年${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>
|
|
|
|
|
|
<view class="modalDetail">
|
|
<scroll-view :scroll-y="true" class="typeFirst" :style="{height: pageType===1?'calc(100vh - 270px)':'calc(100vh - 240px)'}">
|
|
<view class="listItem" v-for="(item,index) in dataList" :key="index">
|
|
<view 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>
|
|
</view>
|
|
<view class="contentRight">
|
|
<view 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>
|
|
<view 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>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view 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">{{ curYear-1 }}</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>
|
|
</view>
|
|
|
|
<view class="otherCarBox" v-if="type!==3">
|
|
<view 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>
|
|
</view>
|
|
<view class="MoreBox" @click="handleGoServerPartDetail(item)">
|
|
<img class="goMoreIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/goMore.svg"/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="load-more" v-if="allDateList && allDateList.length>10*selectIndexPage">
|
|
<text @click="handleGetMore">{{'点击加载更多'}}</text>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import request from '@/util/index.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
statusBarHeight:'',
|
|
menu:{},
|
|
pageType: 1, // 选项卡选择几
|
|
type:1,// 页面显示数据的判断
|
|
useInfo:{},
|
|
currentScroll:'',// 时间横向滚动当前选择的
|
|
scrollList:'',// 时间的横向滚动的数据
|
|
lastDay:'',// 最近有效日期
|
|
dataList:[],// 分页数据
|
|
allDateList:[],// 全部数据
|
|
thisMonth:'',// 当前月份
|
|
curYear:'',// 当前年份
|
|
sortType: 1,// 正序降序 0正序 1降序
|
|
sortName: 3,// 排序字段 1 24年营收 2 23年营收 3营收增长 4营收增幅
|
|
selectIndexPage: 1,// 页数
|
|
query:{},// 传递的query
|
|
}
|
|
},
|
|
onLoad(query){
|
|
console.log('query',query)
|
|
this.query = query
|
|
// 获取手机参数对页面进行适配
|
|
let systemInfo = uni.getSystemInfoSync()
|
|
this.statusBarHeight = Number(systemInfo.statusBarHeight)
|
|
this.menu = uni.getMenuButtonBoundingClientRect()
|
|
|
|
// 获取用户信息
|
|
let userInfo = uni.getStorageSync('vuex')
|
|
userInfo = JSON.parse(userInfo)
|
|
this.useInfo = JSON.parse(JSON.stringify(userInfo))
|
|
|
|
this.lastDay = uni.getStorageSync('lastDay')
|
|
const nowDate = new Date(this.lastDay)
|
|
let nowYear = nowDate.getFullYear()
|
|
let nowMonth = nowDate.getMonth() + 1
|
|
|
|
this.type = Number(query.type)
|
|
|
|
const compareDate = new Date(query.yearMonth)
|
|
let compareYear = compareDate.getFullYear()
|
|
let compareMonth = compareDate.getMonth() + 1
|
|
this.curYear = compareYear
|
|
|
|
let timeList = []
|
|
if (compareYear<nowYear){
|
|
for (let i = 1;i<=12;i++){
|
|
timeList.push(`${i}月`)
|
|
}
|
|
}else{
|
|
for (let i = 1;i<=compareMonth;i++){
|
|
timeList.push(`${i}月`)
|
|
}
|
|
}
|
|
this.currentScroll = 'item' + query.thisMonth
|
|
this.thisMonth = query.thisMonth
|
|
console.log('timeList',timeList)
|
|
this.scrollList = timeList
|
|
|
|
|
|
// 请求数据
|
|
this.handleGetData()
|
|
},
|
|
methods:{
|
|
handleBack(){
|
|
uni.navigateBack({
|
|
delta: 1
|
|
});
|
|
},
|
|
// 跳转到详情
|
|
handleGoServerPartDetail(item){
|
|
console.log('item',item)
|
|
this.$util.toNextRoute('navigateTo', `/pages/revenueStatistics/detail?time=${this.query.yearMonth}&&month=${this.curYear}-${this.thisMonth<10?'0'+this.thisMonth:this.thisMonth}&&id=${item.ServerpartId}&&name=${item.ServerpartName}`)
|
|
},
|
|
// 点击加载更多
|
|
handleGetMore(){
|
|
this.selectIndexPage +=1
|
|
this.dataList = this.allDateList.slice(0,this.selectIndexPage * 10)
|
|
},
|
|
// 点击月份改变时间
|
|
handleChangeTime(month){
|
|
this.currentScroll = 'item' + month
|
|
this.thisMonth = month
|
|
|
|
this.handleGetData()
|
|
},
|
|
// 改变按月还是统计
|
|
handleChangeType(value){
|
|
this.pageType = value
|
|
// 请求数据
|
|
this.handleGetData()
|
|
},
|
|
// 获取排名信息
|
|
async handleGetData(){
|
|
this.dataList = []
|
|
this.allDateList = []
|
|
this.selectIndexPage = 1
|
|
uni.showLoading({
|
|
title: '正在加载...'
|
|
})
|
|
let monthText = this.currentScroll.split('item')[1]
|
|
|
|
const req = {
|
|
calcType:this.pageType,
|
|
pushProvinceCode:this.useInfo.userData.ProvinceCode || '340000',
|
|
curYear:this.curYear,
|
|
compareYear:this.curYear-1,
|
|
StatisticsMonth:monthText,
|
|
StatisticsDate:this.lastDay,
|
|
businessRegion:1,
|
|
Dimension: this.type===3?3:'',
|
|
SortStr:`${this.type===1?'revenue':this.type===2?'account':this.type===3?'bayonet':''} ${this.sortType===0?'asc':'desc'}`
|
|
}
|
|
console.log('req',req)
|
|
const data = await request.$webGet('CommercialApi/Revenue/GetMonthlySPINCAnalysis',req)
|
|
console.log('data',data)
|
|
|
|
this.allDateList = this.handleGetSort(data.Result_Data.List)
|
|
this.dataList = this.allDateList.slice(0,this.selectIndexPage * 10)
|
|
|
|
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
|
|
}
|
|
this.allDateList = this.handleGetSort(this.allDateList)
|
|
this.dataList = this.allDateList.slice(0,this.selectIndexPage * 10)
|
|
this.$forceUpdate()
|
|
uni.hideLoading()
|
|
},
|
|
// 排序方法
|
|
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;
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.main{
|
|
width: 100%;
|
|
background: #fff;
|
|
.bigBg{
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/revenueBackground.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 640rpx;
|
|
.top{
|
|
width: 100%;
|
|
height: 324rpx;
|
|
//background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/rankBg.png");
|
|
//background-repeat: no-repeat;
|
|
//background-position: 0 0;
|
|
//background-size: 100% 100%;
|
|
.header{
|
|
position: fixed;
|
|
width: 100%;
|
|
padding: 0 16px;
|
|
box-sizing: border-box;
|
|
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/revenueBackground.png");
|
|
background-repeat: no-repeat;
|
|
background-position: 0 0;
|
|
background-size: 100% 640rpx;
|
|
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;
|
|
.revenueDetailTitleBox{
|
|
width: 100%;
|
|
height: 90rpx;
|
|
background: linear-gradient(180deg, #CDE1FF 0%, #ffffff 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{
|
|
display: flex;
|
|
align-items: center;
|
|
.contentMonth{
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #FFFFFF;
|
|
line-height: 24rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
padding: 2rpx 8rpx;
|
|
border-radius: 4rpx;
|
|
margin-right: 8rpx;
|
|
background: #F2792E;
|
|
}
|
|
.leftText{
|
|
font-family: DingTalk, DingTalk;
|
|
font-weight: 600;
|
|
font-size: 36rpx;
|
|
color: #000000;
|
|
line-height: 44rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
.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: #F2F1F1;
|
|
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: #FFFFFF;
|
|
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: 60rpx;
|
|
.scrollItem{
|
|
width: 60px;
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #A69E9F;
|
|
line-height: 50rpx;
|
|
display: inline-block;
|
|
text-align: center;
|
|
}
|
|
.selectItem{
|
|
display: inline-block;
|
|
width: 60px;
|
|
font-size: 28rpx;
|
|
text-align: center;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 600;
|
|
color: #AFD1FF;
|
|
position: relative;
|
|
line-height: 40rpx;
|
|
}
|
|
.selectItem:after{
|
|
content:'';
|
|
display: inline-block;
|
|
width: 80%;
|
|
position: absolute;
|
|
height: 4rpx;
|
|
left: 10%;
|
|
bottom: 0px;
|
|
background: #AFD1FF;
|
|
}
|
|
}
|
|
}
|
|
.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{
|
|
.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{
|
|
width: calc(100% / 3);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
.itemLabel{
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #9A9A9A;
|
|
line-height: 36rpx;
|
|
text-align: right;
|
|
}
|
|
.itemValue{
|
|
font-size: 28rpx;
|
|
font-family: DINAlternate, DINAlternate;
|
|
font-weight: bold;
|
|
color: #160002;
|
|
line-height: 32rpx;
|
|
margin-top: 8rpx;
|
|
text-align: right;
|
|
}
|
|
}
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.load-more {
|
|
text-align: center;
|
|
width: 100%;
|
|
height: 80rpx;
|
|
color: #9999;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
.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>
|