jp-charge/pagesFinance/statistics/index.vue

<template>
	<view>

		<view class="navbar-tit">{{title}}运管中心</view>

		<view class="statisticsChart" style="margin-top: 120rpx;margin-bottom: 0px">
			<view class="statisticsChart-head">
				<h4>充电统计</h4>
				<view class="navbar-screen ">
					<u-button text="月落" size="mini" class="headbotton1" style="border-radius: 10px 0 0 10px;"
						:type="current==1?'primary':'info'" @click="changesub(1)">按天</u-button>
					<u-button text="月落" size="mini" class="headbotton2" style="border-radius: 0 10px 10px 0;"
						:type="current==2?'primary':'info'" @click="changesub(2)">按月</u-button>


				</view>
			</view>
		</view>

		<view class="statisticsData">

			<view class="detailstableHead" style="
						padding-top: 1px;
					">
				<view id="pieEcharts" style="min-height:250px;margin-top: 20px">

				</view>
			</view>
			<view class="detailstableHead" v-if="indexData&&false">

				<view class="detailsline">
					<view class="details-row  details-row-head-1 ">

						<view class="span1">今日收入</view>
						<view class="span2">{{indexData.todayAmount?indexData.todayAmount.toFixed(2):0}}<span>元</span>
						</view>
					</view>
					<view class="details-row details-row-head-2">
						<view class="span1">今日利润</view>
						<view class="span2">{{indexData.todayProfit?indexData.todayProfit.toFixed(2):0}}<span>元</span>
						</view>
					</view>
					<view class="details-row details-row-head-3">
						<view class="span1">今日笔数</view>
						<view class="span2">{{indexData.todayEQNum?indexData.todayEQNum:0}}<span>笔</span></view>
					</view>
				</view>
				<view class="detailsline">
					<view class="details-row details-row-head-1 ">

						<view class="span1">昨日收入</view>
						<view class="span2">
							{{indexData.yesterdayAmount?indexData.yesterdayAmount.toFixed(2):0}}<span>元</span></view>
					</view>
					<view class="details-row details-row-head-2">
						<view class="span1">昨日利润</view>
						<view class="span2">
							{{indexData.yesterdayProfit?indexData.yesterdayProfit.toFixed(2):0}}<span>元</span></view>
					</view>
					<view class="details-row details-row-head-3">
						<view class="span1">昨日笔数</view>
						<view class="span2">{{indexData.yesterdayEQNum?indexData.yesterdayEQNum:0}}<span>笔</span></view>
					</view>
				</view>
				<view class="detailsline—bottom">
					<view class="details-row details-row-head-1">

						<view class="span1">本月收入</view>
						<view class="span2">
							{{indexData.thisMonthAmount?indexData.thisMonthAmount.toFixed(2):0}}<span>元</span></view>
					</view>
					<view class="details-row details-row-head-2">
						<view class="span1">本月利润</view>
						<view class="span2">
							{{indexData.thisMonthProfit?indexData.thisMonthProfit.toFixed(2):0}}<span>元</span></view>
					</view>
					<view class="details-row details-row-head-3">
						<view class="span1">本月笔数</view>
						<view class="span2">{{indexData.thisMonthEQNum?indexData.thisMonthEQNum:0}}<span>笔</span></view>
					</view>
				</view>

			</view>


		</view>

		<u-picker mode="time" v-model="popupShow" @confirm="changedate" :default-time="queryTime" :params="params">
		</u-picker>
		<u-picker mode="time" v-model="popupShow2" @confirm="changedate2" :default-time="queryTime2+'-1'"
			:params="params"></u-picker>
		<u-picker mode="selector" v-model="popupShow3" @confirm="changedate3" :range="stationList" range-key="name"
			:default-selector="[selectstationIndex]"></u-picker>


		<view class="statisticsChart">


			<view class="statisticsChart-head" style="margin-top: 20px;">
				<h4>流水统计</h4>
				<!-- <view class="navbar-screen" >
					 {{startTime}}至{{endTime}}
				 </view> -->
				<view class="navbar-screen" @click="popupShow = true" v-if="false">
					<span>{{showTime(queryTime)}}</span>
					<u-icon name="arrow-down" color="#b0b8c8" size="32" v-show="!popupShow"></u-icon>
					<u-icon name="arrow-up" color="#b0b8c8" size="32" v-show="popupShow"></u-icon>

				</view>


			</view>
			<u-calendar v-model="popupShow4" mode="range" @change="changedate4"></u-calendar>
			<view class="details detailstable">
				<p style="text-align: center; margin-bottom: 5px;" @click="popupShow4 = true">
					<img src="@/assets/img/riLine-calendar-todo-line.svg" align="absmiddle"
						style="height:40rpx;width: 40rpx ;">

					{{startTime}}至{{endTime}}
					<u-icon name="arrow-down" color="#b0b8c8" size="32" v-show="!popupShow4"></u-icon>
					<u-icon name="arrow-up" color="#b0b8c8" size="32" v-show="popupShow4"></u-icon>
				</p>

				<view class="detailsline detailslineHead" v-if="stationFlowList.length>1">


					<view class="details-row ">

						<view class="span1">总收入</view>
						<view class="span2">{{(allMoneySum).toFixed(2)}}<span>元</span></view>
					</view>
					<view class="details-row">
						<view class="span1">总利润<span>(服务费+月卡)</span></view>
						<view class="span2">{{(serviceMoneySum).toFixed(2)}}<span>元</span></view>
					</view>
				</view>
				<u-collapse :headStyle="{
								color:'#101010',
								 fontWeight: 'bold',
								 padding:'24rpx 0',
								 borderBottom: '1px solid #ededed'
								 
							}" v-if="stationFlowList.length">
					<u-collapse-item @change="changeitem" v-for="(item, index) in stationFlowList" :index="index"
						:key="index">
						<view slot="title" class="u-collapse-title u-line-1" style="width: 100%;">
							{{item.stationName}} <span style="float:right;"><span
									style="font-size: 24rpx;margin-right: 8rpx;font-weight: normal;">总收入</span>{{item.actualMoney.toFixed(2)}}元</span>
						</view>

						<!-- -->
						<view class="detailsline">


							<view class="details-row details-row-1">

								<view class="span1">电费</view>
								<view class="span2">{{item.elecMoney.toFixed(2)}}<span>元</span></view>
							</view>
							<view class="details-row">
								<view class="span1">服务费</view>
								<view class="span2">{{item.serviceMoney.toFixed(2)}}<span>元</span></view>
							</view>
						</view>

						<view class="detailsline">
							<view class="details-row details-row-1">

								<view class="span1">总用电量</view>
								<view class="span2">{{(item.eq/10000).toFixed(1)}}<span>度</span></view>
							</view>
							<view class="details-row">


								<view class="span1">充电枪数量</view>
								<view class="span2">快充{{item.fastNum}}/慢充{{item.slowNum}}</view>
							</view>
						</view>

						<view class="detailsline" v-if="item.fastNum&&item.slowNum">
							<view class="details-row details-row-1">


								<view class="span1">快充枪平均充电量</view>
								<view class="span2" v-if="item.fastNum">
									{{(item.averageFast/10000).toFixed(1)}}<span>度/枪/天</span></view>
								<view class="span2" v-else>0<span>度/枪/天</span></view>
							</view>
							<view class="details-row">

								<view class="span1">慢充枪平均充电量</view>
								<view class="span2" v-if="item.slowNum">
									{{(item.averageSlow/10000).toFixed(1)}}<span>度/枪/天</span></view>
								<view class="span2" v-else>0<span>度/枪/天</span></view>
							</view>
						</view>

						<view class="detailsline" v-if="item.fastNum&&item.slowNum">
							<view class="details-row details-row-1">


								<view class="span1">月卡收益</view>
								<view class="span2">{{(item.cardMoney).toFixed(2)}}<span>元</span></view>

							</view>
							<view class="details-row">


							</view>
						</view>


						<view v-if="item.fastNum&&item.slowNum"
							:style="item.slowDayNum==nowTime?'color: #ffffff;':'border-bottom: 1px solid #ededed;'">
							查询范围内实际订单天数{{item.slowDayNum}}</view>

					</u-collapse-item>
				</u-collapse>




			</view>

			<view class="statisticsChart-head" style="margin-top: 20px;">
				<h4>投资人收益统计</h4>
				<!-- <view class="navbar-screen" >
					 {{startTime}}至{{endTime}}
				 </view> -->
				<!-- <view class="navbar-screen" @click="popupShow2 = true"><span>筛选</span>
					<u-icon name="filter-2-fill" custom-prefix="custom-icon" color="#b0b8c8" size="32"></u-icon>
				</view> -->


			</view>

			<view class="details" v-if="indexData2&&indexData2.incomeMap">

				<view class="details-row2">
					<p @click="popupShow3 = true">{{selectstationName}}
						<u-icon name="arrow-down" color="#b0b8c8" size="32" v-show="!popupShow3"></u-icon>
						<u-icon name="arrow-up" color="#b0b8c8" size="32" v-show="popupShow3"></u-icon>
					</p>
					<p @click="popupShow2 = true">
						{{showTime(queryTime2)}}
						<u-icon name="arrow-down" color="#b0b8c8" size="32" v-show="!popupShow2"></u-icon>
						<u-icon name="arrow-up" color="#b0b8c8" size="32" v-show="popupShow2"></u-icon>
					</p>
				</view>

				<view class="details-row">
					<p>投资人收入</p>
					<span>{{indexData2.incomeMap.incomeAmount.toFixed(2)}}元</span>
				</view>
				<view class="details-row">
					<p>预估用电度数</p>
					<span>{{(indexData2.incomeMap.electricQuantity/10000).toFixed(1)}}度</span>
				</view>
				<view class="details-row">
					<p>预估电费</p>
					<span>{{indexData2.incomeMap.costAmount.toFixed(2)}}元</span>
				</view>
				<view class="details-row">
					<p>服务费预估收益</p>
					<span>{{indexData2.incomeMap.serviceAmount.toFixed(2)}}元</span>
				</view>
				<view class="details-row">
					<p>月卡收益</p>
					<span>{{indexData2.incomeMap.cardIncomeAmount.toFixed(2)}}元</span>
				</view>
				<view class="details-row">
					<p>预估总利润</p>
					<span>{{(indexData2.incomeMap.serviceAmount+indexData2.incomeMap.cardIncomeAmount).toFixed(2)}}元</span>
				</view>
			</view>

		</view>
		<Tabbar :current="0" ref="tabbarMain"></Tabbar>
		<!-- 		<u-tabbar v-model="current" :list="tabbarList" active-color="#185ac6"></u-tabbar>
 -->
	</view>
