1041 lines
28 KiB
Vue
1041 lines
28 KiB
Vue
<template>
|
|
<div>
|
|
|
|
|
|
<div class="page-body" v-if="showPage">
|
|
<!-- 头部 -->
|
|
<div class="top-content">
|
|
|
|
<div class="uni-flex justify-between top-c-title">
|
|
<div>{{headMsg.name}}</div>
|
|
<div v-if="theRequest.ProvinceCode=='620000'">
|
|
实时营收：<text class="strong-text heade-text">{{timeMoney}}</text><text class="heade-text">元</text>
|
|
</div>
|
|
</div>
|
|
<div class="header-card">
|
|
<div class="uni-inline-item justify-between">
|
|
<div>{{headMsg.dayOfShow}}</div>
|
|
<text>{{headMsg.uploadState}}</text>
|
|
</div>
|
|
<div class="top-number">{{headMsg.totalMoney}}</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-inline-item modle-title" v-if="regionList.length>0">
|
|
<image src="/static/images/revenue/yestoday-region.png" mode="aspectFit"></image>
|
|
<text class="strong-text">昨日日结上传</text>
|
|
</div>
|
|
<block v-if="theRequest.GroupType==1020">
|
|
|
|
<div v-for="(item,i) in regionList" :key="i" class=" region-cell" @tap="toDetail(item,theRequest.ProvinceCode)">
|
|
<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">{{$util.fmoney((item.UPLOAD_COUNT/item.TOTAL_COUNT)*100,2)}}</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>
|
|
<!-- <image src="/static/images/revenue/you-jt.png" mode="aspectFit"></image> -->
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</block>
|
|
<block v-else-if="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">{{$util.fmoney((item.UPLOAD_COUNT/item.TOTAL_COUNT)*100,2)}}</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>
|
|
<!-- <image src="/static/images/revenue/you-jt.png" mode="aspectFit"></image> -->
|
|
</div>
|
|
</div>
|
|
<ul class="region-cell-area" v-show="item.show">
|
|
<li v-for="(child,index) in item.ServerpartList" :key="index" @tap="toDetail(child,theRequest.ProvinceCode)">
|
|
<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>
|
|
<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">{{$util.fmoney((item.UPLOAD_COUNT/item.TOTAL_COUNT)*100,2)}}</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>
|
|
<!-- <image src="/static/images/revenue/you-jt.png" mode="aspectFit"></image> -->
|
|
</div>
|
|
</div>
|
|
<ul class="region-cell-area" v-show="item.show">
|
|
<li v-for="(child,index) in item.ServerpartList" :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>
|
|
|
|
</block>
|
|
<block v-else>
|
|
<shopCell v-for="(item,i) in regionList" :key="i" :item='item' @toggleShow="toggleShow" :i='i'></shopCell>
|
|
</block>
|
|
|
|
<!-- 昨日营收占比 -->
|
|
<div class="operation-bgfc" v-if="theRequest.GroupType!=1010">
|
|
|
|
<div class="uni-inline-item modle-title">
|
|
<image src="/static/images/revenue/type-operation.png" mode="aspectFit"></image>
|
|
<text class="strong-text">昨日营收占比</text>
|
|
</div>
|
|
<div class="operation-tab-box">
|
|
<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>
|
|
</div>
|
|
<!-- 商品销售排行 -->
|
|
<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',0)" :class="{'active':nowRank==0}">商超</div>
|
|
<div class="ranking-tab-unit" @tap="selectTab('nowRank',1)" :class="{'active':nowRank==1}">餐饮</div>
|
|
<div class="ranking-tab-unit" @tap="selectTab('nowRank',2)" :class="{'active':nowRank==2}">小吃</div>
|
|
</div>
|
|
<div class="ranking-content" v-if="wechatPushSalesList.length>0">
|
|
<div class="ranking-list" v-for="(item,index) in wechatPushSalesList[nowRank].GoodsList" :key="index">
|
|
<div class="rank-index">{{item.RANK_ID}}</div>
|
|
<!-- <image src="/static/images/revenue/top1.png" mode="aspectFit" class="ranking-ico"></image> -->
|
|
<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>
|
|
</div>
|
|
<div v-if="!showPage && !isLoading">
|
|
<noFound :nodata="!showPage && !isLoading" :text="noDataText"/>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
mapGetters
|
|
} from 'vuex';
|
|
import uCharts from '@/components/u-charts/u-charts.js';
|
|
import shopCell from './components/listUnit.vue'
|
|
var rincanvas = {};
|
|
var _self;
|
|
export default {
|
|
data() {
|
|
const lastDay = this.$util.cutDate(new Date(), 'YYYY/MM/DD', -1)
|
|
|
|
return {
|
|
isLoading: true,
|
|
timeMoney: '',
|
|
noDataText: '您暂无营收数据',
|
|
theRequest: {},
|
|
lastDay: lastDay,
|
|
showPage: false,
|
|
pageMsg: {},
|
|
headMsg: {},
|
|
regionList: [],
|
|
nowTab: 1,
|
|
nowRank: 0,
|
|
regionShow1: true,
|
|
regionShow2: false,
|
|
wechatPushSalesList: [],
|
|
regionProgress:[],
|
|
tradeType: [],
|
|
areaProgress: []
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters({
|
|
'user': 'getUser'
|
|
})
|
|
},
|
|
components:{
|
|
shopCell
|
|
},
|
|
methods: {
|
|
toDetail(item, provinceId) {
|
|
this.$util.toNextRoute('navigateTo', '/pages/everdayRenven/detail?id=' + item.SERVERPART_ID + '&time=' + this.lastDay + '&provinceId=' + provinceId)
|
|
// uni.navigateTo({
|
|
// url: '/pages/everdayRenven/detail?id=' + item.SERVERPART_ID + '&time=' + this.lastDay + '&provinceId=' + provinceId
|
|
// })
|
|
},
|
|
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
|
|
this.$request.$get('getCurRevenue', {
|
|
pushProvinceCode: this.theRequest.ProvinceCode
|
|
}).then(res => {
|
|
if (res.ResultCode != 100) return
|
|
|
|
_this.timeMoney = this.$util.fmoney(res.Data.TOTALPRICE,2)
|
|
})
|
|
|
|
},
|
|
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: _this.theRequest.time || this.lastDay
|
|
}
|
|
|
|
this.$request.$get('getRevenuePush', arr).then(res => {
|
|
_this.isLoading = false
|
|
if (res.ResultCode != 100) {
|
|
uni.hideLoading()
|
|
|
|
return
|
|
}
|
|
let data = res.Data
|
|
_this.pageMsg = data
|
|
if (provinceCode=='330000' && groupType=='1000') {
|
|
this.getheadMsg(data[provinceCode], data['451200'])
|
|
_this.regionList = [data[provinceCode].RegionList, data['451200'].RegionList]
|
|
_this.wechatPushSalesList = data[provinceCode].WechatPushSalesList
|
|
_this.operationFn(data[provinceCode])
|
|
} else {
|
|
this.getheadMsg(data)
|
|
if(groupType!=1010 ){
|
|
_this.regionList = groupType!=1000 ? data.RegionList[0].ServerpartList : [data.RegionList]
|
|
_this.operationFn(data)
|
|
}
|
|
_this.wechatPushSalesList = data.WechatPushSalesList
|
|
|
|
}
|
|
uni.hideLoading()
|
|
_this.showPage=true
|
|
|
|
})
|
|
},
|
|
getheadMsg(_data1, _data2) {
|
|
// 头部
|
|
let _this =this
|
|
let headMsg = {}
|
|
headMsg.totalMoney = 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.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 operationArea = _this.operationArea(data.RegionList,data.CASHPAY);
|
|
this.areaProgress = operationArea[1]
|
|
_this.showPie({
|
|
id: 'areaCont',
|
|
data: operationArea[0],
|
|
colors: colors3,
|
|
});
|
|
}
|
|
},
|
|
operationArea(data,total) { // 生成区域营收占比数据
|
|
var _data1 = []
|
|
var _data2 = [];
|
|
let _this =this
|
|
data.forEach((n, i) => {
|
|
_data1.push({
|
|
name: n.TYPE_NAME,
|
|
data: n.CASHPAY,
|
|
textColor: '#999',
|
|
format:function(arg){
|
|
return [ n.TYPE_NAME ,(arg*100).toFixed(2)+'%']
|
|
}
|
|
});
|
|
_data2.push({
|
|
name: n.TYPE_NAME,
|
|
data: _this.$util.fmoney(n.CASHPAY),
|
|
bili: _this.$util.fmoney((n.CASHPAY/total)*100,2)
|
|
});
|
|
});
|
|
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],
|
|
data: _this.$util.fmoney(data[n[0]]), //+Number(data2[n[0]])
|
|
bili: _this.$util.fmoney((num/data.CASHPAY)*100,2)
|
|
});
|
|
}
|
|
});
|
|
return [_data1,_data2];
|
|
},
|
|
showPie(obj) {
|
|
let data= {
|
|
series: []
|
|
}
|
|
data.series = data.series.concat(obj.data)
|
|
rincanvas[obj.id] = new uCharts({
|
|
$this: _self,
|
|
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: 32,
|
|
labelWidth: 30
|
|
}
|
|
},
|
|
});
|
|
},
|
|
getDetail(obj) {
|
|
let _this = this
|
|
this.$request.$get('getShopRevenueList', {
|
|
serverpartID: obj.ServerpartIds,
|
|
pushProvinceCode: obj.ProvinceCode,
|
|
StartDate: obj.time || this.lastDay,
|
|
EndDate: obj.time || this.lastDay,
|
|
}).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()
|
|
},
|
|
|
|
},
|
|
onUnload() {
|
|
this.$util.addUserBehavior()
|
|
},
|
|
onLoad(option) {
|
|
_self = this
|
|
uni.showLoading({
|
|
title: '正在加载...'
|
|
})
|
|
if(option.ProvinceCode){
|
|
this.theRequest = option
|
|
this.getData()
|
|
}else{
|
|
|
|
if(this.user.PushAuthority.length>0){
|
|
|
|
this.theRequest = this.user.PushAuthority[5] || {}
|
|
this.getData()
|
|
}else{
|
|
uni.hideLoading()
|
|
this.theRequest = {}
|
|
this.isLoading = false
|
|
this.showPage = false
|
|
this.noDataText = '您暂无营收数据'
|
|
}
|
|
}
|
|
if(this.theRequest.GroupType==1010) {
|
|
this.getDetail(this.theRequest)
|
|
}
|
|
|
|
if( this.theRequest.ProvinceCode=='620000' && this.theRequest.GroupType=='1000'){
|
|
this.todayAmount()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page-body {
|
|
background: #fff;
|
|
}
|
|
.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;
|
|
}
|
|
|
|
.top-content {
|
|
background: url('/static/images/revenue/banner.png') no-repeat top center;
|
|
height: 240rpx;
|
|
background-size: contain;
|
|
margin-bottom: 110rpx;
|
|
}
|
|
|
|
.top-c-title {
|
|
align-items: flex-start;
|
|
padding: 24rpx 32rpx 0 24rpx;
|
|
|
|
}
|
|
.top-c-title view{
|
|
line-height: 1.5;
|
|
}
|
|
.heade-text {
|
|
font-size: 24rpx;
|
|
text-align: right;
|
|
/* margin-left: 8rpx; */
|
|
}
|
|
.header-card {
|
|
background: url('/static/images/revenue/card-bg.png') no-repeat top center;
|
|
background-size: contain;
|
|
background-origin: border-box;
|
|
padding: 40rpx 56rpx;
|
|
width: 100%;
|
|
height: 283rpx;
|
|
box-sizing: border-box;
|
|
color: #fff;
|
|
}
|
|
|
|
.top-number {
|
|
line-height: 2.5;
|
|
font-size: 68rpx;
|
|
color: #fff;
|
|
text-align: center;
|
|
}
|
|
|
|
.check-unit {
|
|
font-size: 22rpx ;
|
|
margin-top: 26rpx;
|
|
flex: 1;
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
.check-price-color {
|
|
font-size: 26rpx;
|
|
color: #868686;
|
|
text-align: center;
|
|
}
|
|
.check-price-color text{
|
|
font-size: 24rpx;
|
|
}
|
|
.modle-title {
|
|
padding-left: 24rpx;
|
|
font-size: 30rpx;
|
|
padding-top: 42rpx;
|
|
padding-bottom: 20rpx;
|
|
}
|
|
.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;
|
|
|
|
}
|
|
/* .mode-content {
|
|
padding: 0 32rpx;
|
|
} */
|
|
|
|
/*日结上传*/
|
|
.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-image {
|
|
width: 48rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
height: 38rpx;
|
|
}
|
|
|
|
.region-cell image {
|
|
width: 14rpx;
|
|
height: 23rpx;
|
|
}
|
|
|
|
/*日结上传服务区*/
|
|
.region-cell-area {
|
|
/* display: none; */
|
|
max-height: 500rpx;
|
|
overflow: auto;
|
|
}
|
|
|
|
.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;
|
|
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/*区域营收占比*/
|
|
.operation-bgfc {
|
|
background-color: #FCFCFC;
|
|
padding-bottom: 32rpx;
|
|
}
|
|
|
|
.operation-tab-box {
|
|
margin: 20rpx 32rpx 0 32rpx;
|
|
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;
|
|
margin: 0 32rpx 0 32rpx;
|
|
/*height: 2.5rem;*/
|
|
/*margin: 0 auto;*/
|
|
overflow: hidden;
|
|
background-color: #fff;
|
|
border-radius: 12rpx;
|
|
}
|
|
|
|
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; */
|
|
}
|
|
|
|
.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>
|