<template>
	<div>
		<view class="page-body" v-if="showPage">
			<AnhHead :today="today" :headMsg="headMsg" :lastDay="lastDay"
				:provinceCode="theRequest&&theRequest.ProvinceCode" @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">
					<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" @tap="selectTab('nowTab',1)"
								v-if="theRequest.ProvinceCode==340000" :class="{'active':nowTab==1}">经营模式</div>
							<div class="operation-tab-unit" @tap="selectTab('nowTab',2)" :class="{'active':nowTab==2}">
								经营业态</div>
							<div class="operation-tab-unit" @tap="selectTab('nowTab',3)"
								v-if="areaProgress.length && areaProgress.length>1" :class="{'active':nowTab==3}">区域营收
							</div>
						</div>
						<div class="operation-content-box">
							<div v-show="nowTab==1 " v-if="modelProgress.length>0&& theRequest.ProvinceCode==340000">
								<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 v-show="nowTab==2" 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==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>
					</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;">门店上传&nbsp;&nbsp; <span
							class="upload-count">{{headMsg.uploadState}}</span></view>
				</div>
				<template v-if="theRequest && theRequest.GroupType==1020 && regionList.length">
					<div v-for="(item,i) in regionList[0].child" :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.totalcount>item.uploadcount?$util.fmoney((item.uploadcount/item.totalcount)*100,2):100}}</text>
								<text>%</text>
							</div>
						</div>
						<div class="region-cell-unit"
							:class="{'ct-red':item.uploadcount!=item.totalcount,'weisc-ico':item.uploadcount!=item.totalcount}">
							{{item.uploadcount+'/'+item.totalcount}}
						</div>
						<div class="region-cell-image">
							<text class="uni-icon-arrowright uni-icon"></text>
						</div>
					</div>
				</template>

        <!--  第二种情况 v-if已经区分  -->
				<template v-else-if="theRequest && theRequest.GroupType==1000">
					<!-- <div class="region-title" :class="{'active':regionShow1}">省内区域</div> -->
					<div v-show="regionShow1">
						<block v-for="(item,i) in regionList" :key="i">
							<div class=" region-cell" @tap="toggleRegion(item)">
								<div class="region-cell-unit">
									<text>{{item.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.totalcount>item.uploadcount)? $util.fmoney((item.uploadcount/item.totalcount)*100,2) : '100.00'}}</text>
										<text>%</text>
									</div>
								</div>
								<div class="region-cell-unit" :class="{'ct-red':item.uploadcount!=item.totalcount}">
									{{item.uploadcount+'/'+item.totalcount}}
								</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.child" :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.uploadcount!=child.totalcount}">
										{{child.uploadcount+'/'+child.totalcount}}
									</div>
								</li>
							</ul>
						</block>
					</div>
				</template>
				<template v-else>
					<shopCell v-for="(item,i) in regionList" :key="i" :item='item' @toggleShow="toggleShow" :i='i' />
					
				</template>
			</view>
			<template v-if="theRequest && theRequest.ProvinceCode==620000">
				<div class="uni-inline-item modle-title">
					<image src="/static/images/revenue/product-ranking.png" mode="aspectFit"></image>
					<text class="strong-text">商品销售排行</text>
				</div>
				<RankContent :wechatPushSalesList="wechatPushSalesList" v-if="!isLoading"></RankContent>
			</template>
		</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.js';
	import shopCell from './components/listUnit.vue'
	import AnhHead from './components/anhHead.vue'
	import RankContent from './components/RankContent.vue'
	import anhuiYestodayRevenueData from './components/anhuiYestodayRevenueData.js'
	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,
				regionShow1: true,
				regionProgress: null,
				tradeType: null,
				areaProgress: null,
				modelProgress: null,
				isup: true,
				wechatPushSalesList: null // 甘肃单品排行数据
			}
		},
		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,
			RankContent
		},
		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.theRequest.month = this.$util.cutDate(e.detail.value, 'YYYYMM')
					this.sevenDate = [this.$util.cutDate(selectT, 'MM.DD', -13), this.$util.cutDate(
						selectT, 'MM.DD', -7)]
					uni.showLoading({
						title: '正在加载...',
						mask: true
					})
					this.initData()
					// 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/AnhuiServerpart?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 != 0 && res.Data.TOTALPRICE != 0) ? 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()
				})

			},

			showPie(obj) {
				let data = {
					series: []
				}
				const ctx = uni.createCanvasContext(obj.id, this);
				data.series = data.series.concat(obj.data)
				rincanvas[obj.id] = new uCharts({
          // 小程序图表工具
					// $this: this,
					// canvasId: obj.id,
					context: ctx,
					color: 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: {
						ring: {
							ringWidth: 40,
							labelWidth: 16,
							border: true,
							borderWidth: 1,

							borderColor: '#fff'
						}
					},
				});
			},
			getDetail(obj) {
				let _this = this
				this.$request.$webGet('CommercialApi/Revenue/GetServerpartEndAccountList', {
					Serverpart_ID: obj.ServerpartIds,
					pushProvinceCode: obj.ProvinceCode,
					Statistics_Date: obj.time,

				}).then(res => {
					if (res.Result_Code != 100) return
					res.Result_Data.ShopEndaccountList.map(n => {
						n.show = false
						n.detail = this.getListDetail(n)
					})

					_this.regionList = res.Result_Data.ShopEndaccountList
				})
			},
			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()
			},
			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
				}
			},
			async initData() { // 初始化营收数据
				let _this = this
				const [reginList, totalData, busniessTypePie, busniessTradePie, busniessAreaPie] =
				await anhuiYestodayRevenueData.getData(this.theRequest) // 获取实时数据
				if (this.theRequest.GroupType !== 1010) {

					this.regionList = reginList // 营收上传列表 reginListModel[]
				}
				// 组合及格式化 头部卡片总营收数据。
				totalData.tickave = totalData.ticketCount > 0 ? this.$util.fmoney(totalData.cashPay / totalData
					.ticketCount, 2) : 0
				totalData.countave = totalData.totalCount > 0 ? this.$util.fmoney(totalData.cashPay / totalData
					.totalCount, 2) : 0

				totalData.totalMoneyShow = this.$util.fmoney(totalData.cashPay) // 营收总数据格式化
				totalData.dayOfShow = this.$util.cutDate(this.theRequest.time, 'MM月DD日') // 当前日期
				totalData.budgetamoutShow = totalData.budgetAmount ? _this.$util.fmoney(totalData.budgetAmount) :
					0.00 // 预算总营收
				totalData.diffBudgetTotal = Math.abs(totalData.budgetAmount - totalData.cashPay) // 预算和实际差额
				totalData.diffBili = totalData.budgetAmount > 0 ? this.$util.fmoney(( totalData.diffBudgetTotal /
					totalData.budgetAmount) * 100, 2) : '100' // 预算和实际增长额比例

        _this.headMsg = totalData
				// 饼图分析及数据条形分析
				const [progressList, pieList] = this.getProgressData(busniessTypePie, totalData.cashPay)
				this.modelProgress = progressList
				// 经营类型分析
				var colors1 = ['#FFAC37', '#6B75B8'];
				console.log(pieList)
				this.showPie({
					id: 'modelCont',
					data: pieList,
					colors: colors1,
				});
				// 经营业态

				// 饼图分析及数据条形分析
				const [tprogressList, tpieList] = this.getProgressData(busniessTradePie, totalData.cashPay)

				this.regionProgress = tprogressList
				// 经营类型分析
				var colors2 = ['#5E67B4', '#4E5699', '#75B7AD', '#AFB7E6'];
				this.showPie({
					id: 'businessCont',
					data: tpieList,
					colors: colors2,
				});

				// 饼图分析及数据条形分析
				const [aprogressList, apieList] = this.getProgressData(busniessAreaPie, totalData.cashPay)
				this.areaProgress = aprogressList
				// 区域营收分析
				var colors3 = ['#FFAC37', '#d8ece9', '#f7f5f6', '#b2b7e3', '#F4B27A', '#F3B1C9', '#e0e3f7', '#FFE886',
					'#f7f5f6'
				];
				this.showPie({
					id: 'areaCont',
					data: apieList,
					colors: colors3,
				});

				if (reginList.length) {
					this.showPage = true
				}
				this.isLoading = false
				uni.hideLoading()
			},
			getProgressData(data, total) {
				var _data1 = [];
				var _data2 = [];
				let _this = this
				data.forEach((n, i) => {

					_data1.push({
						...n,
						textColor: '#999',
						formatter: function(arg) {
							
							if (typeof arg === 'number') {
								return [n.name, (arg * 100).toFixed(2) + '%']
							} else {
								return [arg.name, (arg._proportion_ * 100).toFixed(2) + '%']
							}
							
						}
					});

					_data2.push({
						name: n.name,
						num: n.data,
						data: _this.$util.fmoney(n.data, 2), //+Number(data2[n[0]])
						bili: _this.$util.fmoney((n.data / total) * 100, 2)
					});

				});
				_data1.sort(function(a, b) {
					return b.data - a.data
				})
				_data2.sort(function(a, b) {
					return b.num - a.num
				})
				return [_data2, _data1];
			},
			async getRankContent() { // 甘肃需要单品排行显示
				const {
					ProvinceCode,
					time
				} = this.theRequest
				
				const data = await this.$request.$webGet('CommercialApi/Revenue/GetWechatPushSalesList', {
					pushProvinceCode: ProvinceCode,
					Statistics_Date: time
				})
				
				if (data.Result_Code === 100 && data.Result_Data.TotalCount > 0) {
						this.wechatPushSalesList = {}
						data.Result_Data.List.forEach(n => {
						this.wechatPushSalesList[n.Data_Type]= n.GoodsList
					})
			
				} else {
					this.wechatPushSalesList = {}
				}
				this.$forceUpdate()
			},
		},

		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')
				option.month = this.$util.cutDate(option.time, 'YYYYMM')

				this.initData()

			} else { // 默认

				if (this.PushAuthority.length > 0) {
					this.theRequest = this.defaultMsg() || {}
          console.log('theRequest',this.theRequest)

					this.theRequest.time = this.lastDay
					this.theRequest.month = this.$util.cutDate(this.lastDay, 'YYYYMM')
					this.initData()
				} else {
					uni.hideLoading()
					this.theRequest = null
					this.isLoading = false
					this.showPage = false
					this.opacity = 1

				}
			}
			this.nowTab = this.theRequest.ProvinceCode == 340000 ? 1 : 2
			this.todayAmount()
			if (this.theRequest.GroupType == 1010) {
				this.getDetail(this.theRequest)
			}
			// 若省份为甘肃，则加载甘肃单品排行
			if (this.theRequest.ProvinceCode == 620000) {
				
				this.getRankContent()
			}
		},

	}
</script>

<style scoped>
	.page-body {
		background: #fff;
		position: relative;
		padding-bottom: 80rpx;
	}

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