</template>

<script>
	import Tabbar from '@/components/TabbarFinance.vue'
	import * as API from '@/apis/finance.js'
	import * as echarts from "echarts";
	//require("@/apis/echarts-5-3.min.js")
	//import * as echarts from "@/apis/echarts-5-3.min.js";
	import {
		daysDistance,
		beforeTimeStamp,
		currentTimeStamp,
		parseUnixTime
	} from '@/utils'
	export default {
		data() {
			return {
				popupShow3: false,
				params: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				},
				isinit: true,
				form: {},
				form2: {},
				selecttype: "",
				selectstationId: "",
				selectdeviceNo: "",
				popupShow2: false,
				popupShow: false,
				popupShow4: false,
				nowTime: 0,
				selectstationId2: "",
				selectstationIndex: 0,
				selectstationName: "",
				info: {},
				title: "",
				showdate: false,
				showdate2: false,

				queryTime: "",
				queryTime2: "",

				indexData: {},
				indexData3: null,
				indexData2: null,
				type_head: '1',
				startDate_head: '',
				changeitemBl: false,

				myChart: null,
				myChartReady: false,
				myChartTime: false,
				subsection: [{
						name: '金额'
					},
					{
						name: '笔数'
					}
				],
				stationFlowList: [],
				serviceMoneySum: 0,
				allMoneySum: 0,
				stationList: [],
				stationListSon: [],
				tabbarList: [{
						iconPath: "bar-chart-box-fill",
						selectedIconPath: "bar-chart-box-fill",
						text: '统计',
						count: 0,
						isDot: true,
						customIcon: true,
					},
					{
						iconPath: "article-fill",
						selectedIconPath: "article-fill",
						text: '明细',
						midButton: true,
						customIcon: true,
					},

					{
						iconPath: "account-pin-box-fill",
						selectedIconPath: "account-pin-box-fill",
						text: '我的',
						count: 0,
						isDot: false,
						customIcon: true,
					},
				],
				endTime: '',
				endTime2: '',

				current: 1,
				background: {
					background: 'none'
				},
				value: '',
				type: 'select',
				show: false,
				border: true,
				step: 0,
				stepname: '',
				startTime: '',
				stepid: 0,

			}
		},
		onShow() {
			if (this.$refs.tabbarMain) {
				this.$refs.tabbarMain.setcount(0);
			}
		},
		onLoad() {


			this.info = this.carhelp.getPersonInfo("merchantUser")
			this.title = this.info.merchantAccountName
		},
		components: {
			Tabbar

		},
		onReady() {
			var date = new Date();
			this.nowTime = 7


			this.queryTime = parseUnixTime(currentTimeStamp(), '{y}-{m}');
			this.queryTime2 = parseUnixTime(currentTimeStamp(), '{y}-{m}'),


				this.startDate_head = parseUnixTime(beforeTimeStamp(30 ), '{y}-{m}-{d}')
			this.startTime = parseUnixTime(beforeTimeStamp(7), '{y}-{m}-{d}')
			this.endTime = parseUnixTime(beforeTimeStamp(1), '{y}-{m}-{d}')
			//this.startTime2 = parseUnixTime(beforeTimeStamp(6), '{y}-{m}-{d}')
			this.endTime2 = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}')

			this.getStation()
		},
		computed: {

			// startTime(){
			// 	return this.queryTime+'-1'
			// },
			startTime2() {
				return this.queryTime2 + '-1'
			},

		},
		methods: {
			changeitem(e) {
				if (this.stationFlowList.length > 1 && e.index == this.stationFlowList.length - 1 && e.show) {
					this.changeitemBl = true;
				} else {
					this.changeitemBl = false;
				}
			},
			showTime(name) {
				if (!name) {
					return ''
				}
				return name.replace('-', '年') + '月';
			},
			getStation(bl) {

				API.stationList().then((res) => {

					this.stationList = res.data.stationList
					this.stationList.unshift({
						id: '',
						name: "全部站点"
					})
					this.selectstationName = "全部站点"

					this.stationListSon = res.data.deviceList
					this.getDataHome2()
					this.getData()
					this.getData2()
				}).catch(error => {
					uni.showToast({

						title: error
					})
				})
			},
			resetBtn() {
				this.nowTime = 7
				this.startTime = parseUnixTime(beforeTimeStamp(6), '{y}-{m}-{d}')
				this.endTime = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}')



				this.selecttype = ""
				this.selectstationId = ""
				this.selectdeviceNo = ""

				this.form = {

					type: this.selecttype,
					stationId: this.selectstationId,
					deviceNo: this.selectdeviceNo,
				};
				this.popupShow = false;
				this.list = [];
				this.getData()

			},
			okbtn() {
				this.popupShow = false;

				this.form = {

					type: this.selecttype,
					stationId: this.selectstationId,
					deviceNo: this.selectdeviceNo,
				};
				this.list = [];
				this.getData()
			},
			resetBtn2() {
				this.startTime2 = parseUnixTime(beforeTimeStamp(6), '{y}-{m}-{d}')
				this.endTime2 = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}')



				this.selectstationId2 = ""

				this.form2 = {

					stationId: this.selectstationId2,

				};
				this.popupShow2 = false;

				this.getData2()

			},
			okbtn2() {
				this.popupShow2 = false;

				this.form2 = {

					stationId: this.selectstationId2,

				};

				this.getData2()
			},
			getDataHome2() {
				var endtime = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}')

				API.homeHeadChargingStatistics({
					type: this.type_head,
					startDate: this.startDate_head,
					endDate: endtime
				}).then((res) => {
					this.indexData3 = res.data;

					this.getPie()
				}).catch(error => {
					uni.showToast({

						title: error
					})
				})
			},
			getDataHome() {




				API.homeHeadStatistics().then((res) => {
					this.indexData = res.data;

				}).catch(error => {
					uni.showToast({

						title: error
					})
				})
			},
			getData() {

				this.form.startDate = this.startTime,
					this.form.endDate = this.endTime

				API.homeFlowStatistics(this.form).then((res) => {
					this.stationFlowList = res.data.stationFlowList;
					this.nowTime = daysDistance(this.startTime, this.endTime) + 1;
					this.serviceMoneySum = 0;
					this.allMoneySum = 0;
					for (var i in this.stationFlowList) {
						var item = this.stationFlowList[i];

						this.allMoneySum += item.actualMoney
						this.serviceMoneySum += item.serviceMoney
						this.serviceMoneySum += item.cardMoney
					}


				}).catch(error => {
					uni.showToast({

						title: error
					})
				})
			},
			getData2() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})

				this.form2.startDate = this.startTime2,
					this.form2.endDate = this.endTime2

				API.homeIncomeStatistics(this.form2).then((res) => {
					this.indexData2 = res.data

					uni.hideLoading()

				}).catch(error => {
					uni.showToast({

						title: error
					})
				})
			},
			changesub(e) {

				this.current = e
				this.type_head = e;
				if (e == 1) {
					this.startDate_head = parseUnixTime(beforeTimeStamp(30 ), '{y}-{m}-{d}')
				} else {
					this.startDate_head = parseUnixTime(beforeTimeStamp(365), '{y}-{m}-01')
				}
				//	this.getPie()
				this.getDataHome2()
			},
			changedate4(e) {
				this.startTime = e.startDate
				this.endTime = e.endDate
				this.okbtn()

			},
			changedate3(e) {

				var index = e[0];
				var obj = this.stationList[index];
				this.selectstationId2 = obj.id;
				this.selectstationIndex = index;
				this.selectstationName = obj.name;
				this.okbtn2()
			},
			changedate(e) {


				this.queryTime = e.year + '-' + e.month;
				this.startTime = e.year + '-' + e.month + '-1';
				if (e.month == '12') {
					this.endTime = (e.year) + "/12/31"
				} else {
					var b = e.year + '/' + (parseInt(e.month) + 1) + '/1';
					var a = beforeTimeStamp(1, b);
					this.endTime = parseUnixTime(a, '{y}-{m}-{d}')

				}

				this.okbtn()
			},
			changedate2(e) {

				this.queryTime2 = e.year + '-' + e.month;

				if (e.month == '12') {
					this.endTime2 = (e.year) + "/12/31"
				} else {
					var b = e.year + '/' + (parseInt(e.month) + 1) + '/1';
					var a = beforeTimeStamp(1, b);
					this.endTime2 = parseUnixTime(a, '{y}-{m}-{d}')

				}

				this.okbtn2()

			},

			getPie() {

				var getData = this.indexData3.graphMap;

				//var unit = this.current ? '笔' : '元'
				var colorName = "#333"
				this.showlist1 = ['收入', '利润', '次数'];
				var sz2 = ['todayAmount', 'todayProfit', 'todayEQNum'];
				if (!this.myChart) {
					this.myChart = echarts.init(document.getElementById('pieEcharts'));
					this.myChart.on("dataZoom", function(res){
						console.log(res)
					}); 
				}
				this.myChart.clear();
				var timelist = []
				for (var i in getData) {
					if (this.type_head == 1) {
						timelist.push(i.substring(5))
					} else {
						timelist.push(i)
					}

				}
				var list = [];
				for (var j in this.showlist1) {
					
					var ap = {
						name: this.showlist1[j],
						type: 'line',
						
						  
						// label: {
						// 	show: true,
						// 	position: 'top'
						// },
						data: []
					}
					if (this.type_head == 1) {
						// ap.symbol='circle'
						ap.symbolSize=3;
					}
					for (var i in getData) {
						//var time=this.queryDate.replace("-","/").replace("-","/")
						//time+' '+i
						var obj = getData[i][sz2[j]];
						//'todayAmount', 'todayProfit', 'todayEQNum'
						if(getData[i].todayAmount==0&&getData[i].todayProfit==0&&getData[i].todayEQNum==0){
							continue;
						}
						var time = i
						if (this.type_head == 1) {
							time = i.substring(5)
						} else {

						}

						ap.data.push([time, obj]);
					}
					list.push(ap)


				}

				// 指定图表的配置项和数据
				var option = {
						
						tooltip: {
							
							formatter: (value) => {
								var info = value;
								
								var name=value[0].data[0];
								var style="float: right;margin-left: 3px;"
								var text1=""
								for(var i in value){
									var u="元"
									if(value[i].seriesName=='次数'){
										u='次'
									}
									text1+="<p>"+value[i].marker+value[i].seriesName+'<span style="'+style+'">'+value[i].data[1]+u+'</span></p>';
								}
								
								return `<p>${name}</p>`+text1

							},
						
						trigger: 'axis',
						borderColor: "#F0F0F0",
						borderWidth: 1,
						backgroundColor: "#ffffff",
						textStyle: {
							color: "#333"
						}
					},
					legend: {
						data: this.showlist1,
						textStyle: {
							color: "#333"
						}
					},
					grid: {
						top: '13%',
						left: '3%',
						right: '8%',
						bottom: '16%',
						containLabel: true
					},

					xAxis: {

						type: 'category',
						splitNumber: 4,
						boundaryGap: false,

						axisLabel: {

							textStyle: {
								color: "#333"
							}
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: "#333"
							}
						},
					},
					yAxis: {
						type: 'value',
						//	name: '单位('+this.typeN+')',
						axisLabel: {

							textStyle: {
								color: "#333"
							}
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: "#333"
							}
						},
					},

					series: list
			};

			if (this.type_head == 1) {
				option.dataZoom = [{
						type: 'inside',
						start: 0,
						end: 100
					},
					{
						start: 0,
						end: 100
					}
				]
				
				 
			} else {
				//timelist.push(i)
			}
			console.log(option)
			// 使用刚指定的配置项和数据显示图表。
			this.myChart.setOption(option);



		}
	}
	}
