<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>
