802 lines
35 KiB
Vue
802 lines
35 KiB
Vue
<template>
|
|
<div class="main">
|
|
<div class="top">
|
|
<div 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"/>
|
|
<img class="pageTitle" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/pageTitle.png"/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pageContent">
|
|
<div class="springTravelBox">
|
|
<div class="overAllData">
|
|
<div class="overAllDataTop">
|
|
<div class="titleBox">
|
|
<img class="titleImg" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/allDataTitle.png" />
|
|
<text class="titleNotice">{{`/统计到${allDateDay}`}}</text>
|
|
</div>
|
|
<div class="contentTitleBox">
|
|
<text class="contentTitle">对客销售金额</text>
|
|
<div class="YOYBox">
|
|
<text class="YOYBoxText">同比去年</text>
|
|
<text class="YOYBoxValue">
|
|
{{`${revenueAdd>0?'+':''}${revenueAdd?revenueAdd:'-'}%`}}
|
|
</text>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="overAllDataBottom">
|
|
<div class="pkBox">
|
|
<div class="leftBox">
|
|
<text class="value">{{pageData.lYearRevenue.data?$util.getMoney(pageData.lYearRevenue.data / 10000):'0.00'}}</text>
|
|
<text class="label">2023年/万元</text>
|
|
</div>
|
|
<div class="rightBox">
|
|
<text class="value">{{pageData.curYearRevenue.data?$util.getMoney(pageData.curYearRevenue.data / 10000):'0.00'}}</text>
|
|
<text class="label">2024年/万元</text>
|
|
</div>
|
|
<img class="pkLogo" src="https://eshangtech.com/ShopICO/ahyd-BID/national/vs.svg"/>
|
|
</div>
|
|
|
|
<div class="otherListBox">
|
|
<div class="listTitleBox">
|
|
<div class="titleItem" :style="{width: 'calc(100% - 390rpx)',textAlign:'left'}">类别</div>
|
|
<div class="titleItem" style="width: 130rpx">2023年</div>
|
|
<div class="titleItem" style="width: 130rpx">2024年</div>
|
|
<div class="titleItem" style="width: 130rpx">同比去年</div>
|
|
</div>
|
|
|
|
<div class="listValueBox">
|
|
<div class="row">
|
|
<div class="valueItem" :style="{width: 'calc(100% - 390rpx)',textAlign:'left'}">自营营业额</div>
|
|
<div class="valueItemBox" style="width: 130rpx">{{pageData.lYearSelfRevenue.data?$util.getMoney(pageData.lYearSelfRevenue.data / 10000):'0.00'}}</div>
|
|
<div class="valueItemBox" style="width: 130rpx">{{pageData.curYearSelfRevenue.data?$util.getMoney(pageData.curYearSelfRevenue.data / 10000):'0.00'}}</div>
|
|
<div class="addItem" style="width: 130rpx">
|
|
<span :style="{color:selfRevenueAdd>0?'#E83944':selfRevenueAdd<0?'#0E9976':''}">{{selfRevenueAdd>0?'+':selfRevenueAdd<0?'':''}}</span>
|
|
<span :style="{color:selfRevenueAdd>0?'#E83944':selfRevenueAdd<0?'#0E9976':''}">{{`${selfRevenueAdd || '-'}%`}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="valueItem" :style="{width: 'calc(100% - 390rpx)',textAlign:'left'}">驿达春运营收</div>
|
|
<div class="valueItemBox" style="width: 130rpx">{{pageData.lYearAccount.data?$util.getMoney(pageData.lYearAccount.data / 10000):'0.00'}}</div>
|
|
<div class="valueItemBox" style="width: 130rpx">{{pageData.curYearAccount.data?$util.getMoney(pageData.curYearAccount.data / 10000):'0.00'}}</div>
|
|
<div class="addItem" style="width: 130rpx">
|
|
<span :style="{color:springRevenueAdd>0?'#E83944':springRevenueAdd<0?'#0E9976':''}">{{springRevenueAdd>0?'+':springRevenueAdd<0?'':''}}</span>
|
|
<span :style="{color:springRevenueAdd>0?'#E83944':springRevenueAdd<0?'#0E9976':''}">{{`${springRevenueAdd || '-'}%`}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="valueItem" :style="{width: 'calc(100% - 390rpx)',textAlign:'left'}">商铺租赁</div>
|
|
<div class="valueItemBox" style="width: 130rpx">{{pageData.lYearCoopRevenue.data?$util.getMoney(pageData.lYearCoopRevenue.data / 10000):'0.00'}}</div>
|
|
<div class="valueItemBox" style="width: 130rpx">{{pageData.curYearCoopRevenue.data?$util.getMoney(pageData.curYearCoopRevenue.data / 10000):'0.00'}}</div>
|
|
<div class="addItem" style="width: 130rpx">
|
|
<span :style="{color:CoopRevenueAdd>0?'#E83944':CoopRevenueAdd<0?'#0E9976':''}">{{CoopRevenueAdd>0?'+':CoopRevenueAdd<0?'':''}}</span>
|
|
<span :style="{color:CoopRevenueAdd>0?'#E83944':CoopRevenueAdd<0?'#0E9976':''}">{{`${CoopRevenueAdd || '-'}%`}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="valueItem" :style="{width: 'calc(100% - 390rpx)',textAlign:'left'}">万佳城市</div>
|
|
<div class="valueItemBox" style="width: 130rpx">{{pageData.lYearWJRevenue.data?$util.getMoney(pageData.lYearWJRevenue.data / 10000):'0.00'}}</div>
|
|
<div class="valueItemBox" style="width: 130rpx">{{pageData.curYearWJRevenue.data?$util.getMoney(pageData.curYearWJRevenue.data / 10000):'0.00'}}</div>
|
|
<div class="addItem" style="width: 130rpx">
|
|
<span :style="{color:WJCityAdd>0?'#E83944':WJCityAdd<0?'#0E9976':''}">{{WJCityAdd>0?'+':WJCityAdd<0?'':''}}</span>
|
|
<span :style="{color:WJCityAdd>0?'#E83944':WJCityAdd<0?'#0E9976':''}">{{`${WJCityAdd || '-'}%`}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="valueItem" :style="{width: 'calc(100% - 390rpx)',textAlign:'left'}">入区车流</div>
|
|
<div class="valueItemBox" style="width: 130rpx">{{pageData.lYearBayonet.data?$util.getMoney(pageData.lYearBayonet.data / 10000):'0.00'}}</div>
|
|
<div class="valueItemBox" style="width: 130rpx">{{pageData.curYearBayonet.data?$util.getMoney(pageData.curYearBayonet.data / 10000):'0.00'}}</div>
|
|
<div class="addItem" style="width: 130rpx">
|
|
<span :style="{color:entryCarAdd>0?'#E83944':entryCarAdd<0?'#0E9976':''}">{{entryCarAdd>0?'+':entryCarAdd<0?'':''}}</span>
|
|
<span :style="{color:entryCarAdd>0?'#E83944':entryCarAdd<0?'#0E9976':''}">{{`${entryCarAdd || '-'}%`}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="revenueDetail">
|
|
<div class="revenueDetailTitleBox">
|
|
<img class="detailLogo" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/revenueDetailLogo.png"/>
|
|
<img class="detailIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/revenueDetailIcon.png"/>
|
|
</div>
|
|
<div class="revenueContent">
|
|
<scroll-view scroll-x="true" class="navList" :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 class="modalBox">
|
|
<div class="modalTitleBox">
|
|
<div class="modalIndex"></div>
|
|
<text class="modalText">自营营业额</text>
|
|
<text class="modalUnit">/万元</text>
|
|
</div>
|
|
|
|
<div class="modalDetail">
|
|
<div class="modalDetailTitle">
|
|
<div class="titleItem" :style="{width: 'calc(100% - 390rpx)',textAlign:'left'}">类别</div>
|
|
<div class="titleItem" style="width: 130rpx">2023年</div>
|
|
<div class="titleItem" style="width: 130rpx">2024年</div>
|
|
<div class="titleItem" style="width: 130rpx">同比去年</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="valueItem" :style="{width: 'calc(100% - 390rpx)',textAlign:'left'}">自营餐饮</div>
|
|
<div class="compareItem" style="width: 130rpx">{{pageData.lYearSCAccount.value?$util.getMoney(pageData.lYearSCAccount.value / 10000):'0.00'}}</div>
|
|
<div class="compareItem" style="width: 130rpx">{{pageData.curYearSCAccount.value?$util.getMoney(pageData.curYearSCAccount.value / 10000):'0.00'}}</div>
|
|
<div class="addItem" style="width: 130rpx">
|
|
<span :style="{color:SCAccountAdd>0?'#E83944':SCAccountAdd<0?'#0E9976':''}">{{SCAccountAdd>0?'+':SCAccountAdd<0?'':''}}</span>
|
|
<span :style="{color:SCAccountAdd>0?'#E83944':SCAccountAdd<0?'#0E9976':''}">{{`${SCAccountAdd || '-'}%`}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="valueItem" :style="{width: 'calc(100% - 390rpx)',textAlign:'left'}">自营便利店</div>
|
|
<div class="compareItem" style="width: 130rpx">{{pageData.lYearCVSAccount.value?$util.getMoney(pageData.lYearCVSAccount.value / 10000):'0.00'}}</div>
|
|
<div class="compareItem" style="width: 130rpx">{{pageData.curYearCVSAccount.value?$util.getMoney(pageData.curYearCVSAccount.value / 10000):'0.00'}}</div>
|
|
<div class="addItem" style="width: 130rpx">
|
|
<span :style="{color:CVSAccountAdd>0?'#E83944':CVSAccountAdd<0?'#0E9976':''}">{{CVSAccountAdd>0?'+':CVSAccountAdd<0?'':''}}</span>
|
|
<span :style="{color:CVSAccountAdd>0?'#E83944':CVSAccountAdd<0?'#0E9976':''}">{{`${CVSAccountAdd || '-'}%`}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="valueItem" :style="{width: 'calc(100% - 390rpx)',textAlign:'left'}">合计</div>
|
|
<div class="compareItem" style="width: 130rpx">{{pageData.lYearSCAccount.value || pageData.lYearCVSAccount.value?$util.getMoney((Number(pageData.lYearSCAccount.value) + Number(pageData.lYearCVSAccount.value)) / 10000):'0.00'}}</div>
|
|
<div class="compareItem" style="width: 130rpx">{{pageData.curYearSCAccount.value || pageData.curYearCVSAccount.value?$util.getMoney((Number(pageData.curYearSCAccount.value) + Number(pageData.curYearCVSAccount.value)) / 10000):'0.00'}}</div>
|
|
<div class="addItem" style="width: 130rpx">
|
|
<span :style="{color:SCCVSAccountAdd>0?'#E83944':SCCVSAccountAdd<0?'#0E9976':''}">{{SCCVSAccountAdd>0?'+':SCCVSAccountAdd<0?'':''}}</span>
|
|
<span :style="{color:SCCVSAccountAdd>0?'#E83944':SCCVSAccountAdd<0?'#0E9976':''}">{{`${SCCVSAccountAdd || '-'}%`}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modalBox">
|
|
<div class="modalTitleBox">
|
|
<div class="modalIndex"></div>
|
|
<text class="modalText">驿达春运营收</text>
|
|
<text class="modalUnit">/万元</text>
|
|
</div>
|
|
|
|
<div class="modalDetail">
|
|
<div class="modalDetailTitle">
|
|
<div class="titleItem" :style="{width: 'calc(100% - 390rpx)',textAlign:'left'}">类别</div>
|
|
<div class="titleItem" style="width: 130rpx">2023年</div>
|
|
<div class="titleItem" style="width: 130rpx">2024年</div>
|
|
<div class="titleItem" style="width: 130rpx">同比去年</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="valueItem" :style="{width: 'calc(100% - 390rpx)',textAlign:'left'}">自营餐饮</div>
|
|
<div class="compareItem" style="width: 130rpx">-</div>
|
|
<div class="compareItem" style="width: 130rpx">-</div>
|
|
<div class="addItem" style="width: 130rpx">-</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="valueItem" :style="{width: 'calc(100% - 390rpx)',textAlign:'left'}">自营便利店</div>
|
|
<div class="compareItem" style="width: 130rpx">-</div>
|
|
<div class="compareItem" style="width: 130rpx">-</div>
|
|
<div class="addItem" style="width: 130rpx">-</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="valueItem" :style="{width: 'calc(100% - 390rpx)',textAlign:'left'}">商铺租赁营收</div>
|
|
<div class="compareItem" style="width: 130rpx">{{pageData.lYearCoopRevenue.value?$util.getMoney(pageData.lYearCoopRevenue.value / 10000):'0.00'}}</div>
|
|
<div class="compareItem" style="width: 130rpx">{{pageData.curYearCoopRevenue.value?$util.getMoney(pageData.curYearCoopRevenue.value / 10000):'0.00'}}</div>
|
|
<div class="addItem" style="width: 130rpx">
|
|
<span :style="{color:CoopRevenueDayilyAdd>0?'#E83944':CoopRevenueDayilyAdd<0?'#0E9976':''}">{{CoopRevenueDayilyAdd>0?'+':CoopRevenueDayilyAdd<0?'':''}}</span>
|
|
<span :style="{color:CoopRevenueDayilyAdd>0?'#E83944':CoopRevenueDayilyAdd<0?'#0E9976':''}">{{`${CoopRevenueDayilyAdd || '-'}%`}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="valueItem" :style="{width: 'calc(100% - 390rpx)',textAlign:'left'}">万佳城市店</div>
|
|
<div class="compareItem" style="width: 130rpx">{{pageData.lYearWJRevenue.value?$util.getMoney(pageData.lYearWJRevenue.value / 10000):'0.00'}}</div>
|
|
<div class="compareItem" style="width: 130rpx">{{pageData.curYearWJRevenue.value?$util.getMoney(pageData.curYearWJRevenue.value / 10000):'0.00'}}</div>
|
|
<div class="addItem" style="width: 130rpx">
|
|
<span :style="{color:WjCityDayilyAdd>0?'#E83944':WjCityDayilyAdd<0?'#0E9976':''}">{{WjCityDayilyAdd>0?'+':WjCityDayilyAdd<0?'':''}}</span>
|
|
<span :style="{color:WjCityDayilyAdd>0?'#E83944':WjCityDayilyAdd<0?'#0E9976':''}">{{`${WjCityDayilyAdd || '-'}%`}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="valueItem" :style="{width: 'calc(100% - 390rpx)',textAlign:'left'}">合计</div>
|
|
<div class="compareItem" style="width: 130rpx">-</div>
|
|
<div class="compareItem" style="width: 130rpx">-</div>
|
|
<div class="addItem" style="width: 130rpx">-</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modalBox">
|
|
<div class="modalTitleBox">
|
|
<div class="modalIndex"></div>
|
|
<text class="modalText">加盟餐饮</text>
|
|
<text class="modalUnit">/万元</text>
|
|
</div>
|
|
|
|
<div class="modalDetail">
|
|
<div class="modalDetailTitle">
|
|
<div class="titleItem" :style="{width: 'calc(100% - 390rpx)',textAlign:'left'}">类别</div>
|
|
<div class="titleItem" style="width: 130rpx">2023年</div>
|
|
<div class="titleItem" style="width: 130rpx">2024年</div>
|
|
<div class="titleItem" style="width: 130rpx">同比去年</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="valueItem" :style="{width: 'calc(100% - 390rpx)',textAlign:'left'}">自营餐饮</div>
|
|
<div class="compareItem" style="width: 130rpx">-</div>
|
|
<div class="compareItem" style="width: 130rpx">{{pageData.curYearFCRevenue.value?$util.getMoney(pageData.curYearFCRevenue.value / 10000):'0.00'}}</div>
|
|
<div class="addItem" style="width: 130rpx">-</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="valueItem" :style="{width: 'calc(100% - 390rpx)',textAlign:'left'}">客房其他</div>
|
|
<div class="compareItem" style="width: 130rpx">-</div>
|
|
<div class="compareItem" style="width: 130rpx">{{pageData.curYearGRORevenue.value?$util.getMoney(pageData.curYearGRORevenue.value / 10000):'0.00'}}</div>
|
|
<div class="addItem" style="width: 130rpx">-</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="valueItem" :style="{width: 'calc(100% - 390rpx)',textAlign:'left'}">合计</div>
|
|
<div class="compareItem" style="width: 130rpx">-</div>
|
|
<div class="compareItem" style="width: 130rpx">{{pageData.curYearFCRevenue.value || pageData.curYearGRORevenue.value?$util.getMoney((Number(pageData.curYearFCRevenue.value) + Number(pageData.curYearGRORevenue.value)) / 10000):'0.00'}}</div>
|
|
<div class="addItem" style="width: 130rpx">-</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modalBox">
|
|
<div class="modalTitleBox">
|
|
<div class="modalIndex"></div>
|
|
<text class="modalText">自营提成</text>
|
|
<text class="modalUnit">/万元</text>
|
|
</div>
|
|
|
|
<div class="modalDetail">
|
|
<div class="modalDetailTitle">
|
|
<div class="titleItem" :style="{width: 'calc(100% - 390rpx)',textAlign:'left'}">类别</div>
|
|
<div class="titleItem" style="width: 130rpx">2023年</div>
|
|
<div class="titleItem" style="width: 130rpx">2024年</div>
|
|
<div class="titleItem" style="width: 130rpx">同比去年</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="valueItem" :style="{width: 'calc(100% - 390rpx)',textAlign:'left'}">合计</div>
|
|
<div class="compareItem" style="width: 130rpx">-</div>
|
|
<div class="compareItem" style="width: 130rpx">{{pageData.curYearSelfCoopRevenue.value?$util.getMoney(pageData.curYearSelfCoopRevenue.value / 10000):'0.00'}}</div>
|
|
<div class="addItem" style="width: 130rpx">-</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import request from '@/util/index.js'
|
|
import moment from "moment";
|
|
export default {
|
|
name: "springTravel",
|
|
data(){
|
|
return {
|
|
statusBarHeight:0,
|
|
menu:{},
|
|
scrollList:[
|
|
{label: '1月26日',value:'2024-01-26'},
|
|
{label: '1月27日',value:'2024-01-27'},
|
|
{label: '1月28日',value:'2024-01-28'},
|
|
{label: '1月29日',value:'2024-01-29'},
|
|
{label: '1月30日',value:'2024-01-30'},
|
|
{label: '1月31日',value:'2024-01-31'},
|
|
{label: '2月1日',value:'2024-02-1'},
|
|
{label: '2月2日',value:'2024-02-2'},
|
|
],
|
|
currentScroll:'',
|
|
selectIndex: 2,
|
|
curYear:2024,
|
|
compareYear:2023,
|
|
lastDay:'',
|
|
allDateDay:'',
|
|
pageData:{},// 当天的数据
|
|
yesDayPageData:{},// 前一天的数据
|
|
revenueAdd: 0,// 对客销售金额增长
|
|
selfRevenueAdd: 0,// 自营营业额增长
|
|
springRevenueAdd: 0,// 春运营收增长
|
|
CoopRevenueAdd:0,// 商铺租赁营收增长
|
|
WJCityAdd: 0,// 万佳城市增长
|
|
entryCarAdd:0,// 入区车流增长
|
|
SCAccountAdd:0,// 自营餐饮增长
|
|
CVSAccountAdd:0,// 自营便利店增长
|
|
SCCVSAccountAdd:0,// 自营餐饮和自营便利店的合计增长
|
|
YDCVSAccountAdd:0,// 驿达自营便利店
|
|
WjCityDayilyAdd:0,// 万佳城市店每日
|
|
CoopRevenueDayilyAdd:0,// 商铺租赁每日
|
|
}
|
|
},
|
|
onLoad(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))
|
|
if (query.selectType){
|
|
this.selectIndex = Number(query.selectType)
|
|
}
|
|
|
|
const date = new Date()
|
|
let y = date.getFullYear()
|
|
this.curYear = y
|
|
this.compareYear = y - 1
|
|
console.log('query',query)
|
|
console.log('this.selectIndex',this.selectIndex)
|
|
|
|
this.lastDay = uni.getStorageSync('lastDay')
|
|
this.currentScroll = 'item'+ uni.getStorageSync('lastDay')
|
|
console.log('this.currentScroll',this.currentScroll)
|
|
const lastDate = new Date(this.lastDay)
|
|
let lastM = lastDate.getMonth() + 1
|
|
let lastD = lastDate.getDate()
|
|
this.allDateDay = `${lastM<10?'0'+lastM:lastM}月${lastD<10?'0'+lastD:lastD}日`
|
|
|
|
this.handleGetPageData()
|
|
},
|
|
methods:{
|
|
async handleGetPageData(date){
|
|
uni.showLoading({
|
|
title: '正在加载...'
|
|
})
|
|
let req = {
|
|
pushProvinceCode: this.useInfo.userData.ProvinceCode || '340000',
|
|
curYear:this.curYear,
|
|
compareYear:this.compareYear,
|
|
HolidayType:this.selectIndex,
|
|
StatisticsDate:date || this.lastDay
|
|
}
|
|
const data = await request.$webGet('CommercialApi/Revenue/GetHolidayAnalysis',req)
|
|
console.log('data',data)
|
|
this.pageData = data.Result_Data
|
|
console.log('this.pageData',this.pageData)
|
|
// 对客销售金额增长
|
|
this.revenueAdd = Number((((this.pageData.curYearRevenue.data / this.pageData.lYearRevenue.data)-1)*100).toFixed(2))
|
|
// 自营营业额增长
|
|
this.selfRevenueAdd = Number((((this.pageData.curYearSelfRevenue.data / this.pageData.lYearSelfRevenue.data)-1)*100).toFixed(2))
|
|
// 春运营收增长
|
|
this.springRevenueAdd = Number((((this.pageData.curYearAccount.data / this.pageData.lYearAccount.data)-1)*100).toFixed(2))
|
|
// 商铺租赁营收增长
|
|
this.CoopRevenueAdd = Number((((this.pageData.curYearCoopRevenue.data / this.pageData.lYearCoopRevenue.data)-1)*100).toFixed(2))
|
|
// 万佳城市增长
|
|
this.WJCityAdd = Number((((this.pageData.curYearWJRevenue.data / this.pageData.lYearWJRevenue.data)-1)*100).toFixed(2))
|
|
// 入区车流增长
|
|
this.entryCarAdd = Number((((this.pageData.curYearBayonet.data / this.pageData.lYearBayonet.data)-1)*100).toFixed(2))
|
|
|
|
|
|
// 当日
|
|
// 自营餐饮
|
|
this.SCAccountAdd = Number((((this.pageData.curYearSCAccount.value / this.pageData.lYearSCAccount.value)-1)*100).toFixed(2))
|
|
// 自营便利店增长
|
|
this.CVSAccountAdd = Number((((this.pageData.curYearCVSAccount.value / this.pageData.lYearCVSAccount.value)-1)*100).toFixed(2))
|
|
// 自营餐饮和自营便利店的合计增长
|
|
this.SCCVSAccountAdd = Number(((((Number(this.pageData.curYearCVSAccount.value) + Number(this.pageData.curYearSCAccount.value)) / (Number(this.pageData.lYearCVSAccount.value) + Number(this.pageData.lYearSCAccount.value)))-1)*100).toFixed(2))
|
|
// 驿达自营便利店
|
|
this.YDCVSAccountAdd = Number((((this.pageData.curYearCVSAccount.value / this.pageData.lYearCVSAccount.value)-1)*100).toFixed(2))
|
|
// 万佳城市店
|
|
this.WjCityDayilyAdd = Number((((this.pageData.curYearWJRevenue.value / this.pageData.lYearWJRevenue.value)-1)*100).toFixed(2))
|
|
// 商铺租赁每日
|
|
this.CoopRevenueDayilyAdd = Number((((this.pageData.curYearCoopRevenue.value / this.pageData.lYearCoopRevenue.value)-1)*100).toFixed(2))
|
|
uni.hideLoading()
|
|
},
|
|
handleBack(){
|
|
uni.navigateBack({
|
|
delta: 1
|
|
});
|
|
},
|
|
// 切换时间的方法
|
|
handleChangeTime(value){
|
|
console.log('value',value)
|
|
this.currentScroll = 'item'+value
|
|
this.pageData = null
|
|
this.revenueAdd = 0
|
|
this.selfRevenueAdd = 0
|
|
this.springRevenueAdd = 0
|
|
this.CoopRevenueAdd = 0
|
|
this.WJCityAdd = 0
|
|
this.entryCarAdd = 0
|
|
this.SCAccountAdd = 0
|
|
this.CVSAccountAdd = 0
|
|
this.SCCVSAccountAdd = 0
|
|
this.YDCVSAccountAdd = 0
|
|
this.WjCityDayilyAdd = 0
|
|
this.CoopRevenueDayilyAdd = 0
|
|
this.handleGetPageData(value)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.main{
|
|
width: 100%;
|
|
height: 100vh;
|
|
.top{
|
|
width: 100%;
|
|
height: 432rpx;
|
|
background-image:url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/springTravelBg.png") !important;
|
|
background-repeat: no-repeat;
|
|
background-position: 0 0;
|
|
background-size: 100% 100%;
|
|
//z-index:3;
|
|
.topBg{
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 4;
|
|
}
|
|
.header{
|
|
position: fixed;
|
|
width: 100%;
|
|
padding: 0 16px;
|
|
box-sizing: border-box;
|
|
background-image:url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/springTravelBg.png") !important;
|
|
background-repeat: no-repeat;
|
|
background-position: 0 0;
|
|
background-size: 100% 432rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
z-index: 2;
|
|
.backArrow{
|
|
width: 24px;
|
|
height: 24px;
|
|
margin-right: 16px;
|
|
position: absolute;
|
|
}
|
|
.pageTitle{
|
|
position: absolute;
|
|
width: 280rpx;
|
|
height: 80rpx;
|
|
margin-left: 16rpx;
|
|
bottom: -3px;
|
|
left: 40px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.pageContent{
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 0 32rpx 28rpx;
|
|
transform: translateY(-110rpx);
|
|
.springTravelBox{
|
|
.overAllData{
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 2rpx;
|
|
background: #fff;
|
|
border-radius: 16rpx;
|
|
.overAllDataTop{
|
|
width: 100%;
|
|
height: 160rpx;
|
|
background: linear-gradient(360deg, rgba(255,233,229,0) 0%, #FEDEDD 100%);
|
|
border-radius: 14rpx 14rpx 16rpx 16rpx;
|
|
box-sizing: border-box;
|
|
padding: 22rpx;
|
|
.titleBox{
|
|
width: 100%;
|
|
display: flex;
|
|
.titleImg{
|
|
width: 216rpx;
|
|
height: 74rpx;
|
|
}
|
|
.titleNotice{
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #9A9A9A;
|
|
line-height: 36rpx;
|
|
}
|
|
}
|
|
.contentTitleBox{
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.contentTitle{
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #160002;
|
|
line-height: 36rpx;
|
|
}
|
|
.YOYBox{
|
|
.YOYBoxText{
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #A69E9F;
|
|
line-height: 36rpx;
|
|
}
|
|
.YOYBoxValue{
|
|
font-size: 36rpx;
|
|
font-family: DINAlternate, DINAlternate;
|
|
font-weight: bold;
|
|
color: #E83944;
|
|
line-height: 40rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.overAllDataBottom{
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 0 24rpx 24rpx;
|
|
.pkBox{
|
|
width: 100%;
|
|
height: 140rpx;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
.pkLogo{
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%,-50%);
|
|
width: 56rpx;
|
|
height: 56rpx;
|
|
}
|
|
.leftBox,.rightBox{
|
|
width: 50%;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
padding: 24rpx 32rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: absolute;
|
|
}
|
|
.leftBox{
|
|
left: 0;top: 0;
|
|
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/vsLeft.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
.value{
|
|
font-size: 44rpx;
|
|
font-family: DINAlternate, DINAlternate;
|
|
font-weight: bold;
|
|
color: #FF5A3C;
|
|
line-height: 52rpx;
|
|
}
|
|
.label{
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #FF5A3C;
|
|
line-height: 40rpx;
|
|
}
|
|
}
|
|
|
|
.rightBox{
|
|
right: 0;top: 0;
|
|
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/vsRight.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
align-items: flex-end;
|
|
.value{
|
|
font-size: 44rpx;
|
|
font-family: DINAlternate, DINAlternate;
|
|
font-weight: bold;
|
|
color: #FFFFFF;
|
|
line-height: 52rpx;
|
|
}
|
|
.label{
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
line-height: 40rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.otherListBox{
|
|
width: 100%;
|
|
background: #F8F8F8;
|
|
border-radius: 16rpx;
|
|
padding: 24rpx;
|
|
box-sizing: border-box;
|
|
margin-top: 24rpx;
|
|
.listTitleBox{
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.titleItem{
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #9A9A9A;
|
|
line-height: 32rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.listValueBox{
|
|
width: 100%;
|
|
.row{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: 32rpx;
|
|
.valueItem{
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #160002;
|
|
line-height: 40rpx;
|
|
}
|
|
.valueItemBox{
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
font-family: DINAlternate, DINAlternate;
|
|
font-weight: bold;
|
|
color: #160002;
|
|
line-height: 40rpx;
|
|
}
|
|
.addItem{
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
font-family: DINAlternate, DINAlternate;
|
|
font-weight: bold;
|
|
line-height: 40rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.revenueDetail{
|
|
width: 100%;
|
|
background: #fff;
|
|
border-radius: 16rpx;
|
|
box-sizing: border-box;
|
|
padding: 2rpx;
|
|
margin-top: 24rpx;
|
|
.revenueDetailTitleBox{
|
|
width: 100%;
|
|
height: 90rpx;
|
|
background: linear-gradient(360deg, rgba(255,233,229,0) 0%, #FEDEDD 100%);
|
|
border-radius: 14rpx 14rpx 0rpx 0rpx;
|
|
box-sizing: border-box;
|
|
padding: 22rpx;
|
|
position: relative;
|
|
.detailLogo{
|
|
width: 144rpx;
|
|
height: 72rpx;
|
|
}
|
|
.detailIcon{
|
|
width: 104rpx;
|
|
height: 104rpx;
|
|
position: absolute;
|
|
right: 22rpx;
|
|
top: 22rpx;
|
|
}
|
|
}
|
|
.revenueContent{
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 0 22rpx 24rpx;
|
|
.navList{
|
|
width: 100%;
|
|
height: 40rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
white-space: nowrap;
|
|
padding-bottom: 12rpx;
|
|
border-bottom: 1px solid #F5F4F4;
|
|
margin-bottom: 32rpx;
|
|
.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;
|
|
line-height: 40rpx;
|
|
}
|
|
}
|
|
|
|
.modalBox{
|
|
margin-top: 40rpx;
|
|
.modalTitleBox{
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 16rpx;
|
|
.modalIndex{
|
|
width: 12rpx;
|
|
height: 12rpx;
|
|
background: #DB6465;
|
|
border-radius: 50%;
|
|
margin-right: 12rpx;
|
|
}
|
|
.modalText{
|
|
font-size: 28rpx;
|
|
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;
|
|
}
|
|
}
|
|
|
|
.modalDetail{
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 24rpx;
|
|
background: #F8F8F8;
|
|
.modalDetailTitle{
|
|
display: flex;
|
|
align-items: center;
|
|
.titleItem{
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #9A9A9A;
|
|
line-height: 32rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
.row{
|
|
margin-top: 32rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 32rpx;
|
|
.valueItem{
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #160002;
|
|
line-height: 40rpx;
|
|
text-align: center;
|
|
}
|
|
.compareItem{
|
|
font-size: 28rpx;
|
|
font-family: DINAlternate, DINAlternate;
|
|
font-weight: bold;
|
|
color: #160002;
|
|
line-height: 40rpx;
|
|
text-align: center;
|
|
}
|
|
.addItem{
|
|
font-size: 28rpx;
|
|
font-family: DINAlternate, DINAlternate;
|
|
font-weight: bold;
|
|
color: #E83944;
|
|
line-height: 40rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|