</script>
<style>
	page {
		background: url(../../assets/img/index_header_bg.png) no-repeat top center #f7f7f7;
		background-size: 100%;
	}
</style>

<style lang="scss" scoped>
	.headbotton1:after {
		border-radius: 15px 0 0 15px;
	}

	.headbotton2:after {
		border-radius: 0 15px 15px 0;
	}

	.detailstable {
		padding: 40rpx 30rpx !important;
	}

	.detailstableHead {
		.span1 {
			font-size: 32rpx !important;
		}

		.details-row-head-1 {}

		.details-row-head-2 {}

		.details-row-head-3 {
			width: 30% !important;
			max-width: 150rpx;

			.span {}
		}

		.span2 {
			font-size: 44rpx !important;
			font-weight: bold;
			width: 100%;
			color: #101010;

			span {
				font-size: 24rpx !important;
			}
		}
	}

	.detailslineHead {
		border-top: 1px solid #ededed;
		;

		.details-row {
			padding-left: 8rpx !important;
		}

		font-size: 30rpx !important;

		.span1 span {
			font-size: 28rpx;
		}
	}

	.detailstable,
	.detailstableHead {
		font-size: 16px;

		p {
			font-size: 14px;
		}

		.details-row-main {
			border-bottom: 1px solid #ededed;
			padding: 10px 0;

		}

		.detailsline {
			border-bottom: 1px solid #ededed;
		}

		.detailsline,
		.detailsline—bottom {

			display: flex;

			.details-row {
				width: 50%;
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				padding-left: 16rpx;
				margin-bottom: 20rpx;

				.span1 {
					color: rgba(136, 136, 136, 100);
					font-size: 28rpx;
					width: 100%;
				}

				.span2 {
					font-size: 36rpx;
					width: 100%;
					color: #101010;

					span {
						font-size: 24rpx;
					}
				}
			}
		}

		.details-row-1 {
			width: 47%;
			padding-left: 0px !important;
			border-right: 1px solid #ededed;
		}


	}

	.details {

		padding: 20px;
		background-color: #fff;
		border-radius: 8px;

	}

	.details-title {
		margin-bottom: 16px;

		h4 {
			font-weight: normal;
			font-size: 16px;
			position: relative;
			padding-left: 10px;

			&::after {
				content: '';
				position: absolute;
				height: 12px;
				width: 4px;
				background-color: #27B148;
				left: 0;
				top: 5px;
			}
		}
	}

	.details-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 15px;

		p {
			color: #37393c;
			font-weight: bold;
		}
	}

	.details-row2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		// margin-top: 15px;

		p {
			// color: #37393c;
			// font-weight: bold;
		}
	}

	.popup-screen {
		padding: 20px;
		position: relative;

		.screen {
			padding-bottom: 30px;
		}

		.screen-item {
			margin-bottom: 20px;

			.screen-head {
				margin-bottom: 8px;
				font-size: 16px;
			}

			.screen-main {
				display: flex;
				//    display: -webkit-box;
				flex-wrap: wrap;

			}

			.screen-entry {
				width: 29%;
				padding: 6px 0;
				display: flex;
				align-items: center;
				justify-content: center;


				background-color: #F2F5FA;
				text-align: center;
				margin-bottom: 10px;
				border-radius: 3px;

				margin-right: 6px;

			}

			.screen-entry.active {
				background-color: #185AC6;
				color: #fff;
			}
		}

		.screen-foot {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			display: flex;
			height: 50px;
			border-top: 1px solid #ededed;

			.screen-btn-l {
				background-color: #fff;
				flex: 0.2;
				text-align: center;
				line-height: 50px;
			}

			.screen-btn-r {
				flex: 0.8;
				text-align: center;
				line-height: 50px;
				background-color: #185AC6;
				color: #fff;
			}
		}
	}

	.navbar-tit {
		color: #fff;
		font-size: 24px;
		padding-left: 15px;
		padding-top: 10px;
	}

	.statisticsData {
		background-color: #fff;
		margin: 0px 24rpx 24rpx;

		//padding:0px 24rpx 24rpx;
		border-radius: 8px;


	}

	.statisticsDataMain {
		flex-wrap: wrap;
		display: flex;

	}

	.statisticsData-item {
		flex: 1;
		width: 40%;

		.statisticsData-head {
			display: flex;
			align-items: center;

			p {
				color: #637AA2;
				font-size: 12px;
			}
		}

		.statisticsData-main {
			margin-top: 4px;
			font-size: 18px;
		}

		.statisticsData-foot {
			display: flex;
			align-items: center;
			margin-top: 16px;

			p {
				color: #637AA2;
			}

			h4 {
				margin-left: 8px;
			}
		}
	}

	.statisticsChart {
		margin: 16px;

		.statisticsChart-head {
			margin-bottom: 5px;
			display: flex;
			justify-content: space-between;
			align-items: center;

			h4 {
				font-weight: normal;
				font-size: 16px;
				position: relative;
				padding-left: 10px;

				&::after {
					content: '';
					position: absolute;
					height: 12px;
					width: 4px;
					background-color: #4E8DF6;
					left: 0;
					top: 5px;
				}
			}

			.statisticsChart-time {
				display: flex;
				align-items: center;

				p {
					color: #666;
				}
			}
		}

		.statisticsChart-main {
			background-color: #fff;
			padding: 10px 16px 16px 16px;
			border-radius: 8px;
		}
	}
</style>