2057 lines
73 KiB
Vue
2057 lines
73 KiB
Vue
<template>
|
|
<div class="main">
|
|
<div
|
|
:class="
|
|
selectFestival === 1 || selectFestival === 2
|
|
? 'top springTop'
|
|
: selectFestival === 3
|
|
? 'top qmTop'
|
|
: selectFestival === 4
|
|
? 'top labourTop'
|
|
: selectFestival === 5
|
|
? 'top dragonBoatTop'
|
|
: selectFestival === 6
|
|
? 'top summerHolidayTop'
|
|
: selectFestival === 7
|
|
? 'top midAutumnTop'
|
|
: selectFestival === 8
|
|
? 'top nationalDayTop'
|
|
: ''
|
|
"
|
|
>
|
|
<div
|
|
:class="
|
|
selectFestival === 1 || selectFestival === 2
|
|
? 'header headerSpring'
|
|
: selectFestival === 3
|
|
? 'header headerQm'
|
|
: selectFestival === 4
|
|
? 'header headerLabour'
|
|
: selectFestival === 5
|
|
? 'header headerDragonBoat'
|
|
: selectFestival === 6
|
|
? 'header summerHolidayBoat'
|
|
: selectFestival === 7
|
|
? 'header midAutumnBoat'
|
|
: selectFestival === 8
|
|
? 'header nationalDayBoat'
|
|
: ''
|
|
"
|
|
: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 === 1 || selectFestival === 2
|
|
? 'revenueDetailTitleBox springTitleBox'
|
|
: selectFestival === 3
|
|
? 'revenueDetailTitleBox qmTitleBox'
|
|
: selectFestival === 4
|
|
? 'revenueDetailTitleBox labourTitleBox'
|
|
: selectFestival === 5
|
|
? 'revenueDetailTitleBox dragonBoatTitleBox'
|
|
: selectFestival === 6
|
|
? 'revenueDetailTitleBox summerHolidayTitleBox'
|
|
: selectFestival === 7
|
|
? 'revenueDetailTitleBox midAutumnTitleBox'
|
|
: selectFestival === 8
|
|
? 'revenueDetailTitleBox nationalDayTitleBox'
|
|
: ''
|
|
"
|
|
>
|
|
<div class="left">
|
|
<img
|
|
class="detailLogo"
|
|
:src="
|
|
selectFestival === 1 || selectFestival === 2
|
|
? 'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/serverDetail.png'
|
|
: selectFestival === 3
|
|
? 'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/qmServicepartDetail.png'
|
|
: selectFestival === 4
|
|
? 'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/labourServerPartDetail.png'
|
|
: selectFestival === 5
|
|
? 'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/dragonBoatDetail.png'
|
|
: selectFestival === 6
|
|
? 'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/summerHolidayDetail.png'
|
|
: selectFestival === 7
|
|
? 'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/midAutumnDetail.png'
|
|
: selectFestival === 8
|
|
? 'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/nationalDayDetail.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 === 1 || selectFestival === 2
|
|
? 'navList springNav'
|
|
: selectFestival === 3
|
|
? 'navList qmNav'
|
|
: selectFestival === 4
|
|
? 'navList labourNav'
|
|
: selectFestival === 5
|
|
? 'navList dragonBoatNav'
|
|
: selectFestival === 6
|
|
? 'navList summerHolidayNav'
|
|
: selectFestival === 7
|
|
? 'navList midAutumnNav'
|
|
: selectFestival === 8
|
|
? 'navList nationalDayNav'
|
|
: ''
|
|
"
|
|
: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 === 1 || selectFestival === 2
|
|
? '#DB6465'
|
|
: selectFestival === 3
|
|
? '#3B9285'
|
|
: selectFestival === 4
|
|
? '#D14702'
|
|
: selectFestival === 5
|
|
? '#3E8958'
|
|
: selectFestival === 6
|
|
? '#007797'
|
|
: selectFestival === 7
|
|
? '#3E8958'
|
|
: selectFestival === 8
|
|
? '#3E8958'
|
|
: '',
|
|
}"
|
|
></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);
|
|
}
|
|
if (query.festivalObj) {
|
|
this.festivalObj = JSON.parse(query.festivalObj);
|
|
console.log("this.festivalObj", this.festivalObj);
|
|
this.selectFestival = this.festivalObj.HolidayType;
|
|
}
|
|
if (query.time) {
|
|
this.currentScroll = "item" + query.time;
|
|
this.allDateDay = this.currentScroll.split("item")[1];
|
|
}
|
|
|
|
this.lastDay = uni.getStorageSync("lastDay");
|
|
const currentDate = new Date(this.lastDay);
|
|
let nowTime = currentDate.getTime();
|
|
let dayList = [];
|
|
if (
|
|
new Date(this.festivalObj.startTime).getTime() <= nowTime &&
|
|
new Date(this.festivalObj.endTime).getTime() > nowTime
|
|
) {
|
|
let dayNumber = moment(this.lastDay).diff(
|
|
this.festivalObj.startTime,
|
|
"days"
|
|
);
|
|
console.log("dayNumber", dayNumber);
|
|
if (dayNumber > 0) {
|
|
for (let i = 0; i < dayNumber; i++) {
|
|
dayList.push({
|
|
label: `第${i + 1}天`,
|
|
value: moment(this.festivalObj.startTime)
|
|
.add(i, "days")
|
|
.format("YYYY-MM-DD"),
|
|
});
|
|
}
|
|
}
|
|
} else if (new Date(this.festivalObj.endTime).getTime() < nowTime) {
|
|
// 当前时间已经过了这个时间范围了
|
|
let dayNumber =
|
|
moment(this.festivalObj.endTime).diff(
|
|
this.festivalObj.startTime,
|
|
"days"
|
|
) + 1;
|
|
console.log("dayNumber", dayNumber);
|
|
if (dayNumber > 0) {
|
|
for (let i = 0; i < dayNumber; i++) {
|
|
dayList.push({
|
|
label: `第${i + 1}天`,
|
|
value: moment(this.festivalObj.startTime)
|
|
.add(i, "days")
|
|
.format("YYYY-MM-DD"),
|
|
});
|
|
}
|
|
}
|
|
}
|
|
this.scrollList = dayList;
|
|
this.handleGetData();
|
|
return;
|
|
|
|
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 {
|
|
this.currentScroll = "item" + this.lastDay;
|
|
}
|
|
// else if (this.selectFestival===1){
|
|
// this.currentScroll = 'item'+ this.lastDay
|
|
// }else if (this.selectFestival===2){
|
|
// this.currentScroll = 'item'+ this.lastDay
|
|
// }else if (this.selectFestival===3){
|
|
// 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";
|
|
this.allDateDay = "2024-04-07";
|
|
}
|
|
} else if (this.selectFestival === 2) {
|
|
dayNumber = moment().diff("2024-04-30", "days");
|
|
if (dayNumber <= 7) {
|
|
this.howDayNumber = dayNumber;
|
|
} else {
|
|
this.howDayNumber = 7;
|
|
this.currentScroll = "item" + "2024-05-06";
|
|
this.lastDay = "2024-05-06";
|
|
this.allDateDay = "2024-05-06";
|
|
}
|
|
} else if (this.selectFestival === 3) {
|
|
dayNumber = moment().diff("2024-06-07", "days");
|
|
if (dayNumber <= 5) {
|
|
this.howDayNumber = dayNumber;
|
|
} else {
|
|
this.howDayNumber = 5;
|
|
this.currentScroll = "item" + "2024-06-11";
|
|
this.allDateDay = "2024-06-11";
|
|
}
|
|
} else if (this.selectFestival === 4) {
|
|
dayNumber = moment().diff("2024-07-01", "days"); // 暑期
|
|
if (dayNumber <= 62) {
|
|
this.howDayNumber = dayNumber;
|
|
} else {
|
|
this.howDayNumber = 62;
|
|
this.currentScroll = "item" + "2024-08-31";
|
|
this.lastDay = "2024-08-31";
|
|
this.allDateDay = "2024-09-01";
|
|
}
|
|
} else if (this.selectFestival === 5) {
|
|
dayNumber = moment().diff("2024-09-14", "days"); // 中秋
|
|
if (dayNumber <= 5) {
|
|
this.howDayNumber = dayNumber;
|
|
} else {
|
|
this.howDayNumber = 5;
|
|
this.currentScroll = "item" + "2024-09-18";
|
|
this.lastDay = "2024-09-18";
|
|
this.allDateDay = "2024-09-18";
|
|
}
|
|
} else if (this.selectFestival === 6) {
|
|
dayNumber = moment().diff("2024-09-30", "days"); // 国庆
|
|
if (dayNumber <= 9) {
|
|
this.howDayNumber = dayNumber;
|
|
} else {
|
|
this.howDayNumber = 9;
|
|
this.currentScroll = "item" + "2024-10-08";
|
|
this.lastDay = "2024-10-08";
|
|
this.allDateDay = "2024-10-08";
|
|
}
|
|
}
|
|
|
|
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"),
|
|
});
|
|
} else if (this.selectFestival === 2) {
|
|
dateList.push({
|
|
label: `第${i}天`,
|
|
value: moment("2024-04-29").add(i, "days").format("YYYY-MM-DD"),
|
|
});
|
|
} else if (this.selectFestival === 3) {
|
|
dateList.push({
|
|
label: `第${i}天`,
|
|
value: moment("2024-06-06").add(i, "days").format("YYYY-MM-DD"),
|
|
});
|
|
} else if (this.selectFestival === 4) {
|
|
dateList.push({
|
|
label: `第${i}天`,
|
|
value: moment("2024-06-30").add(i, "days").format("YYYY-MM-DD"),
|
|
}); // 端午
|
|
} else if (this.selectFestival === 5) {
|
|
dateList.push({
|
|
label: `第${i}天`,
|
|
value: moment("2024-09-13").add(i, "days").format("YYYY-MM-DD"),
|
|
}); // 中秋
|
|
} else if (this.selectFestival === 6) {
|
|
dateList.push({
|
|
label: `第${i}天`,
|
|
value: moment("2024-09-29").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 = date;
|
|
}
|
|
|
|
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: "340000",
|
|
curYear: this.festivalObj.curYear,
|
|
compareYear: this.festivalObj.compareYear,
|
|
HolidayType: this.selectFestival,
|
|
// this.selectFestival === 0
|
|
// ? 2
|
|
// : this.selectFestival === 1
|
|
// ? 3
|
|
// : this.selectFestival === 2
|
|
// ? 4
|
|
// : this.selectFestival === 3
|
|
// ? 5
|
|
// : this.selectFestival === 4
|
|
// ? 6
|
|
// : this.selectFestival === 5
|
|
// ? 7
|
|
// : this.selectFestival === 6
|
|
// ? 8
|
|
// : "",
|
|
StatisticsDate: this.allDateDay,
|
|
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); //当前选中服务区信息
|
|
console.log("obj", obj);
|
|
this.$util.toNextRoute(
|
|
"navigateTo",
|
|
`/pages/nationalPage/merchantRevenue?ServerpartId=${
|
|
obj.ServerpartId
|
|
}&type=${this.type}&festivalObj=${JSON.stringify(
|
|
this.festivalObj
|
|
)}¤tScroll=${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");
|
|
}
|
|
.labourTop {
|
|
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/labourBg.png");
|
|
}
|
|
.dragonBoatTop {
|
|
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/dragonBoatBg.png");
|
|
}
|
|
.summerHolidayTop {
|
|
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/summerHolidayBg.png");
|
|
}
|
|
.midAutumnTop {
|
|
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/midAutumnBg.png") !important;
|
|
}
|
|
.nationalDayTop {
|
|
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/nationalDayBg.png") !important;
|
|
}
|
|
.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");
|
|
}
|
|
.headerLabour {
|
|
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/labourBg.png");
|
|
}
|
|
.headerDragonBoat {
|
|
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/dragonBoatBg.png");
|
|
}
|
|
.summerHolidayBoat {
|
|
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/summerHolidayBg.png");
|
|
}
|
|
.midAutumnBoat {
|
|
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/midAutumnBg.png") !important;
|
|
}
|
|
.nationalDayBoat {
|
|
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/nationalDayBg.png") !important;
|
|
}
|
|
.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%
|
|
);
|
|
}
|
|
.labourTitleBox {
|
|
background: linear-gradient(
|
|
360deg,
|
|
rgba(255, 236, 208, 0) 0%,
|
|
#ffecd0 100%
|
|
);
|
|
}
|
|
.dragonBoatTitleBox {
|
|
background: linear-gradient(
|
|
360deg,
|
|
rgba(225, 241, 237, 0) 0%,
|
|
#e1f1ed 100%
|
|
);
|
|
}
|
|
.summerHolidayTitleBox {
|
|
background: linear-gradient(
|
|
360deg,
|
|
rgba(214, 238, 243, 0) 0%,
|
|
#d1e9ee 100%
|
|
);
|
|
}
|
|
.midAutumnTitleBox {
|
|
background: linear-gradient(
|
|
360deg,
|
|
rgba(255, 215, 180, 0) 0%,
|
|
#fff3e9 100%
|
|
);
|
|
}
|
|
.nationalDayTitleBox {
|
|
background: linear-gradient(
|
|
360deg,
|
|
rgba(255, 218, 210, 0) 0%,
|
|
#fff2f0 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;
|
|
}
|
|
}
|
|
.labourNav {
|
|
.selectItem {
|
|
color: #d14702 !important;
|
|
}
|
|
}
|
|
.dragonBoatNav {
|
|
.selectItem {
|
|
color: #3e8958 !important;
|
|
}
|
|
}
|
|
.summerHolidayNav {
|
|
.selectItem {
|
|
color: #007797 !important;
|
|
}
|
|
}
|
|
.midAutumnNav {
|
|
.selectItem {
|
|
color: #da5015;
|
|
}
|
|
}
|
|
.nationalDayNav {
|
|
.selectItem {
|
|
color: #d52020;
|
|
}
|
|
}
|
|
}
|
|
.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>
|