2011 lines
54 KiB
Vue
2011 lines
54 KiB
Vue
<template>
|
||
<div>
|
||
<view class="page-body" v-if="showPage">
|
||
<template v-if="theRequest.ProvinceCode!='340000'">
|
||
|
||
<div class="new-content">
|
||
<div class="header-card">
|
||
<image :src="'/static/images/revenue/'+theRequest.ProvinceCode+'.png'" mode="aspectFit" class="head-log" v-if="theRequest.ProvinceCode"></image>
|
||
<view class="head-cost-text">
|
||
实时营收
|
||
</view>
|
||
<div class="top-number">
|
||
<text>{{today.timeMoney|| '0.00'}}</text>
|
||
</div>
|
||
<div class="uni-flex header-today-info">
|
||
<text class="fs12">客单交易 </text>
|
||
<text class="ml10"> {{today.totalTicketCount || 0}}</text>
|
||
<text class="fs12">(单)</text>
|
||
<text class="ml-135 fs12">客单均价 ¥ </text>
|
||
<text>{{today.avrticketCount || '0.00'}}</text>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="modle-title jc-between uni-flex ai-center">
|
||
<div class="uni-flex ai-center">
|
||
<image src="/static/images/revenue/yestoday-an.png" mode="aspectFit"></image>
|
||
<text class="strong-text ml10">营收汇总</text>
|
||
</div>
|
||
<picker mode="date" @change="bindDateChange" :end="lastDay" start="2019-12-01" :value="theRequest.time">
|
||
<text class="revenue-date">{{headMsg.dayOfShow}}</text>
|
||
</picker>
|
||
</div>
|
||
<view class="revenue-card-cont">
|
||
<div class="top-revenue-card uni-flex justify-between">
|
||
<div>
|
||
<text class="top-number">{{headMsg.totalMoneyShow}}</text>
|
||
<span>元</span>
|
||
</div>
|
||
<div class="uni-flex ai-center">
|
||
<div v-if="theRequest.GroupType!='1000'" style="margin-right: 8rpx;">{{headMsg.name}}</div>
|
||
<div class="upLoad-text"> {{headMsg.uploadState}}</div>
|
||
</div>
|
||
</div>
|
||
<!-- 营收数据总览 -->
|
||
<div class="uni-flex justify-around mode-content" v-if="headMsg.MARKET_REVENUE">
|
||
<div class="check-unit">
|
||
<text>商超营收</text>
|
||
<div class="check-price-color">{{headMsg.MARKET_REVENUE}} <text>元</text></div>
|
||
</div>
|
||
<div class="check-unit">
|
||
<text>商超门店</text>
|
||
<div class="check-price-color">{{headMsg.MarketShopCount}} <text>家</text></div>
|
||
</div>
|
||
<div class="check-unit">
|
||
<text>餐饮营收</text>
|
||
<div class="check-price-color">{{headMsg.RESTAURANT_REVENUE}} <text>元</text></div>
|
||
</div>
|
||
<div class="check-unit">
|
||
<text>餐饮门店</text>
|
||
<div class="check-price-color">{{headMsg.RestaurantShopCount}} <text>家</text></div>
|
||
</div>
|
||
</div>
|
||
<div class="uni-flex justify-around mode-content">
|
||
<div class="check-unit">
|
||
<text>长款金额</text>
|
||
<div class="check-price-color">{{headMsg.DIFFERENT_PRICE_MORE}} <text>元</text></div>
|
||
</div>
|
||
<div class="check-unit">
|
||
<text>短款金额</text>
|
||
<div class="check-price-color">{{headMsg.DIFFERENT_PRICE_LESS}} <text>元</text></div>
|
||
</div>
|
||
<div class="check-unit">
|
||
<text>客单交易</text>
|
||
<div class="check-price-color">{{headMsg.TICKETCOUNT}} <text>笔</text></div>
|
||
</div>
|
||
<div class="check-unit">
|
||
<text>客单均价</text>
|
||
<div class="check-price-color">{{headMsg.TICKETAVE}} <text>元</text></div>
|
||
</div>
|
||
</div>
|
||
<div class="uni-flex justify-around mode-content">
|
||
<div class="check-unit">
|
||
<text>优惠金额</text>
|
||
<div class="check-price-color">{{headMsg.TOTALOFFAMOUNT}} <text>元</text></div>
|
||
</div>
|
||
<div class="check-unit">
|
||
<text>移动支付</text>
|
||
<div class="check-price-color">{{headMsg.MOBILEPAYMENT}} <text>元</text></div>
|
||
</div>
|
||
<div class="check-unit">
|
||
<text>商品出售</text>
|
||
<div class="check-price-color">{{headMsg.COMMODITY_COUNT}} <text>件</text></div>
|
||
</div>
|
||
<div class="check-unit">
|
||
<text>商品均价</text>
|
||
<div class="check-price-color">{{headMsg.COMMODITYAVE}} <text>元</text></div>
|
||
</div>
|
||
</div>
|
||
<div class="uni-flex justify-around mode-content" v-if="headMsg.ShowTM">
|
||
<div class="check-unit">
|
||
<text>通美公司</text>
|
||
<div class="check-price-color">{{headMsg.TMRevenue}} <text>元</text></div>
|
||
</div>
|
||
<div class="check-unit"></div>
|
||
<div class="check-unit"></div>
|
||
<div class="check-unit"></div>
|
||
</div>
|
||
</view>
|
||
</template>
|
||
<AnhHead v-else :today="today" :headMsg="headMsg" :lastDay="lastDay" @bindDateChange="bindDateChange" :isup="isup" :nowDay="nowDay" :selectDate="theRequest&&theRequest.time" @toggle="toggleCard"></AnhHead>
|
||
<view style="background-color: #fff;">
|
||
<!--安徽省 昨日营收占比 -->
|
||
<div v-if="theRequest && theRequest.GroupType!=1010 && theRequest.ProvinceCode=='340000'">
|
||
<div class="uni-inline-item modle-title">
|
||
<image src="/static/images/revenue/type-operation.png" mode="aspectFit"></image>
|
||
<text class="strong-text">营收占比</text>
|
||
</div>
|
||
<view class="box-operation">
|
||
|
||
<div class="operation-tab-box">
|
||
<div class="operation-tab-unit" v-if="modelProgress.length>0" @tap="selectTab('nowTab',4)"
|
||
:class="{'active':nowTab==4}">经营模式</div>
|
||
<div class="operation-tab-unit" v-if="regionProgress.length>0" @tap="selectTab('nowTab',1)"
|
||
:class="{'active':nowTab==1}">经营业态</div>
|
||
<div class="operation-tab-unit" v-if="tradeType.length>0" @tap="selectTab('nowTab',2)"
|
||
:class="{'active':nowTab==2}">经营类型</div>
|
||
<div class="operation-tab-unit" v-if="areaProgress.length>0" @tap="selectTab('nowTab',3)"
|
||
:class="{'active':nowTab==3}">区域营收</div>
|
||
</div>
|
||
<div class="operation-content-box">
|
||
<div v-show="nowTab==1" v-if="regionProgress.length>0">
|
||
<canvas canvas-id="businessCont" id="businessCont" class="operation-content"
|
||
@touchstart="touchPie($event,'businessCont')"></canvas>
|
||
<div>
|
||
<div class="operation-c-list" v-for="(item,o) in regionProgress" :key="o">
|
||
<div class="operation-cl-unit">
|
||
<text>{{item.name}} {{item.bili}}%</text>
|
||
<text>{{item.data}}元</text>
|
||
</div>
|
||
<div class="progress">
|
||
<div class="bgO" :style="{'width':item.bili+'%'}"></div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div v-show="nowTab==2" v-if="tradeType.length>0">
|
||
<canvas canvas-id="typeCont" id="typeCont" class="operation-content"
|
||
@touchstart="touchPie($event,'typeCont')"></canvas>
|
||
<div>
|
||
<div class="operation-c-list" v-for="(item,o) in tradeType" :key="o">
|
||
<div class="operation-cl-unit">
|
||
<text>{{item.name}} {{item.bili}}%</text>
|
||
<text>{{item.data}}元</text>
|
||
</div>
|
||
<div class="progress">
|
||
<div class="bgO" :style="{'width':item.bili+'%'}"></div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div v-show="nowTab==3" v-if="areaProgress.length>0">
|
||
<canvas canvas-id="areaCont" id="areaCont" class="operation-content"
|
||
@touchstart="touchPie($event,'areaCont')"></canvas>
|
||
<div>
|
||
<div class="operation-c-list" v-for="(item,o) in areaProgress" :key="o">
|
||
<div class="operation-cl-unit">
|
||
<text>{{item.name}} {{item.bili}}%</text>
|
||
<text>{{item.data}}元</text>
|
||
</div>
|
||
<div class="progress">
|
||
<div class="bgO" :style="{'width':item.bili+'%'}"></div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div v-show="nowTab==4" v-if="modelProgress.length>0">
|
||
<canvas canvas-id="modelCont" id="modelCont" class="operation-content"
|
||
@touchstart="touchPie($event,'modelCont')"></canvas>
|
||
<div>
|
||
<div class="operation-c-list" v-for="(item,o) in modelProgress" :key="o">
|
||
<div class="operation-cl-unit">
|
||
<text>{{item.name}} {{item.bili}}%</text>
|
||
<text>{{item.data}}元</text>
|
||
</div>
|
||
<div class="progress">
|
||
<div class="bgO" :style="{'width':item.bili+'%'}"></div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</view>
|
||
</div>
|
||
|
||
<!-- 昨日日结上传 -->
|
||
<div class="uni-inline-item modle-title jc-between" v-if="regionList.length>0">
|
||
<view class="uni-inline-item">
|
||
<image src="/static/images/revenue/yestoday-region.png" mode="aspectFit"></image>
|
||
<text class="strong-text">日结上传</text>
|
||
|
||
</view>
|
||
<view style="font-size: 26rpx;" v-if="theRequest.ProvinceCode=='340000'">门店上传 <span class="upload-count">{{headMsg.uploadState}}</span></view>
|
||
</div>
|
||
|
||
<template v-if="theRequest && theRequest.GroupType==1020">
|
||
<div v-for="(item,i) in regionList" :key="i" class=" region-cell" @tap="toDetail(item)">
|
||
<div class="region-cell-unit">
|
||
<text>{{item.SERVERPART_NAME}}</text>
|
||
<div class="ct01">
|
||
<text class="strong-text">{{$util.fmoney(item.CASHPAY,2)}}</text>
|
||
<text>元</text>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="region-cell-unit">
|
||
<text>上传率</text>
|
||
<div class="ct01">
|
||
<text
|
||
class="strong-text">{{item.TOTAL_COUNT>item.UPLOAD_COUNT?$util.fmoney((item.UPLOAD_COUNT/item.TOTAL_COUNT)*100,2):100}}</text>
|
||
<text>%</text>
|
||
</div>
|
||
</div>
|
||
<div class="region-cell-unit"
|
||
:class="{'ct-red':item.UPLOAD_COUNT!=item.TOTAL_COUNT,'weisc-ico':item.UPLOAD_COUNT!=item.TOTAL_COUNT}">
|
||
{{item.UPLOADSTATE}}
|
||
</div>
|
||
<div class="region-cell-image">
|
||
<text class="uni-icon-arrowright uni-icon"></text>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<template v-else-if="theRequest && theRequest.GroupType==1000">
|
||
|
||
<div class="region-title" :class="{'active':regionShow1}" v-show="regionList.length>1"
|
||
@tap="regionShow1=!regionShow1">省内区域</div>
|
||
<div v-show="regionShow1">
|
||
<block v-for="(item,i) in regionList[0]" :key="i">
|
||
<div class=" region-cell" @tap="toggleRegion(item)">
|
||
<div class="region-cell-unit">
|
||
<text>{{item.TYPE_NAME}}</text>
|
||
<div class="ct01">
|
||
<text class="strong-text">{{$util.fmoney(item.CASHPAY,2)}}</text>
|
||
<text>元</text>
|
||
</div>
|
||
</div>
|
||
<div class="region-cell-unit">
|
||
<text>上传率</text>
|
||
<div class="ct01">
|
||
<text
|
||
class="strong-text">{{(item.TOTAL_COUNT>item.UPLOAD_COUNT)? $util.fmoney((item.UPLOAD_COUNT/item.TOTAL_COUNT)*100,2) : '100.00'}}</text>
|
||
<text>%</text>
|
||
</div>
|
||
</div>
|
||
<div class="region-cell-unit" :class="{'ct-red':item.UPLOAD_COUNT!=item.TOTAL_COUNT}">
|
||
{{item.UPLOADSTATE}}
|
||
</div>
|
||
<div class="region-cell-image">
|
||
<text class="uni-icon-arrowright uni-icon" :class="{'active':item.show}"></text>
|
||
</div>
|
||
</div>
|
||
<ul class="region-cell-area" v-show="item.show">
|
||
<li v-for="(child,index) in item.ServerpartList" :class="{'visited':child.visited}"
|
||
:key="index" @tap="toDetail(child)">
|
||
<div>{{child.SERVERPART_NAME}}</div>
|
||
<div>{{$util.fmoney(child.CASHPAY,2)}}<text>元</text></div>
|
||
<div :class="{'ct-red':child.UPLOAD_COUNT!=child.TOTAL_COUNT}">{{child.UPLOADSTATE}}
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</block>
|
||
</div>
|
||
<template v-if="regionList.length>1">
|
||
|
||
<div class="region-title" :class="{'active':regionShow2}" v-show="regionList.length>1"
|
||
@tap="regionShow2=!regionShow2">省外区域</div>
|
||
<div v-show="regionShow2">
|
||
<block v-for="(item,i) in regionList[1]" :key="i">
|
||
<div class="region-cell" @tap="toggleRegion(item)">
|
||
<div class="region-cell-unit">
|
||
<text>{{item.TYPE_NAME}}</text>
|
||
<div class="ct01">
|
||
<text class="strong-text">{{$util.fmoney(item.CASHPAY,2)}}</text>
|
||
<text>元</text>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="region-cell-unit">
|
||
<text>上传率</text>
|
||
<div class="ct01">
|
||
<text
|
||
class="strong-text">{{item.TOTAL_COUNT>item.UPLOAD_COUNT ? $util.fmoney((item.UPLOAD_COUNT/item.TOTAL_COUNT)*100,2) :'100.00'}}</text>
|
||
<text>%</text>
|
||
</div>
|
||
</div>
|
||
<div class="region-cell-unit " :class="{'ct-red':item.UPLOAD_COUNT!=item.TOTAL_COUNT}">
|
||
{{item.UPLOADSTATE}}
|
||
</div>
|
||
<div class="region-cell-image">
|
||
<text class="uni-icon-arrowright uni-icon"></text>
|
||
|
||
</div>
|
||
</div>
|
||
<ul class="region-cell-area" v-show="item.show">
|
||
<li v-for="(child,index) in item.ServerpartList" :class="{'visited':child.visited}"
|
||
:key="index" @tap="toDetail(child,'451200')">
|
||
<div>{{child.SERVERPART_NAME}}</div>
|
||
<div>{{child.CASHPAY}}<text>元</text></div>
|
||
<div :class="{'ct-red':child.UPLOAD_COUNT!=child.TOTAL_COUNT}">
|
||
{{child.UPLOADSTATE}}
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</block>
|
||
</div>
|
||
</template>
|
||
|
||
</template>
|
||
<template v-else>
|
||
<shopCell v-for="(item,i) in regionList" :key="i" :item='item' @toggleShow="toggleShow" :i='i'>
|
||
</shopCell>
|
||
</template>
|
||
|
||
<!-- 除安徽省外的 昨日营收占比 -->
|
||
<div v-if="theRequest && theRequest.GroupType!=1010 && theRequest.ProvinceCode!='340000'">
|
||
<div class="uni-inline-item modle-title">
|
||
<image src="/static/images/revenue/type-operation.png" mode="aspectFit"></image>
|
||
<text class="strong-text">营收占比</text>
|
||
</div>
|
||
<view class="box-operation">
|
||
|
||
<div class="operation-tab-box">
|
||
<div class="operation-tab-unit" v-if="modelProgress.length>0" @tap="selectTab('nowTab',4)"
|
||
:class="{'active':nowTab==4}">经营模式</div>
|
||
<div class="operation-tab-unit" v-if="regionProgress.length>0" @tap="selectTab('nowTab',1)"
|
||
:class="{'active':nowTab==1}">经营业态</div>
|
||
<div class="operation-tab-unit" v-if="tradeType.length>0" @tap="selectTab('nowTab',2)"
|
||
:class="{'active':nowTab==2}">经营类型</div>
|
||
<div class="operation-tab-unit" v-if="areaProgress.length>0" @tap="selectTab('nowTab',3)"
|
||
:class="{'active':nowTab==3}">区域营收</div>
|
||
</div>
|
||
<div class="operation-content-box">
|
||
<div v-show="nowTab==1" v-if="regionProgress.length>0">
|
||
<canvas canvas-id="businessCont" id="businessCont" class="operation-content"
|
||
@touchstart="touchPie($event,'businessCont')"></canvas>
|
||
<div>
|
||
<div class="operation-c-list" v-for="(item,o) in regionProgress" :key="o">
|
||
<div class="operation-cl-unit">
|
||
<text>{{item.name}} {{item.bili}}%</text>
|
||
<text>{{item.data}}元</text>
|
||
</div>
|
||
<div class="progress">
|
||
<div class="bgO" :style="{'width':item.bili+'%'}"></div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div v-show="nowTab==2" v-if="tradeType.length>0">
|
||
<canvas canvas-id="typeCont" id="typeCont" class="operation-content"
|
||
@touchstart="touchPie($event,'typeCont')"></canvas>
|
||
<div>
|
||
<div class="operation-c-list" v-for="(item,o) in tradeType" :key="o">
|
||
<div class="operation-cl-unit">
|
||
<text>{{item.name}} {{item.bili}}%</text>
|
||
<text>{{item.data}}元</text>
|
||
</div>
|
||
<div class="progress">
|
||
<div class="bgO" :style="{'width':item.bili+'%'}"></div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div v-show="nowTab==3" v-if="areaProgress.length>0">
|
||
<canvas canvas-id="areaCont" id="areaCont" class="operation-content"
|
||
@touchstart="touchPie($event,'areaCont')"></canvas>
|
||
<div>
|
||
<div class="operation-c-list" v-for="(item,o) in areaProgress" :key="o">
|
||
<div class="operation-cl-unit">
|
||
<text>{{item.name}} {{item.bili}}%</text>
|
||
<text>{{item.data}}元</text>
|
||
</div>
|
||
<div class="progress">
|
||
<div class="bgO" :style="{'width':item.bili+'%'}"></div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div v-show="nowTab==4" v-if="modelProgress.length>0">
|
||
<canvas canvas-id="modelCont" id="modelCont" class="operation-content"
|
||
@touchstart="touchPie($event,'modelCont')"></canvas>
|
||
<div>
|
||
<div class="operation-c-list" v-for="(item,o) in modelProgress" :key="o">
|
||
<div class="operation-cl-unit">
|
||
<text>{{item.name}} {{item.bili}}%</text>
|
||
<text>{{item.data}}元</text>
|
||
</div>
|
||
<div class="progress">
|
||
<div class="bgO" :style="{'width':item.bili+'%'}"></div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</view>
|
||
</div>
|
||
<!-- 营收趋势 -->
|
||
<view v-if="revenuelineList[0]">
|
||
<div class="uni-flex ai-center jc-between">
|
||
<view class="uni-inline-item modle-title">
|
||
<image src="/static/images/revenue/ysqs.png" mode="aspectFit"></image>
|
||
<text class="strong-text">营收趋势</text>
|
||
</view>
|
||
<view class="line-tab-unit active">
|
||
近七日
|
||
</view>
|
||
</div>
|
||
<view class="revenue-line-box">
|
||
<view class="uni-flex ai-center ">
|
||
<view class="revenue-line-data" :class="{'active': revenueLineType==0}"
|
||
@click="changeDate('revenueLineType',0)">
|
||
<p>营收金额</p>
|
||
<p>{{$util.fmoney(revenueLineMsg.Revenue_Amount,2)}}</p>
|
||
</view>
|
||
<view class="revenue-line-data" :class="{'active': revenueLineType==1}"
|
||
@click="changeDate('revenueLineType',1)">
|
||
<p>客单笔数</p>
|
||
<p>{{$util.fmoney(revenueLineMsg.Ticke_Count,2)}}</p>
|
||
</view>
|
||
<view class="revenue-line-data" :class="{'active': revenueLineType==2}"
|
||
@click="changeDate('revenueLineType',2)">
|
||
<p>客单均价</p>
|
||
<p>{{$util.fmoney(revenueLineMsg.Average_Amount,2)}}</p>
|
||
</view>
|
||
</view>
|
||
<view class="text-title"> {{typeName[revenueLineType]}}比上周 <text
|
||
class="text-week">({{`${sevenDate[0]}-${sevenDate[1]}`}})</text></view>
|
||
<view
|
||
:class="{'up-text-title':revenuelineList[revenueLineType].Top_Difference>0,'down-text-title':revenuelineList[revenueLineType].Top_Difference<0}">
|
||
{{($util.fmoney(revenuelineList[revenueLineType].Top_Difference,2)).replace('-','')}}%
|
||
</view>
|
||
<view class="text-title">{{typeName[revenueLineType]}}趋势</view>
|
||
<view>
|
||
<canvas canvas-id="revenueLine" id="revenueLine" class="operation-content"
|
||
@touchstart="touchPie($event,'revenueLine')"></canvas>
|
||
|
||
</view>
|
||
</view>
|
||
<view class="revenue-line-box">
|
||
<view class="title">客单交易</view>
|
||
<view class="text-title"> 客单数量比上周 </view>
|
||
<view
|
||
:class="{'up-text-title':revenueLineMsg.down_deff>0,'down-text-title':revenueLineMsg.down_deff<0}">
|
||
{{($util.fmoney(revenueLineMsg.down_deff,2)).replace('-','')}}%
|
||
</view>
|
||
<view>
|
||
<canvas canvas-id="revenueClounm" id="revenueClounm" class="operation-content"></canvas>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 商品销售排行 -->
|
||
<div class="uni-inline-item modle-title">
|
||
<image src="/static/images/revenue/product-ranking.png" mode="aspectFit"></image>
|
||
<text class="strong-text">商品销售排行</text>
|
||
</div>
|
||
<div class="uni-inline-item ranking-tab-box">
|
||
<div class="ranking-tab-unit" @tap="selectTab('nowRank',1000)" :class="{'active':nowRank==1000}">商超
|
||
</div>
|
||
<div class="ranking-tab-unit" @tap="selectTab('nowRank',2000)" :class="{'active':nowRank==2000}">餐饮
|
||
</div>
|
||
<div class="ranking-tab-unit" @tap="selectTab('nowRank',3000)" :class="{'active':nowRank==3000}">小吃
|
||
</div>
|
||
</div>
|
||
<div class="ranking-content" v-if="wechatPushSalesList">
|
||
<div class="ranking-list" v-for="(item,index) in wechatPushSalesList[nowRank]" :key="index">
|
||
<div class="rank-index">{{item.RANK_ID}}</div>
|
||
|
||
<div class="ranking-list-unit">
|
||
<div>{{item.COMMODITY_NAME}}</div>
|
||
<div class="ranking-unit-info">
|
||
<text>销售金额 </text>
|
||
<text>¥{{$util.fmoney(item.TOTALPRICE)}}</text>
|
||
<text>销售数量 </text>
|
||
<text>{{item.SELLCOUNT}}</text>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</view>
|
||
</view>
|
||
<div v-if="!showPage && !isLoading">
|
||
<noFound :nodata="!showPage && !isLoading" :text="'您暂无' + lastDay + '营收数据'" />
|
||
</div>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
mapState
|
||
} from 'vuex';
|
||
import uCharts from '@/components/u-charts/u-charts.js';
|
||
import shopCell from './components/listUnit.vue'
|
||
import AnhHead from './components/anhHead.vue'
|
||
|
||
var rincanvas = {};
|
||
|
||
export default {
|
||
data() {
|
||
const lastDay = this.$util.cutDate(new Date(), 'YYYY-MM-DD', -1)
|
||
|
||
const nowDay = this.$util.cutDate(new Date(), 'MM月DD日')
|
||
|
||
return {
|
||
showPage: false,
|
||
opacity: 0, // 背景颜色透明度
|
||
customBarH: this.CustomBar,
|
||
statusBarH: this.StatusBar,
|
||
isLoading: true,
|
||
theRequest: null,
|
||
sevenDate: null,
|
||
lastDay: lastDay, // 该页面的最近有效日期
|
||
nowDay: nowDay,
|
||
headMsg: null,
|
||
today: null, // 今日数据
|
||
regionList: null,
|
||
nowTab: 1,
|
||
nowRank: 2000,
|
||
regionShow1: true,
|
||
regionShow2: false,
|
||
wechatPushSalesList: null,
|
||
regionProgress: null,
|
||
tradeType: null,
|
||
areaProgress: null,
|
||
revenueLineType: 0, // 0 Revenue, 1 Ticke, 2 Average
|
||
revenueLineMsg: null, // 营收趋势
|
||
revenuelineList: {
|
||
0: null,
|
||
1: null,
|
||
2: null,
|
||
3: null
|
||
}, // 营收趋势数据map
|
||
typeName: ['营收金额', '客单笔数', '客单均价'], //
|
||
modelProgress: null,
|
||
isup: true,
|
||
|
||
}
|
||
},
|
||
computed: {
|
||
...mapState({
|
||
'PushAuthority': (state) => state.userData.PushAuthority,
|
||
'ProvinceCode': (state) => state.userData.ProvinceCode,
|
||
}),
|
||
hasSeverpartIndexAuthority() {
|
||
let theRequest = this.theRequest
|
||
if (this.theRequest && theRequest.ProvinceCode && this.PushAuthority) {
|
||
return this.PushAuthority.some(n =>
|
||
n.ProvinceCode == theRequest.ProvinceCode && n.ShopAnalysisType == 1
|
||
)
|
||
}
|
||
return false
|
||
}
|
||
|
||
},
|
||
components: {
|
||
shopCell,
|
||
AnhHead
|
||
},
|
||
methods: {
|
||
toggleCard(isup){
|
||
this.isup =!isup
|
||
this.$forceUpdate()
|
||
},
|
||
bindDateChange(e) { // 切换日期 加载选中日期的营收数据
|
||
|
||
// let nowDate = this.theRequest.time
|
||
let selectT = new Date(e.detail.value)
|
||
if (selectT <= new Date(this.lastDay)) {
|
||
this.theRequest.time = e.detail.value
|
||
this.sevenDate = [this.$util.cutDate(selectT, 'MM.DD', -13), this.$util.cutDate(
|
||
selectT, 'MM.DD', -7)]
|
||
uni.showLoading({
|
||
title: '正在加载...',
|
||
mask: true
|
||
})
|
||
this.getData()
|
||
this.getTender()
|
||
this.todayAmount()
|
||
this.$forceUpdate()
|
||
}
|
||
|
||
},
|
||
toDetail(item, provinceId) { // 如果当前页面至存在一个初始化的省份编码 则不需要传入参数provinceId
|
||
let date = this.theRequest.time
|
||
let pcode = provinceId || this.theRequest.ProvinceCode
|
||
|
||
let severpartIndexPath = '/pages/everdayRenven/serviceIndex?ServerpartIds=' + item.SERVERPART_ID +
|
||
'&time=' + date + '&ProvinceCode=' + pcode
|
||
let serverpartUploadPath = '/pages/everdayRenven/detail?id=' + item.SERVERPART_ID + '&time=' + date +
|
||
'&provinceId=' + pcode
|
||
|
||
// 是否有权限进入服务区营收分析页面
|
||
let canToSeverpartIndex = !provinceId ? this.hasSeverpartIndexAuthority : this.PushAuthority.some(n => {
|
||
return n.ProvinceCode == provinceId && n.ShopAnalysisType == 1
|
||
})
|
||
|
||
this.$util.toNextRoute('navigateTo', canToSeverpartIndex ? severpartIndexPath : serverpartUploadPath)
|
||
|
||
item.visited = true
|
||
this.$forceUpdate()
|
||
|
||
},
|
||
selectTab(name, index) {
|
||
this[name] = index
|
||
},
|
||
toggleRegion(item) {
|
||
item.show = !item.show ? true : false
|
||
this.$forceUpdate()
|
||
},
|
||
touchPie(e, id) {
|
||
rincanvas[id].showToolTip(e, {
|
||
format: function(item) {
|
||
return item.name + ':' + item.data
|
||
}
|
||
});
|
||
},
|
||
todayAmount() {
|
||
let _this = this
|
||
let theRequest = this.theRequest
|
||
this.$request.$get('getCurRevenue', {
|
||
pushProvinceCode: theRequest.ProvinceCode,
|
||
serverPartId: theRequest.GroupType == 1000 ? '' : theRequest.ServerpartIds
|
||
}).then(res => {
|
||
if (res.ResultCode != 100) return
|
||
let avrticket = (res.Data.TOTALTICKET && res.Data.TOTALPRICE) ? res.Data.TOTALPRICE / res.Data
|
||
.TOTALTICKET : 0
|
||
_this.today = {
|
||
timeMoney: this.$util.fmoney(res.Data.TOTALPRICE, 2),
|
||
totalTicketCount: res.Data.TOTALTICKET,
|
||
avrticketCount: this.$util.fmoney(avrticket, 2),
|
||
}
|
||
_this.$forceUpdate()
|
||
})
|
||
|
||
},
|
||
getRankmMap(list) {
|
||
let _this = this
|
||
let map = {}
|
||
|
||
list.map((n, i) => {
|
||
if (i == 1) _this.nowRank = n.DATA_TYPE
|
||
map[n.DATA_TYPE] = n.GoodsList
|
||
|
||
})
|
||
return map
|
||
},
|
||
getData() {
|
||
let _this = this
|
||
let theRequest = _this.theRequest
|
||
let provinceCode = _this.theRequest.ProvinceCode
|
||
let groupType = _this.theRequest.GroupType
|
||
let arr = {
|
||
groupType: theRequest.GroupType,
|
||
Direction_IDS: theRequest.ServerpartIds,
|
||
pushProvinceCode: theRequest.ProvinceCode,
|
||
Statistics_Date: theRequest.time
|
||
}
|
||
|
||
this.$request.$get('getRevenuePush', arr).then(res => {
|
||
_this.isLoading = false
|
||
if (res.ResultCode != 100) {
|
||
uni.hideLoading()
|
||
return
|
||
}
|
||
let data = res.Data
|
||
|
||
if (provinceCode == '330000' && groupType == '1000') {
|
||
this.getheadMsg(data[provinceCode], data['451200'])
|
||
let list1 = sortMount(data[provinceCode].RegionList)
|
||
let list2 = sortMount(data['451200'].RegionList)
|
||
|
||
_this.regionList = [list1, list2]
|
||
if (data[provinceCode].WechatPushSalesList) {
|
||
|
||
_this.wechatPushSalesList = this.getRankmMap(data[provinceCode].WechatPushSalesList)
|
||
}
|
||
_this.operationFn(data[provinceCode])
|
||
} else {
|
||
this.getheadMsg(data)
|
||
if (groupType != 1010) {
|
||
let list = groupType != 1000 ? sortMount(data.RegionList[0].ServerpartList) : [
|
||
sortMount(data.RegionList)
|
||
]
|
||
_this.regionList = list
|
||
_this.operationFn(data)
|
||
}
|
||
if (data.WechatPushSalesList) {
|
||
|
||
_this.wechatPushSalesList = this.getRankmMap(data.WechatPushSalesList)
|
||
}
|
||
}
|
||
uni.hideLoading()
|
||
_this.showPage = true
|
||
_this.$forceUpdate()
|
||
})
|
||
|
||
function sortMount(list) {
|
||
|
||
list.sort(function(a, b) {
|
||
if (a.ServerpartList) {
|
||
|
||
a.ServerpartList.sort(function(m, n) {
|
||
return n.CASHPAY - m.CASHPAY
|
||
})
|
||
|
||
}
|
||
if (b.ServerpartList) {
|
||
|
||
b.ServerpartList.sort(function(m, n) {
|
||
return n.CASHPAY - m.CASHPAY
|
||
})
|
||
}
|
||
return b.CASHPAY - a.CASHPAY
|
||
})
|
||
let index = list.findIndex(n => n.TYPE_NAME && n.TYPE_NAME.indexOf('加油站') > -1)
|
||
if (index > -1) {
|
||
let item = list[index];
|
||
list.splice(index, 1);
|
||
list.push(item);
|
||
}
|
||
return [...list]
|
||
}
|
||
},
|
||
getheadMsg(_data1, _data2) {
|
||
// 头部
|
||
let _this = this
|
||
let headMsg = {}
|
||
if (_data1.ShowShopCount === 1) {
|
||
|
||
headMsg.MARKET_REVENUE = this.$util.fmoney(_data1.MARKET_REVENUE)
|
||
headMsg.RESTAURANT_REVENUE = this.$util.fmoney(_data1.RESTAURANT_REVENUE)
|
||
headMsg.MarketShopCount = _data1.MarketShopCount
|
||
headMsg.RestaurantShopCount = _data1.RestaurantShopCount
|
||
}
|
||
headMsg.totalMoney = _data1.CASHPAY + (_data2 ? _data2.CASHPAY : 0)
|
||
headMsg.totalMoneyShow = this.$util.fmoney(_data1.CASHPAY + (_data2 ? _data2.CASHPAY : 0), 2)
|
||
headMsg.name = _data1.USER_NAME
|
||
headMsg.dayOfShow = this.$util.cutDate(_data1.STATISTICS_DATE, 'MM月DD日')
|
||
|
||
let titles = ['CASHPAY', 'DIFFERENT_PRICE_MORE', 'DIFFERENT_PRICE_LESS', 'TICKETCOUNT', 'MOBILEPAYMENT',
|
||
'COMMODITY_COUNT', 'TOTALOFFAMOUNT'
|
||
]
|
||
titles.forEach(n => {
|
||
headMsg[n] = _data1[n] + (_data2 ? _data2[n] : 0)
|
||
if (n !== 'TICKETCOUNT' && n !== 'COMMODITY_COUNT' && n !== 'CASHPAY') {
|
||
headMsg[n] = _this.$util.fmoney(headMsg[n])
|
||
}
|
||
})
|
||
|
||
headMsg.TICKETAVE = headMsg.TICKETCOUNT > 0 ? this.$util.fmoney(headMsg.CASHPAY / headMsg.TICKETCOUNT, 2) :
|
||
0
|
||
headMsg.COMMODITYAVE = headMsg.COMMODITY_COUNT > 0 ? this.$util.fmoney(headMsg.CASHPAY / headMsg
|
||
.COMMODITY_COUNT, 2) : 0
|
||
|
||
if (_data2) {
|
||
var UPLOADSTATE1 = _data1.UPLOADSTATE.split('/')
|
||
var UPLOADSTATE2 = _data2.UPLOADSTATE.split('/')
|
||
var s1 = Number(UPLOADSTATE1[0]) + Number(UPLOADSTATE2[0])
|
||
var s2 = Number(UPLOADSTATE1[1]) + Number(UPLOADSTATE2[1])
|
||
}
|
||
headMsg.TMRevenue = _data1.TMRevenue
|
||
headMsg.ShowTM = _data1.ShowTM
|
||
headMsg.budgetamoutShow = _data1.BUDGETAMOUNT ? _this.$util.fmoney(_data1.BUDGETAMOUNT) : 0.00
|
||
headMsg.BUDGETAMOUNT = _data1.BUDGETAMOUNT
|
||
headMsg.diffBudgetTotal = Math.abs(_data1.BUDGETAMOUNT-_data1.CASHPAY)
|
||
headMsg.diffBili = _data1.BUDGETAMOUNT >0 ? this.$util.fmoney((headMsg.diffBudgetTotal/_data1.BUDGETAMOUNT)*100,2) :'100'
|
||
headMsg.uploadState = _data2 ? (s1 + '/' + s2) : _data1.UPLOADSTATE
|
||
this.headMsg = headMsg
|
||
|
||
},
|
||
operationFn(data, ohterData) { //昨日营收占比
|
||
var _this = this;
|
||
|
||
if (data.SHOWBUSINESSTRADE == 1) { // 业态营收占比
|
||
var colors1 = ['#5E67B4', '#4E5699', '#75B7AD', '#AFB7E6'];
|
||
var SHOWBUSINESSTRADE = [
|
||
['MARKET_REVENUE', '商超营收'],
|
||
['RESTAURANT_REVENUE', '餐饮营收'],
|
||
['SNACK_REVENUE', '小吃营收'],
|
||
['OTHER_REVENUE', '其他营收']
|
||
];
|
||
var businessData = _this.operationBusniess(SHOWBUSINESSTRADE, data);
|
||
this.regionProgress = businessData[1]
|
||
_this.showPie({
|
||
id: 'businessCont',
|
||
data: businessData[0],
|
||
colors: colors1,
|
||
});
|
||
|
||
}
|
||
if (data.SHOWTRADETYPE == 1) { // 经营类型分析
|
||
var colors2 = ['#7886E3', '#70D598', '#9BC8FB', '#ADE5EE', '#6B75B8', '#6FEBC3'];
|
||
var type = [
|
||
['COMPREHENSIVE_REVENUE', '综合服务区'],
|
||
['THEME_REVENUE', '主题服务区'],
|
||
['STANDARD_REVENUE', '标配服务区'],
|
||
['PAKINGZONE_REVENUE', '其他停车区']
|
||
];
|
||
var typeData = _this.operationBusniess(type, data);
|
||
this.tradeType = typeData[1]
|
||
_this.showPie({
|
||
id: 'typeCont',
|
||
data: typeData[0],
|
||
colors: colors2,
|
||
});
|
||
}
|
||
if (data.SHOWREGIONREVENUE == 1) { // 业态营收占比
|
||
// var colors3 = ['#F19B4B', '#DE724D', '#F4B27A', '#FFE886', '#E87EA3', '#F3B1C9', '#F08F87', '#F7CD7B', '#F19B4B'];
|
||
var colors3 = ['#FFAC37', '#d8ece9', '#f7f5f6', '#b2b7e3', '#F4B27A', '#F3B1C9', '#e0e3f7', '#FFE886',
|
||
'#f7f5f6'
|
||
];
|
||
var operationArea = _this.operationArea(data.RegionList, data.CASHPAY);
|
||
this.areaProgress = operationArea[1]
|
||
_this.showPie({
|
||
id: 'areaCont',
|
||
data: operationArea[0],
|
||
colors: colors3,
|
||
});
|
||
}
|
||
|
||
if (data.SHOWBUSINESSTYPE == 1) { // 经营模式占比
|
||
var colors3 = ['#FFAC37', '#6B75B8'];
|
||
var type = [
|
||
['OUTSOURCE_REVENUE', '外包'],
|
||
['SELFSUPPORT_REVENUE', '自营']
|
||
];
|
||
var operationModel = _this.operationBusniess(type, data);
|
||
this.modelProgress = operationModel[1]
|
||
_this.showPie({
|
||
id: 'modelCont',
|
||
data: operationModel[0],
|
||
colors: colors3,
|
||
});
|
||
}
|
||
},
|
||
operationArea(data, total) { // 生成区域营收占比数据
|
||
var _data1 = []
|
||
var _data2 = [];
|
||
let _this = this
|
||
|
||
data.forEach((n, i) => {
|
||
let showName = n.TYPE_NAME.replace(/分公司|服务区/, '区域')
|
||
_data1.push({
|
||
name: showName,
|
||
data: n.CASHPAY,
|
||
textColor: '#999',
|
||
format: function(arg) {
|
||
return [showName, (arg * 100).toFixed(2) + '%']
|
||
}
|
||
});
|
||
_data2.push({
|
||
name: showName,
|
||
num: n.CASHPAY,
|
||
data: _this.$util.fmoney(n.CASHPAY),
|
||
bili: _this.$util.fmoney((n.CASHPAY / total) * 100, 2)
|
||
});
|
||
});
|
||
_data1.sort(function(a, b) {
|
||
return b.data - a.data
|
||
})
|
||
_data2.sort(function(a, b) {
|
||
return b.num - a.num
|
||
})
|
||
return [_data1, _data2];
|
||
},
|
||
operationBusniess(arr, data) { // 生成业态营收占比数据
|
||
var _data1 = [];
|
||
var _data2 = [];
|
||
let _this = this
|
||
arr.forEach((n, i) => {
|
||
if (data[n[0]] > 0) {
|
||
let num = Number(data[n[0]])
|
||
_data1.push({
|
||
name: n[1],
|
||
textColor: '#999',
|
||
data: data[n[0]], //+Number(data2[n[0]])
|
||
format: function(arg) {
|
||
|
||
return [n[1], (arg * 100).toFixed(2) + '%']
|
||
}
|
||
});
|
||
|
||
_data2.push({
|
||
name: n[1],
|
||
num: num,
|
||
data: _this.$util.fmoney(data[n[0]]), //+Number(data2[n[0]])
|
||
bili: _this.$util.fmoney((num / data.CASHPAY) * 100, 2)
|
||
});
|
||
}
|
||
});
|
||
_data1.sort(function(a, b) {
|
||
return b.data - a.data
|
||
})
|
||
_data2.sort(function(a, b) {
|
||
return b.num - a.num
|
||
})
|
||
return [_data1, _data2];
|
||
},
|
||
showPie(obj) {
|
||
let data = {
|
||
series: []
|
||
}
|
||
|
||
data.series = data.series.concat(obj.data)
|
||
rincanvas[obj.id] = new uCharts({
|
||
$this: this,
|
||
canvasId: obj.id,
|
||
colors: obj.colors,
|
||
type: 'ring',
|
||
fontSize: 12,
|
||
padding: [15, 15, 25, 15],
|
||
legend: {
|
||
show: false,
|
||
padding: 5,
|
||
lineHeight: 11,
|
||
margin: 0,
|
||
},
|
||
background: '#FFFFFF',
|
||
pixelRatio: 1,
|
||
series: data.series,
|
||
animation: false,
|
||
width: uni.upx2px(686),
|
||
height: uni.upx2px(510),
|
||
dataLabel: true,
|
||
extra: {
|
||
pie: {
|
||
ringWidth: 40,
|
||
labelWidth: 16,
|
||
border: true,
|
||
borderWidth: 1,
|
||
|
||
borderColor: '#fff'
|
||
}
|
||
},
|
||
});
|
||
},
|
||
showLine(obj) {
|
||
rincanvas[obj.id] = new uCharts({
|
||
$this: this,
|
||
canvasId: obj.id,
|
||
colors: ['#667ED5'],
|
||
type: 'area',
|
||
fontSize: 12,
|
||
legend: {
|
||
show: false
|
||
},
|
||
dataLabel: false,
|
||
dataPointShape: true,
|
||
padding: [30, 20, 12, 12],
|
||
background: '#FFFFFF',
|
||
dataPointShapeType: 'hollow',
|
||
categories: obj.categories,
|
||
series: obj.data,
|
||
animation: false,
|
||
|
||
xAxis: {
|
||
disabled: false,
|
||
disableGrid: true,
|
||
axisLine: false,
|
||
fontColor: '#B3B3B3',
|
||
labelCount: 5,
|
||
// itemCount: 7,//x轴单屏显示数据的数量，默认为5个
|
||
// scrollShow: true,//新增是否显示滚动条，默认false
|
||
// scrollAlign: 'left',//滚动条初始位置
|
||
},
|
||
yAxis: {
|
||
|
||
data: [{
|
||
disabled: false,
|
||
axisLine: false,
|
||
fontColor: '#B3B3B3',
|
||
format: (val) => {
|
||
return parseInt(val)
|
||
}
|
||
}],
|
||
gridType: 'dash',
|
||
gridColor: '#eee',
|
||
dashLength: 2,
|
||
splitNumber: 3,
|
||
|
||
},
|
||
width: uni.upx2px(686),
|
||
height: uni.upx2px(350),
|
||
extra: {
|
||
area: {
|
||
addLine: true,
|
||
gradient: true,
|
||
// type: 'curve'
|
||
}
|
||
}
|
||
});
|
||
},
|
||
showClounm(obj) {
|
||
|
||
// rincanvas[obj.id] =
|
||
new uCharts({
|
||
$this: this,
|
||
canvasId: obj.id,
|
||
type: 'column',
|
||
legend: {
|
||
show: false
|
||
},
|
||
colors: ['#D1DBEF'],
|
||
fontSize: 12,
|
||
background: '#FFFFFF',
|
||
padding: [30, 12, 12, 12],
|
||
animation: true,
|
||
categories: obj.categories,
|
||
series: obj.data,
|
||
enableScroll: false, //开启图表拖拽功能
|
||
xAxis: {
|
||
disabled: false,
|
||
disableGrid: true,
|
||
axisLine: false,
|
||
fontColor: '#B3B3B3',
|
||
labelCount: 5,
|
||
|
||
},
|
||
yAxis: {
|
||
data: [{
|
||
disabled: false,
|
||
axisLine: false,
|
||
fontColor: '#B3B3B3',
|
||
format: (val) => {
|
||
return parseInt(val)
|
||
}
|
||
}],
|
||
|
||
gridType: 'dash',
|
||
gridColor: '#eee',
|
||
dashLength: 2,
|
||
splitNumber: 3,
|
||
},
|
||
dataLabel: true,
|
||
width: uni.upx2px(686),
|
||
height: uni.upx2px(350),
|
||
extra: {
|
||
column: {
|
||
type: 'group',
|
||
width: uni.upx2px(26)
|
||
}
|
||
}
|
||
});
|
||
},
|
||
getDetail(obj) {
|
||
let _this = this
|
||
this.$request.$get('getShopRevenueList', {
|
||
serverpartID: obj.ServerpartIds,
|
||
pushProvinceCode: obj.ProvinceCode,
|
||
StartDate: obj.time,
|
||
EndDate: obj.time,
|
||
}).then(res => {
|
||
if (res.ResultCode != 100) return
|
||
res.Data.List.map(n => {
|
||
n.show = false
|
||
n.detail = this.getListDetail(n)
|
||
})
|
||
|
||
_this.regionList = res.Data.List
|
||
})
|
||
},
|
||
getListDetail(data) {
|
||
let arr = []
|
||
let keyJson = {
|
||
SHOWMORE_SIGN: {
|
||
1: '【长款】',
|
||
2: '【异常长款】'
|
||
}, // 长款
|
||
SHOWLESS_SIGN: {
|
||
1: '【短款】',
|
||
2: '【异常短款】'
|
||
}, // 短款
|
||
SHOWABNORMAL_SIGN: {
|
||
1: '【异常校验】'
|
||
}, // 异常日结
|
||
SHOWSCAN_SIGN: {
|
||
1: '【扫】'
|
||
}, // 扫码上传
|
||
SHOWSSUPPLY_SIGN: {
|
||
1: '【补】'
|
||
}, // 账期补录
|
||
SHOWCHECK_SIGN: {
|
||
1: '【稽核检查】'
|
||
}, // 稽核检查
|
||
INTERFACE_SIGN: {
|
||
1: '【接口传输】'
|
||
}, // 接口传输
|
||
}
|
||
var keyCode = ['SHOWABNORMAL_SIGN', 'SHOWCHECK_SIGN', 'SHOWMORE_SIGN', 'SHOWLESS_SIGN', 'SHOWSCAN_SIGN',
|
||
'SHOWSSUPPLY_SIGN', 'INTERFACE_SIGN'
|
||
]
|
||
keyCode.map(n => {
|
||
|
||
if (keyJson[n][data[n]]) arr.push(keyJson[n][data[n]])
|
||
|
||
})
|
||
return arr
|
||
},
|
||
toggleShow(i) {
|
||
let item = this.regionList[i]
|
||
item.show = !item.show
|
||
this.$forceUpdate()
|
||
},
|
||
|
||
changeDate(name, index) {
|
||
let _this = this
|
||
this[name] = index
|
||
let listMsg = null
|
||
|
||
listMsg = _this.revenuelineList[index]
|
||
|
||
_this.showLine({
|
||
id: 'revenueLine',
|
||
data: listMsg.data,
|
||
categories: listMsg.categories
|
||
});
|
||
},
|
||
|
||
getTender() { // 营收趋势
|
||
let _this = this
|
||
let obj = this.theRequest
|
||
|
||
let Report_Type = ['Revenue', 'Ticke', 'Average']
|
||
let bili = ['Revenue_Amount', 'Ticke_Count', 'Average_Amount']
|
||
let typeName = ['营收金额', '客单笔数', '客单均价']
|
||
|
||
let typeIndex = _this.revenueLineType
|
||
let revenuelineList = {
|
||
0: [],
|
||
1: [],
|
||
2: [],
|
||
3: []
|
||
}
|
||
_this.$request.$webGet('WeChat/GetRevenueTrends', {
|
||
Statictics_Type: 'Week',
|
||
Report_Type: Report_Type[typeIndex],
|
||
groupType: obj.GroupType,
|
||
pushProvinceCode: obj.ProvinceCode,
|
||
Serverpart_Id: obj.ServerpartIds,
|
||
Statistics_Date: _this.theRequest.time
|
||
}).then(res => {
|
||
if (res.Result_Code == 100) {
|
||
|
||
res.Result_Data.down_deff = Number(res.Result_Data[Report_Type[1] + '_Proportion'].replace(
|
||
'%', ''))
|
||
|
||
let _list = []
|
||
let listRevenueDetils = _this.pushCanvasData(res.Result_Data.listRevenueDetils)
|
||
let list = _this.pushCanvasData(res.Result_Data.listTickeDetils)
|
||
let listAverageDetils = _this.pushCanvasData(res.Result_Data.listAverageDetils)
|
||
_list.push(listRevenueDetils, list, listAverageDetils)
|
||
|
||
_this.revenuelineList = revenuelineList
|
||
_this.revenueLineMsg = res.Result_Data
|
||
|
||
_this.$nextTick(function() {
|
||
_this.showLine({
|
||
id: 'revenueLine',
|
||
categories: listRevenueDetils[0],
|
||
data: [{
|
||
name: typeName[typeIndex],
|
||
data: listRevenueDetils[1]
|
||
}],
|
||
});
|
||
_this.showClounm({
|
||
id: 'revenueClounm',
|
||
categories: list[0],
|
||
data: [{
|
||
name: '客单笔数',
|
||
data: list[1],
|
||
textColor: '#B3B3B3'
|
||
}],
|
||
});
|
||
_this.$forceUpdate()
|
||
})
|
||
bili.forEach((biliName, i) => {
|
||
if (i == 1) {
|
||
revenuelineList[3] = {
|
||
data: [{
|
||
name: '客单交易',
|
||
data: _list[i][1],
|
||
textColor: '#B3B3B3'
|
||
}],
|
||
categories: _list[i][0],
|
||
Top_Difference: Number(res.Result_Data[Report_Type[1] +
|
||
'_Proportion'].replace('%', '')),
|
||
|
||
}
|
||
}
|
||
revenuelineList[i] = {
|
||
categories: _list[i][0],
|
||
data: [{
|
||
name: typeName[i],
|
||
data: _list[i][1]
|
||
}],
|
||
Top_Difference: Number(res.Result_Data[Report_Type[i] + '_Proportion']
|
||
.replace('%', '')),
|
||
}
|
||
})
|
||
|
||
|
||
// uni.hideLoading()
|
||
|
||
}
|
||
})
|
||
},
|
||
pushCanvasData(list) { // 拼接营收趋势数据
|
||
let _this = this
|
||
let _list = [
|
||
[],
|
||
[]
|
||
]
|
||
if (list.length) {
|
||
|
||
list.map(n => {
|
||
let date = _this.$util.cutDate(n.Statictics_Date, 'MM-DD')
|
||
_list[0].push(date)
|
||
_list[1].push(n.Statictics_Amount)
|
||
|
||
})
|
||
}
|
||
return _list
|
||
},
|
||
defaultMsg() {
|
||
let option = null
|
||
let _this = this
|
||
if (this.PushAuthority && this.PushAuthority.length > 1) {
|
||
|
||
option = this.PushAuthority.find(n => n.ProvinceCode === _this.ProvinceCode)
|
||
} else {
|
||
option = this.PushAuthority[0]
|
||
}
|
||
return {
|
||
...option
|
||
}
|
||
}
|
||
},
|
||
onUnload() {
|
||
this.$util.addUserBehavior()
|
||
},
|
||
onPageScroll(options) {
|
||
this.opacity = (options.scrollTop - 30) / 68
|
||
},
|
||
onLoad(option) {
|
||
|
||
|
||
uni.showLoading({
|
||
title: '正在加载...'
|
||
})
|
||
|
||
if (option.ProvinceCode) { // 从推送进入
|
||
this.theRequest = option
|
||
|
||
option.time = this.$util.cutDate(option.time,'YYYY-MM-DD')
|
||
this.nowTab = option.ProvinceCode == 340000 ? 4 : 1
|
||
this.getData()
|
||
this.getTender()
|
||
} else { // 默认
|
||
if (this.PushAuthority.length > 0) {
|
||
this.theRequest = this.defaultMsg() || {}
|
||
this.theRequest.time = this.lastDay
|
||
this.getData()
|
||
this.getTender()
|
||
this.nowTab = this.theRequest.ProvinceCode == 340000 ? 4 : 1
|
||
} else {
|
||
uni.hideLoading()
|
||
this.theRequest = null
|
||
this.isLoading = false
|
||
this.showPage = false
|
||
this.opacity = 1
|
||
|
||
}
|
||
}
|
||
|
||
this.sevenDate = [
|
||
this.$util.cutDate(new Date(this.theRequest.time), 'MM.DD', -13),
|
||
this.$util.cutDate(new Date(this.theRequest.time), 'MM.DD', -7)
|
||
]
|
||
this.todayAmount()
|
||
|
||
if (this.theRequest.GroupType == 1010) {
|
||
this.getDetail(this.theRequest)
|
||
}
|
||
|
||
},
|
||
onShow() {
|
||
if(this.theRequest.ProvinceCode!='340000') {
|
||
uni.setNavigationBarColor({
|
||
backgroundColor: '#3b64a3',
|
||
frontColor:'#ffffff'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.page-body {
|
||
background: #fff;
|
||
position: relative;
|
||
}
|
||
|
||
.uni-flex-column {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.justify-between {
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.justify-around {
|
||
justify-content: space-around;
|
||
}
|
||
|
||
.uni-icon-arrowright {
|
||
font-size: 32rpx;
|
||
color: #5A5A5A;
|
||
}
|
||
|
||
.uni-icon-arrowright.active {
|
||
transform: rotate(90deg);
|
||
}
|
||
.ct01 {
|
||
color: #383838;
|
||
}
|
||
|
||
.strong-text {
|
||
font-weight: 700;
|
||
}
|
||
|
||
.ct-red {
|
||
color: #D7565A !important;
|
||
}
|
||
|
||
.new-content {
|
||
background: url('/static/images/revenue/banner.png') no-repeat bottom left;
|
||
height: 383rpx;
|
||
background-size: 100%;
|
||
color: #fff;
|
||
box-sizing: border-box;
|
||
padding-top: 20rpx;
|
||
}
|
||
.new-content .text-title {
|
||
flex: 1;
|
||
text-align: center;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.uni-icon-arrowleft {
|
||
font-size: 38rpx;
|
||
padding: 8rpx 16rpx;
|
||
}
|
||
|
||
.page-title {
|
||
display: flex;
|
||
align-items: center;
|
||
padding-right: 70rpx;
|
||
width: 100%;
|
||
|
||
color: #fff;
|
||
background-color: #3b64a3;
|
||
}
|
||
|
||
.page-title .uni-icon-arrowleft,
|
||
.page-title .uni-icon-arrowleft:before {
|
||
color: #fff;
|
||
}
|
||
|
||
.new-content .header-card {
|
||
background-size: contain;
|
||
background-repeat: no-repeat;
|
||
background-position: center right;
|
||
padding: 0 30rpx;
|
||
color: #BED4F4;
|
||
padding-top: 8rpx;
|
||
position: relative;
|
||
}
|
||
|
||
.head-log {
|
||
position: absolute;
|
||
right: 12rpx;
|
||
top: 0rpx;
|
||
width: 376rpx;
|
||
height: 198rpx;
|
||
}
|
||
|
||
.new-content .top-number {
|
||
padding-top: 28rpx;
|
||
font-size: 76rpx;
|
||
padding-bottom: 16rpx;
|
||
color: #fff;
|
||
padding-left: 4rpx;
|
||
font-family: 'Bahnschrift Regular';
|
||
letter-spacing: 2rpx;
|
||
line-height: 1.1;
|
||
transition: all 1s;
|
||
}
|
||
|
||
.new-content .header-today-info {
|
||
align-items: baseline;
|
||
}
|
||
|
||
.new-content .header-today-info text {
|
||
font-family: 'Bahnschrift Regular';
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.ml10 {
|
||
margin-left: 20rpx;
|
||
}
|
||
|
||
.new-content .header-today-info text.fs12,
|
||
text.fs12 {
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.ml-135 {
|
||
margin-left: 135rpx;
|
||
}
|
||
|
||
.top-number view {
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.heade-text {
|
||
text-align: right;
|
||
line-height: 1;
|
||
letter-spacing: 0;
|
||
color: #BED4F4;
|
||
font-family: 'Bahnschrift Regular';
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
/* 营收汇总 数据概览卡片 */
|
||
.revenue-card-cont {
|
||
padding: 6rpx 0 32rpx 0;
|
||
border-radius: 12rpx;
|
||
margin: 0 20rpx;
|
||
box-shadow: 0rpx 0rpx 6rpx 0px rgba(224, 224, 224, 0.54);
|
||
}
|
||
|
||
.head-cost-text {
|
||
color: #BED4F4;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.top-revenue-card {
|
||
padding: 16rpx 30rpx 6rpx 30rpx;
|
||
font-family: 'Bahnschrift Regular';
|
||
color: #D7B89A;
|
||
align-items: flex-end;
|
||
|
||
}
|
||
|
||
.top-revenue-card .top-number {
|
||
font-size: 56rpx;
|
||
color: #D0AC8B;
|
||
line-height: 1;
|
||
}
|
||
|
||
.top-revenue-card .upLoad-text {
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.check-unit {
|
||
font-size: 24rpx;
|
||
margin-top: 16rpx;
|
||
flex: 1;
|
||
text-align: center;
|
||
}
|
||
|
||
.check-price-color {
|
||
font-size: 32rpx;
|
||
color: #868686;
|
||
line-height: 1.2;
|
||
font-family: 'Bahnschrift Regular';
|
||
}
|
||
|
||
.check-price-color text {
|
||
font-size: 22rpx;
|
||
}
|
||
|
||
/* end */
|
||
|
||
.modle-title {
|
||
padding-left: 24rpx;
|
||
font-size: 30rpx;
|
||
padding-top: 42rpx;
|
||
padding-bottom: 20rpx;
|
||
}
|
||
|
||
.modle-title .uni-icon-arrowdown {
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.modle-title picker {
|
||
color: #000000;
|
||
padding-right: 24rpx;
|
||
position: relative;
|
||
width: 164rpx;
|
||
}
|
||
|
||
.modle-title picker .revenue-date:before {
|
||
content: '';
|
||
position: absolute;
|
||
width: 0rpx;
|
||
height: 0rpx;
|
||
border: 0rpx;
|
||
border-left: 12rpx solid transparent;
|
||
border-right: 12rpx solid transparent;
|
||
border-top: 12rpx solid #000;
|
||
right: 22rpx;
|
||
top: 22rpx;
|
||
|
||
display: block;
|
||
border-radius: 6rpx;
|
||
}
|
||
.upload-count {
|
||
font-family: 'Bahnschrift Regular';
|
||
font-size: 32rpx;
|
||
margin-left: 16rpx;
|
||
margin-right: 36rpx;
|
||
}
|
||
.region-title {
|
||
padding: 20rpx 60rpx 20rpx 80rpx;
|
||
position: relative;
|
||
font-size: 30rpx;
|
||
font-weight: bolder;
|
||
|
||
}
|
||
|
||
.region-title:before {
|
||
content: '';
|
||
position: absolute;
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
background: url(/static/images/revenue/select.png) no-repeat center;
|
||
background-size: contain;
|
||
left: 40rpx;
|
||
top: 36rpx;
|
||
|
||
}
|
||
|
||
.active.region-title:before {
|
||
background: url(/static/images/revenue/select_active.png) no-repeat center;
|
||
background-size: contain;
|
||
|
||
}
|
||
|
||
/*日结上传*/
|
||
.region-cell {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: space-between;
|
||
padding: 26rpx 24rpx 22rpx 42rpx;
|
||
}
|
||
|
||
.region-cell .region-cell-unit {
|
||
flex: 2;
|
||
display: flex;
|
||
flex-direction: column;
|
||
color: #929292;
|
||
font-size: 26rpx;
|
||
line-height: 1.5;
|
||
text-align: right;
|
||
}
|
||
|
||
.region-cell .region-cell-unit:nth-child(1) {
|
||
flex: 3;
|
||
text-align: left;
|
||
}
|
||
|
||
.region-cell .region-cell-unit:nth-child(3) {
|
||
line-height: 50rpx;
|
||
}
|
||
|
||
.region-cell-image {
|
||
width: 48rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
height: 50rpx;
|
||
|
||
}
|
||
|
||
.region-cell image {
|
||
width: 14rpx;
|
||
height: 23rpx;
|
||
}
|
||
|
||
/*日结上传服务区*/
|
||
.region-cell-area {
|
||
/* display: none; */
|
||
max-height: 460rpx;
|
||
overflow: auto;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
.region-cell-area li.visited view:first-child {
|
||
color: #007AFF;
|
||
|
||
}
|
||
|
||
.region-cell-area li:after {
|
||
content: '';
|
||
background: url(/static/images/revenue/you-jt.png) no-repeat center;
|
||
width: 14rpx;
|
||
height: 24rpx;
|
||
background-size: contain;
|
||
display: block;
|
||
position: absolute;
|
||
right: 24rpx;
|
||
top: 26rpx;
|
||
}
|
||
|
||
.region-cell-area li:nth-child(2n+1) {
|
||
background-color: #FCFCFC;
|
||
}
|
||
|
||
.region-cell-area li:nth-child(2n+1):before {
|
||
content: '';
|
||
background-color: #5596F9;
|
||
width: 8rpx;
|
||
height: 8rpx;
|
||
border-radius: 8rpx;
|
||
display: block;
|
||
position: absolute;
|
||
left: 42rpx;
|
||
|
||
}
|
||
|
||
.region-cell-area li:nth-child(2n):before {
|
||
content: '';
|
||
background-color: #FE6D67;
|
||
width: 8rpx;
|
||
height: 8rpx;
|
||
border-radius: 8rpx;
|
||
display: block;
|
||
position: absolute;
|
||
left: 42rpx;
|
||
}
|
||
|
||
.region-cell-area li {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 16rpx 72rpx 16rpx 68rpx;
|
||
position: relative;
|
||
text-align: right;
|
||
color: #2E2E2E;
|
||
background-color: #f7f7f7;
|
||
}
|
||
|
||
.region-cell-area li>div {
|
||
flex: 2;
|
||
font-size: 22rpx;
|
||
|
||
}
|
||
|
||
.region-cell-area li>div:nth-child(1) {
|
||
flex: 3;
|
||
text-align: left;
|
||
}
|
||
|
||
.modle-title image {
|
||
max-width: 36rpx;
|
||
max-height: 36rpx;
|
||
|
||
}
|
||
|
||
.line-tab-unit {
|
||
margin-top: 20rpx;
|
||
/* width: 60rpx; */
|
||
height: 44rpx;
|
||
font-size: 28rpx;
|
||
color: #A9A9A9;
|
||
background: #ececec;
|
||
border-radius: 8rpx;
|
||
text-align: center;
|
||
line-height: 44rpx;
|
||
margin-right: 32rpx;
|
||
padding: 0 10rpx;
|
||
font-size: 22rpx;
|
||
}
|
||
|
||
.line-tab-unit.active {
|
||
background-color: #667ED5;
|
||
color: #fff;
|
||
}
|
||
|
||
.revenue-line-box {
|
||
background-color: #fff;
|
||
margin: 0 16rpx;
|
||
border-radius: 20rpx;
|
||
padding: 34rpx 16rpx 34rpx 16rpx;
|
||
box-shadow: 1rpx 0rpx 6rpx 0px rgba(224, 224, 224, 0.54);
|
||
}
|
||
|
||
.revenue-line-box+.revenue-line-box {
|
||
margin-top: 38rpx;
|
||
}
|
||
|
||
.revenue-line-data {
|
||
width: 216rpx;
|
||
height: 144rpx;
|
||
background-color: #F8F8F8;
|
||
border-radius: 12rpx;
|
||
color: #A5A5A5;
|
||
font-size: 24rpx;
|
||
text-align: center;
|
||
padding-top: 20rpx;
|
||
border: 2rpx solid #F8F8F8;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.revenue-line-data+.revenue-line-data {
|
||
margin-left: 24rpx;
|
||
}
|
||
|
||
.revenue-line-data p:last-child {
|
||
font-size: 40rpx;
|
||
font-family: 'Bahnschrift Regular';
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.revenue-line-data.active {
|
||
border: 2rpx solid #889DED;
|
||
background-color: #f1f3fb;
|
||
color: #667ED5;
|
||
}
|
||
|
||
.revenue-line-box .text-title {
|
||
color: #9498A4;
|
||
font-size: 24rpx;
|
||
margin-top: 38rpx;
|
||
}
|
||
|
||
.revenue-line-box .up-text-title {
|
||
color: #6eb92b;
|
||
font-family: 'Bahnschrift Regular';
|
||
font-size: 36rpx;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.up-text-title:after {
|
||
content: "";
|
||
margin-left: 12rpx;
|
||
width: 20rpx;
|
||
height: 22rpx;
|
||
display: inline-block;
|
||
background: url('/static/images/revenue/up-arrow.png') no-repeat center;
|
||
background-size: contain;
|
||
|
||
}
|
||
|
||
.text-week {
|
||
color: #C2C2C2;
|
||
margin-left: 32rpx;
|
||
}
|
||
|
||
.down-text-title:after {
|
||
content: "";
|
||
margin-left: 12rpx;
|
||
width: 20rpx;
|
||
height: 22rpx;
|
||
display: inline-block;
|
||
background: url('/static/images/revenue/down-arrow.png') no-repeat center;
|
||
background-size: contain;
|
||
|
||
}
|
||
|
||
.revenue-line-box .down-text-title {
|
||
color: #F07878;
|
||
font-family: 'Bahnschrift Regular';
|
||
font-size: 36rpx;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.revenue-line-box .title {
|
||
color: #000;
|
||
font-size: 28rpx;
|
||
font-weight: bolder;
|
||
}
|
||
|
||
.revenue-line-box canvas.operation-content {
|
||
height: 350rpx;
|
||
width: 686rpx;
|
||
margin: 0 auto 0 auto;
|
||
background-color: #fff;
|
||
}
|
||
|
||
/*区域营收占比*/
|
||
/* //.operation-bgfc {
|
||
// background-color: #FCFCFC;
|
||
// padding-bottom: 32rpx;
|
||
//} */
|
||
|
||
.box-operation {
|
||
box-shadow: 1px 2px 6px 0px rgba(224, 224, 224, 0.54);
|
||
margin: 20rpx 32rpx 0 32rpx;
|
||
border-radius: 12rpx;
|
||
}
|
||
|
||
.operation-tab-box {
|
||
|
||
background: #F1F1F1;
|
||
border-radius: 8rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
text-align: center;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.operation-tab-box .operation-tab-unit {
|
||
color: #BABABA;
|
||
flex: 30%;
|
||
height: 120rpx;
|
||
line-height: 120rpx;
|
||
position: relative;
|
||
padding-left: 24rpx;
|
||
}
|
||
|
||
.operation-tab-box .operation-tab-unit.active {
|
||
background-color: #fff;
|
||
color: #000000
|
||
}
|
||
|
||
.operation-tab-box .operation-tab-unit.active:after {
|
||
content: '';
|
||
width: 30rpx;
|
||
height: 126rpx;
|
||
background-color: #fff;
|
||
border-radius: 0 14rpx 0 0;
|
||
position: absolute;
|
||
right: -20rpx;
|
||
transform: rotate(-9deg);
|
||
}
|
||
|
||
.operation-tab-box .operation-tab-unit:after {
|
||
content: '';
|
||
width: 30rpx;
|
||
height: 126rpx;
|
||
border-radius: 0 14rpx 0 0;
|
||
background-color: #F1F1F1;
|
||
box-shadow: 6rpx 8rpx 4rpx rgba(0, 0, 0, 0.15);
|
||
position: absolute;
|
||
right: -20rpx;
|
||
transform: rotate(-9deg);
|
||
z-index: 1;
|
||
}
|
||
|
||
.operation-content-box {
|
||
width: 686rpxrpx;
|
||
overflow: hidden;
|
||
padding-bottom: 16rpx;
|
||
|
||
}
|
||
|
||
canvas.operation-content {
|
||
height: 500rpx;
|
||
width: 686rpx;
|
||
margin: 0 auto;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.operation-c-list {
|
||
padding: 16rpx 32rpx;
|
||
}
|
||
|
||
.operation-cl-unit {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.operation-c-list .progress {
|
||
width: 288rpx;
|
||
height: 12rpx;
|
||
background-color: #f9f9f9;
|
||
border-radius: 4rpx;
|
||
margin-top: 12rpx;
|
||
}
|
||
|
||
.operation-c-list .progress .bgO {
|
||
height: 12rpx;
|
||
border-radius: 4rpx;
|
||
background: -webkit-linear-gradient(right, #EC6332, #EF884F);
|
||
background: -moz-linear-gradient(right, #EC6332, #EF884F);
|
||
background: -o-linear-gradient(right, #EC6332, #EF884F);
|
||
background: linear-gradient(to right, #EC6332, #EF884F);
|
||
}
|
||
|
||
/*排行*/
|
||
.ranking-tab-box {
|
||
margin: 20rpx 32rpx;
|
||
border: 2rpx solid #565656;
|
||
border-radius: 8rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
text-align: center;
|
||
|
||
}
|
||
|
||
.ranking-tab-box .ranking-tab-unit {
|
||
color: #565656;
|
||
flex: 1;
|
||
height: 64rpx;
|
||
line-height: 60rpx;
|
||
}
|
||
|
||
.ranking-tab-box .ranking-tab-unit.active {
|
||
background-color: #565656;
|
||
color: #fff
|
||
}
|
||
|
||
.ranking-tab-box .ranking-tab-unit+.ranking-tab-unit {
|
||
border-left: 2rpx solid #565656;
|
||
}
|
||
|
||
.ranking-content {
|
||
/* display: none; */
|
||
min-height: 160rpx;
|
||
}
|
||
|
||
.ranking-content .ranking-list {
|
||
display: flex;
|
||
align-items: center;
|
||
color: #000;
|
||
padding: 24rpx 32rpx;
|
||
}
|
||
|
||
.ranking-content .rank-index {
|
||
width: 72rpx;
|
||
height: 72rpx;
|
||
text-align: center;
|
||
line-height: 72rpx;
|
||
font-size: 30rpx;
|
||
font-weight: bolder;
|
||
margin-right: 32rpx;
|
||
}
|
||
|
||
.ranking-content .ranking-list:nth-child(1) .rank-index {
|
||
background: url('/static/images/revenue/top1.png') no-repeat center;
|
||
background-size: contain;
|
||
font-size: 0;
|
||
}
|
||
|
||
.ranking-content .ranking-list:nth-child(2) .rank-index {
|
||
background: url(/static/images/revenue/top2.png) no-repeat center;
|
||
background-size: contain;
|
||
font-size: 0;
|
||
}
|
||
|
||
.ranking-content .ranking-list:nth-child(3) .rank-index {
|
||
background: url(/static/images/revenue/top3.png) no-repeat center;
|
||
background-size: contain;
|
||
font-size: 0;
|
||
}
|
||
|
||
.ranking-content .ranking-list-unit {
|
||
font-size: 28rpx;
|
||
flex: 1;
|
||
}
|
||
|
||
.ranking-content .ranking-unit-info {
|
||
/* margin-top: 16rpx; */
|
||
display: flex;
|
||
align-items: center;
|
||
/* font-size: .13rem; */
|
||
}
|
||
|
||
.ranking-content .ranking-unit-info text {
|
||
flex: 2;
|
||
color: #929292;
|
||
}
|
||
|
||
.ranking-content .ranking-unit-info text:nth-child(2) {
|
||
flex: 3;
|
||
}
|
||
|
||
.ranking-content .ranking-unit-info text:nth-child(2n) {
|
||
color: #000
|
||
}
|
||
|
||
.ranking-ico {
|
||
width: 72rpx;
|
||
height: 72rpx;
|
||
}
|
||
|
||
</style>
|